@charset "utf-8";
/*-----------------------------------------------
 * Firstview
-------------------------------------------------*/
#firstview{
	width: 100%;
	height: 100vh;
	min-height: 50vw;
	position: relative;
	z-index: 2;
}
.title{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	transition: opacity .3s ease, transform .45s ease;
	opacity: 0;
	transform: translateY(10%);
}
body.is-afin .title{
	transition-delay: .25s;
	transform: translateX(0);
	opacity: 1;
}
.ttl_logo{
/*	width: 403px;
	width: 33.58334%;
	height: 0;
	padding-top: 187px;
	padding-top: 15.58334%;*/
	width: 418px;
	width: 34.8334%;
	height: 0;
	padding-top: 186px;
	padding-top: 15.5%;
	position: absolute;
	top: 15.8334%;
	bottom: 53%;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../img/top/fv_logo.svg) no-repeat center / contain;
}

.ttl_3rdani{
	width: 570px;
	width: 47.5%;
	height: 0;
	padding-top: 164px;
	padding-top: 13.6667%;
	position: absolute;
	top: 33.3334%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../img/top/ttl_3rdani.svg) no-repeat center / contain;
}

.groupImgWrap{
	width: 100%;
}
.groupImgLists{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.groupImgList{
	width: calc(100% / 3);
	height: calc(100vh / 3);
	min-height: 16.66667vw;
	position: relative;
}
.groupImg{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.groupImg:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 100% 100%;
	transition: background-size .3s ease;
	z-index: 3;
}
body.is-afin .groupImg:before{
	background-position: right center;
	background-size: 0 100%;
}
.groupimg--chara{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transform-origin: center bottom;
}
.groupimg--bg{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.groupImgList:nth-of-type(4) .groupimg--bg,
.groupImgList:nth-of-type(5) .groupimg--bg,
.groupImgList:nth-of-type(6) .groupimg--bg{
	right: unset;
	left: 0;
}

.groupImg01{
	background-color: var(--group-color-bae);
}
.groupImg01:before{
	background-image: linear-gradient(var(--group-color-bae), var(--group-color-bae));
}
.groupImg01 .groupimg--chara{
	background-image: url(../img/top/group_chara01.png);
}
.groupImg01 .groupimg--bg{
	background-image: url(../img/top/group_bg01.jpg);
}

.groupImg02{
	background-color: var(--group-color-tcw);
}
.groupImg02:before{
	background-image: linear-gradient(var(--group-color-tcw), var(--group-color-tcw));
}
.groupImg02 .groupimg--chara{
	background-image: url(../img/top/group_chara02.png);
}
.groupImg02 .groupimg--bg{
	background-image: url(../img/top/group_bg02.jpg);
}

.groupImg03{
	background-color: var(--group-color-cozmez);
}
.groupImg03:before{
	background-image: linear-gradient(var(--group-color-cozmez), var(--group-color-cozmez));
}
.groupImg03 .groupimg--chara{
	background-image: url(../img/top/group_chara03.png);
}
.groupImg03 .groupimg--bg{
	background-image: url(../img/top/group_bg03.jpg);
}

.groupImg04{
	background-color: var(--group-color-akyr);
}
.groupImg04:before{
	background-image: linear-gradient(var(--group-color-akyr), var(--group-color-akyr));
}
.groupImg04 .groupimg--chara{
	background-image: url(../img/top/group_chara04.png);
}
.groupImg04 .groupimg--bg{
	background-image: url(../img/top/group_bg04.jpg);
}

.groupImg05{
	background-color: var(--group-color-buraikan);
}
.groupImg05:before{
	background-image: linear-gradient(var(--group-color-buraikan), var(--group-color-buraikan));
}
.groupImg05 .groupimg--chara{
	background-image: url(../img/top/group_chara05.png);
}
.groupImg05 .groupimg--bg{
	background-image: url(../img/top/group_bg05.jpg);
}

.groupImg06{
	background-color: var(--group-color-visty);
}
.groupImg06:before{
	background-image: linear-gradient(var(--group-color-visty), var(--group-color-visty));
}
.groupImg06 .groupimg--chara{
	background-image: url(../img/top/group_chara06.png);
}
.groupImg06 .groupimg--bg{
	background-image: url(../img/top/group_bg06.jpg);
}

.groupImg07{
	background-color: var(--group-color-amprule);
}
.groupImg07:before{
	background-image: linear-gradient(var(--group-color-amprule), var(--group-color-amprule));
}
.groupImg07 .groupimg--chara{
	background-image: url(../img/top/group_chara07.png);
}
.groupImg07 .groupimg--bg{
	background-image: url(../img/top/group_bg07.jpg);
}

.groupImg08{
	background-color: var(--group-color-1nm8);
}
.groupImg08:before{
	background-image: linear-gradient(var(--group-color-1nm8), var(--group-color-1nm8));
}
.groupImg08 .groupimg--chara{
	background-image: url(../img/top/group_chara08.png);
}
.groupImg08 .groupimg--bg{
	background-image: url(../img/top/group_bg08.jpg);
}

.groupImg09{
	background-color: var(--group-color-gokuluck);
}
.groupImg09:before{
	background-image: linear-gradient(var(--group-color-gokuluck), var(--group-color-gokuluck));
}
.groupImg09 .groupimg--chara{
	background-image: url(../img/top/group_chara09.png);
}
.groupImg09 .groupimg--bg{
	background-image: url(../img/top/group_bg09.jpg);
}


/** aspect-> ~1 **/
@media screen and (min-width: 768px) and (orientation: portrait){
	#firstview{
		height: auto;
		min-height: unset;
	}
	.ttl_logo{
		width: 472px;
		width: 39.3334%;
		padding-top: 219px;
		padding-top: 18.25%;

		width: 483px;
		width: 40.25;
		padding-top: 213px;
		padding-top: 17.75%;
	}
	.ttl_3rdani{
		width: 598px;
		width: 49.8334%;
		padding-top: 172px;
		padding-top: 14.3334%;
/*		top: 32.8889%;*/
	}

	.groupImgList{
		height: 0;
		min-height: unset;
		padding-top: 33.3334%;
	}
	.groupImg{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.groupImg01 .groupimg--chara{
		background-image: url(../img/top/group_chara01_sp.png);
	}
	.groupImg02 .groupimg--chara{
		background-image: url(../img/top/group_chara02_sp.png);
	}
	.groupImg03 .groupimg--chara{
		background-image: url(../img/top/group_chara03_sp.png);
	}
	.groupImg04 .groupimg--chara{
		background-image: url(../img/top/group_chara04_sp.png);
	}
	.groupImg05 .groupimg--chara{
		background-image: url(../img/top/group_chara05_sp.png);
	}
	.groupImg06 .groupimg--chara{
		background-image: url(../img/top/group_chara06_sp.png);
	}
	.groupImg07 .groupimg--chara{
		background-image: url(../img/top/group_chara07_sp.png);
	}
	.groupImg08 .groupimg--chara{
		background-image: url(../img/top/group_chara08_sp.png);
	}
	.groupImg09 .groupimg--chara{
		background-image: url(../img/top/group_chara09_sp.png);
	}
}

@media screen and (max-width: 767px){
	#firstview{
		height: auto;
		min-height: unset;
	}
	.ttl_logo{
		width: 472px;
		width: 62.9334%;
		padding-top: 219px;
		padding-top: 29.2%;

		width: 483px;
		width: 64.4%;
		padding-top: 213px;
		padding-top: 28.4%;
	}
	.ttl_3rdani{
		width: 598px;
		width: 79.7334%;
		padding-top: 172px;
		padding-top: 22.9334%;
		top: 32.8889%;
	}

	.groupImgList{
		height: 0;
		min-height: unset;
		padding-top: 40%;
	}
	.groupImg{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.groupImg01 .groupimg--chara{
		background-image: url(../img/top/group_chara01_sp.png);
	}
	.groupImg02 .groupimg--chara{
		background-image: url(../img/top/group_chara02_sp.png);
	}
	.groupImg03 .groupimg--chara{
		background-image: url(../img/top/group_chara03_sp.png);
	}
	.groupImg04 .groupimg--chara{
		background-image: url(../img/top/group_chara04_sp.png);
	}
	.groupImg05 .groupimg--chara{
		background-image: url(../img/top/group_chara05_sp.png);
	}
	.groupImg06 .groupimg--chara{
		background-image: url(../img/top/group_chara06_sp.png);
	}
	.groupImg07 .groupimg--chara{
		background-image: url(../img/top/group_chara07_sp.png);
	}
	.groupImg08 .groupimg--chara{
		background-image: url(../img/top/group_chara08_sp.png);
	}
	.groupImg09 .groupimg--chara{
		background-image: url(../img/top/group_chara09_sp.png);
	}
}

/*-----------------------------------------------
 * Contents Common
-------------------------------------------------*/
.p-logo_fixed{
	position: sticky;
	top: 0;
	right: 0;
	z-index: 3;
}
@media screen and (max-width: 767px){
	.p-logo_fixed{
		display: none;
	}
}
.logo{
	position: absolute;
	width: 200px;
	padding-top: 64px;
	top: 0;
	right: 0;
	margin-top: 3.3334%;
	right: 3.3334%;
}
.logo a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/common/logo.svg) no-repeat center / contain;
	top: 0;
	left: 0;
}
.contents{
	width: 100%;
	position: relative;
	color: #FFF;
	font-size: 20px;
	line-height: 2;
}
.contents:before{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url(../img/top/bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	opacity: 4%;
}
.contents:after{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url(../img/top/bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	mix-blend-mode: soft-light;
}
.contentsIn{
	position: relative;
	z-index: 2;
	padding-bottom: 296px;
}

/**
* Gradation
**/
.txt-gradation{
	background-size: 350%;
	background-position: 0%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradation 70s ease infinite;
}
.gradation{
	background-size: 350%;
	animation: gradation 70s ease infinite;
}
.grd-p1{
	background-image: var(--gradation-p1);
}
.grd-p2{
	background-image: var(--gradation-p2);
}
@keyframes gradation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 51%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@media screen and (max-width: 767px){
	.logo{
		width: 40%;
		padding-top: 12.8%;
		position: relative;
		right: unset;
		margin: 8.5334% auto 0;
	}
	.contents{
		font-size: var(--sp-size-24);
	}
	.contents:before{
		opacity: 10%;
	}
	.contents:after{
		content: unset;
	}
	.contentsIn{
		padding-bottom: 22.6667%;
	}
}


/*-----------------------------------------------
 * About
-------------------------------------------------*/
#about{
	width: 100%;
	padding-top: 3.3334%;
	position: relative;
}
#about_h2{
	width: 505px;
	height: 0;
	padding-top: 170px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	margin-top: calc(3.3334% + 64px);
	background: url(../img/top/about_h2.svg) no-repeat center / contain;
}
.about_content{
	width: 93.3334%;
	padding-top: 128px;
	/*padding-top: 13.3334%;*/
	text-align: center;
	margin: 0 auto;
}
.about_content p{
	margin-bottom: 24px;
}
#about .txt-gradation{
	font-size: 24px;
	font-weight: 700;
}

