/* frame */
.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;
    .deco{position: absolute;width: min(200px,20vw);height: min(280px,28vh);background-image: url(../images/bg/parts_frame.svg);background-repeat: no-repeat;background-size: contain;background-position: left top;
        &.top_l{top: 0;left: 0;}
        &.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;transform: scale(-1, -1);}
    }
    .border-top{background-image: url(../images/bg/frame_center.svg);background-position: center;background-repeat: no-repeat;background-size: contain;display: block;width: min(540px,54vw);height: min(34px,6vw);position: absolute;top: -4px;left: 50%;transform: translateX(-50%);}
    .border-bottom{background-image: url(../images/bg/frame_center.svg);background-position: center;background-repeat: no-repeat;background-size: contain;display: block;width: min(540px,54vw);height: min(34px,6vw);position: absolute;bottom: -4px;left: 50%;transform: translateX(-50%) scale(1,-1);}
    .border-left{display: block;height: calc(100% - min(620px,62vh));width: 2px;position: absolute;left: min(14px,1.5vh);top: 50%;transform: translateY(-50%);border-left: 1px solid #172A88;
        &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament02.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(150px,15vh);left: -7px;top: 50%;transform: translateY(-50%);}
        .b_deco{position: absolute;display: block;width: 100%;height: 100%;
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament01.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(80px,7.8vh);}
            &:before{left: -7px;top: -15px;}
            &:after{left: -7px;bottom: -15px;transform: scale(1,-1);}
        }
    }
    .border-right{display: block;height: calc(100% - min(620px,62vh));width: 2px;position: absolute;right: min(14px,1.5vh);top: 50%;transform: translateY(-50%);border-right: 1px solid #172A88;
        &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament02.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(150px,15vh);right: -7px;top: 50%;transform: translateY(-50%);}
        .b_deco{position: absolute;display: block;width: 100%;height: 100%;
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/bg/frame_side_ornament01.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(14px);height: min(80px,7.8vh);}
            &:before{right: -7px;top: -15px;}
            &:after{right: -7px;bottom: -15px;transform: scale(1,-1);}
        }
    }
}
@media only screen and (max-width: 835px){
    .frame{
        .deco{width: 23vw;height: 28vw;}
        .border-top{top: -1.5vw;width: 54vw;}
        .border-bottom{bottom: -1.5vw;width: 50vw;}
        .border-left{height: calc(100% - 62vw);left: 1.5vw;
            &:after{height: 22vw;}
            .b_deco{
                &:before,
                &:after{width: 2vw;height: 10vw;left: -1vw;}
                &:before{top: 0;}
                &:after{bottom: 0;}
            }
        }
        .border-right{height: calc(100% - 62vw);right: 1.5vw;
            &:after{height: 22vw;}
            .b_deco{
                &:before,
                &:after{width: 2vw;height: 10vw;right: -1vw;}
                &:before{top: 0;}
                &:after{bottom: 0;}
            }
        }
    }
}

/* lily bg */
.lily_bg{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: -1;pointer-events: none;
    .lily{position: absolute;width: min(380px,32vw);height: min(270px,23vw);background-image: url(../images/bg/corner-lily.webp);background-repeat: no-repeat;background-size: contain;
        &.left{bottom: max(-30px,-3vw);left: max(-30px,-3vw);}
        &.right{bottom: max(-30px,-3vw);right: max(-30px,-3vw);transform: scale(-1,1);}
    }
}    



/*----------------------------------------
    anime
------------------------------------------*/
.top_page{
    &:before{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);}
    .frame{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);}
    .lily_bg{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);}
    .fv{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);}

    &.load_open{
        &:before{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.4s;}
        .frame{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.8s;}
        .lily_bg{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 1.2s;}
        .fv{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.8s var(--easeOutCubic); transition-delay: 0.8s;}
    }
}
.in_page{
    &:before{opacity: 1;}
    .frame{opacity: 1;}
    .lily_bg{opacity: 1; }
}

.anime{opacity: 0; visibility: hidden; transform: translateY(min(40px,4vw)); transition: 1.2s var(--easeOutCubic); transition-delay: 0.05s;
    &.scroll_in{opacity: 1; visibility: visible; transform: translateY(0);}
}


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

