@charset "utf-8";

#firstview {
	width: 100%;
	min-height: calc(640px - 67px);
	height: calc(100vh - 67px);
	position: relative;
}

@media screen and (max-width: 767px) {
	#firstview {
		height: 0;
		min-height: unset;
		padding-top: 134.1334%;
		overflow: hidden;
	}
}

.logo {
	width: 31.91301%;
	width: 33.1305%;
	padding-top: 7.3044%;
	padding-top: 8.5218%;
	position: absolute;
	top: 0;
	margin-top: 2.4348%;
	margin-top: 1.7392%;
	right: 2.4348%;
	background: url(../img/common/logo_filter.png) no-repeat center / contain;
	z-index: 3;
}

@media screen and (max-width: 767px) {
	.logo {
		width: 90%;
		padding-top: 23.6%;
		margin-top: 0;
		right: 0;
		left: 0;
		margin: 21.6% auto 0;
		background-image: url(../img/common/logo_filter_sp.png);
	}
}

#firstview.l-aniset .logo {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .logo {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}

.onair_date {
	position: absolute;
	width: 18%;
	padding-top: 18%;
	top: 0;
	margin-top: 32.3479%;
	left: 5.7392%;
	background: url(../img/top/onair_date.png) no-repeat center / contain;
	z-index: 3;
}

html.no-webp .onair_date {
	background-image: url(../img/top/onair_date.png);
}

@media screen and (max-width: 767px) {
	.onair_date {
		width: 27.4667%;
		padding-top: 27.4667%;
		margin-top: 77.3334%;
		left: -0.5334%;
		background-image: url(../img/top/onair_date.png);
		/*    width: 37.6%;
		padding-top: 39.2%;*/
		/*    margin-top: 60.1334%;*/
		/*    left: -7.6%;*/
	}
}

#firstview.l-aniset .onair_date {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .onair_date {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}

#firstview.l-aniset .fv_bnr--comics {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .fv_bnr--comics {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}

#firstview.l-aniset .fv_bnr--chara4koma {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .fv_bnr--chara4koma {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}

#firstview.l-aniset .fv_bnr--voice {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .fv_bnr--voice {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}

.fv_bnr--comics {
	width: 126px;
	padding-top: 139px;
	position: absolute;
	top: 223px;
	left: 9px;

	width: 10.9566%;
	padding-top: 12.087%;
	top: 0;
	margin-top: 19.3913%;
	left: 0.7826%;
	z-index: 3;
	animation: bounce 0.8s ease alternate infinite;
}

.fv_bnr--comics a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../img/top/bnr_comics.png) no-repeat center / contain;
}

.fv_bnr--chara4koma {
	position: absolute;
	width: 10.9566%;
	padding-top: 12.087%;
	top: 0;
	margin-top: calc(18.3913% - 64px);
	left: calc(10.9566% + 32px);
	z-index: 3;
	animation: bounce 0.8s ease alternate infinite;
}

#fullWrap.is-portrait .fv_bnr--voice {
	margin-top: 0.5534%;
}

.fv_bnr--chara4koma a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../img/top/bnr/bnr_4koma.png) no-repeat center / contain;
}

.fv_bnr--voice {
	position: absolute;
	width: 10.9566%;
	padding-top: 12.087%;
	top: 0;
	margin-top: 18.3913%;
	left: 0.7826%;
	z-index: 3;
	animation: bounce 0.8s ease alternate infinite;
}

#fullWrap.is-portrait .fv_bnr--chara4koma {
	margin-top: calc(0.5534% + 40px);
}

.fv_bnr--voice a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: url(../img/top/bnr/bnr_voice.png) no-repeat center / contain;
}

@media screen and (max-width: 767px) {
	.fv_bnr--comics {
		width: 17.0667%;
		padding-top: 20.1334%;
		margin-top: 0.5534%;
		left: -1.0667%;
	}

	.fv_bnr--comics a {
		background-image: url(../img/top/bnr_comics_sp.png);
	}
}

@media screen and (min-width: 768px) {
	@keyframes bounce {
		0% {
			transform: translateY(0px) scale(1);
		}

		100% {
			transform: translateY(-8px) scale(0.95, 1);
		}
	}
}

@media screen and (max-width: 767px) {
	@keyframes bounce {
		0% {
			transform: translateY(0px) scale(1);
		}

		100% {
			transform: translateY(-1.0667vw) scale(0.95, 1);
		}
	}
}

#firstview.l-aniset .fv_bnr--comics {
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .fv_bnr--comics {
	opacity: 1;
	transition-delay: .4s;
}



.catchArea {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4%;
	height: 25.58334vw;
	position: absolute;
	top: 0;
	right: 205px;
	right: 17.8261%;
	margin-top: 160px;
	margin-top: 13.9131%;
	z-index: 3;
}

/*.catchArea:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/circle_catch.png) no-repeat center / contain;
}*/

#firstview.l-aniset .catchArea:before {
	/*  transform: scale(0) rotate(0deg);*/
	opacity: 0;
	transition: transform .6s ease-out, opacity .4s ease;
}

#firstview.l-ani .catchArea:before {
	opacity: 1;
	/*  transform: scale(1) rotate(360deg);*/
	transition-delay: .3s;
}

.catch {
	width: 100%;
	padding-top: 667.3913%;
	background: url(../img/top/fv_catch.svg) no-repeat center / contain;
	position: relative;
	filter: drop-shadow(2px 2px 0px rgba(255, 255, 255, 1)) drop-shadow(-2px 2px 0px rgba(255, 255, 255, 1)) drop-shadow(2px -2px 0px rgba(255, 255, 255, 1)) drop-shadow(-2px -2px 0px rgba(255, 255, 255, 1));
}

@media screen and (max-width: 767px) {
	.catchArea {
		width: min(24.8vw, 186px);
		height: min(24.8vw, 186px);
		right: -6.4%;
		margin-top: 52.8%;
	}

	.catchArea:before {
		content: unset;
	}

	.catch {
		width: 27.4194%;
		width: 42.4732%;
		padding-top: 150%;
		padding-top: 188.1721%;
		background: unset;
		background: url(../img/top/fv_catch_sp.png) no-repeat center / contain;
		filter: unset;
	}
}

#firstview.l-aniset .catchArea {
	transform: translateY(25px);
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .catchArea {
	transform: translateY(0px);
	opacity: 1;
	transition-delay: .4s;
}



.mvw {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.mv_leaf {
	position: absolute;
	top: 0;
	left: 18.1667%;
	margin-top: -2.4348%;
	width: 40.2609%;
	padding-top: 39.1305%;
	z-index: 2;
}

.mv_leaf:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/mv_leaf.webp) no-repeat center / contain;
	z-index: 2;
}

html.no-webp .mv_leaf:before {
	background-image: url(../img/top/mv_leaf.png);
}

.mv_leafIn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/mv_leaf_in.webp) no-repeat center / contain;
	transition: 1.2s ease;
}

html.no-webp .mv_leafIn {
	background-image: url(../img/top/mv_leaf_in.png);
}


#firstview.l-aniset .mv_leafIn {
	opacity: 0;
	transform: scale(0.8);
}

#firstview.l-ani .mv_leafIn {
	transform: scale(1);
	opacity: 1;
}



.mv_characterWrap {
	position: absolute;
	top: 0;
	margin-top: 0;
	left: 25.0435%;
	width: 52.174%;
	padding-top: 54.4348%;
	mask: url(../img/top/mv2_character__mask.png) no-repeat center top / contain;
	-webkit-mask: url(../img/top/mv2_character__mask.png) no-repeat center top / contain;
	z-index: 2;
}

.mv_character {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0;
	padding-top: 0;
	/*  padding-top: 54.4348%;*/
	background: url(../img/top/mv2_character.jpg) no-repeat center top / contain;
	transition: transform .8s ease, opacity .6s ease;
	/*  z-index: 2;*/
}

.mv_frame {
	position: absolute;
	top: 0;
	left: 25.0435%;
	width: 52.174%;
	padding-top: 54.4348%;
	background: url(../img/top/mv2_frame.png) no-repeat center top / contain;
	z-index: 2;
	transition: transform .8s ease, opacity .6s ease;
}


