@charset "utf-8";
@media screen and (max-width:768px){
	img{
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width:769px){
	.fadeIn{
		opacity: 0;
		  transition: all 0.3s ease 0.2s;
		transform: translateY(5%);
	}
	.section_ttl.fadeIn{
		opacity: 0;
		  transition: all 0.3s ease 0.2s;
		transform: translateX(-5%);
	}
	.fadeIn.animated{
		opacity: 1;
		transform: translateY(0) translateX(0);
	}
	.fadeIn.fadeInBlur{
		opacity: 0;
		filter:blur(8px);
		transition: all 0.6s ease 0.2s;
		transform: translateY(50px);
	}
	.fadeIn.fadeInBlur.animated {
		opacity:1;
		filter:blur(0);
		transform:translateY(0);
	}
}

#fullWrap{
	width:100%;
	min-width:1200px;
	position:relative;
	z-index:2;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#contentWrap{
	position: relative;
	z-index:7;
}

@media screen and (max-width:768px){
	#fullWrap{
		min-width:320px;
		padding:0;
	}
	#contentWrap{
		position:relative;
		left:auto;
		top:auto;
		right:auto;
		bottom:auto;
	}
}
/*LOADING*/

#contentWrap{
	opacity: 0;
}
#contentWrap.contentWrap--character{
	opacity: 1 !important;
	transition: all 0.6s ease;
}
#loading{
	position:fixed;
	width: 100%;
	height: 100vh;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:20000;
	pointer-events: none;
	opacity: 1;
	transition: all 1s ease;
	background-color: #000;
}
#loading.load_2{
	/*filter: blur(100px);*/
	opacity: 0;
}
.loading_logo{
	width: 260px;
	height: auto;
	position: absolute;
	z-index: 20001;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition:opacity 1s ease;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.loading_logo{
		width: 40%;
	}
}
.loading_logo img{
	width: 100%;
}
#stage{
	opacity: 1;
}
#contentWrap{
	opacity: 0;
}
body.--loaded #loading{
	animation: blurAnime_fadeOut 1.5s forwards;
}
body.--loaded #contentWrap{
	animation: fadein 1.5s forwards;
	animation-delay: 1s;
}
@keyframes blurAnime_fadeOut{
	flom {
		filter: blur(0);
		transform:  scale(1);
		opacity: 1;
	}
	to {
	filter: blur(50px);
	transform:  scale(2);
	opacity: 0;
	}
}
@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
/*----------------
TOP
----------------*/
/*----------------
fvArea
----------------*/
.fvArea{
	text-align: center;
	width: 100%;
	position: relative;
	display: flex;
	background:#000 url(../img/common/bg.png);
}
.fv_ttl {
	width:526px;
    margin: 0 auto 40px;
}
.fv_ttl img {
	width:100%;
}
.txt_os{
	margin-top:3.2vw;
}
@media screen and (max-width:768px){
	.fvArea{
		display: block;
	}
	.fv_ttl{
		width: 56%;
		margin: 0 auto;
	}
	.fv_catch{
		width: 68.6%;
		margin: 0 auto 3.2vw;
	}
	.txt_day{
		width: 49%;
		margin: 0 auto;
		margin-top:3.2vw;
	}
	.txt_os{
		margin-top: -2%;
		font-size: max(3.2vw,12px);
		margin-bottom:3.2vw;
	}
}

