@charset "utf-8";

.header {

	position: absolute;

}

.header.is-fixed {

	position: fixed;

}

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

	.header {

		position: fixed;

		top: 0 !important;

	}

}



.fv{

	position:relative;

	height:min(max(100vh,640px),53.3333vw);

	max-height:100vh;

	min-height:640px;

	z-index:50;

}



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

	.fv{

		height:auto;

		max-height:unset;

		min-height:unset;

		padding:6.4vw 6.4vw 15vw;

	}

}

@media screen and (min-width:769px){

	.fv__flower{

		position:absolute;

		left:0;

		top:0;

		right:0;

		bottom:0;

		background:url(../img/top/fv_flower.png) no-repeat 15% bottom / auto 90%;

		z-index: 38;

	}

	.fv__flower.is-vs2 {

		background: url(../img/top/fv_flower2.png) no-repeat center / cover;

	}

}

.fvOneArea,

.fvOneWrap {

	width: 100%;

	height: 100%;

	position: relative;

	z-index: 1;

}

.fvOne {

	width: 100%;

	height: 100%;

	position: relative;

	top: 0;

}



.fv__bg{

	position:absolute;

	left:0;

	top:0;

	bottom:0;

	right:0;

	display:flex;

	flex-direction:column;

	justify-content:flex-end;

	background:url(../img/top/fv_bg.jpg) no-repeat center center / cover;

}

.fv__bg.is-vs2 {

	background-image: url(../img/top/fv2_bgptn.jpg);

	background-repeat: repeat;

	background-size: auto;

}

.fv__bg.is-vs3 {

	background-image: url(../img/top/fv3_bg.jpg);

	background-repeat: no-repeat;

	background-size: auto 130%;

	background-position: center bottom;

}



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

	.fv:before{

		content:'';

		position:absolute;

		background:linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1.6vw,rgba(255,255,255,0) 1.6vw,rgba(255,255,255,0) 100%);

		width:20.8vw;

		top:0;

		bottom:0;

		left:50%;

		margin-left:-10.4vw;

		background-size:3.2vw;

	}

	/* .fv:after {

		content: '';

		position: absolute;

		left:0;

		bottom:0;

		width:100%;

		height:21.6vw;

		-webkit-mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		background:var(--color-spink);

		animation:scrtext 45s linear infinite;

	} */

	.fv__bg.is-vs3 {

		display: none;

	}

}

.fv__bgInner{

	position:sticky;

	left:0;

	bottom:0;

	width:100%;

	height:120px;

	-webkit-mask:url(../img/common/scr_text.svg) repeat left top / auto 162px;

	mask:url(../img/common/scr_text.svg) repeat left top / auto 162px;

	background:var(--color-spink);

	animation:scrtext 45s linear infinite;

}

.fv__bgInner.is-vs3{

	z-index: -1;

	position: absolute;

}



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

	.fv__bgInner{

		height:21.6vw;

		-webkit-mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		animation: none;

	}

}

@media screen and (min-width:769px){

	.fv__bgRib{

		position:absolute;

		left:0;

		top:0;

		right:0;

		bottom:0;

		display:flex;

		flex-direction:column;

		justify-content:flex-end;

	}

	.fv__bgRibIn{

		position:sticky;

		left:0;

		bottom:0;

		width:100%;

		height:100vh;

		overflow:hidden;

	}

	.fv__bgRibIn:before{

		content:'';

		position:absolute;

		top:71%;

		left:0;

		right:0;

		height:10px;

		transform:skewY(7deg);

		background:var(--color-pink);

	}

	.fv__bgRibIn:after{

		content:'';

		position:absolute;

		top:calc(71% + 20px);

		left:0;

		right:0;

		height:200vh;

		transform:skewY(7deg);

		background:var(--color-pink);

	}

}

@keyframes scrtext{

	from{

		-webkit-mask-position:0 0;

		mask-position:0 0;

	}

	to{

		-webkit-mask-position:-2264px 0;

		mask-position:-2264px 0;

	}

}

@keyframes scrtext-s{

	from{

		-webkit-mask-position:0 0;

		mask-position:0 0;

	}

	to{

		-webkit-mask-position:-301.8666vw 0;

		mask-position:-301.8666vw 0;

	}

}

.fv__visual{

	position:absolute;

	bottom:0;

	top:0;

	left:max(24.25%,280px);

	right:max(1.5%,40px);

	background:url(../img/top/fv-p.png) no-repeat center bottom;

	background-size:auto min(110%,50vw);

	z-index:10;

}

.fv__visual.is-vs2 {

	background-image: url(../img/top/fv2-p.png);

}

.fv__visual.is-vs3 {

	background-image: url(../img/top/fv3_chara.png);

	bottom:0;

	top:0;

	left:0;

	right:0;

	background-size: auto 125%;

}



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

	.fv__visual{

		position:relative;

		bottom:unset;

		top:unset;

		left:unset;

		right:unset;

		background:url(../img/top/fv-s.png) no-repeat center bottom;

		background-size:contain;

		height:120.5333vw;

	}

	.fv__visual.is-vs2 {

		background-image: url(../img/top/fv2-s.png);

	}

	.fv__visual.is-vs3 {

		background-image: url(../img/top/fv3-s.png);

		background-size:contain;

	}

}

