@charset "utf-8";
/*-----------------------------------------------
 * GameSystem
-------------------------------------------------*/
#gamesystem{
	position: relative;
	overflow: hidden;
}

.contentInner{
	width: 100%;
	max-width: min(calc(1920 / var(--vw-min) * 100vw), 1920px);
	padding: 0 min(calc(96 / var(--vw-min) * 100vw), calc(96px * var(--max-percent)));
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width:768px){
	#gamesystem{
		overflow: hidden;
	}
	.contentInner{
		padding: 0 0;
		margin-top: calc(48 / var(--vw-min) * 100vw);
		max-width: 100%;
	}
}


#gamesystem .com__link{
	min-width: min(calc(280 / var(--vw-min) * 100vw), 280px);
}
.gamesytem__navLists{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: min(calc(14 / var(--vw-min) * 100vw), 14px);
	max-width: 1008px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.gamesytem__navLists .com__link--txt{
	width: 100%;
	height: min(calc(26 / var(--vw-min) * 100vw), 26px);
	position: relative;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: #fff;
	transition: background-color .3s ease;
}

@media screen and (max-width:768px){
	.gamesytem__navLists{
		gap: calc(20 / var(--vw-min) * 100vw);
		line-height: 1;
	}
	#gamesystem .com__link{
		width: calc(280 / var(--vw-min) * 100vw);
	}
}


[data-txt="txt_story"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_story.png);
	mask-image: url(../img/common/txt/txt_gs_story.png);
}
[data-txt="txt_kometsukuri"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_kometsukuri.png);
	mask-image: url(../img/common/txt/txt_gs_kometsukuri.png);
}
[data-txt="txt_seirei"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_seirei.png);
	mask-image: url(../img/common/txt/txt_gs_seirei.png);
}
[data-txt="txt_kyoka"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_kyoka.png);
	mask-image: url(../img/common/txt/txt_gs_kyoka.png);
}
[data-txt="txt_shinso"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_shinso.png);
	mask-image: url(../img/common/txt/txt_gs_shinso.png);
}
[data-txt="txt_hensei"]{
	-webkit-mask-image: url(../img/common/txt/txt_gs_hensei.png);
	mask-image: url(../img/common/txt/txt_gs_hensei.png);
}




.gsContent{
	width: 100%;
	position: relative;
	padding-top: min(calc(182 / var(--vw-min) * 100vw), 182px);
	margin-top: max(calc(-86 / var(--vw-min) * 100vw), -86px);
}

.gsContent__title{
	width: min(calc(280 / var(--vw-min) * 100vw), 280px);
	height: min(calc(72 / var(--vw-min) * 100vw), 72px);
	margin: 0 auto;
	position: relative;
	border: 2px solid #5f0702;
	border-radius: min(calc(64 / var(--vw-min) * 100vw), 64px);
	display: flex;
	align-items: center;
}
.gsContent__title:before{
	content: '';
	position: absolute;
	top: min(calc(4 / var(--vw-min) * 100vw), 4px);
	left: min(calc(4 / var(--vw-min) * 100vw), 4px);
	right: min(calc(4 / var(--vw-min) * 100vw), 4px);
	bottom: min(calc(4 / var(--vw-min) * 100vw), 4px);
	border-radius: min(calc(64 / var(--vw-min) * 100vw), 64px);
	background-color: #5f0702;
}
.gsContent__title--txt{
	display: inline-block;
	width: 100%;
	height: min(calc(26 / var(--vw-min) * 100vw), 26px);
	position: relative;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--color-yellow);
}

.gsContentIn{
	width: 100%;
	position: relative;
	margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
}

.gsImageSwiper{
	overflow: unset;
}


.--noSwiper .gsImageLists {
	justify-content: center;
}
.gsImageList {
	width: min(calc(930 / var(--vw-min) * 100vw), calc(930px * var(--max-percent)));
	padding: 0 min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.gsImage {
	width: 100%;
	padding-top: 46.2203%;
	position: relative;
}
.gsImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}


