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

/* fv
------------------------------------------*/
#fv { --fv_bg_frame_size:min(20px , 1vw); position: relative; display: block; width: 100%; height: auto; max-width: 2000px; margin: 0 auto; border-bottom: 2px solid var(--c_black);
    .fv_bg_layer {position: absolute; top: 0; left: 0; display: block; width: 100%;
        .fv_bg_area {position: relative; display: block; width: 100%; overflow: hidden;}
        .bg_cassette_layer {position: absolute; display: block; width: 100%; height: 100%; padding: calc(var(--fv_bg_frame_size)*1.5);
            .cassette_area {position: relative; display: block; width: 100%; height: 100%; max-height: calc((100vw - var(--fv_bg_frame_size)*1.5*2) * 64 / 102); padding: calc(var(--fv_bg_frame_size)*2); background-color: var(--c_green); border-radius: calc(var(--fv_bg_frame_size)*1);
                .parts_black_holes {
                    span {position: absolute; display: block; width: calc(var(--fv_bg_frame_size)*0.9); height: calc(var(--fv_bg_frame_size)*0.9); background-color: var(--c_black); border-radius: 50%;
                        &:nth-of-type(1) { top: calc(var(--fv_bg_frame_size)*0.8); left: calc(var(--fv_bg_frame_size)*0.8);}
                        &:nth-of-type(2) { top: calc(var(--fv_bg_frame_size)*0.8); right: calc(var(--fv_bg_frame_size)*0.8);}
                        &:nth-of-type(3) { bottom: calc(var(--fv_bg_frame_size)*0.8); right: calc(var(--fv_bg_frame_size)*0.8);}
                        &:nth-of-type(4) { bottom: calc(var(--fv_bg_frame_size)*0.8); left: calc(var(--fv_bg_frame_size)*0.8);}
                    }
                }
                .white_area {position: relative; display: block; width: 100%; height: 100%; background-color: var(--c_white); border-radius: calc(var(--fv_bg_frame_size)*0.8);
                    &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: repeat center url(../images/parts/texture_noise_w.png); background-size: 200px; border-radius: calc(var(--fv_bg_frame_size)*0.8); opacity: 0.6;}
                    .parts_green_molds {
                        span {position: absolute; display: block; top: 10%; width: calc(var(--fv_bg_frame_size)*0.9); height: 28%; background-color: var(--c_green);
                            &:nth-of-type(1) {left: -1px; clip-path: polygon(0 0, 100% 9%, 100% 91%, 0% 100%);}
                            &:nth-of-type(2) {right: -1px; clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 91%);}
                        }
                    }
                    .parts_gray_lines {position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 80%; height: 16%; display: flex; flex-direction: column; justify-content: space-between; 
                        span {display: block; width: 100%; height: 2px; background-color: var(--c_gray); opacity: 0.1;}
                    }
                    .parts_text_omst_tr {position: absolute; top: 10%; right: 4%; width: 3.5%; height: auto;
                        img {display: block; width: 100%; height: auto;}
                    }
                    .parts_text_hama_tours_cl {position: absolute; top: 50%; left: 5%; width: 8%; height: auto; transform: translateY(-50%);
                        img {display: block; width: 100%; height: auto;}
                    }
                    .parts_gears {
                        span {position: absolute; display: block; width: 15%; height: auto; aspect-ratio: 1 / 1; top: 50%; transform: translateY(-50%);
                            &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/parts/parts_fv_gear.svg); background-size: contain; animation: rotation_r 5s linear infinite;}
                            &:nth-of-type(1) {left: 20%;}
                            &:nth-of-type(2) {right: 20%;}
                        }
                    }
                }
            }
            .parts_large_18trip_text_tl {position: absolute; top: 0; left: 0; width: 40%; height: auto; transform: translate(-2% , -5%);
                img {display: block; width: 100%; height: auto;}
            }
        }
        .bg_bottom_layer {position: absolute; display: block; width: 100%; height: 25%; bottom: 0; left: 0; background-color: var(--c_green_l);  border-radius: calc(var(--fv_bg_frame_size)*1); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
            .parts_text_line {position: absolute; top: 20%; left: 0; width: 100%; height: 10%; background: repeat-x left top url(../images/parts/parts_fv_text_line_01.svg); background-size: auto 100%;}
            .parts_barcode {position: absolute; bottom: 0; left: 4%; width: auto; height: 18%; transform: translateY(15%);
                img {display: block; width: auto; height: 100%;}
            }
            .parts_text_passage {position: absolute; right: 4%; bottom: 15%; width: auto; height: 35%;
                img {display: block; width: auto; height: 100%;}
            }
        }
    }
    .fv_main_layer {position: relative; display: block; width: 100%;}
    &.v1 {
        .fv_bg_layer { height: 100%;
            .fv_bg_area {height: 100%;}
        }
        .fv_main_layer { height: clamp(calc(100vw * 7 / 16) , 100lvh, calc(100vw * 12 / 16) );
            .center_box {position: absolute; display: flex; justify-content: center; align-items: center; top: calc( (100% - 25%) / 2 + 5%); left: 50%; gap: 2%; transform: translate(-50% , -50%); width: 100%; height: 55%;
                .logo {display: block; width: auto; height: 100%; transform: translateY(-5%);
                    img {display: block; width: auto; height: 100%;}
                }
                .catch { display: block; width: auto; height: 80%; margin: 0;
                    img {display: block; width: auto; height: 100%;}
                }
            }
        }
    }
    &.v2 {
        .fv_bg_layer {height: 100%;
            .fv_bg_area {position: sticky; top: 0; left: 0; height: 100lvh;}
        }
        .fv_main_layer {height: auto;
            .fv_main_area {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: clamp(calc(100vw * 7 / 16) , 100lvh, calc(100vw * 12 / 16) ); gap: calc(var(--base_gap)*1);
                .fv_title_area {position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; height: min(18% , calc(100vw * 12 / 16 * 0.16)); gap: 1%;
                    .title_logo {display: block; width: auto; height: 100%;
                        img {display: block; width: auto; height: 100%;}
                    }
                    .catch {display: block; width: auto; height: 78%; margin-bottom: 0;
                        img {display: block; width: auto; height: 100%;}
                    }
                }
                .fv_stage_list {position: relative; display: flex; justify-content: center; align-items: stretch; width: 100%;  height: min(72% , calc(100vw * 12 / 16 * 0.66)); gap: calc(var(--base_gap)*1);
                    .stage_card {position: relative; display: block; width: auto; height: 100%; background-color: var(--c_bg_color); border: 1px solid var(--c_black); border-radius: var(--base_border_radius); overflow: hidden;
                        .head_gradient {position: relative; display: block; width: 100%; height: calc(var(--base_gap)*1); border-bottom: 1px solid var(--c_black); background: var(--c_gd_green);
                            &::after { position: absolute; display: block; content: ""; top: -1px;  left: min(50px, 5%); width: min(100px , 20%); height: 40%; background-color: var(--c_black); clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);}
                        }
                        .stage_main_box {position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; padding: calc(var(--base_gap)*0.75); gap: calc(var(--base_gap)*0.25);
                            .kv_area {position: relative; display: flex; justify-content: center; align-items: center; width: auto; height: 74%; aspect-ratio: 3 / 4; margin-bottom: 2%; background-color: var(--c_white); border: 1px solid var(--c_black);
                                img {position: absolute; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto;}
                                &.mode_logo {
                                    img {width: 96%;}
                                }
                            }
                            .info_area {--stage_title_size: min(38px , 4.6vh , 3.2vw); position: relative; display: block; width: 100%; height: auto; text-align: left;
                                .stage_title { display: flex; align-items: flex-end; height: calc(var(--stage_title_size)*1.1); font-family: var(--f_lubri); font-size: var(--stage_title_size); line-height: 0.9em; margin-bottom: 0.3em;
                                    .small {font-size: 0.7em; line-height: 0.9em;}
                                    &.text_jp {font-family: var(--f_rajdhani); font-weight: 700; font-size: calc(var(--stage_title_size)*0.75); 
                                        .num_size_fix {font-size: 1.3em;}
                                    }
                                }
                                .date { display: block;font-family: var(--f_rajdhani); font-weight: 500; font-size: calc(var(--stage_title_size)*0.75); line-height: 1.0em; margin-bottom: 0em; font-weight: 600;
                                    span {font-size: 0.4em;}
                                }
                                .place {display: block; font-weight: 700; font-size: calc(var(--stage_title_size)*0.42); line-height: 1.4em; margin-bottom: 0;
                                    span {white-space: nowrap;}
                                }
                            }
                        }
                    }
                }
            }
            .fv_kv_area {height: auto; padding:  calc(var(--base_distance)*0.5) 0 calc(var(--base_distance)*1);
                .kv_box {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_bg_color); border: 1px solid var(--c_black); border-radius: var(--base_border_radius); overflow: hidden;
                    .head_gradient {position: relative; display: block; width: 100%; height: calc(var(--base_gap)*1); border-bottom: 1px solid var(--c_black); background: var(--c_gd_green);
                        &::after { position: absolute; display: block; content: ""; top: -1px; left: min(50px, 5%); width: min(100px , 20%); height: 40%; background-color: var(--c_black); clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);}
                    }
                    .kv_img {position: relative; display: block; width: 100%; height: auto;
                        img {position: relative; display: block; width: 100%; height: auto;}
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #fv {--fv_bg_frame_size:min(20px , 2vw);
        .fv_bg_layer {
            .bg_cassette_layer {
                .cassette_area {height: calc((100vw - var(--fv_bg_frame_size) * 1.5 * 2) * 15 / 10); height: 80%; max-height: initial;
                    .white_area {
                        .parts_green_molds {
                            span { width: 35%; height: 1.7%;
                                &:nth-of-type(1) {top: -1px; left: initial; right: 10%; clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);}
                                &:nth-of-type(2) {top: initial; bottom: -1px; right: 10%; clip-path: polygon(9% 0, 91% 0, 100% 100%, 0% 100%);}
                            }
                        }
                        .parts_gray_lines {left: initial; right: 6.5%; top: 50%; bottom: initial; transform: translate(0 , -50%); width: 22%; height: 84%; flex-direction: row;
                            span {width: 2px; height: 100%;}
                        }
                        .parts_text_omst_tr {width: 12%; right: 8%;}
                        .parts_text_hama_tours_cl {top: initial; bottom: 12%; left: 1%; width: 16%; transform: rotateZ(90deg);}
                        .parts_gears {
                            span {width: 30%; transform: translateX(-50%);
                                &:nth-of-type(1) {left: 50%; top: 16%;}
                                &:nth-of-type(2) {left: 50%; right: initial; top: initial; bottom: 16%;}
                            }
                        }
                    }
                }
                .parts_large_18trip_text_tl {width: 70%;}
            }
            .bg_bottom_layer {
                .parts_text_line {}
                .parts_barcode {height: 12%;}
                .parts_text_passage { height: 30%; bottom: 15%; transform: translateX(50%);}
            }
        }
        &.v1 {
            .fv_main_layer {height: calc(var(--vh_px)*1); max-height: calc(100vw * 16 / 9);
                .center_box { flex-direction: column; gap: 6%; top: calc( (100% - 25%) / 2 + 1.5%); height: 62%;
                    .logo {height: 55%; transform: translateX(10%);}
                    .catch {height: 42%;}
                }
            }
        }
        &.v2 {
            .fv_bg_layer {
                .fv_bg_area {}
            }
            .fv_main_layer { padding: calc(var(--base_gap)*2) 0;
                .fv_main_area { height: auto; gap: calc(var(--base_gap)*2);
                    .fv_title_area { flex-direction: column; justify-content: center; align-items: center; width: 80%; height: auto; gap: calc(var(--base_gap)*1.5);
                        .title_logo {width: 100%; height: auto; transform: translateX(5%);}
                        .catch {width: 86%; height: auto;}
                    }
                    .fv_stage_list {flex-direction: column; gap: calc(var(--base_gap)*1.5); width: 80%; height: auto;
                        .stage_card {height: auto; width: 100%;
                            .stage_main_box {
                                .kv_area {height: auto; width: 100%; margin-bottom: calc(var(--base_gap)*1);}
                                .info_area {--stage_title_size: min(38px , 12vw); padding-bottom: calc(var(--base_gap)*2);
                                    .stage_title { height: auto;}
                                    .date {font-size: min(30px , 10vw);}
                                    .place { font-size: min(16px , 4.5vw);}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* cast teaser v1
-------------------------------*/
#cast_teaser_v1 {
    .cmn_bg_layer {
        .bg_text_line { position: absolute; display: block; content: ""; bottom:  calc(var(--base_distance)*0.5); right: 0; width: 100%; height: calc(var(--base_distance)*2.5); background: repeat-x left top url(../images/parts/parts_text_line_motenashi_stage.svg); background-size: auto 100%; }
    }
    .cast_list_teaser_01  { width: 92vw; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--base_gap)*1); margin-bottom: calc(var(--base_distance)*0.5);
        .cast_box {position: relative; display: block; width: calc((100% - var(--base_gap)) / 2); height: auto; background-color: var(--c_green_l); border-radius: calc(var(--base_border_radius)*1); overflow: hidden; font-size: min(44px , 4vw); line-height: 1.2em; padding: 0.8em;
            &::before { position: absolute; display: block; content: ""; bottom: 0; right: 0; width: 0.4em; height: 100%; background: no-repeat right bottom url(../images/parts/parts_barcode_type01_vert_b.svg); background-size: contain; }
            .class_name {font-size: 0.5em; line-height: 1.2em; margin-bottom: 0.8em; font-family: var(--f_lubri);}
            .character_name {font-size: 0.55em; line-height: 1em; margin-bottom: 0.3em; font-weight: 700;}
            .cast_name { font-weight: 800;}
        }
    }
    .text_hoka {color: var(--c_green); font-size: min(30px , 6vw); line-height: 1.2em; font-weight: 800;}
    .cmn_over_layer {
        .ornament_icon_01 {top: 0; left: 0; width: min(180px , 13%); transform: translate(-3% , -20%);}
        .ornament_icon_02 {bottom: 0; right: 0; width: min(200px , 13%); transform: translate(-15% , 45%);}
    }
}
@media only screen and (max-width: 835px){
    #cast_teaser_v1 {
        .cast_list_teaser_01 { flex-direction: column;
            .cast_box {width: 100%; font-size: min(44px , 8vw); line-height: 1.2em;}
        }
        .cmn_over_layer {
            .ornament_icon_01 {width: min(180px , 21%);}
            .ornament_icon_02 {width: min(200px , 21%);}
        }
    }
}

/* news
-------------------------------*/
#news {background-color: var(--c_yellow);
    .cmn_over_layer {
        .ornament_icon_01 {top: 0; left: 0; width: min(180px , 13%); transform: translate(-3% , -20%);}
        .ornament_icon_02 {bottom: 0; right: 0; width: min(200px , 13%); transform: translate(-15% , 45%);}
    }
}
@media only screen and (max-width: 835px){
    #news {
        .cmn_over_layer {
            .ornament_icon_01 {width: min(180px , 21%);}
            .ornament_icon_02 {width: min(200px , 21%);}
        }
    }
}

.cmn_news_list {display: flex; flex-direction: column; gap: 1px; margin-bottom: calc(var(--base_gap)*2);}
.cmn_news_rack {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_black); color: var(--c_white); text-align: left; font-size: clamp(14px , 2vw , 16px); line-height: 1.7em; padding: 2em 2.5em; padding-right: calc(3em *2 + 1.8em);
    .news_title { font-weight: 600;}
    &::after { position: absolute; display: block; content: ""; top: 0; right: 3em; width: 1.8em; height: 100%; background: no-repeat center url(../images/parts/icon_link_arrow_yellow.svg); background-size: contain; }
    &:hover {background-color: var(--c_yellow); color: var(--c_black); transition: 0.3s;
        .cmn_tag {background-color: var(--c_black); color: var(--c_yellow); transition: 0.3s;}
        &::after {filter: grayscale(1) invert(1); transition: 0.3s;}
    }
    &.mode_single_head { font-size: clamp(17px , 3.2vw , 20px); line-height: 1.7em; padding: 2em calc(var(--base_gap)*2); pointer-events: none;
        &::after {display: none;}
    }
    &.disactive {pointer-events: none;
        &::after {display: none;}
    }
}
@media only screen and (max-width: 835px){
    .cmn_news_rack { padding: 2em 1.5em;
        &::after { right: 1.5em; top: 2em; width: 1.5em; background-position: top right;}
    }
}

/* introduction
-------------------------------*/
#introduction {display: flex; padding: 0;
    .section_left , .section_right { position: relative; display: block; width: 50%; }
    .section_left {padding: calc(var(--base_distance)*1) 0; background-color: var(--c_orange);
        .cmn_main_layer {margin: 0 auto; width: 75%;}
        .intro_text_box {position: relative; display: block; width: 100%; height: auto; color: var(--c_white); font-size: min(16px , 1.4vw); line-height: 3em; text-align: left;
            p {font-weight: 500; letter-spacing: 0.15em; margin-bottom: 1.5em;
                &.large { font-size: 1.4em; font-weight: 700;}
                span {white-space: nowrap;}
            }
        }
    }
    .section_right {
        .cmn_bg_layer {overflow: hidden;
            .parts_text_18trip {position: absolute; display: block; bottom: 0; right: 0; width: 90%; height: auto; transform: translate(5% , 10%);
                img {display: block; width: 100%; height: auto;}
            }
            .bg_logo_line {position: absolute; display: block; width: 100%; height: 46%; top: 50%; left: 0; transform: translateY(-50%); background: repeat-x left top url(../images/logo/logo_18trip_typeA_fill.svg); background-size: auto 100%;}
        }
    }
    .cmn_over_layer {
        .ornament_icon_03 {top: 0; right: 0; width: min(140px , 19%); transform: translate(-30% , 40%);}
        .ornament_icon_04 {top: 37%; right: 0; width: min(140px , 17%); transform: translate(-20% , 0%);}
        .ornament_icon_05 {bottom: 0; left: 0; width: min(100px , 15%); transform: translate(-10% , 25%);}
        .ornament_icon_06 {bottom: 0; right: 0; width: min(250px , 30%); transform: translate(-10% , 30%);}
    }
}
@media only screen and (max-width: 835px){
    #introduction {flex-direction: column;
        .section_left , .section_right {width: 100%;}
        .section_left { border-bottom: 2px solid var(--c_black);
            .cmn_main_layer {width: 90%;}
            .intro_text_box {font-size: min(16px , 3.1vw);}
        }
        .section_right { height: calc(var(--vh_px)*0.8);}
        .cmn_over_layer {
            .ornament_icon_03 {top: 15%; width: min(140px , 22%); transform: translate(20% , 40%);}
            .ornament_icon_04 {top: 50%; width: min(140px , 19%);}
            .ornament_icon_05 {}
            .ornament_icon_06 { width: min(250px , 27%); transform: translate(20% , 30%); }
        }
    }
}