.fv__left{

	position:absolute;

	width:280px;

	left:20px;

	top:0;

	bottom:0;

	z-index:30;

}

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

	.fv__left{

		width:unset;

		left:6.4vw;

		top:6.4vw;

		right:6.4vw;

	}

}

.fv__leftInner{

	padding:34px;

	display:flex;

	flex-direction:column;

	align-items:center;

	position:absolute;

	left:0;

	top:0;

}

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

	.fv__leftInner{

		padding:71.7333vw 0 0;

		flex-direction:column;

		align-items:center;

		position:relative;

		left:unset;

		top:unset;

	}

}

.fv__logo{

	width:100%;

	padding-bottom:20px;

}

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

	.fv__logo{

		width:50.6666vw;

		padding-bottom:0;

	}

}

.fv__logoImg{

	margin:0 auto;

	max-width:100%;

	width:auto;

	height:auto;

	display:block;

}

.fv__icatch{

	width:240px;

	margin:0 -20px 15px;

}

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

	.fv__icatch{

		order:1;

		width:50.6666vw;

		margin:0 0 0;

	}

}

.fv__icatch img{

	width:100%;

}

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

	.fv__nav{

		display:none;

	}

}

.fv__navList{

	width:100%;

	height:40px;

	font-size:22px;

}

.fv__navList a{

	display:block;

	text-decoration:none;

	padding:0 20px;

	height:40px;

	line-height:40px;

	position:relative;

	transition:all 0.3s ease;

	filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.6)) drop-shadow(0px 0px 1px rgba(0,0,0,0.6)) ;

}

.fv__navList a:before{

	content:'';

	position:absolute;

	left:0;

	top:0;

	bottom:0;

	width:14px;

	-webkit-mask:url(../img/common/icon_star.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_star.svg) no-repeat center center / contain;

	background:var(--color-spink);

	opacity:0;

	transition:all 0.3s ease

}

.fv__navList a:hover{

	color:var(--color-spink);

}

.fv__navList a:hover:before{

	opacity:1;

}

.fv__catch{

	position:absolute;

	left:30%;

	width:3.8%;

	top:25%;

	bottom:25%;

	background:url(../img/common/catch.png) no-repeat center center / contain;

	z-index:40;

}

.fv__catch.is-vs2 {

	background-image: url(../img/common/catch2.png);

	left: auto;

	right: 26%;

}

.fv__catch.is-vs3 {

	width: 3.4%;

    background-image: url(../img/top/catch3.png);

    left: 47%;

    top: -32%;

}

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

	.fv__catch{

		left:10.7333vw;

		width:6.6vw;

		top:64.6vw;

		bottom:unset;

		height:42.8vw;

	}

	.fv__catch.is-vs2 {

		right: 3%;

		top: 24.6vw;

	}

	.fv__catch.is-vs3 {

		width: 6vw;

		left: 47%;

		top: 7.5vw;

	}

}



.fv__serif {

	height: 100%;

	position: absolute;

	right: 23%;

	width: 6%;

	top: 0;

	bottom: 0;

	background: url(../img/top/serif1.png) no-repeat center center / contain;

	z-index: 40;

}

.fv__serif.is-vs2 {

	background-image: url(../img/top/serif2.png);

	left: 28%;

	right: auto;

}

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

	.fv__serif {

		right: 4%;

		width: 13%;

	}

	.fv__serif.is-vs2 {

		left: 4%;

	}

}



/* swiper animation */

.fvOne {

	opacity: 0;

	transition: opacity 1s ease;

}

.fvOne.swiper-slide-active {

	opacity: 1;

}



/* visual pager */

.visualPager {

	width: 150px !important;

	position: absolute;

	bottom: 0 !important;

	right: 60px !important;

	left: unset!important;

	z-index: 100;

}

.visualPager > span {

	display: block;

	width: 150px;

	height: 50px;

	margin: 0 !important;

	position: relative;

}

.visualPager > span.swiper-pagination-bullet {

	opacity: 1;

	border-radius: unset;

	background: none;

}

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

	.visualPager {

		display: flex;

		justify-content: space-between;

		width: calc(500 /750 * 100vw) !important;

		left: 0 !important;

		right: 0 !important;

		bottom: 0 !important;

		margin: auto;

	}

	.visualPager > span {

		width: calc(240 / 750 * 100vw);

		height: auto;

	}

}



.visualPager > span:before {

	content: "";

	background-color: #000;

	width: 100%;

	height: 100%;

	opacity: .6;

	position: absolute;

	top: 0;

	z-index: 2;

	transition: opacity .3s ease;

}

.visualPager > span.swiper-pagination-bullet-active:before {

	opacity: 0;

}

.visualPager > span img {

	width: 100%;

	position: relative;

	z-index: 1;

}



.fv__right{

	position:absolute;

	right:0;

	top:0;

	bottom:0;

	width:280px;

	z-index:30;

}

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

	.fv__right{

		display: none;

		right:6.4vw;

		left:6.4vw;

		top:26.4vw;

		bottom:unset;

		width:unset;

		padding-top:127.6vw;

	}

}