.about_txt .gradation{
	display: inline-block;
	line-height: 1;
}
.about_txt .gradation span{
	line-height: 1;
	display: inline-block;
	mix-blend-mode: difference;
}


.tweetWrap{
	padding: 40px;
	position: relative;
	border: 2px solid;
	/*border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple));*/
	border-image: var(--gradation-p2);
	border-image-slice: 1;
	margin: 0 auto;
	margin-top: 64px;
	width: 92.8572%;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.tweetWrap{
		animation: bordergradient 70s ease infinite;
	}
}

@keyframes bordergradient {
	0%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen));
		border-image-slice: 1;
	}
	4.1667%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red));
		border-image-slice: 1;
	}
	8.3334%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	12.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	16.6667%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	20.8334%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	25%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	29.1667%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple));
		border-image-slice: 1;
	}
	33.3334%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	37.5%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	41.6667%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	45.8334%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	50%{
		border-image: linear-gradient(45deg, var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	54.1667%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	58.3334%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	62.5%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	66.6667%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	70.8334%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-purple));
		border-image-slice: 1;
	}
	75%{
		border-image: linear-gradient(45deg, var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	79.1667%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	83.3334%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	87.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	91.6667%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red), var(--main-color-red));
		border-image-slice: 1;
	}
	95.8334%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-red));
		border-image-slice: 1;
	}
	100%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen));
		border-image-slice: 1;
	}
}



