@charset "utf-8";



a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, p, pre, q, samp, section, select, small, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video {
    border: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    /* -webkit-font-smoothing: antialiased; */
    /* -webkit-backface-visibility: hidden; */
    box-sizing: border-box;
    /* color: #000; */
    transition: .3s cubic-bezier(.4, .4, 0, 1);
    word-spacing: 1px;
}





img {
    max-width: 100%;
    display: block;
    /* image-rendering: -webkit-optimize-contrast; */
    height: auto;
}






:root {
    --font1: 'Noto Sans JP';
    --black: #000000;
    --white: #ffffff;
    --main: #e6e6fa;
    --red: #BC0000;
    --gray: #878989;
    --sky: #7ddadd;
    --pinklight: #f49fee;
}

/* アンカーリンクのヘッダーオフセット */
[id] {
    scroll-margin-top: 90px;
}



body {
    background: #000000;
    font-family: var(--font1);
    color: var(--white);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

body.modal_open {
    overflow: hidden;
}




a, a:link {
    color: var(--black);
}

a.icon_target {
    display: flex;
    gap: 10px;
    align-items: center;
}

a.icon_target img {
    width: 18px;
    height: 18px;
}

footer a.icon_target img {
    width: 16px;
    height: 16px;
}

a:hover, a:link:hover {
    opacity: 0.8;
    text-decoration: none;
}




.main_wrap {
    /* background-color: var(--black); */
}

.container {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    /* background-color: var(--black); */
    position: relative;
    min-height: 100vh;
    /* overflow: hidden; */
    contain: paint;
    /* background-image: url(../images/honey.svg); */

}


.honeycomb {
    background-color: #000000;

    /* 90度回転させたハニカム模様（半透明の白） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='56' viewBox='0 0 100 56'%3E%3Cpath d='M66 28L50 56L16 56L0 28L16 0L50 0L66 28L100 28' fill='none' stroke='white' stroke-width='2' stroke-opacity='0.09'/%3E%3C/svg%3E");

    /* 模様のサイズ調整 */
    background-size: 54px 30px;
    background-position-x: -10px;

    /* 画面全体に広げる場合 */
    width: 100%;

}

/* ランダム白ハニカム */
.random-hexagons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.random-hexagon {
    position: absolute;
    opacity: 0.01;
}

.random-hexagon svg {
    display: block;
    width: 100%;
    height: 100%;
}




/* -------------------------------
共通
------------------------------- */


main {
    /* padding: 70px 24px 0; */
    /* padding: 70px 0 0; */
    padding-top: 10px;
}

section {
    padding: 0 24px;
}

.page main, .archive main, .single main {
    /* background-color: var(--black); */
}


h2 span.red {
    color: var(--red);
    font-size: 75px;
    font-weight: 600;
    font-family: "Bodoni Moda", serif;
    line-height: 1;

}

h2 span.white {
    color: var(--white);
    font-size: 75px;
    font-weight: 600;
    font-family: "Bodoni Moda", serif;
}




.box1 {
    /* background-color: var(--black); */
    border-radius: 20px;
    position: relative;
}

.box1::before {
    content: "";
    position: absolute;
    background-image: url(../images/box1.png);
    width: 40px;
    height: 20px;
    background-size: cover;
    top: -6px;
    right: 12px;
}

.box1::after {
    content: "";
    position: absolute;
    background-image: url(../images/box1.png);
    width: 40px;
    height: 20px;
    background-size: cover;
    bottom: -5px;
    left: 11px;
}



.box2 {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.box2_head {
    background-image: url(../images/box2_1.png);
    background-size: 100% 100%;
    /* width: 100%; */
    /* aspect-ratio: 3.5/1; */
    padding: 40px 27px 3px;
    /* box-sizing: content-box; */
    position: relative;
}

.box2_head::after {}

.box2_head .date {
    margin-bottom: 18px;
}

.box2_head .date>div:first-child {
    line-height: 1;
    margin-bottom: 5px;
    font-weight: 500;
}

.box2_head .date>div:last-child {
    display: flex;
    align-items: flex-end;
    line-height: 1;
}

.box2_head .date>div:last-child>div {
    display: flex;
    align-items: flex-end;
}

.box2_head .date .large {
    font-size: 23px;
    font-weight: normal;
    margin: 0 2px;
}

.box2_head .date .wd {
    background-color: #000;
    display: flex;
    width: 20px;
    height: 20px;
    color: white;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding-bottom: 2px;
    font-size: 14px;
    margin: 0 5px;
}

.box2_head .event_tax {
    position: absolute;
    top: 9px;
    right: 54px;
    color: white;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}


.box2_body {
    background-image: url(../images/box2_2.png);
    background-size: 100% 100%;
    background-repeat: repeat-y;
    /* width: 100%; */
}

.box2_body>div {
    padding: 5px 27px;
}


.box2_bottom {
    background-image: url(../images/box2_3.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 7/1;
    /* height: 20px; */
}

.box2_body .wp-block-heading {
    line-height: 1.3;
    margin-bottom: 10px;
}



.box3 {
    display: block;
    position: relative;
    margin-bottom: 25px;
}

.box3_head {
    background-image: url(../images/box3_1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    /* aspect-ratio: 4.88/1; */
    padding: 28px 20px 10px;
}

.box3_head .date {
    margin-top: 18px;
    line-height: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.box3_head .date>div:first-child {
    display: flex;
    align-items: flex-end;
}

.box3_head .date .large {
    font-size: 22px;
    font-weight: normal;
}

.box3_head .date .wd {
    background-color: #000;
    display: flex;
    width: 20px;
    height: 20px;
    color: white;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding-bottom: 2px;
    font-size: 14px;
    margin: 0 5px;
}

.month-group.hidden {
    display: none;
}


.box3_body {
    background-image: url(../images/box3_2.png);
    background-size: 100% 100%;
    background-repeat: repeat-y;
    width: 100%;
    padding: 7px 20px;
}

.box3_body>div {
    width: 60%;
}

.box3_body>div.name {
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 5px;
}


.box3_bottom {
    background-image: url(../images/box3_3_nolink.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 6.46/1;
}

a.box3 .box3_bottom {
    background-image: url(../images/box3_3.png);
}

.box3 .thumbnail {
    position: absolute;
    right: 30px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.box3 .thumbnail img {
    width: 110px;
    height: 150px;
    border-radius: 66%;
    object-fit: contain;
    /* border-top-left-radius: 75%; */
    /* border-top-right-radius: 69%; */
}


.breadcrumb {
    display: none;
    padding-left: 20px;
    padding-right: 20px;
}


.fadein {
    opacity: 0.3;
    transform: translate(0, 20px);
    transition: all 600ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

.english-text {
    letter-spacing: 1px;
}



.noresult {
    text-align: center;
    font-size: 16px;
    width: 100%;
}

@media screen and (max-width: 820px) {
    .container {
       /* max-width: 100vw; */
    }

    main {
        width: 100%;
    }
}





h2.icon {

    margin-bottom: 10px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
}


.content_roop .article .image {
    background-color: white;
    overflow: hidden;
    position: relative;
}

.content_roop .article {
    position: relative;
}

.content_roop .article .talent_data {
    position: absolute;
    bottom: 0;
    /* background-color: rgba(255, 255, 255, 0.6); */
    width: 100%;
    padding: 15vw 4vw 3vw;
    z-index: 200;
    background-image: url(../images/talent_data_bg.png);
    background-size: 100% 100%;
    background-position: bottom;
    height: 100px;
    /* display: flex; */
    align-items: flex-end;
    /* padding-bottom: 17px; */
}

.content_roop .article .talent_data li {
    background-color: #AB8001;
    color: white;
    display: inline-block;
    padding: 3px 6px 4px;
    line-height: 1;
    font-size: 10px;
}





.btn {
    text-align: center;
}

.btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #e2a0cd, #7ec7d7);
    color: white;
    border-radius: 100px;
    padding: 10px 40px;
    width: 72%;
    margin: 0 auto;
    height: 76px;
    font-size: 15px;
    position: relative;
    text-decoration: none !important;
    color: white !important;
}

@media screen and (max-width: 450px) {
    .btn a {
        width: 85%;
    }
}



.btn a::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 4px;
    right: 20px;
    background-image: url(../images/btn_arrow_right.png);
    background-position: 90% center;
    background-size: 20px;
    background-repeat: no-repeat;
}







/* -------------------------------
ヘッダー
------------------------------- */

.menu-trigger {
    position: relative;
    width: 100%;
    height: 32%;
    max-width: 80px;
    max-height: 13px;
    /* background-color: #000; */
    background: none;
}

.menu-trigger span {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all 0.5s;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
    /* transform: rotate(-15deg); */
}

.menu_btn:hover span:nth-of-type(1) {
    width: 100%;
}


.menu-trigger span:nth-of-type(2) {
    /* top: 49%;
    left: auto;
    right: 0; */
    /* transform: rotate(-15deg); */
}

.menu-trigger span:nth-of-type(2) {
    top: 99%;
    /* transform: rotate(-15deg); */
}



header.modal_open {
    /* background-color: white; */
    border-color: black;
    background-color: black
}

header.modal_open .img_white {
    /* display: none; */
}

/* header.modal_open .img_black {
    display: block;
} */
header.modal_open .text {
    /* display: none; */
}

header.modal_open .header_btn {
    /* background-color: #fff; */
    /* background-color: #676e77; */
    border-left: none;
}

header.modal_open .menu-trigger {
    /* background-color: white; */
}

header.modal_open .menu-trigger span {
    background-color: white;
}

header.modal_open .menu-trigger span:nth-of-type(1) {
    transform: translateY(6px) rotate(-19deg);
    height: 2px;
    border-radius: 2px;
}

/* header.modal_open .menu-trigger span:nth-of-type(2) {
} */

header.modal_open .menu-trigger span:nth-of-type(2) {
    transform: translateY(-7px) rotate(19deg);
    height: 2px;
    border-radius: 2px
}





/* -------------------------------
modal
------------------------------- */
.modal {
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 102;
    padding-top: 0;
    margin-top: 90px;
    background-color: black;

    /* 初期状態：上に隠れている */
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.6s;
    padding-bottom: 80px;
}

.modal.open {
    /* 開くとき：上から降りてくる */
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}


.modal_inner_body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 100px;
    padding-top: 3vh;
    background-color: black;
    padding: 39px 20px 80px;
    overflow-y: auto;


    .modalmenu {
        width: 100%;
        margin-bottom: 0;



        a {
            padding: 23px 49px;
            display: block;
            border-bottom: 1px solid #000;
            font-weight: bold;
            color: white;
            font-size: 28px;
            font-family: "Bodoni Moda", serif;

            /* メニューアイテムのアニメーション準備 */
            opacity: 0;
            transform: translateX(-40px);
            line-height: 1;
            transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        a.target {
            display: flex;
            align-items: center;
            gap: 10px;

            img {
                width: 17px;
                height: 17px;
            }
        }

        a:last-child {
            border-bottom: none;
        }

        .accordion {
            padding: 17px 30px;
            display: block;
            border-bottom: 1px solid #000;
            background-image: url(../images/menu_plus.png);
            background-position: 95% center;
            background-repeat: no-repeat;
            background-size: 20px;
            font-weight: bold;
        }

        .inner_accordion {
            display: none;
            margin-top: 14px;

            a {
                border-bottom: none;
                padding: 0;
                font-weight: normal;
                background: none;
                width: 270px;
            }
        }

        .accordion.open {
            background-image: url(../images/menu_minus.png);
        }

        .accordion.open .inner_accordion {
            display: block;
        }
    }

    .modal_sns {
        display: flex;
        align-items: center;
        gap: 15px;

        /* SNSアイコンのアニメーション */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .menu_sticky {
        position: sticky;
        bottom: 0px;
    }
}

/* メニューが開いた時のアニメーション */
.modal.open .modal_inner_body .modalmenu a {
    opacity: 1;
    transform: translateX(0);
}

/* 各メニューアイテムに時間差をつける */
.modal.open .modal_inner_body .modalmenu a:nth-child(1) {
    transition-delay: 0.3s;
}

.modal.open .modal_inner_body .modalmenu a:nth-child(2) {
    transition-delay: 0.38s;
}

.modal.open .modal_inner_body .modalmenu a:nth-child(3) {
    transition-delay: 0.46s;
}

.modal.open .modal_inner_body .modalmenu a:nth-child(4) {
    transition-delay: 0.54s;
}

.modal.open .modal_inner_body .modalmenu a:nth-child(5) {
    transition-delay: 0.62s;
}

.modal.open .modal_inner_body .modalmenu a:nth-child(6) {
    transition-delay: 0.70s;
}

/* SNSアイコンが開いた時 */
.modal.open .modal_inner_body .modal_sns {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.85s;
}

/* 閉じる時のアニメーション用（時間差をリセット） */
.modal:not(.open) .modal_inner_body .modalmenu a {
    transition-delay: 0s;
}

.modal:not(.open) .modal_inner_body .modal_sns {
    transition-delay: 0s;
}



















/* -------------------------------
ページネーション
------------------------------- */


.page-numbers, .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 0;
    gap: 10px;
}

.page-numbers, .nav-links li {}

.page-numbers a, .nav-links a, .nav-links span, .page-numbers span {
    font-size: 15px;
    margin: 0 0px;
    background-color: #fff;
    /* border-radius: 100px; */
    width: 30px;
    display: flex;
    justify-content: center;
    height: 30px;
    align-items: center;
    color: #000;
    font-family: "Bodoni Moda", serif;
}

.page-numbers span.current {
    background-color: #4b4b4b;
    color: white;
    /* font-weight: bold; */
}

.page-numbers .next, .page-numbers .prev {
    display: none;
}

.page-numbers.next, .page-numbers.prev {
    display: none;
}

.last-page, .first-page {
    display: block;
    width: 30px;
}

.page-numbers_wrap nav {
    margin-right: 10px;
    margin-left: 10px;
}

.page-numbers_wrap nav .current {
    background-color: #4b4b4b;
}

.page-numbers_wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}





/* 前の記事と次の記事 */
.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;

    .post-navigation-arrow {
        width: 16px;
    }

    .btn {
        a {
            width: 160px;
            height: 33px;
            font-size: 10px;
            padding: 10px;
        }

        a::after {
            width: 10px;
            background-position: 100% center;
            right: 13px;
        }
    }
}

@media screen and (max-height: 670px) {
    .modal_inner_body {
        .modalmenu {
            a {
                padding: 17px 49px;
            }
        }
    }
}







/* -------------------------------
ボタン
------------------------------- */

.btn-wrap {
    a {
        display: flex;
        border: 1px solid #5D5D5D;
        color: white;
        max-width: 191px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        height: 45px;
        font-family: "Outfit", sans-serif;
        font-weight: 300;
        font-size: 16px;
        background-color: #000;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: color 0.3s ease;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #fff;
            z-index: -1;
            transition: width 0.3s ease;
        }

        &:hover {
            color: #000;
            opacity: 1;

            &::before {
                width: 100%;
            }
        }
    }
}







/* -------------------------------
footer
------------------------------- */

footer {
    /* border-top: 1px solid #000; */
    padding-top: 18px;
    background-color: black;
}

footer .f_wrap {
    display: flex;
    flex-direction: column;

    .head {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 39px;
    }

    .head>div:first-child {
        font-size: 13px;
    }

    .menu {
        display: flex;
        justify-content: space-around;
        padding: 0 28px;


        .column {
            flex: 0 0 49%;

            .pagelink {
                font-family: "Bodoni Moda", serif;
                font-weight: 700;
                font-size: 28px;
            }

            .pagelink2 {
                font-family: "Bodoni Moda", serif;
                font-weight: 700;
                font-size: 14px;
            }

            a {
                display: block;
                margin-bottom: 11px;
                color: white;
            }
        }

        .column.c_left {
            a {
                font-size: 12px;
                margin-bottom: 4px;
            }

            a.pagelink {
                font-size: 28px;

            }
        }

        .column.c_right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    }

    .bottom {
        margin-top: 26px;
        padding: 0 28px;
        margin-bottom: 6px;
        display: flex;
        justify-content: center;
        gap: 10px;

        a {
            display: inline-block;
            margin-bottom: 13px;
            max-width: 40px;
        }
    }

    a.target {
        display: flex;
        align-items: center;
        gap: 10px;

        img {
            width: 17px;
            height: 17px;
        }
    }
}

footer .footer_logo {
    width: 200px;
    margin-bottom: 0;
    margin-top: 12px;
}

footer .copywrite {
    background-color: var(--black);
    text-align: center;
    font-family: "Bodoni Moda", serif;
    font-size: 11px;
    padding: 8px 0 10px 0;
}

.sticky_btn {
    display: none;
}




@media screen and (min-width: 760px) {
    footer {
        display: none;
    }
}

@media screen and (max-width: 820px) {
    footer {}

}











.container_outer_wrap {
    display: flex;
}

.container_outer_wrap .top_left {
    flex: 0 0 calc((100vw - 480px) / 2);
    display: flex;
    justify-content: center;
    position: relative;
    background-image: url(../images/bg_top_left.png);
    background-size: 32%;
    background-position: left 158px;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container_outer_wrap .top_left.loaded {}

.container_outer_wrap .top_left>div {
    position: fixed;
    top: 5%;
    text-align: center;
    width: 100%;
}

.container_outer_wrap .top_left img {
    display: block;
    z-index: 1;
    /* width: calc(((100vw - 480px) / 2) * 0.44); */
    width: 230px;
}

.container_outer_wrap .top_left a.top_left_logo {
    /* width: calc(((100vw - 480px) / 2)* 0.44); */
    display: block;
    position: absolute;
    left: 30%;
    top: 0;
    transition: 0.7s ease-in-out;
}

.container_outer_wrap .top_left a.top_left_stick {
    /* width: calc(((100vw - 480px) / 2)* 0.44); */
    display: block;
    position: absolute;
    left: 10%;
    top: 306px;
    transition: 0.7s ease-in-out;
    width: 430px;

    img {
        width: 100%;
        max-width: 430px;
    }
}


.container_outer_wrap .top_left a>div {
    margin-top: 10px;
}

.container_outer_wrap .top_left.loaded a {
    left: 39%;
}

.container_outer_wrap .top_left.loaded a.top_left_stick {
    left: 34%;
}

.container_outer_wrap .top_left .top_left_logo {
    opacity: 0;
    transition: 2s ease-in-out;
}

.container_outer_wrap .top_left.loaded .top_left_logo {
    opacity: 1;
}

.container_outer_wrap .top_left>div.copywrite {
    top: auto;
    bottom: 24px;
    left: 40px;
    color: #000;
    font-size: 12px;
    z-index: 99999;
    text-align: left;
    font-size: 12px;
    display: inline-block;
    width: auto;
}

@media screen and (max-width: 820px) {
    .container_outer_wrap .top_left {
        display: none;
    }
}


.container_outer_wrap .top_right {
    order: 3;
    flex: 0 0 calc((100vw - 515px) / 2);
    background-image: url(../images/bg_top_right.png);
    background-size: 22%;
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.container_outer_wrap .top_right>div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-left: 84px;
}

.container_outer_wrap .top_right>div:first-child {
    position: fixed;
    top: 10%;
}

.container_outer_wrap .top_right>div:last-child {
    position: fixed;
    bottom: 2%;
    top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.container_outer_wrap .top_right>div>div {
    margin-bottom: 7px;
}

.container_outer_wrap .top_right .inner_accordion {
    padding-left: 10px;
    margin-top: -0.5vh;
    margin-bottom: 1.1vh;

    a {
        margin-bottom: 1.5vh;
        line-height: 1;
        font-weight: 400;
    }
}



.container_outer_wrap .top_right>div a {
    color: white;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    display: block;
    margin-bottom: 2vh;
    font-family: "Bodoni Moda", serif;
    text-decoration: none;


}

.container_outer_wrap .top_right>div a:hover {
    text-decoration: none;
}

.container_outer_wrap .top_right>div a.target {
    display: flex;
    align-items: center;
    gap: 10px;

    img {
        width: 17px;
        height: 17px;
    }
}

.container_outer_wrap .top_right a:hover {
    text-decoration: underline;
}

.container_outer_wrap .top_right .talent {
    display: flex;
}

@media screen and (max-width: 1300px) {
    .container_outer_wrap .top_right .talent {
        display: block;
    }

    .container_outer_wrap .top_right>div {
        top: 14%;
    }
}

@media screen and (max-width: 1100px) {
    .container_outer_wrap .top_right>div {
        padding-left: 20px;
    }

    .container_outer_wrap .top_left img {
        max-width: 20vw;
    }
}


.container_outer_wrap .top_right .talent>a {
    flex: 0 0 200px
}

.container_outer_wrap .top_right .talent_box {
    display: flex;
    flex-wrap: wrap;
    max-height: 30vh;
    overflow-y: auto;
}

.container_outer_wrap .top_right .talent_box a {
    width: 45%;
    color: #9D9D9F;
    font-size: 14px;
}

@media screen and (max-width: 1600px) {
    .container_outer_wrap .top_right .talent_box a {
        width: 100%;
    }

}


.container_outer_wrap .top_right .talent_box::-webkit-scrollbar {
    background: #060318;
}

.container_outer_wrap .top_right .privacy {
    text-align: right;
    padding-right: 20px;
    color: #ffffff;
}

.container_outer_wrap .top_right .privacy a {
    font-size: 14px;
    color: #ffffff;
}

.container_outer_wrap .top_right .privacy a:hover {
    text-decoration: underline;
}



.container_outer_wrap .top_right .company a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.container_outer_wrap .top_right .company a img {
    width: 14px;
    height: 14px;
}

.container_outer_wrap .top_right .contact {
    display: flex;
}

@media screen and (max-width: 1300px) {
    .container_outer_wrap .top_right .contact {
        display: block;
    }
}

.container_outer_wrap .top_right .contact>div {
    display: flex;
    flex-direction: column;
}

.container_outer_wrap .top_right .contact h3 {
    color: white;
    font-size: 16px;
    font-weight: normal;
    flex: 0 0 200px;
}

.container_outer_wrap .top_right .contact a {
    color: #9D9D9F;
    font-size: 14px;
}




/* -------------------------------
ヘッダー
------------------------------- */




header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 11;
    transition: 0.7s;
    background-color: rgba(0, 0, 0, 0.8);
    padding-right: 0;
    border-bottom: 1px solid #000;
    z-index: 1020;
    /* box-sizing: border-box; */
    max-width: 480px; /* ヘッダーもコンテンツ幅に合わせる */
    margin: 0 auto;   /* ヘッダーの中央寄せ */
}

.body_scrolled header {
    /* background-color: rgba(0, 0, 0, 0.5); */
}

@media screen and (min-width: 1100px) {
    header {
        /* display: none; */
    }

    main {
        padding-top: 15px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 820px) {
    .container_outer_wrap .top_right {
        display: none;
    }

    .container_outer_wrap .top_left a {
        display: none;
    }
}


header>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 17px;
    height: 90px;
    padding-right: 16px;
}

@media screen and (min-width: 821px) {
    header>div {
        padding-right: 26px;
        display: none;
    }
}


header .header_logo img {
    height: 64px;
}

header .header_btn {
    /* background-color: black; */
    height: 50px;
    width: 62px;
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* border-left: 1px solid #000; */
}

header .img_black {
    display: none;
}

@media screen and (max-width: 820px) {
    header .header_btn {
        display: flex;
    }
}




/* -------------------------------
個別ページ
------------------------------- */
.home main {
    /* padding-top: 60px; */
    padding-top: 0;
    /* background-color: #fff; */
    padding-bottom: 0;
}

@media screen and (max-width: 820px) {
    .home main {
        /* padding-top: 60px; */
        padding-top: 0;
    }
}




.privacy {
    .mtm {
        margin-bottom: 5px;
    }
}



/* -------------------------------
トップページ
------------------------------- */

body.loaded .mainview {
    transition: 0.7s ease-in-out 0.7s;

}

/* -------------------------------
メインビジュアル改修 20250903
------------------------------- */
/* メインビジュアルのコンテナ */
.main-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
    /* 画像が読み込まれるまでの背景色 */
    height: 190vw;
    max-height: 787px;
    margin-bottom: 60px;
}

/* 背景画像 */
.background-image {
    width: 100%;
    display: block;
    /* 画像の下にできる余分な隙間を防ぎます */
}

/* キャラクター画像共通スタイル */
.character-image1,
.character-image2,
.character-image3 {
    opacity: 0;
    /* filter: grayscale(100%); */

}

/* キャラクター画像1 - 最初に表示 (順番: 1番目) */
.character-image1 {
    position: absolute;
    width: 136%;
    max-width: 700px;
    height: auto;
    left: 16.5%;
    top: 9.1%;
    z-index: 2;
    transform: translateX(-50%);
    animation: mono-to-color-char1 1.5s ease-out 0.8s forwards;
}

/* キャラクター画像2 - 3番目に表示 (順番: 3番目) */
.character-image2 {
    position: absolute;
    width: 96%;
    max-width: 700px;
    height: auto;
    left: 2%;
    top: 26.5%;
    z-index: 3;
    animation: mono-to-color 1.5s ease-out 1.6s forwards;
}

/* キャラクター画像3 - 2番目に表示 (順番: 2番目) */
.character-image3 {
    position: absolute;
    width: 103%;
    max-width: 700px;
    height: auto;
    right: -35.5%;
    top: 17%;
    z-index: 2;
    animation: mono-to-color 1.5s ease-out 1.2s forwards;
}

/* 波模様背景 - キャラクター3体表示後に左から右へ */
.background-image2 {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: -1%;
    z-index: 4;
    opacity: 0;
    /* clip-path: inset(0 100% 0 0); */
    animation: wave-reveal 0.9s ease-out 0.5s forwards;
}

.background-image {
    position: absolute;
    top: -93px;
}

/* キャッチコピー画像 - 最後に表示 */
.catchphrase-image {
    position: absolute;
    width: 100%;
    max-width: 700px;
    height: auto;
    bottom: 1.5%;
    left: 5%;
    z-index: 4;
    opacity: 0;
    transform: translateY(10px);
    animation: catchphrase-fade-in 0.8s ease-out 2.0s forwards;
}

/* ===================================
   モノクロ→カラー フェードインアニメーション
=================================== */

/* character-image1用（translateX(-50%)を維持） */
@keyframes mono-to-color-char1 {
    0% {
        opacity: 0;
        /* filter: grayscale(50%); */
        transform: translateX(-50%) scale(1.1);
    }

    20% {
        /* filter: grayscale(50%); */
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    100% {
        opacity: 1;
        /* filter: grayscale(0%); */
        transform: translateX(-50%) scale(1);
    }
}

/* character-image2, character-image3用 */
@keyframes mono-to-color {
    0% {
        opacity: 0;
        /* filter: grayscale(50%); */
        transform: scale(1.1);
    }

    20% {
        /* filter: grayscale(50%); */
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        /* filter: grayscale(0%); */
        transform: scale(1);
    }
}

/* 波模様を左から右へ徐々に表示 */
@keyframes wave-reveal {
    0% {
        opacity: 0;
        /* clip-path: inset(0 100% 0 0); */
    }

    100% {
        opacity: 1;
        /* clip-path: inset(0 0 0 0); */
    }
}

/* キャッチコピーのフェードイン */
@keyframes catchphrase-fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 汎用フェードイン（他で使用する場合用） */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}








/* -------------------------------
トップページ
------------------------------- */




.front {

    .section-title {
        margin-bottom: 22px;
    }

    h2 span.red {
        font-size: 80px;
    }

    .top_livertitle {
        display: flex;
        align-items: flex-end;

        .crownicon {
            flex: 0 0 50px;
        }

        .title {
            flex: 0 0 auto;
            line-height: 1;
            font-family: "Noto Serif", serif;
            font-size: 18px;
            letter-spacing: 2px;
        }
    }

    .liver-list {
        display: flex;
        flex-direction: column;
        gap: 80px;
        margin-top: 80px;
        padding: 0 19px;



        .liver-card {
            display: block;
            width: 100%;
            position: relative;
            margin-top: 31px;


            /* キャラクターがはみ出すスペース */

            .liver-image {
                position: relative;
                height: 281px;
                overflow: visible;


                /* キャラがはみ出せるように */

                img {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    max-width: 500px;
                    height: 360px;
                    object-fit: cover;
                    object-position: top center;
                    /* 上半身（バストアップ）を表示 */
                    z-index: 2;
                    transition: transform 0.3s ease;
                }
            }

            .liver-image::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /* background-color: white; */
                background-image: url(../images/list_bg.png);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                background-blend-mode: overlay;
                border-radius: 0;
                z-index: 1;
                transition: opacity 0.3s ease;
            }

            /* ホバーアニメーション */
            &:hover {
                opacity: 1;

                .liver-image::before {
                    opacity: 0.7;
                }

                .liver-image img {
                    transform: translateX(-50%) scale(1.05);
                }
            }

            .liver-info {
                position: absolute;
                bottom: 0;
                z-index: 3;
                /* background-color: #000; */
                /* padding: 10px 10px; */
                text-align: center;
                padding-bottom: 21px;


                .liver-name {
                    color: white;
                    font-size: 16px;
                    font-weight: bold;
                    display: block;
                    line-height: 1.3;
                    background-color: #000;
                    font-family: "Noto Serif", serif;
                    font-size: 18px;
                    padding: 5px 31px 7px;
                    margin-right: 62px;
                }

                .liver-name-en {
                    color: #fff;
                    font-size: 11px;
                    display: block;
                    line-height: 1.3;
                    margin-top: 0cm;
                    margin-left: 62px;
                    background-color: #000;
                    font-family: "Noto Serif", serif;
                    font-size: 12px;
                    padding: 4px 30px 5px;
                }
            }
        }

        /* liver-card スクロールフェードインアニメーション */
        .liver-card {
            opacity: 0;
            transform: translateY(40px);

            .liver-image::before {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.6s ease, transform 0.6s ease;
            }

            .liver-image img {
                opacity: 0;
                transform: translateX(-50%) translateY(30px);
                transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
            }

            .liver-info {
                opacity: 0;
                transform: translateY(20px);
                transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
            }
        }

        .liver-card.in-view {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.4s ease, transform 0.4s ease;

            .liver-image::before {
                opacity: 1;
                transform: translateY(0);
            }

            .liver-image img {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }

            .liver-info {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ホバー時はスケールアニメーションを優先 */
        .liver-card.in-view:hover {
            .liver-image img {
                transform: translateX(-50%) scale(1.05);
            }
        }
    }

    .sec-text {
        line-height: 2.2;
        margin-top: 120px;
        padding: 0 30px;


        background-image: url(../images/about_bg_pyramid.png);
        background-repeat: no-repeat;
        background-position-x: center;
        background-size: 100%;

        p {
            margin-bottom: 45px;
            font-size: 16px;
            line-height: 2.4;
        }

        .btn-wrap {
            margin-top: 65px;
            margin-bottom: 73px;
        }
    }

    .sec-benefit {
        margin-top: 109px;
        padding: 0 15px;

        .section-title {
            margin-bottom: 30px;

            span {
                font-size: 60px;
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        .benefit-list {
            .benefit-item {
                margin-bottom: 33px;
                opacity: 0;
                transform: translateX(-50px);
                transition: opacity 0.6s ease-out, transform 0.6s ease-out;

                &.slide-in {
                    opacity: 1;
                    transform: translateX(0);
                }

                /* 順番にディレイをつける */
                &:nth-child(1) {
                    transition-delay: 0s;
                }

                &:nth-child(2) {
                    transition-delay: 0.15s;
                }

                &:nth-child(3) {
                    transition-delay: 0.3s;
                    margin-bottom: 20px;
                }
            }
        }

        .tar {
            text-align: right;
            font-size: 22px;
        }

    }



    .sec-audition {
        margin-top: 120px;
        margin-bottom: 120px;

        .section-title {
            margin-bottom: 20px;

            span {
                font-size: 60px;
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        .textcontent {
            padding: 0 0px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .audition-content {
            border-radius: 14px;
            background-color: white;
            padding: 0 20px 20px;
            margin-bottom: 20px;

            .audition-text {
                .title {
                    /* padding-left: 20px; */
                }
            }

            .btn-wrap2 {
                margin-top: 30px;

                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(to right, #e2a0cd, #7ec7d7);
                    color: white;
                    border-radius: 100px;
                    width: 100%;
                    margin: 0 auto;
                    height: 56px;
                    font-size: 15px;
                    position: relative;
                    text-decoration: none !important;
                    color: white !important;
                    border: none;
                    max-width: 100%;
                }
            }
        }

        .textcontent2 {
            font-size: 12px;

            .fz14 {
                font-size: 14px;
                margin-bottom: 22px;
            }

            p {
                margin-bottom: 7px;
            }
        }
    }


    .btn-wrap {
        margin-top: 55px;









        a {}
    }

    .sec-linkbanner {
        padding: 0 20px;

        .bannerbox {
            a {
                margin-bottom: 25px;
                display: block;
            }

        }

    }

    .sec-platinum {
        margin-top: 86px;
    }

}








/* -------------------------------
Raynelについて
------------------------------- */

.about {
    padding-top: 25px;

    h2 span.red {
        font-size: 65px;
    }

    .abouttext {
        text-align: center;
        width: 100%;
        margin-top: 35px;
        margin-bottom: 18px;

        img {
            max-width: 276px;
            margin: 0 auto;
        }
    }

    .sec1 {
        padding: 0 24px;
        line-height: 2.1;
    }

    p {
        margin-bottom: 32px;
    }
}



input, textarea {
    /* -webkit-appearance: none!important; */
    -webkit-text-size-adjust: 100% !important;
    font-size: 16px !important;
}







/* -------------------------------
お問い合わせ
------------------------------- */


.contact {
    padding-top: 30px;

    h2 span.red {
        font-size: 65px;
    }

    h2 {
        margin-bottom: 30px;
    }

    .sec1 {
        .box1 {

            /* padding: 30px 20px; */
            .selectp {
                margin-top: 50px;

                .required {
                    font-weight: 700;
                    font-size: 10px;
                    padding: 2px 5px;
                    background-color: #BC0000;
                    margin-left: 8px;
                }
            }

            .box1label {
                font-weight: bold;
            }
        }
    }



    .btn {
        margin-top: 60px;

    }

    .sec1 a {
        color: #00f;
        text-decoration: underline;
    }



    .box1 {

        input[type=text], input[type=email], input[type=tel], input[type=url] {
            background-color: #ededed;
            padding: 9px;
            border-radius: 10px;
            width: 100%;
            font-family: 'Noto Sans JP';
        }

        input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder {
            color: #a3a3a3;
        }

        textarea {
            background-color: #ededed;
            min-height: 200px;
            padding: 13px;
            width: 100%;
            border-radius: 10px;
        }

        textarea::placeholder {
            color: #a3a3a3;
        }

        .form_wrap {
            margin-bottom: 18px;
        }

        .form_label {
            margin-bottom: 10px;
            font-weight: bold;
        }

        .form_label p {
            display: flex;
            align-items: center;
        }

        .form_label span {
            background-color: #fa6f97;
            color: white;
            padding: 3px 10px;
            font-size: 10px;
            line-height: 1;
            margin-left: 15px;
            display: inline-block;
            border-radius: 3px;
        }

        .wpcf7-list-item {
            display: flex;
            margin: 0;
        }

        .wpcf7-list-item label {
            display: flex;
            flex: 0 0 100%;
            height: 20px;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;
        }

        .wpcf7-form-control-wrap>span>span {
            margin-bottom: 6px;
        }

        .wpcf7-submit {
            background-color: #000;
            border: 1px solid #5D5D5D;
            color: white;
            width: 224px;
            height: 45px;
            font-size: 16px;
            display: block;
            margin: 0 auto;
        }


        dt {
            p {
                font-size: 14px;
                font-weight: 700;
                margin-bottom: 5px;
                letter-spacing: 1px;

                .required {
                    font-weight: 700;
                    font-size: 10px;
                    padding: 2px 5px;
                    background-color: #BC0000;
                    margin-left: 8px;
                }
            }
        }

        dd {
            margin-bottom: 12px;

            .wpcf7-radio {
                display: flex;
                gap: 20px;

                .wpcf7-list-item {
                    margin: 0;
                }

                .wpcf7-list-item label {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                }

                .wpcf7-list-item input[type="radio"] {
                    width: 18px;
                    height: 18px;
                    accent-color: #000;
                    cursor: pointer;
                }

                .wpcf7-list-item-label {
                    font-weight: bold;
                    color: #fff;
                }
            }
        }

        .wpcf7-submit {
            margin-top: 50px;
        }

        @media screen and (max-width: 450px) {
            .wpcf7-submit {
                width: 85%;
            }
        }

        .wpcf7-submit:hover {
            background-color: #fff;
            color: #000;
            /* border: 1px solid #4ec9cc; */
        }
    }

}


.page-id-18 .container {
    background-color: #e6e6fa;
}


main.contact {
    padding-bottom: 50px;
}






/* お問い合わせ種別切り替え */
.contact-type-selector {
    display: flex;
    gap: 20px;
    margin-bottom: 26px;
    justify-content: flex-start;
}

.contact-type-label {
    display: flex;
    align-items: center;
    gap: 8px;
    /* padding: 12px 24px; */
    /* border: 2px solid #ddd; */
    /* border-radius: 8px; */
    cursor: pointer;
    /* background: #fff; */
    transition: all 0.3s ease;
}

.contact-type-label:hover {
    /* border-color: #4ec9cc; */
}

.contact-type-label.active {
    /* border-color: #4ec9cc; */
    /* background: #e8f9f9; */
}

.contact-type-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #000;
    cursor: pointer;
}

.contact-type-label span {
    font-weight: bold;
    color: #fff;
}

@media screen and (max-width: 450px) {
    .contact-type-selector {}

    .contact-type-label {
        justify-content: center;
    }
}


.contact-thanks {
    .sec1 {
        padding: 0 15px;
    }

    .sec1_inner {
        background-color: white;
        border-radius: 5px;
        color: #000;
        padding: 35px 17px;

        p {
            line-height: 1.9;
        }

        p.fz12 {
            margin-top: 42px;
            font-size: 12px;
            line-height: 1.8;
        }

        h2 {
            font-family: "Noto Serif JP", serif;
            font-size: 22px;
        }
    }
}






/* -------------------------------
よくある質問
------------------------------- */
.faq {
    padding-bottom: 50px;

    h2+.tac {
        text-align: center;
        font-size: 16px;
        line-height: 2;
        margin-bottom: 30px;
    }

    /*    h2.n>span:last-child {
        margin-top: -21px;
        font-size: 24px;
    } */

    h2 {
        margin-top: 20px;
        margin-bottom: 35px;
    }

}

.faqbox {
    padding: 30px 18px !important;
    margin-bottom: 55px;

    .q {
        color: var(--sky);
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 5px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .a {
        line-height: 1.8;
    }

    a {
        text-decoration: underline;
    }
}

.faqbox::before {
    right: 5px;
}

.faqbox::after {
    left: 0px;
}

.faqbox:last-child {
    margin-bottom: 0;
}







/* -------------------------------
応援ガイドライン
------------------------------- */

.support {
    padding-bottom: 50px;

    h2 {
        margin-top: 20px;
        margin-bottom: 35px;
    }

    /*    h2.n>span:last-child {
        margin-top: -34px;
    } */

    .sec1 {
        margin-top: 43px;
    }

    .sec1>div>div {
        margin-bottom: 28px;
    }

    .sec2 {

        padding: 39px 17px 10px;

        .support_mess {
            .body {
                background-image: url(../images/talent_body.png);
                padding: 21px 6px;
                font-size: 30px;
                font-family: "Zen Maru Gothic", serif;
                text-align: center;
                font-weight: bold;
                letter-spacing: 3px;
            }
        }

        .support_mess2 {
            padding: 0 27px;
            margin-top: 31px;

            h3 {
                font-family: "Zen Maru Gothic", serif;
                font-weight: bold;
                font-size: 20px;
                margin-bottom: 11px;
            }

            h3+div {
                font-size: 16px;
                line-height: 1.9;
                margin-bottom: 42px;
            }
        }

    }

}


/* -------------------------------
二次創作ガイドライン
------------------------------- */

.guidelines, .privacy {
    padding-bottom: 50px;
    padding-top: 25px;


    h2 span.red {
        font-size: 60px;
    }

    h2 span.compliance {
        font-size: 50px;
    }

    /*
    h2.n>span:last-child {
        margin-top: -33px;
    }
*/
    h3 {
        font-size: 14px;
        margin-bottom: 1px;
    }

    .sub {
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 16px;
        margin-top: 40px;
        margin-bottom: 6px !important;
    }

    section {
        padding: 0 15px;

        p {
            line-height: 1.5;
            margin-bottom: 24px;
        }

        li {
            line-height: 1.6;
        }
    }

    .sec1>div>div {
        margin-bottom: 20px;
    }
}

.guidelines {
    h2 span.red {
        font-size: 54px;
    }
}

/* -------------------------------
プライバシーポリシー
------------------------------- */

.privacy {
    h2 {
        margin-bottom: 35px;
    }

    h2 span.red {
        font-size: 65px;
        letter-spacing: 1px;
    }

    h2 span.compliance {
        font-size: 50px;
        letter-spacing: -1px;
    }

    h3 {
        margin-top: 20px;
    }

    ul {
        margin-bottom: 10px;
    }

    #comp {
        margin-top: 85px;

        h2 {
            margin-bottom: 20px;
        }
    }

    .fz12 {
        font-size: 12px;
        display: block;
        margin-bottom: 8px;
    }
}








/* -------------------------------
管理画面
------------------------------- */

.wp-admin .wp-block-group {
    border: 1px solid #000;
}




@media screen and (max-width: 1140px) {

    /* -------------------------------
pc
------------------------------- */
    .mb {
        display: none;
    }

}



@media screen and (min-width: 620px) {
    .liver-list .content1 a img {
        height: 230px !important;
    }

    .top_liver-list a img {
        height: 424px !important;
    }
}

@media screen and (min-width: 821px) {
    .container {
        border-right: 1px solid #ffffff1c;
        border-left: 1px solid #ffffff1c;
    }
}

@media screen and (max-width: 820px) {

    /* -------------------------------
tb
------------------------------- */
    .mb {
        display: flex;
    }

    .pc {
        display: none;
    }

    .mainview {

        margin-bottom: 53px;
        height: 100vw;
    }

    .mainview .centertext img {
        max-height: 87vw;
    }

    .liver-list .content1 a img {
        width: 100%;
        object-fit: cover;
        height: 46vw;
    }

    .top_liver-list a img {
        height: 85vw;
    }

    /* main.liver {
        padding-top: 89px;
        padding-bottom: 59px;
    }

    main.privacy {
        padding-top: 10px;
        padding-bottom: 60px;
    } */


    .container_outer_wrap {
        flex-direction: column;
    }

    .content_roop .article.rank_a::before, .content_roop .article.rank_s::before {
        top: -33px;
    }


    .body_scrolled .sticky_btn {
        opacity: 1;
        transition: 0.6s;
        right: 0;
    }
}
@media screen and (max-width: 820px) and (min-width: 430px){

    .front {
        .character-image1 {
            width: 160%;
            max-width: 900px;
        }
        .character-image2 {
            left: 5%;
        }
        .character-image3 {
            max-width: 800px;
        }

        section,.sec-benefit,.sec-linkbanner {
         /*   padding: 0 160px; */

        }
    }


}

@media screen and (max-width: 430px) {

    /* -------------------------------
sp
------------------------------- */
    .mb {
        display: flex;
    }

    .pc {
        display: none;
    }





    .front {

        .liver-list {
            padding: 0 5vw;

            .liver-card {
                .liver-image {

                    height: calc(82vw - 90px);

                    img {
                        height: calc(100vw - 90px);
                    }
                }
            }
        }
    }




}





/* -------------------------------
ライバー一覧ページ
------------------------------- */


.liver-archive {
    padding-top: 15px;

    .section-title {
        padding-left: 15px;
    }

    .filter-section {
        padding: 0 14px;
        margin-top: 30px;






        .filter-buttons {
            display: flex;
            justify-content: flex-start;
            gap: 6px;

            a {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                background-color: #242424;
                color: white;
                font-size: 16px;
                font-family: "Bodoni Moda", serif;
                font-weight: bold;
                height: 46px;
                padding-top: 3px;
            }

            a.active {
                background-color: var(--red);
            }

            a img {
                width: 28px;
                margin-top: -7px;
            }

            a:first-child {
                flex: 0 0 70px;
            }

            a:nth-child(2) {
                flex: 0 0 120px;
            }

            a:nth-child(3) {
                flex: 0 0 147px;
            }

        }
    }
}



/* -------------------------------
ライバー詳細ページ
------------------------------- */


.single-liver {

    .liver-single {
        background-color: #fff;
        padding-bottom: 40px;
    }

    /* メインビジュアル */
    .liver-hero {
        position: relative;
        min-height: 600px;
        overflow: visible;
        padding: 0;
    }

    .liver-hero-inner {
        position: relative;
        display: flex;
        align-items: flex-start;
        background-image: url(../images/single_bg.png);
        background-size: cover;
        background-position-y: 0;
        background-repeat: no-repeat;
        min-height: 1266px;
    }

    .liver-character {
        position: absolute;
        flex: 1;
        z-index: 20;
        height: 1075px;
        bottom: 7%;
        /* text-align: center; */
        /* width: 100%; */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;

        display: flex;
        justify-content: center;
        max-width: 150%;
    }

    .liver-character.fade-in {
        opacity: 1;
        transform: translateY(0);
    }

    /* .liver-character::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70%;
        background-image: url(../images/single_bg.png);
        background-size: cover;
        background-position: center;
        z-index: -1;
    } */

    .liver-main-image {
        /* width: 100%; */
        /* max-width: 500px; */
        height: auto;
        display: block;
        margin: 0 auto;
        object-fit: contain;
        height: 100%;
        object-position: top;

        max-width: 150%;
    }

    /* 英語名（横書き・2行表示） */
    .liver-name-vertical {
        position: absolute;
        top: 0;
        /* left: 10%; */
        left: 0;
        right: 0;

        font-size: 100px;
        line-height: 1;
        color: #333;
        z-index: 3;
        text-align: right;
        visibility: hidden;
        /* JS計算前は非表示 */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;

        font-family: "Smooch", cursive !important;
        font-weight: 400 !important;
        font-style: normal !important;
        /* ここを追加 */
        font-synthesis: none !important;
        /* iOSに勝手に太字や斜体を作らせない設定 */
    }

    .liver-name-vertical.ready {
        visibility: visible;
    }

    .liver-name-vertical .name-first,
    .liver-name-vertical .name-last {
        display: block;
        width: 100%;
        text-align: center;
        font-family: "Smooch", cursive !important;
        font-weight: 400 !important;
    }

    .liver-name-vertical .name-last {
        margin-top: -20px;
    }

    /* 一文字ずつアニメーション用 */
    .liver-name-vertical .char {
        display: inline-block;
        opacity: 0;
        transform: translateY(-10px);
        font-family: "Smooch", cursive;
    }

    /* 縦書きキャッチコピー */
    .liver-catchcopy-vertical {
        position: absolute;
        top: 200px;
        left: 5%;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-family: "Hina Mincho", serif;
        font-size: 30px;
        color: white;
        text-shadow: 0 0 2px #000;
        line-height: 2;
        z-index: 30;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .liver-catchcopy-vertical.fade-in {
        opacity: 1;
        transform: translateX(0);
    }

    /* 名前表示エリア */
    .liver-name-section {
        position: absolute;
        bottom: 20%;
        right: 5%;
        text-align: center;
        z-index: 30;
        display: flex;
        flex-direction: column;
        gap: 0;
        opacity: 0;
        transform: translateX(50px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        transition-delay: 0.5s;
    }

    .liver-name-section.slide-in {
        opacity: 1;
        transform: translateX(0);
    }

    .liver-name-ja {
        font-family: "Noto Serif JP", serif;
        font-size: 24px;
        color: #fff;
        background-color: #000;
        margin-right: 20px;
        letter-spacing: 0.1em;
        display: inline-block;
        padding: 1px 20px;
    }

    .liver-name-section .liver-name-en {
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        color: #fff;
        background-color: #000;
        letter-spacing: 0.05em;
        display: inline-block;
        margin-left: 20px;

    }

    /* スクロールフェードイン共通 */
    .liver-message,
    .liver-awards,
    .liver-rank-section,
    .liver-sns-section {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .liver-message.fade-in,
    .liver-awards.fade-in,
    .liver-rank-section.fade-in,
    .liver-sns-section.fade-in {
        opacity: 1;
        transform: translateY(0);
    }

    /* Messageセクション */
    .liver-message {
        padding: 10px 20px;
        position: relative;

        .message-content {
            font-family: "Noto Sans JP", sans-serif;
            font-size: 14px;
            line-height: 2;
            color: #333;
            border-top: 1px solid #BC0000;
            border-bottom: 1px solid #BC0000;
            padding: 40px 0 20px;
        }

        .section-label {
            margin-bottom: 0;
            padding-bottom: 0;
            position: absolute;
            background-color: white;
            padding-right: 20px;
            top: 0;
        }
    }

    .section-label {
        font-family: "Noto Serif JP", serif;
        font-size: 12px;
        color: #BC0000;
        margin-bottom: 20px;
        padding-bottom: 10px;
        /* border-bottom: 1px solid #333; */
        display: inline-block;
    }



    .message-content p {
        margin-bottom: 1.5em;
    }

    /* イベント受賞歴 */
    .liver-awards {
        padding: 0 13px 40px;







        .section-label {
            font-size: 14px;
            margin-bottom: 0px;
        }
    }

    .awards-list {
        list-style: disc;
        padding-left: 20px;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        color: #333;
    }

    .awards-list li {
        margin-bottom: 8px;
        list-style: disc;
    }

    .awards-list li::marker {
        color: #BC0000;
    }

    /* Rank/Badge セクション */
    .liver-rank-section {
        padding: 40px 14px;
    }

    .rank-badge-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .rank-label,
    .badge-label {
        font-family: "Noto Serif JP", serif;
        font-size: 12px;
        color: #333;
        writing-mode: vertical-rl;
    }

    .rank-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background-color: #000; */
        /* padding: 20px 40px; */
        /* border-radius: 8px; */
    }

    .rank-icon img {
        /* width: 60px; */
        height: auto;
    }

    .rank-name {
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        color: #fff;
        margin-top: 10px;
    }

    .rank-tier {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }

    /* SNSリンク */
    .liver-sns-section {
        padding: 40px 20px;
    }

    .sns-links {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .liver-sns-section .sns-link {
        display: block;
        width: 60px;
        height: 60px;
    }

    .liver-sns-section .sns-link img {
        width: 100%;
        height: auto;
    }

    /* LIVER TOPボタン */
    .liver-nav-section {
        padding: 20px;
        text-align: center;
    }

    .btn-liver-top {
        display: flex;
        font-family: "Noto Serif JP", serif;
        font-size: 14px;
        color: white;
        background-color: #000;
        /* padding: 15px 60px; */
        border: 1px solid #333;
        text-decoration: none;
        max-width: 178px;
        height: 44px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-family: "Outfit", sans-serif;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: color 0.3s ease, border-color 0.3s ease;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #fff;
            z-index: -1;
            transition: width 0.3s ease;
        }

        &:hover {
            color: #000;
            border-color: #000;
            opacity: 1;

            &::before {
                width: 100%;
            }
        }
    }
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .liver-name-vertical {
        font-size: 40px;
        right: 5%;
    }

    .liver-catchcopy-vertical {
        font-size: 14px;
        left: 2%;
    }

    .liver-hero {
        min-height: 400px;
    }

    .single-liver {
        .liver-hero-inner {
            min-height: auto;
            height: 270vw;
        }

        .liver-name-section {
            bottom: 27%;
        }

        .liver-awards {
            margin-top: 20px;
        }

        .liver-character {
            height: 225vw;
            bottom: 8%;
        }
    }
}


/* ===================================
   ページネーション
=================================== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* 前/次のページボタン */
.pagination-prev,
.pagination-next {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.pagination-prev:hover,
.pagination-next:hover {
    opacity: 0.7;
}

.pagination-prev.disabled,
.pagination-next.disabled {
    opacity: 0;
    pointer-events: none;
}

.pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 36px;
    /* border: 1px solid #fff; */
    background: white;
    color: #000;
    font-size: 14px;
}

.pagination-text {
    color: #fff;
    font-size: 13px;
}

/* ページ番号エリア */
.pagination-numbers {
    display: flex;
    align-items: center;
}

.pagination-numbers ul {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-numbers li {
    display: flex;
}

/* ページ番号リンク（非アクティブ） */
.pagination-numbers a.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    /* border: 1px solid #fff; */
    background: var(--white);
    color: var(--black);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-numbers a.page-numbers:hover {
    background: #fff;
    color: #000;
}

/* 現在のページ（アクティブ） */
.pagination-numbers span.page-numbers.current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

/* ドット（...） */
.pagination-numbers span.page-numbers.dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: #fff;
    font-size: 14px;
    border: none;
}


.pagination-wrap {
    .pagination-text {
        display: none;
    }
}


/* レスポンシブ */
@media screen and (max-width: 768px) {
    .pagination-wrap {
        gap: 15px;
        padding: 30px 15px;
    }

    .pagination-text {
        display: none;
    }

    .pagination-arrow,
    .pagination-numbers a.page-numbers,
    .pagination-numbers span.page-numbers.current {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
        font-weight: 600;
    }

    .pagination-numbers ul {
        gap: 5px;
    }
}




@media screen and (min-width: 430px) and (max-width: 820px) {

    .main-visual {
        min-height: 200vw;

    }

    .single-liver {
        .liver-hero-inner {
            max-height: 1100px;
            height: 200vw;
        }

    }

    .single-liver {
        .liver-character {
            height: 180vw;
            max-height: 900px ;
        }
    }

    .single-liver {
        .liver-main-image {
            /* max-width: 150vw; */

        }
        .liver-message,.liver-awards,.liver-rank-section {
         /*   padding: 0 160px; */
            margin-top: 40px;
            .section-label {
                top: -10px;
            }
        }
    }

    .contact {
        .sec1 {
          /*  padding: 0 160px; */
        }
    }
}