/* ==============================================
 * 目の下のクマ・たるみ治療 ハブページ専用スタイル
 * 対象URL: /under-eye/（page-under-eye.php から読み込み）
 * ベース: eyesurgery.css（同じテンプレートで先に読み込む）。ここには、このページで追加した部品だけを書く
 * 作成日: 2026.10.05 / MPH
 * ============================================== */

/* ----------------------------------------------
 * FV（写真は背景、文字は HTML）
 * ---------------------------------------------- */
.l-under-eye .under-eye-fv {
    position: relative;
    display: block;
    margin-top: 110px;
    background: #f6f1e7;
}
.l-under-eye .under-eye-fv::before,
.l-under-eye .under-eye-fv::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    /* 2026.10.06 修正6回目：本文の金の線（gold_line の 1024px 版）と同じURLにして、同じ画像を2回読まないようにする（本番・STG とも同じホストから読む） */
    background-image: url('/wp-content/uploads/2026/05/gold_line-1024x10.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.l-under-eye .under-eye-fv__stage {
    position: relative;
    min-height: clamp(400px, 33.334vw, 640px);
    overflow: hidden;
}
.l-under-eye .under-eye-fv__bg,
.l-under-eye .under-eye-fv__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.l-under-eye .under-eye-fv__bg img {
    object-fit: cover;
    object-position: 72% 50%;
}
.l-under-eye .under-eye-fv__inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 64px) 40px;
    box-sizing: border-box;
    min-height: clamp(400px, 33.334vw, 640px);
    display: flex;
    align-items: center;
}
.l-under-eye .under-eye-fv__text {
    max-width: 560px;
    color: #3d3a33;
}
.l-under-eye .under-eye-fv__h1 {
    position: static;
    margin: 0 0 18px;
    padding: 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: normal;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #3d3a33;
    text-shadow: none;
}
.l-under-eye .under-eye-fv__h1 small {
    display: block;
    margin: 0 0 6px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: #625E44;
}
.l-under-eye .under-eye-fv__catch {
    margin: 0 0 14px;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.35;
    letter-spacing: 0.04em;
    color: #2f2c26;
}
.l-under-eye .under-eye-fv__sub {
    margin: 0 0 22px;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #4a463d;
}
.l-under-eye .under-eye-fv__br {
    display: none;
}
.l-under-eye .under-eye-fv__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.l-under-eye .under-eye-fv__points li {
    position: relative;
    margin: 0;
    padding: 10px 14px 10px 36px;
    border: 1px solid rgba(200, 192, 138, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #3d3a33;
    list-style: none;
}
.l-under-eye .under-eye-fv__points li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: linear-gradient(90deg, #C8C08A, #625E44);
}
.l-under-eye .under-eye-fv__points li::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    width: 4px;
    height: 8px;
    margin-top: -6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.l-under-eye .under-eye-fv__br-sp {
    display: none;
}

@media (max-width: 768px) {
    .l-under-eye .under-eye-fv {
        margin-top: 50px;
    }
    .l-under-eye .under-eye-fv__stage {
        min-height: 0;
    }
    .l-under-eye .under-eye-fv__bg {
        position: relative;
        height: 250px;
    }
    .l-under-eye .under-eye-fv__bg img {
        position: absolute;
        height: 100%;
        object-position: 74% 30%;
    }
    .l-under-eye .under-eye-fv__inner {
        min-height: 0;
        padding: 20px 20px 34px;
        display: block;
    }
    .l-under-eye .under-eye-fv__h1 small {
        font-size: 0.75rem;
    }
    .l-under-eye .under-eye-fv__sub {
        font-size: 0.8125rem;
    }
    .l-under-eye .under-eye-fv__sep {
        display: none;
    }
    .l-under-eye .under-eye-fv__br {
        display: inline;
    }
    .l-under-eye .under-eye-fv__points {
        gap: 8px;
    }
    .l-under-eye .under-eye-fv__points li {
        flex: 1 1 100%;
        font-size: 0.8125rem;
    }
    .l-under-eye .under-eye-fv__points li br {
        display: none;
    }
    /* スマホ：写真の左側にキャッチを重ね、h1・サブ・ポイントは写真の下（2026.10.06）
       __inner と __text を display: contents にして、子要素を __stage のグリッドに並べる */
    .l-under-eye .under-eye-fv__stage {
        display: grid;
        grid-template-columns: 1fr;
    }
    .l-under-eye .under-eye-fv__bg {
        grid-row: 1;
        grid-column: 1;
        height: 270px;
    }
    .l-under-eye .under-eye-fv__bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(246, 241, 231, 0.94) 0%, rgba(246, 241, 231, 0.82) 34%, rgba(246, 241, 231, 0) 60%);
    }
    .l-under-eye .under-eye-fv__bg img {
        object-position: 80% 28%;
    }
    .l-under-eye .under-eye-fv__inner,
    .l-under-eye .under-eye-fv__text {
        display: contents;
    }
    .l-under-eye .under-eye-fv__catch {
        grid-row: 1;
        grid-column: 1;
        position: relative;
        z-index: 2;
        align-self: center;
        margin: 0;
        padding: 0 0 0 20px;
        font-size: 1.5rem;
        line-height: 1.5;
    }
    .l-under-eye .under-eye-fv__br-sp {
        display: inline;
    }
    .l-under-eye .under-eye-fv__h1 {
        grid-row: 2;
        margin: 0;
        padding: 18px 20px 8px;
    }
    .l-under-eye .under-eye-fv__sub {
        grid-row: 3;
        margin: 0;
        padding: 0 20px 16px;
    }
    .l-under-eye .under-eye-fv__points {
        grid-row: 4;
        padding: 0 20px 30px;
    }
}

