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

/* fv teaser
------------------------------------------*/
#fv_teaser {position: relative; display: block; width: 100%; height: calc(var(--vh_px)*1); margin: 0 auto calc(var(--base_distance)*0.3);
    .cmn_bg_layer {
        .wave {position: absolute; display: block; width: 100%; height: auto; aspect-ratio: 2748 / 893;
            &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat top left url(../images/svg/parts_gold_wave_tl.svg); background-size: contain; }
            &.tl {top: 0; left: 0; transform: translate(-20% , -40%) scale(1.5 , 1.5);}
            &.br {bottom: 0; right: 0; transform: translate(20% , 40%) scale(-1.5 , -1.5);}
        }
    }
    .cmn_main_layer.center_box { position: absolute; top: 48%; left: 50%; transform: translate(-50% , -50%); display: block; width: min(1200px , 56%); height: auto;
        .parts {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            .stars_right {position: absolute; width: 100%; height: 100%;
                &::before { position: absolute; display: block; content: ""; width: 100%; height: 70%; background: no-repeat top right url(../images/svg/parts_green_stars_tr_r.svg); background-size: contain; }
                &.tr {top: 0; right: 0; transform: translate(15% , -4%);}
            }
            .stars_left {position: absolute; width: 100%; height: 100%;
                &::before { position: absolute; display: block; content: ""; width: 100%; height: 70%; background: no-repeat top right url(../images/svg/parts_green_stars_tr.svg); background-size: contain; }
                &.bl {bottom: 0; left: 0; transform: translate(-15% , 4%) scale(-1 , -1);
                ;}
            }
        }
        .texts {position: relative; display: block; width: 100%; height: auto;
            .title {position: relative; display: block; width: 100%; height: auto; margin: 0 auto 5%;
                img {display: block; width: 100%; height: auto;}
            }
            .date_flex{--base_gap:clamp(30px,4vw,60px);}
        }
    }
}

@media screen and (max-width: 835px) {
    #fv_teaser {
        .cmn_bg_layer {
            .wave {width: min(1200px , 200%);
                &.tl {}
                &.bl {}
            }
        }
        .cmn_main_layer.center_box { width: min(470px , 92%);
            .parts {
                .stars_left { height: 75%;
                    &.bl {transform: translate(-20% , 48%) scale(-1 , -1);}
                }
                .stars_right { height: 75%;
                    &.tr {transform: translate(20% , -48%);}
                }
            }
            .texts {
                .title {width: 100%; margin-bottom: 17%;}
                .sub_text {width: 100%;}
                .date_flex{width: 85%;margin: 0 auto;}
            }
        }
    }
}


/* fv
------------------------------------------*/

