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

html,body{
	height: 100%;
    scrollbar-color: #69e0ff #00032c;
    scrollbar-width: thin;
	}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
  background: #00032c;
}

::-webkit-scrollbar-thumb {
  background: #69e0ff;
}

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: 500;}
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;}

	
h2 {
	padding: 0.5em 0;
	margin-bottom: 2em;
	letter-spacing: 0.5em;
	font-size: 2em;
	line-height: 1.4;
	text-align: center;
 background: rgb(0,174,234);
background: linear-gradient(0deg, rgba(0,174,234,0) 0%, rgba(1,147,198,0.25) 26%, rgba(2,125,169,1) 50%, rgba(0,147,200,1) 51%, rgba(2,125,169,1) 52%, rgba(1,148,200,0.25) 75%, rgba(0,174,234,0) 100%); 
}

h2>img {
	max-width: 420px;
	margin: 0 auto;
	}

@media only screen and (max-width: 768px) {
	h2>img {
		max-width: 300px;
		}
	}
@media only screen and (max-width: 480px) {
	}

h3 {
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.6;
	margin-bottom: 1em;
	border-bottom: 2px #00b1e0 solid;
	text-align: center;
	position: relative;
	color: #4bd9ff;
	text-shadow: 0px 0 2px rgba(100,194,255,1.0),0px 0 8px rgba(0,154,255,1.0);
	}


h3.deco {
	margin-bottom: 0.6em;
	border-bottom: none;
	}

h3.deco::before {
	position: absolute;
	top: 1.4em;
	left: calc(50% - 1px);
	width: 2px;
	height: 1.8em;
	content: "";
	background-color: #00f1f5;
	}

h3.deco::after {
	position: absolute;
	top: calc(3.2em - 3px);
	left: calc(50% - 3px);
	width: 6px;
	height: 6px;
	content: "";
	border-radius: 100%;
	background-color: #00f1f5;
	}


h3>span {font-size: 0.5em;font-weight: normal;}

@media only screen and (max-width: 768px) {
	}
@media only screen and (max-width: 480px) {
	}

h4 {
	padding: 0;
	letter-spacing: 0;
	font-size: 1.1em;
	}

h4.limited {
	color: #fff;
	font-size: 1.8em;
	}

@media only screen and (max-width: 1200px) {
	h4 {padding: 1.6em 0.8em 0.4em 0.8em;font-size: 1.2em;}
	h4.limited {font-size: 1.4em;}
	}

@media only screen and (max-width: 768px) {
	h4.limited {font-size: 1.2em;}
	}

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

h5 {}
h6 {}
p{padding: 1em;}

dl.newsbox {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	box-sizing: border-box;
	height: 5em;
	overflow-y: auto;
	scrollbar-color: #69e0ff #00032c;
    scrollbar-width: thin;
	}
dl.newsbox dt {box-sizing: border-box;flex-basis: 8em;word-break: normal;color: #00acdc;}
dl.newsbox dt:before {content: "■ ";}
dl.newsbox dd {box-sizing: border-box;flex-basis: calc(95% - 8em);word-break: normal;}


dl.qanda {
	padding: 1em;
	font-size: 0.9em;
	}

dl.qanda dt {
	font-weight: bold;
	}

dl.qanda dt:before {
	content: "Q. ";
	}

dl.qanda dd {
	padding-left: 1em;
	margin-bottom: 1em;
	color:#cef2ff;
	}

dl.qanda dd:before {
	content: "A. ";
	}


@media only screen and (max-width: 1200px) {
	dl.newsbox {height: 10em;}
	dl.newsbox dt, dl.newsbox dd {flex-basis: 100%;margin: 0;}
	dl.newsbox dd {margin-bottom: 1em;}
	}


ul {
	padding: 1em 1em 1em 2em;
	list-style-type: square;
	}

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: #ff0;}
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;
	}

