/*----------------------------------------
    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 {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; }
                &.tr {top: 0; right: 0; transform: translate(15% , -4%);}
                &.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 { height: 75%;
                    &.tr {transform: translate(20% , -48%);}
                    &.bl {transform: translate(-20% , 48%) scale(-1 , -1);}
                }
            }
            .texts {
                .title {width: 100%; margin-bottom: 17%;}
                .sub_text {width: 100%;}
                .date_flex{width: 85%;margin: 0 auto;}
            }
        }
    }
}


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

/* 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;border: 1px solid var(--c_gold);display: block;overflow:hidden;
                &:before{position: absolute;content: "";background: #000;border: 1px solid var(--c_gold);border-radius: 40px;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 #fff;letter-spacing:.1em;}
                .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: #fff;mask-image: url(../images/svg/arrow_right_white.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: var(--c_gold);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: 900px;margin: 0 auto;width: 80%;}
}


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

/* cast
-------------------------------*/
#cast {
    .cast_list {
        .cast_item {
            &:not(:last-of-type){margin-bottom: 70px;}
            .name_character {color: var(--c_gold); font-size: clamp(20px , 3vw,32px); line-height: 1.4em; font-weight: 600; margin-bottom: 0.4em;}
            .name_cast { font-size: clamp(20px , 3vw,35px); line-height: 1.4em; font-weight: 600; margin-bottom: 0;}
            &.type_teaser { display: flex; justify-content: center; align-items: center; gap: calc(var(--base_gap)*1.5);
                .name_character {display: inline-block; font-size: clamp(20px , 3vw,35px); margin-bottom: 0;width: 50%;text-align: right;}
                .name_cast {display: inline-block;width: 50%;text-align: left;}
            }
        }
    }
}
@media screen and (max-width: 835px) {
    #cast{
        .cast_list{
            .cast_item{
                &:not(:last-of-type){margin-bottom: 40px;}
            }
        }
    }
}

/* about dramatica
-------------------------------*/
#intro {
    .text_box { font-size: min(20px , 1.8vw); line-height: 2.5em; word-break: auto-phrase;
        p {
            &:last-of-type {margin-bottom: 0;}
        }
    }
    .intro_block{position: relative;
        &: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;width: 1545px;aspect-ratio: 1545/10;left: 50%;transform: translateX(-50%);bottom: 0;}
        }
        .logo{margin:0 auto clamp(40px,4vw,80px);max-width: 600px;width: 80%;}
    }
}
@media only screen and (max-width: 835px){
    #intro {
        .text_box {font-size: min(20px , 3.8vw); letter-spacing: -0.05em; text-align: left;}
    }
}

/* 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.8);padding-bottom: 0;}