#firstview.l-aniset .mv_character {
	transform: scale(1.08);
	opacity: 0;
}

#firstview.l-ani .mv_character {
	transform: scale(1);
	opacity: 1;
	transition-delay: .4s;
}


.mv_bg {
	position: absolute;
	width: 100%;
	padding-top: 47.8261%;
	top: 0;
	background: url(../img/top/mv_bg.jpg) no-repeat center center / cover;
	-webkit-mask: url(../img/top/mv_bg_mask.svg) no-repeat bottom center / cover;
	mask: url(../img/top/mv_bg_mask.svg) no-repeat bottom center / cover;
}

@media screen and (max-width: 767px) {
	.mv_leaf {
		width: 87.7334%;
		padding-top: 85.0667%;
		margin-top: -2%;
		left: 6%;
	}

	.mv_characterWrap {
		left: 0;
		width: 100%;
		padding-top: 134.1334%;
		mask-image: url(../img/top/mv2_character_sp__mask.png);
		-webkit-mask-image: url(../img/top/mv2_character_sp__mask.png);
	}

	.mv_character {
		background-image: url(../img/top/mv2_character_sp.jpg);
	}

	.mv_frame {
		left: 0;
		width: 100%;
		padding-top: 134.1334%;
		background-image: url(../img/top/mv2_frame_sp.png);
	}

	.mv_bg {
		padding-top: 101.0667%;
		-webkit-mask: url(../img/top/mv_bg_mask_sp.svg) no-repeat bottom center / cover;
		mask: url(../img/top/mv_bg_mask_sp.svg) no-repeat bottom center / cover;
		background-image: url(../img/top/mv2_bg_sp.jpg);
		background-position: center top;
	}
}


#firstview.l-aniset .mv_frame {
	transform: scale(1.04);
	opacity: 0;
}

#firstview.l-ani .mv_frame {
	transform: scale(1);
	opacity: 1;
	transition-delay: .4s;
}




.fvideo {
	width: 27.8261%;
	height: 26.6667vw;
	border-radius: 50%;
	position: absolute;
	top: 0;
	margin-top: -11.8261%;
	left: -10.087%;
	background-color: var(--main-color-red);
}

.fvideo_bgWrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
}

.fvideo_bgInWrap {
	position: absolute;
	width: 200%;
	padding-top: 112.5%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

#fvideo_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fvideo_frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 22.3334vw;
	padding-top: 20.25vw;
	background: url(../img/top/fv_videoFrame.png) no-repeat top center / contain;
	pointer-events: none;
	z-index: 2;
}

.fvideo_icon {
	position: absolute;
	top: 0;
	margin-top: 42px;
	margin-top: 15.6717%;
	left: 52px;
	left: 19.403%;
	width: 48px;
	padding-top: 48px;
	width: 17.9105%;
	padding-top: 17.9105%;
}

#fullWrap.is-portrait .fvideo_icon {
	transform: scale(-1, 1);
}

.fvideo_icon:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/video_icon_frame.png) no-repeat center / contain;
	animation: 3s linear infinite rotate;
}

@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

.fvideo:hover~.fvideo_frame .fvideo_icon:before {
	animation-play-state: paused;
}

.fvideo_icon:after {
	content: '';
	position: absolute;
	width: 20.08334%;
	padding-top: 20.08334%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/video_icon_icon.svg) no-repeat center / contain;
}

#btn_fvideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	z-index: 2;
}

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

	.fvideo_frame {
		display: none;
	}
}


.tfv_nav {
	position: absolute;
	top: 160px;
	bottom: 0;
	right: 0;
	width: min(13.0435%, 150px);
	display: flex;
	align-items: center;
	z-index: 3;
}

#firstview.l-aniset .tfv_nav {
	opacity: 0;
	transition: .6s ease;
}

#firstview.l-ani .tfv_nav {
	opacity: 1;
	transition-delay: .4s;
}

.tfvNavList {
	transform: translateX(20px);
	opacity: 0;
	transition: transform .25s ease-in-out, opacity .25s ease-in-out;
}

.tfvNavList:not(:last-child) {
	margin-bottom: min(1vw, 12px);
}

#fullWrap.is-firstview .tfvNavList {
	opacity: 1;
	transform: translateX(0px);
}

#firstview.is-firstview .tfvNavList:nth-of-type(1) {
	transition-delay: .5s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(2) {
	transition-delay: .6s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(3) {
	transition-delay: .7s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(4) {
	transition-delay: .8s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(5) {
	transition-delay: .9s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(6) {
	transition-delay: 1s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(7) {
	transition-delay: 1.1s;
}

#firstview.is-firstview .tfvNavList:nth-of-type(8) {
	transition-delay: 1.2s;
}


.tfvNavList a {
	font-size: min(1.3334vw, 16px);
	font-weight: 700;
	font-family: var(--font-family-eng);
	color: var(--main-color-red);
	text-decoration: none;
	letter-spacing: -0.025em;
	line-height: 1;
	display: inline-block;
	position: relative;
	padding-bottom: 6px;
}

.tfvNavList a:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--main-color-red);
	margin: 0 auto;
	transition: .4s ease;
}

.tfvNavList a.is-active:after,
.tfvNavList a:hover::after {
	width: 100%;
}


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

/** ASPECTRATIO > 1.5 **/
#fullWrap.is-vh .logo {
	padding-top: 98px;
	margin-top: 20px;

	padding-top: max(15.3125vh, 98px);
	margin-top: max(3.125vh, 20px);
}

#fullWrap.is-vh .onair_date {
	padding-top: max(32.3438vh, 207px);
	margin-top: max(58.125vh, 372px);
}

#fullWrap.is-vh .fv_bnr--comics {
	padding-top: 139px;
	margin-top: 223px;

	padding-top: max(21.7188vh, 139px);
	margin-top: max(34.8438vh, 223px);
}

#fullWrap.is-vh .catchArea {
	height: max(26.5625vh, 170px);
	margin-top: max(30.9375vh, 198px);
}

#fullWrap.is-vh .catch {
	padding-top: max(39.2188vh, 251px);
}

#fullWrap.is-vh .mv_leaf {
	margin-top: min(4.375vh, -28px);
	padding-top: max(70.3125vh, 450px);
}

#fullWrap.is-vh .mv_characterWrap,
#fullWrap.is-vh .mv_frame {
	padding-top: max(97.8125vh, 626px);
}

#fullWrap.is-vh .mv_character {
	position: absolute;
	top: 0;
}

#fullWrap.is-vh .mv_bg {
	padding-top: max(85.9375vh, 550px);
}

#fullWrap.is-vh .fvideo {
	width: max(50vh, 320px);
	height: max(50vh, 320px);
	margin-top: min(-21.25vh, -136px);
	left: min(-18.125vh, -116px);
}

#fullWrap.is-vh .fvideo_frame {
	width: max(41.875vh, 268px);
	padding-top: max(37.9689vw, 243px);
}