#particles-js{ 
	position: fixed;
	z-index:-1;
	width: 100%;
	height: 100%;
	background-color: #00032c;
	}

/*大枠*/
.primaryContainer {
	margin: 0 auto;
	padding: 0;
	position: relative;
	line-height: 1.8;
	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: 0px 0;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgba(0,175,223, 0.3);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-bottom: 4px rgba(255,255,255, 0.1) solid
	}

/*消える時のアニメ*/
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;border-bottom: none;}
	}

.cuts {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	position: absolute;
	bottom: -10%;
	left: 0;
	list-style-type: none;
	padding: 0;
	margin: 0;
	}

.cuts li {
	flex-basis: 23%;
	box-shadow: 0 0 30px 0 rgba(21,161,217,0.9);
	}

.cuts li img {
	display: block;
	width: 100%;
	}

.catch {
	position: absolute;
	bottom: -45%;
	left: 6%;
	z-index: 99;
	width: 90%;
	}


@media only screen and (max-width: 768px) {
	.cuts {bottom: -30%;}
	.cuts li {flex-basis: 48%;margin-bottom: 2%;}
	.catch {bottom: 7%;}
}


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

nav.global-nav {
	margin: 0 auto;
	}

.global-nav__list {
	display: flex;
	letter-spacing: 0;
	margin: 0px 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.8);
	text-decoration: none;
	color: #fff;
	line-height: 1;
	letter-spacing: 0.13em;
	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: 10px;
	top: 10px;
	width: 50px; /* ボタンの高さ*/
	height: 50px; /* ボタンの幅 */
	z-index: 1000;
	cursor: pointer;
	background-color: rgba(105,224,255,1);
	box-shadow: 0px 0px 6px 0px rgba(0,109,180,1), 0px 0px 20px 0px rgba(0,109,180,0.8);
	}

.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: rgba(0,175,223, 0.5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border-left: 4px rgba(255,255,255, 0.1) solid;
	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: rgba(0,175,223, 0.3);
	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: 10px;
	right: 10px;
	height: 80px;
	width: 80px;
	background: rgba(105,224,255,1) 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: 0px 0px 6px 0px rgba(0,109,180,1), 0px 0px 20px 0px rgba(0,109,180,0.8);
	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 {
	bottom: 15px;
	background-color: rgba(159,234,255,1);box-shadow: 0px 0px 6px 0px rgba(29,147,224,1), 0px 0px 20px 0px rgba(29,147,224,1);
	}

@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 {

	}

div.continner {
	background-image: url("../images/nb/img_220310_xstation_wrap_bg_l.png"),url("../images/nb/img_220310_xstation_wrap_bg_r.png");
	background-position: left top,right top;
	background-repeat: no-repeat space,no-repeat space;
	margin-top: 25%;
	}

@media only screen and (max-width: 768px) {
	div.continner {
		background-image: none,none;
		width:100%;
		margin-top: 50%;
		}
	}


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;}


.tslogo {
	display: block;
	width: 130px;
	position: absolute;
	left:20px;
	top:80px;
	}

@media only screen and (max-width: 768px) {
	.tslogo {
		width: 16%;
		left:10px;
		top:10px;
		}
	}

.infobanner {
	display: block;
	width: 50%;
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 11%;
	transform: translate(-50%, 0);
	}

@media only screen and (max-width: 768px) {
	.infobanner {
		width: 100%;
		bottom: -16%;
		}
	}


/*キャプション*/
section#caption {
	max-width: inherit;
	padding: 4em 0;
	background-color: transparent;
	}
section#caption>div {
	text-align: center;
	}

.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;
	}


