/*----------------------------------------
    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)*1.5);
    .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: 52%; left: 50%; transform: translate(-50% , -50%); display: block; width: min(1200px , 55%); 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: 100%; background: no-repeat top right url(../images/svg/parts_green_stars_tr.svg); background-size: contain; }
                &.tr {top: 0; right: 0; transform: translate(15% , -24%);}
                &.bl {bottom: 0; left: 0; transform: translate(-15% , 24%) 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;}
            }
            .sub_text {position: relative; display: block; width: 70%; height: auto; margin: 0 auto;
                img {display: block; width: 100%; height: auto;}
            }
        }
    }
}

@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 , 72%);
            .parts {
                .stars { height: 75%;
                    &.tr {transform: translate(20% , -48%);}
                    &.bl {transform: translate(-20% , 48%) scale(-1 , -1);}
                }
            }
            .texts {
                .title {width: 85%; margin-bottom: 17%;}
                .sub_text {width: 100%;}
            }
        }
    }
}


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

/* 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 {
            .name_character {color: var(--c_theme_color); font-size: min(32px , 5vw); line-height: 1.4em; font-weight: 600; margin-bottom: 0.4em;}
            .name_cast { font-size: min(55px , 7vw); 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: min(55px , 7vw); margin-bottom: 0;}
                .name_cast {display: inline-block;}
            }
        }
    }
}

/* about dramatica
-------------------------------*/
#about_dramatica {
    .text_box { 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 {
        .text_box {font-size: min(20px , 3.4vw); letter-spacing: -0.05em; white-space: nowrap;}
    }
}

/* 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;}
    }
}