/** ASPECTRATIO < 1 **/
@media screen and (min-width: 768px) {
	#fullWrap.is-portrait #firstview {
		height: 0;
		min-height: unset;
		padding-top: 134.1334%;
		overflow: hidden;
	}

	#fullWrap.is-portrait .logo {
		width: 90%;
		padding-top: 23.6%;
		margin-top: 0;
		right: 0;
		left: 0;
		margin: 21.6% auto 0;
		background-image: url(../img/common/logo_filter_sp.png);
	}

	#fullWrap.is-portrait .onair_date {
		width: 27.4667%;
		padding-top: 27.4667%;
		margin-top: 77.3334%;
		left: -0.5334%;
		background-image: url(../img/top/onair_date.png);
	}

	#fullWrap.is-portrait .fv_bnr--comics {
		width: 17.0667%;
		padding-top: 20.1334%;
		margin-top: 0.5534%;
		left: -1.0667%;
	}

	#fullWrap.is-portrait .fv_bnr--comics a {
		background-image: url(../img/top/bnr_comics_sp.png);
	}

	#fullWrap.is-portrait .catchArea {
		width: 24.8vw;
		height: 24.8vw;
		right: -6.4%;
		margin-top: 52.8%;
	}

	#fullWrap.is-portrait .catchArea:before {
		content: unset;
	}

	#fullWrap.is-portrait .catch {
		width: 42.4732%;
		padding-top: 188.1721%;
		background: url(../img/top/fv_catch_sp.png) no-repeat center / contain;
		filter: unset;
	}

	#fullWrap.is-portrait .mv_leaf {
		width: 87.7334%;
		padding-top: 85.0667%;
		margin-top: -2%;
		left: 6%;
	}

	#fullWrap.is-portrait .mv_characterWrap {
		left: 0;
		width: 100%;
		padding-top: 134.1334%;
		mask-image: url(../img/top/mv2_character_sp__mask.png);
		-webkit-mask-image: url(../img/top/mv2_character_sp__mask.png);
	}

	#fullWrap.is-portrait .mv_character {
		background-image: url(../img/top/mv2_character_sp.jpg);
	}

	#fullWrap.is-portrait .mv_frame {
		left: 0;
		width: 100%;
		padding-top: 134.1334%;
		background-image: url(../img/top/mv2_frame_sp.png);
	}

	#fullWrap.is-portrait .mv_bg {
		padding-top: 101.0667%;
		-webkit-mask: url(../img/top/mv_bg_mask_sp.svg) no-repeat bottom center / cover;
		mask: url(../img/top/mv_bg_mask_sp.svg) no-repeat bottom center / cover;
	}

	#fullWrap.is-portrait .fvideo {
		left: unset;
		right: -10.087%;
	}

	#fullWrap.is-portrait .fvideo_frame {
		left: unset;
		right: 0;
		transform: scale(-1, 1);
	}

	#fullWrap.is-portrait .tfv_nav {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	#fullWrap.is-firstview .header__navBtn {
		pointer-events: none;
	}
}

/********************
** titleSlide
********************/
.titleSlide {
	padding: 0 24px;
}

@media screen and (max-width: 767px) {
	.titleSlideswrap {
		width: 0;
		height: 0;
		overflow: hidden;
	}
}

/********************
** ContentsCommon
********************/
@media screen and (max-width: 767px) {
	.contents {
		padding-top: 4.6667%;
	}
}



/***
** NEWS
***/
#tNews {
	padding-bottom: 11.3044%;
	text-shadow: 0px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%);
}

#tNews .contIn {
	/*max-width: 1150px;*/
	width: 100%;
	padding: 0 20px;
	padding: 0 1.7392%;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	#tNews {
		width: 100%;
		padding: 4.6667% 5.3334% 0;
	}

	#tNews .contIn {
		max-width: 100%;
		padding: 6.9334% 0 0;
	}

	.swipertNewsListsWrap {
		width: 100%;
		padding: 0 14.9254%;
		position: relative;
	}
}


.newsLists {
	display: flex;
	padding-top: 48px;
}

.newsList {
	width: calc(100% / 3);
	padding: 0 2.7028%;
	height: unset;
}

.newsList__link {
	display: block;
	height: 100%;
	padding: 3.4482%;
	text-decoration: none;
}

.newsList__link:before {
	content: '';
	width: 90px;
	padding-top: 102px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/accent_clover.png) no-repeat center / contain;
	opacity: 40%;
}

.newsList__date {
	width: 100%;
	display: block;
	padding-bottom: 25px;
	position: relative;
	line-height: 1;
	z-index: 2;
}

.newsList__date:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13px;
	background: url(../img/common/icon_accent-y.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-y.png) no-repeat bottom right / 12px 13px;
}

.newsList__date:after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 1px;
	background-color: var(--main-color-light-yellow);
}

.newsList__date time {
	display: inline-block;
	font-family: var(--font-family-eng);
	font-weight: 700;
	line-height: 1;
	padding-right: 40px;
	position: relative;
	color: var(--main-color-red);
}

.newsList__date time:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	width: 21px;
	height: 5px;
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	transition: .4s ease;
}

.newsList__link:hover .newsList__date time:after {
	transform: translateX(5px);
}

.newsList__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 2;
	color: var(--main-color-red);
	padding-top: 8px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	position: relative;
	z-index: 2;
}

.newsList__title span {
	background: linear-gradient(var(--main-color-red), var(--main-color-red)) right bottom / 0 1px no-repeat;
	transition: background-size .8s ease-in-out;
}

.newsList__link:hover .newsList__title span {
	background-position: left bottom;
	background-size: 100% 1px;
}

@media screen and (max-width: 767px) {
	.newsLists {
		padding-top: 0;
	}

	.newsList {
		width: 100%;
		padding: 0;
	}

	.newsList__link {
		padding: 5.3192%;
	}

	.newsList__link:before {
		width: 30.2381%;
		padding-top: 34.0477%;
	}

	.newsList__date {
		padding-bottom: var(--sp-size-30);
		font-size: var(--sp-size-24);
	}

	.newsList__date:before {
		height: min(2.08vw, 15.6px);
		background-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
		z-index: 2;
	}

	.newsList__date:after {
		left: 4px;
		right: 4px;
		bottom: min(0.96vw, 7.2px);
	}

	.newsList__date time {
		padding-right: var(--sp-size-40);
	}

	.newsList__date time:after {
		width: min(2.8vw, 21px);
		height: min(6.6667vw, 5px);
	}

	.newsList__title {
		font-size: var(--sp-size-24);
	}

	.swipertNews_arrowWrap {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		pointer-events: none;
	}

	.swipertNews_arrow-next,
	.swipertNews_arrow-prev {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: min(2.8vw, 21px);
		height: min(2.8vw, 21px);
	}

	.swipertNews_arrow-next {
		right: 0;
	}

	.swipertNews_arrow-prev {
		left: 0;
		transform: scale(-1, 1);
	}

	.swipertNews_arrow {
		display: block;
		width: 100%;
		height: 100%;
		background: url(../img/common/arrow_r.svg) no-repeat center / contain;
		transition: .4s ease;
	}

	.swipertNews_arrow:hover {
		transform: translateX(5px);
	}
}

.newsMore {
	text-align: center;
	padding-top: 52px;
}

.newsMore a {
	display: inline-block;
	padding-bottom: 12px;
	line-height: 1;
	position: relative;
}

.newsMore a:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 21px;
	height: 5px;
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	transition: .4s ease;
}

.newsMore a:hover::after {
	transform: translateX(5px);
}

.newsMore a span {
	display: inline-block;
	padding: 0 17px 17px;
	position: relative;
	font-size: 16px;
	line-height: 1;
	font-family: var(--font-family-eng);
	color: var(--main-color-red);
}

.newsMore a span:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13px;
	background: url(../img/common/icon_accent-r.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-r.png) no-repeat bottom right / 12px 13px;
}

.newsMore a span:after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 1px;
	background-color: var(--main-color-red);
}

@media screen and (max-width: 767px) {
	.newsMore {
		padding-top: 5.9702%;
	}

	.newsMore a {
		display: inline-block;
		padding-bottom: var(--sp-size-12);
	}

	.newsMore a:after {
		width: min(2.8vw, 21px);
		height: min(6.6667vw, 5px);
	}

	.newsMore a span {
		font-size: var(--sp-size-24);
		padding: 0 var(--sp-size-36) var(--sp-size-30);
	}

	.newsMore a span:before {
		height: min(2.08vw, 15.6px);
		background-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
		z-index: 2;
	}

	.newsMore a span:after {
		left: 4px;
		right: 4px;
		bottom: min(0.96vw, 7.2px);
	}
}

#tNews #circle_a .circle-a_1 {
	top: 0;
	margin-top: 10px;
	left: 3.4783%;
}

#tNews #circle_a .circle-a_2 {
	bottom: 0;
	margin-bottom: 8.3479%;
	left: 22.6087%;
}

#tNews #circle_a .circle-a_3 {
	bottom: 0;
	left: 81.1305%;
}

@media screen and (max-width: 767px) {
	#tNews #circle_a .circle-a_1 {
		top: 0;
		margin-top: 0;
		left: 2.1334%;
	}

	#tNews #circle_a .circle-a_2 {
		margin-bottom: -3.2%;
		left: 74.9334%;
	}

	#tNews #circle_a .circle-a_3 {
		bottom: unset;
		top: 0;
		left: 78.6667%;
		margin-top: 1.6%;
	}
}