.fv__rightInner{

	padding:70px 20px;

}

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

	.fv__rightInner{

		padding:0;

	}

}

.fv__officialTitle{

	font-size:20px;

	text-align:center;

	display:flex;

	justify-content:center;

	height:40px;

}

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

	.fv__officialTitle{

		display:none;

	}

}

.fv__officialLinks{

	display:flex;

	justify-content:center;

	flex-direction: column;

    align-items: center;

	margin-bottom:3vh;

}

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

	.fv__officialLinks{

		display:none;

	}

}

.fv__officialLink{

	width:50%;

	border:1px solid var(--color-pink);

	padding:2px;

}

.fv__officialLink:not(:first-child){

	margin-left:-1px;

}

.fv__officialLinkBtn{

	display:flex;

	justify-content:center;

	align-items:center;

	flex-direction:column;

	height:75px;

	border:1px solid var(--color-pink);

	font-size:14px;

	line-height:1;

	text-decoration:none;

	overflow:hidden;

	position:relative;

	transition:all 0.3s ease;

}

.fv__officialLinkBtn:hover{

	color:var(--color-pink);

}

.fv__officialLinkBtn:before{

	content:'';

	position:absolute;

	left:0;

	top:0;

	height:39px;

	width:44px;

	-webkit-mask:url(../img/top/deco_bcorner.svg) no-repeat left top / contain;

	mask:url(../img/top/deco_bcorner.svg) no-repeat left top / contain;

	background:var(--color-pink);

}

.fv__officialLinkBtn:after{

	content:'';

	position:absolute;

	right:0;

	bottom:0;

	height:39px;

	width:44px;

	-webkit-mask:url(../img/top/deco_bcorner.svg) no-repeat left top / contain;

	mask:url(../img/top/deco_bcorner.svg) no-repeat left top / contain;

	background:var(--color-pink);

	transform:rotate(180deg);

}

.fv__officialLinkBtn .folb-icon{

	transition:all 0.3s ease;

}

.fv__officialLinkBtn:hover .folb-icon{

	background:var(--color-pink);

}

.folb--x .folb-icon{

	content:'';

	width:20px;

	height:20px;

	margin-bottom:10px;

	-webkit-mask:url(../img/common/icon_tw.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_tw.svg) no-repeat center center / contain;

	background:var(--color-text);

}

.folb--tiktok .folb-icon{

	content:'';

	width:25px;

	height:25px;

	margin-bottom:10px;

	-webkit-mask:url(../img/common/icon_tiktok.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_tiktok.svg) no-repeat center center / contain;

	background:var(--color-text);

}

.fv__scroller{

	width:40px;

	display:flex;

	margin:0 auto;

}

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

	.fv__scroller{

		width:6.6666vw;

	}

}

.fv__scrollerLink{

	width:40px;

	padding:33px 0;

	height: min(calc(140 / 1200* 100vw), 140px);

	display:flex;

	justify-content:center;

	align-items:center;

	position:relative;

}

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

	.fv__scrollerLink{

		width:6.6666vw;

		padding:0 0 8vw;

		height:29.6vw;

	}

}

.fv__scrollerLink:before{

	content:'';

	position:absolute;

	width:100%;

	height:21px;

	-webkit-mask:url(../img/common/icon_accent.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_accent.svg) no-repeat center center / contain;

	background:var(--color-pink);

	left:0;

	bottom:0;

	transition:all 0.3s ease;

}

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

	.fv__scrollerLink:before{

		width:100%;

		height:6.5333vw;

	}

}

.fv__scrollerLink:hover:before{

	transform:translateY(5px);

}

.fv__scrollerLine{

	display:block;

	width:1px;

	height: min(calc(90 / 1200* 100vw), 90px);

	background:var(--color-text);

	position:relative;

}

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

	.fv__scrollerLine{

		display:block;

		width:1px;

		height:21.3333vw;

		background:var(--color-text);

		position:relative;

	}

}

.fv__scrollerLine:before{

	content:'';

	position:absolute;

	left:0;

	width:1px;

	top:0;

	height:0;

	animation:scroller 3s ease infinite;

	background:var(--color-pink);

}

@keyframes scroller{

	0%{

		top:0;

		height:0;

	}

	33%,66%{

		top:0;

		height:100%;

	}

	100%{

		top:100%;

		height:0;

	}

}

.fv__startDate{

	position:absolute;

	left:220px;

	right:220px;

	height:13%;

	bottom:3%;

	background:url(../img/common/startdate.png) no-repeat center center / contain;

	z-index:50;

}

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

	.fv__startDate{

		left:6.4vw;

		right:6.4vw;

		height:8.9333vw;

		bottom:unset;

		top:8.5333vw;

	}

}

.topics{

	position:relative;

	background:#000;

	padding:100px 0;

}

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

	.topics{

		padding:24vw 0 12vw;

	}

}