.fvAreaLeft {
	width:50%;
	position: relative;
/*	height:100%;*/
	/* left:0; */
}
.fvAreaRight {
	width:50%;
	position: sticky;
	/* left:0; */
	top:0;
}
@media screen and (max-width:768px){
	.fvAreaLeft,
	.fvAreaRight {
		position: relative;
		width:100%;
	}
}
.fvAreaLeft {
	z-index:2;
}
@media screen and (max-width:768px){
	.fvAreaLeft {
		padding-top:0;
	}
}
.fvAreaCarousel {
	overflow: visible;
	height:100%;
}
.fvAreaCarousel-wrapper {
	height:100%;
}
.fvAreaCarousel-slide {
	position: relative;
	display: flex;
	width:100%;
}
.fv1 {
	align-items: flex-start;
}
.fv2 {
	align-items: flex-end;
}
.fvAreaImg {
	padding-top:80px;
	position: sticky;
	left:0;
	width:100%;
}
@media screen and (max-width:768px){
	.fvAreaImg {
		padding-top:0;
	}
}
.fv1 .fvAreaImg {
	top:0;
}
.fv2 .fvAreaImg {
	bottom:0;
}
.fvAreaImg img {
	width:100%;
	height:auto;
}
@media screen and (min-width:769px){
	.fv2 .fvAreaImg img {
		position: absolute;
		left:0;
		right:0;
		bottom:0;
	}
}
.fvSwitchWrap {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	display: flex;
	align-items: flex-end;
	z-index:500;
}
@media screen and (max-width:768px){
	.fvSwitchWrap {
		align-items: flex-start;
		z-index:500;
	}
}
.fvSwitch {
	width:80px;
	position: sticky;
	left:0;
	bottom:0;
}
@media screen and (max-width:768px){
	.fvSwitch {
		width:12.8vw;
	}
}
.fvSwitch__list {}
.fvSwitch__link {
	position: relative;
	height:80px;
	display: block;
}
@media screen and (max-width:768px){
	.fvSwitch__list {}
	.fvSwitch__link {
		height:12.8vw;
	}
}
#fvSwitchLink0 {
	background: url(../img/top/fv0_thumb.jpg) no-repeat center center / cover;
}
#fvSwitchLink1 {
	background: url(../img/top/fv1_thumb.jpg) no-repeat center center / cover;
}
.fvSwitch__link:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	box-sizing: border-box;
	border:2px solid #fff;
	transition: all 0.3s ease;
	opacity:0;
}
.fvSwitch__link:hover:before {
	opacity:1;
}
.fvSwitch__link:after {
	content:'';
	position: absolute;
	left:4px;
	top:4px;
	right:4px;
	bottom:4px;
	box-sizing: border-box;
	border:1px solid #fff;
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.fvSwitch__link:after {
		left:2px;
		top:2px;
		right:2px;
		bottom:2px;
	}
}
.fvSwitch__link.is-active:before,
.fvSwitch__link.is-active:after {
	border-color:var(--color-pink);
	opacity:1;
}
.fvSwitch__link span {
	display: block;
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.4);
	opacity:0;
	transition:all 0.3s ease;
}
.fvSwitch__link.is-active span {
	opacity:1;
}
.fvAreaRight {
	padding-top:40px;
}
@media screen and (max-width:768px){
	.fvAreaRight {
		padding-top:3.2vw;
	}
}
.fvAreaRightInner {
	display: flex;
	justify-content: center;
	align-items: center;
	height:calc(100vh - 200px);
	min-height:880px;
	margin-top:80px;
}
@media screen and (max-width:768px){
	.fvAreaRightInner {
		height:unset;
		min-height:unset;
		padding-bottom:6.4vw;
		margin-top:0;
	}
}
.yoyaku_img{
	display: inline-block;
	margin-right: 15px;
}
@media screen and (max-width:768px){
	.yoyaku_img{
		width: 12%;
	}
}
.link_x{
	display: inline-block;
	-webkit-mask-image: url(../img/common/icon_tw.svg);
	mask-image: url(../img/common/icon_tw.svg);
	background-color: #FFF;
	transition: all .4s ease;
	-webkit-mask-size: cover;
	mask-size: cover;
	width: 22px;
	height: 22px;
	margin-left: 10px;
}
@media screen and (max-width:768px){
	.link_x{
		width: 5vw;
		height: 5vw;
	}
}
.linkBox:hover .link_x{
	background-color:#000;
}
.link_discord{
	display: inline-block;
	-webkit-mask-image: url(../img/common/logo_discord.svg);
	mask-image: url(../img/common/logo_discord.svg);
	background-color: #FFF;
	transition: all .4s ease;
	-webkit-mask-size: cover;
	mask-size: cover;
	width: 120px;
	height: 22px;
}
@media screen and (max-width:768px){
	.link_discord{
		width: 27.27vw;
		height: 5vw;
	}
}
.linkBox:hover .link_discord{
	background-color:#000;
}
.linkBoxWrap{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.fvArea .linkBox{
	width: 100%;
	padding: 0 20px;
}
.fvArea .linkBoxWrap .linkBox{
	width:42%;
	padding: 0 10px;
}
@media screen and (max-width:768px){
	.linkBoxWrap{
		flex-direction: column;
	}
	.fvArea .linkBoxWrap{
		flex-direction:row;
	}
	.fvArea .linkBox{
		padding: 0 0;
	}
	.fvArea .linkBox:not(:last-child){
		margin-bottom: 5vw;
	}
	.fvArea .linkBoxWrap .linkBox{
		padding: 0 2.4vw;
		margin-bottom: 5vw;
	}
}
/**LINK BOTTON**/
.fvArea .linkBox a{
	height:50px;
	width:100%;
	max-width:320px;
}
@media screen and (max-width:768px){
	.fvArea .linkBox a{
		width: 75.2vw;
		max-width:75.2vw;
		height: 12.5vw;
		margin: 0 auto;
	}
	.fvArea .linkBoxWrap .linkBox a{
		width:100%;
	}
}
/*----------------
TOP CONTENTS
----------------*/
/*
.movie .section_ttl{
	position: absolute;
	left: 0;
	top: 80px;
	z-index: 10;
}
@media screen and (max-width:768px){
	.movie .section_ttl{
		top: 22.6vw;
	}
}*/
/*----------------
TOP CONTENTS_NEWSAREA
----------------*/
/**/
.newsArea::before{
	background-color: #000;
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.6;
	filter: blur(10px);
	position: fixed;
	transition: all .5s ease;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.index .introduction::before{
		position: absolute;
		filter: blur(0);
		opacity: 1;
		background-color: #222;
	}
/*	.toppage .newsArea::before{
		position: absolute;
		filter: blur(0);
		opacity: 0.6;
	}*/
}
.is-in_news .newsArea::before{
	opacity: .6;
	filter: blur(0);
}
.newsArea{
	position: relative;
}
@media screen and (max-width:768px){
	.newsArea.sec_content{
		padding-bottom: 6.4vw;
	}
}

.newsBoxWrap{
	margin-bottom: 80px;
	/*display: flex;
	justify-content: space-between;
	align-items: center;*/
}
@media screen and (max-width:768px){
	.newsBoxWrap{
		padding:0 0 16vw;
		margin-bottom: 0;
	}
}
#news .section_ttl {
	padding-left:0;
}
#news .section_ttl_main {
	margin-right:0;
}
.widgetBox {
	padding:80px 40px 80px;
}
.widget{
	width: 560px;
	height: 532px;
	position: relative;
	margin-bottom: 40px;
	padding: 40px;
	background: url(../img/top/x_frame.svg) no-repeat;
	background-size: 100% auto;
	margin:0 auto 40px;
}
.widget_inner{
	overflow-x: hidden;
	height: 472px;
}
.widgetUnder__linkBox {
	width:320px;
	margin:0 auto;
}
@media screen and (max-width:768px){
	.widgetUnder__linkBox {
		width:calc(558 / 750 * 100vw);
	}
}
.widgetUnder__linkBox li {
	margin-bottom:50px;
	padding:0 !important;
	width:100%;
    font-size :8px;
}
.widgetUnder__linkBox li a {
	width:100% !important;
}
@media screen and (max-width:768px){
	.widgetUnder__linkBox li {
		margin-bottom:9.6vw !important;
		padding:0 !important;
	}
}
.widgetUnder__linkBox li:last-child {
	margin-bottom:0 !important;
}
@media screen and (max-width:768px){
	.widgetBox{
		width: 100%;
		padding: 16vw 3.2vw 12.8vw;

	}
	.widget{
		width: 100%;
		height: 81vw;
		position: relative;
		margin-bottom: 6.4vw;
		padding: 6.4vw;
		background: url(../img/top/x_frame_sp.svg) no-repeat;
		background-size: 100%; auto;
	}
	.widget_inner{
		overflow-x: hidden;
		height: 68vw;
	}

}
@media screen and (max-width:768px){
	.newsArea .linkBox a{
		width: 62.4vw;
		height: 10vw;
		margin: 0 auto;
	}
}
.newsListsWrap {
	margin:0 40px 80px;
	text-align: left;
}
@media screen and (max-width:768px){
	.newsListsWrap {
		margin:0 0 6.4vw;
	}
}
.newsListsWrap .section_ttl {
	padding-left:0;
	margin-bottom: 40px;
}
@media screen and (max-width:768px){
	.newsListsWrap .section_ttl {
		margin-bottom:6.4vw;
	}
}
.newsListsWrap .section_ttl_main {
	font-size:80px;
}
@media screen and (max-width:768px){
	.newsListsWrap .section_ttl_main {
		font-size: max(10.2vw, 25px);
	}
}
.newsList_ttl {
	text-align: left
}
/*----------------
TOP CONTENTS_MOVIE AREA
----------------*/
.movie{
	z-index: 6;
	transition:all 0.5s ease;
}
.movie__inner{
	height:100vh;
	position:sticky;
	z-index:7;
	left:0;
	top:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.movie__play{
	width:120px;
	height:120px;
	border:1px solid rgba(255, 255, 255, .4);
	border-radius:50%;
	position:relative;
}
.movie__play:before{
	content:'';
	position:absolute;
	right:-40px;
	width:60px;
	height:1px;
	top:50%;
	background:#FFF;
	transition:all 0.3s ease;
}
.movie__play a{
	display:flex;
	text-decoration:none;
	justify-content:center;
	align-items:center;
	font-size:14px;
	height:120px;
	position:relative;
	z-index:10;
	pointer-events: auto;
}
.play-circle{
	position:absolute;
	left:-1px;
	width:120px;
	top:0px;
	height:120px;
	display:block;
}
.play-circle circle{
	fill:transparent;
	stroke:#FFF;
	stroke-width:1px;
	stroke-dasharray:0 400;
	transition:all 0.3s ease;
}
.movie__play:hover:before{
	transform:translateX(10px);
}
.movie__play:hover .play-circle circle{
	stroke-dasharray:400 400;
}
@media screen and (max-width:768px){
	.movie{
		position:relative;
		/* height:25vh; */
		opacity:1;
		transition:none;
		pointer-events:auto;
	}
	.movie__inner{
		/* height:25vh; */
		position:relative;
		left:auto;
		top:auto;
	}
	.movie__inner:before{
		content:'';
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		background:rgba(0, 0, 0, .7);
		pointer-events:none;
	}
	.movie__play{
		width:16vw;
		height:16vw;
		position:relative;
	}
	.movie__play:before{
		right:-5.333vw;
		width:8vw;
		height:1px;
		top:50%;
	}
	.movie__play a{
		font-size:1rem;
		height:16vw;
	}
	.play-circle{
		display:none;
	}
}
/*---------------
MOVIE Lists
---------------*/
.movieLists__item:not(.swiper-slide-active) .movieLists__thumb{
	filter: saturate(30%);
	transition: filter 0.4s ease;
}
.movieListsArea {
	width: 100%;
	padding:0;
}
@media screen and (max-width:768px){
	.movieListsArea {
		padding: 0 0;
	}
}
.movie{
	position: relative;
	overflow: hidden;
	/*background: #000;*/
}
.movie:before {
	content: "";
	background-color: rgba(0,0,0,.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
@media screen and (max-width:768px){
	.movieListsArea {
		height: auto;
		position: relative;
	}
}

.movieListsWrap {
	width: 100%;
/*	height: 100%;*/
	position: relative;
	z-index: 1;
	margin-top:80px;
}
@media screen and (max-width:768px){
	.movieListsWrap {
		height: 100%;
		position: relative;
		z-index: 1;
		margin-top:0;
	}
}
.movieLists {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

/* item */
.movieLists__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	position: relative;
}
.movieLists__link {
	pointer-events:auto;
}
@media screen and (max-width:768px){
	.movieLists__item {
		
	}
}

/* thumbArea */
.movieLists__thumbArea {
	position: relative;
	margin:0 40px;
}
@media screen and (max-width:768px){
	.movieLists__thumbArea {
		width: calc(560 / 750 * 100vw);
		position: relative;
		margin:0 auto;
	}
}
.movieLists__thumbArea::before{
	display: block;
	width: 98%;
	height: 100%;
	content: "";
	background-image: url(../img/top/movie_frame.svg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -0%);
	-ms-transform: translate(-50%, -0%);
	z-index: 1;
}
.movieLists__item:not(.swiper-slide-active) .movieLists__thumbArea::before{
	filter: saturate(30%);
	transition: filter 0.4s ease;
}

/* link */
.movieLists__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	/*pointer-events:none;*/
}
@media screen and (max-width:768px){
	.movieLists__link{
		pointer-events:auto;
	}
}
.movieLists__thumb {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* cover */
.movieLists__link:before {
	content: "";
	background-color: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* icon */
.movieLists__play {
	width:80px;
	height:80px;
	border:1px solid rgba(255, 255, 255, .4);
	border-radius:50%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.movieLists__play:before{
	content:'';
	position:absolute;
	left:-50px;
	width:78px;
	height:1px;
	top:50%;
	background-color: rgba(255, 255, 255, .4);
	transition:all 0.3s ease;
}

.movieLists__play--circle{
	position:absolute;
	left:-1px;
	width:120px;
	top:0px;
	height:120px;
	display:block;
}
.movie_play,
.movie_play_circle_wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.movie_play_circle{
	fill:transparent;
	stroke:#FFF;
	stroke-width:2px;
	stroke-dasharray:0 400;
	transition:all 0.3s ease;
}
.movieLists__link:hover .movie_play_circle{
	stroke-dasharray:400 400;
}
/* hover */
.movieLists__link:hover .movieLists__play:before{
	transform:translateX(10px);
}
.movieLists__link:hover .movieLists__play--circle circle{
	stroke-dasharray:400 400;
}
@media screen and (max-width:768px){
	.movieLists__play {
		width:13.3vw;
		height:13.3vw;
	}
	.movieLists__play:before{
		left: -4vw;
		width:8vw;
		height:1px;
		top:50%;
	}
	.movie_play_circle{
		display:none;
	}
	.movie_play_circle_wrap{
		width: 100%;
	}
	.movie_play{
		width: 11.3vw;
	}
}
/* title */
.movieLists__title {
	align-items: center;
	justify-content: center;
	font-size: 16px;
	text-align: center;
	margin: 14px 0 28px;
}
.movieLists__title i{
	margin-right: 5px;
}
@media screen and (max-width:768px){
	.movieLists__title {
		font-size: calc(24 / 750 * 100vw);
		height: 12vw;
		padding: 0 0;
		margin-bottom: 6vw;
	}
}
/**
 * movie swiper pager
 */
.moviePagerListsWrap{
	width: 100%;
	height: 24px;
	position: absolute;
	bottom: 40px;
	z-index: 10;
}
@media screen and (max-width:768px){
	.moviePagerListsWrap{
		bottom: 6.5vw;
	}
}
.movieListsWrap .swiper-button-prev,
.movieListsWrap .swiper-button-next {
	color:#fff;
	margin-top:-22px;
	top:calc(((50vw - 80px) * 0.5625) / 2);
}
@media screen and (max-width:768px){
	.movieListsWrap .swiper-button-prev,
	.movieListsWrap .swiper-button-next {
		color:#fff;
		margin-top:-4.8vw;
		top:calc((74.6666vw * 0.5625) / 2);
		overflow: hidden;
	}
}
.movieListsWrap .swiper-button-prev:after {
	content:'';
	position: absolute;
	left:20px;
	top:50%;
	width:50px;
	height:50px;
	box-sizing: border-box;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	transform: rotate(45deg);
	margin-top:-25px;
}
@media screen and (max-width:768px){
	.movieListsWrap .swiper-button-prev:after {
		left:3.2vw;
		width:9.6vw;
		height:9.6vw;
		margin-top:-4.8vw;
	}
}
.movieListsWrap .swiper-button-next:after {
	content:'';
	position: absolute;
	right:20px;
	top:50%;
	width:50px;
	height:50px;
	box-sizing: border-box;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform: rotate(45deg);
	margin-top:-25px;
}
@media screen and (max-width:768px){
	.movieListsWrap .swiper-button-next:after {
		right:3.2vw;
		width:9.6vw;
		height:9.6vw;
		margin-top:-4.8vw;
	}
}
.moviePagerLists.swiper-pagination-bullets.swiper-pagination-horizontal{
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	width: 100%;
	height: 100%;
	bottom: unset;
	left: unset;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.moviePagerLists__item{
	width: 24px;
	height: 24px;
	background: unset;
	opacity: 1;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.moviePagerLists__item:not(:first-child) {
	margin-left: 8px;
}
.moviePagerLists__link{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.moviePagerLists__link:after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 1px);
	width: 2px;
	height: 2px;
	background-color: #FFF;
	transition: .3s ease;
	border-radius: 50%;
}
.moviePagerLists__item svg{
	margin: 0;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}
.moviePagerLists__item svg circle{
	cx: 12px;
	cy: 12px;
	r: 11px;
	fill: transparent;
	stroke-width: 1px;
}
.moviePagerLists__item svg.moviePagerLists__circle{
	z-index: 2;
	opacity: 0;
}
.moviePagerLists__item svg.moviePagerLists__circle circle{
	stroke: #FFF;
}
.moviePagerLists__item svg.moviePagerLists__bg circle{
	stroke: rgba(255,255,255,40%);
}
.moviePagerLists__item.swiper-pagination-bullet-active .moviePagerLists__link:after {
	top: calc(50% - 2px);
	left: calc(50% - 2px);
	width: 4px;
	height: 4px;
	background-color: var(--main-color);
}
.moviePagerLists__item.swiper-pagination-bullet-active svg.moviePagerLists__circle {
	opacity: 1;
}
.moviePagerLists__item.swiper-pagination-bullet-active svg.moviePagerLists__circle circle{
	animation: pCircle_mv 12s forwards;
}
.movieListsWrap .swiper-pagination {
	position: relative;
	display: flex;
	justify-content: center;
	bottom:unset;
	padding-bottom:20px;
}
.movieListsWrap .swiper-pagination-bullet {
	width:16px;
	height:16px;
	box-sizing: border-box;
	border:1px solid rgba(255,255,255,.4);
	display: flex;
	justify-content: center;
	align-items: center;
	background:transparent;
	border-radius: unset;
	opacity:1;
	margin:0 10px !important;
	transform:rotate(45deg);
}
@media screen and (max-width:768px){
	.movieListsWrap .swiper-pagination-bullet {
		width:4.5333vw;
		height:4.5333vw;
		margin:0 3.2vw !important;
	}
}
.movieListsWrap .swiper-pagination-bullet:before {
	content:'';
	position: relative;
	width:6px;
	height:6px;
	display: block;
	background:rgba(255,255,255,.4);
}
@media screen and (max-width:768px){
	.movieListsWrap .swiper-pagination-bullet:before {
		width:1.5vw;
		height:1.5vw;
	}
}
.movieListsWrap .swiper-pagination-bullet-active {
	border-color:var(--main-color);
}
.movieListsWrap .swiper-pagination-bullet-active:before {
	background:var(--main-color);
}
.mv_selectorListsWrap{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	display: flex;
	align-items: center;
	width: 24px;
	z-index: 10;
}
.mv_selectorLists.swiper-pagination-bullets.swiper-pagination-horizontal{
	display: block;
	height: auto;
	width: 100%;
	bottom: unset;
	left: unset;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.mv_selectorList{
	width: 24px;
	height: 24px;
	margin: 8px 0;
	background: unset;
	opacity: 1;
}
.mv_selectorList_link{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.mv_selectorList_link:after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 1px);
	width: 2px;
	height: 2px;
	background-color: #FFF;
	transition: .3s ease;
	border-radius: 50%;
}
.mv_selectorList svg{
	margin: 0;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-90deg);
}
.mv_selectorList svg circle{
	cx: 12px;
	cy: 12px;
	r: 11px;
	fill: transparent;
	stroke-width: 1px;
}
.mv_selectorList svg.mv_selectorList_link__circle{
	z-index: 2;
	opacity: 0;
}
.mv_selectorList svg.mv_selectorList_link__circle circle{
	stroke: #FFF;
	animation: pCircle-out_mv 8s forwards;
}
.mv_selectorList svg.mv_selectorList_link__bg circle{
	stroke: rgba(255,255,255,40%);
}

@keyframes pCircle_mv {
	0% {
		stroke-dasharray: 0 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 76 76;
	}
}
@keyframes pCircle-out_mv {
	0% {
		stroke-dasharray: 76 76; /*-- 円の直径(24)x3.14 --*/
	}
	100% {
		stroke-dasharray: 0 76;
	}
}
.mv_selectorList.swiper-pagination-bullet-active .mv_selectorList_link:after {
	top: calc(50% - 2px);
	left: calc(50% - 2px);
	width: 4px;
	height: 4px;
	background-color: #FFF;
}
body.--afin .mv_selectorList.swiper-pagination-bullet-active svg.mv_selectorList_link__circle {
	opacity: 1;
}
body.--afin .mv_selectorList.swiper-pagination-bullet-active svg.mv_selectorList_link__circle circle{
	animation: pCircle_mv 12s forwards;
}

.introduction {
	padding:160px 0;
	position: relative;
	z-index:50;
	background:rgba(0,0,0,.4);
}
.introduction .section_ttl,
.widgetBox .section_ttl{
	padding:0;
}
.introduction .section_ttl_main,
.widgetBox .section_ttl_main {
	margin:0 auto;
	text-align: center;
}
.widgetBox .section_ttl {
	margin-bottom:40px;
}
.widgetBox .section_ttl_main {
	font-size:80px;
}
@media screen and (max-width:768px){
	.introduction {
		padding:16vw 0;
	}
	.widgetBox .section_ttl {
		margin-bottom:9.6vw;
	}
	.widgetBox .section_ttl_main {
		font-size:max(10.2vw, 25px);;
	}
}
.introduction__text {
	font-size:16px;
	line-height: 3;
	margin-bottom:3em;
	text-align: center;
}
@media screen and (max-width:768px){
	.introduction__text {
		font-size:3.2vw;
		line-height: 2.5;
		margin-bottom:2.5em;
		padding:0 4.8vw;
/*		text-align: left;*/
	}
}
.introduction__catch {
	font-size:24px;
	text-align: center;
	margin-bottom:-1em;
}
@media screen and (max-width:768px){
	.introduction__catch {
		font-size:4.2666vw;
		text-align:center;
		margin-bottom:-1em;
		padding:0 6.4vw;
	}
}
.x_ttl {
	font-size:28px;
	text-align: center;
	color:#9D885F;
}
@media screen and (max-width:768px){
	.x_ttl {
		font-size:4.2vw;
		text-align: center;
		color:#9D885F;
	}
}
.linkStores {
	display: flex;
	justify-content: center;
	padding:30px 0 20px;
}
@media screen and (max-width:768px){
	.linkStores {
		padding:0 0 6.4vw;
	}
}
.linkStores li {
	padding:0 10px;
}
.linkStores li img {
	height:50px;
	width:auto;
}
@media screen and (max-width:768px){
	.linkStores li img {
		height:12.8vw;
		width:auto;
	}
}
.linkStores li a {
	display: block;
	transition: all 0.3s ease;
}
.linkStores li a:hover {
	opacity:0.8;
}

.terms h1 {
	text-align: center;
	font-size:22px;
	font-weight: 700;
	margin-bottom:1.5em;
}
@media screen and (max-width:768px){
	.terms h1 {
		font-size:4vw;
	}
}
.terms h2 {
	font-size:16px;
	font-weight: 700;
	margin-top:1.5em;
}
@media screen and (max-width:768px){
	.terms h2 {
		font-size:3.2vw;
	}
}
.terms h3 {
	font-size:16px;
	margin-top:1.5em;
}
@media screen and (max-width:768px){
	.terms h3 {
		font-size:3.2vw;
	}
}
.terms h4 {
	font-size:16px;
	margin-top:1.5em;
}
@media screen and (max-width:768px){
	.terms h4 {
		font-size:3.2vw;
	}
}
.terms ol {
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px
}
.terms ul {
	padding:0.5em 0 0.5em 1em;
}
.terms ul li {
	text-indent: -1em;
}
@media screen and (max-width:768px){
	.terms ul li {
		font-size:3.2vw;
	}
}
.terms > ul > li:before {
	content:'・';
}
.terms > ul > li li:before {
	content:'○';
}
@media screen and (max-width:768px){
	.terms p {
		font-size:3.2vw;
	}
}
.question h1 {
	text-align: center;
	font-size:22px;
	font-weight: 700;
	margin-bottom:1.5em;
}
@media screen and (max-width:768px){
	.question h1 {
		font-size:4vw;
	}
	.question p {
		font-size:3.2vw;
	}
}
.require__caution {
	color:#f00;
}
@media screen and (max-width:768px){
	.require__caution {
		font-size:3.2vw;
		margin-bottom:0.5em !important;
	}
}
.questions {
	margin-bottom:50px;
}
@media screen and (max-width:768px){
	.questions {
		margin-bottom:6.4vw;
	}
}
.questions__column {
	display: flex;
	border-bottom:1px dotted #ccc;
	align-items: center;
}
.questions__column dt {
	width:150px;
}
@media screen and (max-width:768px){
	.questions__column dt {
		font-size:3.2vw;
		width:20vw;
	}
}
.questions .required dt:before {
	content:'* ';
	color:#f00;
}
.questions__column dd {
	flex:1;
	display: flex;
}
@media screen and (max-width:768px){
	.questions__column dd {
		font-size:3.2vw;
	}
}
.questions__column dd input,
.questions__column dd select {
	-webkit-appearance: none;
	height:60px;
	background:#000;
	color:#fff;
	padding:0 30px 0 0;
	border:none;
}
@media screen and (max-width:768px){
	.questions__column dd input,
	.questions__column dd select {
		height:12.8vw;
		padding:0 12.8vw 0 0;
	}
}
.questions__column dd input {
	width: 100%;
}
.questions__vertical {
	border-bottom:1px dotted #ccc;
	margin-bottom:1.5em;
	padding-bottom:1.5em;
}
.questions__vertical:last-of-type {
	margin-bottom:0;
}
.questions__vertical dt {
	margin-bottom:10px;
}
@media screen and (max-width:768px){
	.questions__vertical dt {
		font-size:3.2vw;
	}
}
.questions__vertical dd {
	padding:0 1.2em;
}
.questions__vertical dd textarea {
	-webkit-appearance: none;
	background:#000;
	color:#fff;
	border:1px solid #AAA;
	width:100% !important;
	height:200px;
	padding:5px;
}
@media screen and (max-width:768px){
	.questions__vertical dd textarea {
		height:26vw;
		padding:5px;
		font-size: 3.2vw;
	}
}
.c-formSelectContainer {
	position: relative;
}
.c-formSelectContainer:before {
	content:'▼';
	position: absolute;
	top:50%;
	right:5px;
	font-size:10px;
	color:#fff;
	transform:translateY(-50%);
	pointer-events: none;
}
@media screen and (max-width:768px){
	.c-formSelectContainer:before {
		font-size:2.6666vw;
	}
}
.c-formRadioItem {
	display: block;
}
@media screen and (max-width:768px){
	.c-formRadioItem {
		font-size:3.2vw;
		display: flex;
		align-items: center;

	}
}
.c-formRadioItem input {
	margin-right:1em;
}
.form__submit {
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0px;
}
.form__submit input,
.form__submit button {
	-webkit-appearance: none;
	background:#fff;
	color:#000;
	display: flex;
	justify-content: center;
	align-items: center;
	width:150px;
	height:50px;
	border:none;
	margin:0 20px;
	cursor: pointer;
}
@media screen and (max-width:768px){
	.form__submit input,
	.form__submit button {
		height:12.8vw;
		width:30vw;
		font-size:3.6vw;
		margin:0 3.2vw;
	}
}
.form__submit input:hover {
	opacity:0.7;
}

#movieWrap {
	opacity:0;
}
@media screen and (max-width:768px){
	.movieWrap__box {
		background: url(../img/top/movie_bg_sp.jpg) no-repeat center center / cover;
		background-color: transparent;
	}
}











/*--------------------------------
* CHARACTER
--------------------------------*/
#character{
	position: relative;
	background: rgba(0, 0, 0, 0.3);
	padding-bottom: 160px;
	padding-top:160px;
}
#character .section_ttl {
	padding-left:0;
}
/*character_bg*/
.character_bg{
	display: block;
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
	background: url(../img/top/character/chara_bg.jpg) no-repeat fixed;
	background-size: cover;
	pointer-events: none;
	transition: opcity .3s ease;
}

.character_bg::before{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../img/top/fv_over.png);
	z-index: 1;
}
@media screen and (max-width:768px){
	#character{
		padding-bottom: 16vw;
		clip-path: inset(0);
		padding-top:12.8vw;
	}
	.character_bg{
		position: fixed;
		background: url(../img/top/character/chara_bg.jpg) no-repeat center center;
		background-size: cover;
		height: 100lvh;
	}
	#character .section_ttl_main{
		margin-right: 0;
	}
}
#character .section_ttl{
	margin-bottom: 0;
	position: relative;
	z-index: 5;
}
#character .inner{
	margin-top: 70px;
	position: relative;
	z-index: 5;
	width: 1200px;
}
@media screen and (max-width:768px){
	#character .inner {
		width:auto;
	}
}
.characterList{
	height:0;

}
.characterList.swiper-slide-active{
	height: auto;

}
.characterContent{
	width: 100%;
	display: flex;
}
.characterCont_img{
	width: 440px;
	flex-shrink: 0;
	text-align: center;
	/*transform: translateX(40px);
	transition: all .6s ease;*/
}
.swiper-slide-active .characterCont_img{
	/*transform: translateX(0);*/
}
.characterCont_img img{
	height: auto;
	width: 100%;
}