/* tNews Animation */
#tNews .cont_h2 {
	transform: translateY(-25px);
	transition: .3s cubic-bezier(.55, .47, .64, .92);
}

#tNews .contIn {
	transform: translateY(50px);
	opacity: 0;
	transition: .4s ease;
}

#tNews .newsMore {
	transform: translateY(25px);
	opacity: 0;
	transition: .3s ease-in;
}

#tNews.is-ani .cont_h2 {
	transform: translateY(0%);
}

#tNews.is-ani .contIn {
	transform: translateX(0%);
	opacity: 1;
}

#tNews.is-ani .newsMore {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: .3s;
}



/***
** INTRODUCTION
***/
#introduction {
	position: relative;
	width: 100%;
	padding-top: 0;
	padding-bottom: 6.4348%;
	z-index: 3;
}

.introContentWrap {
	width: 100%;
	padding-top: 75.4783%;
	position: relative;
}

.introContentWrap:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/top/intro_bg.webp) no-repeat center center / cover;
	-webkit-mask: url(../img/top/intro_bg_mask.svg) no-repeat bottom center / cover;
	mask: url(../img/top/intro_bg_mask.svg) no-repeat bottom center / cover;
	background-attachment: fixed;
}

html.no-webp .introContentWrap:before {
	background-image: url(../img/top/intro_bg.jpg);
}

body.is-ipadOS .introContentWrap:before {
	background-attachment: unset;
}

.introContent {
	width: 87.25vw;
	height: 84.5vw;
	position: absolute;
	top: calc(50% - 42.25vw);
	right: 0;
	left: 0;
	margin: auto;
	background: url(../img/top/introduction_bg.webp) no-repeat center / contain;
	z-index: 2;
}

html.no-webp .introContent {
	background-image: url(../img/top/introduction_bg.png);
}

.introContentIn {
	width: 43.9351%;
	margin: 33.0784% auto 0;
}

.introContentIn .cont_h2 {
	color: #fff;
	font-size: 3vw;
}

.introContentIn .cont_h2 span:before {
	background-image: unset;
	background-color: #fff;
	-webkit-mask: url(../img/common/icon_accent-r.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-r.png) no-repeat bottom right / 12px 13px;
	mask: url(../img/common/icon_accent-r.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-r.png) no-repeat bottom right / 12px 13px;
}

.introContentIn .cont_h2 span:after {
	background-color: #fff;
}

.introTxtWrap {
	padding-top: 36px;
	padding-top: 7.8261%;
}

.introTxt {
	font-size: 16px;
	font-size: 1.3334vw;
	line-height: 1;
	color: #FFF;
}

.introTxt span {
	display: block;
	padding: 12px 0;
	padding: 2.6087% 0;
	border-bottom: 1px solid #fff;
	letter-spacing: -0.03em;
}

.intro_logo {
	width: 62.174%;
	margin: 10.4348% auto 0;
}

.intro_logo img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	#introduction {
		width: 100%;
		padding-top: 6.4%;
	}

	.introContentWrap:before {
		content: unset;
	}

	.introContentWrap {
		padding-top: 140.9334%;
	}

	.introContent {
		width: 145.3334%;
		left: -23.4667%;
		top: 0;
		height: 100%;
	}

	.introContentIn {
		width: 55.0459%;
		margin-top: 27.523%;
	}

	.introContentIn .cont_h2 {
		font-size: var(--sp-size-40);
	}

	.introContentIn .cont_h2 span:before {
		-webkit-mask-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
		mask-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
	}

	.introTxtWrap {
		padding-top: 2.9358%;
	}

	.introTxt {
		font-size: min(2.93334vw, 22px);
	}

	.introTxt span {
		padding: var(--sp-size-20) 0 var(--sp-size-12);
		letter-spacing: -0.07em;
		white-space: nowrap;
	}

	.intro_logo {
		width: 51.6129%;
		margin-top: 9.6775%;
	}
}

/* INTRO ANI */
.introContent {
	transform: translateY(-10%) scale(0.95);
	transition: 0.6s ease;
}

#introduction .cont_h2 {
	opacity: 0;
	transition: .3s ease-out;
}

.introTxt span {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity .5s ease-out, transform .5s ease-out;
}

.intro_logo {
	transform: scale(0.95);
	opacity: 0;
	transition: .3s ease-out;
}

#introduction.is-ani .introContent {
	transform: rotate(0deg) scale(1);
}

#introduction.is-ani .cont_h2 {
	opacity: 1;
	transition-delay: 0.8s;
}

#introduction.is-ani .introTxt span {
	opacity: 1;
	transform: scale(1);
}

#introduction.is-ani .introTxt span:nth-of-type(1) {
	transition-delay: 1.0s;
}

#introduction.is-ani .introTxt span:nth-of-type(2) {
	transition-delay: 1.2s;
}

#introduction.is-ani .introTxt span:nth-of-type(3) {
	transition-delay: 1.4s;
}

#introduction.is-ani .introTxt span:nth-of-type(4) {
	transition-delay: 1.6s;
}

#introduction.is-ani .introTxt span:nth-of-type(5) {
	transition-delay: 1.8s;
}

#introduction.is-ani .intro_logo {
	transform: scale(1);
	opacity: 1;
	transition-delay: 2.0s;
}


/***
** STAFF CAST
***/
#staffcast {
	padding-top: min(7.3334vw, 88px);
	margin-top: max(-7.3334vw, -88px);
	padding-bottom: 94px;
	text-shadow: 0px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%);
}

#staffcast .cont_h2 {
	text-align: left;
}

.staffcastWrap {
	display: flex;
	justify-content: space-between;
	padding: 40px 5.2174% 0;
	/*max-width: 1200px;
	margin: 0 auto;*/
}

#staff {
	/*width: 61.1651%;*/
	width: 57.4758%; /* 592px */
	flex-shrink: 0;
}

.staffcastLists {
	padding-top: 32px;
	padding-left: 16px;
}

.staffcastList {
	padding: 16px;
}

.staffcastList.--mb {
	margin-bottom: 40px;
}

#staff .staffcastLists {
	display: flex;
	flex-wrap: wrap;
}

#staff .staffcastList {
	width: calc(100% / 3);
}

#staff .staffcastList.w100 {
	width: 100%;
}

#staff .staffcastList.w32 {
	width: calc(100% / 3 * 2);
}

@media screen and (max-width: 1195px) {
	#staff .staffcastList {
		width: 50%;
	}

	#staff .staffcastList.w32 {
		width: 100%;
	}
}

.staffcastList dt {
	font-size: 14px;
	line-height: 1;
	margin-bottom: 12px;
}

.staffcastList dd {
	font-size: 24px;
	line-height: 1;
	color: var(--main-color-red);
	font-weight: 700;
	letter-spacing: 0.025em;
}

.staffcastList dd .pr {
	padding-right: 16px;
}

.staffcastList dd .SC_caution {
	display: inline-block;
	padding-top: 8px;
	line-height: 1.4;
	font-size: 50%;
}

#cast {
	/*width: 29.1263%;*/
	width: 38.835%; /* 400px */
	flex-shrink: 0;
}

#cast .cont_h2 {
	color: var(--main-color-light-yellow);
}

#cast .cont_h2 span:before {
	background: url(../img/common/icon_accent-y.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-y.png) no-repeat bottom right / 12px 13px;
}

#cast .cont_h2 span:after {
	background-color: var(--main-color-light-yellow);
}

.castListsWrap{
	display: flex;
	flex-wrap: wrap;
}

#cast .staffcastLists:nth-of-type(2) .staffcastList{
	padding-right: 0;
}

#cast .staffcastList dd {
	color: var(--main-color-light-yellow);
}