@keyframes bordergradient0 {
	0%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen));
		border-image-slice: 1;
	}
	12.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-purple));
		border-image-slice: 1;
	}
	25%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	37.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	50%{
		border-image: linear-gradient(45deg, var(--main-color-purple), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	62.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-purple), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	75%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-purple), var(--main-color-purple));
		border-image-slice: 1;
	}
	87.5%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-purple));
		border-image-slice: 1;
	}
	100%{
		border-image: linear-gradient(45deg, var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen), var(--main-color-yellowgreen));
		border-image-slice: 1;
	}
}

.tweetTxt{
	font-size: 24px;
	font-weight: 700;
	line-height: 2;
}

.btn_aboutTweet{
	text-align: center;
	margin-top: 32px;
}
.btn_aboutTweet a{
	width: 480px;
	padding: 24px 72px;
	line-height: 1;
	font-size: 24px;
	position: relative;
	text-decoration: none;
	display: inline-block;
	background-size: 350%;
	animation: gradation 70s ease infinite;
	background-image: var(--gradation-p2);
}
.btn_aboutTweet a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 24px;
	bottom: 0;
	margin: auto 0;
	width: 24px;
	height: 24px;
	-webkit-mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon_tw.svg) no-repeat center / contain;
	background-color: #fff;
}
.btn_aboutTweet a span{
	position: relative;
	z-index: 2;
	display: inline-block;
}