.button a {
	display: block;
	box-sizing: border-box;
	width: 95%;
	max-width: 600px;
	padding: 10px 20px;
	margin: 0 auto;
	background-color: rgba(105,224,255,1);
	box-shadow: 0px 0px 6px 0px rgba(0,109,180,1), 0px 0px 20px 0px rgba(0,109,180,0.8);
	font-size: 1.1em;
	font-weight: normal;
	line-height: 1.4;
	text-align: center;
	color: #002944;
	/*color: #fff;*/
	text-decoration: none;
	/*text-shadow: 0 0 5px rgba(0,0,0,0.6);*/
	}

.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 {background-color: rgba(159,234,255,1);box-shadow: 0px 0px 6px 0px rgba(29,147,224,1), 0px 0px 20px 0px rgba(29,147,224,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.9em;}
.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: 200px 0 100px;
	background-size: cover;
	text-align: center;
	color: #eee;
	letter-spacing: 0.1em;
	font-size: 0.7em;
	background: url("../images/nb/img_220310_xstation_foot_bg.png") no-repeat top center;
	/*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 {
		padding-top: 100px;
		background-size:1000px;
		background-position: bottom center;
		font-size: 0.6em;
		}
	}

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



/*FlexBox*/
.flexBox {
	display: flex;
	max-width: 1600px;
	margin: 0 auto 2em;
	box-sizing: border-box;
	justify-content: space-around;
	/*align-items: flex-start;*/
	align-items:stretch;
	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.decobox {
		border: 2px #00c9ff solid;
		flex-basis: 20%;
		padding: 2em;
		background-color: rgba(0,255,204,0.15);
		position: relative;
		}

	.flexBox>div.decobox.limited {
		border: 2px #fff solid;
		background-color: rgba(0,210,255,0.5);
		} 

@media only screen and (max-width: 768px) {
	.flexBox>div.decobox.limited {
		padding: 0.5em;
		}
	}

	.flexBox>div.decobox .button {
		position: absolute;
		bottom: 1em;
		right: 1em;
		width: 16em;
		}


	.flexBox>div.attraction {
		padding-bottom: 5em;
		}

	.flexBox>div.attraction h3 {
		margin-top: 1em;
		}

.flexBox>div.attraction h4 {
	font-size: 0.9em;
	padding-left: 1em;
	}

	.flexBox>div.attraction p, .flexBox>div.attraction ul {
		font-size: 0.8em;
		}


@media only screen and (max-width: 768px) {
	}

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

.boxset5>div {flex-basis: 20%;}
.boxset5>div.decobox {flex-basis: 19.5%;}
.boxset4>div {flex-basis: 25%;}
.boxset4>div.decobox {flex-basis: 24%;}
.boxset3>div {flex-basis: 33.3%;}
.boxset3>div.decobox {flex-basis: 32.3%;}
.boxset2>div {flex-basis: 50%;}
.boxset2>div.decobox {flex-basis: 48%;margin-bottom: 2%;}
.boxset2>div.largebox {flex-basis: 60%;}

@media only screen and (max-width: 768px){
.boxset4>div, .boxset5>div {flex-basis: 33.3%;}
.boxset4>div.decobox, .boxset5>div.decobox {flex-basis: 32.3%;}
.boxset3>div {flex-basis: 50%;}
.boxset3>div.decobox {flex-basis: 48%;}
.boxset2>div {flex-basis: 100%;}
.boxset2>div.decobox {flex-basis: 94%;margin-bottom: 4%;}
.boxset2>div.largebox {flex-basis: 94%;}
}

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


.flexBox>div.shop {
	display: flex;
	flex-wrap: wrap;
	}

.flexBox>div.shop>div {
	box-sizing: border-box;
	flex-basis: 50%;
	}

.flexBox>div.shop>div:nth-child(2) {
	padding: 1em;
	}


.shopimg {
	display: block;
	width: 100%;
	filter: contrast(230%) opacity(60%);
	}


@media only screen and (max-width: 1200px) {
	.flexBox>div.shop>div {
		flex-basis: 100%;
		}
	
	.flexBox>div.shop>div:nth-child(2) {
		padding: 0 0 3em 0;
		}
	}