.topics:before{

	content:'';

	background:linear-gradient(to right,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 12px,rgba(255,255,255,0) 12px,rgba(255,255,255,0) 100%);

	position:absolute;

	left:50%;

	top:0;

	width:156px;

	bottom:0;

	margin-left:-78px;

	background-size:24px;

}

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

	.topics:before{

		content:'';

		position:absolute;

		background:linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1.6vw,rgba(255,255,255,0) 1.6vw,rgba(255,255,255,0) 100%);

		width:20.8vw;

		top:0;

		bottom:0;

		left:50%;

		margin-left:-10.4vw;

		background-size:3.2vw;

	}

}

.topics__box{

	flex-wrap:wrap;

	padding:0 10%;

	display:flex;

	max-width:1600px;

	margin:0 auto;

}

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

	.topics__box{

		padding:0 6.4vw;

	}

}

.topics__title{

	width:100%;

	margin-bottom:36px;

}

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

	.topics__title{

		display:flex;

		flex-direction:column;

		align-items:center;

		color:#000;

		position:relative;

		margin-bottom:6.6666vw;

	}

	.topics__title:before{

		content:'';

		position:absolute;

		left:50%;

		top:-10.6666vw;

		width:6.6666vw;

		height:6.9333vw;

		margin-left:-3.3333vw;

		-webkit-mask:url(../img/common/icon_crown.svg) no-repeat center center / contain;

		mask:url(../img/common/icon_crown.svg) no-repeat center center / contain;

		background:var(--color-pink);

	}

}

.topics__left{

	flex:1;

	width:calc(100% - 390px);

}

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

	.topics__left{

		width:100%;

		margin-bottom:6vw;

	}

}

.topics__more{

	display:table;

	height:40px;

}

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

	.topics__more{

		height:10vw;

		margin-left:auto;

	}

}

.topics__moreLink{

	display:flex;

	padding-right:64px;

	font-size:24px;

	text-decoration:none;

	letter-spacing:0.04em;

	position:relative;

	transition:all 0.3s ease;

}

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

	.topics__moreLink{

		padding-right:8.5333vw;

		font-size:5.3333vw;

	}

}

@media screen and (min-width:769px){

	.topics__moreLink:hover{

		color:var(--color-pink);

	}

}

.topics__moreLink:after{

	content:'';

	position:absolute;

	right:0;

	top:0;

	bottom:0;

	width:50px;

	-webkit-mask:url(../img/common/arrow_to-right.svg) no-repeat center center / contain;

	mask:url(../img/common/arrow_to-right.svg) no-repeat center center / contain;

	background:var(--color-pink);

	transition:all 0.3s ease;

}

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

	.topics__moreLink:after{

		width:6.6666vw;

	}

}

@media screen and (min-width:769px){

	.topics__moreLink:hover:after{

		transform:translateX(5px);

	}

}

.topics__right{

	width:340px;

	margin-left:50px;

}

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

	.topics__right{

		max-width:760px;

		width:100%;

		margin:auto auto;

	}

}

.topics__officialLists{

	padding-bottom:86px;

	height:100%;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

}

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

	.topics__officialLists{

		padding-bottom:5vw;

	}

}

.topics__officialList{

	position:relative;

	width:100%;

}

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

	.topics__officialList{

		padding-bottom: 20px;

	}

}

.topics__officialLink{

	border:1px solid #636363;

	height:130px;

	display:flex;

	width:100%;

	padding:2px;

	position:relative;

	background:#000;

	text-decoration:none;

	transition:all 0.3s ease;

}

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

	.topics__officialLink{

		height:17.3333vw;

	}

}

.topics__officialLink:hover{

	color:var(--color-pink);

}

.topics__officialLink:before{

	content:'';

	position:absolute;

	left:0;

	top:0;

	right:0;

	bottom:0;

	-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 22px 34px;

	mask:url(../img/common/bg_btn.png) repeat left top / 22px 34px;

	background:#FFF;

	opacity:0.1;

	transition:all 0.3s ease;

}

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

	.topics__officialLink:before{

		-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 2.9333vw 4.5333vw;

		mask:url(../img/common/bg_btn.png) repeat left top / 2.9333vw 4.5333vw;

	}

}

@media screen and (min-width:769px){

	.topics__officialLink:hover:before{

		animation:btnptn 1s linear infinite;

		background:var(--color-pink);

		opacity:0.16;

	}

}

@keyframes btnptn{

	from{

		-webkit-mask-position:0 0;

		mask-position:0 0;

	}

	to{

		-webkit-mask-position:22px -34px;

		mask-position:22px -34px

	}

}

.topics__officialLinkInner{

	display:flex;

	justify-content:center;

	align-items:center;

	width:100%;

	height:100%;

	border:1px solid #636363;

	position:relative;

	overflow:hidden;

}

.topics__officialLinkInner:before,

.topics__officialLinkInner:after{

	content:'';

	position:absolute;

	width:60px;

	height:1px;

	transform:rotate(-45deg);

	transform-origin:left top;

	background:#636363;

}

.topics__officialLinkInner:before{

	top:10px;

	left:0;

	transform-origin:left top;

}

.topics__officialLinkInner:after{

	bottom:10px;

	right:0;

	transform-origin:right bottom;

}