/* ----------------------------------------------
 * 共通（文字・リンク・注記）
 * ---------------------------------------------- */
.l-under-eye .under-eye_lead p {
    font-size: 0.9375rem;
    line-height: 2;
    color: #444;
}
.l-under-eye p.under-eye_source {
    font-size: 0.75rem !important;
    line-height: 1.7;
    color: #777;
}
.l-under-eye p.under-eye_note {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: #555;
}
.l-under-eye p.under-eye_textlink {
    text-align: right;
    font-size: 0.875rem;
}
.l-under-eye p.under-eye_textlink a,
.l-under-eye p.under-eye_case_link a {
    color: #2d7a77;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.l-under-eye p.under-eye_case_link {
    margin-top: 6px;
    font-size: 0.875rem;
    text-align: right;
}
.l-under-eye .under-eye_body p,
.l-under-eye .under-eye_body li {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: #444;
}
.l-under-eye .under-eye_body .wp-block-list {
    padding-left: 1.4em;
}
.l-under-eye h3.under-eye_group_title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: bold;
    line-height: 1.4;
    padding: 0 0 8px 14px !important;
    border-left: 4px solid #C8C08A !important;
    margin: 0 !important;
    color: #333;
}
.l-under-eye h4.under-eye_card_title {
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}
.l-under-eye p.under-eye_card_meta {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #555;
    margin: 4px 0 0;
}
.l-under-eye p.under-eye_card_meta strong {
    color: #625E44;
}
.l-under-eye .wp-block-columns.under-eye_cards {
    gap: 16px !important;
}
.l-under-eye .under-eye_cards .wp-block-column.eye_point_colum {
    display: flex;
    flex-direction: column;
}
.l-under-eye .under-eye_cards .wp-block-column.eye_point_colum .wp-block-buttons {
    margin-top: auto;
}
.l-under-eye h3.under-eye_sub_title {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: bold;
    text-align: center;
    margin: 0 !important;
    color: #333;
}

/* CTA（文＋予約ボタン） */
.l-under-eye p.under-eye_cta_text {
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    color: #333;
}

/* 監修医 */
.l-under-eye .under-eye_doctor {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
    padding: 24px;
    gap: 24px !important;
}
.l-under-eye .under-eye_doctor figure img {
    border-radius: 8px;
}
.l-under-eye .under-eye_doctor p.under-eye_doctor_name {
    font-family: "Noto Serif JP", serif;
    font-size: 1.25rem;
    color: #333;
}
.l-under-eye .under-eye_doctor p.under-eye_doctor_name small {
    font-size: 0.8125rem;
    color: #625E44;
    margin-right: 8px;
}
.l-under-eye .under-eye_doctor .under-eye_doctor_comment {
    background: #f7f4ec;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.875rem;
    line-height: 1.9;
}
.l-under-eye .under-eye_doctor li,
.l-under-eye .under-eye_doctor p {
    font-size: 0.875rem;
    line-height: 1.8;
}

/* ----------------------------------------------
 * お悩み（rhinoplasty.css と同じ見た目）
 * ---------------------------------------------- */
