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

/* fv
------------------------------------------*/
#fv {--fv_aspect_ratio: calc(100% / 1920 *1200); position: relative; display: block; width: calc(100% - var(--cmn_over_frame_size)*2); height: auto; margin: 0 auto; z-index: 2; background-color: var(--c_white_l); 
    .visual_layer {position: relative; display: block; width: 100%; height: auto; padding-top: var(--fv_aspect_ratio);
        .visual_box { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_bg_color); overflow: hidden;
            .bg_fill {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%;
                img {position: relative; display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(7px);}
            }
            .main_img {position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%; height: 100%;
                img {position: relative; display: block; width: 100%; height: 100%; object-fit: contain;}
            }
        }
    }
    .logo_layer {position: absolute; display: block; top: 0; left: 0; width: 100%; height: auto; padding-top: var(--fv_aspect_ratio);
        .logo {position: absolute; display: block; bottom: 3%; left: 50%; width: 28%; height: auto; transform: translate(-50% , 0);
            img {position: relative; display: block; width: 100%; height: auto;}
        }
    }
    .fv_progress_bar {--fv_progress_bar_size: clamp(24px , 3vw , 38px); position: relative; display: block; width: calc(100% - var(--fv_progress_bar_size)); height: calc(var(--fv_progress_bar_size)*0.5); background-color: var(--c_white_l); margin: 0 auto;
        .control_icon {position: absolute; display: block; top: 50%; left: 50%; width: var(--fv_progress_bar_size); height: var(--fv_progress_bar_size); transform: translate(-50% , -50%);
            &::before { position: absolute; display: block; content: ""; top: 50%; right: 50%; transform: translate(0% , -50%); width: 100vw; height: calc(var(--fv_progress_bar_size)*0.5); background-color: var(--c_red); pointer-events: none; }
            &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/svg/icon_fv_progress_bar.svg); background-size: contain;}
        }
    }
}

@media screen and (max-width: 835px) {
    #fv {--fv_aspect_ratio: calc(100% / 1920 *2500); margin-top: var(--nav_trigger_size);
        .visual_layer {
            .visual_box {
                .main_img { height: 72vw;
                    img {object-fit: cover;}
                }
            }
        }
        .logo_layer {
            .logo {width: 50%;}
        }
    }
}

/* count down
-------------------------------*/
#count_down {padding: calc(var(--base_distance)*1) 0 calc(var(--base_distance)*1.5);
    .cmn_bg_layer {mask-image: url(../images/svg/clip_shape_top_countdown.svg); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: bottom left;
        .bg_text_ring {position: absolute; display: block; width: 110vmax; height: 110vmax; top: 50%; left: 50%; transform: translate(-50% , -24%);
            &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/svg/parts_bg_text_ring_01.svg); background-size: contain; animation: rotation 60s linear infinite;}
        }
        .cmn_bg_balloon {
            &.left {top: 30%; left: 5%;}
            &.right {top: 10%; right: 5%;}
        }
    }
    .cmn_main_layer {
        .lead_text {margin-bottom: calc(var(--base_distance)*0.5); font-size: min(20px , 1.6vw);
            span {white-space: nowrap;}
            &.sp {display: none;}
        }
        .count_down_box {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_distance)/2);
            .bg_img {position: relative; display: block; width: 100%; height: auto;}
            .day_num_box {position: absolute; display: block; width: 47%; height: 100%; top: 0; left: 10%; 
                .bg_img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%;
                    img {display: block; width: 100%; height: 100%; object-fit: contain;}
                }
                .day_num {position: absolute; display: flex; top: 42%; left: 12.5%; font-family: var(--f_dela); color: var(--c_red); font-size: min(110px , 7vw); line-height: 1em; margin-bottom: 0; width: 73.5%; height: 38%;
                    span {position: relative; display: flex; justify-content: center; align-items: center; width: calc(100% / 3); height: 100%;}
                }
            }
            .message_link {position: absolute; top: 50%; right: 15%; transform: translate(50% , -50%); display: block; width: 50%; height: auto;
                img {position: relative; display: block; width: 100%; height: auto; cursor: pointer; transition: 0.2s; }
                &:hover {
                    img {transform: scale(1.03) rotateZ(5deg);}
                }
            }
        }
        .foot_logo {position: relative; display: block; width: min(440px , 70%); height: auto; margin: 0 auto;
            img {display: block; width: 100%; height: auto;}
        }
    }
}
@media screen and (max-width: 835px) {
    #count_down {
        .cmn_bg_layer {
            .bg_text_ring { transform: translate(-50% , -37%);}
             .cmn_bg_balloon {
                &.left {top: 47%; left: 5%;}
                &.right {top: 5%; right: 5%;}
            }
        }
        .cmn_main_layer {
            .lead_text { font-size: min(20px , 3.1vw);
                &.pc {display: none;}
                &.sp {display: flex;}
            }
            .count_down_box {margin-bottom: 65%;
                .day_num_box {width: 70%;left: 15%;
                    .day_num {font-size: min(110px , 13vw);}
                }
                .message_link {top: 75%; right: 35%; transform: translate(50% , 0%); width: 75%;}
            }
        }
    }
}