@media screen and (max-width: 767px) {
	#staffcast {
		padding-top: 16%;
		margin-top: -16%;
	}

	#staffcast .cont_h2 {
		text-align: center;
	}

	.staffcastWrap {
		display: block;
		padding: 0 3.3334%;
	}

	.staffcastLists {
		padding-top: 2.1429%;
		padding-left: 0;
	}

	.staffcastList {
		padding: 2.1429%;
	}

	.staffcastList.--mb {
		margin-bottom: 4.2858%;
	}

	.staffcastList dt {
		font-size: min(2.1334vw, 16px);
		margin-bottom: var(--sp-size-12);
	}

	.staffcastList dd {
		font-size: var(--sp-size-24);
	}

	.staffcastList dd .pr {
		padding-right: var(--sp-size-20);
	}

	.staffcastList dd .SC_caution {
		display: inline-block;
		padding-top: 8px;
		line-height: 1.4;
		font-size: 50%;
	}

	#staff {
		width: 100%;
	}

	#staff .staffcastList {
		width: calc(100% / 3);
	}

	#staff .staffcastList.w32 {
		width: calc(100% / 3 * 2);
	}

	.staffcastList.nw dt {
		white-space: nowrap;
	}

	#cast {
		width: 100%;
		padding-top: 8%;
	}

	#cast .cont_h2 span:before {
		background-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
	}

	#cast .staffcastLists {
		width: 50%;
	}
	#cast .staffcastLists:nth-of-type(1) .staffcastList {
		padding-left: 34.2858%;
	}
	#cast .staffcastLists:nth-of-type(2) .staffcastList {
		padding-left: 17.1429%;
	}
}

@media screen and (max-width: 360px) {
	.staffcastList.nw dt {
		white-space: normal;
	}
}


.sc_cmt {
	padding-right: 36px;
	position: relative;
	display: inline-block;
}

.staffcastList dd .sc_cmt.pr {
	padding-right: 52px;
}

.btn_comment {
	width: 24px;
	padding-top: 24px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	-webkit-mask: url(../img/top/comment_icon.svg) no-repeat center/ contain;
	mask: url(../img/top/comment_icon.svg) no-repeat center/ contain;
	background-color: var(--main-color-red);
	display: inline-block;
	margin: auto;
}

#cast .btn_comment {
	background-color: var(--main-color-light-yellow);
}

.sc_cmt.pr .btn_comment {
	right: 16px;
}

.comImg {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.comImg img {
	max-width: 100%
}

.coTxt {
	max-width: 80%;
	padding: 48px;
	background-color: #fff;
	margin: 0 auto;
}

.comment_name {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	padding-bottom: 40px;
}

.comment_name span {
	font-size: 32px;
	display: inline-block;
	margin-top: 10px;
	font-weight: 700;
}

.comment_txt {
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}

.coStaff .comment_name span {
	color: var(--main-color-red);
}

.coCast .comment_name span {
	color: var(--main-color-light-yellow);
}

@media screen and (max-width: 767px) {
	.sc_cmt {
		padding-right: var(--sp-size-36);
	}

	.staffcastList dd .sc_cmt.pr {
		padding-right: min(6.9334vw, 52px);
	}

	.btn_comment {
		width: var(--sp-size-24);
		padding-top: var(--sp-size-24);
	}
	.sc_cmt.pr .btn_comment{
		right: min(2.1334vw, 16px);
	}

	.comImg {
		width: 100%;
	}

	.coTxt {
		max-width: 100%;
		padding: var(--sp-size-48);
	}

	.comment_name {
		font-size: var(--sp-size-26);
		padding-bottom: var(--sp-size-40);
	}

	.comment_name span {
		font-size: var(--sp-size-32);
		margin-top: var(--sp-size-12);
	}

	.comment_txt {
		font-size: var(--sp-size-24);
	}
}




#staffcast #circle_b .circle-b_1 {
	top: 0;
	left: 3.4783%;
}

#staffcast #circle_b .circle-b_2 {
	bottom: 0;
	margin-bottom: 44px;
	left: 56%;
}

#staffcast #circle_b .circle-b_3 {
	bottom: 0;
	margin-bottom: 180px;
	left: 89.7392%;
}

@media screen and (max-width: 767px) {
	#staffcast #circle_b .circle-b_1 {
		width: min(16vw, 120px);
		height: min(16vw, 120px);
		top: 0;
		margin-top: 0;
		left: 4.8%;
	}

	#staffcast #circle_b .circle-b_2 {
		width: min(28.5334vw, 214px);
		height: min(28.5334vw, 214px);
		margin-bottom: 5.3334%;
		bottom: 0;
		left: 74.6667%;
	}

	#staffcast #circle_b .circle-b_3 {
		width: min(9.6vw, 72px);
		height: min(9.6vw, 72px);
		margin-bottom: unset;
		top: 0;
		margin-top: 12.8%;
		bottom: unset;
		left: 82.6667%;
	}
}

/* staffcast Animation */
#staff {
	transform: translateX(-100px);
	opacity: 0;
	transition: .5s cubic-bezier(.55, .47, .64, .92);
}

#cast {
	transform: translateX(100px);
	opacity: 0;
	transition: .5s cubic-bezier(.58, .43, .18, .73);
}

#staff.is-ani {
	transform: translateX(0);
	opacity: 1;
}

#cast.is-ani {
	transform: translateX(0);
	opacity: 1;
}




/***
** Character
***/
#character {
	padding: 124px 0 52px;
	position: relative;
	overflow: hidden;
}

#character:before,
#character:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 68px;
	background-image: url(../img/top/lace.png);
	background-repeat: repeat-x;
	z-index: 3;
}

#character:before {
	top: 0;
	left: 0;
	background-position: top center;
}

#character:after {
	bottom: 0;
	left: 0;
	background-position: top center;
	transform: rotate(180deg);
}

#character .cont_h2 {
	position: relative;
	z-index: 3;
}

@media screen and (max-width: 960px) {
	#character {
		display: flex;
		flex-direction: column;
	}
}

@media screen and (max-width: 767px) {
	#character {
		padding: 19.7334% 0 14.6667%;
	}

	#character:before,
	#character:after {
		height: min(9.2vw, 69px);
		background-size: contain;
	}

	#character .cont_h2 {
		order: 1;
	}
}


.characterListsWrap {
	width: 100%;
	margin-top: -44px;
	position: relative;
}

.characterLists {
	width: 100%;
	padding-top: 52.8696%;
}

.characterList {
	width: 100%;
	height: 100%;
	/*  padding: 0 72px;*/
	padding: 0 17.3914% 0 15.4783%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
}

.characterListIn {
	width: 93.2643%;
	display: flex;
	position: relative;
	margin: 0 auto;
}

@media screen and (max-width: 1200px) {
	.characterLists {
		padding-top: 608px;
	}

	.characterList {
		width: 100%;
		padding: 0 226px 0 0;
	}

	.characterListIn {
		width: 720px;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 960px) {
	.characterListsWrap {
		order: 3;
		margin-top: 0;
	}

	.characterList {
		width: 100%;
		padding: 0;
	}

	.characterListIn {
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.characterListsWrap {
		margin-top: 0;
	}

	.characterListIn {
		width: 100%;
	}

	.characterLists {
		padding-top: 708px;
		padding-top: 94.4%;
	}
}

.charaDetailWrap {
	width: 445px;
	width: max(37.0834vw, 445px);
	height: max(37.0834vw, 445px);
	border-radius: 50%;
	background: url(../img/top/character_text_bg.png) repeat top center / contain;
	position: relative;
	z-index: 2;
	margin-top: 8.6112%;
	padding-bottom: 11.1112%;
}

.characterList.is-active .charaDetailWrap {
	opacity: 1;
}

.charaDetail {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.charaNameWrap {
	width: 100%;
	text-align: center;
	padding-bottom: 24px;
	color: #FFF;
}

.charaName {
	display: inline-block;
	font-size: 24px;
	font-size: max(2vw, 24px);
	line-height: 1;
	padding: 0 32px 24px;
	position: relative;
	font-weight: 700;
}

.charaName:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13px;
	background: url(../img/top/character_accent_name.png) no-repeat bottom left / 12px 13px, url(../img/top/character_accent_name.png) no-repeat bottom right / 12px 13px;
}

.charaName:after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 1px;
	background-color: #FFF;
}

.charaCV {
	font-size: 18px;
	font-size: max(1.5vw, 18px);
	padding-top: 8px;
	font-weight: 700;
	line-height: 1;
}

.charaTxt {
	font-size: 14px;
	font-size: max(1.1667vw, 14px);
	line-height: 2;
	color: #FFF;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media screen and (max-width: 960px) {
	.charaDetailWrap {
		margin-top: 32px;
	}
}

@media screen and (max-width: 767px) {
	.charaDetailWrap {
		width: min(76.4vw, 573px);
		height: min(76.4vw, 573px);
		padding-bottom: 0;
	}

	.charaDetail {
		padding-bottom: 18.1501%;
	}

	.charaNameWrap {
		padding-bottom: var(--sp-size-24);
	}

	.charaName {
		font-size: var(--sp-size-36);
		padding: 0 var(--sp-size-36) var(--sp-size-30);
	}

	.charaName:before {
		height: min(2.08vw, 15.6px);
		background-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
		z-index: 2;
	}

	.charaName:after {
		left: 4px;
		right: 4px;
		bottom: min(0.8vw, 6px);
	}

	.charaCV {
		font-size: var(--sp-size-24);
	}

	.charaTxt {
		font-size: var(--sp-size-20);
	}
}


.charaFaceListsWrap {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-top: 35.9556%;
	margin-bottom: -17.9776%;
	opacity: 0;
	transform: scale(0.9);
	transition: transform .1s ease;
}

#character.is-ani .characterList.is-active .charaFaceListsWrap {
	transform: scale(1);
	transition: opacity .3s ease, transform .4s ease;
	transition-delay: .55s;
	opacity: 1;
}

