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

body{
	font-family: YakuHanJP_Noto,Noto Sans JP,sans-serif;
	font-size: 1em;
	letter-spacing: 0.1em;
	background-color: #3a689c;
	height: 100dvh;
	color:#fff;
	}

@media only screen and (max-width: 810px) {
	body {
		font-size: 0.9em;
		}
	}

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


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>a>img {display: block;width: 360px;margin: 0 0 0 10px;padding: 0;}
@media only screen and (max-width: 810px) {
	h1>a>img {width: 240px;margin-top: 5px;margin-bottom: 6px;}
	}


h2 {
	box-sizing: border-box;
	padding: 0.8em 1em 0.8em 90px;
	margin: 2em auto 0;
	border-radius: 8px;
	background: #fff url("../images/img_210713_gc_mark.svg") 20px 12px no-repeat;
	background-size: 60px;
	letter-spacing: 0;
	font-size: 2em;
	font-weight: bold;
	line-height: 1;
	color: #3b61a0;
	}

h2>span {font-size: 0.5em;font-weight: normal;line-height: 1;}

@media only screen and (max-width: 810px) {
	h2 {
		font-size: 1.5em;
		padding: 0.8em 0.6em 0.8em 60px;
		background-position: 10px 8px;
		background-size: 45px;
		}
	}
@media only screen and (max-width: 480px) {
	h2 {
		/*font-size: 1.3em;*/
		padding: 0.8em 0.6em 0.8em 65px;
		background-position: 10px 4px; 
		background-size: 45px;
		}
	}

h3 {
	box-sizing: border-box;
	padding: 1.6em 1em 0.4em 1em;
	margin: 0 auto 1em;
	letter-spacing: 0;
	font-size: 1.8em;
	font-weight: 600;
	line-height: 1.1;
	border-bottom: 2px solid #fff;
	/*border-image: linear-gradient(to left,  rgba(255,255,255,0) 0%,rgba(255,255,255,255) 100%);*/
	border-image-slice: 1;
	}
h3>span {font-size: 0.7em;font-weight: normal;}

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

h4 {
	box-sizing: border-box;
	width: 98%;
	margin: 0 auto 1em;
	padding: 1.6em 1em 0.4em 1em;
	letter-spacing: 0;
	font-size: 1.4em;
	line-height: 1.4;
	border-bottom: 1px #fff solid;
	}
h4>span {font-size: 0.6em;font-weight: normal;}

h4.nodeco {
	border: none;
	}

@media only screen and (max-width: 810px) {
	h4 {padding: 1.6em 0.8em 0.4em 0.8em;;}
	}

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

	}

h5 {
	font-size: 1.2em;
	font-weight: 600;
	padding: 1.6em 1em 0 1em;
	}


h6 {padding: 1.6em 1em 0.4em 1em;}
p{}
dl {}
dt {}
dd {}


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

li {
	margin-bottom: 0.5em;
	}


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

th, td {
	border: 1px #fff solid;
	padding: 10px 20px;
	vertical-align: top;
	}

th {
	word-break: keep-all;
	text-align: right;
	letter-spacing: 0;
	background-color: rgba(0,0,0,0.4);
	}

td {
	background-color: rgba(0,0,0,0.2);
	}

/*@media only screen and (max-width: 810px) {
	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: #FFEE83;}
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;
	}

/*particle生成用*/
#canvasWrap {
	position:fixed;/*描画固定*/
	z-index:-2;
	width: 100%;
	height: 100dvh;
	background: #3D9BA0;
	background: linear-gradient(60deg, rgba(61, 155, 160, 1) 0%, rgba(49, 130, 140, 1) 9%, rgba(64, 80, 170, 1) 36%, rgba(127, 30, 119, 1) 86%, rgba(194, 61, 183, 1) 100%);
	mix-blend-mode: screen;
	}

#canvasWrap::after {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 624px;
	height: 624px;
	background: url("../images/img_260703_gc15th_bg_02.webp") center center no-repeat;
	mix-blend-mode: lighten;
	left: 50%;
	top: 50%;
	transform: translate(20%, -75%) scale(1.5);
	opacity: 0.3;
	}

#canvasWrap::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 624px;
	height: 624px;
	background: url("../images/img_260703_gc15th_bg_03.webp") center center no-repeat;
	mix-blend-mode: lighten;
	left: 50%;
	top: 50%;
	transform: translate(-80%, -30%) scale(1.5);
	opacity: 0.2;
	}

#canvas{
	position:fixed;/*描画固定*/
	z-index:-3;
	width: 100%;
	height: 100dvh;
	}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100dvh;
	}

.fadein{
	animation-name: fadeUpAnime;
	animation-timing-function: ease-out;
	animation-delay: 0.2s;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
	}

@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(50px);}
  to {opacity: 1;transform: translateY(0);}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadebox{opacity: 0;}



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