.izawa_message_modal {}


/* news
-------------------------------*/
#news {
    .news_wrap_outer {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*2);
        .cmn_bg_layer {
            .text_line {position: absolute; top: 50%; left: 0; width: 100%; height: 70%; transform: translateY(-50%); background: repeat-X center url(../images/svg/parts_bg_text_line_01.svg); background-size: auto 100%;}
        }
    }
    .swiper_outer {
        .news_swiper {
            .swiper-wrapper {
                .swiper-slide {height: auto; opacity: 0; pointer-events: none; transition: 0.2s;
                    .slide_inner {position: relative; display: block; width: 100%;height: 100%; background-color: var(--c_yellow_ll); border-radius: 8px; padding: calc(var(--base_gap)*0.75); padding-bottom: calc(var(--base_gap)*1); text-align: left; transition: 0.2s;
                        .thumbnail {position: relative; display: block; width: 100%; height: auto; padding-top: calc(100% * 9 /16); background-color: var(--c_white_l); margin-bottom: calc(var(--base_gap)*0.5);
                            img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
                        }
                        .date {color: var(--c_theme_color); font-family: var(--f_kanit); font-size: clamp(12px , 2vw , 16px); line-height: 1.2em; margin-bottom: 0.2em; letter-spacing: 0.05em;}
                        .title {color: var(--c_font_color); font-weight: 600; transition: 0.2s;}
                        &:hover { transform: translateY(-4px);
                            .title {color: var(--c_link_color);}
                        }
                        &.disactive { pointer-events: none;}
                    }
                    &.swiper-slide-active , &.swiper-slide-next , &.swiper-slide-next + .swiper-slide {opacity: 1; pointer-events: initial;}
                    &.swiper-slide-duplicate-active , &.swiper-slide-duplicate-next , &.swiper-slide-duplicate-next + .swiper-slide {opacity: 1; pointer-events: initial; transition-delay: 0.4s;}
                }
            }
            &.no_controller {
                .swiper-wrapper { justify-content: center;}
                .swiper_controller {pointer-events: none; opacity: 0;}
            }
        }
    }
}
@media screen and (max-width: 835px) {
    #news {
        .cmn_main_layer {width: 80%;}
        .swiper_outer {
            .news_swiper {
                .swiper-wrapper {
                    .swiper-slide {opacity: 1; pointer-events: initial;}
                }
            }
        }
    }
}

.cmn_news_list {position: relative; display: flex; flex-direction: column; gap: calc(var(--base_gap)*3); width: 100%; height: auto; background-color: var(--c_bg_color); padding: min(calc(var(--base_gap)*2) , 6vw) min(calc(var(--base_gap)*3) , 3vw);}
.cmn_news_rack {position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--base_gap)*1);
    .thumbnail {display: block; width: 35%; border: 1px solid var(--c_lightgray); aspect-ratio: 16 / 9;
        img {display: block; width: 100%; height: 100%; object-fit: contain;}
    }
    .text_area {display: block; width: 65%; text-align: left; color: var(--c_font_color); font-size: clamp(15px , 2vw , 17px); line-height: 1.6em; 
        .date {display: block; border-bottom: 1px solid var(--c_gray); font-weight: 700; padding-bottom: 0.5em; margin-bottom: 0.5em; transition: 0.2s;}
        .title {font-weight: 700; transition: 0.2s;}
    }
    &:hover {
        .text_area {
            .date { color: var(--c_link_color);}
            .title { color: var(--c_link_color);}
        }
    }
    &.disactive { pointer-events: none;}
}
@media screen and (max-width: 835px) {
    .cmn_news_rack {flex-direction: column; gap: calc(var(--base_gap)*0.5);
        .thumbnail {width: 100%;}
        .text_area {width: 100%;}
    }
}