#fv{display: flex;justify-content: center;align-items: center;flex-direction:column;padding-top: 90px;
    .cmn_main_layer{aspect-ratio: 1624/890;max-width:min(96%, 1300px);position: relative;
        @media screen and (max-width: 835px) {aspect-ratio: initial;}
        .kv_wrap{position: relative;border-left: 2px solid var(--c_gold);border-right: 2px solid var(--c_gold);width: 100%;
            .kv{position:relative;width: 100%;opacity: 0;transition:.3s;
                img{line-height: 0;display: block;}
                &:nth-of-type(2){position: absolute;width: 100%;top: 0;left: 0;}
                &.active{opacity: 1;transition:.3s;}
            }
            &:before{position: absolute;content: "";background: url(../images/svg/kv_frame.svg) no-repeat center; background-size:contain;width: clamp(28px,3vw,51px);aspect-ratio: 51/344;top: 50%;transform: translateY(-50%);left:calc(-1 * clamp(28px,3vw,51px));}
            &:after{position: absolute;content: "";background: url(../images/svg/kv_frame.svg) no-repeat center; background-size:contain;width: clamp(28px,3vw,51px);aspect-ratio: 51/344;top: 50%;transform: translateY(-50%)scale(-1,1);right: calc(-1 * clamp(28px,3vw,51px));}
            .kv_slide_btn{ position: absolute;bottom: 1%;right: 1%;display: block;height: auto;
                .btn{opacity: .6;transition:.2s;margin-bottom: 14px;cursor: pointer;filter: drop-shadow(0 0 4px var(--c_blue));background: var(--c_theme_color);width: 14px;height: 14px;border-radius: 50%;
                    &.active{opacity: 1;transition:.2s;}
                }
                @media screen and (max-width: 835px) {right: 3%;}
            }
        }
    }
    .texts {position: relative; display: block; width: 80%; height: auto;margin: -5% auto 0;max-width: 1190px;
        @media screen and (max-width: 835px) {margin: -18% auto 0;}
        .parts {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            .stars_right {position: absolute; width: 100%; height: 100%;pointer-events:none;
                &::before { position: absolute; display: block; content: ""; width: 80%; height: 40%; background: no-repeat top right url(../images/svg/parts_green_stars_tr_r.svg); background-size: contain; }
                &.tr {top: 0; right: 0; transform: translate(25%, 10%);
                    @media screen and (max-width: 835px) {transform: translate(34%, 10%);}
                }
            }
            .stars_left {position: absolute; width: 100%; height: 100%;pointer-events:none;
                &::before { position: absolute; display: block; content: ""; width: 80%; height: 40%; background: no-repeat top right url(../images/svg/parts_green_stars_tr.svg); background-size: contain; }
                &.bl {bottom: 0; left: 0; transform: translate(-30% , 4%) scale(-1 , -1);
                    @media screen and (max-width: 835px) {transform: translate(-36%, 4%) scale(-1, -1);}
                }
            }
        }
        .title {position: relative; display: block; width: 100%; height: auto; margin: 13% auto 5%;
            img {display: block; width: 100%; height: auto;}
        }
        .date_flex{--base_gap:clamp(30px,4vw,60px);}
    }

}


/* credit
-------------------------------*/
#credit{
    .credit_wrap{margin-bottom: 100px;
        .mod_flex_box_02{--base_gap:clamp(60px,10vw,180px);
            .credit_block{
                .logo{aspect-ratio: 578/381;margin-bottom: 60px;
                    img{height: 100%;}
                }
                &:nth-of-type(2){
                    .logo{
                        img{height: 93%;margin: 4.7% 0 0;}
                    }
                }
                .credit_list{
                    ul{display: flex;justify-content: center;gap:4em;
                        li{
                            .role{color: var(--block_c);margin-bottom: 0;font-size: clamp(16px,1.4vw,20px);line-height: 1.5em;}
                            .name{font-size: clamp(17px,1.8vw,28px);line-height: 1.5em;letter-spacing: .1em;white-space: nowrap;}
                        }
                    }
                }
                &[data-scroll="reveal"]{opacity: 0;transform: translateY(-8%);
                    &.scroll_in{opacity: 1;transform: translateY(0);transition:1s;}
                }
            }
        }
        /* img{width: 100%;} */
    }
    .note_wrap{text-align: left;}
}

@media screen and (max-width: 835px) {
    #credit{
        .credit_wrap{
            .mod_flex_box_02{
                .credit_block{
                    .logo{margin:0 auto 46px;width: 80%;}
                    .credit_list{
                        ul{gap:2.4em;
                            li{}
                        }
                    }
                }
            }
        }
    }
}

/* news
-------------------------------*/
#news{}

