@charset "utf-8";
/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
html.is-loading,
html.is-loading body{
	overflow: hidden;
}
.loading{
	position: fixed;
	inset: 0;
	z-index: 9000;
	background-color: #000;
	opacity: 1;
	transition: opacity 1.2s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
	pointer-events: auto;
}
.loading.is-hide{
	opacity: 0;
	pointer-events: none;
}
/*-----------------------------------------------
 * Bg
-------------------------------------------------*/
.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background-color: #000;
}
.bg__img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(1692 / var(--vw-min) * 100vw);
    background-image: url(../img/top/bg.jpg);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    will-change: transform;
}
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA")) {
    .bg__img{
        background-image: url(../img/top/bg.webp);
    }
}
@media screen and (max-width:768px){
    .bg__img{
        height: calc(2036 / var(--vw-min) * 100vw);
        background-image: url(../img/top/bg.jpg);
        background-size: calc(1440 / var(--vw-min) * 100vw) auto;
    }
}
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA")) {
    @media screen and (max-width:768px){
        .bg__img{
            background-image: url(../img/top/bg.webp);
        }
    }
}
/*-----------------------------------------------
 * Main
-------------------------------------------------*/
.main{
    position: relative;
    z-index: 1;
}
/*-----------------------------------------------
 * FV
-------------------------------------------------*/
.fv{
    position: relative;
    height: min(calc(768 / var(--vw-min) * 100vw), 768px);
}
.fv__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

@media screen and (max-width:768px){
    .fv{
        height: calc(1064 / var(--vw-min) * 100vw);
    }
}