.charaFaceLists {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
}

.charaFaceList {
	width: 35.9556%;
	height: 100%;
	margin: 0 20px;
}

.charaFaceList img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.charaFaceListsWrap {
		padding-top: 33.5079%;
		margin-bottom: -16.754%;
	}

	.charaFaceList {
		width: 33.5079%;
		margin: 0 1.3089%;
	}
}



.charaImage {
	min-width: 340px;
	width: 47.2223%;
	position: absolute;
	top: 0;
	z-index: 4;
	transition: transform .5s cubic-bezier(.17, .92, .66, 1.02), opacity .3s ease;
}

.charaImage img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.charaImage {
		width: min(58.8%, 396px);
		height: 100%;
	}

	.charaImage img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}


/** characterList:odd  **/
.characterList .charaDetailWrap {
	margin-left: auto;
}

.characterList .charaDetail .charaTxt {
	padding: 0 40px 0 60px;
	padding: 0 8.9888% 0 13.4832%;
}

.characterList .charaImage {
	right: 50.6667%;
}

@media screen and (max-width: 900px) {
	.characterList .charaImage {
		right: 380px;
	}
}

@media screen and (max-width: 767px) {
	.characterList .charaImage {
		right: 47.2%;
	}

	.characterList .charaDetailWrap {
		margin-right: -76px;
		margin-right: -10.1334%;
	}

	.characterList .charaDetail .charaTxt {
		padding: 0 110px;
		padding: 0 15.3578% 0 13.9617%;
	}

	.characterList .charaImage img {
		object-position: right center;
	}
}


/** characterList:even  **/
.characterList:nth-child(2n) .characterListIn {
	margin-left: auto;
}

.characterList:nth-child(2n) .charaDetailWrap {
	margin-left: unset;
	margin-right: auto;
}

.characterList:nth-child(2n) .charaDetail .charaTxt {
	padding: 0 60px 0 40px;
	padding: 0 13.4832% 0 8.9888%;
}

.characterList:nth-child(2n) .charaImage {
	right: unset;
	left: 50.6667%;
}

@media screen and (max-width: 900px) {
	.characterList:nth-child(2n) .charaImage {
		left: 380px;
	}
}

@media screen and (max-width: 767px) {
	.characterList:nth-child(2n) .charaImage {
		left: 47.2%;
	}

	.characterList:nth-child(2n) .charaDetailWrap {
		margin-left: -76px;
		margin-left: -10.1334%;
	}

	.characterList:nth-child(2n) .charaDetail .charaTxt {
		padding: 0 110px;
		padding: 0 15.7068% 0 19.1972%;
	}

	.characterList:nth-child(2n) .charaImage img {
		object-position: left center;
	}
}

/*** Chara Selected Animation ***/
.characterList {
	opacity: 0;
	transition: .3s ease;
	transition-delay: .4s;
}

.characterList {
	opacity: 1;
	transition-delay: 0s;
}

.characterList .charaDetailWrap {
	transform: scale(0) rotate(0deg);
	opacity: 0;
	transition-delay: .5s;
	transition: transform .6s ease-out, opacity .4s ease;
}

#character.is-ani .characterList.is-active .charaDetailWrap {
	transform: scale(1) rotate(360deg);
}

.characterList .charaDetailIn {
	opacity: 0;
	transform: scale(0.8);
	transition-delay: 0s;
	transition: .3s ease;
}

#character.is-ani .characterList.is-active .charaDetailIn {
	transform: scale(1);
	opacity: 1;
	transition-delay: .55s;
}


.characterList .charaImage {
	transition: transform .5s cubic-bezier(.17, .92, .66, 1.02), opacity .3s ease;
	opacity: 0;
}

.characterList .charaImage {
	transform: translateX(100px);
}

.characterList:nth-child(2n) .charaImage {
	transform: translateX(-100px);
}

#character.is-ani .characterList.is-active .charaImage {
	opacity: 1;
	transform: translateX(0);
	transition-delay: .3s;
}



/** Chara Thumb **/
.characterThumbWrap {
	position: absolute;
	top: 100px;
	right: 4.7059%;
	width: max(13.8334vw, 166px);
	z-index: 3;
	margin: 0 auto;
}

.characterThumbLists {
	display: flex;
	flex-direction: column;
}

.characterThumbList {
	width: max(8.6667vw, 104px);
	height: max(8.6667vw, 104px);
	position: relative;
	z-index: 3;
	opacity: 1;
	background: unset;
}

.characterThumbList:not(:first-child) {
	margin-top: min(-3.5vw, -42px);
}

.characterThumbList:nth-child(2n) {
	margin-left: max(5.1667vw, 62px);
}

.characterThumb {
	width: 100%;
	height: 100%;
	-webkit-mask: url(../img/top/character_thumb_mask.png) no-repeat center / contain;
	mask: url(../img/top/character_thumb_mask.png) no-repeat center / contain;
	background-color: #fff;
	transition: .3s ease;
}

.characterThumb.is-current {
	background-color: var(--main-color-red);
}

.characterThumb__img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	-webkit-mask: url(../img/top/character_thumb_mask.png) no-repeat center / contain;
	mask: url(../img/top/character_thumb_mask.png) no-repeat center / contain;
}

.characterThumb__img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: .3s ease;
}

.characterThumb:hover .characterThumb__img img,
.characterThumb.is-current .characterThumb__img img {
	transform: scale(1.15);
}


@media screen and (max-width: 960px) {
	.characterThumbWrap {
		order: 2;
		width: 100%;
		position: relative;
		top: unset;
		right: unset;
		margin-top: 24px;
		z-index: 4;
	}

	.characterThumbLists {
		width: 100%;
		position: relative;
		top: unset;
		right: unset;
		height: auto;
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.characterThumbList {
		position: relative;
	}

	.characterThumbList:not(:first-child) {
		margin-top: 0;
		margin-left: -42px;
	}

	.characterThumbList:nth-child(2n) {
		margin-top: 62px;
		margin-left: -42px;
	}
}




@media screen and (max-width: 767px) {
	.characterThumbLists {
		margin-top: 3.2%;
	}

	.characterThumbList {
		width: min(17.6vw, 132px);
		height: min(19.2vw, 144px);
	}

	.characterThumbList:not(:first-child) {
		margin-top: 0;
		margin-left: max(-6.1334vw, -46px);
	}

	.characterThumbList:nth-child(2n) {
		margin-top: min(12.5334vw, 94px);
		margin-left: max(-6.1334vw, -46px);
	}
}



.characterBG {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--main-color-light-brown);
	overflow: hidden;
}

.characterBG_accent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/common/accent_division.png) repeat;
}

.characterBG_color {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 36.9566%;
	clip-path: polygon(0 0, 100% 0%, 24.4706% 100%, 0% 100%);
	mix-blend-mode: color;
	background-color: var(--main-color-red);
}

