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

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

#fv {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 2000px; height: calc(100lvh); height: clamp(calc(100vw * 7 / 16) , 100lvh, calc(100vw * 11 / 16) ); max-height: 100lvh; background-color: var(--c_white_l);
    .cmn_bg_layer { overflow: hidden;
        .plus_texture {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: url(../images/parts/bg_repeat_grid_plus_logo_gray.png) repeat; background-size: var(--bg_repeat_grid_plus_size); opacity: 0.4;}
        .bg_lines_pattern {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
            &::after { position: absolute; display: block; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: no-repeat center url(../images/parts/parts_fv_bg_lines.svg); background-size: cover; }
        }
        .bg_lines_section {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; opacity: 0.5;
            span {position: relative; display: block; width: 1px; height: 100%; background-color: var(--c_gray_l);
                &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_logo_gray); transform-origin: top center; animation: scroll_line_anim_r 4.8s ease-in-out infinite; }
            }
        }
        .bg_logo { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; transform: translateX(0.05%) scale(1.02); opacity: 0.7;
            img {display: block; width: 100%; height: auto; }
        }
        .catch_text {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
            img {display: block; width: 100%; height: auto;}
            .catch_text_1, .catch_text_2 {position: absolute; top: 47%; left: 50%; width: 100%; height: auto;}
            .catch_text_1 { transform: translate(-50%, calc(-50% - 35%));}
            .catch_text_2 { transform: translate(-50%, calc(-50% + 35%));}
        }
    }
    .cmn_main_layer { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%;
        .talents_area { position: relative; display: block; width: 100%; height: calc(100% - var(--cmn_text_line_height));
            .talent_box_layer {position: relative; display: flex; justify-content: center; align-items: center; gap: 1px; padding: 0 1px; width: 100%; height: 100%; 
                .talent_box {position: relative; display: block; width: calc(100% / 6); height: 100%; overflow: hidden;
                    .talent_img {position: absolute; display: block; bottom: 0; left: 50%; width: auto; height: 50%; transform: translateX(-50%) translateY(2.5%); transform-origin: bottom center;
                        img {display: block; width: auto; height: 100%; max-width: initial; object-fit: contain; object-position: bottom center; }
                    }
                }
            }
            .info_layer {position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; overflow: hidden;
                .info_box_area {position: relative; display: block; width: 50%; height: 100%;
                    .info_box {position: absolute; display: block; width: 66%; height: auto; bottom: 2%; left: 50%; transform: translate(-50%, 0%);
                        .name_box {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_logo_gray); color: var(--c_white_l); text-align: center; font-size: min(22px , 3.5vw); line-height: 1.2em; padding: 0.3em 1em; margin-bottom: 0.3em;
                            .side_parts {position: absolute; top: 0; display: block; width: 1px; height: 100%; background-color: var(--c_white_l);
                                &::before , &::after { position: absolute; display: block; content: ""; background-color: var(--c_white_l); width: calc(3px + 1px); height: 3px;}
                                &::before {top: 0;}
                                &::after {bottom: 0;}
                                &.left {left: 0;
                                    &::before , &::after {left: 0px;}
                                }
                                &.right {right: 0;
                                    &::before , &::after {right: 0px;}
                                }
                            }
                            .new_unit_tag {position: absolute; top: 0; left: 2.5%; display: block; width: auto; height: auto; transform: translate(0%, -45%); background-color: var(--c_white_l); color: var(--c_logo_gray); border: 1px solid var(--c_logo_gray); border-radius: 0.2em; white-space: nowrap; font-size: 0.55em; line-height: 1.0em; padding: 0.2em 0.5em; text-align: center; font-weight: 600; letter-spacing: 0.15em; margin-bottom: 0;
                                img {display: block; width: 100%; height: auto;}
                                span {display: block; transform: translateY(5%);}
                            }
                            .name {letter-spacing: 0.1em; font-weight: 500;
                                span { font-size: 0.7em;}
                            }
                        }
                        .cmn_link_btn_a {filter: drop-shadow(0px 2px 6px rgba(0,0,0,0.2)); font-size: clamp(11px, 3.2vw, 19px);}
                    }
                }
            }
        }
        .cmn_text_line {
            .scroll_icon {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(var(--cmn_text_line_height) * 3); height: calc(var(--cmn_text_line_height) * 1.5); background-color: var(--c_white_l); border: 1px solid var(--c_logo_gray); border-bottom: 0px; border-top-right-radius: 9999px; border-top-left-radius: 9999px;
                .text {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: auto;}
                .bar_line { position: absolute; bottom: 0; left: 50%; width: 1px; height: 32%; 
                    &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_logo_gray); transform-origin: top center; animation: scroll_line_anim 2.4s ease-in-out infinite; }
                }
            }
        }
    }
}