/* stage info
-------------------------------*/
#stage_info { background-color: var(--c_bg_color);
    .stage_info_flex {display: flex;
        .stage_info_box {position: relative; display: block; width: calc(100% / 3); text-align: left; padding: calc(var(--base_distance)*1) 4vw; border-right: 1px dashed var(--c_black);
            .stage_title {--stage_title_size: min(60px , 4vw); display: block; height: calc(var(--stage_title_size)*1.1); font-family: var(--f_lubri); font-size: var(--stage_title_size); line-height: 0.9em; margin-bottom: 0.3em;
                .small {font-size: 0.7em;}
                &.text_jp {font-family: var(--f_rajdhani); font-weight: 700; font-size: calc(var(--stage_title_size)*0.7); 
                    .num_size_fix {font-size: 1.2em;}
                }
            }
            .schedule_box {display: inline-flex; flex-direction: column; align-items: stretch;
                .title {font-family: var(--f_lubri); letter-spacing: 0.2em; font-weight: 600;}
                .date { display: inline-flex; align-items: flex-end; gap: 2px; font-family: var(--f_rajdhani); font-weight: 500; font-size: min(46px , 2.8vw); line-height: 1.0em; margin-bottom: 0.15em;
                    span {display: block; background-color: var(--c_black); color: var(--c_white); padding: 0.2em 0.15em 0.1em;
                        &.small {font-size: 0.3em; line-height: 1.2em; padding: 0.4em 0.3em 0.2em;}
                        &.text_jp {font-size: 0.75em; padding: 0.3em 0.2em 0.1em;}
                        &.arrow {height: calc(1em + 0.2em + 0.1em); width: 0.9em; background-color: initial; background: no-repeat center url(../images/parts/icon_arrow_dot_r.svg); background-size: 60% auto;}
                    }
                }
                .place {display: block; font-weight: 700; font-size: min(17px , 1.2vw); line-height: 1.4em; text-align: left; padding: 0.3em 0.5em 0.1em; border: 1px solid var(--c_black);
                    span {white-space: nowrap;}
                }
            }
            &:last-of-type {border-right: 0;}
        }
    }
}
@media only screen and (max-width: 835px){
    #stage_info {
        .stage_info_flex { flex-direction: column;
            .stage_info_box {width: 100%; border-right: 0; border-bottom: 1px dashed var(--c_black);
                .stage_title {--stage_title_size: min(60px , 12vw); height: auto;}
                .schedule_box {
                    .date {font-size: min(46px , 9vw);}
                    .place {font-size: min(18px , 4.2vw); padding: 0.3em 0.5em 0.1em;}
                }
                &:last-of-type {border-bottom: 0;}
            }
        }
    }
}