.topics__officialLinkName{

	font-size:36px;

	display:block;

	padding-right:40px;

	position:relative;

}

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

	.topics__officialLinkName{

		font-size:6.6666vw;

		padding-right:8vw;

	}

}

.topics__officialLinkName:before{

	transition:all 0.3s ease;

}

.topics__officialLink:hover .topics__officialLinkName:before{

	background:var(--color-pink);

}

.toln--x:before{

	content:'';

	position:absolute;

	right:0;

	top:0;

	bottom:4px;

	width:24px;

	-webkit-mask:url(../img/common/icon_tw.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_tw.svg) no-repeat center center / contain;

	background:#FFF;

}

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

	.toln--x:before{

		bottom:2px;

		width:5vw;

	}

}

.toln--tiktok:before{

	content:'';

	position:absolute;

	right:0;

	top:0;

	bottom:4px;

	width:24px;

	-webkit-mask:url(../img/common/icon_tiktok.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_tiktok.svg) no-repeat center center / contain;

	background:#FFF;

}

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

	.toln--tiktok:before{

		bottom:2px;

		width:5vw;

	}

}

.topics__officialLinkUser{

	position:absolute;

	right:10px;

	bottom:3px;

	color:var(--color-pink);

}

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

	.topics__officialLinkUser{

		font-size:3.2vw;

	}

}

.introduction{

	padding:140px 0 100px;

	background:#000;

	position:relative;

	overflow:hidden;

	background:var(--color-pink);

	color:#000;

}

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

	.introduction{

		padding:18vw 0;

	}

}

.introduction:before{

	content:'';

	background:linear-gradient(to right,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 12px,rgba(255,255,255,0) 12px,rgba(255,255,255,0) 100%);

	position:absolute;

	left:50%;

	top:0;

	width:156px;

	bottom:0;

	margin-left:-78px;

	background-size:24px;

}

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

	.introduction:before{

		background:linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1.6vw,rgba(255,255,255,0) 1.6vw,rgba(255,255,255,0) 100%);

		width:20.8vw;

		margin-left:-10.4vw;

		background-size:3.2vw;

	}

}

.introduction__inner{

	padding:0 8%;

	position:relative;

	z-index:10;

}

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

	.introduction__inner{

		padding:0 6.4vw;

	}

}

.introduction__inner:before{

	content:'';

	position:absolute;

	left:5%;

	bottom:-200px;

	width:177px;

	height:558px;

	background:url(../img/common/deco_intro.png) no-repeat center center / contain;

}

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

	.introduction__inner:before{

		left:-3.2vw;

		bottom:-30vw;

		width:23.6vw;

		height:74.4vw;

	}

}

.introduction__inner:after{

	content:'';

	position:absolute;

	right:5%;

	top:-220px;

	width:177px;

	height:558px;

	background:url(../img/common/deco_intro.png) no-repeat center center / contain;

	transform:rotateY(180deg);

}

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

	.introduction__inner:after{

		right:-3.2vw;

		top:-30vw;

		width:23.6vw;

		height:74.4vw;

	}

}

.introduction__title{

	display:flex;

	flex-direction:column;

	align-items:center;

	color:#000;

	position:relative;

	margin-bottom:54px;

	z-index:30;

}

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

	.introduction__title{

		margin-bottom:6vw;

	}

}

.introduction__title:before{

	content:'';

	position:absolute;

	left:50%;

	top:-60px;

	width:38px;

	height:38px;

	margin-left:-19px;

	background:url(../img/common/icon_crown.svg) no-repeat center center / contain;

}

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

	.introduction__title:before{

		top:-10vw;

		width:6.6666vw;

		height:6.9333vw;

		margin-left:-3.3333vw;

	}

}

.introduction__title .title__en{

	font-size:100px;

	margin-bottom:10px;

}

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

	.introduction__title .title__en{

		font-size:14.6666vw;

		margin-bottom:2.4vw;

	}

}

.introduction__title .title__ja{

	font-size:20px;

}

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

	.introduction__title .title__ja{

		font-size:3.2vw;

		padding:0 6.6666vw;

	}

}

.introduction__catch{

	text-align:center;

	font-size:min(24px,2.3vw);

	font-weight:700;

	line-height:2;

	margin-bottom:42px;

}

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

	.introduction__catch{

		font-size:4.2666vw;

		margin-bottom:5vw;

	}

}

.introduction__text{

	font-size:min(18px,1.75vw);

	text-align:center;

	line-height:2.22;

	letter-spacing:0.04em;

	margin-bottom:1.5em;

}

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

	.introduction__text{

		font-size:3.2vw;

		line-height:2;

		letter-spacing:0;

	}

}

.staff{

	position:relative;

	background:#000;

	padding:100px 0;

}

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

	.staff{

		position:relative;

		background:#000;

		padding:18vw 0 17vw;

	}

}

.staff:before{

	content:'';

	background:linear-gradient(to right,  rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 12px,rgba(255,255,255,0) 12px,rgba(255,255,255,0) 100%);

	position:absolute;

	left:50%;

	top:0;

	width:156px;

	bottom:0;

	margin-left:-78px;

	background-size:24px;

}

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

	.staff:before{

		background:linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1.6vw,rgba(255,255,255,0) 1.6vw,rgba(255,255,255,0) 100%);

		width:20.8vw;

		margin-left:-10.4vw;

		background-size:3.2vw;

	}

}