.news_wrap{
    ul{margin-bottom: 40px;
        li{
            &:not(:last-of-type){margin-bottom: 20px;}
            .news_link{text-align: left;padding: 40px 36px;position: relative;display: block;border-radius: 40px;background: rgb(233, 212, 183, .6);border: 1px solid #4A2800;box-shadow: inset 0 0 17px #4a28003b;
                &:before{position: absolute;content: "";border: 1px solid #4A2800;width: calc(100% + 2px);height: calc(100% + 2px);top: 50%;left: 50%;transform: translate(-50%, -50%);}           
                .date{position: relative;font-size: clamp(16px,2vw,20px);line-height: 1.4em;padding-bottom: 14px;margin-bottom: 20px;border-bottom: 1px solid #4A2800;letter-spacing:.1em; color:#4A2800;}
                .news_title{position: relative;color: var(--c_font_color);font-size: clamp(14px,2vw,18px);line-height: 1.7em;padding-right: 80px;transition:.3s;
                    &:before{position: absolute;content: "";background: #231607;mask-image: url(../images/svg/arrow-right_brown.svg); mask-repeat: no-repeat; mask-size: 100%; mask-position: center; width: 28px;aspect-ratio: 1/1;top: calc(50% - 10px);right: 0;transition:.3s;}
                }
                &:hover{
                    .news_title{color: #4A2800;transition:.3s;
                        &:before{background: var(--c_gold);transition:.3s;}
                    }
                }
                &.disactive{pointer-events: none;
                    .news_title{
                        &:before{opacity: 0;}
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 835px) {
    .news_wrap{width: 94%;margin: 0 auto;
        ul{
            li{
                .news_link{padding: 20px 20px;
                    .news_title{padding-right: 40px;
                        &:before{width: 20px;}
                    }
                }
            }
        }
    }
}

.official_btn{
    a{display: block;max-width: 800px;margin: 0 auto;width: 80%;
    &:hover{opacity: 0.7; transition: 0.3s;}}
}


@media screen and (max-width: 835px) {
    .official_btn{
        a{width: 80%;
            &:active{opacity: 0.7; }}
    }
}

/* schedule
-------------------------------*/
#schedule {
    .dateplace_teaser {position: relative; display: block; width: 100%; height: auto; margin-bottom: 0;
        img {display: block; width: 100%; height: auto;}
    }
}

/* cast
-------------------------------*/
#cast {pointer-events: none;
    .cast_logo{max-width: 350px; margin: 0 auto 3em;
        img{width:100%;}
        &.staff{margin: 3em auto 1em;}
    }
    .cast_middle{line-height: 0; 
        img{width: 100%;height: 2vw;object-fit: cover;}
    }
    .cast_wrap{padding:100px 0;
        
        &.aladin{background-color:rgb(166, 136, 212, .25); position: relative;
           &:before{position: absolute; display: block; content: ""; width: 100%; height: 5vw; background:no-repeat url(../images/svg/cast_upper.svg); left:0; top:-0.8vw; background-size: contain; }}
           &.ozs{background-color:rgb(129, 212, 173,0.25); position: relative;margin-bottom: 150px;
            &:before{position: absolute; display: block; content: ""; width: 100%; height: 5vw; background:no-repeat url(../images/svg/cast_lower.svg); left:0; bottom:-4.5vw; background-size: contain; }}
           ul{margin: 0 auto;
            li{margin:0px auto 75px; max-width: 300px;
            .cast_img{margin-bottom: 1em;}
            .name_wrap{margin-top: 1em; font-size: clamp(18px, 2vw, 24px);
                .cast{line-height: 1.7em;
                &.aladin{ color: var(--c_red); }
            &.ozs{ color: var(--c_green); }}
                .name{font-size: clamp(18px, 2vw, 24px); color: var(--c_font_color); line-height: 1.7em;}
            }}
        }
    }
    .staff_wrap{margin-bottom: 3em;
        li{display: flex; flex-direction: row; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.7em;align-items: self-start; justify-content: center;
            &.logo{align-items:center ;}
        .role{width:50%; text-align: right;}
        .name{width:50%; text-align: left;
        &.staff_logo{max-width: 150px; width: 100%;}
        span{ font-size: clamp(13px, 1.5vw, 15px);}}
    }
    }
}
@media screen and (max-width: 835px) {
    #cast{
        .cast_logo{
            img{width:70%;}
            &.staff{
                img{width:50%;}
            }
        }
        .staff_wrap{
            li{
            /* .role{width:35%;} */
            .name{
                &.staff_logo{max-width: 110px;}}
        }
        }
    }
}

/* about dramatica
-------------------------------*/
#intro {
    .text_box { font-size: clamp(16px , 1.8vw, 20px); line-height: 2.5em; word-break: auto-phrase;
        p {
            &:last-of-type {margin-bottom: 0;}
        }
    }
    .intro_block{position: relative;
        h3{font-size: clamp(20px, 2vw, 30px);margin-bottom: 1em;font-weight: 500; text-align: center;
        &.aladdin{color: var(--c_red);}
        &.oz{color: var(--c_green);}}
        &:not(:last-of-type){padding-bottom: clamp(50px,8vw,100px);margin-bottom: clamp(50px,8vw,100px);
            &:before{position: absolute;content: "";background: url(../images/svg/line_gold.svg) no-repeat center; background-size:contain;max-width: 1500px; width:100%; aspect-ratio: 1545/10;left: 50%;transform: translateX(-50%);bottom: 0;}
        }
        .logo{margin:0 auto clamp(40px,4vw,80px);max-width: 400px;width: 100%;}
    }
}
@media only screen and (max-width: 835px){
    #intro {
        .text_box {letter-spacing: -0.05em; text-align: left;}
        .intro_block{
            .logo{width: 60%;}
        }
    }
}

/* about dramatica special stage
-------------------------------*/
#about_dramatica_special_stage { padding-top: 0;
    .text_box {display: block; padding: calc(var(--base_gap)*2) 0; border-top: 1px solid var(--c_theme_color); border-bottom: 1px solid var(--c_theme_color); font-size: min(20px , 1.8vw); line-height: 2.5em; word-break: auto-phrase;
        p {
            &:last-of-type {margin-bottom: 0;}
        }
    }
}
@media only screen and (max-width: 835px){
    #about_dramatica_special_stage {
        .text_box {font-size: min(20px , 3.4vw); letter-spacing: -0.05em;}
    }
}

/* comingsoon
-------------------------------*/
#comingsoon {
    .img_outer {width: 50%;
        img {display: block; width: 100%; height: auto;}
    }
}