.characterCont_cont{
	width: calc(100% - 440px);
	padding-top: 40px;
	/*padding-left: 3.8462%;*//* 40 */
	padding-right: 40px;
}

.charaName{
	font-size: 40px;
	font-weight: 700;
	color: #FFF;
	line-height: 1.15;
	letter-spacing: 0;
	margin-left: 4px;
}
.charaName span.name{
	display: inline-block;
	line-height: 1.15;
	background-color: #000;
}
.charaName__ruby{
	position: relative;
	display: inline-block;
	white-space: nowrap;
}
.charaName__ruby:before{
	content: attr(data-ruby);
	position: absolute;
	top: 0;
	left: 0.5em;
	right: 0.5em;
	font-size: 11px;
	margin-top: -16px;
	color: #FFF;
	text-align: center;
}
@supports (text-align-last: justify) {
	.charaName__ruby:before{
		text-align: justify;
		text-align-last: justify;
	}
}
@media screen and (max-width:768px){
	.charaName__ruby:before{
		left: 0.125em;
		right: 0.125em;
		font-size: var(--sp-size-20);
		margin-top: calc(var(--sp-size-30) * -1);
		letter-spacing: 0;
		white-space: nowrap;
	}
}

.charaCV{
	font-size: 18px;
	font-weight: 700;
	color: #FFF;
	margin-top: 20px;
	line-height: 1.15;
	margin-left: 4px;
}
.charaCV span{
	display: inline-block;
	line-height: 1.15;
	background-color: #000;
}
.charaCV span:before{
	content: 'CV';
	color: var(--main-color);
	font-family: var(--font-trajan);
	margin-right: 10px;
	padding-top: 4px;
}