.staff__box{

	flex-wrap:wrap;

	padding:0 10%;

	margin:0 auto;

	display:flex;

	max-width:1600px;

	position:relative;

}



.cast__box{

	padding:5% 10%;

	margin:0 auto;

	max-width:1600px;

	position:relative;

}

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

	.staff__box{

		padding:6.4vw;

	}

	.cast__box{

		padding:17.4vw 6.4vw;

	}

}

	.staff__title,

	.cast__title{

		width:100%;

		margin-bottom:36px;

	}

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

	.staff__title,

	.cast__title{

		margin-bottom:6.6666vw;

		position:relative;

		display:flex;

		flex-direction:column;

		align-items:center;

	}

	.staff__title:before,

	.cast__title:before{

		content:'';

		position:absolute;

		left:50%;

		top:-10.6666vw;

		width:6.6666vw;

		height:6.9333vw;

		margin-left:-3.3333vw;

		-webkit-mask:url(../img/common/icon_crown.svg) no-repeat center center / contain;

		mask:url(../img/common/icon_crown.svg) no-repeat center center / contain;

		background:var(--color-pink);

	}

}

.staff__lists{

	display:flex;

	flex-wrap:wrap;

}



.cast__lists {

	display: flex;

	flex-wrap: wrap;

}



.staff__list{

	margin-bottom:40px;

	width:25%;

}



.cast__list {

	margin-bottom:40px;

	width:26%;

}

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

	.staff__list,

	.cast__list{

		margin-bottom:6vw;

		width:50%;

	}

}

.staff__list--full,

.cast__list--full{

	width:100%;

}

.staff__listPosition,

.cast__listPosition{

	font-size:16px;

	color:var(--color-pink);

}

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

	.staff__listPosition,

	.cast__listPosition{

		font-size:3.2vw;

	}

}

.staff__listName,

.cast__listName{

	font-size:18px;

}

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

	.staff__listName,

	.cast__listName{

		font-size:3.8vw;

	}

}

.staff__list--original .staff__listPosition,

.cast__list--original .cast__listPosition{

	font-size:18px;

}

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

	.staff__list--original .staff__listPosition,

	.cast__list--original .cast__listPosition{

		font-size:3.4vw;

	}

}

.staff__list--original .staff__listName,

.cast__list--original .cast__listName{

	font-size:22px;

}

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

	.staff__list--original .staff__listName,

	.cast__list--original .cast__listName{

		font-size:4vw;

	}

}

.comment__btn{

	display:inline-block;

	width:25px;

	height:22px;

	margin-left:7px;

	-webkit-mask:url(../img/common/icon_comment.svg) no-repeat center center / contain;

	mask:url(../img/common/icon_comment.svg) no-repeat center center / contain;

	background:var(--color-pink);

	vertical-align:text-top;

	transition:all 0.3s ease;

	transform-origin:left bottom;

}

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

	.comment__btn{

		width:5vw;

		height:4.4vw;

		margin-left:1vw;

	}

}

.comment__btn:hover{

	transform:scale(1.2);

}



/**

 * movie

 */

.movie {

	position: relative;

	background: #000;

	padding-top: 160px;

	padding-bottom: 120px;

}



.movieListsArea {

	position: relative;

	z-index: 1;

}



/**

 * movieListsWrap

 */

 .movieListsWrap {

	width: 100%;

	position: relative;

	z-index: 2;

}

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

	.movieListsWrap {

		width: calc(620 / 750 * 100vw);

	}

}

/* item */

.movieLists__item {

	width: 640px;

	margin: 0 auto;

}

.movieLists__item > a {

	display: block;

	width: 100%;

	overflow: hidden;

	padding-top: 56.25%;

	position: relative;

}

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

	.movieLists__item {

		width: 100%;

	}

}



/* thumb */

.movieLists__thumb {

	background-repeat: no-repeat;

	background-size: cover;

	background-position: center;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 0;

}



/* icon */

.movieLists__icon {

	background-color: #fff;

	-webkit-mask: url(../img/common/icon_play.svg) no-repeat center / contain;

	mask: url(../img/common/icon_play.svg) no-repeat center / contain;

	display: block;

	width: 116px;

	height: 116px;

	margin: auto;

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	z-index: 3;

}

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

	.movieLists__icon {

		width: calc(116 / 750 * 100vw);

		height: calc(116 / 750 * 100vw);

	}

}



/* hover */

.movieLists__thumb {

	transition: transform .4s ease;

}

.movieLists__item > a:hover .movieLists__thumb {

	transform: scale(1.2);

}



/* title */

.movieLists__title {

	color: #fff;

	font-size: 16px;

	margin-top: 0.8em;

	text-align: center;

}

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

	.movieLists__title {

		font-size: 12px;

	}

}



/**

 * movieListsPager

 */

 .movieListsPagerWrap {

    width: 640px;

    pointer-events: none;

    margin: auto;

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    z-index: 2;

}