@media screen and (max-width: 767px){
	#about{
		padding-top: 8.52879%;
	}
	#about_h2{
		width: 67.3334%;
		padding-top: 22.6667%;
		margin-top: 8.52879%;
	}
	.about_content{
		width: 87.2%;
		padding-top: 11.2%;
	}
	.about_content p{
		margin-bottom: 3.6698%;
	}
	#about .txt-gradation{
		font-size: var(--sp-size-28);
	}

	.tweetWrap{
		width: 100%;
		padding: 7.3334%;
		border-width: min(0.53334vw, 4px);
		margin-top: 5.5046%;
	}
	.tweetTxt{
		font-size: var(--sp-size-28);
	}
	.btn_aboutTweet{
		margin-top: 6.181%;
	}
	.btn_aboutTweet a{
		width: 100%;
		font-size: var(--sp-size-28);
		padding: var(--sp-size-20) var(--sp-size-72);
	}
	.btn_aboutTweet a:before{
		width: var(--sp-size-24);
		height: var(--sp-size-24);
		left: var(--sp-size-24);
	}
}


/** SCR ANI **/
.about_content{
	opacity: 0;
	transform: translateY(10%);
	transition: opacity .3s ease, transform .45s ease;
}
#about.is-ani .about_content{
	opacity: 1;
	transform: translateY(0);
}

/*-----------------------------------------------
 * Content
-------------------------------------------------*/
.contentWrap{
	width: 100%;
	padding-top: 160px;
	/*padding-top: 13.3334%;*/
	position: relative;
	z-index: 2;
	overflow: hidden;
}
.comingsoon{
	padding-top: 122px;
}
@media screen and (max-width: 767px){
	.contentWrap{
		padding-top: 12.8%;
	}
	.comingsoon{
	}
}

.cont_titleWrap{
	width: 100%;
	position: relative;
	padding: 0 6.6667% 0 5%;
	display: flex;
}
.cont_num{
	width: 48px;
	height: 80px;
	position: relative;
	padding-top: 36px;
	font-family: var(--font-family-roboto);
	text-align: center;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.05em;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity .3s ease;
}
.cont_num:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #fff;
}
.cont_num:after{
	content: 'SPECIAL';
	position: absolute;
	top: 8px;
	right: 0;
	left: 0;
	text-align: center;
	font-size: 12px;
	line-height: 1;
	letter-spacing: -0.02em;
	transform: scale(1, 1.2);
	transform-origin: center top;
	display: block;
}
.cont_num span.cont_numTxt{
	display: block;
	text-align: center;
	transform: scale(1, 1.2);
	transform-origin: center bottom;
}

.cont_title{
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
	font-family: var(--font-family-roboto);
	width: calc(100% - 100px);
	margin-left: auto;
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 28px;
	display: flex;
	align-items: center;
	transform: translateX(100%);
	opacity: 0;
	transition: opacity .4s ease, transform .6s ease;
	text-align: right;
}
.cont_title .engttl{
	display: inline-block;
	line-height: 0.83334;
	transform: scale(1, 1.2);
	transform-origin: center top;
	opacity: 0;
	transition: opacity .3s ease;
	transition-delay: 0s;
}
.cont_title .jattl{
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	position: absolute;
	right: 0;
	margin-top: 16px;
	opacity: 0;
	transition: opacity .3s ease;
	transition-delay: 0s;
}
.cont_title .jattl .gradation span{
	padding: 0 2px;
	display: inline-block;
	line-height: 1.18;
}
.cont_title:after{
	content: '';
	position: absolute;
	bottom: 20px;
	right: 0;
	left: 0;
	height: 1px;
	background-color: #fff;
}