.characterText{
	margin-top: 32px;
	width: 100%;
	padding: 16px 20px 16px 26px;
	background-color: #000;
	color: #FFF;
	font-size: 16px;
	line-height: 2;
	position: relative;
}
.characterText:before{
	content: '';
	position: absolute;
	top: 0;
	left: 4px;
	width: 2px;
	height: 100%;
	background-color: #9d885f;
}

.characterContent rt{
	font-size: 10px;
}

.characterVoiceLists{
	margin-top: 12px;
	padding-left: 12px;
}

.characterVoice{
	width: 50px;
	height: 50px;
	position: relative;
	transform: rotate(45deg);
}
.characterVoice__frame{
	width: 100%;
	height: 100%;
	background-color: #000;
	border: 1px solid #9d885f;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
}
.characterVoice__frame:before{
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 1px solid #9d885f;
	opacity: 40%;
	z-index: 2;
}
.characterVoice__icon{
	width: 30px;
	height: 20px;
	position: relative;
	z-index: 2;
	-webkit-mask: url(../img/common/icon_volume_on.svg) no-repeat center / contain;
	mask: url(../img/common/icon_volume_on.svg) no-repeat center / contain;
	background-color: #fff;
	transform: rotate(-45deg);
	transition: all .3s ease;
}
/*voice hover*/
#characterModal .characterVoice__icon:hover{
	transform: rotate(-45deg) scale(1.2);
}

/*voice on*/
#characterModal.--audio-play .characterVoice__frame{
	background-color: #9d885f;
	border: none;
}
#characterModal.--audio-play .characterVoice__frame:before{
	border: 1px solid #000;
}
#characterModal.--audio-play .characterVoice__icon{
	-webkit-mask: url(../img/common/icon_volume_off.svg) no-repeat center / contain;
	mask: url(../img/common/icon_volume_off.svg) no-repeat center / contain;
	background-color: #000;
}

/*characterThum*/
.characterThumbArea{
	margin-top:0;
}
.characterModal .characterThumbArea {
	padding-bottom:120px;
	position: relative;
}
@media screen and (max-width:768px){
	.characterModal .characterThumbArea {
		padding:0 3.2vw 28vw;
	}
}
.characterThumbArea_ttl{
	font-size: 24px;
	color: #FFF;
	font-weight: 800;
	margin-bottom: 40px;
	text-align: center;
}
.characterThumbListsWrap{
	width: 100%;
	max-width: 960px;
	margin: 56px auto 0;
	display: flex;
	justify-content: space-between;
}
.characterThumbLists{
	width: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	gap: 20px;
	padding: 40px;
}
.characterThumbLists::after{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	/*border: 2px solid #000;*/
}
.characterThumbListsBox._box1{
	width: 544px;
	border: 2px solid #FFF;
	/*background-color: rgba(63, 182, 242, .2);*/
}
.characterThumbListsBox._box2{
	width: 384px;
	/*background-color: rgba(242, 62, 242, .2);*/
	border: 2px solid #fff;
}
.characterThumb__name {
	text-align: center;
	letter-spacing: 0.05em;
	font-size:12px;
}
.charaChangeBtnWrap {
	position: absolute;
	left: 0px;
	bottom: 40px;
	width: 80px;
	height: 120px;
	text-decoration: none;
	z-index: 100
}
@media screen and (max-width:768px){
	.charaChangeBtnWrap {
		position: absolute;
		left: unset;
		right:6.4vw;
		bottom:18vw;
		width: 16vw;
		height: 24vw;
		text-decoration: none;
		z-index: 100
	}
}
.charaChangeBtn {
	width: 80px;
	height: 90px;
	position: relative;
	display: block
}
@media screen and (max-width:768px){
	.charaChangeBtn {
		width: 16vw;
		height: 18vw;
	}
}
.charaChangeBtn:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/common/chara_changebtn_arrow.svg) no-repeat center center / contain;
	transition: all .3s ease
}

.js-charaChange:hover .charaChangeBtn::before {
	transform: rotate(-180deg)
}

.charaChangeBtn:after {
	content: 'CHANGE\A POSE';
	position: absolute;
	font-size: 12px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	white-space: pre;
	text-align: center;
}
@media screen and (max-width:768px){
	.charaChangeBtn:after {
		font-size:2.6vw;
	}
}
@media screen and (max-width:768px){
	.characterThumbArea{
		margin-top: 0;
	}
	.characterThumbArea_ttl{
		font-size: var(--sp-size-32);
		margin-bottom: 6.6vw;
	}
	.characterThumbListsWrap{
		max-width: unset;
		margin: 56px auto 0;
	}
	.characterThumbLists::after{
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		border: 1px solid #000;
	}
	.characterThumbLists{
		padding: 3.2vw;
	}
	.characterThumbListsBox {
		display: flex;
	}
	.characterThumbListsBox._box1{
		/*width: 100%;*/
		width: 53.86vw;
		width: 57.5%;
	}
	.characterThumbListsBox._box2{
		width: 37.3vw;
		width: calc(100% - 57.5% - 2.1%);
	}
	.characterThumb__name {
		font-size:2.4vw;
		letter-spacing: 0;
	}
}
.characterThumbList{
	width: 140px;
}
.characterThumbListsBox._box2 .characterThumbList:first-child{
	margin-right:calc(100% - 140px);
}
.characterThumb{
	width: 100%;
	height: 140px;
	display: block;
	position: relative;
	padding: 4px;
	background-color: #000;
}
.charaThumb_frame{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}
.charaThumb_frame:before{
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	right: 1px;
	bottom: 1px;
	border: 1px solid #9d885f;
	opacity: 80%;
	transition: .3s ease;
}
.charaThumb_frame:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-mask: url(../img/top/character/chara_thumbFrame.svg) no-repeat center / contain;
	mask: url(../img/top/character/chara_thumbFrame.svg) no-repeat center / contain;
	background-color: #9d885f;
	transition: .3s ease;
}
.charaThumb_frameIn{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-mask: url(../img/top/character/chara_thumbbg.svg) no-repeat center / contain;
	mask: url(../img/top/character/chara_thumbbg.svg) no-repeat center / contain;
}
.charaThumb_frame img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* characterThumb - is-active */
.characterThumb:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transform: scale(40%);
	background-color: #9D885F;
	transition: .3s ease;
}
.characterThumb:hover::after,
.characterThumb.--is-active:after{
	transform: scale(1);
	opacity: 1;
}
.characterThumb:hover .charaThumb_frame:before,
.characterThumb.--is-active .charaThumb_frame:before{
	border-color: #000;
}
.characterThumb:hover .charaThumb_frame:after,
.characterThumb.--is-active .charaThumb_frame:after{
	background-color: #000;
}