@media only screen and (max-width: 835px){
    #fv {height: calc(var(--vh_px)*1); max-height: calc(100vw * 19 / 9); min-height: initial;
        .cmn_bg_layer {
            .bg_lines_pattern {
                &::after {background-image: url(../images/parts/parts_fv_bg_lines_sp.svg);}
            }
            .catch_text {
                .catch_text_1, .catch_text_2 { top: 32%;}
                .catch_text_1 {transform: translate(-50%, calc(-50% - 45%));}
                .catch_text_2 {transform: translate(-50%, calc(-50% + 45%));}
            }
        }
        .cmn_main_layer {
            .talents_area {
                .talent_box_layer {
                    .talent_box {
                        .talent_img { width: auto; height: 50%;}
                    }
                }
                .info_layer {
                    .info_box_area {
                        .info_box {width: 90%;
                            .name_box {
                                .side_parts {
                                    &::before , &::after {width: calc(2px + 1px); height: 2px;}
                                }
                                .new_unit_tag {left: 0; transform: translate(0 , -105%);}
                            }
                        }
                    }
                }
            }
        }
    }
}

@keyframes scroll_line_anim {
  0% { transform: scaleY(0); opacity: 0; transform-origin: top center; }
  20% { opacity: 1; }
  40% { transform: scaleY(1); opacity: 1; transform-origin: top center;  }
  60% { transform: scaleY(1); opacity: 1; transform-origin: bottom center; }
  90% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
@keyframes scroll_line_anim_r {
  0%   { transform: scaleY(0); opacity: 0; transform-origin: bottom center; }
  20%  { opacity: 1; }
  40%  { transform: scaleY(1); opacity: 1; transform-origin: bottom center; }
  60%  { transform: scaleY(1); opacity: 1; transform-origin: top center; }
  90%  { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(0); transform-origin: top center; }
}

/* top logo
-------------------------------*/
#top_logo {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_white_l); padding: min(calc(var(--base_distance)*1) , 6vw) 0  min(calc(var(--base_distance)*0.7) , calc(6vw * 0.7));
    .logo {position: relative; display: block; width: min(800px , 46%); height: auto; margin: 0 auto; 
        video { position: relative; display: block; width: 100%; height: auto; }
    }
}
@media only screen and (max-width: 835px){
    #top_logo {padding: min(calc(var(--base_distance)*1) , 8vw) 0  min(calc(var(--base_distance)*0.7) , calc(8vw * 0.7));
        .logo {width: 70%;}
    }
}

/* about
-------------------------------*/
#about {background-color: var(--c_logo_gray); text-align: center; padding-top: min(calc(var(--base_distance)*1 + var(--base_distance)*0.5) , calc(8vw + var(--base_distance)*0.5));
    .cmn_bg_layer {
        .border_arch {position: absolute; top: -1px; left: 0; width: 100%; height: min(calc(var(--base_distance)*1) , 8vw); background-image: url(../images/parts/parts_section_border_arch_top_white.svg); background-size: 100% 100%; background-repeat: no-repeat;}
    }
}
.cmn_about_mekpark { color: var(--c_white_l);
    .section_title {position: relative; font-weight: 600; font-size: min(31px , 4.5vw); line-height: 1.2em; margin-bottom: 2.5em; letter-spacing: 0.2em; white-space: nowrap;}
    .catch {position: relative; font-family: var(--font_base_yakuhan); font-weight: 700; font-size: min(50px , 5.4vw); line-height: 1.5em; margin-bottom: 0.8em; letter-spacing: 0.05em;}
    .text_area {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--c_logo_gray); font-size: min(20px , 3.4vw); font-weight: 700; font-family: var(--font_base_yakuhan); margin-bottom: 2em;
        p {display: inline-block; background-color: var(--c_white_l); padding: 0.2em 0.5em; margin-bottom: 0.7em; letter-spacing: 0.05em; white-space: nowrap;}
    }
    &.c_in_about {color: var(--c_logo_gray);
        .text_area {color: var(--c_white_l); font-weight: 600;
            p {background-color: var(--c_logo_gray);}
        }
    }
}

