@charset "utf-8";
/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
html.is-loading,
body.is-loading {
	overflow: hidden;
	height: 100%;
	touch-action: none;
	overscroll-behavior: none;
}
body.is-loading #fullWrap {
	visibility: hidden;
}
.loading {
	background-color: var(--color-black);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	overflow: hidden;
	transition: opacity .8s var(--easing-outquart), background-color .8s var(--easing-outquart), visibility .8s var(--easing-outquart);
}
.loading.is-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loading__inner {
	position: relative;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
}
.loading.is-ready .loading__inner {
	visibility: visible;
	opacity: 1;
}
.loading.is-preload-out {
	background-color: transparent;
}
.loading__c{
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	margin: auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	background-image: url(../img/loading/c_1.jpg);
	background-image: -webkit-image-set(
		url(../img/loading/c_1.webp) type("image/webp"),
		url(../img/loading/c_1.jpg) type("image/jpeg")
	);
	background-image: image-set(
		url(../img/loading/c_1.webp) type("image/webp"),
		url(../img/loading/c_1.jpg) type("image/jpeg")
	);
	z-index: 0;
}
.loading.--l-hide-c .loading__c{
	opacity: 0;
	visibility: hidden;
}
.fusumaWrap{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}
.fusuma{
	width: 50%;
	height: 100%;
	transition: transform .8s var(--easing-outquart);
	will-change: transform;
}
.f_right{
	background-repeat: no-repeat;
	background-position: center left;
	background-size: cover;
	background-image: url(../img/loading/f_right.jpg);
	background-image: -webkit-image-set(
		url(../img/loading/f_right.webp) type("image/webp"),
		url(../img/loading/f_right.jpg) type("image/jpeg")
	);
	background-image: image-set(
		url(../img/loading/f_right.webp) type("image/webp"),
		url(../img/loading/f_right.jpg) type("image/jpeg")
	);
}
.f_left{
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	background-image: url(../img/loading/f_left.jpg);
	background-image: -webkit-image-set(
		url(../img/loading/f_left.webp) type("image/webp"),
		url(../img/loading/f_left.jpg) type("image/jpeg")
	);
	background-image: image-set(
		url(../img/loading/f_left.webp) type("image/webp"),
		url(../img/loading/f_left.jpg) type("image/jpeg")
	);
}
.loading.--l-ani1 .f_left{
	transform: translateX(-100px);
}
.loading.--l-ani1 .f_right{
	transform: translateX(100px);
}
.loading.--l-ani2 .f_left,
.loading.--l-ani2 .f_right{
	transform: translateX(0);
}
.loading.--l-ani3 .f_left{
	transform: translateX(-203.5px);
}
.loading.--l-ani3 .f_right{
	transform: translateX(203.5px);
}
.loading.--l-ani3 .loading__c{
	background-image: url(../img/loading/c_2.jpg);
	background-image: -webkit-image-set(
		url(../img/loading/c_2.webp) type("image/webp"),
		url(../img/loading/c_2.jpg) type("image/jpeg")
	);
	background-image: image-set(
		url(../img/loading/c_2.webp) type("image/webp"),
		url(../img/loading/c_2.jpg) type("image/jpeg")
	);
}
.loading.--l-ani4 .f_left,
.loading.--l-ani4 .f_right{
	transform: translateX(0);
}
.loading.--l-ani4 .loading__c{
	background-image: url(../img/loading/c_2.jpg);
	background-image: -webkit-image-set(
		url(../img/loading/c_2.webp) type("image/webp"),
		url(../img/loading/c_2.jpg) type("image/jpeg")
	);
	background-image: image-set(
		url(../img/loading/c_2.webp) type("image/webp"),
		url(../img/loading/c_2.jpg) type("image/jpeg")
	);
}
.loading.--l-hide-c{
	background-color: #FFF;
}
.loading.--l-ani5{
	background-color: transparent;
}
.loading.--l-ani5 .f_left{
	transform: translateX(-100%);
}
.loading.--l-ani5 .f_right{
	transform: translateX(100%);
}