/* cs */
.characterThumb.-cs{
	pointer-events: none;
	background-color: #000;
}
.characterThumb.-cs .charaThumb_frame:after{
	background-color: #676767;
}
.characterThumb.-cs .charaThumb_frame:before{
	border-color: #676767;
}

@media screen and (max-width:768px){
	#character .inner{
		margin-top: 0;
		padding-left: 3.2%;
		padding-right: 3.2%;
	}
	.characterContent{
		flex-direction: column;
		padding-left: 3.2%;
		padding-right: 3.2%;
	}
	.characterCont_img{
		width: 100%;
		margin: 0 auto;
	}
	.characterCont_img img{
		height: 96vw;
		width: auto;
	}
	.characterCont_cont{
		width: 100%;
		padding-top: 0;
		margin-top: calc(var(--sp-size-48) * -1);
		padding-right: 0;
	}

	.charaName{
		font-size: var(--sp-size-48);
		padding-left: 0;
	}
	.charaCV{
		font-size: var(--sp-size-24);
		margin-top: var(--sp-size-24);
		margin-left: 0;
	}
	.charaCV span:before{
		margin-right: var(--sp-size-20);
		padding-top: var(--sp-size-4);
	}

	.characterText{
		margin-top: var(--sp-size-48);
		padding: var(--sp-size-16) var(--sp-size-24) var(--sp-size-16) var(--sp-size-36);
		font-size: var(--sp-size-24);
	}
	.characterText:before{
		left: var(--sp-size-16);
		width: var(--sp-size-4);
	}

	.characterVoiceLists{
		margin-top: var(--sp-size-28);
		padding-left: var(--sp-size-16);
		padding-bottom: var(--sp-size-16);
	}
	.characterVoice{
		width: var(--sp-size-72);
		height: var(--sp-size-72);
	}
	.characterVoice__frame{
		border: var(--sp-size-2);
	}
	.characterVoice__frame:before{
		top: var(--sp-size-4);
		left: var(--sp-size-4);
		right: var(--sp-size-4);
		bottom: var(--sp-size-4);
		border-width: var(--sp-size-2);
	}
	.characterVoice__icon{
		width: var(--sp-size-36);
		height: var(--sp-size-24);
	}

	.characterThumbListsWrap{
		max-width: 100%;
		margin-top: var(--sp-size-48);
	}
	.characterThumbLists{
		/*gap: min(1.8vw, 14px);*/
		gap: 1vw;
	}
	.characterThumbList{
		/*width: min(20vw, 150px);*/
		width: 14.4vw;
	}
	.characterThumbListsBox._box2 .characterThumbList:first-child{
		margin-right:calc(100% - 14.4vw);
	}
	.characterThumb{
		/*height: min(20vw, 150px);*/
		height: 14.4vw;
		padding: var(--sp-size-4);
	}
}
/*swiper charaBtn_prev_next*/
.characterSwiper{
	position: relative;
	padding: 0 40px;

}
.charaBtn_prev,
.charaBtn_next{
	margin: auto;
	top: 0;
	bottom: 0;
}
.charaBtn_prev:hover,
.charaBtn_next:hover{
	cursor: pointer;
}
.charaBtn_prev::after,
.charaBtn_next::after{
	transition: all .4s ease;
}
.charaBtn_prev:hover:after {
	translate: -5px;
}
.charaBtn_next:hover:after {
	translate: 5px;
}
@media screen and (max-width:768px){
	.characterSwiper{
		padding: 0;
	}
	.charaBtn_prev,
	.charaBtn_next{
		top: 40vw;
		bottom: unset;
	}
}
.characterModal {
/*	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:1600;
	overflow: hidden;*/
	position: relative;
}
.characterModal__bg {
	position: fixed;
	left:0;
	top:0;
	right:0;
	height:100vh;
	height:100lvh;
	overflow: hidden;
	background: #000;
}
.characterModal__bg:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	bottom: 0;
	right:0;
	z-index:10;
	background:url(../img/top/fv_over.png);
}
.characterModal__bg > span{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	height:100vh;
	height:100lvh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition:opacity .3s linear;
}
#characterModal.--is-view .characterModal__bg > span{
	opacity: 1;
}
#c0.characterModal__bg > span{
	background-image: url(../img/top/character/chara1_bg.jpg);
}
#c1.characterModal__bg > span{
	background-image: url(../img/top/character/chara2_bg.jpg);
}
#c2.characterModal__bg > span{
	background-image: url(../img/top/character/chara3_bg.jpg);
}
#c3.characterModal__bg > span{
	background-image: url(../img/top/character/chara4_bg.jpg);
}
#c4.characterModal__bg > span{
	background-image: url(../img/top/character/chara5_bg.jpg);
}
#c5.characterModal__bg > span{
	background-image: url(../img/top/character/chara6_bg.jpg);
}
#c6.characterModal__bg > span{
	background-image: url(../img/top/character/chara7_bg.jpg);
}
#c7.characterModal__bg > span{
	background-image: url(../img/top/character/chara8_bg.jpg);
}
#c8.characterModal__bg > span{
	background-image: url(../img/top/character/chara9_bg.jpg);
}
#c9.characterModal__bg > span{
	background-image: url(../img/top/character/chara10_bg.jpg);
}
#c10.characterModal__bg > span{
	background-image: url(../img/top/character/chara11_bg.jpg);
}
#c11.characterModal__bg > span{
	background-image: url(../img/top/character/chara12_bg.jpg);
}
#c12.characterModal__bg > span{
	background-image: url(../img/top/character/chara13_bg.jpg);
}
#c13.characterModal__bg > span{
	background-image: url(../img/top/character/chara14_bg.jpg);
}
#c14.characterModal__bg > span{
	background-image: url(../img/top/character/chara15_bg.jpg);
}
#c15.characterModal__bg > span{
	background-image: url(../img/top/character/chara16_bg.jpg);
}
#c16.characterModal__bg > span{
	background-image: url(../img/top/character/chara17_bg.jpg);
}
#c17.characterModal__bg > span{
	background-image: url(../img/top/character/chara18_bg.jpg);
}
#c18.characterModal__bg > span{
	background-image: url(../img/top/character/chara19_bg.jpg);
}
#c19.characterModal__bg > span{
	background-image: url(../img/top/character/chara20_bg.jpg);
}