.movieListsPagerWrap:before {

    content: "";

    display: block;

    width: 100%;

    padding-top: 56.25%;

    position: relative;

    z-index: 1;

}

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

    .movieListsPagerWrap {

        width: calc(620 / 750 * 100vw);

    }

}



/* pager */

.movieListsPager {

    width: 40px;

    height: 40px;

    margin: auto;

    pointer-events: auto;

    position: absolute;

    top: 0;

    bottom: 0;

    z-index: 2;

}

.movieListsPager.is-next { right: -60px; }

.movieListsPager.is-prev { left: -60px; }

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

    .movieListsPager {

        width: calc(65 / 750 * 100vw);

        height: calc(65 / 750 * 100vw);

    }

    .movieListsPager.is-next { right: -8.66666667vw; }

    .movieListsPager.is-prev { left: -8.66666667vw; }

}



.movieListsPager > a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    position: relative;

}

.movieListsPager > a:before {

    content: "";

    background: no-repeat center / contain;

    display: block;

    width: 18px;

    height: 35px;

}

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

    .movieListsPager > a:before {

        width: calc(18 / 750 * 100vw);

        height: calc(35 / 750 * 100vw);

    }

}



.movieListsPager.is-next > a:before { background-image: url(../img/common/icon_arrow_right.svg); }

.movieListsPager.is-prev > a:before { background-image: url(../img/common/icon_arrow_left.svg); }



/* hover */

.movieListsPager > a:before {

    transition: transform .3s ease;

}

.movieListsPager.is-next > a:hover:before { transform: translate(40%); }

.movieListsPager.is-prev > a:hover:before { transform: translate(-40%); }



/* bg */

.movieBg {

	width: 100%;

    height: 100%;

	overflow: hidden;

	pointer-events: none;

    position: absolute;

    top: 0;

	z-index: 0;

}

.movieBg__iframe {

	margin: auto;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

	z-index: 0;

}

.movieBg:before {

    content: "";

    background-color: #000;

    width: 100%;

    height: 100%;

    opacity: .6;

    position: absolute;

    top: 0;

    z-index: 2;

}

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

	.movieBg {

		display: none;

		/* width: 100%;

		height: calc(421 / var(--vw-min) * 100vw);

		margin-bottom: calc(40 / var(--vw-min) * 100vw);

		position: relative; */

	}

	.movieBg:before {

		content: none;

	}

}



/* .movie:before {

	content: '';

	background: linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 12px,rgba(255,255,255,0) 12px,rgba(255,255,255,0) 100%);

	position: absolute;

	left: 50%;

	top: 0;

	width: 156px;

	bottom: 0;

	margin-left: -78px;

	background-size: 24px;

} */

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

	.movie {

		display: flex;

		flex-direction: column-reverse;

		padding-top: 0;

		padding-bottom: 0;

	}

	/* .movie:before {

		content: '';

		position: absolute;

		background: linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1.6vw,rgba(255,255,255,0) 1.6vw,rgba(255,255,255,0) 100%);

		width: 20.8vw;

		top: 0;

		bottom: 0;

		left: 50%;

		margin-left: -10.4vw;

		background-size: 3.2vw;

	} */

}



/* inner */

.movie__inner {

	display: flex;

	padding: 0 10%;

	display: flex;

	max-width: 1600px;

	margin: 0 auto;

}

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

	.movie__inner {

		flex-direction: column;

		padding: 0 6.4vw;

	}

}



/* title */

.movie__title {

	flex: none;

	padding-right: 40px;

}

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

	.movie__title {

		display: flex;

		flex-direction: column;

		align-items: center;

		color: #000;

		position: relative;

		margin-bottom: 6.6666vw;

		padding-right: 0;

	}

	.movie__title:before {

		content: '';

		position: absolute;

		left: 50%;

		top: -10.6666vw;

		width: 6.6666vw;

		height: 6.9333vw;

		margin-left: -3.3333vw;

		-webkit-mask: url(../img/common/icon_crown.svg) no-repeat center center / contain;

		mask: url(../img/common/icon_crown.svg) no-repeat center center / contain;

		background: var(--color-pink);

	}

}

/**

 * lists

 */

.movie__lists {

	width: 100%;

}



/**

 * linkWrap

 */

.movie__linkWrap {

	width: 100%;

	margin-bottom:30px;

}

.movie__link {

	background-color: #ccc;

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

	display: block;

	padding-top: 56.25%;

	position: relative;

}



/* deco */

.movie__link__deco {

	background-color: #fff;

	-webkit-mask: url(../img/common/icon_play.svg) no-repeat center / contain;

	mask: url(../img/common/icon_play.svg) no-repeat center / contain;

	display: block;

	width: 116px;

	height: 116px;

	margin: auto;

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	z-index: 3;

}

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

	.movie__link__deco {

		width: calc(116 / 750 * 100vw);

		height: calc(116 / 750 * 100vw);

	}

}



/* cover */