/* calendar
-------------------------------*/
#calendar {padding-top: 0;
    .cmn_calendar_list {margin-bottom: calc(var(--base_gap)*2);}
}

.cmn_calendar_list {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_bg_color); padding: min(calc(var(--base_gap)*2) , 6vw) min(calc(var(--base_gap)*3) , 3vw);}
.cmn_calendar_rack {position: relative; display: block; width: 100%; height: auto; border-bottom: 1px solid var(--c_black); font-size: clamp(15px , 2vw , 16px); line-height: 1.7em; padding: 1.7em 0.5em; text-align: left; color: var(--c_font_color);
    .cmn_date_tag_box { transition: 0.2s;
        .cmn_tag {pointer-events: none;}
    }
    .title {font-weight: 600; transition: 0.2s;}
    &.disactive {pointer-events: none;}
    &:hover {
        .cmn_date_tag_box {
            .cmn_date { color: var(--c_link_color);}
            .cmn_tag {border: 1px solid var(--c_link_color); color: var(--c_link_color);}
        }
        .title { color: var(--c_link_color);}
    }
}

/* special project
-------------------------------*/
#special_project {z-index: 2;
    .cmn_bg_layer {mask-image: url(../images/svg/clip_shape_top_countdown.svg); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: bottom left;
        .bg_top_text {position: absolute; top: 0; left: 0; width: 100%; height: min(96px , 12vh); background: no-repeat center url(../images/text/parts_text_special_project.svg); background-size: contain;}
        .bg_q_icon {position: absolute; top: 0; right: 0; width: min(400px , 30%); height: 100%; background: no-repeat center bottom url(../images/svg/parts_q_yellow.svg); background-size: contain;}
        .cmn_bg_balloon {
            &.left {left: 5%; top: 55%;}
            &.right {right: 5%; top: 45%;}
        }
    }
    .special_project_wrap_outer {position: relative; margin-bottom: calc(var(--base_distance)*0.5);
        .cmn_main_layer {width: 80%;}
        .sp_wrap_bg_layer {position: absolute; display: block; width: 100%; height: 100%;
            .bg_dots_circle {position: absolute; display: block; width: auto; height: 110%; aspect-ratio: 1 / 1; top: 50%; left: 50%; transform: translate(-50% , -50%);
                img {display: block; width: auto; height: 100%; animation: rotation 60s linear infinite;}
            }
        }
    }
    .special_projects_swiper {
        .swiper-wrapper {
            .swiper-slide { height: auto;
                .slide_inner {position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--c_bg_color); border-radius: calc(var(--base_gap)*0.5); padding: calc(var(--base_gap)*3) calc(var(--base_gap)*2); 
                    .slide_num {position: absolute; display: flex; justify-content: center; align-items: center; top: 0; left: 0; transform: translate(-15% , -15%); width: calc(var(--base_gap)*3); height: calc(var(--base_gap)*3); background-color: var(--c_red); border-radius: 50%; color: var(--c_white_l); margin-bottom: 0; font-size: min(24px , 5vw);
                        span {position: relative; display: inline-block; transform: translateY(-6%);}
                    }
                    .project_title {position: relative; display: block; width: 100%; height: auto; margin-bottom:calc(var(--base_gap)*0.5); border: 1px solid var(--c_red); font-weight: 700; font-size: clamp(16px , 2vw , 24px); line-height: 1.4em; padding: 0.5em 1em; }
                    .thumbnail {position: relative; display: block; width: 100%; height: auto; margin-bottom:0;
                        img {position: relative; display: block; width: 100%; height: auto;}
                    }
                    .text_box_outer {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--base_gap)*0.8); width: 100%; height: auto; padding: calc(var(--base_gap)*1) 0; text-align: left; flex-grow: 1;
                        .text_box {position: relative; display: block; width: 100%; height: auto;}
                        .period {font-size: 1.2em; font-weight: 700; margin-bottom: 0.3em;}
                    }
                    .cmn_coming_soon_overlay , .cmn_end_overlay {/* border-radius: calc(var(--base_gap)*0.5); */}
                }
            }
        }
    }
    .special_project_swiper_icons {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(var(--base_gap)*1); margin-bottom: calc(var(--base_distance)*1); width: 70%;
        .icon {position: relative; display: block; width: clamp(50px , 15vw , 80px); width: calc((100% - var(--base_gap)*1 *3)/4); height: auto; border-radius: 50%; cursor: pointer;
            &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_white_l); transform: scale(1.08); border-radius: 50%; transition: 0.2s;}
            &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center; background-size: contain; }
            img {position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;}
            &.active , &:hover {
                &::before {transform: scale(1.15);}
            }
            &.comingsoon {
                &::after {background-image: url(../images/svg/icon_overlay_comingsoon.svg);}
            }
            &.end {
                &::after {background-image: url(../images/svg/icon_overlay_end.svg);}
            }
        }
    }
    .special_project_flex_rack {position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--base_gap)*2); margin-bottom: calc(var(--base_gap)*3);
        .image_box {position: relative; display: block; width: 50%; height: auto; aspect-ratio: 16 / 9; background-color: var(--c_bg_color);
            img {position: relative; display: block; width: 100%; height: 100%; object-fit: contain;}
        }
        .links_box {position: relative; display: block; width: 50%; height: auto; text-align: left;
            .title {display: block; text-align: left; font-weight: 800; font-size: clamp(22px , 2vw , 38px); line-height: 1.4em; margin-bottom: 0.5em;}
            .links {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: calc(var(--base_gap)*0.5);
                .cmn_link_btn_a.type_simple {width: calc((100% - var(--base_gap)*0.5)/2); min-width: initial; margin: 0; font-size: clamp( 11px , 1.0vw , 18px );}
                .cmn_link_btn_a {width: 100%; max-width: initial;}

            }
        }
    }
}
@media screen and (max-width: 1200px) {
    #special_project {
        .special_project_flex_rack { flex-direction: column; gap: calc(var(--base_gap)*1);
            .image_box {width: 100%;}
            .links_box {width: 100%;}
        }
    }
}