.l-under-eye h2.rhinoplasty_title02 {
    font-size: clamp(1.4rem, 4vw, 2.5rem) !important;
    font-family: "Noto Serif JP", serif;
    color: #fff !important;
    text-align: center !important;
}
.l-under-eye .rhinoplasty_title02 .h2_large {
    background-color: #000;
    color: #fff;
    padding: 2px 12px;
}
.l-under-eye .nose_problems {
    background: linear-gradient(to bottom right, #4D4D4D, #111111);
    border-radius: 20px;
    padding: 30px;
}
.l-under-eye .nose_problems_list {
    font-family: "Noto Serif JP", serif;
    font-size: 0.9375rem;
    line-height: 1.2;
    list-style: none !important;
    padding-left: 0 !important;
    display: block;
    text-align: left;
    color: #fff;
}
.l-under-eye .nose_problems_list li {
    padding-left: 28px;
    position: relative;
    margin-bottom: 8px;
    line-height: 1.6;
}
.l-under-eye .nose_problems_list li::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: transparent !important;
    background-image: url('https://leap-beauty.com/wp-content/uploads/2026/05/MdCheckBox.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    position: absolute !important;
    left: -10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.l-under-eye figure.wp-block-image.size-full.bad_ico {
    padding-right: 30px;
}
.l-under-eye p.under-eye_problems_after {
    color: #fff;
    text-align: center;
    font-family: "Noto Serif JP", serif;
}

/* ----------------------------------------------
 * 表（料金表・比較表）
 * rhinoplasty.css の price_table と同じ見た目＋スマホは横スクロール・1列目固定
 * ---------------------------------------------- */
.l-under-eye .price_table table,
.l-under-eye .under-eye_table table {
    border-collapse: separate !important;
    border-spacing: 0;
    background: #fff;
    width: 100%;
}
.l-under-eye .price_table,
.l-under-eye .under-eye_table {
    border-radius: 16px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    background: #fff;
}
.l-under-eye .price_table th,
.l-under-eye .price_table td,
.l-under-eye .under-eye_table th,
.l-under-eye .under-eye_table td {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 14px 16px !important;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #444;
    vertical-align: top;
    text-align: left;
    background: #fff;
}
.l-under-eye .price_table thead th,
.l-under-eye .under-eye_table thead th {
    background: #77704a;
    background: linear-gradient(90deg, #77704a, #5c5739);
    color: #fff;
    font-weight: normal;
    font-size: 0.8125rem;
    white-space: nowrap;
}
.l-under-eye .price_table thead th:first-child,
.l-under-eye .under-eye_table thead th:first-child {
    border-radius: 16px 0 0 0;
}
.l-under-eye .price_table thead th:last-child,
.l-under-eye .under-eye_table thead th:last-child {
    border-radius: 0 16px 0 0;
}
.l-under-eye .price_table tbody tr:last-child td,
.l-under-eye .under-eye_table tbody tr:last-child td {
    border-bottom: none !important;
}
.l-under-eye .price_table tbody tr:last-child td:first-child,
.l-under-eye .under-eye_table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 16px;
}
.l-under-eye .price_table tbody tr:last-child td:last-child,
.l-under-eye .under-eye_table tbody tr:last-child td:last-child {
    border-radius: 0 0 16px 0;
}
.l-under-eye .price_table td:not(:first-child) {
    white-space: nowrap;
}
.l-under-eye .under-eye_table td:first-child,
.l-under-eye .price_table td:first-child {
    font-weight: bold;
    color: #333;
}
.l-under-eye .under-eye_table td a,
.l-under-eye .price_table td a {
    color: #2d7a77;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.l-under-eye .under-eye_table {
    overflow-x: auto;
}
.l-under-eye .under-eye_table--compare td:nth-child(1) {
    width: 18%;
}
.l-under-eye .under-eye_table--compare td:last-child {
    min-width: 130px;
}
.l-under-eye .under-eye_table--types table {
    min-width: 720px;
}

.l-under-eye .under-eye_table--downtime table {
    min-width: 700px;
}
.l-under-eye .price_postscript {
    /* 修正2回目：白文字×金の地は長文が読みにくいため、クリームの地＋濃い文字に（金は左の線だけ） */
    background: #faf7ef !important;
    border: 1px solid #e3dcc0;
    border-left: 4px solid #C8C08A;
    border-radius: 8px;
    padding: 12px 20px;
}
.l-under-eye .price_postscript p {
    padding-left: 30px;
    position: relative;
    color: #333 !important;
    font-weight: normal;
    line-height: 1.8;
}
.l-under-eye .price_postscript p::before {
    content: 'i';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6f6942;
    color: #fff;
    font: bold 13px/20px Georgia, serif;
    text-align: center;
    position: absolute;
    left: 0;
    top: 3px;
}

@media (max-width: 781px) {
    /* スマホ：横スクロール（flexible-table-block の is-scroll-on-mobile）＋1列目を固定 */
    .l-under-eye .under-eye_table,
    .l-under-eye .price_table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .l-under-eye .under-eye_table th:first-child,
    .l-under-eye .under-eye_table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 120px;
        max-width: 140px;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
    }
    .l-under-eye .under-eye_table thead th:first-child {
        z-index: 2;
        background: #77704a;
    }
    .l-under-eye .price_table table {
        min-width: 560px;
    }
    .l-under-eye .price_table td:first-child,
    .l-under-eye .price_table th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 150px;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
    }
    .l-under-eye .price_table thead th:first-child {
        z-index: 2;
        background: #77704a;
    }
    .l-under-eye p.under-eye_scroll_hint {
        display: block;
    }
}
.l-under-eye p.under-eye_scroll_hint {
    display: none;
    font-size: 0.75rem;
    color: #777;
    text-align: right;
    margin: 0 0 6px;
}