/* .movie__link:before {

	content: "";

	background-color: var(--color-spink);

	width: 100%;

	height: 100%;

	opacity: .6;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 1;

	mix-blend-mode: hard-light;

}

.movie__link:after {

	content: "";

	background-color: var(--color-pink);

	width: 100%;

	height: 100%;

	opacity: .5;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 2;

} */



/* hover */

.movie__link__deco {

	transition: transform .3s ease;

}

.movie__link:hover .movie__link__deco {

	transform: scale(1.15);

}



/*------------------------

*character link

--------------------------*/



.character__linkWrap {

	width: 340px;

    margin: 60px auto 0;

}



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

	.character__linkWrap{

		max-width:760px;

		width:100%;

		padding: 0 6.4vw;

		margin: 7.3333vw auto 0;

	}

}



.character__Link {

    border: 1px solid #636363;

    height: 130px;

    display: flex;

    width: 100%;

    padding: 2px;

    position: relative;

    background: #000;

    text-decoration: none;

    transition: all 0.3s ease;

}



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

	.character__Link{

		height:17.3333vw;

	}

}



.character__Link:hover{

	color:var(--color-pink);

}



.character__Link:before{

	content:'';

	position:absolute;

	left:0;

	top:0;

	right:0;

	bottom:0;

	-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 22px 34px;

	mask:url(../img/common/bg_btn.png) repeat left top / 22px 34px;

	background:#FFF;

	opacity:0.1;

	transition:all 0.3s ease;

}



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

	.character__Link:before{

		-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 2.9333vw 4.5333vw;

		mask:url(../img/common/bg_btn.png) repeat left top / 2.9333vw 4.5333vw;

	}

}



@media screen and (min-width:769px){

	.character__Link:hover:before{

		animation:btnptn 1s linear infinite;

		background:var(--color-pink);

		opacity:0.16;

	}

}



@keyframes btnptn{

	from{

		-webkit-mask-position:0 0;

		mask-position:0 0;

	}

	to{

		-webkit-mask-position:22px -34px;

		mask-position:22px -34px

	}

}



.character__LinkTextWrap {

	display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    border: 1px solid #636363;

    position: relative;

    overflow: hidden;

}



.character__LinkTextWrap:before,

.character__LinkTextWrap:after {

    content: '';

    position: absolute;

    width: 60px;

    height: 1px;

    transform: rotate(-45deg);

    transform-origin: left top;

    background: #636363;

}



.character__LinkTextWrap:before {

    top: 10px;

    left: 0;

    transform-origin: left top;

}



.character__LinkTextWrap:after {

    bottom: 10px;

    right: 0;

    transform-origin: right bottom;

}



.character__LinkText {

	font-size: 20px;

	letter-spacing: 0.2em;

    display: block;

    position: relative;

}



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

	.character__LinkText{

		font-size: 4.6666vw;

	}

}







/**

 * bnrArea

 */

.bnrAreaWrap {

	position: relative;

	z-index: 2;

}



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

	.bnrAreaWrap {

		padding: calc(60 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) calc(180 / var(--vw-min) * 100vw);

		z-index: 2;

	}



	.bnrAreaWrap:after {

		content: '';

		position: absolute;

		left:0;

		bottom:0;

		width:100%;

		height:21.6vw;

		-webkit-mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		mask:url(../img/common/scr_text.svg) repeat left top / auto 21.6vw;

		background:var(--color-spink);

		animation:scrtext 45s linear infinite;

	}

}



.bnrAreaLists {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	padding: 0 15px;

}



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

	.bnrAreaLists {

		padding: 0;

	}

}

	



.bnrAreaLists-item-img img {

	width: 100%;

	pointer-events: none;

}



.bnrAreaLists-item-link {

	display: block;

	position: relative;

	z-index: 1;

    background: #e64290;

	transition: .3s ease;

	pointer-events: auto;	

}



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

	.bnrAreaLists-item-link {

		display: block;

		width: 100%;

		position: relative;

		background: var(--color-spink);

		transition: .3s ease;

	}

}



.bnrAreaLists-item-link:hover{

	color:var(--color-spink);

}



.bnrAreaLists-item-link:before{

	content:'';

	position:absolute;

	left:0;

	top:0;

	right:0;

	bottom:0;

	z-index: -1;

	-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 4px 6px;

	mask:url(../img/common/bg_btn.png) repeat left top / 4px 6px;

	background:#000;

	opacity:0.1;

	transition:all 0.3s ease;

}



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

	.bnrAreaLists-item-link:before{

	-webkit-mask:url(../img/common/bg_btn.png) repeat left top / 8px 14px;

	mask:url(../img/common/bg_btn.png) repeat left top / 8px 14px;

	}

}





@media (hover : hover) and (pointer : fine) and (min-width:769px){

	.bnrAreaLists-item-link:before {

		animation:btnptn2 1s linear infinite;

		animation-play-state: paused;

	}

	.bnrAreaLists-item-link:hover:before{

		animation-play-state: running;

		background:var(--color-pink);

		opacity:0.16;

	}

}



@keyframes btnptn2{

	from{

		-webkit-mask-position:0 0;

		mask-position:0 0;

	}

	to{

		-webkit-mask-position:4px -6px;

		mask-position:4px -6px

	}

}