/* photo scroll
-------------------------------*/
.photo_scroll_section_01 {position: relative; display: block; width: 100%; height:min(440px , 40vw); background: repeat-x top left url(../images/webp/scroll_photo_01_v02.webp); background-size: auto 100%; margin-top: -4vw;
    &::after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%;  background: no-repeat center bottom url(../images/svg/wave_border_bottom_white.svg); background-size: contain;}
    &::before { position: absolute; display: block; content: ""; bottom: 1px; left: 0; width: 100%; height: calc(var(--base_distance)*1); transform: translateY(100%); background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); }
}

/* sponsors
-------------------------------*/
#sponsors {
    .sponsors_list {position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(var(--base_gap)*1);
        li {position: relative; display: block; width: min(180px , 16vw);
            a {display: block; width: 100%; height: auto; transition: 0.2s;
                img { display: block; width: 100%; height: auto;}
                &:hover {transform: translateY(-5%);}
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    #sponsors {
        .sponsors_list {
            li {width: min(180px , 26vw);}
        }
    }
}

/* tie_up
-------------------------------*/
#tie_up {padding-top: 0;
    &::before { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 100%; height: calc(var(--base_distance)*1); background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); }
    &::after { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 100%; height: calc(var(--base_distance)*1); transform: translateY(calc(100% - 1px)); background: no-repeat center top url(../images/svg/wave_border_bottom_white_02.svg); background-size: contain; z-index: 2; pointer-events: none;}
    .tie_up_videos_swiper_outer { width: 80%;}
    .tie_up_videos_swiper { margin-bottom: calc(var(--base_gap)*1);
        .swiper-wrapper {
            .swiper-slide {
                .slide_inner {position: relative; display: block; width: 100%; height: auto; cursor: pointer; pointer-events: none;
                    .content {position: relative; display: block; width: 100%; height: auto; padding: calc(var(--base_gap)*0.7); margin-bottom: calc(var(--base_gap)*0.5);
                        &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c_red); opacity: 0; transition: 0.2s;}
                        .img_outer {position: relative; display: block; width: 100%; height: auto; padding-top: calc(100% * 9 /16); background-color: var(--c_white_l); overflow: hidden;}
                        img {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(0.5); transition: 0.2s;}
                        .play_icon {position: absolute; top: 0; left: 50%; width: 10%; height: 100%; transform: translateX(-50%); background: no-repeat center url(../images/svg/icon_video_play.svg); background-size: contain; opacity: 0; transition: 0.2s;}
                    }
                    .title_box {position: relative; display: block; width: 100%; height: auto; border: 1px solid var(--c_red); color: var(--c_font_color); font-size: clamp(15px , 2vw , 18px); line-height: 1.4em; padding: 0.5em 1em; text-align: left; opacity: 0; transition: 0.2s;
                        .title { font-weight: 600;}
                    }
                    &:hover {
                        .content {
                            img {transform: scale(1.05);}
                            .play_icon { transform: translateX(-50%) scale(1.1);}
                        }
                    }
                }
                &.swiper-slide-active , &.swiper-slide-duplicate-active {
                    .slide_inner {pointer-events: initial;
                        .content {
                            &::before {opacity: 1;}
                            img {filter: initial;}
                            .play_icon {opacity: 1;}
                        }
                        .title_box {opacity: 1;}
                    }
                }
            }
        }
    }
}