.fv__title{
    background: url(../img/common/logo/logo.png) no-repeat center center / contain;
    width: min(calc(640 / var(--vw-min) * 100vw), 640px);
    height: min(calc(294 / var(--vw-min) * 100vw), 294px);
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
}
.fv__day{
    background: url(../img/top/fv/fv_day.png) no-repeat center center / contain;
    width: min(calc(496 / var(--vw-min) * 100vw), 496px);
    height: min(calc(170 / var(--vw-min) * 100vw), 170px);
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
    transition-delay: 1s;
}
.fv.is-ready .fv__title,
.fv.is-ready .fv__day{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
@media screen and (max-width:768px){
    .fv__title{
        width: calc(640 / var(--vw-min) * 100vw);
        height: calc(294 / var(--vw-min) * 100vw);
    }
    .fv__day{
        width: calc(640 / var(--vw-min) * 100vw);
        height: calc(210 / var(--vw-min) * 100vw);
    }
}


.sectionTitleWrap{
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: min(calc(24 / var(--vw-min) * 100vw), 24px) 0;
    margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
}  
.sectionTitleWrap::before{
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: auto;
    background: url(../img/top/ttl_deco.png) no-repeat center center / contain;
}  

.sectionTitle{
    position: relative;
    z-index: 2;
    display: inline-block;
    min-width: min(calc(333 / var(--vw-min) * 100vw), 333px);
    height: min(calc(75 / var(--vw-min) * 100vw), 75px);
    padding: 0 min(calc(55 / var(--vw-min) * 100vw), 55px);
    background-image:
        url(../img/top/ttl_deco_dot.svg),
        url(../img/top/ttl_deco_dot.svg),
        url(../img/top/ttl_deco_dot.svg),
        url(../img/top/ttl_deco_dot.svg);
    background-repeat: no-repeat;
    background-size: 3px auto;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sectionTitle__txt{
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: min(calc(56 / var(--vw-min) * 100vw), 56px);
    font-weight: 400;
    color: #fff;
    background: var(--gradation_gold);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height:min(calc(72 / var(--vw-min) * 100vw), 72px);
}
.sectionTitle::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background: linear-gradient(90deg, rgba(22, 35, 132, 0.00) 0%, rgba(19, 46, 180, 0.50) 25%, #3596FF 50%, #132EB4 75%, rgba(22, 35, 132, 0.00) 100%);
}    
 

.sectionTitle__deco{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.sectionTitle__deco::before{
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gradation_gold);
}
.sectionTitle__deco::after{
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--gradation_gold);
}
@media screen and (max-width:768px){
    .sectionTitleWrap{
        padding: calc(33     / var(--vw-min) * 100vw) 0;
    
    }
    .sectionTitle{
        min-width: calc(434 / var(--vw-min) * 100vw);
        height: calc(96 / var(--vw-min) * 100vw);
        padding: 0 calc(74 / var(--vw-min) * 100vw);
    }
    .sectionTitle__txt{
        font-size: calc(72 / var(--vw-min) * 100vw);
        line-height: calc(96 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * Introduction
-------------------------------------------------*/
.introduction{
    position: relative;
    border-top: 2px solid #8B9DDD;
    border-bottom: 2px solid #8B9DDD;
    background: linear-gradient(180deg, rgba(58, 12, 104, 0.65) 0%, rgba(32, 35, 173, 0.65) 100%);
    padding: min(calc(95 / var(--vw-min) * 100vw), 95px) 0;
}
.introduction__line{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: calc(100% - 8px);
    border-top: 1px solid #8B9DDD;
    border-bottom: 1px solid #8B9DDD;
}
.introduction__deco{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-top: 1px solid #8B9DDD;
    border-bottom: 1px solid #8B9DDD;
    z-index: 1;
    display: block;
    background-image: url(../img/top/intro_deco.png);
    background-size: min(calc(990 / var(--vw-min) * 100vw), 990px) auto;
    background-position: center center;
    background-repeat: no-repeat;
}
@media screen and (max-width:768px){
    .introduction{
        min-height: calc(609 / var(--vw-min) * 100vw);
    }
    .introduction__deco{
        background-image: url(../img/top/intro_deco_sp.png);
        background-size: 102% auto;
    }
}



.introduction__inner{
    width: min(calc(780 / var(--vw-min) * 100vw), 780px);
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
@media screen and (max-width:768px){
    .introduction__inner{
        width: 100%;
        padding: 0 calc(48 / var(--vw-min) * 100vw);
    }
}
.introduction__title{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--white, #FFF);
    paint-order: stroke fill;
    /* Safari: text-shadow は -webkit-text-stroke と併用すると描画されないため drop-shadow を使う */
    filter:
        drop-shadow(0 0 min(calc(6 / var(--vw-min) * 100vw), 6px) #0078FF)
        drop-shadow(0 0 min(calc(12 / var(--vw-min) * 100vw), 12px) #0078FF);
    font-family: var(--font-ja);
    font-size: min(calc(32 / var(--vw-min) * 100vw), 32px);
    font-weight: 700;
    line-height: min(calc(51.2 / var(--vw-min) * 100vw), 51.2px);
    letter-spacing: min(calc(1.6 / var(--vw-min) * 100vw), 1.6px);
    margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
}
.introduction__txt{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--white, #FFF);
    paint-order: stroke fill;
    filter:
        drop-shadow(0 0 min(calc(6 / var(--vw-min) * 100vw), 6px) #0078FF)
        drop-shadow(0 0 min(calc(12 / var(--vw-min) * 100vw), 12px) #0078FF);
    font-family: var(--font-ja);
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    font-style: normal;
    font-weight: 400;
    line-height: min(calc(25.6 / var(--vw-min) * 100vw), 25.6px);
    letter-spacing: min(calc(0.8 / var(--vw-min) * 100vw), 0.8px);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
    transition-delay: 0.35s;
}
.introduction.--is-ani .introduction__title,
.introduction.--is-ani .introduction__txt{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.introduction__txt__small{
    font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
    margin-top: 1em;
    display: inline-block;
}
@media screen and (max-width:768px){
    .introduction__title{
        font-size: calc(36 / var(--vw-min) * 100vw);
        line-height: calc(57.6 / var(--vw-min) * 100vw);
    }
    .introduction__txt{
        font-size: calc(26 / var(--vw-min) * 100vw);
        line-height: calc(41.6 / var(--vw-min) * 100vw);
    }
    .introduction__txt__small{
        font-size: calc(22 / var(--vw-min) * 100vw);
    }
}
.cast{
    margin-bottom: min(calc(133 / var(--vw-min) * 100vw), 133px);

}
.cast .sectionTitleWrap,
.cast .castListsWrap{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
}
.cast .castListsWrap{
    transition-delay: 0.35s;
}
.cast.--is-ani .sectionTitleWrap,
.cast.--is-ani .castListsWrap{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.cast__inner{
    width: min(calc(780 / var(--vw-min) * 100vw), 780px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .cast__inner{
        width: 100%;
        padding: 0 calc(48 / var(--vw-min) * 100vw);
    }
}
.castListsWrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.castLists{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.castItem{
    color: #FFF;
    text-align: center;
    font-family: var(--font-ja);
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);    font-weight: 700;
    line-height: min(calc(40 / var(--vw-min) * 100vw), 40px);
    letter-spacing: 1px;
}
@media screen and (max-width:768px){
    .castLists{
        gap: calc(30 / var(--vw-min) * 100vw);
    }
    .castItem{
        font-size: calc(28 / var(--vw-min) * 100vw);
        line-height: calc(56 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * Information
-------------------------------------------------*/
.information{
    color: #FFF;
}
.information .sectionTitleWrap,
.information .information__inner{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
        transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
}
.information .information__inner{
    transition-delay: 0.35s;
}
.information.--is-ani .sectionTitleWrap,
.information.--is-ani .information__inner{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.information__inner{
    width: min(calc(780 / var(--vw-min) * 100vw), 780px);
    margin: 0 auto;
}
@media screen and (max-width:768px){
    .information__inner{
        width: 100%;
        padding: 0 calc(48 / var(--vw-min) * 100vw);
    }
}
.infoBox:not(:last-child){
    margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
    padding-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
    border-bottom: 1px dashed rgba(139, 157, 221, 0.3);
}
.infoBox__title{
    font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-weight: 700;
    color: #F6D491;
    line-height: min(calc(40 / var(--vw-min) * 100vw), 40px);
    padding-left: min(calc(24 / var(--vw-min) * 100vw), 24px);
    margin-bottom: min(calc(12 / var(--vw-min) * 100vw), 12px);
    background: url(../img/common/icon/ic_mark.svg) no-repeat left top min(calc(14 / var(--vw-min) * 100vw), 14px)  / min(calc(16 / var(--vw-min) * 100vw), 16px) auto;
}
@media screen and (max-width:768px){
    .infoBox__title{
        font-size: calc(28 / var(--vw-min) * 100vw);
        line-height: calc(56 / var(--vw-min) * 100vw);
        padding-left: calc(36 / var(--vw-min) * 100vw);
        background-size: calc(24 / var(--vw-min) * 100vw) auto;
        background-position: left top calc(18/ var(--vw-min) * 100vw);
    }
}
.infoBox__txt{
    font-size:  min(calc(16 / var(--vw-min) * 100vw), 16px);
    font-weight: 400;
    line-height: min(calc(25.6 / var(--vw-min) * 100vw), 25.6px);
    letter-spacing: min(calc(0.8 / var(--vw-min) * 100vw), 0.8px);
}
.infoBox__txt small{
    font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
}
@media screen and (max-width:768px){
    .infoBox__txt{
        font-size: calc(26 / var(--vw-min) * 100vw);
        line-height: calc(41.6 / var(--vw-min) * 100vw);
    }
    .infoBox__txt small{
        font-size: calc(20 / var(--vw-min) * 100vw);
        line-height: calc(32 / var(--vw-min) * 100vw);
    }
}

.map__link{
    border: 1.5px solid #FFF;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: min(calc(12 / var(--vw-min) * 100vw), 12px);
    text-decoration: none;
    padding: 0 min(calc(7 / var(--vw-min) * 100vw), 7px);
    margin-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
    transition: background .3s ease, color .3s ease;
}
.map__link .ic_arrow{
    display: inline-block;
    margin-left: min(calc(4 / var(--vw-min) * 100vw), 4px);
    width: min(calc(8 / var(--vw-min) * 100vw), 8px);
    height: min(calc(8 / var(--vw-min) * 100vw), 8px);
    background: #FFF;
    transition: background .3s ease;
    mask: url(../img/common/icon/ic_arrow.svg) no-repeat center center / contain;
}
@media screen and (max-width:768px){
    .map__link{
        font-size: calc(22 / var(--vw-min) * 100vw);
        line-height: calc(32 / var(--vw-min) * 100vw);
        padding: 0 calc(12 / var(--vw-min) * 100vw);
        margin-left: calc(12 / var(--vw-min) * 100vw);
    }
    .map__link .ic_arrow{
        width: calc(9 / var(--vw-min) * 100vw);
        height: calc(9 / var(--vw-min) * 100vw);
    }
}
@media screen and (hover: hover){
    .map__link:hover{
       background: #FFF;
       color: #000;
    }
    .map__link:hover .ic_arrow{
        background: #000;
    }
}


.sectionWrap{
    background: rgba(0, 0, 0, 0.6);
    padding: min(calc(133 / var(--vw-min) * 100vw), 133px) 0;
}

/*-----------------------------------------------
 * Float Banner
-------------------------------------------------*/
.floatBnr{
	position: fixed;
	right: min(calc(32 / var(--vw-min) * 100vw), 32px);
	bottom: min(calc(32 / var(--vw-min) * 100vw), 32px);
	z-index: 100;
	width: min(calc(270 / var(--vw-min) * 100vw), 270px);
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 12px, 0);
	transition:
		opacity 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1)),
		visibility 2.4s,
		transform 2.4s var(--easing-outquart, cubic-bezier(0.25, 1, 0.5, 1));
	transition-delay: 2s; /* fv__day(delay 1s) の後 */
	pointer-events: none;
}
html:not(.is-loading) .floatBnr{
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}
.floatBnr__link{
	display: block;
	text-decoration: none;
	transition: opacity .3s ease;
	box-shadow: 0 0 30px 0 #260320;
}
.floatBnr__img{
	display: block;
	width: 100%;
	height: auto;
}
@media screen and (hover: hover){
	.floatBnr__link:hover{
		opacity: 0.85;
	}
}
@media screen and (max-width:768px){
	.floatBnr{
		right: calc(16 / var(--vw-min) * 100vw);
		bottom: calc(24 / var(--vw-min) * 100vw);
		width: calc(390 / var(--vw-min) * 100vw);
	}
}
@media screen and (max-width:768px){
    .footer{
        padding-bottom: 25vw;
    }
}