.characterModal__inner {
/*	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	overflow: auto;
	overscroll-behavior:contain;
	z-index:50;
}*/
}
.characterModal__box {
	min-height:max(calc(100% - 80px),640px);
	width:1200px;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top:80px;
}
@media screen and (max-width:768px){
	.characterModal__box {
		min-height:calc(100vh + 1px);
		min-height:calc(100dvh + 1px);
		width:100vw;
		margin:0 auto;
		display: block;
		position: relative;
		padding-top:0;
	}
}
.characterModal__content {
	width:1200px;
	display: flex;
	position: relative;
	padding-bottom:40px;
}
@media screen and (max-width:768px){
	.characterModal__content {
		width:100%;
		height:unset;
		display:block;
	}
}
.characterModal__enName {
	position: fixed;
	left:0;
	bottom:0;
	line-height:0.8076923;
	font-size:104px;
	color:#000;
	overflow: hidden;
	padding-top:2px;
	height:80px;
}
@media screen and (max-width:768px){
	.characterModal__enName {
		line-height:0.8;
		font-size:16.5333vw;
		padding-top:2px;
		height:26.6666vw;
		word-break: normal;
		width:100vw;
	}
}
.characterModal__left {
	display: flex;
	justify-content: center;
	align-items: center;
	width:50%;
	height:100%;
	z-index: 20;
	position: relative;
}
@media screen and (max-width:768px){
	.characterModal__left {
		display: flex;
		justify-content: center;
		align-items:unset;
		width:100%;
		overflow: hidden;
		height:unset;
		padding-top:4.8vw;
	}
}
.characterModal__left img {
	flex-shrink: 0;
	max-height:640px;
	width:auto;
	display: block;
}
@media screen and (min-width:769px){
	.characterModal__left img {
		width:auto !important;
	}
}
@media screen and (max-width:768px){
	.characterModal__left img {
		flex-shrink: 0;
		max-height:122vw;
		height:auto;
		width:auto;
		object-fit: contain;
	}
}
.characterModal__right {
	width:50%;
	height:100%;
	padding-top:80px;
	padding-right:160px;
	z-index:20;
	position: relative;
}
@media screen and (max-width:768px){
	.characterModal__right {
		width:100%;
		height:unset;
		padding:0 6.4vw 18vw;
		display: block;
		margin-top:-40vw;
		pointer-events: none;
	}
}
.characterModal__close {
	position: absolute;
	right:0;
	top:0;
	z-index: 200;
	overflow: hidden;
}
.characterModal__closeLink {
	width:80px;
	height:80px;
	display: block;
	overflow: hidden;
}
@media screen and (max-width:768px){
	.characterModal__closeLink {
		width:12.8vw;
		height:12.8vw;
	}
}
.characterModal__closeLink:before,
.characterModal__closeLink:after {
	content:'';
	position: absolute;
	top:50%;
	width:120px;
	left:-20px;
	height: 1px;
	background:#fff;
	transition: all 0.3s ease;
}
@media screen and (max-width:768px){
	.characterModal__closeLink:before,
	.characterModal__closeLink:after {
		width:16.8vw;
		left:-2vw;
	}
}
.characterModal__closeLink:before {
	transform:rotate(45deg);
}
.characterModal__closeLink:after{
	transform:rotate(-45deg);
}
.characterModal__closeLink:hover:before,
.characterModal__closeLink:hover:after {
	background:var(--color-pink);
}
.characterModal__nav {
	position: absolute;
	left:40px;
	right:40px;
	height:80px;
	margin-top:-40px;
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	z-index:500;
	top:50vh;
}
@media screen and (max-width:768px){
	.characterModal__nav {
		left:3.2vw;
		right:3.2vw;
		height:12.8vw;
		margin-top:-6.4vw;
		top:50vw;
	}
}
.characterModal__nav li {
	width:40px;
	height:80px;
}
@media screen and (max-width:768px){
	.characterModal__nav li {
		width:6.4vw;
		height:12.8vw;
	}
}
.characterModal__nav li a {
	display: block;
	height:80px;
	position: relative;
	overflow: hidden;
	pointer-events: auto;
}
@media screen and (max-width:768px){
	.characterModal__nav li a {
		height:12.8vw;
	}
}
.characterModal__nav li a:before,
.characterModal__nav li a:after {
	content:'';
	position: absolute;
	top:50%;
	height:1px;
	background:#fff;
	width:80px;
	transition: all 0.3s ease;
}
.characterModal__nav li a:hover:before,
.characterModal__nav li a:hover:after {
	background:var(--color-pink);
}
.characterModal__prev:before,
.characterModal__prev:after {
	left:1px;
}
.characterModal__prev:before {
	transform:rotate(-45deg);
	transform-origin: left bottom;
}
.characterModal__prev:after {
	transform:rotate(45deg);
	transform-origin: left top;
}
.characterModal__next:before,
.characterModal__next:after {
	right:1px;
}
.characterModal__next:before {
	transform:rotate(45deg);
	transform-origin: right bottom;
}
.characterModal__next:after {
	transform:rotate(-45deg);
	transform-origin: right top;
}
/*CAMPAIGN*/
.campaign{
	position: relative;
	text-align: center;
	padding: 160px 0;
	background:url(../img/top/campaign/campaign_bg.jpg) no-repeat fixed center center / cover;
}
.campaign .inner {
	position: relative;
	z-index:5;
}
.campaign .section_ttl{
	margin-bottom: 70px;
}
.campaign .section_ttl_main{
	margin-right: 0;
}
.campaign__text{
	font-size: 32px;
	font-weight: 900;
}
.campaign__text.pz {
	color:#ffebc4;
	font-weight: 900;
	position: relative;
	z-index:30;
}
@media screen and (max-width:768px){
	.campaign__text.pz {
		color:#ffebc4;
	}
}
.campaign__text.pz span {
	display: block;
	position: absolute;
	text-shadow:0px 0px 36px #ffebc4;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index:-1;
}
.cp_charaBox{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index:2;
}
.cp_charaBox::after{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top:0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 100%;
	background: url(../img/top/campaign/cp_chara1.png) no-repeat center right;
	background-size: 1000px auto;
	opacity: 0;
	transition: all 0.3s ease;
	transform: translateX(-80px);
}
.cp_charaBox::before{
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top:0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 100%;
	background: url(../img/top/campaign/cp_chara2.png) no-repeat center left;
	background-size: 1000px auto;
	opacity: 0;
	transition: all 0.3s ease;
	transform: translateX(80px);
}
.cp_charaBox.animated::before,
.cp_charaBox.animated::after{
	transform: translateX(0);
	transition-delay: .6s;
	opacity: 1;
}
.cp_imgListTitle{
	display:block;
	width:800px;
	margin:0 auto;
}
.cp_imgListTitle img {
	width:100%;
}
.cp_imgList{
	display:block;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 60px;
}
.cp_imgList li{
	width: 1040px;
	margin-bottom:-20px;
}
.cp_imgList li:last-child {
	margin-bottom:0;
}
.cp_imgList li img{
	width: 100%;
	height: auto;
}
@media screen and (max-width:768px){
	.campaign{
		padding: 16vw 0;
		background:transparent;
		clip-path: inset(0);
	}
	.campaign .inner {
		position: relative;
		z-index:5;
	}
	.campaign_bg {
		position: fixed;
		left:0;
		top:0;
		right:0;
		height:100vh;
		height:100lvh;
		background:url(../img/top/campaign/campaign_bg.jpg) no-repeat center center / cover;
	}
	.campaign .linkBoxWrap{
		position: relative;
		z-index: 2;
	}
	.campaign .section_ttl{
		margin-bottom: 5vw;
	}
	.campaign__text{
		font-size: calc(32/ 750 * 100vw);
		margin-bottom: calc(45/ 750 * 100vw);
	}
	.cp_imgListTitle{
		width:80%;
	}
	.cp_imgListWrap{
	position: relative;
	padding: 0 0 calc(10/ 750 * 100vw);
	}
	.cp_charaBox::after{
		background: url(../img/top/campaign/cp_chara1_sp.png) no-repeat center top 5vw;
		background-size: 100% auto;
		opacity: 1;
		transform: translateX(0);
		transition: none;
	}
	.cp_charaBox::before{
		background: url(../img/top/campaign/cp_chara2_sp.png) no-repeat center top 5vw;
		background-size: 100% auto;
		opacity: 1;
		transform: translateX(0);
		transition: none;
	}
	.cp_imgList{
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}
	.cp_imgList li{
		width: 108%;
		padding: 0;
		margin:0 -4% -1.6vw;
	}

}
.contentFloat {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:1200;
	pointer-events: none;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.contentFloat__content {
	position: sticky;
	left:0;
	bottom:0;
	width: 530px;
	overflow: hidden;
}
.contentFloat__contentin {
	background:transparent;
	padding:24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateX(100%);
	transition: all 0.3s ease;
}
.contentFloat.is-active .contentFloat__contentin {
	transform:translateX(0);
}
.contentFloat__text {
	width:286px;
	height:34px;
	background:url(../img/top/fv_catch.svg) no-repeat center center / 110% auto;
	margin:0 auto 20px;
}
.contentFloat__btns {
	display: flex;
	justify-content: center;
	pointer-events:auto;
}
.contentFloat__btns li {
	height:46px;
	margin:0 3px;
}
.contentFloat__btns li img {
	height:46px;
	display: block;
}
.contentFloat__btns li a {
	display: block;
	transition: all 0.3s ease;
}
.contentFloat__btns li a:hover {
	opacity:0.8;
}
@media screen and (max-width:768px){
	.contentFloat {
		display: none;
	}
}
.separator {
	height:240px;
	background:#000;
	padding:8px 0;
	position: relative;
	overflow: hidden;
}
@media screen and (max-width:768px){
	.separator {
		height:32vw;
		padding:1.0666vw 0;
	}
}
.separator:before {
	content:'';
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
}
.separator__swiper {
	transform:skewX(-10deg);
	margin:0 -43px;
}
@media screen and (max-width:768px){
	.separator__swiper {
		transform:skewX(-10deg);
		margin:0 -6vw;
	}
}
.separator__swiper-slide {
	overflow: hidden;
	height:224px;
	border-left:4px solid #000;
	border-right:4px solid #000;
	width:426px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width:768px){
	.separator__swiper-slide {
		height:29.8666vw;
		border-left:0.5333vw solid #000;
		border-right:0.5333vw solid #000;
		width:56.8vw;
	}
}
.separator__swiper-slide img {
	display: block;
	width:461px;
	height:auto;
	flex-shrink: 0;
	transform:skewX(10deg);
}
@media screen and (max-width:768px){
	.separator__swiper-slide img {
		width:61.4666vw;
	}
}
.separator__swiper .swiper-wrapper{transition-timing-function:linear}

/* SYSTEM */
#system{
	position: relative;
	background: rgba(0, 0, 0, 0.3);
	padding-bottom: 160px;
	padding-top:160px;
}
@media screen and (max-width:768px){
	#system{
		padding-bottom: 12.8vw;
		padding-top:12.8vw;
	}
}
#system .section_ttl {
	padding-left:0;
}
@media screen and (max-width:768px){
	.section_ttl .section_ttl_main {
		/*margin-right:0;*/
	}
}
/*system_bg*/
.system_bg{
	display: block;
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
	background: url(../img/top/system/system_bg.jpg) no-repeat fixed;
	background-size: cover;
	pointer-events: none;
	transition: opcity .3s ease;
}
.system_bg::before{
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../img/top/fv_over.png);
	z-index: 1;
}
.system__inner {
	position: relative;
}
.system__inner:before {
	content:'';
	position: absolute;
	right:50%;
	top:0;
	left:0;
	height:496px;
	background: var(--color-pink);
}
@media screen and (max-width:768px){
	.system__inner:before {
		height:50.4vw;
	}
}
.system__swiper-slide {
	width:800px;
	margin:0 40px;
	padding-top:80px;
}
@media screen and (max-width:768px){
	.system__swiper-slide {
		width:74.4vw;
		margin:0 3.2vw;
		padding-top:6.4vw;
	}
}
.system__img {
	position: relative;
	padding-bottom:32px;
}
@media screen and (max-width:768px){
	.system__img {
		position: relative;
		padding-bottom:4.8vw;
	}
}
.system__img img {
	display: block;
	width:100%;
	height:auto;
}
.system__imgTitle {
	position: absolute;
	left:0;
	top:0;
	height:60px;
	background:rgba(0,0,0,.8);
	display: flex;
	align-items: center;
	padding:0 40px;
	color:#fff;
	font-size:20px;
	font-weight: 700;
}
@media screen and (max-width:768px){
	.system__imgTitle {
		position:relative;
		display: table;
		left:unset;
		top:unset;
		height:8.5333vw;
		background:#000;
		padding:0 3.2vw;
		font-size:3.7333vw;
	}
}
.system__imgTitle:before {
	content:'';
	width: 0;
	height: 0;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.8) transparent transparent
		transparent;
	border-width: 60px 60px 0px 0px;
	position: absolute;
	right:-60px;
	top:0;
}
@media screen and (max-width:768px){
	.system__imgTitle:before {
		display: none;
	}
}
.system__imgNum {
	position: absolute;
	bottom:440px;
	left:0px;
}
@media screen and (max-width:768px){
	.system__imgNum {
		position: absolute;
		top:-4.8vw;
		bottom:unset;
	}
}
.system__imgNum:before {
	content:'';
	position: relative;
	height:94px;
	width:170px;
	display: block;
	background:#fff;
}
@media screen and (max-width:768px){
	.system__imgNum:before {
		height:9.3333vw;
		width:14vw;
	}
}
.sin01:before {
	-webkit-mask: url(../img/top/system/01.svg) no-repeat left center / contain;
	mask: url(../img/top/system/01.svg) no-repeat left center / contain;
}
.sin02:before {
	-webkit-mask: url(../img/top/system/02.svg) no-repeat left center / contain;
	mask: url(../img/top/system/02.svg) no-repeat left center / contain;
}
.sin03:before {
	-webkit-mask: url(../img/top/system/03.svg) no-repeat left center / contain;
	mask: url(../img/top/system/03.svg) no-repeat left center / contain;
}
.sin04:before {
	-webkit-mask: url(../img/top/system/04.svg) no-repeat left center / contain;
	mask: url(../img/top/system/04.svg) no-repeat left center / contain;
}
.sin05:before {
	-webkit-mask: url(../img/top/system/05.svg) no-repeat left center / contain;
	mask: url(../img/top/system/05.svg) no-repeat left center / contain;
}
.sin06:before {
	-webkit-mask: url(../img/top/system/06.svg) no-repeat left center / contain;
	mask: url(../img/top/system/06.svg) no-repeat left center / contain;
}
.sin07:before {
	-webkit-mask: url(../img/top/system/07.svg) no-repeat left center / contain;
	mask: url(../img/top/system/07.svg) no-repeat left center / contain;
}
.sin08:before {
	-webkit-mask: url(../img/top/system/08.svg) no-repeat left center / contain;
	mask: url(../img/top/system/08.svg) no-repeat left center / contain;
}
.sin09:before {
	-webkit-mask: url(../img/top/system/09.svg) no-repeat left center / contain;
	mask: url(../img/top/system/09.svg) no-repeat left center / contain;
}
.system__text {
	min-height: 120px;
	padding-bottom:32px;
}
@media screen and (max-width:768px){
	.system__text {
		min-height: unset;
		padding-bottom:6.4vw;
		font-size:3.2vw;
	}
}
.system__swiper .swiper-button-prev,
.system__swiper .swiper-button-next {
	color:#fff;
	margin-top:-22px;
	top:calc((800px * 0.5625) / 2 + 80px);
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-prev,
	.system__swiper .swiper-button-next {
		color:#fff;
		margin-top:-4.8vw;
		top:calc((74.6666vw * 0.5625) / 2 + 8.5333vw);
		overflow: hidden;
	}
}
.system__swiper .swiper-button-prev {
	left:calc(50% - 510px);
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-prev {
		left:2vw;
	}
}
.system__swiper .swiper-button-next {
	left:calc(50% + 480px);
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-next {
		left:unset;
		right:2vw;
	}
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-prev,
	.system__swiper .swiper-button-next {
		color:#fff;
		margin-top:-4.8vw;
		top:calc((74.4vw * 0.5625) / 2 + 13.4vw);
		overflow: hidden;
	}
}
.system__swiper .swiper-button-prev:after {
	content:'';
	position: absolute;
	left:20px;
	top:50%;
	width:50px;
	height:50px;
	box-sizing: border-box;
	border-bottom:1px solid #fff;
	border-left:1px solid #fff;
	transform: rotate(45deg);
	margin-top:-25px;
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-prev:after {
		left:3.2vw;
		width:9.6vw;
		height:9.6vw;
		margin-top:-4.8vw;
	}
}
.system__swiper .swiper-button-next:after {
	content:'';
	position: absolute;
	right:20px;
	top:50%;
	width:50px;
	height:50px;
	box-sizing: border-box;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform: rotate(45deg);
	margin-top:-25px;
}
@media screen and (max-width:768px){
	.system__swiper .swiper-button-next:after {
		right:3.2vw;
		width:9.6vw;
		height:9.6vw;
		margin-top:-4.8vw;
	}
}
.system__swiper .swiper-pagination {
	position: relative;
	display: flex;
	justify-content: center;
}
.system__swiper .swiper-pagination {
	bottom:unset;
	padding-bottom:12px;
}
.system__swiper .swiper-pagination-bullet {
	width:16px;
	height:16px;
	box-sizing: border-box;
	border:1px solid rgba(255,255,255,.4);
	display: flex;
	justify-content: center;
	align-items: center;
	background:transparent;
	border-radius: unset;
	opacity:1;
	margin:0 10px !important;
	transform:rotate(45deg);
}
@media screen and (max-width:768px){
	.system__swiper .swiper-pagination-bullet {
		width:4.5333vw;
		height:4.5333vw;
		margin:0 3.2vw !important;
	}
}
.system__swiper .swiper-pagination-bullet:before {
	content:'';
	position: relative;
	width:6px;
	height:6px;
	display: block;
	background:rgba(255,255,255,.4);
}
@media screen and (max-width:768px){
	.system__swiper .swiper-pagination-bullet:before {
		width:1.5vw;
		height:1.5vw;
	}
}
.system__swiper .swiper-pagination-bullet-active {
	border-color:var(--main-color);
}
.system__swiper .swiper-pagination-bullet-active:before {
	background:var(--main-color);
}
.spec {
	padding:80px 0;
	position: relative;
	z-index:10;
}
@media screen and (max-width:768px){
	.spec {
		padding:12.8vw 0;
	}
}
.spec__logo {
	width:320px;
	margin:0 auto 80px;
	position: relative;
}
@media screen and (max-width:768px){
	.spec__logo {
		width:42.6666vw;
		margin:0 auto 9.6666vw;
	}
}
.spec__logo a {
	display: block;
	width:100%;
	padding-top:54%;
	background:url(../img/common/logo/logo.png) no-repeat center center / contain;
}
.spec__inner {
	width:100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
@media screen and (max-width:768px){
	.spec__inner {
		display: block;
	}
}
.spec__left {
	padding-right:40px;
	display: flex;
	flex-direction:column;
	align-items: flex-end;
}
@media screen and (max-width:768px){
	.spec__left {
		padding-right:0;
		flex-direction:row;
		align-items: center;
		justify-content: center;
		margin-bottom: 7.2vw
	}
}
.spec__appIcon {
	width:80px;
	height:80px;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom:40px;
}
@media screen and (max-width:768px){
	.spec__appIcon {
		width:12.8vw;
		height:12.8vw;
		border-radius: 2.1333vw;
		margin-bottom:0;
		margin-right:6.4vw;
	}
}
.spec__appIcon img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	overflow: hidden;
}
.spec__stores {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
@media screen and (max-width:768px){
	.spec__stores {
		flex-direction: row;
		align-items: center;
		margin-right:-3.2vw;
	}
}
.spec__stores li {
	margin-bottom: 20px;
}
@media screen and (max-width:768px){
	.spec__stores li {
		margin-bottom:0;
		margin-right:3.2vw;
	}
}
.spec__stores li a {
	display: block;
	transition: all 0.3s ease;
}
.spec__stores li a:hover {
	opacity:0.7;
}
.spec__stores li img {
	display: block;
	height:64px;
	width:auto;
}
@media screen and (max-width:768px){
	.spec__stores li img {
		height:9.6vw;
	}
}
.spec__lists {
	display: grid;
	grid-template-columns: auto auto;
}
@media screen and (max-width:768px){
	.spec__lists {
		margin:0 auto;
	}
}
.spec__lists dt {
	margin-bottom:18px;
	position: relative;
	padding-right:34px;
	color:var(--color-pink);
	text-align: right;
	font-weight: 600;
}
@media screen and (max-width:768px){
	.spec__lists dt {
		margin-bottom:6.4vw;
		padding-right:6.4vw;
		font-size:3.2vw;
		letter-spacing: -0.05em;
	}
}
.spec__lists dt:after {
	content:'';
	position: absolute;
	right:14px;
	top:12px;
	display: block;
	width:6px;
	height:6px;
	background:rgba(255,255,255,.4);
	transform:rotate(45deg);
}
@media screen and (max-width:768px){
	.spec__lists dt:after {
		right:2.6vw;
		top:2.4vw;
		width:1.2vw;
		height:1.2vw;
	}
}
.spec__lists dd {
	margin-bottom:18px;
	font-weight: 500;
	letter-spacing: -0.05em;
}
@media screen and (max-width:768px){
	.spec__lists dd {
		font-size:3.2vw;
	}
}

/* speclist */
.spec_imgBox{
	width: 800px;
	margin: 0 auto 48px;
}
@media screen and (max-width:768px){
	.spec_imgBox{
		width: 100%;
		padding: 0 calc(24 / 750 * 100vw);
		margin: 0 auto calc(48 / 750 * 100vw);
	}
}
.spec_imgBox img{
	width: 100%;
	height: auto;
}

.indexLoading {
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:9999;
	background:#000;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.indexLoading:before {
	content:'';
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
	background:#000;
	transition: 0.3s ease;
}
.indexLoading .loading_logo {
	transition-delay:1.2s;
	opacity:0;
}
.indexLoading.op .loading_logo {
	opacity:1;
}
.indexLoading.op:before {
	opacity:0;
}
.indexLoading.op2:before {
	background:#fff;
	opacity:1;
	transition: opacity 0.5s ease;
}
.indexLoading.op2 .loading_logo {
	opacity:0;
	transition: opacity 0.5s ease;
}
.indexLoading__video {
	background:#000;
	width:max(100vw,calc(100vh * 2.333333));
	height:max(100vh,calc(100vw * 0.428571));
	flex-shrink: 0;
}
@media screen and (max-width:768px) and (orientation: portrait){
	.indexLoading__video {
		background:#000;
		width:max(100vw,100vh);
		height:max(100vh,100vw);
		flex-shrink: 0;
	}
}
.indexLoading__video video {
	display: block;
	width:100%;
	height:100%;
}

.indexSoundSelect {
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:20000;
	background:#000;
	display: none;
}
.indexSoundSelect__box {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.indexSoundSelect__text {
	text-align: center;
	font-size:16px;
	margin-bottom:40px;
}
@media screen and (max-width:768px){
	.indexSoundSelect__text {
		font-size:3.2vw;
		margin-bottom:6.4vw;
	}
}
.indexSoundSelect__lists {
	display: flex;
	justify-content: center;
}
.indexSoundSelect__lists li {
	width:46px;
	margin:0 40px;
}
@media screen and (max-width:768px){
	.indexSoundSelect__lists li {
		width:12.8vw;
		margin:0 6.4vw;
	}
}
.indexSoundSelect__lists li a {
	display: flex;
	width:100%;
	height:46px;
	position: relative;
	justify-content: center;
	align-items: center;
	border:1px solid #fff;
	transform:rotate(45deg);
	transition: all 0.3s ease;
}
@media screen and (max-width:768px){
	.indexSoundSelect__lists li a {
		height:12.8vw;
	}
}
.indexSoundSelect__lists li a:hover {
	background:#fff;
}
.indexSoundSelect__lists li a:before {
	content:'';
	position: relative;
	width:24px;
	height:24px;
	transform:rotate(-45deg);
	background:#fff;
	transition: all 0.3s ease;
}
@media screen and (max-width:768px){
	.indexSoundSelect__lists li a:before {
		width:6.4vw;
		height:6.4vw;
	}
}
.indexSoundSelect__lists li a:hover:before {
	background:#000;
}
.soundOn:before {
	-webkit-mask:url(../img/common/icon_bgm_on.svg) no-repeat center center / contain;
	mask:url(../img/common/icon_bgm_on.svg) no-repeat center center / contain;
}
.soundOff:before {
	-webkit-mask:url(../img/common/icon_bgm_off.svg) no-repeat center center / contain;
	mask:url(../img/common/icon_bgm_off.svg) no-repeat center center / contain;
}
.indexSoundSelect__lists li a:after {
	content:'';
	position: absolute;
	left:3px;
	top:3px;
	right:3px;
	bottom:3px;
	box-sizing: border-box;
	border:1px solid #fff;
	transition: all 0.3s ease;
}
.indexSoundSelect__lists li a:hover:after {
	border-color:#000;
}
.indexSoundSelect__label {
	text-align: center;
	width:100%;
	padding-top:16px;
}
@media screen and (max-width:768px){
	.indexSoundSelect__label {
		padding-top:4vw;
		font-size:3.2vw;
	}
}
.character__voice-movie {
	display: flex;
	justify-content: space-between;
	width:100%;
	padding-top:20px;
	pointer-events: auto;
}
.characterMovie {
	width:240px;
	height:135px;
	background: #000;
	overflow: hidden;
	position: relative;
}
.characterMovie:before {
	content:'';
	position: absolute;
	left:2px;
	top:2px;
	right:2px;
	bottom:2px;
	background: url(../img/top/movie_frame.svg) no-repeat center center / contain;
	z-index:50;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.characterMovie {
		width:64vw;
		height:36vw;
	}
}

/* MOVIE */
.movieListBg {
	position: absolute;
	left:40px;
	right:40px;
	top:0;
}
@media screen and (max-width:768px){
	.movieListBg {
		position: absolute;
		width:calc(560 / 750 * 100vw);
		left:50%;
		right:auto;
		transform:translateX(-50%);
	}
}

.movieWrap__box--inner video {
	width: 100%;
	height:100%;
	display: block;
}


.movieListBg:before {
	content:'';
	position:relative;
	width:100%;
	padding-top:56.25%;
	display: block;
}
.movieListBg__inner {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.movie__lists {
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}
.movie__list {
	width:420px;
	margin-bottom:50px;
}
@media screen and (max-width:768px){
	.movie__list {
		width:calc(560 / 750 * 100vw);
		margin:0 auto 6vw;

	}
}
.movie__list .movieLists__thumbArea {
	margin:0;
}

.commentary__headText{
	font-size: 20px;
	line-height: 2;
	text-align: center;
	margin-bottom: 64px;
}
@media screen and (max-width: 767px){
	.commentary__headText{
		font-size: var(--sp-size-26);
		margin-bottom: var(--sp-size-64);
	}
}

.linkBox.-banner_tapchat a{
	width: 440px;
	max-width: unset;
	min-height: 208px;
	height: auto;
	line-height: 1;
}
.linkBox.-banner_tapchat a:hover{
	border-color: #9d885f;
	color: #ffc247;
}
.linkBox.-banner_tapchat a:before,
.linkBox.-banner_tapchat a:after{
	content: unset;
}
.banner_tapchat{
	width: 100%;
	padding: 10px 32px 20px 48px;
	display: flex;
}
.banner_tapchat--bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/bnr_tapchat__bg.jpg) no-repeat center / cover;
	transition: .3s ease;
}
.linkBox.-banner_tapchat a:hover .banner_tapchat--bg{
	filter: brightness(110%);
}
.banner_tapchat--img{
	width: 64px;
	position: relative;
}
.banner_tapchat--img:before,
.banner_tapchat--img:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: .3s ease;
}
.banner_tapchat--img:before{
	background-image: url(../img/top/deco_yubi_face1.png);
}
.banner_tapchat--img:after{
	background-image: url(../img/top/deco_yubi_face2.png);
	opacity: 0;
}
.-banner_tapchat:hover .banner_tapchat--img:before{
	opacity: 0;
}
.-banner_tapchat:hover .banner_tapchat--img:after{
	opacity: 1;
}
.banner_tapchat--txt{
	width: calc(100% - 64px);
	display: block;
	position: relative;
	font-family: "M PLUS Rounded 1c", serif;
}
.banner_tapchat--txt_line1{
	display: block;
	text-align: center;
	line-height: 1;
	font-size: 40px;
	letter-spacing: 0.25em;
	font-weight: 700;
}
.banner_tapchat--txt_line2{
	display: block;
	text-align: center;
	line-height: 1;
	font-size: 18px;
	letter-spacing: 0;
	margin-top: 20px;
	font-weight: 500;
	padding-right: 1em;
}