/* message
-------------------------------*/
#message {padding: calc(var(--base_distance)*1.5) 0;
    .cmn_bg_layer {mask-image: url(../images/svg/clip_shape_top_countdown.svg); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: bottom left;
        .cmn_bg_balloon {
            &.right {top: 10%; right: 5%;}
        }
        .bg_text_ring {position: absolute; display: block; width: min(1000px , 50vw); height: min(1000px , 50vw); bottom: 0; left: 0; transform: translate(-35% , 35%);
            &::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center url(../images/svg/parts_bg_text_ring_02.svg); background-size: contain; animation: rotation 60s linear infinite;}
        }
    }
    .message_flex_wrap {position: relative; display: flex; justify-content: space-between; align-items: flex-start;
        .title_area {position: relative; display: block; width: 15%; height: auto;}
        .message_area {position: relative; display: block; width: 80%; height: auto;
            .message_list {position: relative; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--base_gap)*2) calc(var(--base_gap)*1);
                .message_member_box {position: relative; display: block; width: calc((100% - var(--base_gap)*1 *2) / 3);
                    .member_photo {position: relative; display: block; width: 100%; height: auto; background-color: var(--c_white_l); padding: clamp(3px , 1vw , 6px); margin-bottom: calc(var(--base_gap)*0.5); cursor: pointer; transition: 0.2s;
                        img {display: block; width: 100%; height: auto;}
                        &::after { position: absolute; display: block; content: ""; bottom: clamp(3px , 1vw , 6px); right: clamp(3px , 1vw , 6px); width: clamp(40px, 4vw , 50px); height: clamp(40px, 4vw , 50px); background: no-repeat center url(../images/svg/icon_tap.svg); background-size: contain; transform: translate(-15% , -15%); }
                        &:hover {transform: scale(1.02);}
                    }
                    .name {font-size: clamp(18px , 2vw , 20px); line-height: 1.4em; margin: 0; font-weight: 700;}
                }
            }
        }
    }
}
@media screen and (max-width: 835px) {
    #message {
        .message_flex_wrap {flex-direction: column;
            .title_area {width: 100%;}
            .message_area {width: 100%;
                .message_list {
                    .message_member_box {width: calc((100% - var(--base_gap)*1 *1) / 2);}
                }
            }
        }
    }
}

