@charset "utf-8";
/*-----------------------------------------------
 * HEADER - navBtn linecolor [ 表示中のセクションごとに色を変更 ]
------------------------------------------------*/
body[data-nowsection="hero"] .header__navBtn{
	--hbn-linecolor: var(--color-white);
}
body[data-nowsection="news"] .header__navBtn{
	--hbn-linecolor: var(--color-blue);
}
body[data-nowsection="movie"] .header__navBtn{
	--hbn-linecolor: var(--color-white);
}
body[data-nowsection="introduction"] .header__navBtn{
	--hbn-linecolor: var(--color-white);
}
body[data-nowsection="character"] .header__navBtn{
	--hbn-linecolor: var(--color-white);
}
body[data-nowsection="staffcast"] .header__navBtn{
	--hbn-linecolor: var(--color-blue);
}
/* メニュー展開中は常に青（common の is-active を優先） */
body .header__navBtn.is-active{
	--hbn-linecolor: var(--color-blue);
}


/*-----------------------------------------------
 * FX Layer [ セクションごとにラメ／光漏れを変更 ]
------------------------------------------------*/
/* ファーストビューは他より大きく動かす（速さ・横ゆれ・明滅すべて強め） */
body[data-nowsection="hero"]{
	--fx-density: .5;
	--fx-alpha: .55;
	--fx-size: 2.2;
	--fx-speed: 2.8;
	--fx-drift: 2.4;
	--fx-twinkle: 1.6;
	--fx-hue: 195;
	--fx-hue-range: 50;
	--fx-light: 72;
	--fx-prism: .25;
}
/* 白背景＋本文が主役なので、粒は増やしつつ薄めに留める */
body[data-nowsection="news"]{
	--fx-density: .3;
	--fx-alpha: .3;
	--fx-size: .85;
	--fx-hue: 205;
	--fx-hue-range: 30;
	--fx-light: 55;
	--fx-prism: 0;
}
body[data-nowsection="movie"]{
	--fx-density: .45;
	--fx-alpha: .5;
	--fx-size: 1.2;
	--fx-speed: 1;
	--fx-hue: 330;
	--fx-hue-range: 70;
	--fx-light: 60;
	--fx-prism: .15;
}
body[data-nowsection="introduction"]{
	--fx-density: .4;
	--fx-alpha: .55;
	--fx-size: 1.5;
	--fx-speed: .8;
	--fx-hue: 200;
	--fx-hue-range: 40;
	--fx-light: 74;
	--fx-prism: .18;
}
body[data-nowsection="character"]{
	--fx-density: .5;
	--fx-alpha: .28;
	--fx-size: 1.8;
	--fx-speed: 1.2;
	--fx-hue: 300;
	--fx-hue-range: 100;
	--fx-light: 72;
	--fx-prism: .3;
}
/* 白背景＋本文が主役なので、粒は増やしつつ薄めに留める */
body[data-nowsection="staffcast"]{
	--fx-density: .28;
	--fx-alpha: .28;
	--fx-size: .85;
	--fx-speed: .8;
	--fx-hue: 205;
	--fx-hue-range: 30;
	--fx-light: 55;
	--fx-prism: 0;
}


/*-----------------------------------------------
 * LOADING [ TOPのみ / JS有効時だけ表示 ]
------------------------------------------------*/
.loading{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: hidden;
	background-color: var(--color-white);
}
.--js-fx .loading{
	display: block;
}

/* kv */
.loading__kv{
	--kv-w: auto;
	--kv-h: 140vh;
	--pan-x: center;
	--pan-y: 100%;
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.loading__kvGray,
.loading__kvColor{
	position: absolute;
	inset: 0;
	background-image:
		url(../img/top/visual/visual1-main.jpg);
	background-repeat: no-repeat;
	background-position: var(--pan-x) var(--pan-y);
	background-size: var(--kv-w) var(--kv-h);
}
@supports (background-image: url("../img/top/visual/visual1-main.webp")){
	.loading__kvGray,
	.loading__kvColor{
		background-image:
			url(../img/top/visual/visual1-main.webp);
	}
}
.loading__kvGray{
	filter: grayscale(1) saturate(1) brightness(.18) contrast(1.15);
}
.loading__kvColor{
	filter: saturate(1.08) brightness(1.04);
}
.loading__kvSpot{
	position: absolute;
	inset: 0;
	overflow: hidden;
	mask-image: radial-gradient(var(--sw, 0px) var(--sh, 0px) at var(--sx, 50%) var(--sy, 50%),
		#000 0%,
		rgba(0, 0, 0, .94) 16%,
		rgba(0, 0, 0, .74) 36%,
		rgba(0, 0, 0, .42) 58%,
		rgba(0, 0, 0, .16) 78%,
		rgba(0, 0, 0, 0) 100%);
}

/* beam / flare */
.loading__beam{
	position: absolute;
	top: 0;
	left: var(--beam-x, 50%);
	width: min(calc(560 / var(--vw-min) * 100vw), calc(560px * var(--max-percent)));
	height: var(--beam-h, 60%);
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(190, 235, 255, .16) 55%, rgba(190, 235, 255, 0) 100%);
	mask-image: radial-gradient(75% 260% at 50% 118%,
		#000 0%,
		rgba(0, 0, 0, .85) 34%,
		rgba(0, 0, 0, .25) 68%,
		rgba(0, 0, 0, 0) 100%);
	filter: blur(12px);
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}
.loading__flare{
	position: absolute;
	top: var(--sy, 50%);
	left: var(--sx, 50%);
	width: min(calc(420 / var(--vw-min) * 100vw), calc(420px * var(--max-percent)));
	height: min(calc(280 / var(--vw-min) * 100vw), calc(280px * var(--max-percent)));
	transform: translate(-50%, -50%);
	background:
		radial-gradient(closest-side, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .2) 42%, rgba(190, 235, 255, 0) 100%),
		radial-gradient(closest-side, rgba(190, 235, 255, .22) 0%, rgba(190, 235, 255, 0) 74%);
	filter: blur(14px);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	will-change: opacity;
}

/* intro */
.loading__intro{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
}
.loading__logo{
	width: min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent)));
	opacity: 0;
}
.loading__logo img{
	width: 100%;
	height: auto;
}

/* white */
.loading__white{
	position: absolute;
	inset: 0;
	background-color: var(--color-white);
	opacity: 0;
	pointer-events: none;
}

@media screen and (max-width:768px){
	.loading__beam{
		width: calc(600 / var(--vw-min) * 100vw);
		filter: blur(9px);
	}
	.loading__flare{
		width: calc(480 / var(--vw-min) * 100vw);
		height: calc(320 / var(--vw-min) * 100vw);
		filter: blur(10px);
	}
	.loading__logo{
		width: calc(420 / var(--vw-min) * 100vw);
	}
}


/*-----------------------------------------------
 * HERO
------------------------------------------------*/
.hero{
	position: relative;
	z-index: 1;
}
.hero__content{
	position: relative;
	width: 100%;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	z-index: 1;
}

@media screen and (max-width:768px){
	.hero__content{
		padding-top: calc(89 / var(--vw-min) * 100vw);
	}
}


.hero__visualArea{
	width: min(calc(778 / var(--vw-min) * 100vw), calc(778px * var(--max-percent)));
	margin: 0 auto;
	position: relative;
	padding-top: min(calc(21 / var(--vw-min) * 100vw), calc(21px * var(--max-percent)));
	padding-bottom: min(calc(21 / var(--vw-min) * 100vw), calc(21px * var(--max-percent)));
	z-index: 2;
}
.hero__visualAreaIn{
	width: 100%;
	padding-top: 140.8741%;/* 1096 */
	position: relative;
	overflow: hidden;
}
.hero__visualGroup{
	position: absolute;
	inset: 0;
}
.hero__visualLayer{
	position: absolute;
	inset: 0;
}
.hero__visualLayer img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:768px){
	.hero__visualArea{
		width: calc(580 / var(--vw-min) * 100vw);
		padding-top: calc(22 / var(--vw-min) * 100vw);
		padding-bottom: calc(22 / var(--vw-min) * 100vw);
	}
}