.p-characterBG_flower_t {
	position: absolute;
	top: 0;
	left: 0;
	width: 258px;
	padding-top: 384px;
	/*  width: 22.4348%;
	padding-top: 33.3913%;*/
	background: url(../img/top/characterBG_flower_t-p.png) no-repeat left top / contain;
}

.p-characterBG_flower_b {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 203px;
	padding-top: 367px;
	/*  width: 17.6522%;
	padding-top: 31.9131%;*/
	background: url(../img/top/characterBG_flower_b-p.png) no-repeat right bottom / contain;
}

@media screen and (max-width: 767px) {
	.p-characterBG_flower_t {
		width: 100%;
		padding-top: 111.4667%;
		background: url(../img/top/characterBG_flower_t-s.png) no-repeat left top / contain;
		mix-blend-mode: soft-light;
	}

	.p-characterBG_flower_b {
		width: 25.8667%;
		padding-top: 37.3334%;
		background: url(../img/top/characterBG_flower_b-s.png) no-repeat right top / contain;
		bottom: unset;
		top: 0;
	}
}


/** character Scroll Animation **/
#character .cont_h2 {
	transform: translateY(-25px);
	transition: .3s cubic-bezier(.55, .47, .64, .92);
}

#character.is-ani .cont_h2 {
	transform: translateY(0px);
}

#character .characterThumbWrap {
	opacity: 0;
	transition: .4s cubic-bezier(.55, .47, .64, .92);
}

#character.is-ani .characterThumbWrap {
	opacity: 1;
}

.p-characterBG_flower_t {
	opacity: 0;
	transform: translate(-50px, -50px);
	transition: .4s cubic-bezier(.55, .47, .64, .92);
}

.p-characterBG_flower_b {
	opacity: 0;
	transform: translate(50px, 50px);
	transition: .4s cubic-bezier(.55, .47, .64, .92);
}


#character.is-ani .p-characterBG_flower_t,
#character.is-ani .p-characterBG_flower_b {
	opacity: 1;
	transform: translate(0, 0);
}

/** Chara Other Modal **/
.charaOterContent {
	width: 800px;
	margin: 48px auto;
}

.charaOther_charaName_h2 {
	color: var(--main-color-red);
	text-align: center;
	padding-bottom: 24px;
}

.charaOther_charaName {
	display: inline-block;
	padding: 0 32px 24px;
	position: relative;
	line-height: 1;
	font-size: 24px;
	font-weight: 700;
}

.charaOther_charaName:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13px;
	background: url(../img/common/icon_accent-r.png) no-repeat bottom left / 12px 13px, url(../img/common/icon_accent-r.png) no-repeat bottom right / 12px 13px;
}

.charaOther_charaName:after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 1px;
	background-color: var(--main-color-red);
}

.charaOther_charaCV {
	display: block;
	font-size: 18px;
	padding-top: 8px;
	font-weight: 700;
	line-height: 1;
}

.charaOther_txt {
	font-size: 16px;
	line-height: 2;
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media screen and (max-width: 767px) {
	.charaOterContent {
		margin: var(--sp-size-48) auto;
		width: 100%;
	}

	.charaOther_charaName_h2 {
		padding-bottom: var(--sp-size-24);
	}

	.charaOther_charaName {
		font-size: var(--sp-size-36);
		padding: 0 var(--sp-size-36) var(--sp-size-30);
	}

	.charaOther_charaName:before {
		background-size: min(1.92vw, 14.4px) min(2.08vw, 15.6px);
	}

	.charaOther_charaName:after {
		left: 4px;
		right: 4px;
		bottom: min(0.8vw, 6px);
	}

	.charaOther_charaCV {
		font-size: var(--sp-size-24);
	}

	.charaOther_txt {
		font-size: var(--sp-size-20);
	}
}




/***
** COMICS
***/
#comics {
	text-shadow: 0px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%);
}

#comics .contIn {
	padding: calc(48px - 0.8696%) 4.3479% 0;
}

.comicLists {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.comicList {
	width: 20%;
	padding: 0.9524%;
}

@media screen and (max-width: 960px) {
	.comicList {
		width: 25%;
	}
}

.comicList a {
	width: 100%;
	display: block;
	border: 1px solid #cccccc;
	transition: .3s ease-in-out;
}

.comicList a:hover {
	transform: rotate(2deg) scale(1.025);
}

.comicList a img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	#comics .contIn {
		padding: 3.4667% 8% 0;
	}

	.comicList {
		width: calc(100% / 3);
		padding: 1.5874%;
	}
}


/** character Scroll Animation **/
#comics .cont_h2 {
	transform: translateY(-25px);
	transition: .3s cubic-bezier(.55, .47, .64, .92);
}

#comics.is-ani .cont_h2 {
	transform: translateY(0px);
	transition-delay: .1s;
}

#comics .comicLists {
	transform: translate(25px, 25px);
	opacity: 0;
	transition: .3s cubic-bezier(.55, .47, .64, .92);
	pointer-events: none;
}

#comics.is-ani .comicLists {
	transition-delay: .2s;
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto;
}


/***
** MOVIE
***/
#movie {
	overflow: hidden;
	padding-top: 70px;
	padding-bottom: 80px;
	text-shadow: 0px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), 1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), -1px 0px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), 1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), -1px 1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), 0px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), 1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%), -1px -1px 2px rgb(255 255 255 / 50%);
}

#movie .contIn {
	padding: 48px 0 0;
}

.movieFrameWrap {
	width: 100%;
	position: relative;
	padding-bottom: 1.7392%;
}

.movieFrame {
	width: 69.5653%;
	border: 10px solid var(--main-color-light-brown);
	margin: 0 auto;
	position: relative;
}

.movieFrame:before {
	content: '';
	position: absolute;
	top: -59px;
	right: 36px;
	width: 52px;
	height: 59px;
	background: url(../img/common/accent_clover.png) no-repeat bottom center / contain;
}

.movieIn {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movieLists {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movieList {
	width: 100%;
	height: 100%;
}

.movieList--link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.movieList--link:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: .3s ease;
	background-color: rgba(0, 0, 0, .24);
	opacity: 0;
}

.movieList--link:hover::after {
	opacity: 1;
}

.movieList--link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s ease;
}

.movieList--link:hover img {
	transform: scale(1.02);
}

.movie_icon {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: max(6vw, 72px);
	height: max(6vw, 72px);
	z-index: 3;
	pointer-events: none;
}

.movie_icon:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/video_icon_frame.png) no-repeat center / contain;
	animation: 3s linear infinite rotate;
}

.movieLists:hover~.movie_icon:before {
	animation-play-state: paused;
}

.movie_icon:after {
	content: '';
	position: absolute;
	width: 20.08334%;
	padding-top: 20.08334%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../img/common/video_icon_icon.svg) no-repeat center / contain;
}



.movieCharaImg {
	position: absolute;
	bottom: 0;
	width: 391px;
	padding-top: 463px;
	width: 34%;
	padding-top: 40.2609%;
	z-index: 3;
}

.mc_cecilia {
	/*  right: 926px;*/
	right: 80.5218%;
}

.mc_lawrence {
	left: 80.5218%;
}

.movieCharaImg img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.movieTitleListsWrap {
	position: relative;
	width: 69.5653%;
	margin: 24px auto;
}

.movieTitleLists {
	pointer-events: none;
	align-items: center;
}

.movieTitleList {
	width: 100%;
	opacity: 0 !important;
	transition: .3s ease;
	pointer-events: none;
}

.movieTitleList.swiper-slide-thumb-active {
	opacity: 1 !important;
}

.movieTitle {
	font-size: 24px;
	font-weight: 700;
	color: var(--main-color-red);
	text-align: center;
	line-height: 1.4;
}

.movieSwiperArrowWrap {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -50px;
	right: -50px;
}

.movieSwiperArrow {
	width: 42px;
	height: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	background: url(../img/common/arrow_r.svg) no-repeat center / contain;
	transition: .4s ease;
}

.movieSwiper--next {
	right: 0;
}

.movieSwiper--next:hover {
	transform: translateX(5px);
}

.movieSwiper--prev {
	left: 0;
	transform: scale(-1, 1);
}