/* cast
-------------------------------*/
#cast {
    .cast_list_outer {padding: calc(var(--base_distance)*1) 0;
        .text_hoka {font-size: min(22px , 5vw); font-weight: 700;}
    }
}

.cmn_cast_list_flex {position: relative; display: flex; justify-content: center; align-items: flex-start; gap: calc(var(--base_gap)*3); margin-bottom: calc(var(--base_distance)*1);}
.cmn_cast_list {--cast_list_theme_color: var(--c_green); position: relative; display: block; width: calc((100% - var(--base_gap)*3) / 2); height: auto;
    &.c_r1ze {--cast_list_theme_color: var(--c_blue);}
    &.c_day2 {--cast_list_theme_color: var(--c_yellow_d);}
    &.c_ev3ns {--cast_list_theme_color: var(--c_orange);}
    &.c_l4mps {--cast_list_theme_color: var(--c_purple);}
    &.w_100 {width: 100%;}
    .list_title {font-family: var(--f_lubri); color: var(--cast_list_theme_color); font-size: min(48px , 9vw); line-height: 1.2em; margin-bottom:0.4em;}
    .cast_list {position: relative; display: flex; flex-direction: column; gap: calc(var(--base_distance)*0.1);
        .cast_box {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--base_gap)*0.5); width: 100%; height: auto; border: 2px solid var(--cast_list_theme_color); border-radius: calc(var(--base_border_radius)*1); overflow: hidden; background-color: var(--c_bg_color); padding: calc(var(--base_gap)*1.4) calc(var(--base_gap)*1) calc(var(--base_gap)*1);
            .name_box {font-size: min(40px , 4vw); line-height: 1.2em; margin-bottom: 0; color: var(--cast_list_theme_color);
                .character_name {font-size: 0.6em; line-height: 1.2em; margin-bottom: 0.3em; font-weight: 700;}
                .cast_name {font-weight: 800;}
            }
            &::before { position: absolute; display: block; content: ""; bottom: 0; right: 0; width: 14px; height: 100%; background: no-repeat bottom right url(../images/parts/parts_barcode_type01_vert_b.svg); background-size: contain; }
        }
    }
}
@media only screen and (max-width: 835px){
    .cmn_cast_list_flex  {flex-direction: column;}
    .cmn_cast_list {width: 100%;
        .cast_list {
            .cast_box {
                .name_box {font-size: min(40px , 7vw);}
                &::before {width: 8px;}
            }
        }
    }
}

