@charset "utf-8";
* {
	min-height:0;
	min-width : 0;
	}

body{
	height: 100%;
	font-family: YakuHanJP_Noto,Noto Sans JP,sans-serif;
	background-size: cover;
	font-size: 1em;
	letter-spacing: 0.2em;
	background-color: #000;
	color:#fff;
	}


a 			{color: #20bfdb;text-decoration: none;cursor: pointer;font-weight: bold;}
a:visited	{color: #20bfdb;}
a:hover		{color: #2cddfc;}
a:focus, *:focus { outline:none; }

rt {font-size: 0.4em}


h1 {line-height: 1;}
h1>img {display: block;width: 200px;margin: 0 0 0 10px;}
@media only screen and (max-width: 768px) {
	h1>img {width: 150px;}
	}
	
h2 {
	padding: 0.8em 0 0.2em 0.8em;
	letter-spacing: 0;
	font-size: 2.4em;
	font-weight: bold;
	line-height: 1.4;
	background-color: #1b3290;
	background: -moz-linear-gradient(right,  rgba(18,159,195,0.95) 0%, rgba(29,61,150,0.95) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(right,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to left,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6129fc3', endColorstr='#e61d3d96',GradientType=1 ); /* IE6-9 */	
	}
h2>span {font-size: 0.5em;font-weight: normal;}

@media only screen and (max-width: 768px) {
	h2 {padding: 0.6em 0.6em 0.2em 0.6em;font-size: 2em;}
	}
@media only screen and (max-width: 480px) {
	h2 {font-size: 1.6em;}
	}

h3 {
	padding: 1.6em 1em 0.4em 1em;
	letter-spacing: 0;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1;
	border-bottom: 12px solid #c21500;
	border-image: linear-gradient(to left,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%);
	border-image-slice: 1;
	}
h3>span {font-size: 0.5em;font-weight: normal;}

@media only screen and (max-width: 768px) {
	h3 {padding: 1.6em 0.8em 0.4em 0.8em;font-size: 1.4em;border-bottom-width: 8px;}
	}
@media only screen and (max-width: 480px) {
	h3 {font-size: 1.3em;}
	}

h4 {
	padding: 1.6em 1em 0.4em 1em;
	letter-spacing: 0;
	font-size: 1.4em;
	}
@media only screen and (max-width: 768px) {
	h4 {padding: 1.6em 0.8em 0.4em 0.8em;font-size: 1.2em;}
	}

@media only screen and (max-width: 480px) {
	h4 {font-size: 1.1em;}
	}

h5 {}
h6 {}
p{}
dl {}
dt {}
dd {}
ul {}
li {}


table {
	border-collapse: collapse;
	margin: 2em auto 1em;
	}

th, td {
	border: none;
	padding: 5px 20px;
	vertical-align: top;
	}

th {
	word-break: keep-all;
	text-align: right;
	letter-spacing: 0;
	}

/*@media only screen and (max-width: 768px) {
	table.swtable, table.swtable tr {width: 100%;}
	table.swtable th, table.swtable td {display: block;text-align: center;}
	table.swtable th {border-bottom: 1px #fff solid;}
	table.swtable td {margin-bottom: 1em;}
}*/

strong {color: #D20030;}
em {text-decoration: none;font-style: normal;}
strong, em {font-weight: bold;}

/*フェード*/
a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}


/*大枠*/
.primaryContainer {
	margin: 0 auto;
	padding: 0;
	position: relative;
	line-height: 1.6;
	overflow: hidden;
	min-width: 1280px;
	}
@media only screen and (max-width: 768px) {
	.primaryContainer{min-width: inherit;}
	}

/*ヘッダ*/
header {
	box-sizing: border-box;
	width: 100%;
	min-width: 1280px;
	position: fixed;
	display: flex;
	z-index: 888;
	padding: 10px 0;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: #1b3290;
	background: -moz-linear-gradient(left,  rgba(18,159,195,0.95) 0%, rgba(29,61,150,0.95) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6129fc3', endColorstr='#e61d3d96',GradientType=1 ); /* IE6-9 */
	}

/*消える時のアニメ*/
header.site-header{transition: .6s;z-index: 999;}
header.site-header.hide{transform: translateY(-100%);}

@media only screen and (max-width: 768px) {
	header {min-width: inherit;}
	}

/*ナビゲーションメニューここから--------------------------------------------------------------------------*/
.menu-check-box, .menu-label, .mask-bg {display: none;}

.global-nav__list {
	display: flex;
	letter-spacing: 0;
	margin: 10px 5px 0 0;
	}

.global-nav__list li a {
	display: block;
	padding: 0 2em;
	border-left: 1px solid rgba(0,0,0,0.3);
	border-right: 1px solid rgba(255,255,255,0.4);
	text-decoration: none;
	color: #fff;
	line-height: 1;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	}
.global-nav__list li:first-child a {border-left: none;}
.global-nav__list li:last-child a {border-right: none;}

.global-nav__list li a.disabled {color: rgba(255,255,255,0.3);cursor: default;text-shadow: none;}


/*画面幅が狭くなったらハンバーガーメニュー化*/
@media only screen and (max-width: 768px) {
.menu-label {
	display: block;
	position: fixed;
	right: 0;
	top: 0;
	width: 50px; /* ボタンの高さ*/
	height: 50px; /* ボタンの幅 */
	z-index: 1000;
	cursor: pointer;
	background-color: #1eaac3;
	}

.hamburger__line {
	position: absolute;
	left: 12px;
	width: 26px;
	height: 3px;
	background-color: #fff;
	transition: all .6s;
	}
	.hamburger__line--1 {top: 16px;}
	.hamburger__line--2 {top: 24px;}
	.hamburger__line--3 {top: 32px;}

.global-nav__list {
	display: block;
	position: fixed;
	right: -320px; /* これで隠れる */
	top: 0;
	width: 300px; /* スマホに収まるくらい */
	height: 100vh;
	padding-top: 40px;
	background-color: #1b3290;
	background: -moz-linear-gradient(top,  rgba(18,159,195,0.95) 0%, rgba(29,61,150,0.95) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(18,159,195,0.95) 0%,rgba(29,61,150,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6129fc3', endColorstr='#e61d3d96',GradientType=1 ); /* IE6-9 */
	transition: all .6s;
	z-index: 999;
	overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	margin: 0;
	padding: 50px 0 0;
	list-style: none;
	}

.global-nav__list li {
	text-align: center;
	padding: 0 14px;
	}

.global-nav__list li a {
	display: block;
	padding: 16px 0;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: #fff;
	}

/*マスク*/
.mask-bg {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 120vh;
	z-index: 888;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
	}

	/*マスククリックでトグルを動作させるため*/
	.innner-label {
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
		}

/*メニューONの処理*/
.menu-check-box:checked ~ .global-nav__list {
	right: 0;
	}
	/*マスクを表示*/
	.menu-check-box:checked ~ .mask-bg {
		opacity: .7;
		visibility: visible;
		}
	/*トグルボタンのアニメ*/
	.menu-check-box:checked + .menu-label .hamburger__line--1 {
		transform: rotate(45deg);
		top: 24px;
		}
	.menu-check-box:checked + .menu-label .hamburger__line--2 {
		width: 0;
		left: 50%;
		}
	.menu-check-box:checked + .menu-label .hamburger__line--3 {
		transform: rotate(-45deg);
		top: 24px;
		}
}

/*ナビゲーションメニューここまで--------------------------------------------------------------------------*/



/*下部固定メニュー ここから------------------------------------------------------------------------------*/
#bottomMenu {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	}
/*ページトップに戻る*/
#bottomMenu a.gotop {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 80px;
	width: 80px;
	background: #1eaac3 url(../images/apps/arrow.svg) no-repeat center center;
	background-size: 70%;
	padding: 0;
	margin: 0 10px 10px 0;
	/*border: 3px rgb(255,255,255) solid;*/
	/*border-radius: 2px;*/
	/*box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.2);*/
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	text-decoration: none;
	z-index: 888;
	}
#bottomMenu a.gotop:hover {
	margin-bottom: 15px;
	}

@media only screen and (max-width: 768px) {
	#bottomMenu a.gotop {height: 50px;width: 50px;margin: 0;}
	#bottomMenu a.gotop:hover {margin-bottom: 0;}
	}


/*SNSシェアボタン*/
.shareBox {
	width: 100%;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
		bottom: 0px;
		left: calc(50% - 75px);
		display: flex;
		justify-content: space-between;
		width: 150px;
		height: auto;
		margin: 0px auto;
		padding: 0 0 35px;
		clear: none;
		z-index: 888;
		}

	.shareButtons>div>a {
		display: block;
		width: 30px;
		height: 30px;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons>div.fbBtn a 		{background-image: url("../images/sns_ico_01_fb.svg");}
	.shareButtons>div.tweetBtn a 	{background-image: url("../images/sns_ico_02_tw.svg");}
	.shareButtons>div.lineBtn a 	{background-image: url("../images/sns_ico_03_line.svg");}

@media only screen and (max-width: 768px) {
	.shareButtons {padding-bottom: 20px;}
	}

/*下部固定メニューここまで-------------------------------------------------------------------------------*/



/*コンテンツ全体をラップ*/
main {}
@media only screen and (max-width: 768px) {
	main {width:100%;}
	}

section {
	box-sizing: border-box;
    /*max-width: 1280px;*/
	margin: 0 auto 0;
	position: relative;
	}

section img {
	display: block;
	width: 100%;
	}

/*タイトル部*/
section#headContent {
	max-width: inherit;
	}
section#headContent>img {margin: 0;}
section#headContent>img.spimg {display: none;}
@media only screen and (max-width: 768px) {
	section#headContent>img.pcimg {display: none;}
	section#headContent>img.spimg {display: block;}	
}

.nintendoLogo {
	display: block;
	width: 130px;
	position: absolute;
	left:0px;
	top:60px;
	}
@media only screen and (max-width: 768px) {
	.nintendoLogo {
		width: 16%;
		left:0px;
		top:50px;
	}
}

/*キャプション*/
section#caption {
	max-width: inherit;
	padding: 4em 0;
	background-color:#222222;
	}
section#caption>div {
	text-align: center;
	text-shadow: 0 0 5px rgba(0,0,0,1),0 0 10px rgba(0,0,0,1);
}

.attentionBox {
	padding: 3em;
	font-size: 0.8em;
}


/*Twitter*/
.twitter {
	margin: 0 auto;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 6px;
	border: 1px rgba(0,0,0,0.25) solid;
	}

.twitter iframe {width: 740px!important;height: auto;}

.movieArea {
	width: 95%;
	max-width: 1200px;
	margin: 0 auto 3em;
	box-shadow: 0 15px 20px 0 rgba(0,0,0,0.5);
	}

/*youtube*/
.youtube {
	margin: 0 auto;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	}

.youtube iframe {
	position:absolute !important;
	top:0 !important;
	left:0 !important;
	width:100% !important;
	height:100% !important;
	}

/*汎用ボタン*/

.buttonBox {
	display: flex;	
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 95%;
	margin: 3em auto;
	}

.flexBox>div p.button {padding: 0;}
.button {
	box-sizing: border-box;
	flex-basis: 50%;
	padding: 0;
	margin: 1em 0 0;
	}
@media only screen and (max-width: 768px) {
	.button {flex-basis: 100%;}
}
.button a {
	display: block;
	box-sizing: border-box;
	width: 95%;
	max-width: 600px;
	padding: 15px 20px;
	margin: 0 auto;
	background: #fff600;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	color: #000;
	text-decoration: none;
	}

.button.tweet a {
	background-color: #1da1f2;
	color: #fff;
	}

.button.disabled a {
	background-color: #666;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	color:#333;
	}

.button a:hover {box-shadow: 0px 0px 30px 0px rgba(0,0,0,1);}
.button.disabled a:hover {box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);cursor:default;}


/*スマホサイズで適用したりしなかったり用*/
.sponly {display:none;}
.nosp{display:inherit;}

@media only screen and (max-width: 768px) {
	.sponly {display: block;}
	.nosp {display:none;}
	}

/*記事用のいろいろな定義*/	
.small	{font-size: 0.6em;}
.large	{font-size: 1.2em;}
.big	{font-weight: bold;font-size: 1.8em;}
.morebig {font-weight: bold;font-size: 2.2em;}
@media only screen and (max-width: 768px) {
	.big	{font-size: 1.4em;}
	.morebig {font-size: 1.8em;}
}
.center	{text-align: center;}
.spaced {padding: 1em;}
.left	{text-align: left;}
.right	{text-align: right;}
.attention {color: #FF0000;}
.clear {clear: both;}
.url{color: #FF0308;font-style: italic;}
.bold{font-weight: bold;}
.sun {color: #f00;}
.sat {color: #008FEB;}
.price {font-size: 1.4em;font-weight: bold;}
.markup{display:inline-block;font-size: 0.9em;color:#f60;}
.new {display:inline-block;background-color: #d71318;font-size: 0.6em;font-weight: bold;color:#fff;text-shadow: none;vertical-align:text-top;padding: 3px 10px;border-radius: 10px;margin-left: 0.5em;}


/*フッター ここから------------------------------------------------------------------------------*/
footer {
	box-sizing: border-box;
	padding: 100px 0 100px;
	background-size: cover;
	text-align: center;
	color: #eee;
	letter-spacing: 0.1em;
	font-size: 0.7em;
	/*text-shadow: 
    #000 2px 0px,  #000 -2px 0px,
    #000 0px -2px, #000 0px 2px,
    #000 2px 2px , #000 -2px 2px,
    #000 2px -2px, #000 -2px -2px,
    #000 1px 2px,  #000 -1px 2px,
    #000 1px -2px, #000 -1px -2px,
    #000 2px 1px,  #000 -2px 1px,
    #000 2px -1px, #000 -2px -1px;*/
	}

footer .taitoLogo {
	width: 200px;
	margin: 0 auto 30px;
	}

footer .gamearchivesLogo {font-size: 0.8em;}
footer .gamearchivesLogo img {
	width: 160px;
	margin-left: 1em;
	}

footer ul {
	flex: 1;
	height: 1em;
	padding: 0;
	margin: 30px auto;
	text-align: center;

	}

footer ul li {
	display: inline-block;
	list-style-type: none;
	border-right: 1px #fff solid;
	padding: 0 5px;
	text-align: center;
	line-height: 1;
	}

footer ul li:last-child {
	border: none;
	}

footer ul li a, footer ul li a:visited,footer ul li a:hover {
	color: #fff;
	text-decoration: none;
	}

footer p.copyright {
	margin: auto;
	font-size: 0.8em;
	}

@media only screen and (max-width: 768px) {
	footer {font-size: 0.6em;}
	}

/*フッター ここまで------------------------------------------------------------------------------*/



/*FlexBox*/
.flexBox {
	display: flex;
	max-width: 1600px;
	margin: 0 auto;
	box-sizing: border-box;
	justify-content:center;
	/*align-items: flex-start;*/
	align-items:flex-start;
	flex-wrap: wrap;
	}

	.flexBox>div {
		display: block;
		box-sizing: border-box;
		flex-basis: 25%;
		height: auto;
		padding: 2em 0;
		margin: 0 0 0;
		word-break: normal;
		word-wrap: normal;
		}

	.flexBox>div h3 {
		border: none;
		}

	.type1-3>div h3 {
		border-bottom: 3px #fff solid;
		}


	.flexBox>div h4 {}

	.flexBox>div p {
		padding: 2em 2em 0 2em;
		}

	.flexBox>div ul {
		padding: 2em 2em 0 3em;
		}

		ul.titlelist {display: flex;flex-wrap: wrap;}
		ul.titlelist li {flex-basis: 50%;}

@media only screen and (max-width: 768px) {
		ul.titlelist li {flex-basis: 100%;}
	}

.bottom {
	align-items: flex-end;
	}

.top {
	align-items: flex-start;
	} 

.boxset5>div {flex-basis: 20%;}
.boxset4>div {flex-basis: 25%;}
.boxset3>div {flex-basis: 33.3%;}
.boxset2>div {flex-basis: 50%;}
.type1-3>div:nth-child(odd) {flex-basis: 26%;}
.type1-3>div:nth-child(even) {flex-basis: 70%;}

@media only screen and (max-width: 768px){
.boxset5>div {flex-basis: 33.3%;}
.boxset4>div {flex-basis: 33.3%;}
.boxset3>div {flex-basis: 50%;}
.boxset2>div {flex-basis: 100%;}
.type1-3>div:nth-child(odd) {flex-basis: 70%;margin-bottom: -3em;}
.type1-3>div:nth-child(even) {flex-basis: 95%;margin-bottom: 4em;}

}

@media only screen and (max-width: 480px){
.boxset5>div {flex-basis: 50%;}
.boxset4>div {flex-basis: 50%;}
.boxset3>div {flex-basis: 100%;}
.boxset2>div {flex-basis: 100%;}	
}


/*商品紹介専用*/
.itemWrap {
	background-color: #222222;
	margin-top: 2px;
	}

.itemWrap>div:first-child {
	flex-basis: 45%;
	}

@media only screen and (max-width: 768px) {
	.itemWrap>div:first-child {
		order: 2;
		padding-top: 0;
		flex-basis: 95%;
		}

	.itemWrap>div:nth-child(2) {
		order: 1;
		padding-bottom: 0;
		}
	}

@media only screen and (max-width: 768px) {
	.flexBox>div.package {display: none;}	
	}

.package img {
	display: block;
	max-width: 369px;
	margin: 2em auto;
	}

.itemimg {
	display: block;
	max-width: 600px;
	margin: 2em auto;
	}