.movieSwiper--prev:hover {
	transform: scale(-1, 1) translateX(5px);
}

.js-movieSwiperPager {
	width: 100%;
	display: flex;
	justify-content: center;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.movieSwiper-pager {
	width: 18px;
	height: 20px;
	position: relative;
	background: url(../img/common/frame_pager.png) no-repeat center / contain;
	margin: 0 4px;
	opacity: 1;
}

.movieSwiper-pager:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/common/frame_pager-active.png) no-repeat center / contain;
	transform: scale(0.6);
	opacity: 0;
	transition: .3s ease;
}

.movieSwiper-pager:hover::before {
	opacity: 0.3;
	transform: scale(1);
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active.movieSwiper-pager {
	background-image: url(../img/common/frame_pager-active.png);
}

@media screen and (max-width: 767px) {
	#movie {
		padding-top: 9.6%;
		padding-bottom: 9.6%;
	}

	#movie .contIn {
		padding-top: 4.8%;
	}

	.movieFrameWrap {
		padding-bottom: 2.6667%;
	}

	.movieFrame {
		width: 81.3334%;
		border-width: min(1.3334vw, 10px);
	}

	.movieFrame:before {
		right: unset;
		width: min(6.9334vw, 52px);
		height: min(7.8667vw, 59px);
		top: max(-8.4vw, -63px);
		left: min(2.9334vw, 22px);
	}

	.movie_icon {
		width: var(--sp-size-72);
		height: var(--sp-size-72);
	}

	.movieCharaImg {
		width: 38%;
		padding-top: 44.9334%;
	}

	.mc_cecilia {
		right: 86.4%;
	}

	.mc_lawrence {
		left: 84%;
	}

	.movieCharaImg img {
		position: absolute;
		top: 0;
		left: 0;
	}

	.movieTitleListsWrap {
		width: 81.3334%;
		margin: 1.6% auto;
	}

	.movieTitle {
		font-size: var(--sp-size-24);
	}

	.movieSwiperArrowWrap {
		left: -8.1968%;
		right: -8.1968%;
	}

	.movieSwiperArrow {
		width: min(5.6vw, 42px);
		height: var(--sp-size-20);
	}

	.movieSwiper--next:hover {
		transform: translateX(0px);
	}

	.movieSwiper--prev:hover {
		transform: scale(-1, 1) translateX(0px);
	}

	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.movieSwiper-pager {
		width: min(3.6vw, 27px);
		height: var(--sp-size-30);
		margin: 0 min(0.8vw, 6px);
	}
}

/** movie Scroll Animation **/
#movie .cont_h2 {
	transform: translateY(-25px);
	transition: .3s cubic-bezier(.55, .47, .64, .92);
}

#movie.is-ani .cont_h2 {
	transform: translateY(0px);
	transition-delay: .1s;
}

#movie .movieCharaImg {
	opacity: 0;
	transition: .5s cubic-bezier(.58, .43, .18, .73);
}

#movie .movieCharaImg.mc_cecilia {
	transform: translateX(-100px);
}

#movie .movieCharaImg.mc_lawrence {
	transform: translateX(100px);
}

#movie.is-ani .movieCharaImg {
	transition-delay: .2s;
	opacity: 1;
	transform: translateX(0);
}

#movie .movieFrame {
	transform: translateY(50px);
	opacity: 0;
	transition: .4s cubic-bezier(.58, .43, .18, .73);
}

#movie.is-ani .movieFrame {
	opacity: 1;
	transform: translateY(0px);
}


/***
** LOADING
***/
.Loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 20000;
	background: #FFF;
}

.LoadingIn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(../img/top/mv_bg.jpg) no-repeat center / cover;
	transition: filter .8s ease, transform .8s ease;
}

.l_logo {
	width: 680px;
	/* 110% */
	width: min(56.6667%, 680px);
	padding-top: 156px;
	padding-top: min(13%, 156px);
	background: url(../img/common/logo.png) no-repeat center / contain;
	z-index: 2;
	animation: l_logo_a 9s ease-in forwards;
}

.l_bg_leaf_lt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 388px;
	width: min(32.3334%, 485px);
	background: url(../img/top/load/l_leaf_l-p.webp) no-repeat right top / cover;
	animation: l_bg_leaf_lt_a 8s ease-in-out forwards 0.8s;
}

html.no-webp .l_bg_leaf_lt {
	background-image: url(../img/top/load/l_leaf_l-p.png);
}

.l_bg_leaf_rb {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 388px;
	width: min(32.3334%, 485px);
	background: url(../img/top/load/l_leaf_r-p.webp) no-repeat left bottom / cover;
	animation: l_bg_leaf_rb_a 8s ease-in-out forwards 0.8s;
}

html.no-webp .l_bg_leaf_rb {
	background-image: url(../img/top/load/l_leaf_r-p.png);
}

@keyframes l_logo_a {
	0% {
		opacity: 0;
		filter: blur(8px);
		transform: scale(1);
	}

	10% {
		opacity: 1;
	}

	15% {
		filter: blur(0);
	}

	100% {
		transform: scale(1.1);
	}
}

@keyframes l_bg_leaf_lt_a {
	0% {
		transform: scale(1) translate(0px, 0px);
	}

	100% {
		transform: scale(1.1) translate(-25px, -25px);
	}
}

@keyframes l_bg_leaf_rb_a {
	0% {
		transform: scale(1) translate(0px, 0px);
	}

	100% {
		transform: scale(1.1) translate(25px, 25px);
	}
}


@media (orientation: portrait) and (max-width: 767px) {
	.LoadingIn {
		background-image: url(../img/top/mv2_bg_sp.jpg);
		background-position: center top;
	}

	.l_logo {
		width: 73.3334%;
		padding-top: 16.8%;
	}

	.l_bg_leaf_lt {
		top: 0;
		bottom: unset;
		width: 100%;
		padding-top: 57.3334%;
		background: url(../img/top/load/l_leaf_t-s.webp) no-repeat center top / cover;
	}

	html.no-webp .l_bg_leaf_lt {
		background-image: url(../img/top/load/l_leaf_t-s.png);
	}

	.l_bg_leaf_rb {
		top: unset;
		bottom: 0;
		width: 100%;
		padding-top: 61.3334%;
		background: url(../img/top/load/l_leaf_b-s.png) no-repeat center bottom / cover;
	}

	html.no-webp .l_bg_leaf_rb {
		background-image: url(../img/top/load/l_leaf_b-s.png);
	}

	@keyframes l_bg_leaf_lt_a {
		0% {
			transform: scale(1) translateY(0%);
		}

		100% {
			transform: scale(1.1) translateY(-10%);
		}
	}

	@keyframes l_bg_leaf_rb_a {
		0% {
			transform: scale(1) translateY(0%);
		}

		100% {
			transform: scale(1.1) translateY(10%);
		}
	}
}

.Loading.l-ani .LoadingIn {
	filter: blur(8px);
	transform: scale(1.05);
}

/* キャラ紹介4コマ */
.chara4komaTxt {
	max-width: 80%;
	padding: 48px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.chara4komaTxt {
		max-width: 100%;
		padding: 24px;
		margin: 0 auto;
	}
}

.chara4komaImg img {
	max-width: 100%;
}


@media screen and (max-width: 767px) {
	/* spBnrArea */
	.spBnrArea {
		margin-bottom: 32px;
	}

	.spBnrArea__list {
		display: flex;
		justify-content: center;
		gap: 16px;
	}

	.spBnrArea__item {
		width: 33.3333%;
		animation: bounce 0.8s ease alternate infinite;
	}

	.spBnrArea__item a {
		width: 100%;
		height: 100%;
		display: block;
		padding-top: 100%;
	}

	.spBnrArea__item.-chara4koma a {
		background: url(../img/top/bnr/bnr_4koma.png) no-repeat center / contain;
	}

	.spBnrArea__item.-voice a {
		background: url(../img/top/bnr/bnr_voice.png) no-repeat center / contain;
	}

	.spBnrArea {
		transform: translateY(25px);
		opacity: 0;
		transition: .6s ease;
	}

	.l-ani .spBnrArea {
		transform: translateY(0px);
		opacity: 1;
		transition-delay: .4s;
	}
}