@media screen and (max-width: 835px) {   
}
#officialX{padding-top: calc(var(--base_distance)*0.1);padding-bottom: 0;}


/* schedule
-------------------------------*/
#schedule{ font-weight: normal;
    .schedule_wrap{padding: 0 0 150px;
    .schedule{margin-bottom: 70px;
        .date_upper{margin-bottom: 1em; display: flex; align-items: self-end; position: relative; justify-content: space-between;
        .date_img{width: 80%;}
        .date_text{font-size:min(16px, 1.4vw); word-break: auto-phrase;
        a{text-decoration: underline;}}
}
.date_arrow{transform: translateY(-8px);line-height: 0;padding: 0.5em 0 1em;
    img{width: 100%;height: 1vw;}}
   
    }
    .schedule_notice{
        .schedule_notice_flex{display: flex; flex-direction: row; justify-content: flex-start; align-items: self-start; margin-bottom: 0.5em;
        img{width: 20px; aspect-ratio: 20/24;}
        p{text-align: left; margin-bottom: 0; font-size: clamp(14px, 1.7vw, 16px);line-height: 1.3em;}} 
    }
}
    .price_wrap{padding: 0 0 150px;
        .price_tit{font-size: clamp(18px,3vw, 26px); line-height: 1.5em; position: relative; padding-bottom:0.8em; letter-spacing: 2px; 
        }
    .price_list{padding: 2em 0 3em;
        .price_row{font-size: clamp(22px, 3vw, 35px); line-height: 1.5em;
            .price_flex{display: flex; justify-content: space-between;
        .seat{ span{font-size: clamp(20px, 2.5vw, 30px); white-space: nowrap;}}
        .price{
            span{font-size: clamp(13px, 1.5vw, 20px);white-space: nowrap;line-height: 1.3em;}
        }}
        .price_arrow{padding: 0.9em 0; line-height: 0;
        img{width: 100%;height: 1vw;}}
        /* &::before{position: absolute;content: "";background: url(../images/svg/line_brown.svg) no-repeat center; background-size:contain;max-width: 1500px; width:100%; aspect-ratio: 1545/10;left: 50%;transform: translateX(-50%);top: 54px; height: 4px;} */
    }
    }
.text_block{text-align: left;}}
.ticket_wrap{
    .ticket_tit{font-size: clamp(20px,3vw, 32px); line-height: 1.5em; position: relative; padding: 0.5em 0 0.8em;
        &:before{position: absolute; display: block; content: ""; width: 45px; aspect-ratio: 55/27; background:no-repeat url(../images/svg/ticket_tit_deco.svg); top:-0.4vw; background-size: contain; transform: translateX(-50%);left: 50%;}
    }
    .ticket_block_outer{margin-bottom: 150px;
        .ticket_block{padding: 40px 60px;position: relative;display: block;border-radius: 40px;background: rgb(233, 212, 183, .6);border: 1px solid #4A2800;box-shadow: inset 0 0 17px #4a28003b; margin-bottom: 2em;
                &:before{position: absolute;content: "";border: 1px solid #4A2800;width: calc(100% + 2px);height: calc(100% + 2px);top: 50%;left: 50%;transform: translate(-50%, -50%); pointer-events: none;}
                &.caution{text-align: left;}       
            .tit_ticket{ font-size: clamp(18px, 2.5vw, 25px);line-height: 2em; font-weight: 500;}
            .ticket_date{font-size: clamp(16px, 1.7vw, 18px);line-height: 1.9em; margin-bottom: 1em;}
            .ticket_btn{margin-bottom: 0.5em;
                a{display: block;max-width: 900px;margin: 0 auto;width: 100%;
                    &:hover{opacity: 0.7; transition: 0.3s;}
                &.ticket_link{ position: relative;display: inline-block;
                    &:hover{opacity: 0.7;}}
            .ticket_img{
                img{ display: block; width: 100%; height: auto;}
            }
        .ticket_text{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;font-size: clamp(14px, 1.8vw, 19px);font-weight:400;color:var(--c_font_color);text-align: center;pointer-events: none;}}
            }
            .ticket_text_block{text-align: left;
            p{font-size: clamp(14px, 1.5vw, 16px);}}
        }
    }

}
.ticket_note{padding: calc(var(--base_gap) * 2) 0;
    &.padding_none{padding: 0;}
.ticket_note_tit{border-bottom: 1px solid var(--c_font_color); padding-bottom: 0.5em; font-size: clamp(17px, 2vw, 19px); line-height: 1.4em;color: var(--c_font_color); margin-bottom: 1em; font-weight: 500;}}
}

@media screen and (max-width: 835px) {   
    #schedule{
        .schedule_wrap{padding: 0 0 100px;
        .schedule{margin-bottom: 80px;
            .date_upper{margin-bottom: 1em; display: block; 
                .date_img{width: 100%;margin-bottom: 1em;}
                .date_text{font-size:15px; text-align: left;}
    }
        }
        .schedule_notice{
            .schedule_notice_flex{
            img{width: 15px;}} 
        }}
        .price_wrap{padding: 0 0 80px;
           
       }
    .ticket_wrap{
        .ticket_tit{
            &:before{width: 35px; top:-2vw;}
        }
        .ticket_block_outer{margin-bottom: 80px;
            .ticket_block{padding: 6%;     
                .tit_ticket{line-height: 1.7em;margin-bottom: 0.3em;}
                .ticket_date{line-height: 1.5em;}
                .ticket_btn{margin-bottom: 0.5em; 
                     &:active{opacity: 0.7; }
                }
            }
        }
    
    }
}}