@media screen and (max-width: 767px){
	.linkBox.-banner_tapchat a{
		width: calc(440 / 750 * 100vw);
		max-width: unset;
		min-height: calc(208 / 750 * 100vw);
	}
	.banner_tapchat{
		padding: var(--sp-size-20) var(--sp-size-32) var(--sp-size-20) var(--sp-size-48);
	}
	.banner_tapchat--img{
		width: var(--sp-size-64);
	}
	.banner_tapchat--txt{
		width: calc(100% - var(--sp-size-72));
	}
	.banner_tapchat--txt_line1{
		font-size: var(--sp-size-40);
	}
	.banner_tapchat--txt_line2{
		margin-top: var(--sp-size-20);
		font-size: var(--sp-size-20);
		padding-right: 0.25em;
	}
}

/**
* SPECIAL
**/
.specialThumb{
	width: 100%;
}
.link_specialThumb{
	display: block;
	overflow: hidden;
	text-decoration: none;
}
.link_specialThumb--img{
	width: 100%;
	position: relative;
}
.link_specialThumb--img img{
	width: 100%;
}
@media screen and (hover:hover) and (pointer: fine){
	.link_specialThumb--img{
		transition: .3s ease;
	}
	.link_specialThumb:hover .link_specialThumb--img{
		transform: scale(102.5%);
	}

/* -bnr_yubitalk */
	.movie__list.-bnr_yubitalk .link_specialThumb--img:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url(../img/special/thumb/bnr_yubitalk-hv.jpg) no-repeat center / contain;
		opacity: 0;
		transition: .3s ease;
	}
	.movie__list.-bnr_yubitalk .link_specialThumb:hover .link_specialThumb--img:after{
		opacity: 1;
	}
}