/* ----------------------------------------------
 * 判定表（N1：溝の有無 × 皮膚のたるみ → 術式の候補）
 * ---------------------------------------------- */
.l-under-eye .under-eye-judge {
    max-width: 880px;
    margin: 0 auto;
}
.l-under-eye .under-eye-judge__title {
    margin: 0 0 14px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    color: #333;
}
.l-under-eye .under-eye-judge__axis {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: #625E44;
}
.l-under-eye .under-eye-judge__axis span {
    width: calc(100% - 190px);
    text-align: center;
    border-bottom: 2px solid #C8C08A;
    padding-bottom: 4px;
}
.l-under-eye .under-eye-judge table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
    table-layout: fixed;
    margin: 0;
}
.l-under-eye .under-eye-judge th,
.l-under-eye .under-eye-judge td {
    border: none;
    border-radius: 10px;
    padding: 14px;
    vertical-align: middle;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
}
.l-under-eye .under-eye-judge thead th {
    background: #474747;
    color: #fff;
    font-weight: normal;
}
.l-under-eye .under-eye-judge thead th small,
.l-under-eye .under-eye-judge tbody th small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.85;
}
.l-under-eye .under-eye-judge thead th.under-eye-judge__corner {
    width: 170px;
    background: transparent;
    color: #625E44;
    font-size: 0.75rem;
    text-align: left;
    padding: 0;
}
.l-under-eye .under-eye-judge tbody th {
    width: 170px;
    background: linear-gradient(90deg, #77704a, #5c5739);
    color: #fff;
    font-weight: normal;
}
.l-under-eye .under-eye-judge td {
    background: #f6f2e8;
    border: 1px solid #e6dfc8;
}
.l-under-eye .under-eye-judge td a {
    display: block;
    padding: 12px 10px;
    border-radius: 8px;
    background: #50B3B0;
    color: #fff !important;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.4;
}
.l-under-eye .under-eye-judge td a::after {
    content: ' →';
}
.l-under-eye .under-eye-judge td a:hover {
    opacity: 0.85;
}
.l-under-eye .under-eye-judge td span.under-eye-judge__desc {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #555;
}
.l-under-eye .under-eye-judge__label {
    display: none;
}
.l-under-eye .under-eye-judge__extra {
    margin: 18px auto 0;
    max-width: 880px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e6dfc8;
    padding: 16px 20px;
}
.l-under-eye .under-eye-judge__extra p {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 0.875rem;
    color: #625E44;
}
.l-under-eye .under-eye-judge__extra ul {
    margin: 0;
    padding-left: 1.2em;
}
.l-under-eye .under-eye-judge__extra li {
    font-size: 0.875rem;
    line-height: 1.8;
}
.l-under-eye .under-eye-judge__extra a {
    color: #2d7a77;
    text-decoration: underline;
}
.l-under-eye p.under-eye-judge__caution {
    margin: 14px auto 0;
    max-width: 880px;
    font-size: 0.8125rem;
    color: #444;
    text-align: center;
}

@media (max-width: 768px) {
    /* スマホ：4つの組み合わせを縦に並べ、各セルに条件を表示する */
    .l-under-eye .under-eye-judge__axis,
    .l-under-eye .under-eye-judge thead {
        display: none;
    }
    .l-under-eye .under-eye-judge table,
    .l-under-eye .under-eye-judge tbody,
    .l-under-eye .under-eye-judge tr,
    .l-under-eye .under-eye-judge th,
    .l-under-eye .under-eye-judge td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .l-under-eye .under-eye-judge table {
        border-spacing: 0;
    }
    .l-under-eye .under-eye-judge tr {
        margin-bottom: 14px;
    }
    .l-under-eye .under-eye-judge tbody th {
        border-radius: 10px 10px 0 0;
        text-align: left;
        padding: 10px 14px;
    }
    .l-under-eye .under-eye-judge td {
        border-radius: 0;
        border-top: none;
        text-align: left;
    }
    .l-under-eye .under-eye-judge tr td:last-child {
        border-radius: 0 0 10px 10px;
    }
    .l-under-eye .under-eye-judge__label {
        display: block;
        font-size: 0.75rem;
        color: #625E44;
        margin-bottom: 6px;
    }
    .l-under-eye .under-eye-judge td a {
        text-align: center;
    }
}

/* ----------------------------------------------
 * 未承認医薬品等の表示（menu_postscript をもとに枠を強調）
 * ---------------------------------------------- */
.l-under-eye .menu_postscript.under-eye_notice {
    background: #f7f7f7 !important;
    border: 1px solid #d9d9d9;
    padding: 18px 20px 18px 28px;
}
.l-under-eye .menu_postscript.under-eye_notice p,
.l-under-eye .menu_postscript.under-eye_notice li {
    font-size: 0.8125rem;
    line-height: 1.8;
    color: #444;
}
.l-under-eye .menu_postscript.under-eye_notice p.under-eye_notice_title {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #333;
}
.l-under-eye .menu_postscript.under-eye_notice .wp-block-list {
    padding-left: 40px;
    margin: 6px 0;
}

/* ----------------------------------------------
 * こだわり（画像なしの金色ボックス）
 * ---------------------------------------------- */
.l-under-eye .Commitment_gold.under-eye_commit {
    border-radius: 8px;
    height: 100%;
    box-sizing: border-box;
}
.l-under-eye .Commitment_gold.under-eye_commit p {
    font-size: 0.875rem;
    line-height: 1.8;
}
.l-under-eye .wp-block-columns.under-eye_commit_row > .wp-block-column {
    display: flex;
}
.l-under-eye .wp-block-columns.under-eye_commit_row > .wp-block-column > .wp-block-columns {
    width: 100%;
    margin: 0;
}

/* ----------------------------------------------
 * 症例（タブ）
 * ---------------------------------------------- */
.l-under-eye .smb-tabs__body .eye_point_colum p {
    font-size: 0.8125rem;
    line-height: 1.7;
}
.l-under-eye p.under-eye_case_person {
    font-weight: bold;
    font-size: 0.875rem !important;
}
@media (max-width: 600px) {
    .l-under-eye .smb-tabs__tab {
        max-width: 85%;
    }
}

/* 施術カード・空カラム・【要確認】 */
.l-under-eye p.under-eye_card_text {
    font-size: 0.875rem;
    line-height: 1.8;
}
.l-under-eye .under-eye_cards .menu_price_colum .menu_price {
    font-size: 1.125rem;
    line-height: 1.5;
}
@media (max-width: 781px) {
    .l-under-eye .wp-block-column.under-eye_empty {
        display: none;
    }
}
.l-under-eye mark.under-eye_tbc {
    background: #fff3b0;
    color: #6b4e00;
    padding: 0 2px;
}
.l-under-eye .under-eye_table table,
.l-under-eye .price_table table {
    table-layout: auto !important;
}

/* 長い見出しの改行位置（1文字だけ次の行に残らないように） */
.l-under-eye h2.eye_menu_title,
.l-under-eye h2.eyesurgery_title02 {
    font-size: clamp(1.3rem, 3.2vw, 2.1rem) !important;
    word-break: auto-phrase;
    text-wrap: balance;
}
.l-under-eye h2.eyesurgery_title01 .h2_large,
.l-under-eye h3,
.l-under-eye h4 {
    word-break: auto-phrase;
}
.l-under-eye .eye_menu .eye_point_colum h3.eye_menu_title02 {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
    line-height: 1.5;
}

/* 修正1回目（2026-10-05 QA）
 * - 比較表にリスクの列を追加したため、スマホの表の最小幅を広げる（PC は 960px の枠に収める）
 * - 症例タブ：600px 以下は横スクロールをやめて縦に積む（2件目が切れて見えないため）
 */
.l-under-eye p.under-eye_card_risk {
    font-size: 0.75rem;
    color: #666;
}
.l-under-eye .under-eye_table--compare td:nth-child(5),
.l-under-eye .under-eye_table--inject td:nth-child(3) {
    font-size: 0.8125rem;
    min-width: 200px;
}
@media (max-width: 781px) {
    .l-under-eye .under-eye_table--compare table {
        min-width: 1040px;
    }
    .l-under-eye .under-eye_table--inject table {
        min-width: 820px;
    }
}
@media (max-width: 600px) {
    .l-under-eye .smb-tabs__body .wp-block-columns {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        gap: 16px !important;
    }
    .l-under-eye .smb-tabs__body .wp-block-column.eye_point_colum {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
/* auto-phrase で改行したときに両端揃えで字間が空かないように */
.l-under-eye .eye_point_colum h3.eye_menu_title02,
.l-under-eye h4.under-eye_card_title {
    text-align: left !important;
    text-align-last: left;
}

/* ==============================================
 * 修正2回目（2026-10-06 池本さんの確認を受けて）
 * ============================================== */

/* <picture> で出す画像（特徴の画像・図のスマホ用コピー・症例10506）を枠いっぱいに */
.l-under-eye figure.wp-block-image:has(> picture) {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.l-under-eye figure.wp-block-image picture {
    display: block;
}
.l-under-eye figure.wp-block-image picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* 大きい図は PC で本文幅の85%（中央）。スマホは100%。FV は対象外 */
@media (min-width: 768px) {
    .l-under-eye figure.wp-block-image.under-eye_wide {
        max-width: 85%;
    }
}

/* スマホだけに出すもの（図のスマホ用コピーで外した文字のキャプション） */
.l-under-eye .under-eye_sp_only {
    display: none;
}
@media (max-width: 767px) {
    .l-under-eye .under-eye_sp_only {
        display: block;
    }
}
.l-under-eye figcaption.under-eye_sp_only {
    margin: 10px 0 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    text-align: center;
    color: #333;
    caption-side: initial;
}

/* こだわり：白文字×金の地 → クリームの地＋濃い文字（金は上の線・見出しの印だけ） */
.l-under-eye .Commitment_gold.under-eye_commit {
    background: #faf7ef !important;
    border: 1px solid #e3dcc0;
    border-top: 4px solid #C8C08A;
    border-radius: 8px;
    padding: 22px 20px;
}
.l-under-eye .under-eye_commit h3.eye_menu_title04 {
    color: #4a4430 !important;
    font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
    line-height: 1.5;
    padding-bottom: 12px;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e3dcc0 !important;
}
.l-under-eye .Commitment_gold.under-eye_commit p {
    color: #333 !important;
    font-size: 0.9375rem;
    line-height: 1.85;
}

/* FAQ：質問の帯（白文字×金。スマホで2行以上になる）→ クリームの地＋濃い文字（金は左の線とQの丸） */
.l-under-eye .smb-accordion.QA .smb-accordion__item__title {
    background: #faf7ef !important;
    color: #333 !important;
    border: 1px solid #e3dcc0;
    border-left: 4px solid #C8C08A;
}
.l-under-eye .smb-accordion.QA .smb-accordion__item__title__label {
    color: #333 !important;
    font-weight: bold;
    padding-left: 34px;
}
.l-under-eye .smb-accordion.QA .smb-accordion__item__title__label::before {
    content: 'Q';
    background: #6f6942 !important;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font: bold 14px/24px Georgia, serif;
    text-align: center;
}
.l-under-eye .smb-accordion.QA .smb-accordion__item__title__icon,
.l-under-eye .smb-accordion.QA .smb-accordion__item__title__icon i {
    color: #6f6942 !important;
}

/* 金の地に白文字の短いラベルは残す（症例の年代・性別）。白文字が読めるよう金を濃く */
.l-under-eye .case_badge {
    background-color: #77704a !important;
}

/* 見出し・質問の両端揃えで字間が空くのを防ぐ（auto-phrase で改行したとき） */
.l-under-eye h3:not(.under-eye_sub_title):not(.has-text-align-center),
.l-under-eye h4,
.l-under-eye .smb-accordion.QA .smb-accordion__item__title,
.l-under-eye .smb-accordion.QA .smb-accordion__item__title * {
    text-align: left !important;
    text-align-last: auto !important;
}
.l-under-eye .smb-accordion.QA .smb-accordion__item__title__label {
    word-break: auto-phrase;
}

/* 修正3回目：図のスマホ用キャプション（figcaption）が、WordPress 本体の
 * `.wp-block-image.aligncenter > figcaption { display: table-caption }` に負けて
 * 1文字ずつ縦に並んでいた（PC でも表示されていた）。詳細度を上げて、PC は非表示・スマホは全幅の横書きに */
.l-under-eye figure.wp-block-image > figcaption.under-eye_sp_only {
    display: none !important;
}
@media (max-width: 767px) {
    .l-under-eye figure.wp-block-image > figcaption.under-eye_sp_only {
        display: block !important;
        width: 100%;
        max-width: none;
        caption-side: initial;
        writing-mode: horizontal-tb;
        text-wrap: balance;
    }
}

/* ----------------------------------------------
 * パンくずリスト（2026.10.06）
 * eyesurgery.css は参考ハブ用に非表示（display:none）にしているため、このページでは表示に戻す。
 * 見た目は施術ページと同じ page.css の .l-path_list を使う
 * ---------------------------------------------- */
.l-under-eye .breadcrumbs.l-path_list {
    display: flex;
}

/* ----------------------------------------------
 * 表の「横にスクロールできます」（2026.10.06）
 * 横にはみ出す表だけ、page-under-eye.php のスクリプトが表の直前に入れる
 * ---------------------------------------------- */
.l-under-eye .under-eye-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #625E44;
}
.l-under-eye .under-eye-scroll-hint[hidden] {
    display: none;
}
.l-under-eye .under-eye-scroll-hint::after {
    content: '';
    width: 22px;
    height: 8px;
    background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4h20M16 1l4 3-4 3' fill='none' stroke='%23625E44' stroke-width='1.5'/%3E%3C/svg%3E");
}
@media (max-width: 375px) {
    .l-under-eye .under-eye-fv__catch {
        font-size: 1.3125rem;
    }
}

/* ----------------------------------------------
 * 修正6回目（2026.10.06）
 * - 施術カードの「組み合わせの料金」「追加オプション」（料金表「目の下のくま取り」の行）
 * - 施術ページが未公開の施術（ミッドフェイスリフト）の「詳しいページは準備中です。」
 * - 判定表からのページ内リンク先（固定ヘッダーに隠れないように）
 * ---------------------------------------------- */
.l-under-eye p.under-eye_card_combo {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: #faf7ef;
    border-left: 3px solid #C8C08A;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: #333;
}
.l-under-eye p.under-eye_card_combo strong {
    color: #625E44;
}
.l-under-eye p.under-eye_card_combo_note {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.7;
    color: #555;
}
.l-under-eye p.under-eye_card_pending {
    margin: auto 0 0;
    padding: 10px 12px;
    border: 1px dashed #bbb;
    border-radius: 5px;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #555;
}
.l-under-eye #under-eye-midface {
    scroll-margin-top: 130px;
}
.l-under-eye .under-eye_nowrap {
    white-space: nowrap;
}
/* 両端揃え（サイト共通）で施術名の字間が空かないように */
.l-under-eye p.under-eye_card_combo,
.l-under-eye p.under-eye_card_combo_note,
.l-under-eye p.under-eye_card_pending {
    text-align: left !important;
    text-align-last: left;
}
.l-under-eye p.under-eye_card_pending {
    text-align: center !important;
    text-align-last: center;
}

/* 症例の追加（2026-10-07）：施術ごとに最大6件（3件×2段）。
 * スマホ（600px 以下）は2段目をたたみ、「もっと見る」で開く（page-under-eye.php のスクリプトが html に js-case-more を付けたときだけ）
 */
.l-under-eye .smb-tabs__body .wp-block-columns.under-eye_case_more {
    margin-top: 24px;
}
.l-under-eye .under-eye_case_more_btn {
    display: none;
}
@media (max-width: 600px) {
    .l-under-eye .smb-tabs__body .wp-block-columns.under-eye_case_more {
        margin-top: 16px;
    }
    html.js-case-more .l-under-eye .under-eye_case_more:not(.is-open) {
        display: none !important;
    }
    html.js-case-more .l-under-eye .under-eye_case_more_btn:not([hidden]) {
        display: block;
        width: 100%;
        margin: 16px 0 0;
        padding: 12px 16px;
        border: 1px solid #2d7a77;
        border-radius: 999px;
        background: #fff;
        color: #2d7a77;
        font-size: 0.875rem;
        font-weight: bold;
        line-height: 1.5;
        cursor: pointer;
    }
}

/* 症例のタブ（2026-10-07）：スマホは縦1列をやめて2×2に並べる（eyesurgery.css の縦並び・幅70%を上書き。PC は従来どおり横並び） */
@media (max-width: 600px) {
    .l-under-eye .smb-tabs .smb-tabs__tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .l-under-eye .smb-tabs .smb-tabs__tab-wrapper {
        display: block;
        width: auto;
        min-width: 0;
    }
    .l-under-eye .smb-tabs .smb-tabs__tab {
        width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 10px 6px !important;  /* snow-monkey-blocks の左右 25.6px が残ると 360px で文字がはみ出す */
        font-size: 0.875rem;
        line-height: 1.4;
        white-space: normal;
    }
}

/* 目次（2026-10-07）：MV の直後。スマホ2列・タブレット3列・PC4列のボタン。押すと各章の見出しへ移動 */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
.l-under-eye h2[id] {
    scroll-margin-top: 110px;  /* 固定ヘッダー（PC・スマホとも約93px）に隠れないように。URL の #〜 で開いたとき用（目次を押したときは page-under-eye.php のスクリプトで合わせる） */
}
.l-under-eye .under-eye-toc {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 20px 22px;
    background: #fff;
    border: 1px solid #e2ddc8;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.l-under-eye .under-eye-toc__title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #5c5739;
    text-align: center;
}
.l-under-eye .under-eye-toc__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.l-under-eye .under-eye-toc__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.l-under-eye .under-eye-toc__list li::before,
.l-under-eye .under-eye-toc__list li::marker {
    content: none;
}
.l-under-eye .under-eye-toc__list a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #cfe3e2;
    border-radius: 8px;
    background: #f5fafa;
    color: #2d7a77;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}
.l-under-eye .under-eye-toc__list a::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: -3px 2px 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.l-under-eye .under-eye-toc__list a:hover,
.l-under-eye .under-eye-toc__list a:focus-visible {
    background: #e3f1f0;
    border-color: #50b3b0;
}
.l-under-eye .under-eye-toc__num {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: bold;
    color: #8a8459;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
    .l-under-eye .under-eye-toc__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .l-under-eye .under-eye-toc {
        padding: 16px 12px 14px;
    }
    .l-under-eye .under-eye-toc__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .l-under-eye .under-eye-toc__list a {
        padding: 10px 8px;
        font-size: 0.8125rem;
        gap: 6px;
    }
}

/* ピンチテストの動画（2026-10-07）：16:9。PC は幅640pxで中央、スマホは画面の端近くまで広げる。
 * 最初はサムネイル＋再生ボタン。押すと page-under-eye.php のスクリプトが YouTube を読み込む */
.l-under-eye .under-eye-video {
    max-width: 640px;
    margin: 0 auto;
}
.l-under-eye .under-eye-video__play,
.l-under-eye .under-eye-video iframe {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.l-under-eye .under-eye-video__play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}
.l-under-eye .under-eye-video__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(45, 122, 119, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}
.l-under-eye .under-eye-video__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -8px;
    border-style: solid;
    border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent #fff;
}
.l-under-eye .under-eye-video__play:hover .under-eye-video__icon,
.l-under-eye .under-eye-video__play:focus-visible .under-eye-video__icon {
    transform: scale(1.08);
}
.l-under-eye .under-eye-video figcaption {
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #555;
    text-align: center;
}
@media (max-width: 600px) {
    .l-under-eye .under-eye-video {
        width: calc(100vw - 24px);
        max-width: none;
        margin-left: calc(50% - 50vw + 12px);
    }
    .l-under-eye .under-eye-video__play,
    .l-under-eye .under-eye-video iframe {
        border-radius: 8px;
    }
    .l-under-eye .under-eye-video__icon {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
    }
    .l-under-eye .under-eye-video figcaption {
        text-align: left;
        padding: 0 4px;
    }
}