/** ContTitle -- nth-child(2n) **/
.contentWrap:nth-child(2n) .cont_titleWrap{
	padding: 0 5% 0 6.6667%;
}
.contentWrap:nth-child(2n) .cont_num{
	order: 2;
	margin-left: auto;
}
.contentWrap:nth-child(2n) .cont_title{
	margin-left: unset;
	justify-content: flex-end;
	transform: translateX(-100%);
	text-align: left;
}
.contentWrap:nth-child(2n) .cont_title .jattl{
	right: unset;
	left: 0;
}

/** ScrAni **/
.contentWrap.is-ani .cont_num{
	opacity: 1;
}
.contentWrap.is-ani .cont_title .engttl,
.contentWrap.is-ani .cont_title .jattl{
	transition-delay: .55s;
	opacity: 1;
}

.contentWrap.is-ani .cont_title{
	transform: translateX(0);
	opacity: 1;
}

@media screen and (max-width: 767px){
	.cont_titleWrap{
		padding: 0 0 0 3.2%;
	}
	.cont_num{
		width: 6.6116%;
		height: var(--sp-size-72);
		padding-top: min(4.5334vw, 34px);
		font-size: var(--sp-size-48);
		font-size: min(6.6667vw ,50px);
	}
	.cont_num:after{
		content: '';
		top: min(0.8vw, 6px);
		width: 100%;
		height: var(--sp-size-12);
		background: url(../img/top/cont_num_special.svg) no-repeat center / contain;
		transform: scale(1);
	}
	.cont_title{
		font-size: min(10.6667vw, 80px);
		width: calc(100% - var(--sp-size-72));
		padding-bottom: var(--sp-size-28);
		margin-bottom: 0;
	}
	.cont_title .jattl{
		font-size: var(--sp-size-24);
		margin-top: min(2.13334vw, 16px);
		right: var(--sp-size-48);
	}
	.cont_title:after{
		bottom: var(--sp-size-20);
		height: min(0.2667vw, 2px);
	}

	/** ContTitle -- nth-child(2n) **/
	.contentWrap:nth-child(2n) .cont_titleWrap{
		padding: 0 3.2% 0 0;
	}
	.contentWrap:nth-child(2n) .cont_title .jattl{
		right: unset;
		left: var(--sp-size-48);
	}
}


.content{
	width: 100%;
	margin-top: 50px;
	position: relative;
}
.contentIn{
	width: 86.6667%;
	margin: 0 auto;
	padding: 80px 0;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(10%);
	transition: opacity .4s ease, transform .6s ease;
	transition-delay: 0s;
}
.contentIn__cont{
	width: 61.5385%;
}
.contentIn__cont .content_h3{
	text-align: center;
	font-weight: bold;
	font-size: 150%;
	margin-bottom: 1em;
}
.contentIn__cont .content_h3 .gradation{
	display: inline-block;
}
.contentIn__cont .content_h3 .gradation span{
	padding: 0 0.5em;
	display: inline-block;
	line-height: 1.5;
}
.contentIn__cont a{
	font-weight: bold;
}
.contentIn__cont b{
	text-decoration: underline;
}
.contentIn__cont .mds{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}
.contentIn__cont .mds:not(:last-child){
	margin-bottom: 1em;
}
.contentIn__cont .mds:not(:first-child){
	margin-top: 1em;
}
.contentIn__cont .indent{
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}


@media screen and (max-width: 767px){
	.content{
		margin-top: 9.8667%;
	}
	.contentIn{
		width: 87.2%;
		padding: 12.8% 0;
	}
	.contentIn__cont{
		width: 100%;
	}
}

/** contentIn Ani **/
.contentWrap.is-ani .contentIn{
	transition-delay: .55s;
	transform: translateY(0);
	opacity: 1;
}



.btn_link{
	margin-top: 72px;
	text-align: center;
}
.btn_link a{
	max-width: 480px;
	width: 100%;
	padding: 24px 24px;
	line-height: 1;
	position: relative;
	border: 1px solid #FFF;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: .3s ease;
	font-family: 'Roboto Condensed', 'Noto Sans JP', "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
}

