/* bg */
.bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;pointer-events: none;z-index: -1;
    video{position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 100%;object-fit: cover;object-position: top;}
}

/* frame */
.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;
    &:before{position: absolute;display: block;content: "";top: 0;left: 0;width: 100%;height: 100%;border: 4px solid #b48b1e;}
    .deco{position: absolute;width: min(170px,17vw);
        &.top_l{top: 0;left: 0;transform: scale(-1, -1);}
        &.top_r{top: 0;right: 0;transform: scale(1, -1);}
        &.bottom_l{bottom: 0;left: 0;transform: scale(-1, 1);}
        &.bottom_r{bottom: 0;right: 0;}
    }
    .border-top{border-top: 2px dotted #FFFF00;display: block;width: calc(100% - min(340px,34vw));position: absolute;top: min(10px,1vw);left: 50%;transform: translateX(-50%);}
    .border-bottom{border-bottom: 2px dotted #FFFF00;display: block;width: calc(100% - min(340px,34vw));position: absolute;bottom: min(10px,1vw);left: 50%;transform: translateX(-50%);}
    .border-left{border-left: 2px dotted #FFFF00;display: block;height: calc(100% - min(340px,34vw));position: absolute;left: min(10px,1vw);top: 50%;transform: translateY(-50%);}
    .border-right{border-right: 2px dotted #FFFF00;display: block;height: calc(100% - min(340px,34vw));position: absolute;right: min(10px,1vw);top: 50%;transform: translateY(-50%);}
}
@media only screen and (max-width: 835px){
    .frame{
        &:before{border: 2px solid #b48b1e;}
        .border-top{border-top: 1px dotted #FFFF00;}
        .border-bottom{border-bottom: 1px dotted #FFFF00;}
        .border-left{border-left: 1px dotted #FFFF00;}
        .border-right{border-right: 1px dotted #FFFF00;}
    }
}

/* 見出し */
.h_title{font-family: var(--f_02);font-size: min(200px,14vw);line-height: 0.8em;margin-bottom: calc(var(--base_distance) * 0.6);white-space: nowrap;padding-top: 0.4em;position: relative;
    &:after{position: absolute;content: "";background-image: url(../images/parts/h_deco.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 1em;height: 0.3em;top: 0;left: 50%;transform: translateX(-50%);}
    span{display: block;font-size: 0.1em;line-height: 1em;letter-spacing: 0.05em; position: relative;}

    &.no_deco{
        &:after{display: none;}
    }
}
@media only screen and (max-width: 835px){
    .h_title{font-size: 22vw;line-height: 0.8em;margin-bottom: calc(var(--base_distance) * 1);
        span{font-size: 0.2em;line-height: 1em;}
    }
}

/* scroll animation */
[data-scroll="reveal"] {
	opacity: 0;
    top: 30px;
	position: relative;
	transition: 0.8s;

	&.scroll_in {
		opacity: 1;
		top: 0;
	}
}

/*----------------------------------------
    top page
------------------------------------------*/


/* fv */
.fv{position: relative;margin-top: calc(60px + 1vw);aspect-ratio: 16 / 8.8;margin-bottom: calc(var(--base_distance) * 1.2);
    .inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;justify-content: space-between;align-items: center;width: 90%;max-width: 1620px;gap: 0;
        .kv{width: 43%;
            img{width: 100%; height: auto;}
        }
        .text{width: 55%;
            .title{margin-bottom: 2vw;
                img{width: 100%; height: auto;}
            }
            .staff{width: 84%;margin: 0 auto 2vw;
                img{width: 100%; height: auto;}
            }
            .date{width: 90%;margin: 0 auto;
                img{width: 100%; height: auto;}
            }
        }
    }
}

/* fv OP animation */
.fv{
    .inner{
        .kv{
            img{filter: blur(20px) brightness(1.2); transform: scale(1.2); opacity: 0;}
        }
        .text{
            .title{
                img{filter: blur(20px) brightness(1.2); transform: scale(1.2); opacity: 0;}
            }
            .staff{
                img{filter: blur(20px) brightness(1.2); transform: scale(1.2); opacity: 0;}
            }
            .date{
                img{filter: blur(20px) brightness(1.2); transform: scale(1.2); opacity: 0;}
            }
        }
    }
    &.load_open{
        .inner{
            .kv{
                img{filter: blur(0) brightness(1); transform: scale(1.0); opacity: 1; transition: 1.4s 0.2s;}
            }
            .text{
                .title{
                    img{filter: blur(0) brightness(1); transform: scale(1.0); opacity: 1; transition: 1.4s 0.4s;}
                }
                .staff{
                    img{filter: blur(0) brightness(1); transform: scale(1.0); opacity: 1; transition: 1.4s 0.6s;}
                }
                .date{
                    img{filter: blur(0) brightness(1); transform: scale(1.0); opacity: 1; transition: 1.4s 0.8s;}
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .fv{aspect-ratio: inherit;margin-top: min(120px,16vw);
        .inner{position: relative;top: initial;left: initial;transform: initial;display: block;width: 94%;margin: 0 auto;
            .kv{width: 100%;margin-bottom: 2vw;}
            .text{width: 100%;
                .title{margin-bottom: 6vw;}
            }
        }
    }
}


/* lead text */
.lead_txt{margin-bottom: calc(var(--base_distance) * 1.6);
    img{width: 100%; height: auto;}
}


/* news */
.top_news{margin-bottom: calc(var(--base_distance) * 1.6);
    .h_title{padding: 0;margin-bottom: calc(var(--base_distance) * 0.6);
        span{
            &:before{position: relative;display: inline-block;content: "";background-image: url(../images/parts/h_deco_little.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 0.7em;height: 0.7em;margin-right: 0.2em;}
        }
    }

    .inner{display: flex;justify-content: space-between;gap: 0;
        .left{width: 44%;text-align: left;display: flex;flex-direction: column;justify-content: space-between;}
        .right{width: 49%;}
    }
}

/* 下層 news */
.in_news{margin-bottom: calc(var(--base_distance) * 1.6);}

/* btn */
.more_btn{display: block;font-family: var(--f_02);color: #FFF;font-size: min(24px,2.2vw);letter-spacing: 0.2em;padding: 0.6em;border-bottom: 1px solid #fff;text-align: left;position: relative;
    &:after{position: absolute;content: "";background-image: url(../images/parts/arrow.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 80px;height: 8px;top: 50%;right: 1em;transform: translateY(-50%); transition: 0.3s;}
    &:hover{
        &:after{right: 0.6em;}
    }
}
.btn_outer{margin: 0 auto;margin-top: calc(var(--base_distance) * 0.4);width: min(400px,90vw);
    &.right{
        .more_btn{text-align: right;
            &:after{right: initial; left: 1em;transform: scale(-1, 1);}
            &:hover{
                &:after{right: initial; left: 0.6em;}
            }
        }
    }
}

/* news list */
.news_list{width: 100%; text-align: left;
    .news_item{
        a{display: block; border-bottom:1px solid #715A98; padding: 1.5em 1em; transition: 0.3s;
            .date{color:#FFFF00;font-family: var(--f_02);font-size: min(20px,4.6vw);}
            .txt{color:#FFF; margin:0;}
            &:hover{background-color: #715a986e;}
        }
        &:first-of-type{
            a{border-top: 1px solid #715A98;}
        }
    }
}

@media only screen and (max-width: 835px){
    .top_news{
        .inner{flex-direction: column; gap: 4%;
            .left{width: 100%;
                .more_btn{display: block;font-family: var(--f_02);color: #FFF;font-size: min(24px);letter-spacing: 0.2em;padding: 0.6em;border-bottom: 1px solid #fff;}
            }
            .right{width: 100%;}
        }
    }
    .more_btn{margin-top: 6vw;font-size: min(6vw,24px);}
}


/* story */
.story{position: relative; padding: calc(var(--base_distance) * 1.6) 0;margin-bottom: calc(var(--base_distance) * 1.6);
    &:before{position: absolute;content: ''; background-color: #250F4CA6;width: 100%;height: 100%;top: 0;left: 0;z-index: 1; mix-blend-mode: multiply;pointer-events: none;}
    .txt{font-size: min(24px,1.8vw);font-weight: bold;line-height: 2.4em;
        strong{color:#ff19d9;font-size: 1.6em;line-height: 1.7em;}
    }
}
@media only screen and (max-width: 835px){
    .story{
        .txt{font-size: min(3.8vw,20px);
            strong{font-size: 1.4em;}
        }
    }
}


/* cast */
.cast{margin-bottom: calc(var(--base_distance) * 1.6);
    .cast_list{display: flex; flex-wrap: wrap; justify-content: center; gap: min(40px,3vw) 4%; margin-bottom: calc(var(--base_distance) * 0.8); position: relative;
        &:last-of-type{margin-bottom: 0;}
        li{width: 48%; position: relative;
            &.modal{cursor: pointer;}
            figure{
                img{width: 100%; height: auto;}
            }

            .parts{display: block;position: absolute;background-image: url(../images/cast/08_parts.webp);background-position: center;background-repeat: no-repeat;background-size: contain;width: 58px;height: 102px;bottom: 20px;right: -1px;pointer-events: none;z-index: 1;}
        }
    }
}

.comment_btn{width: min(140px, 30vw);margin: 4px auto 0; cursor: pointer;
    img{width: 100%; height: auto;}
}

/* cast modal */
.cast_modal {position: fixed;inset: 0;z-index: 9999;display: flex;justify-content: center;align-items: center;background: rgba(0, 0, 0, 0.7);opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}
.cast_modal.is-open {opacity: 1;visibility: visible;}
.cast_modal_inner {position: relative;max-width: 100%;max-height: 100%;}
.cast_modal_inner img {display: block;width: auto;max-height: 80vh;}
.close_btn {position: absolute !important;top: 0 !important;right: -96px !important;width: 90px !important;height: 90px !important;cursor: pointer !important;background-image: url(../images/parts/close.webp) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;padding: 0 !important;}

@media only screen and (max-width: 835px){
    .cast{
        .cast_list{flex-direction: column;gap: 6vw;margin-bottom: calc(var(--base_distance) * 1);
            &:last-of-type{margin-bottom: 0;}
            li{width: min(400px,100%);margin: 0 auto;}
        }
    }

    .close_btn{right: 0 !important;top: -8.4vh !important;width: 8vh !important;height: 8vh !important;}
}


/* staff */
.staff{margin-bottom: calc(var(--base_distance) * 1.6);
    .staff_list{display: flex;flex-direction: column;justify-content: center;margin-bottom: calc(var(--base_distance) * 0.26);gap: 0.3em;
        &:last-of-type{margin-bottom: 0;}
        li{width: 100%;}
    }
}


/* schedule */
.schedule{margin-bottom: calc(var(--base_distance) * 1.6);
    .date{width: 80%;margin: 0 auto calc(var(--base_distance) * 0.4);
        img{width: 100%; height: auto;}
    }
    .info_btn{display: block;color: #FFF;font-size: min(20px,2vw);letter-spacing: 0.2em;padding: 0.6em;border-bottom: 1px solid #fff;text-align: left;width: min(460px,54vw);margin: 0 auto calc(var(--base_distance) * 0.4);position: relative;
        &:after{position: absolute;content: "";background-image: url(../images/parts/arrow.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 80px;height: 8px;top: 50%;right: 1em;transform: translateY(-50%); transition: 0.3s;}
        &:hover{
            &:after{right: 0.6em;}
        }
    }
    .sche_img{
        img{width: 100%; height: auto;}
    }
}
@media only screen and (max-width: 835px){
    .schedule{
        .date{width: 100%;}
        .info_btn{font-size: min(16px,3.4vw);width: 100%;margin: 0 auto calc(var(--base_distance) * 0.8);}
    }
}


/* tickets */
.tickets{margin-bottom: calc(var(--base_distance) * 1.6);
    .price_box{width: 80%; margin: 0 auto; margin-bottom: calc(var(--base_distance) * 0.6);
        .price_title{font-size: min(40px,7vw);font-weight: 700;line-height: 1.5em;margin-bottom: 0.6em;
            .small{font-size: 0.5em;}
        }
        .price_list{border-top: 1px solid #fff;border-bottom: 1px solid #fff;margin-bottom: 8px;
            .price_item{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px dotted #fff;padding: 1.2em;font-size: min(30px);font-weight: bold;
                &:last-of-type{border-bottom: none;}
                .type{width: 50%; text-align: left;}
                .price{width: 50%; text-align: right;}
            }
        }
        .note{
    text-align: left;
}
    }
}
@media only screen and (max-width: 835px){
    .tickets{
        .price_box{width: 100%;
            .price_title{}
            .price_list{
                .price_item{display: flex;justify-content: space-between;align-items: center;border-bottom: 1px dotted #fff;padding: 1.2em;font-size: min(30px,5vw);font-weight: bold;line-height: 1.2em;}
            }
        }
    }
}


/* contents */
.top_contents{margin-bottom: calc(var(--base_distance) * 1.6);}

/* contents parts */
.contents{position: relative; background-color: #250F4CBF;padding: calc(var(--base_distance) * 0.6);
    &:not(:last-of-type){margin-bottom: calc(var(--base_distance) * 0.6);}
    &.left{text-align: left;}

    /* bg */
    .bg_deco{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;pointer-events: none;z-index: 1;
        .deco{background-image:url(../images/parts/frame_comment.svg);position: absolute;background-position: center;background-repeat: no-repeat;background-size: contain;width: min(60px,10vw);height: min(60px,10vw);
            &.top_left{top: 0;left: 0;}
            &.top_right{top: 0;right: 0;transform: scale(-1, 1);}
            &.bottom_left{bottom: 0;left: 0;transform: scale(1, -1);}
            &.bottom_right{bottom: 0;right: 0;transform: scale(-1, -1);}
        }
    }

    /* deco */
    .deco_line{position: relative;display: block;width: 100%;height: min(60px);margin-bottom: calc(var(--base_distance) * 0.1);
        &:before,
        &:after{position: absolute;display: block;content: "";top: min(23px);width: calc((100% - 150px) / 2);height: 1px;background-color: #FFF;}
        &:before{left:min(20px);}
        &:after{right:min(20px);}
        span{position: absolute;background-position: center;background-repeat: no-repeat;background-size: contain;
            &.center{background-image:url(../images/parts/comment_center.svg);width: min(160px);height: min(60px);top: 50%;left: 50%;transform: translate(-50%, -50%);}
            &.left{background-image:url(../images/parts/comment_side.svg);width: min(20px);height: min(20px);top: min(13px);left: 0;transform: scale(-1,1);}
            &.right{background-image:url(../images/parts/comment_side.svg);width: min(20px);height: min(20px);top: min(13px);right: 0;}
        }
    }
    .deco_line_02{position: relative;display: block;width: 100%;height: 1px;margin: min(20px,3vw) 0 min(40px,8vw);
        &:after{position: absolute;display: block;content: "";top: 0;left:20px;width: calc(100% - 40px);height: 1px;background-color: #FFF;}
        span{position: absolute;background-position: center;background-repeat: no-repeat;background-size: contain;
            &.left{background-image:url(../images/parts/comment_side.svg);width: min(20px);height: min(20px);top: -9px;left: 0;transform: scale(-1,1);}
            &.right{background-image:url(../images/parts/comment_side.svg);width: min(20px);height: min(20px);top: -9px;right: 0;}
        }
    }

    /* modal */
    &.modal{width: min(1100px,calc(94vw - 200px));background-color: #250f4ce0;}

    /* tit */
    .stit{font-size: min(40px,6.4vw);font-weight: 700;line-height: 1.5em;text-align: center;}
    .sstit{font-size: min(30px,5vw);font-weight: 600;line-height: 1.5em;margin-bottom: 0.4em; position: relative;
        &:before{position: relative;display: inline-block;content: "";background-image: url(../images/parts/h_deco_little.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 0.7em;height: 0.7em;margin-right: 0.2em;}
    }
    .border_tit{font-size: min(20px,4vw);border-bottom: 1px solid #fff;padding-bottom: 0.5em;margin-bottom: 0.6em;margin-top: 2em;
        &:before{position: relative;display: inline-block;content: "";width: 0.7em;height: 0.7em;margin-right: 0.4em;background: transparent;border: 1px solid #fff;transform: rotate(45deg);box-sizing: border-box;}
    }

    /* common */
    strong{font-size: 1.1em; line-height: 1.7em;}
    hr{border: 0;border-top: 1px solid #fff;margin: min(40px,6vw) 0;}
    .tag{border: 1px solid #FF00FB;padding: 0.5em 1em .3em;display: inline-block;}

    /* btn */
    .btn{display: block;background-color: #FF67E5;color: #fff;text-align: center;font-size: min(20px,4vw);font-weight: 700;line-height: 1.5em;padding: 1em;margin-bottom: 1em; transition: 0.3s;
        &:hover{filter: brightness(1.1);}
    }

    /* comment */
    .part{display: block;font-size: min(18px,3.2vw);font-weight: 600;color: #FF67E5;line-height: 1.7em;margin-bottom: 0.2em;text-align: center;}
    .name{font-size: min(50px,3.8vw);font-weight: 700;line-height: 1.5em;position: relative;margin:0;text-align: center;
        .small{display: block;font-size: 0.5em;line-height: 1.5em;}
    }


    /* single */
    .date{text-align: left;color: #FFFF00;font-family: var(--f_02);font-size: min(20px,4.6vw);margin-bottom: 0.3em;}
    .single_tit{text-align: left;font-size: min(24px,4vw);font-weight: bold;line-height: 1.7em;}


}
@media only screen and (max-width: 835px){
    .contents{

        /* deco line */
        .deco_line{height: 12vw;
            &:before,
            &:after{top: 4.2vw;width: calc((100% - 27vw) / 2);}
            &:before{left:1.1vw;}
            &:after{right:1.1vw;}
            span{
                &.center{width: 36vw;height: 12vw;}
                &.left{top: 2.8vw;width: 4vw;height: 3vw;}
                &.right{top: 2.8vw;width: 4vw;height: 3vw;}
            }
        }

        /* modal */
        &.modal{
            width:90vw;
        }

        /* comment */
        .name{font-size: 5vw;}
    }
}


/* movie */
#top_movie { position: relative; margin-bottom: calc(var(--base_distance) * 1.6);
    .you_tube { position: relative; width: 100%; margin: 0 auto; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; 
      &::after { content: ''; position: absolute; inset: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.35s ease; pointer-events: none;}
      &:hover { transform: translateY(-6px) scale(1.04);
        &::after { opacity: 1; }
        img { filter: brightness(1); cursor: pointer;}
        .playbutton{background-image: url(../images/parts/moive_02.svg);}
      }
      img {width: 100%;filter: brightness(0.25); transition: 0.4s;}
      .playbutton{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: min(200px,40vw);height: min(200px,40vw);pointer-events: none;background-image: url(../images/parts/moive_01.svg);background-position: center;background-repeat: no-repeat;background-size: contain;transition: 0.4s;}
    }
}

/* movie modal */
#movieModal { display: none; position: fixed; inset: 0; z-index: 9999; }
#movieModal.is_open { display: block; }
#movieOverlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: pointer; }
#movieInner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: min(calc(98vw - 30px), 900px);}
/* #movieClose { position: absolute; top: -4.5rem; right: 0; background: none; border: none; color: #fff; font-size: 4rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; } */
#movieIframeWrap {position: relative;width: 100%;padding-top: 56.25%;background: #000;}
#movieIframeWrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

@media only screen and (max-width: 835px){
    /* #movieClose {top: -2.5rem; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; } */
}


/* sns */
.sns_area{padding-bottom: calc(var(--base_distance) * 0.8);
    .en_title{ font-family: var(--f_01);font-size: min(90px, 12vw);font-weight: 700;line-height: 1.5em;margin-bottom: 0.2em;
        span{position: relative;display: inline-block;
            &:before,
            &:after{position: absolute;display: block;content: "";top: 50%;width: min(40px, 6vw);height: min(30px, 4.4vw);transform: translateY(-50%);background-image: url(../images/parts/ttl_sns.svg);background-position: center;background-repeat: no-repeat;background-size: contain;}
            &:before{left:calc(min(60px,8vw) * -1 );}
            &:after{right:calc(min(60px,8vw) * -1 ); transform: translateY(-50%) scale(-1, 1);}
        }  
    }
    .sns_links{display: flex;justify-content: center;align-items: center;gap: 20px;
        li{width: min(100px,20vw);
            a{display: block;
                img{width: 100%; height: auto; transition: 0.2s;}
                &:hover{
                    img{filter: brightness(1.2);}
                }
            }
        }
    }
}