.tit_wrap{position: relative; padding:min(120px , 20vw) 0 calc(var(--base_distance) * 0.5);
    &.second{padding: calc(var(--base_distance) * 0.5) 0;}
.top_tit{font-family: var(--f_ara);font-size: min(100px,14vw);font-weight: 100;line-height: 1.5em;color: #172a88;position: relative;letter-spacing: 2px;
    span{position: relative;
        &:after{position: absolute;content: "";background-image: url(../images/parts/tit_deco.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(320px);height: min(30px);bottom: -16px;left: 50%;transform: translateX(-50%);}
    }
}
}
.comment{display: block;width: min(100%,300px);color: #e6decd;border: 1px solid #e6decd;background-color: #15102da6;margin: 12px auto 0;font-size: 0.9em;padding: 0.5em;}

.c_01{color: #8A0000 !important;}

@media only screen and (max-width: 835px){
    .tit_wrap{
    .top_tit{
        &.long{font-size: min(100px, 10vw);}
        span{
            &:after{
    width: 50vw;
    height: 5vw;
}
        }
    }
    }
}

.section_wrap{margin-bottom: min(200px, 20vw);
&.cmn_btn_outer{margin-bottom: min(150px, 15vw);}}

/* fv */
.fv{
   .fv_flexwrap{display: flex; justify-content: center;width: calc(90% - 40px); margin: 0 auto; padding: min(100px, 12vw) 0; gap:3%;align-items: flex-start;
    .inner{width: 46%;position: sticky;flex: 1;top: 6vw;
        .main_tit{width: 80%;margin: 0 auto min(60px, 6vw);
            img{width: 100%; height: auto;}
            }
        .date{width: 100%;margin: 0 auto;display: flex;gap: 0 8%;justify-content: center;margin: 0 auto min(60px, 6vw);
            p{margin: 0;width: 46%;text-align: center;
                img{width: 100%; height: auto;}
            }
        }
        .top_credit{width: 57%; margin: 0 auto;
            img{width: 100%;}
        }
    }
    .kv{width: 51%;flex: 1;
        img{width: 100%;}
    }
    }
}
@media only screen and (max-width: 835px){
    .fv{
        .fv_flexwrap{flex-direction: column-reverse;width: calc(98% - 30px);
        .inner{width: 100%;
            .main_tit{width: min(100%,500px);margin: 0 auto min(40px, 10vw);}
            .date{width: min(86%,400px);flex-direction: column;gap: min(40px,8vw) 0;
                p{width: 100%;}
            }
        }
        .kv{width: 100%;margin-bottom: 1em;}
    }
    }
}


/* top cast */
.top_cast{margin-bottom: calc(var(--base_distance)*1);
    .cast_block{margin-bottom: calc(var(--base_distance)*1);
        &:last-of-type{margin: 0;}
        .list_block{margin-bottom: calc(var(--base_distance)*0.75);
            &:last-of-type{margin: 0;}
            .stit{margin-bottom: 2.6em;
                img{width: auto; height: auto;}
            }
            .sstit{margin-bottom: 2em;font-size: 22px;font-weight: bold;color: #172A88;}
            .list{display: flex;flex-wrap: wrap;justify-content: center;gap: calc(var(--base_distance)*0.18) 50px;margin-bottom: calc(var(--base_distance)*0.35);
                &.first{margin-bottom: calc(var(--base_distance)*0.75);}
                &.column{flex-direction: column;gap: calc(var(--base_distance)*0.2) 0;}
                &:last-of-type{margin: 0;}
                li{width: auto;
                    &.one{width: 100%;}
                    p{font-size: clamp(20px,4vw,30px);font-weight: 600;line-height: 1.5em;margin: 0; 
                        .small{color: #172a88;display: block;font-size: 0.7em;line-height: 1.2em;}
                        .small2{font-size: 0.7em;}
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    .top_cast{
        .cast_block{
            .list_block{margin-bottom: calc(var(--base_distance)*1);
                .stit{margin-bottom: 2em;
                    img{width: min(120px,30vw);}
                }
                .sstit{font-size: 16px;}
                .list{gap: calc(var(--base_distance)*0.3) 0;flex-direction: column;margin-bottom: calc(var(--base_distance)*0.35);
                    &.first{margin-bottom: calc(var(--base_distance)*1);}
                    &.column{gap: calc(var(--base_distance)*0.3) 0;}
                    li{
                        p{font-size: 5.6vw;
                            .small{line-height: 1.4em;}
                        }
                    }
                }
            }
        }
    }
}

/* top about */
#introduction{
    .about_tit{margin: 0 auto 40px;width: 50%;
        img{width: 100%; height: auto;}
    }
    .plot{margin: 0 auto min(40px, 4vw); font-size: clamp(20px, 2.5vw, 26px);font-weight: 600;}
    .about_block{margin-bottom:min(100px, 10vw);word-break: auto-phrase;
        p{font-size: clamp(14px, 2vw, 18px);font-weight: 600;line-height: 2.2em;margin-bottom: 1.5em;
        &:last-of-type{margin-bottom: 0;}}
    }
    .bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;
        span{position: absolute;display: block;width: 100%;height: 1px;background-color: #172A88;
            &.top{top: 0;left: 0;}
            &.bottom{bottom: 0;left: 0;}
            &:before,
            &:after{position: absolute;content: "";background-image: url(../images/parts/ornament-divider.svg);width: 14px;height: 15px;}
            &:before{left: -10px;top: -7px;transform: scale(-1,1);}
            &:after{right: -10px;top: -7px;}
        }
    }
}
@media only screen and (max-width: 835px){
    #introduction{
        .about_tit{width: 90%;}
    }
}

/* top about */
.top_news{
    .news_wrap{text-align: left;
        .news{padding: 20px 30px; border: 1px solid var(--c_gold); background: #fff; margin-bottom: 30px;
            &:last-of-type{margin-bottom: 80px;}
            .news_link{
                    .top_block{border-bottom: 1px solid var(--c_font_color); padding: 0 0 17px; display: flex; justify-content: space-between; text-align: center;
                        .date{font-size: clamp(16px, 2vw, 25px); color: var(--c_gold);}
                        .detail{
                        }
                    }
                 &.disactive{pointer-events: none;
                .top_block{
                    .detail{display: none;
                        }
                }}
                }
                .news_title{font-size: clamp(16px, 1.5vw, 20px); padding: 17px 0 0; color: var(--c_font_color);}

        }
    }

}
@media only screen and (max-width: 835px){
    .top_news{
    .news_wrap{
        .news{padding:5%;           
             &:last-of-type{margin-bottom: 30px;}
            .news_link{
                    .top_block{
                        .detail{text-align: right;
                            img{width: 80%; height: 100%;}
                        }
                    }
                }
         .news_title{ padding: 14px 0 0;}
        }
    }

}
}

/* btn sec */
.btn_sec{margin: 0 auto calc(var(--base_distance)*1); text-align: center;
    a{display: block; width: 60%; margin: 0 auto; transition: 0.2s;
        &:hover{transform: translateY(-3px); filter: brightness(1.1);}
        img{width: 100%; height: auto;}
    }
}
@media only screen and (max-width: 835px){
    .btn_sec{
        a{width: 80%;}
    }
}


/* ===============================================
# news
=============================================== */
#news{
    .title_block{flex-direction: column; display: flex; border-bottom: 1px solid var(--c_font_color); font-size: clamp(16px, 2vw, 20px); line-height: 1.7em;gap: 2%; padding: 0 0 .4em;  margin-bottom: 1em; text-align: left;
        .date{color: var(--c_gold);}
        .news_title{font-weight: 600;}
    }
}



/* ===============================================
# CAST
=============================================== */
#cast{position: relative;margin-bottom: 200px;
    .ob{position: absolute;width: 30%;top: 50%;transform: translateY(-50%);z-index: 1;
        &01{left: 0;}
        &02{right: 0;}
    }
    .h_outer{z-index: 2;position: relative;}
    .sec_inner{position: relative;z-index: 3;}
    &[data-scroll="reveal"]{opacity: 1;
        .ob{
            img{transform: scale(1.2);opacity: 0;}
        }
        &.scroll_in{
            .ob{
                img{transform: scale(1);opacity: 1;transition:1s;transition-delay: .4s;}
            }
        }
    }

    .cast_wrap{text-align: center;font-weight: 600;
    .stit{margin-bottom: min(60px, 6vw);}
    ul{display: flex;gap:clamp(40px,3vw,80px);justify-content: center;
        &:not(:last-of-type){margin-bottom: 60px;}
        .cast{width: 31%;max-width: 400px;}
        &.last{margin-bottom: min(150px, 10vw);}
    }
    .cast{
        .cast_img{margin-bottom: 20px;
            img{width: 100%;}
        }
        .name_block{
            .part{color: var(--c_deepblue);font-size: 20px;line-height: 1.2em;margin-bottom: 0.2em;
            &.others{color: var(--c_red);}}
            .name{font-size: 30px;line-height: 1.3em;}
        }
    }
    &[data-scroll="reveal"]{
        .tit{transform: scale(0.5,1);opacity: 0;}
        ul{
            li{transform: scale(0.2,1);opacity: 0;}
        }
        &.scroll_in{
            .tit{transform: scale(1,1);opacity: 1;transition:1s;}
            ul{
                li{transform: scale(1,1);opacity: 1;transition:1s;
                    &:nth-of-type(2){transition-delay: .5s;}
                    &:nth-of-type(3){transition-delay: .55s;}
                    &:nth-of-type(4){transition-delay: .6s;}
                    &:nth-of-type(5){transition-delay: .65s;}
                    &:nth-of-type(6){transition-delay: .7s;}
                }
            }
        }
    }
    .list_blank{padding: 60px;
    @media screen and (max-width: 768px){padding: 24px;}}
}
.ensemble{
    ul{display: flex;justify-content: center;gap:40px;
        li{font-size: 30px;line-height: 1.4em;}
    }
}
}
#staff{
    .list_blank{padding: 20px;}
    .staff_list{
        dl{display: flex;font-size: 20px;line-height: 1.4em; text-align: center; justify-content: center;font-weight: 600;
            &:not(:last-of-type){margin-bottom: .8em;}
            dt{color: var(--c_deepblue); }
            dd{
            span{font-size: 16px;}}
            &.logo{align-items: center;
            img{max-height: 50px;}}
        }
    }
}
@media screen and (max-width: 768px) {
    #cast{padding: 0px 0;overflow:hidden;margin-bottom: 100px;
        .ob{width: 80%;
            &01{left: -40%;}
            &02{right: -40%;}
        }

    .cast_wrap{
        .tit{font-size: 18px;line-height: 1.4em;}
        ul{flex-direction: column;gap:30px;align-items: center;
            &:not(:last-of-type){margin-bottom: 20px;}
            li{font-size: 18px;line-height: 1.3em;}
            .cast{width: 100%;
                .cast_img{padding: 5px;width: 74%;margin-inline: auto;margin-bottom: 9px;}
                .name_block{
                    .part{font-size: 16px;line-height: 1em;}
                    .name{font-size: 22px;line-height: 1.4em;}
                }
            }
        }
    }
    .ensemble{
        .tit{font-size: 18px;line-height: 1.4em;margin-bottom: 20px;}
        ul{flex-direction: column;align-items: center;gap:20px;
            li{font-size: 20px;line-height: 1.3em;}
        }
    }
    }
    #staff{
        .staff_list{
            dl{font-size: 16px;line-height: 1.4em;
                dt{text-align: right;}
                dd{span{font-size: 13px; text-align: left;}}
                &.logo{
                    img{max-height: 40px;}}
            }
        }
    }
}

/* ===============================================
# schedule
=============================================== */

#schedule{
    .schedule_wrap{
        &:not(:last-of-type){margin-bottom: min(120px, 11vw);}
        .date{display: block; margin-bottom: min(60px, 10vw); padding: 0 min(90px, 8vw) 0;
            img{width: 100%;}
        }
        .hoshi{background-color: #fff; padding: min(60px, 4vw) min(60px, 3vw); border: 1px solid var(--c_gold);
            img{width: 100%; aspect-ratio: 711 / 437;}
            &.osaka{max-width: 560px;margin: 0 auto;
                                 @media screen and (max-width: 768px){max-width: 270px;}
                img{aspect-ratio: 491 / 195;}
            }
        }
    }
}

#tickets{
    .price_wrap{ margin-bottom: min(120px, 15vw);
        .price_table{display: flex;font-size: clamp(20px, 5vw, 45px); justify-content: space-between;padding: calc(var(--base_gap) * 2) 0 calc(var(--base_gap) * 2); border-top: 1px solid var(--c_font_color); border-bottom: 1px solid var(--c_font_color); padding: min(50px, 7vw) 0; font-weight: 600; line-height:1.4em;
            &:not(:first-of-type){border-top:none; }
            &:last-of-type{margin-bottom: min(40px, 4vw);}
        .seats{}
    .price{
        span{font-size: clamp(15px, 2vw, 20px);}
    }
}
    }
    .tickets_wrap{
        .tickets_tit{font-size: clamp(27px, 5vw, 50px) ; line-height: 1.5em;  margin-bottom: min(60px, 8vw); color: var(--c_deepblue);font-weight: 700;}
        .ticket_list{ background-color: #fff; border:1px solid var(--c_gold); padding: min(50px, 5vw) min(70px, 4vw); margin-bottom: 1.5em;
            .tickets_name{color: var(--c_red);font-size: clamp(18px, 3vw, 30px);font-weight: 700;line-height: 1.5em;margin-bottom: .3em;}
            .tickets_date{font-size:clamp(15px, 3vw, 21px);font-weight: 600; margin-bottom: min(46px, 5vw);}
            .ticket_btn{position: relative; background-color: var(--c_gold); border-radius: 8px; font-size: clamp(16px, 3.5vw, 27px); color: #fff; display: block; line-height: 1.6em; padding: .4em 0; font-weight: 700;
                &::before{content:""; background:no-repeat center url(../images/parts/triangle.svg); position: absolute;top: 50%; right: 4%; background-size: contain; width: 1em; height: 1em; aspect-ratio: 22 / 38;  transform: translateY(-50%);}
            &:not(:last-of-type){margin-bottom: .3em;}}
            &:last-of-type{margin-bottom: min(150px, 20vw);}
        }
    }
    .cmn_list_kome{text-align: left;
    li{margin-bottom: 0.3em;}}
    .cmn_link_btn_outer{ margin-bottom: min(30px, 3vw);
     p{font-size: clamp(13px, 1.5vw, 20px);margin-bottom: .5em;}}
}