.btn_link a:hover{
	background-color: #000;
	color: #FFF;
}
.btn_link a span{
	position: relative;
	z-index: 2;
	letter-spacing: -0.02em;
	transform: scale(1, 1.2);
	transform-origin: center center;
	display: inline-block;
	color: #FFF;
	background-size: 350%;
	background-position: 0%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: #FFF;
	transition: .3s ease;
	background-image: var(--gradation-p1);
	animation: gradation 70s ease infinite;
}

/** btn_link -- nth-child(2n) **/
.contentWrap:nth-child(2n) .btn_link a span{
	background-image: var(--gradation-p2);
}

.btn_link a:hover span{
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 767px){
	.btn_link{
		margin-top: 9.786%;
	}
	.btn_link a{
		max-width: unset;
		width: 85.3211%;
		padding: 3.5843%;
		border-width: min(0.53334vw, 4px);
	}
}




.contentBox{
	position: absolute;
	width: 66.6667%;
	top: 0;
	bottom: 0;
	right: 0;
	transform: translateX(100%);
	transition: .5s ease;
	transition-delay: 0s;
}
@media screen and (max-width: 767px){
	.contentBox{
		width: 66.6667%;
	}
}

/** content -- nth-child(2n) **/
.contentWrap:nth-child(2n) .contentIn__cont{
	margin-left: auto;
}

.contentWrap:nth-child(2n) .contentBox{
	right: unset;
	left: 0;
	transform: translateX(-100%);
}

/** Content Ani **/
.contentWrap.is-ani .contentBox{
	transform: translateX(0);
	transition-delay: .4s;
}


/** Gradation Setting **/
.contentWrap .txt-gradation,
.contentWrap .gradation{
	background-image: var(--gradation-p1);
}
.contentWrap:nth-child(2n) .txt-gradation,
.contentWrap:nth-child(2n) .gradation{
	background-image: var(--gradation-p2);
}



/**
* Trailer
 **/
.trailer_videoWrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	opacity: 0.4;
	overflow: hidden;
}
#trailer_video{
	position: absolute;
	width: 100vw;
	height: 100vw;
	top:  calc(50% - 50vw);
	left: calc(50% - 50vw);
}
@media screen and (max-width: 960px){
	#trailer_video{
		width: 200vw;
		height: 112.5vw;
		top: calc(50% - 56.25vw);
		left: calc(50% - 100vw);
	}
}
.link_trailerWrap{
	pointer-events: none;
}
.link_trailer{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.link_trailerIn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.link_trailerIn a{
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: auto;
}

#trailer .contentIn{
	pointer-events: none;
}
#trailer .btn_link a{
	pointer-events: auto;
}

@media screen and (max-width: 767px){
	#trailer_video{
		width: 300vw;
		height: 168.75vw;
		top: calc(50% - 84.375vw);
		left: calc(50% - 150vw);
	}
/*	#trailer .contentIn{
		padding-bottom: 38.4%;
	}*/
}


/** Cursor **/
.cursor_play{
	width: 102px;
	height: 102px;
	position: absolute;
	pointer-events: none;
	transform: scale(0);
	opacity: 0;
	transition: opacity .3s ease, transform .4s ease, top .1s ease-out, left .1s ease-out;
	z-index: 3;
}
.cursor_play.is-active{
	opacity: 1;
	transform: scale(1);
}
.cursor_play:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/top/cursor_txt.svg) no-repeat center / contain;
	animation: 18s rotate linear infinite;
}
.cursor_play span{
	position: absolute;
	width: 65px;
	height: 65px;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: url(../img/top/cursor_icon.svg) no-repeat center / contain;
}

@media screen and (max-width: 767px){
	.cursor_play{
		width: min(13.6vw, 102px);
		height: min(13.6vw, 102px);
		opacity: 1;
		transform: scale(1);
		bottom: 0;
		left: calc(50% - 6.8vw);
		bottom: min(10.6667vw, 80px);
	}
	.cursor_play span{
		width: min(8.6667vw, 65px);
		height: min(8.6667vw, 65px);
	}
}


/**
* txt_main_btm
 **/
#txt_main_btm{
	max-width: 1012px;
	width: 100%;
	padding-top: min(44.3334% ,532px);
	background: url(../img/top/txt_main_btm.svg) no-repeat left bottom / contain;
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: max(-3.91667% ,-47px);
}
@media screen and (max-width: 767px){
	#txt_main_btm{
		width: 86.5334%;
		padding-top: 113.7334%;
		margin-bottom: -6.4%;
		background-image: url(../img/top/txt_main_btm_sp.svg);
	}
}