.loading__skip{
	position: absolute;
	bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	right: min(calc(40 / var(--vw-min) * 100vw), 40px);
	z-index: 2;
	font-family: var(--font-en);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	line-height: 1;
	height: min(calc(38 / var(--vw-min) * 100vw), 38px);
	padding: min(calc(2 / var(--vw-min) * 100vw), 2px) min(calc(24 / var(--vw-min) * 100vw), 24px) 0;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, opacity .3s ease, visibility .3s ease;
    width: min(calc(100 / var(--vw-min) * 100vw), 100px);
}
.loading.--l-ani4 .loading__skip,
.loading.--l-ani5 .loading__skip,
.loading.--l-hide-c .loading__skip{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media screen and (min-width:769px){
	.loading__skip:hover{
		background-color: var(--color-purple);
	}
}

.main{
    position: relative;
}
.charaFaceBlock{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}
.charaFaceBlock__inner{
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

.charaFaceWrap._right{
    position: absolute;
    right: 0;
    bottom: min(calc(16 / var(--vw-min) * 100vw), 16px);
    overflow:hidden;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    transition: bottom 0.5s ease;
}
.charaFace__imgWrap{
    width: min(calc(110 / var(--vw-min) * 100vw), 110px);
    height: min(calc(110 / var(--vw-min) * 100vw), 110px);
    background-color: rgba(239, 196, 203, 1);
    border-radius: 50%;
    border: 1px solid var(--color-purple);
    overflow: hidden;
}
.charaFace__img{
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}
.charaFaceWrap._right .charaFace__img{
    background: url(../img/top/charaface/f_chara1_1.png) no-repeat center center / 100% auto;
}
.charaFace__img.is-fade{
    opacity: 0;
}

.charaFaceWrap .charaFace{
    display: flex;
    align-items: center;
}
.charaFaceWrap._right .charaFace{
    margin-right: max(calc(-20 / var(--vw-min) * 100vw), -20px);
}
.charaFaceWrap._left{
    position: absolute;
    left: max(calc(-12 / var(--vw-min) * 100vw), -12px);
    top: 0;
    overflow: visible;
    display: flex;
    width: min(calc(116 / var(--vw-min) * 100vw), 116px);
    height: min(calc(116 / var(--vw-min) * 100vw), 116px);
    z-index: 2;
}
.charaFaceWrap._left .charaFace{
    width: 100%;
    height: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.charaFaceWrap._left .charaFace__imgWrap{
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.charaFaceWrap._left .charaFace__img{
    width: min(calc(116 / var(--vw-min) * 100vw), 116px);
    height: min(calc(116 / var(--vw-min) * 100vw), 116px);
    background-color: rgba(239, 196, 203, 1);
    border-radius: 50%;
    border: 1px solid var(--color-purple);
    background-image: url(../img/top/charaface/f_chara2_1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.charaFace__txtWrap{
    border-radius: min(calc(10 / var(--vw-min) * 100vw), 10px);
    border: 1px solid var(--color-purple);
    background: var(--color-white);
    padding: min(calc(12 / var(--vw-min) * 100vw), 12px);
    position: relative;
    z-index: 1;
    position: relative;
    margin-right: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.charaFace__txtWrap::before{
    content: '';
    display: block;
    width: min(calc(11 / var(--vw-min) * 100vw), 11px);
    height: min(calc(11 / var(--vw-min) * 100vw), 11px);
    background: url(../img/top/charaface/fukidashi.png) no-repeat center center / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(calc(-11 / var(--vw-min) * 100vw), -11px);
    margin: auto;
}
@media screen and (max-width:768px){
    .charaFace__txtWrap{
        border-radius:calc(2 / var(--vw-min) * 100vw);
        padding: calc(6 / var(--vw-min) * 100vw) calc(12 / var(--vw-min) * 100vw);
        margin-right:calc(12 / var(--vw-min) * 100vw);
        max-width: calc(500 / var(--vw-min) * 100vw);
        line-height:1;
    }
    .charaFace__txtWrap::before{
        width: calc(11 / var(--vw-min) * 100vw);
        height: calc(11 / var(--vw-min) * 100vw);
        right: calc(-11 / var(--vw-min) * 100vw);
    }
}

.charaFace__txt{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    line-height: min(calc(24 / var(--vw-min) * 100vw), 24px);
    transition: opacity 0.3s ease;
}
@media screen and (max-width:768px){
    .charaFace__txt{
        font-size: calc(20 / var(--vw-min) * 100vw);
        line-height: 0.64em;
    }
}
.charaFace__txt.is-fade{
    opacity: 0;
}

.contentWrap{
    position: relative;
    z-index: 1;
    overflow: visible;
    background-color: rgba(249, 248, 246, 1);
}
.charaLineBlock{
    position: absolute;
    width: min(calc(116 / var(--vw-min) * 100vw), 116px);
    height: 97%;
    top: min(calc(60 / var(--vw-min) * 100vw), 60px);
    left: max(calc(-12 / var(--vw-min) * 100vw), -12px);
    z-index: 5;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .charaLineBlock{
        top: 0;
        height: 99%;
    }
}
.charaLine{
    position: absolute;
    left: min(calc(40 / var(--vw-min) * 100vw), 40px);
    top: 0;
    display: block;
    width: 1px;
    height: 96%;
    background: var(--color-purple);
}
.charaLine::after{
    content: '';
    display: block;
    width: min(calc(43   / var(--vw-min) * 100vw), 43px);
    height: min(calc(53 / var(--vw-min) * 100vw), 53px);
    background: url(../img/top/charaface/line_arrow.svg) no-repeat center center / contain;
    position: absolute;
    bottom: 0;
    left: max(calc(-21 / var(--vw-min) * 100vw), -21px);
    margin: auto;
}
.charaLineBlock__inner{
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}
.charaLine__txt{
    position: absolute;
    left: 0;
    top: min(calc(140 / var(--vw-min) * 100vw), 140px);
    width: min(calc(200 / var(--vw-min) * 100vw), 200px);
    height: min(calc(200 / var(--vw-min) * 100vw), 200px);
    background: url(../img/top/charaface/deco_txt_kyou.png) no-repeat center center / contain;
    z-index: 1;
    will-change: transform, top;
    transition: filter 0.3s ease;
}
.charaLine__txt.is-jyaku{
    filter: blur(1px);
    background-image: url(../img/top/charaface/deco_txt_jyaku.png);
}
.charaLine__txt.is-end{
    filter: blur(3px);
}
@media screen and (max-width:768px){
    .charaLine__txt{
        top: calc(200 / var(--vw-min) * 100vw);
        width: calc(160 / var(--vw-min) * 100vw);
        height: calc(160 / var(--vw-min) * 100vw);
    }
}
/*----------------------------------
 * FV
----------------------------------*/
.fv{
    height: calc(862 / var(--vw-min) * 100vw);
    width: 100%;
    position: relative;
    z-index: 1;
    padding:0 calc(40 / var(--vw-min) * 100vw);
    position: relative;
}
.fvBg{
    position: absolute;
    z-index: 1;
    top: calc(40 / var(--vw-min) * 100vw);
    left: 0;
    right: 0;
    margin: auto;
    height: calc(820 / var(--vw-min) * 100vw);
    width:calc(1286 / var(--vw-min) * 100vw);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.fv.is-vis-ready .fvBg{
    transition: background-image 0.5s ease;
}
.fv[data-vis="vis1_01"] .fvBg{
    background-image: url(../img/visual/vis1_01_bg.jpg);
    background-image: url(../img/visual/vis1_01_bg.webp);
}
.fv[data-vis="vis1_02"] .fvBg{
    background-image: url(../img/visual/vis1_02_bg.jpg);
    background-image: url(../img/visual/vis1_02_bg.webp);
}
.fv[data-vis="vis3"] .fvBg{
    background-image: url(../img/visual/vis3_bg.jpg);
    background-image: url(../img/visual/vis3_bg.webp);
}
.fv[data-vis="vis4"] .fvBg{
    background-image: url(../img/visual/vis4_bg.jpg);
    background-image: url(../img/visual/vis4_bg.webp);
}
@media screen and (max-width:768px){
	.fv{
        height: calc(1806 / var(--vw-min) * 100vw);
        padding:0 calc(40 / var(--vw-min) * 100vw) 0 0;
	}
    .fvBg{
        top: unset;
        left:0;
        right:unset;
        height:100%;
        width:calc(100% - calc(40 / var(--vw-min) * 100vw));
        background-position: right bottom;
        background-size: auto 100%;
    }
    .fv[data-vis="vis1_01"] .fvBg{
        background: url(../img/visual/vis1_01_bg_sp.jpg) no-repeat center center / cover;
        background: url(../img/visual/vis1_01_bg_sp.webp) no-repeat center center / cover;
    }
    .fv[data-vis="vis1_02"] .fvBg{
        background: url(../img/visual/vis1_02_bg_sp.jpg) no-repeat center center / cover;
        background: url(../img/visual/vis1_02_bg_sp.webp) no-repeat center center / cover;
    }
    .fv[data-vis="vis3"] .fvBg{
        background: url(../img/visual/vis3_bg_sp.jpg) no-repeat center center / cover;
        background: url(../img/visual/vis3_bg_sp.webp) no-repeat center center / cover;
    }
    .fv[data-vis="vis4"] .fvBg{
        background: url(../img/visual/vis4_bg_sp.jpg) no-repeat center center / cover;
        background: url(../img/visual/vis4_bg_sp.webp) no-repeat center center / cover;
    }
}

.fv__decoWrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.fv__deco1,
.fv__deco2{
    width: min(calc(800 / var(--vw-min) * 100vw), 800px);
    height: min(calc(800 / var(--vw-min) * 100vw), 800px);
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: scale(0.75);
    transform-origin: center center;
}
.fv__deco1{
    background: url(../img/common/deco/blood_blur_01.png) no-repeat center center / contain;
    top: min(calc(-200 / var(--vw-min) * 100vw), -200px);
    right: min(calc(-180 / var(--vw-min) * 100vw), -180px);
    animation: fvDecoBleed 3.2s ease-in-out .3s infinite alternate;
}
.fv__deco2{
    background: url(../img/common/deco/blood_blur_02.png) no-repeat center center / contain;
    bottom: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    left: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    animation: fvDecoBleed 3.2s ease-in-out 1.8s infinite alternate;
}
@keyframes fvDecoBleed {
    from {
        opacity: 0.7;
        transform: scale(0.75);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@media screen and (max-width:768px){
    .fv__deco1,
    .fv__deco2{
        width: calc(800 / var(--vw-min) * 100vw);
        height: calc(800 / var(--vw-min) * 100vw);
    }
    .fv__deco1{
        top: calc(-200 / var(--vw-min) * 100vw);
        right: calc(-180 / var(--vw-min) * 100vw);
    }
    .fv__deco2{
        bottom: calc(-150 / var(--vw-min) * 100vw);
        left: calc(-150 / var(--vw-min) * 100vw);
    }
}

.fv__inner{
    margin: auto;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width:768px){
	.fv__inner{
		flex-direction: column;
	}
}
/*----------------------------------
 * Visual Thum List
----------------------------------*/
.visualThumListBlock{
    position: absolute;
    z-index: 20;
    left: calc(24 / var(--vw-min) * 100vw);
    top: calc(70 / var(--vw-min) * 100vw);
}
.visualThumList{
    display: flex;
    flex-direction: column;
    gap: calc(4 / var(--vw-min) * 100vw);
}
.visThumItem{
    display: block;
    width: calc(56 / var(--vw-min) * 100vw);
    height: calc(56 / var(--vw-min) * 100vw);
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: border-color .3s ease;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .visualThumListBlock{
        left: calc(24 / var(--vw-min) * 100vw);
        top: unset;
        bottom: calc(92 / var(--vw-min) * 100vw);
    }
    .visualThumList{
        gap: calc(4 / var(--vw-min) * 100vw);
    }
    .visThumItem{
        width: calc(88 / var(--vw-min) * 100vw);
        height: calc(88 / var(--vw-min) * 100vw);
        border-width: 1px;   
    }
}
.visThumItem.is-active,
.visThumItem:hover{
    opacity: 1;
}

.visThumItem.is-active{
    border-color: var(--color-pink);
}
.visThumItem[data-vis="vis1_01"].is-active{
    border-color: var(--color-purple);
}
.visThumItem[data-vis="vis1_02"].is-active{
    border-color: var(--color-pink);
}
.visThumItem[data-vis="vis3"].is-active{
    border-color: var(--color-pink);
}
.visThumItem[data-vis="vis4"].is-active{
    border-color: var(--color-purple);
}


.visThumItem__img{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFF;
}
.visThumItem__img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}


.fv__imgBlock{
    height: 100%;
    position: relative;
    z-index: 1;
    padding-left: calc(40 / var(--vw-min) * 100vw);
}
.fvImg{
    width: calc(636 / var(--vw-min) * 100vw);
    height: calc(860 / var(--vw-min) * 100vw);
    position: relative;
    z-index: 1;
}
.fvImg__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fv.is-vis-ready .fvImg__img{
    transition: background-image 0.5s ease;
}
.fvImg__catch{
    position: absolute;
    top: calc(62 / var(--vw-min) * 100vw);
    right: calc(60 / var(--vw-min) * 100vw);
    width: calc(118 / var(--vw-min) * 100vw);
    height: calc(218 / var(--vw-min) * 100vw);
    background: url(../img/visual/vis1_copy.png) no-repeat center center / contain;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fv[data-vis="vis1_01"] .fvImg__catch,
.fv[data-vis="vis1_02"] .fvImg__catch{
    opacity: 1;
    transition-delay: .2s;
}

@media screen and (max-width:768px){
    .fv__imgBlock{
        padding-left: unset;
        width: 100%;
    }
    .fvImg{
        width: 100%;
        height: calc(960 / var(--vw-min) * 100vw);
    }
    .fvImg__catch{
        top: calc(62 / var(--vw-min) * 100vw);
        right: calc(60 / var(--vw-min) * 100vw);
        width: calc(138 / var(--vw-min) * 100vw);
        height: calc(248 / var(--vw-min) * 100vw);
    }
}
.fv[data-vis="vis1_01"] .fvImg__img{
    background: url(../img/visual/vis1_01.jpg) no-repeat center top / contain;
    background: url(../img/visual/vis1_01.webp) no-repeat center top / contain;
}
.fv[data-vis="vis1_02"] .fvImg__img{
    background: url(../img/visual/vis1_02.jpg) no-repeat center top / contain;
    background: url(../img/visual/vis1_02.webp) no-repeat center top / contain;
}
.fv[data-vis="vis3"] .fvImg__img{
    background: url(../img/visual/vis3.jpg) no-repeat center top / contain;
    background: url(../img/visual/vis3.webp) no-repeat center top / contain;
}
.fv[data-vis="vis4"] .fvImg__img{
    background: url(../img/visual/vis4.jpg) no-repeat center top / contain;
    background: url(../img/visual/vis4.webp) no-repeat center top / contain;
}
.fv__deco__txtBlock{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(40 / var(--vw-min) * 100vw);
    height: 100%;
    z-index: 2;
}
.fv__deco__txtWrap{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: sticky;
    bottom: 0;
    top: 0;
}
.fv__deco__txt{
    display: block;
    width: calc(19 / var(--vw-min) * 100vw);
    height:calc(357 / var(--vw-min) * 100vw);
    background-color: #000;
    mask:url(../img/common/logo/logo_en_vertical.svg) no-repeat center center / contain;
    -webkit-mask:url(../img/common/logo/logo_en_vertical.svg) no-repeat center center / contain;
    z-index: 1;
}
@media screen and (max-width:768px){
    .fv__deco__txt{
        top: 0;
        right: calc(10 / var(--vw-min) * 100vw);
        width: calc(24 / var(--vw-min) * 100vw);
        height: calc(451 / var(--vw-min) * 100vw);
    }
}

.fv__ttlBlock{
    width: calc(100% - calc(636 / var(--vw-min) * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fvTtl{
    width: calc(137 / var(--vw-min) * 100vw);
    height: calc(330 / var(--vw-min) * 100vw);
    background: url(../img/common/logo/logo_tate.png) no-repeat center center / contain;
    z-index: 1;
    margin-bottom: calc(30 / var(--vw-min) * 100vw);
}

.fv__day{
    width: calc(457 / var(--vw-min) * 100vw);
    height: calc(194 / var(--vw-min) * 100vw);
    background: url(../img/top/fv/fv_day.svg) no-repeat center center / contain;
    z-index: 1;
}


@media screen and (max-width:768px){
    .fv__ttlBlock{
        width:100%;
        gap: calc(24 / var(--vw-min) * 100vw);
        padding-bottom: calc(100 / var(--vw-min) * 100vw);
    }
    .fvTtl{
        margin-top: calc(-60 / var(--vw-min) * 100vw);
        width: calc(600 / var(--vw-min) * 100vw);
        height: calc(128 / var(--vw-min) * 100vw);
        background: url(../img/common/logo/logo_yoko.png) no-repeat center center / contain;
        margin-bottom: 0;
    }
    .fv__day{
        background: url(../img/top/fv/fv_day_sp.svg) no-repeat center center / contain;
        width: calc(606 / var(--vw-min) * 100vw);
        height: calc(300 / var(--vw-min) * 100vw);
    }
}

.fv__movieBlock{
    position: relative;
    z-index: 2;
    width: calc(329 / var(--vw-min) * 100vw);
    height: calc(185 / var(--vw-min) * 100vw);
    margin-top: calc(10 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
    .fv__movieBlock{
        width: calc(582 / var(--vw-min) * 100vw);
        height: calc(327 / var(--vw-min) * 100vw);
        margin-top: calc(10 / var(--vw-min) * 100vw);
    }
}

.fvMovie{
    position: relative;
    width: 100%;
    height: 100%;
}
.fvMovie__btn{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 calc(20 / var(--vw-min) * 100vw) rgba(0, 0, 0, 0.45);
}
.fvMovie__thumb{
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fvMovie__thumb img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease, opacity .3s ease;
}
.fvMovie__overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
    transition: background-color .3s ease;
}
.fvMovie__overlay::before{
    content: '';
    width:calc(100% - calc(16 / var(--vw-min) * 100vw));
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
    pointer-events: none;
}  
.fvMovie__overlay::after{
    content: '';
    width: 100%;
    height:calc(100% - calc(16 / var(--vw-min) * 100vw));
    position: absolute;
    inset: 0;
    margin: auto;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    pointer-events: none;
}    
.fvMovie__icon{
    position: absolute;
    inset: 0;
    width: calc(48 / var(--vw-min) * 100vw);
    height: calc(48 / var(--vw-min) * 100vw);
    margin: auto;
    z-index: 1;
    pointer-events: none;
}
.fvMovie__icon::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: rotate(45deg);
    transition: transform .3s ease;
}
.fvMovie__icon::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52%;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: calc(6 / var(--vw-min) * 100vw) 0 calc(6 / var(--vw-min) * 100vw) calc(10 / var(--vw-min) * 100vw);
    border-color: transparent transparent transparent #fff;
    transform: translateX(-40%);
}

@media screen and (max-width:768px){
    .fvMovie__icon{
        width: calc(58 / var(--vw-min) * 100vw);
        height: calc(58 / var(--vw-min) * 100vw);
    }
    .fvMovie__icon::after{
        border-width: calc(8 / var(--vw-min) * 100vw) 0 calc(8 / var(--vw-min) * 100vw) calc(12 / var(--vw-min) * 100vw);
    }
}
@media screen and (hover: hover) and (pointer: fine){
    .fvMovie__btn:hover .fvMovie__thumb img{
        transform: scale(1.04);
    }
    .fvMovie__btn:hover .fvMovie__overlay{
        background: rgba(0, 0, 0, 0.4);
    }
    .fvMovie__btn:hover .fvMovie__icon::before{
        border-color: #fff;
        transform: rotate(140deg) scale(0.8);
    }
}
.fvMovie__moreBtn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    margin-top: calc(12 / var(--vw-min) * 100vw);
    color: #FFF;
    text-decoration: none;
    font-family: var(--font-en);
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}
@media screen and (max-width:768px){
    .fvMovie__moreBtn{
        margin-top: calc(24 / var(--vw-min) * 100vw);
    }
}
.fvMovie__moreBtn__txt{
    position: relative;
    z-index: 1;
    margin-right: calc(10 / var(--vw-min) * 100vw);
    font-size: calc(14 / var(--vw-min) * 100vw);
}
.fvMovie__arrow{
    position: relative;
    display: block;
    flex-shrink: 0;
    width: calc(21 / var(--vw-min) * 100vw);
    height: calc(5 / var(--vw-min) * 100vw);
    mask: url(../img/common/icon/ic_arrow2.svg) no-repeat center center / contain;
    -webkit-mask: url(../img/common/icon/ic_arrow2.svg) no-repeat center center / contain;
    background-color: #FFF;
    transition: transform 0.3s ease;
}
@media screen and (max-width:768px){
    .fvMovie__moreBtn__txt{
        font-size: calc(26 / var(--vw-min) * 100vw);
        margin-right: calc(30 / var(--vw-min) * 100vw);
    }
    .fvMovie__arrow{
        width: calc(30 / var(--vw-min) * 100vw);
        height: calc(15 / var(--vw-min) * 100vw);
    }
}
@media screen and (min-width:769px) and (hover: hover) and (pointer: fine){
    .fvMovie__moreBtn:hover .fvMovie__arrow{
        transform: translateX(calc(5 / var(--vw-min) * 100vw));
    }
}

.fvSns{
    position: absolute;
    bottom: 0;
    left: calc(5 / var(--vw-min) * 100vw);
    z-index: 10;
    flex-direction: column;
    pointer-events: none;
}

@media screen and (max-width:768px){
    .fvSns.pc{
        display: none;
    }
}
.fvSns .snsLists_ttl{
    font-size: calc(14 / var(--vw-min) * 100vw);
    line-height: 1;
    color: #1B1916;
    writing-mode: vertical-rl;
}

.fvSns .shareLists{
    display: flex;
    flex-direction: column;
    gap: calc(12 / var(--vw-min) * 100vw);
}
.fvSns .shareLists__item{
    width: calc(24 / var(--vw-min) * 100vw);
    height: calc(24 / var(--vw-min) * 100vw);
    pointer-events: auto;   
}
.fvSns .shareLists__link:before{
    background-color: #000;
}
@media screen and (hover: hover){
    .fvSns .shareLists__link:hover:before{
        background-color: var(--color-purple);
    }
}
@media screen and (max-width:768px){
    .fvSns{
        top: calc(48 / var(--vw-min) * 100vw);
        right: calc(20 / var(--vw-min) * 100vw);
        flex-direction: column;
        align-items: flex-end;
        gap: calc(40 / var(--vw-min) * 100vw);
    }
    .fvSns .snsLists_ttl{
        font-size: calc(20 / var(--vw-min) * 100vw);
    }
    .fvSns .shareLists__item{
        width: calc(68 / var(--vw-min) * 100vw);
        height: calc(48 / var(--vw-min) * 100vw);
    }
}

.section{
    position: relative;
}
.section__inner{
    width:min(calc(1000 / var(--vw-min) * 100vw), 1000px);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
@media screen and (max-width:768px){
    .section__inner{
        width:100%;
        overflow: hidden;
    }
}

/*-----------------------------------------------
 * news
-------------------------------------------------*/
.news{
    background: #FFF;
    min-height: min(calc(640 / var(--vw-min) * 100vw), 640px);
    clip-path: inset(0);
    padding-top: min(calc(120 / var(--vw-min) * 100vw), 120px);
}
@media screen and (max-width:768px){
    .news{
        min-height: auto;
        padding-bottom: calc(100 / var(--vw-min) * 100vw);
    }
}
.newsBg{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../img/top/news_bg.png) no-repeat top right / cover;
    z-index: 0;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .newsBg{
        background: url(../img/top/news_bg_sp.png) no-repeat center center / cover;
    }
}
.news__decoWrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.news__deco1{
    width: min(calc(800 / var(--vw-min) * 100vw), 800px);
    height: min(calc(800 / var(--vw-min) * 100vw), 800px);
    position: absolute;
    z-index: 1;
    opacity: 0.7;
    transform: scale(0.75);
    transform-origin: center center;
}
.news__deco1{
    background: url(../img/common/deco/blood_blur_02.png) no-repeat center center / contain;
    bottom: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    left: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    animation: fvDecoBleed 3.2s ease-in-out 1.8s infinite alternate;
}
@media screen and (max-width:768px){
    .news__deco1{
        width: calc(880 / var(--vw-min) * 100vw);
        height: calc(880 / var(--vw-min) * 100vw);
        bottom: unset;
        top: calc(-100 / var(--vw-min) * 100vw);
        left: calc(-50 / var(--vw-min) * 100vw);
    }
}
.news .section__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width:768px){
    .news .section__inner{
        flex-direction: column;
        align-items: flex-start;
        width: calc(574 / var(--vw-min) * 100vw);
        margin: 0 calc(40 / var(--vw-min) * 100vw) auto auto;
    }
}
/* NEWS > ttl*/
.news .section__ttl {
    width: min(calc(147 / var(--vw-min) * 100vw), 147px);
    height: min(calc(288 / var(--vw-min) * 100vw), 288px);
    background: url(../img/top/ttl_news.png) no-repeat center center / contain;
    z-index: 1;
}
@media screen and (max-width:768px){
    .news .section__ttlWrap{
        margin-bottom: calc(64 / var(--vw-min) * 100vw);
    }
    .news .section__ttl {
        width: calc(390 / var(--vw-min) * 100vw);
        height: calc(75 / var(--vw-min) * 100vw);
        background: url(../img/top/ttl_news_sp.png) no-repeat center center / contain;
    }
}

.news .section__innerCont{
    width: min(calc(767 / var(--vw-min) * 100vw), 767px);
}
@media screen and (max-width:768px){
    .news .section__innerCont{
        width: 100%;
    }
}


.newsLists{
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
    position: relative;
}
.newsLists::before,
.newsLists::after{
    content: '';
    display: block;
    width: min(calc(38 / var(--vw-min) * 100vw), 38px);
    height: min(calc(38 / var(--vw-min) * 100vw), 38px);
    background: url(../img/news/news_deco_line.svg) no-repeat center center / contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateY(-50%);
}
.newsLists::after{
    top: unset;
    left: unset;
    bottom: 0;
    right: 0;
    transform: translateY(50%);
}
.newsItem{
    border-bottom: 1px solid #000;
    height: min(calc(90 / var(--vw-min) * 100vw), 90px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.newsItem__link{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #000;
}
.newsItem__ttl{
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    width: min(calc(602 / var(--vw-min) * 100vw), 602px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    margin-right: min(calc(18 / var(--vw-min) * 100vw), 18px);
    transition: text-shadow 0.3s ease;
}
.newsItem__date{
    width: min(calc(80 / var(--vw-min) * 100vw), 80px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-family: var(--font-en);
    font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
    line-height: 0.64em;
    transition: text-shadow 0.3s ease;
}
.newsItem__date__y{
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    display: block;
}
.newsItem__arrowWrap{
    display: block;
    flex-shrink: 0;
    margin-left: min(calc(20 / var(--vw-min) * 100vw), 20px);
    transition: filter 0.3s ease, transform 0.3s ease;
}
.newsItem__arrow{
    display: block;
    width: min(calc(32 / var(--vw-min) * 100vw), 32px);
    height: min(calc(5 / var(--vw-min) * 100vw), 5px);
    mask: url(../img/common/icon/ic_arrow.svg) no-repeat center center / cover;
    -webkit-mask: url(../img/common/icon/ic_arrow.svg) no-repeat center center / cover;
    background-color: #000;
}
@media screen and (min-width:769px) and (hover: hover) and (pointer: fine){
    .newsItem__link:hover .newsItem__ttl,
    .newsItem__link:hover .newsItem__date{
        text-shadow: 0 0 3px rgba(145, 72, 151, 0.85), 0 0 2px rgba(145, 72, 151, 0.5);
    }
    .newsItem__link:hover .newsItem__arrowWrap{
        transform: translateX(min(calc(10 / var(--vw-min) * 100vw), 10px));
        filter: drop-shadow(0 0 2px rgba(145, 72, 151, 0.85)) drop-shadow(0 0 2px rgba(145, 72, 151, 0.8));
    }
}
@media screen and (max-width:768px){
    .newsItem{
        height: auto;
    }
    .newsItem__ttl{
        width: 100%;
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
    .newsItem__date{
        font-size: calc(24 / var(--vw-min) * 100vw);
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
    }
    .newsItem__date__y{
        font-size: unset;
        display: inline-block;
    }
    .newsItem__link{
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        padding: calc(24 / var(--vw-min) * 100vw) calc(30 / var(--vw-min) * 100vw) calc(24 / var(--vw-min) * 100vw) 0;
    }
    .newsItem__arrowWrap{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        margin-left: 0;
        display: flex;
        align-items: center;
    }
    .newsItem__arrow{
        width: calc(29 / var(--vw-min) * 100vw);
        height: calc(5 / var(--vw-min) * 100vw);
        mask: url(../img/common/icon/ic_arrow_sp.svg) no-repeat center center / contain;
        -webkit-mask: url(../img/common/icon/ic_arrow_sp.svg) no-repeat center center / contain;
    }
}


.news .moreBtnWrap{
    margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
    display: flex;
    justify-content: flex-end;
}
@media screen and (max-width:768px){
    .news .moreBtnWrap{
        margin-top: calc(50 / var(--vw-min) * 100vw);
        justify-content: flex-start;
    }
}  
/* -----------------------------------------------
 * COMMON
-------------------------------------------------*/
.sectionWrap{
    background-color: #000;
    background-image: url(../img/top/top_btm_bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto;
    margin-top: min(calc(210 / var(--vw-min) * 100vw), 210px);
    position: relative;
}
@media screen and (max-width:768px){
    .sectionWrap{
        margin-top: calc(210 / var(--vw-min) * 100vw);
        background:#000 url(../img/top/introstaffcast_bg.jpg) no-repeat bottom center / cover;
    }
}
.sectionWrap::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/top/introstaffcast_bg_top.png) no-repeat top center / 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}


/* flowingTxt */
.flowingTxt {
	position: absolute;
	width: 100%;
	overflow: hidden;
    top: -40px;
	height: min(calc(19 / var(--vw-min) * 100vw), 19px);
	left: 0;
	z-index: 1;
	pointer-events: none;
}
.flowingTxt::after {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	content: "";
	width:100%;
	height: min(calc(19 / var(--vw-min) * 100vw), 19px);
	-webkit-mask: url(../img/common/logo/logo_en_flow.svg) repeat-x;
	mask: url(../img/common/logo/logo_en_flow.svg) repeat-x;
	mask-size: min(calc(417 / var(--vw-min) * 100vw), 417px) auto;
	background-color: #000;
	animation: flowingTxt 20s linear infinite reverse;
}

.flowingTxt._intro {
    top: -40px;
	height: min(calc(19 / var(--vw-min) * 100vw), 19px);
}
.flowingTxt._staffcast {
    top: 0;
	height: min(calc(19 / var(--vw-min) * 100vw), 19px);
}
.flowingTxt._staffcast::after {
    background-color: #fff;
    animation: flowingTxt 20s linear infinite;
}
@media screen and (max-width:768px){
	.flowingTxt._staffcast {
		top: calc(100 / var(--vw-min) * 100vw);
        height: calc(20 / var(--vw-min) * 100vw);
	}
}


@media screen and (max-width:768px){
	.flowingTxt._news {
		height: calc(19 / var(--vw-min) * 100vw);
	}
	.flowingTxt._news::after {
		width: calc(417 / var(--vw-min) * 100vw);
		height: calc(19 / var(--vw-min) * 100vw);
		mask-size: calc(417 / var(--vw-min) * 100vw) auto;
		animation: flowingTxt_sp 20s linear infinite reverse;
	}
}
@keyframes flowingTxt {
	from {
		mask-position: 0 0;
	}
	to {
		mask-position: max(calc(-417 / var(--vw-min) * 100vw), -417px) 0;
	}
}
@keyframes flowingTxt_sp {
	from {
		mask-position: 0 0;
	}
	to {
		mask-position: calc(-417 / var(--vw-min) * 100vw) 0;
	}
}

/*-----------------------------------------------
 * introduction
-------------------------------------------------*/


.introduction{
    z-index: 10;
    margin-bottom: min(calc(160 / var(--vw-min) * 100vw), 160px);
}
@media screen and (max-width:768px){
    .introduction{
        margin-bottom:0;
    }
}
.introBg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width:calc(100% - min(calc(186 / var(--vw-min) * 100vw), 186px));
    max-width: calc(1186 / var(--vw-min) * 100vw);
    height: 100%;
    background: rgba(145, 72, 151, 1) url(../img/top/introdction/intro_bg.png) no-repeat right bottom / cover;
    z-index: 0;
}
@media screen and (max-width:768px){
    .introBg{
        width:100%;
        background: rgba(145, 72, 151, 1) url(../img/top/introdction/intro_bg.png) no-repeat right bottom / cover;
    }
}
.introImg{
    width: min(calc(1000 / var(--vw-min) * 100vw), 1000px);
    height: min(calc(179 / var(--vw-min) * 100vw), 179px);
    position: absolute;
    right: 0;
    top:max(calc(-100 / var(--vw-min) * 100vw), -100px);
    z-index: 1;
    overflow: hidden;
}
.introImg__img{
    display: block;
    width: 100%;
    height: 120%;
    background: url(../img/top/introdction/intro_img.jpg) no-repeat center top / cover;
    will-change: transform;
}
@media screen and (max-width:768px){
    .introImg{
        width: calc(622 / var(--vw-min) * 100vw);
        height: calc(179 / var(--vw-min) * 100vw);
        top:calc(-100 / var(--vw-min) * 100vw);
    }
    .introImg__img{
        background: url(../img/top/introdction/intro_img_sp.jpg) no-repeat center center / cover;
    }
}


.introDeco{
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
    will-change: transform, opacity;
}
@keyframes introDecoBloomCcw {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-120deg);
    }
    65% {
        opacity: 1;
        transform: scale(1.08) rotate(8deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
@keyframes introDecoBloomCw {
    0% {
        opacity: 0;
        transform: scale(0) rotate(120deg);
    }
    65% {
        opacity: 1;
        transform: scale(1.08) rotate(-8deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
.introduction.--is-ani .introDeco._item1{
    animation: introDecoBloomCcw 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.4s;
}
.introduction.--is-ani .introDeco._item2{
    animation: introDecoBloomCw 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.55s;
}
.introduction.--is-ani .introDeco._item3{
    animation: introDecoBloomCw 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.45s;
}
.introduction.--is-ani .introDeco._item4{
    animation: introDecoBloomCcw 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.65s;
}
.introDeco._item1{
    display: block;
    bottom: min(calc(214 / var(--vw-min) * 100vw), 214px);
    left: max(calc(-20 / var(--vw-min) * 100vw), -20px);
    width: min(calc(64 / var(--vw-min) * 100vw), 64px);
    height: min(calc(64 / var(--vw-min) * 100vw), 64px);
    background: url(../img/top/introdction/deco_f1.svg) no-repeat center center / cover;
}
.introDeco._item2{
    display: block;
    bottom: min(calc(300 / var(--vw-min) * 100vw), 300px);
    left: min(calc(40 / var(--vw-min) * 100vw), 40px);
    width: min(calc(32 / var(--vw-min) * 100vw), 32px);
    height: min(calc(32 / var(--vw-min) * 100vw), 32px);
    background: url(../img/top/introdction/deco_f2.svg) no-repeat center center / cover;
}
@media screen and (max-width:768px){
    .introDeco._item1,
    .introDeco._item2{
        display: none;
    }
}
.introDeco._item3{
    display: block;
    top: min(calc(200 / var(--vw-min) * 100vw), 200px);
    right: max(calc(-32 / var(--vw-min) * 100vw), -32px);
    width: min(calc(64 / var(--vw-min) * 100vw), 64px);
    height: min(calc(64 / var(--vw-min) * 100vw), 64px);
    background: url(../img/top/introdction/deco_f1.svg) no-repeat center center / cover;
}
.introDeco._item4{
    display: block;
    top: min(calc(300 / var(--vw-min) * 100vw), 300px);
    right: max(calc(-64 / var(--vw-min) * 100vw), -64px);
    width: min(calc(32 / var(--vw-min) * 100vw), 32px);
    height: min(calc(32 / var(--vw-min) * 100vw), 32px);
    background: url(../img/top/introdction/deco_f2.svg) no-repeat center center / cover;
}
@media screen and (max-width:768px){
    .introDeco._item3{
        top: calc(128 / var(--vw-min) * 100vw);
        right: calc(100 / var(--vw-min) * 100vw);
        width: calc(64 / var(--vw-min) * 100vw);
        height: calc(64 / var(--vw-min) * 100vw);
    }
    .introDeco._item4{
        top: calc(211    / var(--vw-min) * 100vw);
        right: calc(80 / var(--vw-min) * 100vw);
        width: calc(32 / var(--vw-min) * 100vw);
        height: calc(32 / var(--vw-min) * 100vw);
    }
}

.introduction .section__inner{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: min(calc(36 / var(--vw-min) * 100vw), 36px);
    padding-top: min(calc(144 / var(--vw-min) * 100vw), 144px);
    padding-bottom: min(calc(144 / var(--vw-min) * 100vw), 144px);
}
@media screen and (max-width:768px){
    .introduction .section__inner{
        flex-direction: column;
        align-items: flex-start;
        gap: calc(24 / var(--vw-min) * 100vw);
        padding-top: calc(64 / var(--vw-min) * 100vw);
        padding-bottom: calc(140 / var(--vw-min) * 100vw);
    }
}

.introduction .section__ttlWrap{
    position: absolute;
    top: max(calc(-108 / var(--vw-min) * 100vw), -108px);
    left: 0;
}
.introduction .section__ttl {
    width: min(calc(123 / var(--vw-min) * 100vw), 123px);
    height: min(calc(456 / var(--vw-min) * 100vw), 456px);
    background: url(../img/top/ttl_introdction.png) no-repeat center center / contain;
    z-index: 2;
    position: relative;
}
@media screen and (max-width:768px){
    .introduction .section__ttlWrap{
        position: relative;
        top: unset;
        left: unset;
    }
    .introduction .section__ttl {
        width: calc(710 / var(--vw-min) * 100vw);
        height: calc(170 / var(--vw-min) * 100vw);
        background: url(../img/top/ttl_introdction_sp.png) no-repeat center center / contain;
        margin-top: calc(60 / var(--vw-min) * 100vw);
        margin-bottom: calc(30 / var(--vw-min) * 100vw);
    }
}

.introduction .section__innerCont{
    width: min(calc(554 / var(--vw-min) * 100vw), 554px);
    margin-left: min(calc(180 / var(--vw-min) * 100vw), 180px);
}
.introTxtWrap{
    display: flex;
    flex-direction: column;
    gap: min(calc(36 / var(--vw-min) * 100vw), 36px);
}
.introTxt{
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    line-height:min(calc(36 / var(--vw-min) * 100vw), 36px);
    letter-spacing: 0.07em;
    color: #fff;
}
.introTxt__txt:not(:last-child){
    margin-bottom: 2em;
}
.introTxt__txt._txtL{
    font-size: min(calc(26 / var(--vw-min) * 100vw), 26px);
    line-height:min(calc(52 / var(--vw-min) * 100vw), 52px);
}
.introTxt__txt ruby rt{
    font-size: 0.45em;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .introduction .section__innerCont{
        width: 100%;
        margin-left: unset;
        padding-left: calc(128 / var(--vw-min) * 100vw);
        padding-right: calc(48 / var(--vw-min) * 100vw);
    }
    .introTxt{
        font-size: calc(26 / var(--vw-min) * 100vw);
        line-height: calc(46 / var(--vw-min) * 100vw);
    }
    .introTxt__txt._txtL{
        font-size: calc(32 / var(--vw-min) * 100vw);
        line-height: calc(57.6 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * staffcast
-------------------------------------------------*/

.staffcast{
    padding: min(calc(180 / var(--vw-min) * 100vw), 180px) 0;
    color: #fff;
}
.staffcastBg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/top/staffcast/staffcast_bg.png) no-repeat top center / 100% auto;
    z-index: 0;
    pointer-events: none;
}
@media screen and (max-width:768px){
    .staffcastBg{
        background: url(../img/top/staffcast/staffcast_bg_houtai_sp.png) no-repeat top center / 100% auto;
    }
}
.staffcast__decoWrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.staffcast__deco1{
    width: min(calc(800 / var(--vw-min) * 100vw), 800px);
    height: min(calc(800 / var(--vw-min) * 100vw), 800px);
    position: absolute;
    z-index: 1;
    opacity: 0.7;
    transform: scale(0.75);
    transform-origin: center center;
    background: url(../img/common/deco/blood_blur_02.png) no-repeat center center / contain;
    bottom: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    left: min(calc(-150 / var(--vw-min) * 100vw), -150px);
    animation: fvDecoBleed 3.2s ease-in-out 1.8s infinite alternate;
}
.staffcast__deco2{
    width: min(calc(800 / var(--vw-min) * 100vw), 800px);
    height: min(calc(800 / var(--vw-min) * 100vw), 800px);
    position: absolute;
    z-index: 1; 
    opacity: 0.5;
    transform: scale(0.5);
    transform-origin: center center;
    background: url(../img/common/deco/blood_blur_03.png) no-repeat center center / contain;
    top: min(calc(-200 / var(--vw-min) * 100vw), -200px);
    right:0;
    animation: fvDecoBleed 3.2s ease-in-out .3s infinite alternate;
}

@media screen and (max-width:768px){
    .staffcast__deco1{
        width: calc(880 / var(--vw-min) * 100vw);
        height: calc(880 / var(--vw-min) * 100vw);
        bottom: calc(-100 / var(--vw-min) * 100vw);
        left: calc(-200 / var(--vw-min) * 100vw);
    }
}
.staffcastBgSp{
    display: none;
}
@media screen and (max-width:768px){
    .staffcastBgSp{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/top/staffcast/staffcast_bg_top_sp.png) no-repeat top center / 100% auto,  url(../img/top/staffcast/staffcast_bg_btm_sp.png) no-repeat bottom center / 100% auto;
        z-index: 0;
        pointer-events: none;
    }
}
.staffcast .section__ttlWrap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: min(calc(100 / var(--vw-min) * 100vw), 100px);
    position: relative;
    z-index: 2;
}
/*
.staffcast .section__ttl {
    width: min(calc(695 / var(--vw-min) * 100vw), 695px);
    height: min(calc(148 / var(--vw-min) * 100vw), 148px);
    background: url(../img/top/ttl_staffcast.png) no-repeat center center / contain;
    z-index: 1;
}
*/
.staffcast .section__ttl {
    width: min(calc(695 / var(--vw-min) * 100vw), 695px);
    height: min(calc(160 / var(--vw-min) * 100vw), 160px);
    background: url(../img/top/ttl_staffcast.png) no-repeat top center / 100% auto;
    z-index: 1;
}

.staffcastListsWrap{
    display: flex;
}
.staffcastListsWrap:not(:last-child){
    margin-bottom: min(calc(100 / var(--vw-min) * 100vw), 100px);
}
@media screen and (max-width:768px){
    .staffcastListsWrap{
        flex-direction: column;
        padding-left: calc(128 / var(--vw-min) * 100vw);
        padding-right: calc(48 / var(--vw-min) * 100vw);
    }
    .staffcastListsWrap:not(:last-child){
        margin-bottom: calc(140 / var(--vw-min) * 100vw);
    }
}
.staffcastLists__ttl{
    width: min(calc(146 / var(--vw-min) * 100vw), 146px);
    font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
    line-height:min(calc(36 / var(--vw-min) * 100vw), 36px);
    font-family: var(--font-en);
    font-weight: 400;
    color: #fff;
}  
@media screen and (max-width:768px){
    .staffcastLists__ttl{
        width: auto;
        font-size: calc(40 / var(--vw-min) * 100vw);
        line-height: 1;
        margin-bottom: calc(48 / var(--vw-min) * 100vw);
    }
}

.staffcastLists{
    display: flex;
    flex-direction: column;
    gap: min(calc(20 / var(--vw-min) * 100vw), 20px);
} 
@media screen and (max-width:768px){
    .staffcastLists{
        gap: calc(48 / var(--vw-min) * 100vw);
    }
}

.staffcastItemInner{
    display: flex;
    align-items: baseline;
}
@media screen and (max-width:768px){
    .staffcastItemInner{
        flex-direction: column;
        align-items: flex-start;
    }
}

.staffcastItem .item__ttl{
    display: flex;
    align-items: center;
    gap: min(calc(12 / var(--vw-min) * 100vw), 12px);
    width: min(calc(380 / var(--vw-min) * 100vw), 380px);
    flex-shrink: 0;
    color: var(--color-purple);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    white-space: nowrap;
}
.staffcastItem .item__ttl::after{
    content: "";
    flex: 1;
    min-width: 0;
    height: min(calc(5 / var(--vw-min) * 100vw), 5px);
    background:
        linear-gradient(#fff, #fff) top / 100% 1px no-repeat,
        linear-gradient(#fff, #fff) bottom / 100% 1px no-repeat;
}
.staffcastItem .item__name{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: min(calc(8 / var(--vw-min) * 100vw), 8px);
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    line-height:min(calc(36 / var(--vw-min) * 100vw), 36px);
    color: #fff;
    margin-left: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
.staffcastItem small{
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    line-height: 1.1;
}
@media screen and (max-width:768px){
    .staffcastItemInner{
        gap: calc(6 / var(--vw-min) * 100vw);
    }
    .staffcastItem .item__ttl{
        width:unset;
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
    .staffcastItem .item__ttl::after{
        display: none;
    }
    .staffcastItem .item__name{
        font-size: calc(36 / var(--vw-min) * 100vw);
        line-height: calc(32 / var(--vw-min) * 100vw);
        margin-left: 0;
    }
    .staffcastItem small{
        font-size: calc(22 / var(--vw-min) * 100vw);
        line-height: calc(32 / var(--vw-min) * 100vw);
    }
}
.staffcastItem .item__name__txtWrap{
    display: flex;
    flex-direction: column;
}
.item__name__txt{
    display: flex;
    align-items: center;
    gap: min(calc(8 / var(--vw-min) * 100vw), 8px);
}
.staffcastItem .item__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: min(calc(8 / var(--vw-min) * 100vw), 8px);
    padding: min(calc(2 / var(--vw-min) * 100vw), 2px) min(calc(16 / var(--vw-min) * 100vw), 16px);
    background-color: var(--color-purple);
    border-radius: min(calc(3 / var(--vw-min) * 100vw), 3px);
    color: #fff;
    font-family: var(--font-en);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color .3s ease;
}
@media screen and (hover: hover){
    .staffcastItem .item__btn:hover{
        background-color: #000;
    }
}
@media screen and (max-width:768px){
    .staffcastItem .item__btn{
        font-size: calc(26 / var(--vw-min) * 100vw);
        padding: 0 calc(16 / var(--vw-min) * 100vw);
    }
}

/*-----------------------------------------------
 * comics
-------------------------------------------------*/
.comics{
    position: relative;
    padding: min(calc(120 / var(--vw-min) * 100vw), 120px) 0 min(calc(140 / var(--vw-min) * 100vw), 140px);
    color: var(--color-white);
    overflow: hidden;
    padding-left: min(calc(128 / var(--vw-min) * 100vw), 128px);

}
/*
.comicsBg{
    display: block;
    position: absolute;
    inset: 0;
    background: #12080e url(../img/top/comics_bg.jpg) no-repeat center bottom / 100% auto;
    z-index: 0;
    pointer-events: none;
}*/
.comics .section__inner{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: min(calc(86 / var(--vw-min) * 100vw), 86px);
    width: min(calc(1366 / var(--vw-min) * 100vw), 1366px);
    margin-left: auto;
    margin-right: 0;
}
.comics .section__ttlWrap{
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.comics .section__ttl{
    width: min(calc(82 / var(--vw-min) * 100vw), 82px);
    height: min(calc(435 / var(--vw-min) * 100vw), 435px);
    background: url(../img/top/ttl_comics.png) no-repeat center center / contain;
}
@media screen and (max-width:768px){
    .comics{
        padding: calc(80 / var(--vw-min) * 100vw) 0 calc(172 / var(--vw-min) * 100vw);
    }
    .comics .section__inner{
        flex-direction: column;
        gap: calc(40 / var(--vw-min) * 100vw);
        width: 100%;
        max-width: none;
        padding-left: calc(124 / var(--vw-min) * 100vw);
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .comics .section__innerCont{
        width: 100%;
        max-width: none;
    }
    .comics .section__ttl{
        width: calc(568 / var(--vw-min) * 100vw);
        height: calc(78 / var(--vw-min) * 100vw);
        background: url(../img/top/ttl_comics_sp.png) no-repeat center center / contain;
    }
}

@media screen and (min-width:1367px){
    .comics{
        --comics-extra: calc(100vw - 1366px);
        --comics-scale: calc((1366px + var(--comics-extra) * 0.7) / 1366px);
        padding-left: calc(128px * var(--comics-scale));
    }
    .comics .section__inner{
        width: calc(1366px + var(--comics-extra) * 0.7);
        margin-left: calc(var(--comics-extra) * 0.3);
    }
}

.comics .section__innerCont{
    flex: 1;
   /* width: min(calc(833 / var(--vw-min) * 100vw), 833px);*/
    min-width: 0;
    position: relative;
    z-index: 2;
}
.comicsHead{
    margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
    width: min(calc(833 / var(--vw-min) * 100vw), 833px);
}
.comicsHead__ttlWrap{
    padding: min(calc(5 / var(--vw-min) * 100vw), 5px) 0;
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
}
.comicsHead__ttl{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: min(calc(16 / var(--vw-min) * 100vw), 16px) min(calc(24 / var(--vw-min) * 100vw), 24px);
    padding: min(calc(10 / var(--vw-min) * 100vw), 10px) 0;
    font-family: var(--font-noto);
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
    line-height: 1.6;
}
.comicsHead__ttl__main{
    font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.comicsHead__ttl__author{
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 400;
}
.comicsHead__lead{
    font-family: var(--font-noto);
    margin-top: min(calc(16 / var(--vw-min) * 100vw), 16px);
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 400;

}
@media screen and (max-width:768px){
    .comicsHead{
        width: 100%;
        padding-right: calc(48 / var(--vw-min) * 100vw);
        margin-bottom: calc(40 / var(--vw-min) * 100vw);
    }
    .comicsHead__ttl{
        gap: calc(8 / var(--vw-min) * 100vw);
        padding: calc(24 / var(--vw-min) * 100vw) 0;
    }
    .comicsHead__ttl__main{
        font-size: calc(32 / var(--vw-min) * 100vw);
    }
    .comicsHead__ttl__author{
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
    .comicsHead__lead{
        margin-top: calc(20 / var(--vw-min) * 100vw);
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
}
.comicsSlider{
    position: relative;
    overflow: hidden;

}
.comicsSlider .swiper{
    overflow: visible;
    padding-right:calc(150 / var(--vw-min) * 100vw);
}
.comicsItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(calc(240 / var(--vw-min) * 100vw), 240px)!important;
}
.comicsItem__link{
    display: block;
    text-decoration: none;
    color: var(--color-white);
    position: relative;
}
.comicsItem__imgWrap{
    display: block;
    overflow: hidden;
    transition: all .3s ease;
}
.comicsItem__img{
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}
.comicsItem__link::after{
    content: "";
    display: block;
    position: absolute;
    top: min(calc(10 / var(--vw-min) * 100vw), 10px);
    left: min(calc(10 / var(--vw-min) * 100vw), 10px);
    width: min(calc(240 / var(--vw-min) * 100vw), 240px);
    height: min(calc(341 / var(--vw-min) * 100vw), 341px);
    background-color: var(--color-purple);
    z-index: -1;
    pointer-events: none;
    transition: left .3s ease, top .3s ease;
}
.comicsItem__vol{
    display: block;
    margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
    font-family: var(--font-noto);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    text-align: center;
}
.comicsNav{
    display: flex;
    justify-content: center;
    gap: min(calc(22 / var(--vw-min) * 100vw), 22px);
    margin-top: min(calc(48 / var(--vw-min) * 100vw), 48px);
}
.comicsNav__btn{
    transition: background-color .3s ease;
}
@media screen and (hover: hover){
    .comicsNav__btn:hover{
        background-color: var(--color-purple);
    }
}

@media screen and (min-width:769px) and (hover: hover) and (pointer: fine){
    .comicsItem__link:hover .comicsItem__imgWrap{
        border: 2px solid var(--color-purple);
    }
    .comicsItem__link:hover .comicsItem__img{
        transform: scale(1.05);
    }
    .comicsItem__link:hover::after{
        left: 0;
        top: 0;
    }
}
@media screen and (max-width:768px){
    .comicsItem{
        width: calc(280 / var(--vw-min) * 100vw);
    }
    .comicsItem__vol{
        margin-top: calc(16 / var(--vw-min) * 100vw);
        font-size: calc(26 / var(--vw-min) * 100vw);
    }
    .comicsNav{
        gap: calc(16 / var(--vw-min) * 100vw);
        margin-top: calc(48 / var(--vw-min) * 100vw);
    }
}