/**
* TOP - SPECIAL
**/
#special.widgetBox{
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.link_specialBanner--img{
	position: relative;
	transition: .4s ease;
}

.link_specialBanner--img img{
	width: 100%;
}

.spacialBannerWrap{
	width: 86.6667%;
	max-width: calc(520px * 1.6);/* 832 */
	margin: 0 auto;
}
.specialBannerSwiper{
	overflow: unset;
}
.specialBannerList{
	margin: 0 clamp(8px, calc(8 / 1200 * 100vw), calc(8px * 1.6));
}

.spacialBannerWrap .swiper-pagination{
	margin-top: 28px;
}
.spacialBannerWrap .swiper-button-prev,
.spacialBannerWrap .swiper-button-next{
	width: 50px;
	height: 50px;
	margin: auto 0;
	top: 0;
	bottom: 64px;
}
.spacialBannerWrap .swiper-button-prev{
	left: -30px;
}
.spacialBannerWrap .swiper-button-next{
	right: -30px;
}

@media screen and (hover:hover) and (pointer: fine){
	.link_specialBanner{
		display: block;
		overflow: hidden;
	}
	.link_specialBanner--img{
		transition: .3s ease;
	}
/* bnr_yubitalk */
	.link_specialBanner--img.-bnr_yubitalk:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url(../img/special/thumb/bnr_yubitalk-hv.jpg) no-repeat center / contain;
		opacity: 0;
		transition: .3s ease;
	}
	.link_specialBanner:hover .link_specialBanner--img.-bnr_yubitalk:after{
		opacity: 1;
	}
	
	.link_specialBanner:hover .link_specialBanner--img{
		transform: scale(102.5%);
	}
}

@media screen and (max-width:768px){
	.spacialBannerWrap{
		width: 73.3334%;/* 550 */
	}
	.specialBannerList{
		margin: 0 min(calc(12 / 750 * 100vw), 12px);
	}
	.spacialBannerWrap .swiper-pagination{
		margin-top: min(calc(48 / 750 * 100vw), 48px);
	}
	.spacialBannerWrap .swiper-button-prev,
	.spacialBannerWrap .swiper-button-next{
		bottom: calc(20px + min(calc(48 / 750 * 100vw), 48px) + 4.5333vw);
	}
}
/*---------------------
  Gallery > tab
---------------------*/
#gallery{
	position: relative;
    background: rgba(0, 0, 0, 0.3);
    padding-bottom: 160px;
    padding-top: 160px;
}
@media screen and (max-width: 768px) {
    #gallery {
        padding-bottom: 12.8vw;
        padding-top: 12.8vw;
    }
}
.tabContentsWrap{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.tabContents {
    opacity: 0;
    transition: opacity .3s ease;
    animation: fadeIn .4s forwards;
	position: absolute;
	left: 0;
	top: 0;
}
.tabContents.is-active {
	opacity: 1;
	position: relative;
	transition-delay: .4s;
}
.tabList{
	max-width: 980px;
	margin: 0 auto 18px;
	display: flex;
	justify-content: space-between;
}
.tabList__item{
	width: calc((100% - 40px) / 5);
}
.tabList .linkBox a{
	width: 100%;
}
@media screen and (max-width:768px){
	.tabList{
		flex-wrap: wrap;
		flex-direction: row;
		margin: 0 auto 2vw;
		padding: 0 4vw;
	}
	.tabList__item{
		width: calc((100% - 2vw) / 2);
		margin-bottom: 2vw;
	}
	.tabList .linkBox a{
		height: 9vw;
	}
}
.gallery_disclaimer{
	max-width: 980px;
	margin: 0 auto 28px;
	text-align: right;
    font-size: .8rem;
}
@media screen and (max-width:768px){
	.gallery_disclaimer{
		margin: 0 auto 4vw;
		padding: 0 2vw;
        font-size: 1.2rem;
	}
}
.gallery_imgTxt{
	font-size: min(calc(21 / 750 * 100vw), 21px);	
	text-align: center;
	margin-bottom: min(calc(48 / 750 * 100vw), 48px);	
}
@media screen and (max-width:768px){
	.gallery_imgTxt{
		font-size: 3.2vw;	
		margin-bottom: min(calc(48 / 750 * 100vw), 48px);	
	}
}
/*---------------------
  guideline
---------------------*/
#guideline p{
	font-size: 14px;
}
.guideline__ttl{
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	background-color: #FFF;
	color: #000;
	line-height: 1;
	padding:  2px 5px;
}
@media screen and (max-width:768px){
	#guideline p{
		font-size: 1rem;
	}
	.guideline__ttl{
		font-size: 1rem;
		padding:  2px 5px;
	}
}
#guideline .newsList {
    height: auto;
}
#guideline .newsList .newsList_innerWrap {
    padding: 20px 30px 20px 35px;
}
#guideline p .indent{
	text-indent: -1rem;
    padding-left: 1rem;
	display: inline-block;
}