.cmn_member_modal {position: relative; width: min(1200px, 94vw); height: calc(75vh); overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; transform: translateY(-2%);
    .member_modal_content {position: relative; display: flex; justify-content: space-between; align-items: flex-start; 
        .photo_area {position: relative; display: block; width: 45%; height: auto;
            img {display: block; width: 100%; height: auto; max-width: initial; object-fit: contain; object-position: top center;}
        }
        .text_area {position: relative; display: block; width: 52%; height: auto; padding:calc(var(--base_gap)*2) 0; color: var(--c_white_l);
            .name_sns_rack {display: flex; justify-content: space-between; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*2);
                .name {display: block; font-size: clamp(28px , 3vw , 35px); line-height: 1.4em; font-weight: 700;}
            }
            .message_box {position: relative; display: block; width: 100%; height: auto; margin-bottom: calc(var(--base_gap)*2);
                .message_tab_switch {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--base_gap)*1); margin-bottom: calc(var(--base_gap)*1);
                    .switch {position: relative; display: inline-block; border: 1px solid var(--c_white_l); border-radius: 9999px; padding: 0.2em 1.5em 0.3em; cursor: pointer; margin-bottom: 0; transition: 0.2s;
                        &.active , &:hover {background-color: var(--c_white_l); color: var(--c_black);}
                        &.disactive {opacity: 0.5; pointer-events: none; padding-left: 2.25em;
                            &::before { position: absolute; display: block; content: ""; top: 50%; left: 0.75em; width: 1em; height: 1em; transform: translate(0% , -50%); background: no-repeat center url(../images/svg/icon_rock.svg); background-size: contain; }
                        }
                    }
                }
                .message_tab_content {position: relative; display: block; width: 100%; height: auto; 
                    .tab {position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: 0.2s; font-size: clamp(15px , 2vw , 17px); font-weight: 600; line-height: 1.7em;
                        &.active {position: relative; opacity: 1; pointer-events: initial;}
                    }
                }
            }
            .section_border {position: relative; display: block; width: 100%; height: 1px; background-color: var(--c_white_l); margin-bottom: calc(var(--base_gap)*2);}
            .profile_text {}
            .sns_links {display: flex; gap: 10px;
                li {display: block;
                    a {position: relative; display: block; width: 46px; height: auto; transition: 0.2s;
                        img {display: block; width: 100%; height: auto; cursor: pointer;}
                        &:hover {transform: translateY(-5%);}
                    }
                }
                &.pos_pc {}
                &.pos_sp {display: none;}
            }
        }
    }
}
.cmn_member_modal_close_btn_sub {position: absolute; bottom: 2vh; left: 50%; cursor: pointer; color: var(--c_white_l); border: 1px solid var(--c_white_l); border-radius: 9999px; padding: 0.7em 2em; width: min(300px , 80vw); transform: translateX(-50%); transition: 0.2s;
    &:hover { color: var(--c_black); background-color: var(--c_white_l); } 
}
@media screen and (max-width: 835px) {
    .cmn_member_modal {height: calc(82vh); width: 80vw;
        .member_modal_content {flex-direction: column; align-items: center; padding: calc(var(--base_gap)*2) 0;
            .photo_area {width: 80%;}
            .text_area {width: 100%;
                .name_sns_rack {justify-content: center;}
                .message_box {
                    .message_tab_switch {justify-content: center;}
                }
                .profile_text {margin-bottom: calc(var(--base_gap)*2);}
                .sns_links { justify-content: center;
                    &.pos_pc {display: none;}
                    &.pos_sp {display: flex;}
                }
            }
        }    
    }
    .cmn_member_modal_close_btn_sub {bottom: 2vh;}
}

/* official sns
-------------------------------*/
#official_sns {
    .sns_links {position: relative; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: calc(var(--base_gap)*0.5);
        .cmn_link_btn_a {margin: 0;}
    }
}

/* anniversary_post
-------------------------------*/
#anniversary_post {
    .cmn_bg_layer {background-color: var(--c_lightgray); mask-image: url(../images/svg/clip_shape_top_anniversary_post.svg); mask-repeat: no-repeat; mask-size: 100% auto; mask-position: top left;
        .bottom_text {position: absolute; bottom: 0; left: 0; width: 100%; height: min(190px , 12vw); background: repeat-x center bottom url(../images/text/parts_text_anniversary_post.svg); background-size: auto 100%; transform: translateY(25%);}
    }
    .cmn_main_layer {
        .anniversary_post_text {position: relative; display: block; width: 100%; height:auto; margin-bottom: calc(var(--base_gap)*3);
            img {position: relative; display: block; width: 100%; height:auto;}
        }
    }
}