/*ヘッダ*/
header {
	box-sizing: border-box;
	width: 100%;
	min-width: 1280px;
	position: fixed;
	display: flex;
	z-index: 888;
	padding: 10px 0 11px;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgba(0,99,181,0.60);
	}

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

@media only screen and (max-width: 810px) {
	header {min-width: inherit;	padding: 10px 0;}
	}

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

.global-nav__list {
	display: flex;
	letter-spacing: 0;
	padding: 0;
	margin: 8px 5px 0 0;
	}
.global-nav__list li {
	margin: 0;
	}
.global-nav__list li a {
	display: block;
	padding: 0 1.4em;
	border-right: 1px solid rgba(255,255,255,0.4);
	text-decoration: none;
	color: #fff;
	line-height: 1;
	font-weight: 500;
	font-size: 0.9em;

	/*text-shadow: 0px 0px 4px 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: 810px) {
.menu-label {
	display: block;
	position: fixed;
	right: 0;
	top: 0;
	width: 50px; /* ボタンの高さ*/
	height: 50px; /* ボタンの幅 */
	z-index: 1000;
	cursor: pointer;
	background-color: rgba(0,0,0,1);
	}

.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: #3D9BA0;
background: linear-gradient(166deg, rgba(61, 155, 160, 1) 0%, rgba(49, 130, 140, 1) 9%, rgba(64, 80, 170, 1) 36%, rgba(127, 30, 119, 1) 86%, rgba(194, 61, 183, 1) 100%);*/
	background-color: #3b61a0;
	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: 100px;
	width: 100px;
	padding: 0;
	margin: 0 10px 10px 0;
	background: transparent url(../images/arrow.svg) no-repeat center center;
	background-size: 70%;
	border: 1px #fff solid;
	border-radius: 3px;
	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;
	background-color: rgba(255,255,255,0.3);
	}

@media only screen and (max-width: 810px) {
	#bottomMenu a.gotop {height: 60px;width: 60px;}
	}


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

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

	.shareButtons>div>a {
		display: block;
		width: 50px;
		height: 50px;
		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_x.svg");}
	.shareButtons>div.lineBtn a 	{background-image: url("../images/sns_ico_03_line.svg");}

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

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



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

section {
	box-sizing: border-box;
	position: relative;
	width: 98%;
	max-width: 1920px;
	margin: 0 auto 100px;
	}

section img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	border-radius: 2px;
	}

section a > img {
	box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.3);
}

section img.ssimg {
	padding: 10px;
	}

/*タイトル部*/
section.headContent {
	max-width: inherit;
	position: relative;
	}
section.headContent img {
	width: 100%;
	/*margin-top: 50px;*/
	padding-top: 49px;
	}

@media only screen and (max-width: 810px) {
	section {
		width: 94%;
		}
	}

/*10周年記念ロゴ*/

section.headContent {
	width: 100%;
	position: relative;
	}

section.headContent > h2{
	background: url("../images/img_260703_gc15th_title_logo_shining.webp") no-repeat center top;
	background-size: cover;
	margin: 0;
	padding: 0;
	width: 30%;
	position: absolute;
 	bottom: 13%;
	left:50%;
	transform: translate(-50%, 0); 
	border: none;
	}

section.headContent > h2 img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	animation: shinig 8s ease-in 1s normal infinite;
	}
@keyframes shinig {
	0%{opacity: 1;}
	2%{opacity: 0.1;}
	14%{opacity: 1;}
	100%{opacity: 1;}	
	}


section.headContent.short {
	}

section.headContent.short > h2 {
	width: 26%;
	top: auto;
	bottom: -5%;
	left: 8%;
	transform: none;
	}



@media only screen and (max-width: 810px) {
	section.headContent > h2{
		width: 88%;
		bottom: 10%;
		transform: translateY(0) translateX(-50%);
		-webkit- transform: translateY(0) translateX(-50%);
		}
	
	section.headContent.short > h2 {
		width: 50%;
		bottom: -10%;
		left:50%;
		transform: translate(-50%, 0); 
		}
	
	}


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

/*キャプション*/
section.caption {
	padding: 4em 3em 5em;
	background-color: rgba(0,0,0,0.7);
	border-radius: 8px;
	box-shadow: 0px 0px 30px 10px rgba(255,255,255,1);
	}

section.caption>div p{
	text-align: center;
	}

@media only screen and (max-width: 810px) {
	section.caption>div p:not(.big)  {
		text-align: left;
		text-indent: 1em;
		}
	}


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


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

.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: 810px) {
	.button {flex-basis: 100%;}
}
.button a {
	display: block;
	box-sizing: border-box;
	width: 95%;
	max-width: 600px;
	padding: 15px 20px;
	margin: 0 auto;
	background-color: transparent;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	border-radius: 3px;
	border: 1px solid #fff;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	color: #fff;
	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 {
	background-color: rgba(255,255,255,0.3);
	}
.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: 810px) {
	.sponly {display: block;}
	.nosp {display:none;}
	}