.hero__visualFrameArea{
	position: absolute;
	top: min(calc(79 / var(--vw-min) * 100vw), calc(79px * var(--max-percent)));
	left: 0;
	right: 0;
	width: min(calc(820 / var(--vw-min) * 100vw), calc(820px * var(--max-percent)));
	margin: 0 auto;
}
.hero__visualFrame{
	width: 100%;
	padding-top: 138.7805%;/* 1138 */
}
.hero__visualFrame--line{
	position: absolute;
	inset: 0;
	border: 2px solid var(--color-white);
}

@media screen and (max-width:768px){
	.hero__visualFrameArea{
		top: calc(89 / var(--vw-min) * 100vw);
		width: calc(624 / var(--vw-min) * 100vw);
	}
	.hero__visualFrame{
		padding-top: 138.1411%;
	}
}



.hero__bgDecoArea{
	position: absolute;
	top: min(calc(680 / var(--vw-min) * 100vw), calc(680px * var(--max-percent)));
	left: 0;
	right: 0;
	width: 100%;
	height: min(calc(247 / var(--vw-min) * 100vw), calc(247px * var(--max-percent)));
}
.hero__bgDeco--img{
	--hero-deco-progress: 103;
	width: 100%;
	height: 100%;
	mask: url(../img/common/deco/deco_line.png) no-repeat center / 100% 100%;
	background-image: linear-gradient(90deg,
		#e92ebb 0%,
		#e92ebb calc(var(--hero-deco-progress) * 1% - 4%),
		#ffffff calc(var(--hero-deco-progress) * 1% - 1%),
		rgba(255, 255, 255, 0) calc(var(--hero-deco-progress) * 1%),
		rgba(255, 255, 255, 0) 100%);
}
.--js-fx .hero__bgDeco--img{
	--hero-deco-progress: 0;
}
@media screen and (max-width:768px){
	.hero__bgDecoArea{
		height: calc(180 / var(--vw-min) * 100vw);
		top: calc(536 / var(--vw-min) * 100vw);
	}
	.hero__bgDeco--img{
		mask-image: url(../img/common/deco/deco_line-s.png);
	}
}



/**
* hero__onairArea
**/
.hero__onairArea{
	position: absolute;
	inset: 0;
	width: min(calc(1366 / var(--vw-min) * 100vw), calc(1366px * var(--max-percent)));
	max-width: 100%;
	margin: 0 auto;
}
.hero__onairAreaIn{
	position: absolute;
	top: 0;
	right: min(calc(50 / var(--vw-min) * 100vw), calc(50px * var(--max-percent)));
	width: min(calc(220 / var(--vw-min) * 100vw), calc(220px * var(--max-percent)));
	padding-top: min(calc(216 / var(--vw-min) * 100vw), calc(216px * var(--max-percent)));
}

.hero__onairAreaIn__cont{
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: min(calc(30 / var(--vw-min) * 100vw), calc(30px * var(--max-percent)));
}

.hero__onair--date{
	width: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}
.hero__onair--date img{
	width: 100%;
}

.hero__onair--txt{
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	font-weight: 600;
	line-height: 1;
}
.hero__onair--txtIn{
	display: inline-block;
	color: var(--color-blue);
	background-color: var(--color-white);
	line-height: 1;
}

.hero__onair--txtIn .dq_txt{
	position: relative;
	display: inline-block;
	margin: -0.25em 0;
}