/* units
-------------------------------*/
#units {
    .cmn_h_title_line_area {
        .title_text_line { background-image: url(../images/parts/h_textline_mekpark_units.svg);
        }
        .cmn_text_line_anim {background-image: url(../images/parts/parts_textline_mekpark_white.png);}
    }
    .unit_box_area {position: relative; display: block; width: 100%; height: auto; padding-top: calc(100% *1400 / 1920);
        .unit_box {position: absolute; top: 0; display: block; width: 50%; height: 100%; overflow: hidden;
            &:nth-of-type(1) {left: 0; border-right: 1px solid var(--c_logo_gray);}
            &:nth-of-type(2) {right: 0;}
            .cmn_bg_layer {overflow: hidden;
                .plus_texture {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: repeat; background-size: var(--bg_repeat_grid_plus_size); opacity: 1;}
                .mosaic_ornament {position: absolute; top: 0; display: block; width: 60%; height: 100%; }
                .bg_unit_name {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; transform: scale(1.05);}
            }
            .cmn_main_layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                .talent_images {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                    .talent_img {position: absolute; top: 14%; transform: translateX(-50%); width: auto; height: 90%;
                        img {position: relative; display: block; width: auto; height: 100%; max-width: initial;}
                        &:nth-of-type(1) {left: 20%;}
                        &:nth-of-type(2) {left: 80%;}
                        &:nth-of-type(3) {left: 50%; transform: translateX(-50%) translateY(-2%) scale(1.12);}
                    }
                }
                .talent_info {position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--base_gap)*1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
                    .unit_name {
                        img {display: block; width: 100%; height: auto;}
                    }
                    .cmn_link_btn_a { width: 80%; font-size: clamp(15px, 1.8vw, 19px);}
                }
            }
            &.unit_a {background-color: var(--c_gray_ll);
                .cmn_bg_layer {
                    .plus_texture {background-image: url(../images/parts/bg_repeat_grid_plus_logo_gray.png); opacity: 0.6;}
                    .mosaic_ornament {left: 0; background: no-repeat top left url(../images/parts/parts_mosaic_ornament_tl_gray_l.svg); background-size: contain;}
                    .bg_unit_name { background: no-repeat top left url(../images/parts/text_unit_bg_achrora.svg); background-size: cover;}
                }
            }
            &.unit_b {background-color: var(--c_gray_l);
                .cmn_bg_layer {
                    .plus_texture {background-image: url(../images/parts/bg_repeat_grid_plus_white.png);}
                    .mosaic_ornament {right: 0; background: no-repeat bottom right url(../images/parts/parts_mosaic_ornament_br_white.svg); background-size: contain;}
                    .bg_unit_name { background: no-repeat top right url(../images/parts/text_unit_bg_unit_b_pre_debut.svg); background-size: cover;}
                }
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #units {
        .unit_box_area { padding-top: calc(100% *12 / 4);
            .unit_box {width: 100%; height: 50%;
                &:nth-of-type(1) {left: 0; border-right: initial; border-bottom: 1px solid var(--c_logo_gray);}
                &:nth-of-type(2) {left: 0; right: initial; top: 50%;}
                .cmn_main_layer {
                    .talent_images {
                        .talent_img {position: absolute; top: 14%; transform: translateX(-50%); width: auto; height: 90%;
                            &:nth-of-type(1) {left: 17%;}
                            &:nth-of-type(2) {left: 83%;}
                            &:nth-of-type(3) {}
                        }
                    }
                    .talent_info { width: min(460px , 70%);}
                }
            }
        }
    }
}