.gsContent:not(.--noSwiper) .gsImageSwiper__pnWrap{
	width: min(calc(930 / var(--vw-min) * 100vw), calc(930px * var(--max-percent)));
	height: min(calc(390 / var(--vw-min) * 100vw), calc(390px * var(--max-percent)));
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 2;
}
.gsContent.--noSwiper .gsImageSwiper__pnWrap{
	display: none;
}
.swiperNav__pn--arrow{
	background-color: #5f0702;
}
.swiperNav__pn--arrow:after{
	background-color: #fff;
}


.gsContent__cont{
	margin-top: min(calc(32 / var(--vw-min) * 100vw), 32px);
	width: min(calc(850 / var(--vw-min) * 100vw), calc(850px * var(--max-percent)));
	line-height: 2;
	margin-left: auto;
	margin-right: auto;
}

.gsContent__cont--ttl{
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: 900;
	color: #5f0702;
	margin-bottom: 0.25em;
	text-align: center;
}
.gsContent__cont--txt{
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	text-align: center;
}


@media screen and (max-width:768px){
	.gsContent{
		width: 100%;
		padding-top: calc(112 / var(--vw-min) * 100vw);
		margin-top: unset;
	}
	#story.gsContent{
		margin-top: calc(-48 / var(--vw-min) * 100vw);
	}
	.gsContent__title{
		width: calc(280 / var(--vw-min) * 100vw);
	}
	.gsImageList{
		width: 100%;
		padding: 0 0;
	}

	.gsContent:not(.--noSwiper) .gsImageSwiper__pnWrap{
		top: 0;
		width: calc(726 / var(--vw-min) * 100vw);
		height: calc(346 / var(--vw-min) * 100vw);
		margin-top: auto;
		margin-bottom: auto;
	}

	.gsContent__cont{
		width: 100%;
		padding: 0 calc(32 / var(--vw-min) * 100vw);
		margin-top: calc(20 / var(--vw-min) * 100vw);
	}
	.gsContent__cont--ttl{
		font-size: calc(32 / var(--vw-min) * 100vw);
	}
}


/**
* Animation
**/
.gsContent__title{
	opacity: 0;
	transform: translateY(75%);
	transition: transform .6s cubic-bezier(.46,.21,.24,1) .1s, opacity .4s ease .1s;
}
.gsContent__title--txt{
	opacity: 0;
	transform: scale(80%);
	transition: transform .6s cubic-bezier(.46,.21,.47,1) .4s, opacity .4s ease .4s;
}
.gsContent.--is-ani .gsContent__title{
	opacity: 1;
	transform: translateY(0%);
}
.gsContent.--is-ani .gsContent__title--txt{
	opacity: 1;
	transform: scale(100%);
}

.gsImageSwiper{
	opacity: 0;
	transition: opacity .6s ease .3s;
}
.gsContent.--is-ani .gsImageSwiper{
	opacity: 1;
}


.gsContent__cont--ttl{
	opacity: 0;
	transform: translateY(50%);
	transition: transform .6s cubic-bezier(.46,.21,.24,1) .3s, opacity .4s ease .3s;
}
.gsContent__cont--txt{
	opacity: 0;
	transform: translateY(40px);
	transition: transform .6s cubic-bezier(.46,.21,.24,1) .4s, opacity .4s ease .3s;
}
.gsContent.--is-ani .gsContent__cont--ttl,
.gsContent.--is-ani .gsContent__cont--txt{
	opacity: 1;
	transform: translateY(0%);
}


/* gamesytem__navList */
.gamesytem__navList{
	opacity: 0;
	transform: translateY(25%);
	transition: transform .6s cubic-bezier(.46,.21,.24,1) .125s, opacity .3s ease .125s;
}
.--is-ani .gamesytem__navList{
	opacity: 1;
	transform: translateX(0%);
}

.gamesytem__navList:nth-of-type(1){
	transition-delay: 0.050s;
}
.gamesytem__navList:nth-of-type(2){
	transition-delay: 0.100s;
}
.gamesytem__navList:nth-of-type(3){
	transition-delay: 0.150s;
}
.gamesytem__navList:nth-of-type(4){
	transition-delay: 0.200s;
}
.gamesytem__navList:nth-of-type(5){
	transition-delay: 0.250s;
}
.gamesytem__navList:nth-of-type(6){
	transition-delay: 0.300s;
}