/*記事用のいろいろな定義*/	
.small	{font-size: 0.8em;}
.large	{font-size: 1.2em;}
.big	{font-weight: bold;font-size: 2.6em;}
@media only screen and (max-width: 810px) {
	.big	{font-size: 2.2em;}
	}
.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.8em;font-weight: 500;color:#fff;text-shadow: none;padding: 3px 5px;border-radius: 2px;margin-right: 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;
	}

footer .taitoLogo {
	width: 300px;
	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 10px;
	text-align: center;
	line-height: 1;
	font-size: 1.2em;
	}

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

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

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

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

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



/*FlexBox*/
.flexBox {
	display: flex;
	box-sizing: border-box;
	padding: 3em 0;
	margin: 0 auto 1em;
	box-sizing: border-box;
	justify-content: space-around;
	/*align-items: flex-start;*/
	align-items: flex-start;
	flex-wrap: wrap;
	}

	.flexBox>div {
		display: block;
		box-sizing: border-box;
		flex-basis: 100%;
		height: auto;
		padding: 0 0 3%;
		margin: 0 0 0;
		word-break: break-all;
		}

	.flexBox>div h3 {
		border: none;
		margin-bottom: 0;
		}

	.flexBox>div h4 {
		padding: 1.6em 0 0.4em 0.5em;
		}

	.flexBox>div p {
		padding: 1em 1em 1em 1em;
		}

	.flexBox.boxset3 p, .flexBox.boxset4 p, .flexBox.boxset5 p {
		}

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

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

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

.boxset5>div {flex-basis: 18%;}
.boxset4>div {flex-basis: 23%;}
.boxset3>div {flex-basis: 31%;}
.boxset2>div {flex-basis: 45%;}

@media only screen and (max-width: 810px){
.flexBox {padding-top: 1em;}
.boxset5>div {flex-basis: 23%;}
.boxset4>div {flex-basis: 48%;}
.boxset3>div {flex-basis: 48%;margin-bottom: 2em;}
.boxset2>div {flex-basis: 100%;}
}

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


/*商品紹介専用*/
.itemWrap {
	background-color: rgba(0,0,0,0.4);
	padding: 3em 1% 4em;
	border-radius: 8px;
	}

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

@media only screen and (max-width: 810px) {
	.itemWrap {
		padding: 1em 1.5% 2em;
		}
	}


/*バナーエリア*/
.bannerArea {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	max-width: 1920px;
	padding: 0;
	margin: 200px auto 0;
	list-style-type: none;
	text-align: center;
	}

.bannerArea>li {
	box-sizing: border-box;
	flex-basis: 31%;
	line-height: 1;
	margin-bottom: 40px;
	}

.bannerArea>li img {
	border: 1px #fff solid;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
	}

@media only screen and (max-width: 810px) {
	.bannerArea>li {flex-basis: 98%;}
	}

/*ランキング*/
dl.ranking {
	display:  flex;
	flex-wrap: wrap;
	width: 50%;
	margin: 0 auto;
	align-items: center;
	}

dl.ranking dt {
	flex-basis: 40px;
	height: 40px;
	color: #000;
	background-color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 2em;
	margin: 0 20px 30px 0
	}

dl.ranking dd {
	flex-basis: calc(100% - 60px);
	margin: 0 0 30px 0;
	font-weight: bold;
	}

dl.ranking dd > span {
	font-size: 0.6em;
	font-weight: normal;
}

@media only screen and (max-width: 810px) {
	dl.ranking {
		width: 90%;
	}
}

/*ヒストリー*/
dl.history {
	display:  flex;
	flex-wrap: wrap;
	width: 60%;
	margin: 0 auto;
	align-items: top;
}

dl.history dt {
	box-sizing: border-box;
	flex-basis: 8em;
	margin: 0 2.5% 0 0;
	padding-right: 0.5em;
	font-size: 0.8em;
	text-align: right;
	border-right: 1px #fff solid;
	}

dl.history dd {
	box-sizing: border-box;
	flex-basis: calc(97.5% - 8em);
	margin: 0 0 1em 0;
	font-size: 0.8em;
	}

dl.history dd.app:before, dl.history dd.arc:before, dl.history dd.switch:before, dl.history dd.steam:before {
	display: inline-block;
	background-color: #fff;
	color: #07293f;
	letter-spacing: 0.1em;
	padding: 0 0.5em;
	margin-right: 1em;
	border-radius: 1px;
	}
dl.history dd.app:before {content: "スマホ版";background-color: #01ff3d;}
dl.history dd.arc:before {content: "アーケード版";background-color: #1ed5fb;}
dl.history dd.switch:before {content: "Nintendo Switch版";background-color: #e60012;color:#eee;}
dl.history dd.steam:before {content: "Steam版"}



dl.history dd > span {
	font-size: 0.6em;
}

@media only screen and (max-width: 810px) {
	dl.history {
		width: 90%;
	}
}