/* audition
-------------------------------*/
#audition {padding-top: 0; background-color: var(--c_logo_green);
    .audition_wrap {}
    .audition_link {--audition_link_font_size: min(33px , 2.2vw); position: relative; display: flex; justify-content: space-between; background-color: var(--c_white_l); border-radius: calc(var(--base_border_radius)*1); overflow: hidden;
        &::before { position: absolute; display: block; content: ""; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--c_logo_orange); border-radius: calc(var(--base_border_radius)*1); transform: translateX(100%); transition: 0.6s var(--easeInQuint);}
        .left_area {position: relative; display: block; text-align: left; padding: calc(var(--audition_link_font_size)*1.8); width: 68%; 
            .audition_title {position: relative; font-size: var(--audition_link_font_size); line-height: 1.4em; color: var(--c_black); font-weight: 700; margin-bottom: 0.1em; transition: 0.4s;}
            .large_text {position: relative; font-size: calc(var(--audition_link_font_size)*1.4); line-height: 1.4em; color: var(--c_logo_orange); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.4em; transition: 0.4s;}
            .kome {position: relative; color: var(--c_black); font-size: clamp(10px , 1vw , 13px); font-weight: 500; line-height: 1.4em; letter-spacing: 0.05em; margin-bottom: 0; transition: 0.4s;}
        }
        .right_area {position: relative; display: flex; justify-content: center; align-items: center; width: 32%; background-color: var(--c_logo_orange);
            .text_box {display: flex; justify-content: center; align-items: center; font-size: calc(var(--audition_link_font_size)*1.1); gap: 0.4em; transform: translateX(calc(var(--audition_link_font_size)*-0.6));
                span {color: var(--c_white_l); font-weight: 700;}
                img {display: block; width: calc(var(--audition_link_font_size)*1.2); height: auto;}
            }
            &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: calc(var(--audition_link_font_size)*3.6); height: 100%; background: no-repeat center url(../images/parts/parts_section_border_type_s_vert_orange.svg); background-size: 100% 100%; transform: translateX(calc(-100% + 1px)); }
        }
        &:hover {
            &::before {transform: translateX(0); transition: 1.0s var(--easeOutQuint);}
            .left_area {
                .audition_title {color: var(--c_white_l);}
                .large_text {color: var(--c_white_l);}
                .kome {color: var(--c_white_l);}
            }
        }
        &.disactive {pointer-events: none;
            .right_area {
                .text_box {opacity: 0.4;}
            }
        }
    }
}
@media only screen and (max-width: 835px){
    #audition {
        .audition_link {--audition_link_font_size: min(33px , 4.7vw); flex-direction: column;
            .left_area { width: 100%; text-align: center; padding-bottom: calc(var(--audition_link_font_size)*3.6);
                .audition_title {}
                .large_text {}
                .kome {}
            }
            &::before {display: none;}
            .right_area { width: 100%; padding: calc(var(--audition_link_font_size)*1.8);
                .text_box {transform: initial; transform: translateY(calc(var(--audition_link_font_size)*-0.6)) scale(1.1);}
                &::after {width: 100%; height: calc(var(--audition_link_font_size)*3.6); transform: translateY(calc(-100% + 1px)); background-image: url(../images/parts/parts_section_border_type_s_hor_orange.svg);}
            }
            &:hover {
                &::before {transform: translateX(0); transition: 1.0s var(--easeOutQuint);}
                .left_area {
                    .audition_title {color: var(--c_black);}
                    .large_text {color: var(--c_logo_orange)}
                    .kome {color: var(--c_black);}
                }
            }
        }
    }
}

/*----------------------------------------
    in about
------------------------------------------*/
#in_about {
    .about_main {padding: calc(var(--base_distance)*1) 0;
        .cmn_about_mekpark {
            .text_area {margin-bottom: 0;}
        }
    }
}