@media screen and (max-width:768px){
	.hero__onairArea{
		width: 100%;
	}
	.hero__onairAreaIn{
		right: 0;
		width: auto;
		padding: 0 calc(16 / var(--vw-min) * 100vw);
		padding-top: calc(160 / var(--vw-min) * 100vw);
	}
	.hero__onairAreaIn__cont{
		flex-direction: column;
		justify-content: unset;
		align-items: center;
		gap: calc(24 / var(--vw-min) * 100vw);
	}
	.hero__onair--date{
		width: calc(22 / var(--vw-min) * 100vw);
	}
	.hero__onair--txt{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}


/**
* hero__stArea
**/
.hero__stArea{
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__stAreaIn{
	position: sticky;
	top: 0;
	width: 100%;
	height: min(100vh, 100%);
}

.hero__offsns{
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(calc(86 / var(--vw-min) * 100vw), calc(86px * var(--max-percent)));
	padding-bottom: min(calc(48 / var(--vw-min) * 100vw), calc(48px * var(--max-percent)));
}
.hero__offsnsLists{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.hero__offsnsList--dt{
	font-family: var(--font-en);
	writing-mode: vertical-rl;
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	line-height: 1;
	color: var(--color-white);
}
.hero__offsnsList--dd{
	width: min(calc(20 / var(--vw-min) * 100vw), 20px);
	height: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.hero__offsnsList--link{
	display: block;
	width: 100%;
	height: 100%;
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: var(--color-white);
}
.hero__offsnsList--link[data-sns="x"]{
	mask-image: url(../img/common/sns/icon_x.svg);
}

@media screen and (max-width:768px){
	.hero__stArea{
		display: none;
	}
}




/**
* hero__bg
**/
.hero__bg{
	position: absolute;
	inset: 0;
}
.hero__bg--img{
	width: 100%;
	padding-top: min(124.46%, 2110px);
	background-image: url(../img/top/bg_mv.png);
	background-position: center top;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
@supports (background-image: url("../img/top/bg_mv.webp")){
	.hero__bg--img{
		background-image: url(../img/top/bg_mv.webp);
	}
}

.hero__bg--img_left{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	max-height: calc(1220 / var(--vw-min) * 100vw);
	width: min(calc(86 / var(--vw-min) * 100vw), calc(86px * var(--max-percent)));
	background-color: #0059ff;
	mix-blend-mode: overlay;
}

@media screen and (max-width:768px){
	.hero__bg--img{
		padding-top: 143.8667%;
		background-image: url(../img/top/bg_mv-s.jpg);
	}
	.hero__bg--img_left{
		display: none;
	}
}


/*-----------------------------------------------
 * COMMON - Animation
------------------------------------------------*/
/**
* Title
**/
.js-scrani .contentTItle .contentTItle--txt{
	display: inline-block;
	opacity: 0;
	transform: translateY(0.75em);
	transition: opacity .3s ease, transform .4s ease;
}
.js-scrani.--is-ani .contentTItle .contentTItle--txt{
	opacity: 1;
	transform: translateY(0);
}
.js-scrani .contentTItle:after{
	opacity: 0;
	transform: translateX(80%);
	transition: opacity .3s ease, transform .4s ease;
}
.js-scrani .contentTItle:before{
	opacity: 0;
	transform: translateX(-80%);
	transition: opacity .3s ease, transform .4s ease;
}

.js-scrani.--is-ani .contentTItle:before,
.js-scrani.--is-ani .contentTItle:after{
	opacity: 1;
	transform: translateX(0);
}




/*-----------------------------------------------
 * NEWS
------------------------------------------------*/
.news{
	padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
	padding-bottom: calc(140 / var(--vw-min) * 100vw);
	z-index: 1;
}
.newsContent{
	position: relative;
	z-index: 1;
}
.newsContentIn{
	padding-top: min(calc(44 / var(--vw-min) * 100vw), 44px);
	padding-left: min(calc(183 / var(--vw-min) * 100vw), calc(183px * var(--max-percent)));
	padding-right: min(calc(183 / var(--vw-min) * 100vw), calc(183px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.news{
		padding-top: calc(100 / var(--vw-min) * 100vw);
		padding-bottom: calc(136 / var(--vw-min) * 100vw);
	}
	.newsContentIn{
		padding-top: calc(32 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
	}
}


/**
* newsList
**/
.newsLists{
	width: 100%;
}
.newsList{
	width: 100%;
	position: relative;
}
.newsList:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--color-blue);
	opacity: 30%;
}
.newsList__link{
	display: flex;
	align-items: center;
	padding: min(calc(32 / var(--vw-min) * 100vw), 32px) 0;
	color: var(--color-blue);
	text-decoration: none;
}
.newsList__date{
	min-width: min(calc(104 / var(--vw-min) * 100vw), 104px);
}
.newsList__title{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news__linkBox{
	position: relative;
	text-align: center;
	padding-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
}

@media screen and (max-width:768px){
	.newsList__link{
		padding: calc(40 / var(--vw-min) * 100vw) 0;
	}
	.newsList__link{
		flex-direction: column;
		align-items: unset;
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
	.newsList__date{
		font-size: calc(22 / var(--vw-min) * 100vw);
		min-width: unset;
		line-height: 1;
	}
	.newsList__title{
		line-height: 1.5385;
		-webkit-line-clamp: 2;
		margin-top: calc(12 / var(--vw-min) * 100vw);
	}
	.news__linkBox{
		padding-top: calc(60 / var(--vw-min) * 100vw);
	}
}

@media screen and (hover:hover) and (pointer: fine){
	.newsList__title--txt{
		background: linear-gradient(var(--color-blue), var(--color-blue)) right bottom / 0 1px no-repeat;
		transition: background-size 0.8s ease;
	}
	.newsList__link:hover .newsList__title--txt{
		background-size: 100% 1px;
		background-position: left bottom;
	}
}



/**
*  newsBgArea
**/
.newsBgArea{
	position: absolute;
	inset:max(calc(-80 / var(--vw-min) * 100vw), -80px) 0 max(calc(-320 / var(--vw-min) * 100vw), -320px);
	mask: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, transparent 100%);
	background-color: var(--color-white);
	pointer-events: none;
}
@media screen and (max-width:768px){
	.newsBgArea{
		inset: calc(-28 / var(--vw-min) * 100vw) 0 0;
		mask: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 1) calc(120 / var(--vw-min) * 100vw), rgba(255, 255, 255, 1) calc(100% - calc(140 / var(--vw-min) * 100vw)), transparent 100%);
	}
}


/*-------------------
* Animation - NEWS
-------------------*/
.js-scrani .newsList{
	opacity: 0;
	transform: translateY(1.5em);
	transition: opacity .3s ease, transform .4s ease;
}
.js-scrani.--is-ani .newsList{
	opacity: 1;
	transform: translateY(0);
}
.newsList:nth-of-type(1){
	transition-delay: 0.1s;
}
.newsList:nth-of-type(2){
	transition-delay: 0.15s;
}
.newsList:nth-of-type(3){
	transition-delay: 0.2s;
}

.news__linkBox{
	transform: scale(80%);
	opacity: 0;
	transition: opacity .3s ease .2s, transform .5s ease .2s;
}
.js-scrani.--is-ani .news__linkBox{
	opacity: 1;
	transform: scale(100%);
}





/*-----------------------------------------------
 * MOVIE
------------------------------------------------*/
.movie{
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	padding-bottom: min(calc(180 / var(--vw-min) * 100vw), 180px);
}
.movieContentIn{
	position: relative;
	display: flex;
	z-index: 1;
}
@media screen and (max-width:768px){
	.movie{
		padding-top: calc(64 / var(--vw-min) * 100vw);
		padding-bottom: calc(160 / var(--vw-min) * 100vw);
	}
	.movieContentIn{
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
		flex-direction: column;
	}
}


/**
* movie__mainArea
**/
.movie__mainArea{
	position: relative;
	padding-left: min(calc(113 / var(--vw-min) * 100vw), calc(113px * var(--max-percent)));
}
.movie__videoArea{
	position: relative;
	width: min(calc(790 / var(--vw-min) * 100vw), calc(790px * var(--max-percent)));
}
.movie__videoAreaIn{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}

.movie__blessText{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding-top: min(calc(96 / var(--vw-min) * 100vw), calc(96px * var(--max-percent)));
	z-index: 1;
}
.movie__blessText:before{
	content: '';
	position: absolute;
	inset: 0;
	mask: url(../img/common/deco/deco_bless.png) no-repeat center bottom / cover;
	background-color: #01b3ff;
}

.movie__video{
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.yt-autoplay{
	position: absolute;
	top: -50%;
	left: 0%;
	width: 100%;
	height: 200%;
}

.movie__swiperNav{
	position: absolute;
	bottom: 0;
	left: 0;
	width: min(calc(113 / var(--vw-min) * 100vw), calc(113px * var(--max-percent)));
	padding-right: min(calc(20 / var(--vw-min) * 100vw), 20px);
	text-align: right;
}
.movie__swiperNavIn{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	gap: min(calc(6 / var(--vw-min) * 100vw), calc(6px * var(--max-percent)));
}
.movie__swiperNav--next,
.movie__swiperNav--prev{
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	height: min(calc(16 / var(--vw-min) * 100vw), calc(16px * var(--max-percent)));
	color: var(--color-blue);
}
.movie__swiperNav--next:before,
.movie__swiperNav--prev:before{
	content: '';
	width: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	height: min(calc(8 / var(--vw-min) * 100vw), calc(8px * var(--max-percent)));
	border-left: min(calc(1.5 / var(--vw-min) * 100vw), calc(1.5px * var(--max-percent))) solid currentColor;
	border-top: min(calc(1.5 / var(--vw-min) * 100vw), calc(1.5px * var(--max-percent))) solid currentColor;
}
.movie__swiperNav--next:before{
	transform: rotate(45deg);
	margin-top: 25%;
}
.movie__swiperNav--prev:before{
	transform: rotate(-135deg);
	margin-bottom: 25%;
}
.movie__swiperNav--num{
	/* font-family: var(--font-en); */
	font-weight: 300;
	font-size: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
	line-height: 1;
	color: var(--color-blue);
	letter-spacing: 0.04em;
}

@media screen and (max-width:768px){
	.movie__mainArea{
		padding-left: 0;
	}
	.movie__videoArea{
		width: calc(590 / var(--vw-min) * 100vw);
	}
	.movie__blessText{
		padding-top: calc(72 / var(--vw-min) * 100vw);
	}
	.movie__swiperNav{
		position: relative;
		bottom: auto;
		left: auto;
		width: auto;
		padding-right: 0;
		padding-top: calc(8 / var(--vw-min) * 100vw);
		text-align: left;
	}
	.movie__swiperNavIn{
		flex-direction: row-reverse;
		margin-left: 0;
		gap: calc(16 / var(--vw-min) * 100vw);
	}
	.movie__swiperNav--next,
	.movie__swiperNav--prev{
		width: calc(32 / var(--vw-min) * 100vw);
		height: calc(32 / var(--vw-min) * 100vw);
	}
	.movie__swiperNav--next:before,
	.movie__swiperNav--prev:before{
		width: calc(10 / var(--vw-min) * 100vw);
		height: calc(10 / var(--vw-min) * 100vw);
		margin: 0;
		border-width: calc(2 / var(--vw-min) * 100vw);
	}
	.movie__swiperNav--next:before{
		transform: rotate(135deg);
	}
	.movie__swiperNav--prev:before{
		transform: rotate(-45deg);
	}
	.movie__swiperNav--num{
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}




/**
* movie__swiperArea
**/
.movie__swiperArea{
	position: relative;
	flex: 1 1 0;
	min-width: min(calc(200 / var(--vw-min) * 100vw), calc(200px * var(--max-percent)));
	min-height: 0;
	align-self: stretch;
}
.movie__swiperAreaIn{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.movie__swiperLists{
	height: 100%;
}
.movie__swiperList{
	height: 100%;
}
.movie__swiperAreaIn.swiper-fade .swiper-slide{
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100%;
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.movie__swiperAreaIn.swiper-fade .swiper-slide-active{
	opacity: 1 !important;
	pointer-events: auto;
}
.movie__swiperListIn{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
	height: 100%;
	/* padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent))); */
}

.movie__swiperList--num{
	font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	color: var(--color-white);
	line-height: 1;
}
.movie__swiperList--txt{
	font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	line-height: 1;
	color: var(--color-blue);
}
.movie__swiperList--txt > span{
	display: inline-block;
	background-color: var(--color-white);
}

@media screen and (max-width:768px){
	.movie__swiperArea{
		position: absolute;
		inset: 0 calc(48 / var(--vw-min) * 100vw);
		flex: none;
		width: auto;
		min-width: 0;
		min-height: 0;
		align-self: auto;
		pointer-events: none;
	}
	.movie__swiperAreaIn{
		position: absolute;
		right: 0;
		bottom: calc(11 / var(--vw-min) * 100vw);
		width: calc(520 / var(--vw-min) * 100vw);
		height: auto;
		overflow: visible;
	}
	.movie__swiperLists,
	.movie__swiperList{
		height: 100%;
	}
	.movie__swiperListIn{
		align-items: flex-end;
	}
	.movie__swiperList--num{
		font-size: calc(36 / var(--vw-min) * 100vw);
	}
	.movie__swiperList--txt{
		font-size: calc(36 / var(--vw-min) * 100vw);
	}
}



/**
* movie__playBtnArea
**/
.movie__playBtnArea{
	position: absolute;
	top: 0;
	bottom: 0;
	left: max(calc(-56 / var(--vw-min) * 100vw), -56px);
	width: min(calc(174 / var(--vw-min) * 100vw), 174px);
	height: min(calc(174 / var(--vw-min) * 100vw), 174px);
	margin: auto 0;
	z-index: 1;
}
.movie__playBtn{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.movie__playBtn:before{
	content: '';
	position: absolute;
	inset: 0;
	background: url(../img/top/moive_playmovie.svg) no-repeat center / contain;
	animation: 18s rotate linear infinite;
	animation-play-state: paused;
}
#movie.--is-inview .movie__playBtn:before{
	animation-play-state: running;
}
.movie__playBtn:after{
	content: '';
	position: absolute;
	inset: 0 0 0 2.5%;
	width: 16.092%;/* 28 */
	height: 16.092%;/* 28 */
	margin: auto;
	mask: url(../img/common/deco/deco_triangle-r.svg) no-repeat center / contain;
	background-color: var(--color-white);
}
.movie__playBtn--line{
	position: absolute;
	inset: 0;
	width: 74.71265%;
	height: 74.71265%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 100%);
	margin: auto;
}

@media screen and (max-width:768px){
	.movie__playBtnArea{
		pointer-events: auto;
		top: calc(80 / var(--vw-min) * 100vw);
		bottom: auto;
		left: auto;
		right: 0;
		width: calc(184 / var(--vw-min) * 100vw);
		height: calc(184 / var(--vw-min) * 100vw);
		margin: 0;
	}
}

@media screen and (hover:hover) and (pointer: fine){
	.movie__playBtn:hover::before,
	.btn_characterVideo:hover .movie__playBtn::before{
		animation-play-state: paused;
	}
	.movie__playBtn:after{
		transition: transform .3s ease;
	}
	.movie__playBtn:hover::after,
	.btn_characterVideo:hover .movie__playBtn::after{
		transform: scale(112.5%);
	}
}



/**
* movieBg
**/
.movieBgArea{
	position: absolute;
	inset: max(calc(-120 / var(--vw-min) * 100vw), -120px) 0 0;
	background: url(../img/top/bg_movie.jpg) no-repeat center bottom / 100%;
}
@supports (background-image: url("../img/top/bg_movie.webp")){
	.movieBgArea{
		background-image: url(../img/top/bg_movie.webp);
	}
}

.movie__deco{
	position: absolute;
	top: 0;
	right: 0;
	width: min(calc(216 / var(--vw-min) * 100vw), 216px);
	height: min(calc(164 / var(--vw-min) * 100vw), 164px);
	background: url(../img/common/deco/deco_ink-pink.png) no-repeat center / contain;
	margin-top: max(calc(-168 / var(--vw-min) * 100vw), -168px);
	margin-right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}

@media screen and (max-width:768px){
	.movieBgArea{
		inset: unset;
		bottom: 0;
		width: 100%;
		height: calc(900 / var(--vw-min) * 100vw);
		background-image: url(../img/top/bg_movie-s.jpg);
	}
	.movie__deco{
		width: calc(163 / var(--vw-min) * 100vw);
		height: calc(123 / var(--vw-min) * 100vw);
		margin-top: calc(-140 / var(--vw-min) * 100vw);
		margin-right: 0;
	}
	.movieBgArea:before{
		content: '';
		position: absolute;
		top: calc(304 / var(--vw-min) * 100vw);
		right: 0;
		width: calc(620 / var(--vw-min) * 100vw);
		height: calc(338 / var(--vw-min) * 100vw);
		background-color: #01a8ff;
		mix-blend-mode: overlay;
	}
}


/**------------------
* MOVIE Animation
**----------------*/
.movie__mainArea{
	opacity: 0;
	transform: scale(80%);
	transition: opacity .3s ease, transform .45s ease;
}
.movie__swiperArea{
	opacity: 0;
	transform: translateY(3em);
	transition: opacity .3s ease, transform .45s ease;
}
.movie__playBtnArea{
	transform: translateY(-3em);
	transition: transform .45s ease;
}

.js-scrani.--is-ani .movie__mainArea,
.js-scrani.--is-ani .movie__swiperArea,
.js-scrani.--is-ani .movie__playBtnArea{
	opacity: 1;
	transform: translateY(0) scale(100%);
}


.movie__blessText{
	transform: translateY(-100%);
	transition: transform .6s ease .2s;
}
.js-scrani.--is-ani .movie__blessText{
	transform: translateY(0);
}


/*-----------------------------------------------
 * INTRODUCTION
------------------------------------------------*/
.introduction{
	width: 100%;
	padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
	padding-bottom: min(calc(180 / var(--vw-min) * 100vw), 180px);
	color: var(--color-white);
	overflow: hidden;
}
.introduction .contentTItle{
	color: var(--color-white);
}
.introduction .contentIn{
	max-width: 1366px;
}
.introductionContentIn{
	position: relative;
	padding-top: min(calc(136 / var(--vw-min) * 100vw), 136px);
}

@media screen and (max-width:768px){
	.introduction{
		padding-top: calc(144 / var(--vw-min) * 100vw);
		padding-bottom: calc(140 / var(--vw-min) * 100vw);
	}
	.introduction .contentIn{
		max-width: 100%;
	}
	.introductionContentIn{
		padding-top: calc(100 / var(--vw-min) * 100vw);
	}
}



/**
* introduction__head
**/
.introduction__head{
	position: relative;
	z-index: 1;
	padding-bottom: min(calc(96 / var(--vw-min) * 100vw), 96px);
	display: flex;
	justify-content: center;
}
.introduction__head--txt{
	writing-mode: vertical-rl;
	text-orientation: upright;
	width: max-content;
	margin: 0;
	font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
	font-weight: 300;
	line-height: 2;
	position: relative;
	z-index: 1;
	text-shadow: var(--color-blue) 1px 0 10px;
}

@media screen and (max-width:768px){
	.introduction__head{
		padding-bottom: calc(144 / var(--vw-min) * 100vw);
	}
	.introduction__head--txt{
		font-size: calc(32 / var(--vw-min) * 100vw);	
	}
}


/**
* introduction__main
**/
.introduction__main{
	position: relative;
	width: 100%;
	z-index: 1;
}
.introduction__main--txt{
	width: min(calc(520 / var(--vw-min) * 100vw), 520px);
	margin: 0 auto;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	line-height: 2;
	text-shadow: var(--color-blue) 1px 0 10px;
	position: relative;
	z-index: 1;
}

@media screen and (max-width:768px){
	.introduction__main{
		padding-bottom: calc(280 / var(--vw-min) * 100vw);
	}
	.introduction__main--txt{
		width: 100%;
		padding-left: calc(80 / var(--vw-min) * 100vw);
		padding-right: calc(80 / var(--vw-min) * 100vw);
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
}




/**
* introduction__imgArea
**/
.introduction__imgArea{
	position: absolute;
	inset: 0;
}
.introduction__img{
	position: absolute;
}
.introduction__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/** head --img **/
.intro__img1{
	top: 0;
	left: 0;
	margin-top: min(calc(72 / var(--vw-min) * 100vw), 72px);
	margin-left: min(calc(62 / var(--vw-min) * 100vw), 62px);
	width: min(calc(460 / var(--vw-min) * 100vw), 460px);
	height: min(calc(260 / var(--vw-min) * 100vw), 260px);
}
.intro__img2{
	top: 0;
	right: 0;
	margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
	margin-right: min(calc(190 / var(--vw-min) * 100vw), 190px);
	width: min(calc(312 / var(--vw-min) * 100vw), 312px);
	height: min(calc(176 / var(--vw-min) * 100vw), 176px);
}

@media screen and (max-width:768px){
	.intro__img1{
		margin-top: calc(160 / var(--vw-min) * 100vw);
		margin-left: calc(-20 / var(--vw-min) * 100vw);
		width: calc(323 / var(--vw-min) * 100vw);
		height: calc(180 / var(--vw-min) * 100vw);
	}
	.intro__img2{
		width: calc(248 / var(--vw-min) * 100vw);
		height: calc(140 / var(--vw-min) * 100vw);
		margin-top: calc(380 / var(--vw-min) * 100vw);
		margin-right: calc(40 / var(--vw-min) * 100vw);
	}
}



/** main --img **/
.intro__img3{
	top: 0;
	left: 0;
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
	margin-left: min(calc(40 / var(--vw-min) * 100vw), 40px);
	width: min(calc(300 / var(--vw-min) * 100vw), 300px);
	height: min(calc(170 / var(--vw-min) * 100vw), 170px);
}
.intro__img4{
	top: 0;
	right: 0;
	width: min(calc(460 / var(--vw-min) * 100vw), 460px);
	height: min(calc(260 / var(--vw-min) * 100vw), 260px);
	margin-top: max(calc(-60 / var(--vw-min) * 100vw), -60px);
	margin-right: max(calc(-74 / var(--vw-min) * 100vw), -74px);
}
@media screen and (max-width:768px){
	.intro__img3{
		top: unset;
		bottom: 0;
		margin-top: 0;
		margin-left: calc(32 / var(--vw-min) * 100vw);
		margin-bottom: calc(94 / var(--vw-min) * 100vw);
		width: calc(240 / var(--vw-min) * 100vw);
		height: calc(134 / var(--vw-min) * 100vw);
	}
	.intro__img4{
		top: unset;
		bottom: 0;
		width: calc(370 / var(--vw-min) * 100vw);
		height: calc(208 / var(--vw-min) * 100vw);
		margin-top: 0;
		margin-right: calc(-24 / var(--vw-min) * 100vw);
	}
}


/**
* introduction--bg
**/
.introduction--bg{
	position: absolute;
	inset: 0;
	background: url(../img/top/bg_introduction.jpg) no-repeat center center / cover;	
}
@supports (background-image: url("../img/top/bg_introduction.webp")){
	.introduction--bg{
		background-image: url(../img/top/bg_introduction.webp);
	}
}


/**------------------------------------
* INTRODUCTION Animation
**----------------------------------*/
.introduction__head--txt,
.introduction__main--txt{
	opacity: 0;
	transform: scale(104%);
	filter: blur(4px);
	transition: opacity .3s ease, transform .45s ease .1s, filter .4s ease .1s;
}
.introduction__head.--is-ani .introduction__head--txt,
.introduction__main.--is-ani .introduction__main--txt{
	opacity: 1;
	filter: blur(0px);
	transform: scale(100%) translateY(0);
}
@media screen and (max-width:768px){
	.introduction__head--txt,
	.introduction__main--txt{
		filter: none;
		transform: translateY(0.6em);
		transition: opacity .3s ease, transform .4s ease;
	}
	.introduction__head.--is-ani .introduction__head--txt,
	.introduction__main.--is-ani .introduction__main--txt{
		filter: none;
		transform: translateY(0);
	}
}






/*-----------------------------------------------
 * CHARACTER
------------------------------------------------*/
.characterContent{
	padding-top: min(calc(72 / var(--vw-min) * 100vw), 72px);
	padding-bottom: min(calc(64 / var(--vw-min) * 100vw), 64px);
	overflow: hidden;
}
.characterContentIn{
	position: relative;
	padding-left: min(calc(80 / var(--vw-min) * 100vw), 80px);
	z-index: 1;
}
.characterContentIn__cont{
	width: 100%;
	display: flex;
}

@media screen and (max-width:768px){
	.characterContent{
		padding-top: calc(140 / var(--vw-min) * 100vw);
		padding-bottom: calc(140 / var(--vw-min) * 100vw);
	}
	.characterContentIn{
		padding-left: 0;
	}
	.characterContentIn__cont{
		flex-direction: column;
	}
}


/**
* character__title
**/
.character__title{
	position: relative;
	font-family: var(--font-en);
	font-size: min(calc(80 / var(--vw-min) * 100vw), 80px);
	line-height: 0.6625;
	letter-spacing: 0.08em;
	writing-mode: vertical-rl;
	color: var(--color-white);
	flex-shrink: 0;
	padding-top: min(calc(96 / var(--vw-min) * 100vw), 96px);
}
.character__title--txt{
	position: relative;
}

@media screen and (max-width:768px){
	.character__title{
		width: 100%;
		font-size: calc(80 / var(--vw-min) * 100vw);
		writing-mode: horizontal-tb;
		letter-spacing: 0.07em;
		padding-top: 0;
		text-align: center;
	}
}




.character__contentIn{
	width: 100%;
	width: calc(100% - min(calc(53 / var(--vw-min) * 100vw), 53px));

	position: relative;
	padding-left: min(calc(50 / var(--vw-min) * 100vw), 50px);
	padding-right: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.character__swiperArea,
.characterContentIn{
	width: 100%;
}
.characterContentIn{
	max-width: 1366px;
}
.character__swiperAreaIn{
	overflow: unset;
}
.character__listIn{
	display: flex;
	position: relative;
	height: 100%;
	padding-bottom: min(calc(48 / var(--vw-min) * 100vw), 48px);
}
.character__list{
	opacity: 1!important;
}

@media screen and (max-width:768px){
	.character__contentIn{
		width: 100%;
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
	}
	.characterContentIn{
		max-width: 100%;
	}
	.character__listIn{
		padding-bottom: calc(56 / var(--vw-min) * 100vw);
		flex-direction: column;
	}
}



/**
* character__detail
**/
.character__detail{
	position: relative;
	padding-top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	width: min(calc(336 / var(--vw-min) * 100vw), 336px);
	padding-bottom: min(calc(224 / var(--vw-min) * 100vw), 224px);
}

.character__detail--name_ja{
	font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-blue);
}
.character__detail--name_ja--txt{
	display: inline-block;
	background-color: var(--color-white);
}
.character__detail--name_en{
	font-family: var(--font-en);
	line-height: 1;
	margin-top: 0.8em;
	color: var(--color-white);
}

.character__detail--cv{
	width: 100%;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: min(calc(12 / var(--vw-min) * 100vw), 12px);
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	color: var(--color-white);
	padding-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
	text-shadow: var(--color-blue) 1px 0 10px;
}
.character__detail--cv_ttl{
	display: inline-block;
	padding: min(calc(3 / var(--vw-min) * 100vw), 3px) min(calc(10 / var(--vw-min) * 100vw), 10px);
	position: relative;
	font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.character__detail--cv_ttl:before{
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-white);
	border-radius: 20rem;
}

.character__detail--lists{
	display: inline-flex;
	flex-direction: column;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
	color: var(--color-white);
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
	text-shadow: var(--color-blue) 1px 0 10px;
}
.character__detail--list{
	display: inline-flex;
	position: relative;
}
.character__detail--list_dt{
	padding-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
	min-width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	position: relative;
	display: inline-flex;
	align-items: center;
}
.character__detail--list_dt:before{
	content: '';
	position: absolute;
	top: 0.05em;
	bottom: 0.05em;
	left: 0;
	width: min(calc(4 / var(--vw-min) * 100vw), 4px);
	background-color: var(--color-white);
}

.charadlist__line{
	display: inline-block;
	width: min(calc(54 / var(--vw-min) * 100vw), 54px);
	height: 2px;
	background: repeating-linear-gradient(to right,
		rgba(255, 255, 255, 0.75),
		rgba(255, 255, 255, 0.75) 2px,
		transparent 2px,
		transparent 4px);
	margin-left: auto;
}
.character__detail--list_dd{
	padding-left: min(calc(16 / var(--vw-min) * 100vw), 16px);
}
.character__detail--text{
	padding-top: min(calc(48 / var(--vw-min) * 100vw), 48px);
	line-height: 2;
	color: var(--color-white);
	text-shadow: var(--color-blue) 1px 0 10px;
}

@media screen and (max-width:768px){
	.character__detail{
		padding-top: calc(48 / var(--vw-min) * 100vw);
		width: 100%;
		padding-bottom: 0;
	}
	.character__detail--name_ja{
		font-size: calc(48 / var(--vw-min) * 100vw);
	}
	.character__detail--name_en{
		font-size: calc(26 / var(--vw-min) * 100vw);
		margin-top: calc(16 / var(--vw-min) * 100vw);
	}
	.character__detail--cv{
		gap: calc(16 / var(--vw-min) * 100vw);
		font-size: calc(32 / var(--vw-min) * 100vw);
		padding-top: calc(36 / var(--vw-min) * 100vw);
	}
	.character__detail--cv_ttl{
		padding: calc(6 / var(--vw-min) * 100vw) calc(16 / var(--vw-min) * 100vw);
		font-size: calc(16 / var(--vw-min) * 100vw);
	}

	.character__detail--lists{
		gap: calc(16 / var(--vw-min) * 100vw);
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.character__detail--list_dt{
		min-width: calc(220 / var(--vw-min) * 100vw);
	}
	.charadlist__line{
		width: calc(112 / var(--vw-min) * 100vw);
	}
	.character__detail--list_dd{
		padding-left: calc(20 / var(--vw-min) * 100vw);
	}
	.character__detail--text{
		padding-top: calc(56 / var(--vw-min) * 100vw);
	}
}



/**
* character__image
**/
.character__image{
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
	margin-top: max(calc(-136 / var(--vw-min) * 100vw), -136px);
}
.character__image img{
	width: 100%;
}

@media screen and (max-width:768px){
	.character__image{
		order: -1;
		width: calc(400 / var(--vw-min) * 100vw);
		margin-left: calc(80 / var(--vw-min) * 100vw);
		margin-top: calc(-8 / var(--vw-min) * 100vw);
	}
}



/**
* character__videoArea
**/
.character__videoArea{
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
}
.btn_characterVideo{
	display: block;
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.btn_characterVideo--img{
	position: absolute;
	inset: 0;
}
.btn_characterVideo--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.character__image:before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-blue);
	opacity: 40%;
	mix-blend-mode: color;
	mask-image: var(--character-mask);
	mask-repeat: no-repeat;
	mask-size: contain;
}
.btn_characterVideo--circle{
	width: min(calc(120 / var(--vw-min) * 100vw), 120px);
	height: min(calc(120 / var(--vw-min) * 100vw), 120px);
	position: absolute;
	inset: 0;
	margin: auto;
}

@media screen and (max-width:768px){
	.character__videoArea{
		bottom: unset;
		top: 0;
		margin-top: calc(1036 / var(--vw-min) * 100vw);
		width: calc(266 / var(--vw-min) * 100vw);
	}
}



/**
* Character -- Swiper - Animation
**/
.character__detail,
.character__videoArea{
	opacity: 0;
	transition: opacity .3s ease;
}


.character__list.swiper-slide-next{
	z-index: 1;
}
.character__list.swiper-slide-active{
	z-index: 2;
}
.character__list.swiper-slide-active .character__detail,
.character__list.swiper-slide-active .character__videoArea{
	opacity: 1;
}

.character__image{
	filter: blur(3px);
	opacity: 0;
	transform: none;
	transition: filter .3s ease, opacity .4s ease .15s, transform .35s ease;
	position: relative;
	pointer-events: none;
}
.character__list.swiper-slide-active .character__image{
	filter: blur(0px);
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* next待機: .character.--chara-next-wait */
.character.--chara-next-wait .character__list.swiper-slide-next .character__image{
	filter: blur(3px);
	opacity: 1;
	transform: translateX(min(calc(80 / var(--vw-min) * 100vw), 80px));
}
.character.--chara-next-wait .character__list.swiper-slide-prev .character__image{
	filter: blur(3px);
	opacity: 0;
	transform: translateX(max(calc(-80 / var(--vw-min) * 100vw), -80px));
}
.character.--chara-next-wait .character__list.swiper-slide-prev.swiper-slide-next .character__image{
	filter: blur(3px);
	opacity: 1;
	transform: translateX(min(calc(80 / var(--vw-min) * 100vw), 80px));
}
.character:not(.--is-inview) .character__image,
.character:not(.--is-inview) .character__list.swiper-slide-active .character__image{
	filter: none;
	transition: opacity .4s ease .15s, transform .35s ease;
}
.character:not(.--is-ani) .character__image{
	opacity: 0;
}

.character__image:before{
	transition: opacity .4s;
}
.character__list.swiper-slide-active .character__image:before{
	opacity: 0;
}


/**
* character - select
**/
.character__swiperSelectListsArea{
	position: absolute;
	bottom: 0;
	left: 0;
	margin-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
	padding-left: min(calc(50 / var(--vw-min) * 100vw), 50px);
	z-index: 2;
}
.character__swiperSelectLists{
	display: flex;
	gap: min(calc(4 / var(--vw-min) * 100vw), 4px);
	position: relative;
	z-index: 2;
}
.character__swiperSelectList{
	width: min(calc(56 / var(--vw-min) * 100vw), 56px);
}
.btn_characterSelect{
	display: block;
	width: 100%;
	padding-top: 100%;
	background-color: var(--color-white);
	position: relative;
}
.btn_characterSelect:before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-blue);
	opacity: 0;
	transition: opacity .3s ease;
}
.btn_characterSelect--img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: filter .3s ease;
}
.btn_characterSelect:not(.--is-active) .btn_characterSelect--img{
	filter: grayscale(0.8);
}
.character:not(.--is-inview) .btn_characterSelect--img{
	filter: none;
	transition: none;
}
.btn_characterSelect--img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (hover:hover) and (pointer: fine){
	.btn_characterSelect:not(.--is-active):hover .btn_characterSelect--img{
		filter: grayscale(0);
	}
}

.btn_characterSelect.--is-active:before{
	opacity: 60%;
}

@media screen and (max-width:768px){
	.character__swiperSelectListsArea{
		position: relative;
		margin-bottom: 0;
		padding-left: 0;
	}
	.character__swiperSelectLists{
		gap: calc(16 / var(--vw-min) * 100vw);
	}
	.character__swiperSelectList{
		width: calc(118 / var(--vw-min) * 100vw);
	}
}





/**
* character - bg
**/
.characterBgArea{
	position: absolute;
	inset: 0;
}

.characterBg__img{
	position: absolute;
	top: max(calc(-160 / var(--vw-min) * 100vw), -160px);
	left: 0;
	right: 0;
	bottom: 0;
	mask: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 1) min(calc(160 / var(--vw-min) * 100vw), 160px), rgba(255, 255, 255, 1) 100%);
	background: url(../img/top/bg_character.jpg) no-repeat center center / cover;
	/* background-color: red; */
}
@supports (background-image: url("../img/top/bg_character.webp")){
	.characterBg__img{
		background-image: url(../img/top/bg_character.webp);
	}
}
@property --character-deco-progress {
	syntax: "<number>";
	inherits: true;
	initial-value: 103;
}
.characterBg__line{
	--character-deco-progress: 103;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: min(calc(247 / var(--vw-min) * 100vw), calc(247px * var(--max-percent)));
	margin: auto 0;
	mask: url(../img/common/deco/deco_line.png) no-repeat center / 100% 100%;
	background-image: linear-gradient(90deg,
		#dd82ff 0%,
		#dd82ff calc(var(--character-deco-progress) * 1% - 4%),
		#ffffff calc(var(--character-deco-progress) * 1% - 1%),
		rgba(255, 255, 255, 0) calc(var(--character-deco-progress) * 1%),
		rgba(255, 255, 255, 0) 100%);
}
.--js-fx .characterBg__line{
	--character-deco-progress: 0;
	transition: --character-deco-progress 1.1s cubic-bezier(.42, 0, .58, 1);
}


@media screen and (max-width:768px){
	.characterBg__line{
		bottom: unset;
		margin-top: calc(620 / var(--vw-min) * 100vw);
		height: calc(180 / var(--vw-min) * 100vw);
		mask-image: url(../img/common/deco/deco_line-s.png);
	}
	.characterBg__decoTxt{
		display: none;
	}
}


/**------------------------------------
* Character Animation
**----------------------------------*/
/**
* CharacterTitle
**/
.character__title .character__title--txt{
	display: inline-block;
	opacity: 0;
	transform: translateX(-0.75em);
	transition: opacity .3s ease, transform .4s ease;
}
.js-scrani.--is-ani .character__title--txt{
	opacity: 1;
	transform: translateY(0);
}

@media screen and (max-width:768px){
	.js-scrani .character__title .character__title--txt{
		transform: translateY(0.75em);
	}
	.js-scrani.--is-ani .character__title .character__title--txt{
		opacity: 1;
		transform: translateY(0);
	}
	.js-scrani .character__title:after{
		opacity: 0;
		transform: translateX(80%);
		transition: opacity .3s ease, transform .4s ease;
	}
	.js-scrani .character__title:before{
		opacity: 0;
		transform: translateX(-80%);
		transition: opacity .3s ease, transform .4s ease;
	}
	
	.js-scrani.--is-ani .character__title:before,
	.js-scrani.--is-ani .character__title:after{
		opacity: 1;
		transform: translateX(0);
	}
}


/**
* characterDetail
**/
.character__detail--name_ja--txt{
	overflow: hidden;
	mask: linear-gradient(#FFF, #FFF) right bottom / 0 100% no-repeat;
	transition: mask-size .4s ease;
}
.character__detail--name_ja--txt > span,
.character__detail--name_en{
	display: inline-block;
	opacity: 0;
	transform: translateY(50%);
	transition: opacity .3s ease, transform .35s ease;
}
.character__detail--cv_ttl{
	opacity: 0;
	transition: opacity .3s ease;
}
.character__detail--cv_name{
	display: inline-block;
	opacity: 0;
	transform: translateY(50%);
	transition: opacity .3s ease, transform .35s ease;
}

.character__detail--lists{
	opacity: 0;
	transition: opacity .3s ease;
}
.character__detail--list:before{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(#FFF, #FFF) left bottom / 100% 100% no-repeat;
	transition-delay: .5s;
}
.character__detail--text{
	opacity: 0;
	transition: opacity .3s ease;
}

.btn_characterVideo{
	transition: opacity .3s ease;
	opacity: 0;
}

.character__swiperSelectLists{
	opacity: 0;
	transform: translateY(50%);
    transition: opacity .3s ease, transform .35s ease;
}



/* active */
.character.--is-ani .swiper-slide-active .character__detail--name_ja--txt{
	mask-position: left bottom;
	mask-size: 100% 100%;
	transition-delay: .125s;
}
.character.--is-ani .swiper-slide-active .character__detail--name_ja--txt > span{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 0.25s;
}
.character.--is-ani .swiper-slide-active .character__detail--name_en{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 0.35s;
}
.character.--is-ani .swiper-slide-active .character__detail--cv_ttl{
	opacity: 1;
	transition-delay: 0.4s;
}
.character.--is-ani .swiper-slide-active .character__detail--cv_name{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}
.character.--is-ani .swiper-slide-active .character__detail--lists{
	opacity: 1;
	transition-delay: 0.125s;
}
.character.--is-ani .swiper-slide-active .character__detail--list:before{
	background-position: right bottom;
	background-size: 0% 100%;
	transition: background-size .4s ease;
	transition-delay: .25s;
}
.character.--is-ani .swiper-slide-active .character__detail--text{
	opacity: 1;
	transition-delay: .4s;
}
.character.--is-ani .swiper-slide-active .btn_characterVideo{
	opacity: 1;
	transition-delay: .4s;
}


.character.--is-ani .character__swiperSelectLists{
	opacity: 1;
	transform: translateY(0%);
}



.character__list .movie__playBtn:before{
	animation-play-state: paused;
}
.character.--is-ani.--is-inview .character__list.swiper-slide-active .movie__playBtn:before{
	animation-play-state: running;
}


/**
* Bg
**/
.--js-fx .character.--is-ani .characterBg__line{
	--character-deco-progress: 103;
	transition-delay: .1s;
}




/*-----------------------------------------------
 * STAFFCAST
------------------------------------------------*/
.staffcast{
	padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
	padding-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
	z-index: 1;
}
.staffcastContent{
	position: relative;
	z-index: 1;
}
.staffcastContentIn{
	padding-top: min(calc(44 / var(--vw-min) * 100vw), 44px);
	padding-left: min(calc(183 / var(--vw-min) * 100vw), calc(183px * var(--max-percent)));
	padding-right: min(calc(183 / var(--vw-min) * 100vw), calc(183px * var(--max-percent)));
}
.staffcastContentIn__cont{
	width: 100%;
	max-width: 1000px;
	display: flex;
	margin: 0 auto;
}

@media screen and (max-width:768px){
	.staffcast{
		padding-top: calc(140 / var(--vw-min) * 100vw);
		padding-bottom: calc(140 / var(--vw-min) * 100vw);
	}
	.staffcastContentIn{
		padding-top: calc(72 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
	}
	.staffcastContentIn__cont{
		flex-direction: column;
		gap: calc(96 / var(--vw-min) * 100vw);
	}
}


/**
* staffcastSection__title
**/
.staffcastSection__title{
	font-family: var(--font-en);
	font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
	font-weight: 300;
	line-height: 0.6625;
	position: relative;
	padding-bottom: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
.staffcastSection__title:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: min(calc(22 / var(--vw-min) * 100vw), 22px);
	height: 2px;
	background-color: var(--color-black);
}

@media screen and (max-width:768px){
	.staffcastSection__title{
		font-size: calc(56 / var(--vw-min) * 100vw);
		padding-bottom: calc(14 / var(--vw-min) * 100vw);
	}
	.staffcastSection__title:before{
		width: calc(40 / var(--vw-min) * 100vw);
	}
}


/**
* staffcastList
**/
.staffcastLists{
	display: flex;
	flex-wrap: wrap;
	column-gap: min(calc(24 / var(--vw-min) * 100vw), 24px);
	row-gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.staffcastList{
	width: calc((100% - min(calc(24 / var(--vw-min) * 100vw), 24px)) / 2);
}
.staffcastList.-w100{
	width: 100%;
}

.staffcastList__dt{
	line-height: 1;
}
.staffcastList__dt--ttl{
	display: inline-block;
	padding: 2px;
	background-color: var(--color-black);
	color: var(--color-white);
}
.staffcastList__dd{
	padding-top: min(calc(6 / var(--vw-min) * 100vw), 6px);
}

@media screen and (max-width:768px){
	.staffcastLists{
		margin-top: calc(64 / var(--vw-min) * 100vw);
		column-gap: calc(20 / var(--vw-min) * 100vw);
		row-gap: calc(56 / var(--vw-min) * 100vw);
	}
	.staffcastList__dt--ttl{
		padding: calc(4 / var(--vw-min) * 100vw);
	}
	.staffcastList__dd{
		padding-top: calc(8 / var(--vw-min) * 100vw);
	}
}



/**
* STAFF
**/
#staff{
	width: min(calc(528 / var(--vw-min) * 100vw), 528px);
}
#staff .staffcastList__dd{
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
}
#staff .staffcastList__dd small{
	font-size: 66.6667%;
}

@media screen and (max-width:768px){
	#staff{
		width: 100%;
	}
	#staff .staffcastList__dd{
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
	#staff .staffcastList__dd small{
		font-size: 61.5385%;
	}
}



/**
* CAST
**/
#cast{
	width: min(calc(336 / var(--vw-min) * 100vw), 336px);
	margin-left: auto;
}
#cast .staffcastLists.-is-comment,
#cast .staffcastLists:has(.cast__comment){
	background-color: rgba(0, 0, 0, 3%);
}
#cast .staffcastList{
	width: 100%;
}

.cast__name{
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
}
.cast__comment{
	margin-top: min(calc(6 / var(--vw-min) * 100vw), 6px);
	border-bottom: 2px solid var(--color-black);
}
.cast__comment--head{
	padding: min(calc(8 / var(--vw-min) * 100vw), 8px) 0;
	position: relative;
	display: flex;
	align-items: center;
	pointer-events: auto;
	cursor: pointer;
}
.cast__comment--head_txt{
	font-family: var(--font-en);	
}
.cast__comment--head_icon{
	width: min(calc(12 / var(--vw-min) * 100vw), 12px);
	height: min(calc(12 / var(--vw-min) * 100vw), 12px);
	position: relative;
	margin-left: auto;
}
.cast__comment--head_icon > span:nth-of-type(1){
	position: absolute;
	inset: 0; 
	width: 100%;
	height: 1px;
	margin: auto;
	background-color: var(--color-black);
	transition: opacity .3s ease, transform .3s ease;
}
.cast__comment--head_icon > span:nth-of-type(2){
	position: absolute;
	inset: 0; 
	width: 1px;
	height: 100%;
	margin: auto;
	background-color: var(--color-black);
	transition: opacity .3s ease, transform .25s ease;
}
.cast__comment.--is-open .cast__comment--head_icon > span:nth-of-type(2){
	opacity: 0;
	transform: translateY(75%);
}

.cast__comment--main{
	display: none;
	padding-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
	padding-bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
}

@media screen and (max-width:768px){
	#cast{
		width: 100%;
	}
	#cast .staffcastLists{
		width: calc(100% - calc(64 / var(--vw-min) * 100vw));
		margin-left: auto;
		margin-right: auto;
	}
	.cast__name{
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
	.cast__comment{
		margin-top: calc(8 / var(--vw-min) * 100vw);
	}
	.cast__comment--head{
		padding: calc(20 / var(--vw-min) * 100vw) 0;
	}
	.cast__comment--head_icon{
		width: calc(20 / var(--vw-min) * 100vw);
		height: calc(20 / var(--vw-min) * 100vw);
	}
	.cast__comment--main{
		padding-top: calc(8 / var(--vw-min) * 100vw);
		padding-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}

@media screen and (hover:hover) and (pointer: fine){
	.cast__comment--head{
		transition: background-color .25s ease;
	}
	.cast__comment--head:hover{
		background-color: #FFF;
	}
	.cast__comment--head:hover .cast__comment--head_icon > span:nth-of-type(2){
		transform: translateY(12.5%);
	}
}


.staffcast__deco{
	position: absolute;
	top: 0;
	left: 0;
	margin-top: max(calc(-230 / var(--vw-min) * 100vw), -230px);
	margin-left: min(calc(30 / var(--vw-min) * 100vw), calc(30px * var(--max-percent)));
	width: min(calc(206 / var(--vw-min) * 100vw), 206px);
	height: min(calc(141 / var(--vw-min) * 100vw), 141px);
	background: url(../img/common/deco/deco_ink-yellow.png) no-repeat center / contain;
}

@media screen and (max-width:768px){
	.staffcast__deco{
		width: calc(206 / var(--vw-min) * 100vw);
		height: calc(141 / var(--vw-min) * 100vw);
		margin-top: calc(-182 / var(--vw-min) * 100vw);
		margin-left: 0;
	}
}



/**------------------------------------
* StaffCast Animation
**----------------------------------*/
.staffcastSection__title:before{
	mask: linear-gradient(#FFF, #FFF) right bottom / 0 100% no-repeat;
	transition: mask-size .4s ease;
}
.staffcastSection__title > span{
	display: inline-block;
	opacity: 0;
	transform: translateY(50%);
	transition: opacity .3s ease, transform .35s ease;
}

.staffcastList__dt--ttl{
	overflow: hidden;
	mask: linear-gradient(#FFF, #FFF) right bottom / 0 100% no-repeat;
	transition: mask-size .4s ease;
}
.staffcastList__dt--ttl > span{
	display: inline-block;
	opacity: 0;
	transform: translateY(0.75em);
	transition: opacity .3s ease, transform .35s ease;
}
.staffcastList__dd{
	opacity: 0;
	transform: translateY(0.75em);
	transition: opacity .3s ease, transform .35s ease;
}



/* active */
.staffcastSection.--is-ani .staffcastSection__title:before{
	mask-position: left bottom;
	mask-size: 100% 100%;
	transition-delay: 0.2s;
}
.staffcastSection.--is-ani .staffcastSection__title > span{
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}
.staffcastSection.--is-ani .staffcastList__dt--ttl{
	mask-position: left bottom;
	mask-size: 100% 100%;
	transition-delay: 0.3s;
}
.staffcastSection.--is-ani .staffcastList__dt--ttl > span{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 0.45s;
}
.staffcastSection.--is-ani .staffcastList__dd{
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 0.5s;
}