/* staff
-------------------------------*/
#staff {background-color: var(--c_green_l);
    .staff_list { font-size: clamp(12px , 3.2vw , 16px); line-height: 1.4em;
        li { margin-bottom: 0.6em; font-weight: 700;}
    }
    .cmn_over_layer {
        .ornament_icon_07 {bottom: 0; left: 0; width: min(180px , 14%); transform: translate(5% , 40%);}
    }
}
@media only screen and (max-width: 835px){
    #staff {
        .cmn_over_layer {
            .ornament_icon_07 { width: min(180px , 18%);}
        }
    }
}

/* sns_contact
-------------------------------*/
.sns_contact_flex {position: relative; display: flex; width: 100%; height: auto; 
    .cmn_section {width: 50%;}
}
@media only screen and (max-width: 835px){
    .sns_contact_flex {flex-direction: column;
        .cmn_section {width: 100%;}
    }
}

#official_sns {
    .sns_links {position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--base_gap)*1); width: 80%; margin: 0 auto;
        li { display: block; width: clamp(50px , 10vw , 70px); height: auto;
            a {display: block; width: 100%; height: auto; transition: 0.2s;
                img {display: block; width: 100%; height: auto;}
                &:hover {
                    transform: translateY(-2px);
                }
            }
        }
    }
}
#contact {background-color: var(--c_black);
    .text_head {color: var(--c_white); margin-bottom: 0.5em;}
    .text_link {text-decoration: underline; font-size: 1.1em; transition: 0.2s;
        &:hover {opacity: 0.6;}
    }
}