/**
 * clinic.css — 院ページ（動的ブロック）スタイル
 *
 * Elementor非依存。theme.json デザイントークン（--wp--preset--*）＋
 * 院アクセント色（--luna-clinic-accent）で構成。
 * 対応ブロック: luna/clinic-hero, menu-tabs, clinic-cases, gallery-grid,
 *               clinic-info, clinic-doctors, clinic-awards, clinic-news, clinic-cta
 */

:root {
    --luna-clinic-accent: #a88c20; /* clinics.php の accent で上書き（wp_head のinline styleが優先） */
    --luna-maxw: 1200px;
    --luna-gap: 24px;
}

/* ===== 共通: セクション見出し（英語＋和文・ゴールド・Cormorant） ===== */
.luna-section-heading {
    text-align: center;
    margin: 0 auto 2.5rem;
}
.luna-section-heading__en {
    display: block;
    font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--luna-clinic-accent);
    line-height: 1.1;
}
.luna-section-heading__ja {
    display: block;
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: var(--wp--preset--font-size--lg, 1.125rem);
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    margin: 0.5rem 0 0;
}

/* ===== 共通: ボタン ===== */
.luna-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 220px;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.luna-btn__en {
    font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif);
    font-size: 1.25rem;
    letter-spacing: 0.06em;
}
.luna-btn__ja { font-size: 0.875rem; }
.luna-btn--primary {
    background: var(--wp--preset--color--primary, #046bd2);
    color: #fff;
}
.luna-btn--primary:hover { opacity: 0.85; }
.luna-btn--outline {
    background: #fff;
    color: var(--wp--preset--color--primary, #046bd2);
    border: 1px solid var(--wp--preset--color--primary, #046bd2);
}
.luna-btn--outline:hover {
    background: var(--wp--preset--color--primary, #046bd2);
    color: #fff;
}

/* VIEW MORE */
.luna-view-more {
    display: inline-block;
    padding: 0.75rem 3rem;
    border: 1px solid var(--luna-clinic-accent);
    color: var(--luna-clinic-accent);
    font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.luna-view-more:hover {
    background: var(--luna-clinic-accent);
    color: #fff;
}

/* ===== 共通: セクション余白・コンテナ ===== */
.luna-clinic-hero,
.luna-menu-tabs,
.luna-clinic-cases,
.luna-gallery-grid,
.luna-clinic-info,
.luna-clinic-doctors,
.luna-clinic-awards,
.luna-clinic-news {
    padding: clamp(3rem, 7vw, 6rem) 1.25rem;
}
.luna-clinic-hero__inner,
.luna-menu-tabs__inner,
.luna-clinic-cases__inner,
.luna-gallery-grid__inner,
.luna-clinic-info__inner,
.luna-clinic-doctors__inner,
.luna-clinic-awards__inner,
.luna-clinic-news__inner {
    max-width: var(--luna-maxw);
    margin: 0 auto;
}

/* ===== Hero ===== */
.luna-clinic-hero { text-align: center; padding-top: 0; }
.luna-clinic-hero__visual { margin: 0 -1.25rem clamp(2rem, 4vw, 3.5rem); }
.luna-clinic-hero__visual img { width: 100%; height: auto; max-height: 560px; object-fit: cover; display: block; }
.luna-clinic-hero__headline { margin: 0 auto 1.5rem; }
.luna-clinic-hero__headline img { max-width: 680px; width: 100%; height: auto; }
.luna-clinic-hero__tagline {
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    margin: 0 0 1rem;
}
.luna-clinic-hero__lead {
    max-width: 720px;
    margin: 0 auto 2rem;
    color: var(--wp--preset--color--text, #333);
    line-height: 2;
    font-size: 0.95rem;
}
.luna-clinic-hero__cta {
    display: flex;
    gap: var(--luna-gap);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Menu tabs ===== */
/* ライブ本番準拠: 淡グレー全幅セクションの中に白カード（タブ+一覧）をネスト */
.luna-menu-tabs {
    background: #f5f5f5;
    /* is-layout-constrained の max-width:1200 + auto margin(!important) を無効化して全幅化。
       100vw方式はスクロールバー分の横オーバーフローを誘発するため使わない。 */
    max-width: none;
    width: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.luna-menu-tabs__heading {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wp--preset--color--heading, #1e293b);
    border-left: 3px solid var(--wp--preset--color--heading, #1e293b);
    padding-left: 0.9rem;
    margin: 0 0 2rem;
    text-align: left;
}
.luna-menu-tabs__card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.luna-menu-tabs__nav {
    display: flex;
    margin: 0;
}
.luna-menu-tabs__nav .tab-btn {
    appearance: none;
    flex: 1 1 50%;
    background: #fff;
    border: none;
    padding: 1rem 1.5rem;
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.luna-menu-tabs__nav .tab-btn.active {
    background: var(--luna-clinic-accent);
    color: #fff;
}
.luna-menu-tabs .tab-content { display: none; padding: 2rem; }
.luna-menu-tabs .tab-content.active { display: block; }
.luna-menu-tabs__group { margin-bottom: 2rem; }
.luna-menu-tabs__group:last-child { margin-bottom: 0; }
.luna-menu-tabs__group-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    border-left: 4px solid var(--luna-clinic-accent);
    padding-left: 0.6rem;
    margin: 0 0 1rem;
}
.luna-menu-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem 1.5rem;
}
/* custom-blocks.css の汎用 .menu-item（/ginza/ トップのメニュープレビュー用・グレー角丸ボックス）が
   同名クラスとして li 自体に効いてしまうため、ここで明示的に打ち消す。 */
.luna-menu-tabs__list .menu-item {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    display: block;
    text-align: left;
    box-shadow: none;
    transform: none;
}
.luna-menu-tabs__list .menu-item:hover {
    background: none;
    box-shadow: none;
    transform: none;
}
.luna-menu-tabs__list .menu-item a {
    display: block;
    padding: 0.6rem 0;
    background: none;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    color: var(--wp--preset--color--text, #333);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}
.luna-menu-tabs__list .menu-item a:hover {
    color: var(--luna-clinic-accent);
}
/* post_content側の脚注段落（次の兄弟要素）をグレー帯に含める */
.luna-menu-tabs + .luna-menu-subscription-note {
    background: #f5f5f5;
    max-width: none;
    width: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    padding: 0 1.25rem clamp(3rem, 7vw, 6rem);
    text-align: center;
    font-size: 0.85rem;
    color: #555;
}

/* ===== Cases ===== */
.luna-clinic-cases__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--luna-gap);
}
.luna-clinic-cases .case-item a { text-decoration: none; color: inherit; display: block; }
.luna-clinic-cases .case-item__photo { margin: 0 0 0.75rem; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
.luna-clinic-cases .case-item__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.luna-clinic-cases .case-item a:hover .case-item__photo img { transform: scale(1.05); }
.luna-clinic-cases .case-item__title { font-size: 0.9rem; font-weight: 500; line-height: 1.5; margin: 0; }
.luna-clinic-cases__more { text-align: center; margin-top: 2.5rem; }

/* ===== Gallery ===== */
.luna-gallery-grid__desc {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
    line-height: 2;
    color: var(--wp--preset--color--text, #333);
    font-size: 0.95rem;
}
.luna-gallery-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.luna-gallery-grid .gallery-item { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.luna-gallery-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.luna-gallery-grid .gallery-item:hover img { transform: scale(1.05); }

/* ===== Information ===== */
.luna-clinic-info { background: var(--wp--preset--color--surface, #f9fafb); }
.luna-clinic-info__list { margin: 0; max-width: 820px; margin-inline: auto; }
.luna-clinic-info__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.luna-clinic-info__label {
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
}
.luna-clinic-info__value { margin: 0; color: var(--wp--preset--color--text, #333); }
.luna-clinic-info__value p { margin: 0; line-height: 1.8; }
.luna-clinic-info__value a { color: var(--wp--preset--color--primary, #046bd2); }
.luna-clinic-info__note { font-size: 0.85rem; color: #6b7280; }
.luna-clinic-info__access,
.luna-clinic-info__equipment { list-style: none; margin: 0; padding: 0; }
.luna-clinic-info__access li,
.luna-clinic-info__equipment li { line-height: 1.9; }
.luna-clinic-info__equipment {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.luna-clinic-info__equipment li {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-size: 0.85rem;
}
.luna-clinic-info__map { margin-top: 2rem; }
.luna-clinic-info__map iframe { width: 100%; border: 0; aspect-ratio: 16 / 9; }

/* ===== Doctors ===== */
.luna-clinic-doctors__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}
.luna-clinic-doctors .doctor-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
}
.doctor-card__photo { margin: 0; }
.doctor-card__photo img { width: 100%; height: auto; border-radius: 6px; }
.doctor-card__role { color: var(--luna-clinic-accent); font-weight: 600; font-size: 0.85rem; margin: 0 0 0.25rem; }
.doctor-card__name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    margin: 0 0 1rem;
}
.doctor-card__name-en {
    display: inline-block;
    font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif);
    font-size: 0.9rem;
    color: #9ca3af;
    margin-left: 0.5rem;
}
.doctor-card__section { margin-bottom: 0.85rem; }
.doctor-card__subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--luna-clinic-accent);
    margin: 0 0 0.25rem;
}
.doctor-card__text { font-size: 0.85rem; line-height: 1.8; margin: 0; color: var(--wp--preset--color--text, #333); }
.doctor-card__list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; line-height: 1.7; }

/* ===== Awards ===== */
.luna-clinic-awards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}
.award-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.award-item__photo { margin: 0; }
.award-item__photo img { width: 100%; height: auto; border-radius: 6px; }
.award-item__title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--wp--preset--color--heading, #1e293b); }
.award-item__text { font-size: 0.85rem; line-height: 1.8; margin: 0; color: var(--wp--preset--color--text, #333); }

/* ===== News ===== */
.luna-clinic-news__list { list-style: none; margin: 0 auto 2.5rem; padding: 0; max-width: 820px; }
.luna-clinic-news .news-item { border-bottom: 1px solid #e5e7eb; }
.luna-clinic-news .news-item a {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1rem 0;
    text-decoration: none;
    color: var(--wp--preset--color--text, #333);
}
.luna-clinic-news .news-item a:hover .news-item__title { color: var(--wp--preset--color--primary, #046bd2); }
.news-item__date { color: #9ca3af; font-size: 0.85rem; white-space: nowrap; font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif); }
.news-item__title { font-size: 0.95rem; line-height: 1.6; transition: color 0.2s ease; }
.luna-clinic-news__more { text-align: center; }

/* ===== CTA ===== */
.luna-clinic-cta {
    padding: clamp(3rem, 6vw, 5rem) 1.25rem;
    background: transparent; /* ライブ準拠: 帯背景なし・濃色テキスト */
    color: #323639;
    text-align: center;
}
.luna-clinic-cta__inner { max-width: 900px; margin: 0 auto; }
.luna-clinic-cta__lead {
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 600;
    margin: 0 0 2rem;
}
.luna-clinic-cta__actions { display: flex; gap: var(--luna-gap); justify-content: center; flex-wrap: wrap; }
.luna-clinic-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 240px;
    padding: 1.75rem 1.5rem;
    background: var(--luna-clinic-accent, #a88c20);
    color: #fff;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.luna-clinic-cta__btn:hover { opacity: 0.9; }
/* 電話=アクセント(金) / WEB=チャコール / LINE=緑（ライブ準拠の塗りボタン） */
.luna-clinic-cta__btn--tel { background: var(--luna-clinic-accent, #a88c20); color: #fff; }
.luna-clinic-cta__btn--web { background: #323639; color: #fff; }
.luna-clinic-cta__btn--line { background: #06c755; color: #fff; }
.luna-clinic-cta__icon { width: 30px; height: 30px; display: block; }
.luna-clinic-cta__btn-label { font-weight: 500; font-size: 1.05rem; }
.luna-clinic-cta__social {
    display: flex;
    gap: 1.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.75rem;
}
.luna-clinic-cta__social-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #69727d;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.luna-clinic-cta__social-link:hover { color: var(--luna-clinic-accent, #a88c20); }
.luna-clinic-cta__social-icon { width: 26px; height: 26px; }

/* ===========================================================
   視覚fidelityパス（ライブ /ginza/ との突合: 暖色・水彩装飾・フッタCTA）
   =========================================================== */
:root { --luna-warm: #f8f5ef; }

/* 暖色基調（ライブはベージュ寄りのオフホワイト） */
.page-clinic-top { background: #ffffff; }
.luna-clinic-doctors { background: var(--luna-warm); }
.luna-clinic-info { background: linear-gradient(180deg, #f3efe6 0%, var(--luna-warm) 100%); }

/* 水彩スウォッシュ装飾（mask-effect SVG）— Gallery左上・News右下 */
.luna-gallery-grid,
.luna-clinic-news { position: relative; overflow: hidden; }
.luna-gallery-grid::before {
    content: ""; position: absolute; left: -90px; top: -50px;
    width: 380px; height: 380px;
    background: url(../images/bg/mask-effect1.svg) no-repeat center / contain;
    opacity: 0.45; pointer-events: none; z-index: 0;
}
.luna-clinic-news::before {
    content: ""; position: absolute; right: -110px; bottom: -70px;
    width: 440px; height: 440px;
    background: url(../images/bg/mask-effect3.svg) no-repeat center / contain;
    opacity: 0.45; pointer-events: none; z-index: 0;
}
.luna-gallery-grid__inner,
.luna-clinic-news__inner { position: relative; z-index: 1; }

/* フッタCTA（clinic-footer ブロック — ライブ準拠: 白背景・アイコン付きボタン・SNSアイコン行） */
.luna-footer-cta {
    background: #fff;
    text-align: center;
    padding: 80px 1.25rem;
}
.luna-footer-cta-heading {
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 600;
    color: var(--wp--preset--color--heading, #1e293b);
    margin: 0 0 2.5rem;
}
.luna-footer-cta-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 1120px;
    margin: 0 auto 2.5rem;
}
.luna-footer-cta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 160px;
    padding: 40px 1rem;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: opacity 0.2s ease;
}
.luna-footer-cta-btn:hover { opacity: 0.88; }
.luna-footer-cta-btn .cta-icon { width: 34px; height: 34px; display: block; }
.luna-footer-cta-btn--tel { background: var(--luna-clinic-accent); color: #fff; }
.luna-footer-cta-btn--web { background: #323639; color: #fff; }
.luna-footer-cta-btn--line { background: #06c755; color: #fff; }
.luna-footer-social {
    list-style: none; display: flex; gap: 1.75rem; justify-content: center;
    padding: 0; margin: 0;
}
.luna-footer-social-link { display: flex; align-items: center; gap: 0.4rem; color: #6b7280; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.04em; transition: color 0.2s ease; }
.luna-footer-social-link:hover { color: var(--luna-clinic-accent); }
.luna-footer-social-icon { width: 24px; height: 24px; }

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
    .luna-menu-tabs__list { grid-template-columns: repeat(3, 1fr); }
    .luna-clinic-cases__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .luna-menu-tabs__list { grid-template-columns: repeat(2, 1fr); }
    .luna-clinic-cases__grid { grid-template-columns: repeat(2, 1fr); }
    .luna-gallery-grid__grid { grid-template-columns: repeat(2, 1fr); }
    .luna-clinic-doctors__grid,
    .luna-clinic-awards__grid { grid-template-columns: 1fr; }
    .luna-clinic-doctors .doctor-card { grid-template-columns: 140px 1fr; }
    .luna-footer-cta-buttons { grid-template-columns: 1fr; }
    .luna-footer-cta-btn { min-height: 120px; padding: 28px 1rem; }
}
@media (max-width: 480px) {
    .luna-clinic-info__row { grid-template-columns: 1fr; gap: 0.25rem; }
    .luna-clinic-doctors .doctor-card { grid-template-columns: 1fr; }
    .luna-clinic-doctors .doctor-card__photo { max-width: 180px; }
    .luna-clinic-awards .award-item { grid-template-columns: 120px 1fr; }
    .luna-btn, .luna-clinic-cta__btn { min-width: 0; width: 100%; }
    .luna-clinic-news .news-item a { flex-direction: column; gap: 0.25rem; }
}

/* ============================================================
   サブページ共通（luna/page-first-visit ・ luna/page-flow）
   ブランド共通ページ。アクセントは --luna-clinic-accent で院別追従。
   ※汚染防止のため内側規則は .luna-first-visit / .luna-flow 配下にスコープ。
   ============================================================ */
.luna-subpage { padding: 80px 0; }
.luna-page-heading { margin-bottom: 48px; }
.luna-page-heading--center { text-align: center; }
.luna-page-heading__en {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--luna-clinic-accent, #a88c20);
}
.luna-page-heading__ja {
    font-family: 'Noto Serif JP', serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #323639;
    margin: 10px 0 0;
}

/* --- First Visit --- */
.luna-first-visit__intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    line-height: 2;
    color: #555;
}
.luna-first-visit .luna-clinic-cta { margin: 56px 0; }
.luna-first-visit__flow-head { margin-top: 8px; }
.luna-first-visit__flow-img { display: block; max-width: 1120px; margin: 32px auto 0; }
.luna-first-visit__flow-img img { width: 100%; height: auto; display: block; }
.luna-first-visit .notice-list { max-width: 900px; margin: 64px auto 0; }
.luna-first-visit .notice-item { padding: 28px 0; border-top: 1px solid #ece9e1; }
.luna-first-visit .notice-item:last-child { border-bottom: 1px solid #ece9e1; }
.luna-first-visit .notice-item__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #323639;
    padding-left: 16px;
    border-left: 3px solid var(--luna-clinic-accent, #a88c20);
    margin: 0 0 14px;
}
.luna-first-visit .notice-item__text { font-size: 14px; line-height: 1.9; color: #555; margin: 0; }
.luna-first-visit .notice-item__cards { display: block; width: 100%; max-width: 680px; height: auto; margin: 20px 0 0; }

/* --- Flow --- */
/* box-shadowのfull-bleed帯が万一横スクロールを生まないよう安全側でclip */
.luna-flow { overflow-x: clip; }
.luna-flow__list { display: flex; flex-direction: column; gap: 0; }
.luna-flow__step {
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 64px;
    align-items: center;
    padding: 44px 0;
}
/* 本番同様の交互帯（01/03/05=薄グレー、02/04/06=白）。full-bleedはbox-shadowで
   コンテナ幅を超えて塗る（box-shadowはスクロール幅に影響しないため横スクロールを増やさない）。
   clip-pathで上下方向は自要素の境界に固定し、左右方向のみ100vmaxのbleedを許可する
   （clip-pathが無いとbox-shadowが上下にも100vmax分にじみ出て他ステップまで塗り潰してしまう）。 */
.luna-flow__step:nth-child(odd) {
    box-shadow: 0 0 0 100vmax #f5f5f5;
    clip-path: inset(0 -100vmax);
}
.luna-flow__step:nth-child(even) { grid-template-columns: 1fr 560px; }
.luna-flow__step:nth-child(even) .luna-flow__media { order: 2; }
.luna-flow__media img { width: 100%; height: auto; display: block; border-radius: 8px; }
.luna-flow__body { position: relative; }
.luna-flow__num {
    position: absolute;
    top: -18px;
    right: 0;
    height: 96px;
    width: auto;
    opacity: 0.85;
    z-index: 0;
    pointer-events: none;
}
.luna-flow__en {
    display: block;
    position: relative;
    z-index: 1;
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--luna-clinic-accent, #a88c20);
}
.luna-flow__ja {
    position: relative;
    z-index: 1;
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: 500;
    color: #323639;
    margin: 4px 0 18px;
}
.luna-flow__text {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 2;
    color: #555;
    margin: 0;
}
/* Step01予約3ボタン: 縦積みフル幅ではなく本番同様の横並びコンパクト3列で固定表示 */
.luna-flow__booking {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 24px;
}
.luna-flow__booking .luna-clinic-cta__btn {
    min-width: 0;
    flex: 1 1 0;
    padding: 14px 8px;
    gap: 6px;
}
.luna-flow__booking .luna-clinic-cta__icon { width: 22px; height: 22px; }
.luna-flow__booking .luna-clinic-cta__btn-label { font-size: 0.78rem; white-space: nowrap; }
.luna-flow__btn { display: inline-block; margin-top: 22px; }
.luna-flow__btn img { height: 56px; width: auto; display: block; }

/* プレフッターCTAバー（Aftercareの後・フッター前。本番同様グレー帯+チャコール角丸ボタン） */
.luna-flow__cta {
    box-shadow: 0 0 0 100vmax #f5f5f5;
    clip-path: inset(0 -100vmax);
    text-align: center;
    padding: 56px 0;
    margin-top: 44px;
}
.luna-flow__cta-btn {
    display: inline-block;
    background: #323639;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 20px 56px;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}
.luna-flow__cta-btn:hover { opacity: 0.9; color: #fff; }

@media (max-width: 768px) {
    .luna-subpage { padding: 48px 0; }
    .luna-page-heading__en { font-size: 32px; }
    .luna-flow__list { gap: 0; }
    .luna-flow__step,
    .luna-flow__step:nth-child(even) { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
    .luna-flow__step:nth-child(even) .luna-flow__media { order: 0; }
    .luna-flow__num { height: 64px; top: -8px; }
    .luna-flow__booking .luna-clinic-cta__btn-label { font-size: 0.72rem; }
    .luna-first-visit .notice-item__cards { max-width: 100%; }
}

/* ============================================================
   サブページ第2弾（sitemap / about-menu / privacy / recruit）
   ============================================================ */
.container--narrow { max-width: 880px; }
.luna-text-btn {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 0.06em;
    color: #323639; text-decoration: none;
}
.luna-text-btn::after {
    content: '\2192';
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 1px solid #d8d3c4; border-radius: 50%;
    color: var(--luna-clinic-accent, #a88c20); transition: all .3s;
}
.luna-text-btn:hover::after { background: var(--luna-clinic-accent, #a88c20); border-color: var(--luna-clinic-accent, #a88c20); color: #fff; }

/* --- Sitemap --- */
.luna-sitemap__group { margin-bottom: 48px; }
.luna-sitemap__title {
    font-size: 18px; font-weight: 600; color: #323639;
    padding-left: 14px; border-left: 3px solid var(--luna-clinic-accent, #a88c20);
    margin: 0 0 18px;
}
.luna-sitemap__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 32px; }
.luna-sitemap__list a { color: #555; text-decoration: none; font-size: 14px; position: relative; padding-left: 16px; transition: color .2s; }
.luna-sitemap__list a::before { content: '–'; position: absolute; left: 0; color: var(--luna-clinic-accent, #a88c20); }
.luna-sitemap__list a:hover { color: var(--luna-clinic-accent, #a88c20); }

/* --- About Menu --- */
.luna-about-menu__lead { font-size: 14px; line-height: 2; color: #555; }
.luna-about-menu__types { text-align: center; font-weight: 600; color: #323639; margin: 20px 0 40px; font-size: 16px; }
.luna-about-menu__subtitle { font-family: 'Noto Serif JP', serif; font-size: 22px; color: var(--luna-clinic-accent, #a88c20); margin: 40px 0 16px; font-weight: 500; }
.luna-about-menu__subtitle--center { text-align: center; }
.luna-about-menu__plans { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.luna-about-menu__plans th, .luna-about-menu__plans td { border: 1px solid #e6e1d6; padding: 12px 14px; text-align: left; }
.luna-about-menu__plans thead th { background: var(--luna-warm, #f8f5ef); font-weight: 600; }
.luna-about-menu__bonus { background: var(--luna-warm, #f8f5ef); padding: 18px 20px; border-radius: 8px; font-size: 13px; line-height: 1.9; color: #555; }
.luna-about-menu__cond-title { font-size: 16px; font-weight: 600; color: #323639; padding-left: 14px; border-left: 3px solid var(--luna-clinic-accent, #a88c20); margin: 32px 0 14px; }
.luna-about-menu__cond { font-size: 14px; line-height: 1.9; color: #555; padding-left: 1.2em; }
.luna-about-menu__price-cta { text-align: center; margin-top: 24px; }

/* --- Privacy --- */
.luna-privacy__intro { font-size: 14px; line-height: 1.9; color: #555; margin-bottom: 40px; }
.luna-privacy__section { margin-bottom: 36px; }
.luna-privacy__title { font-size: 17px; font-weight: 600; color: #323639; padding-left: 14px; border-left: 3px solid var(--luna-clinic-accent, #a88c20); margin: 0 0 16px; line-height: 1.4; }
.luna-privacy__section p { font-size: 13.5px; line-height: 1.95; color: #555; margin: 0 0 12px; }

/* --- Recruit --- */
.luna-recruit__hero { margin: 0 0 48px; }
.luna-recruit__hero img { width: 100%; height: auto; display: block; border-radius: 8px; }
.luna-recruit__h { font-family: 'Noto Serif JP', serif; font-size: 22px; color: var(--luna-clinic-accent, #a88c20); font-weight: 500; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid #ece9e1; }
.luna-recruit__h--center { text-align: center; border-bottom: none; }
.luna-recruit__overview { max-width: 880px; margin: 0 auto 56px; }
.luna-recruit__quote { font-size: 15px; line-height: 1.9; color: #323639; font-weight: 500; }
.luna-recruit__overview p { font-size: 14px; line-height: 1.9; color: #555; }
.luna-recruit__msg { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: center; max-width: 980px; margin: 0 auto 56px; }
.luna-recruit__msg--rev { grid-template-columns: 1fr 360px; }
.luna-recruit__msg--rev .luna-recruit__msg-img { order: 2; }
.luna-recruit__msg-img img { width: 100%; height: auto; display: block; border-radius: 8px; }
.luna-recruit__msg-body p { font-size: 14px; line-height: 1.95; color: #555; margin: 0 0 12px; }
.luna-recruit__jobs { max-width: 880px; margin: 0 auto; }
.luna-recruit__table { width: 100%; border-collapse: collapse; margin: 0 auto 40px; font-size: 13.5px; }
.luna-recruit__table caption { text-align: left; font-weight: 600; font-size: 16px; color: #323639; padding: 14px; background: var(--luna-warm, #f8f5ef); border: 1px solid #e6e1d6; border-bottom: none; }
.luna-recruit__table th, .luna-recruit__table td { border: 1px solid #e6e1d6; padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.8; }
.luna-recruit__table th { width: 140px; background: #faf8f3; font-weight: 600; color: #323639; }
.luna-recruit__note { font-size: 12px; color: #888; text-align: center; }
.luna-recruit__entry { text-align: center; margin-top: 56px; }
.luna-recruit__entry p { font-size: 14px; color: #555; }
.luna-recruit__entry-btn { background: var(--luna-clinic-accent, #a88c20); color: #fff; margin-top: 12px; }

@media (max-width: 768px) {
    .luna-sitemap__list { grid-template-columns: 1fr 1fr; }
    .luna-recruit__msg, .luna-recruit__msg--rev { grid-template-columns: 1fr; gap: 20px; }
    .luna-recruit__msg--rev .luna-recruit__msg-img { order: 0; }
    .luna-recruit__table th { width: 110px; }
    .luna-about-menu__plans { font-size: 12.5px; }
    .luna-about-menu__plans th, .luna-about-menu__plans td { padding: 8px; }
}
@media (max-width: 480px) {
    .luna-sitemap__list { grid-template-columns: 1fr; }
    .luna-recruit__table th, .luna-recruit__table td { display: block; width: auto; }
}

/* ============================================================
   Task3b: menu-tabs視覚パリティに伴う追加修正
   ============================================================ */
/* 黒帯除去: custom-blocks.cssの .luna-footer { background:#323639; padding:80px 0 40px; }
   が .luna-footer--clinic にも継承され、白い .luna-footer-cta の手前に紺帯を作っていた。
   下段の .luna-footer-container（ロゴ/ナビ/コピーライト）は本番同様チャコールのまま維持し、
   紺背景と上下paddingをそちらへ付け替える。clinic.cssはcustom-blocks.cssの後に読み込まれるため、
   ここで親要素側を無効化するだけで済む。 */
.luna-footer--clinic {
    background: none;
    padding: 0;
}
.luna-footer--clinic .luna-footer-container {
    background: #323639;
    padding: 64px 20px 32px;
}

/* /ginza/price/ の表ヘッダー行をチャコール+白文字に（先頭3表=基本料金/麻酔/その他オプションのみ。
   build-price-content.py がこの3表の wp:table に luna-table--dark を付与する。
   それ以外の個別メニュー表は custom-blocks.css の th 既定（薄グレー#d4d5d8+#334155文字）のまま） */
.page-clinic-content .luna-table--dark th {
    background-color: #323639 !important;
    color: #fff !important;
}

/* ============================================================
   Task9a: /ginza/price/ 視覚パリティ第2修正パス
   ============================================================ */
/* 全域の薄グレー背景（本番同様・タイトル帯は白のまま）。price固有のためpage-id-46に限定。 */
body.page-id-46 .page-clinic-content {
    background: #f5f5f5;
}
body.page-id-46 .luna-price__title {
    background: #fff;
}

/* h2/h3見出し装飾（本番スクショ準拠）。post-contentは実際には
   main.page-clinic-content > div.entry-content.wp-block-post-content > h2/h3 という構造
   （直下ではなくwp-block-post-content divを1段挟む）。price固有の装飾のためpage-id-46に限定
   （他の院ページ・共通ページのh2/h3には影響させない）。 */
body.page-id-46 .page-clinic-content h2 {
    padding-left: 16px;
    border-left: 4px solid #334155;
}
body.page-id-46 .page-clinic-content h3::before {
    content: "ー";
    margin-right: 0.4em;
    color: #323639;
}

/* ============================================================
   Task13: /menu/<slug>/ 施術ページ演出強化（グレーボックス/チェックリスト/動画）
   ============================================================ */
/* 個別施術ページは page-clinic-content ではなく single-luna_menu.html テンプレート
   （wrapperクラス luna-page luna-page--migrated luna-single-menu）を使うため、
   ここだけ .luna-single-menu をスコープにする。Task16でtrouble（お悩み）個別
   ページ（single-luna_trouble.html・wrapperクラス luna-single-trouble）を
   追加した際、本文系装飾（グレーボックス/チェックリスト/動画/spec表/イントロ/
   本文幅制約/見出し装飾）を共有する可能性がある将来の保険として
   .luna-single-trouble も併記する（現行11ページの出力にbox/spec/introは
   含まれず、ヒーローのみ専用の luna-trouble-hero を新設。詳細はTask16報告参照）。 */

/* グレーボックス（「〜とは」説明 / こんな方におすすめ 等）。
   本番実測: background-color #F5F5F5・border-radius 8px・
   padding 40px 32px（デスクトップ）/ 32px 16px（モバイル）。 */
.luna-single-menu .luna-menu-box,
.luna-single-trouble .luna-menu-box {
    background: #f5f5f5;
    border: 1px solid #ececeb; /* 本番は白カード内でのF5F5F5だが、本サイトは
       白カードコンテナが無く周囲も白地のためコントラストが弱く見える。
       背景色は実測値のまま・境界線のみ追加して視認性を上げる。 */
    border-radius: 8px;
    padding: 40px 32px;
    margin: 32px 0;
}
.luna-single-menu .luna-menu-box > *:first-child,
.luna-single-trouble .luna-menu-box > *:first-child { margin-top: 0; }
.luna-single-menu .luna-menu-box > *:last-child,
.luna-single-trouble .luna-menu-box > *:last-child { margin-bottom: 0; }
.luna-single-menu .luna-menu-box p,
.luna-single-menu .luna-menu-box h2,
.luna-single-menu .luna-menu-box h3,
.luna-single-trouble .luna-menu-box p,
.luna-single-trouble .luna-menu-box h2,
.luna-single-trouble .luna-menu-box h3 {
    margin: 0 0 1em;
}

/* チェックマーク付き箇条書き（✓アイコン・金/アクセント色）。
   本番はicon-boxウィジェットのSVGチェックだが、ネイティブブロック側は
   軽量な ::before 疑似要素の丸チェックで代替する。 */
.luna-single-menu .luna-menu-checklist,
.luna-single-trouble .luna-menu-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.luna-single-menu .luna-menu-checklist li,
.luna-single-trouble .luna-menu-checklist li {
    position: relative;
    padding-left: 30px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--wp--preset--color--text, #333);
}
.luna-single-menu .luna-menu-checklist li::before,
.luna-single-trouble .luna-menu-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--luna-clinic-accent, #a88c20);
    color: var(--luna-clinic-accent, #a88c20);
    font-size: 0.7rem;
    font-weight: 700;
}

/* 動画（wp:video / wp:embed）。全幅・角丸で施術説明の画像と統一感を持たせる。 */
.luna-single-menu .wp-block-video video,
.luna-single-menu .wp-block-embed,
.luna-single-trouble .wp-block-video video,
.luna-single-trouble .wp-block-embed {
    width: 100%;
    border-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .luna-single-menu .luna-menu-box,
    .luna-single-trouble .luna-menu-box {
        padding: 32px 16px;
        margin: 24px 0;
    }
}

/* ------------------------------------------------------------
   本文カラム幅の制約（TOCサイドバー実装は別タスク送り・ここでは
   本文コンテンツの幅だけ本番に揃える）。
   本番 https://luna-beauty-clinic.com/ginza/menu/inmode/ をPlaywrightで実測
   （TOCサイドバー=elementor-col 27.623% / 本文カラム=elementor-col 72.377%、
   full-width親セクションのためビューポート幅に比例するレイアウト）。
   viewport 1400pxで本文カラム実効幅 約1013px（1440pxで約1042px、1920pxで
   約1390px相当）。本サイトのTOC無し1カラム実装では固定max-widthとし、
   viewport 1400px時点の実測値を採用して中央寄せする。trouble個別ページも
   同じ本文カラム幅で統一する。
   ------------------------------------------------------------ */
.luna-single-menu .entry-content.wp-block-post-content,
.luna-single-trouble .entry-content.wp-block-post-content {
    max-width: 1013px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .luna-single-menu .entry-content.wp-block-post-content,
    .luna-single-trouble .entry-content.wp-block-post-content {
        padding: 0 16px;
    }
}

/* ============================================================
   Task14差し戻し: ヒーロー装飾 / 施術概要spec表 / イントロ2カラム
   ============================================================ */

/* ヒーロー（ページタイトル大型ロゴ調+サブタイトル+任意のキャンペーンCTA）。
   本番は白背景・中央揃え。menuページ専用（troubleページのヒーローは構造が
   異なるため下部のTask16セクション luna-trouble-hero を参照）。 */
.luna-single-menu .luna-menu-hero {
    text-align: center;
    padding: 40px 0 32px;
}
.luna-single-menu .luna-menu-hero__title {
    font-family: var(--wp--preset--font-family--heading-en, "Cormorant Garamond", serif);
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--luna-clinic-accent, #a88c20);
    margin: 0;
    line-height: 1.1;
}
.luna-single-menu .luna-menu-hero__sub {
    font-size: 0.9rem;
    color: #333;
    margin: 8px 0 0;
}
.luna-single-menu .luna-menu-hero__cta {
    margin-top: 20px;
    justify-content: center;
}
.luna-single-menu .luna-menu-hero__cta .wp-block-button__link {
    background: var(--wp--preset--color--primary, #046bd2);
    color: #fff;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* 施術概要spec表（治療時間/痛み/リスクや副作用 等）。本番実測:
   ラベル列34% background #E9E9EA・値列66% background #F5F5F5・
   白い区切り線(2px)で行/列を分ける縞テーブル。 */
.luna-single-menu .luna-menu-spec,
.luna-single-trouble .luna-menu-spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 32px 0;
}
.luna-single-menu .luna-menu-spec__row,
.luna-single-trouble .luna-menu-spec__row {
    display: grid;
    grid-template-columns: 34% 66%;
    gap: 2px;
}
.luna-single-menu .luna-menu-spec__label,
.luna-single-trouble .luna-menu-spec__label {
    background: #e9e9ea;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #323639;
}
.luna-single-menu .luna-menu-spec__label p,
.luna-single-trouble .luna-menu-spec__label p { margin: 0; }
.luna-single-menu .luna-menu-spec__value,
.luna-single-trouble .luna-menu-spec__value {
    background: #f5f5f5;
    padding: 16px 24px;
}
.luna-single-menu .luna-menu-spec__value p,
.luna-single-trouble .luna-menu-spec__value p { margin: 0 0 0.75em; }
.luna-single-menu .luna-menu-spec__value p:last-child,
.luna-single-trouble .luna-menu-spec__value p:last-child { margin-bottom: 0; }
.luna-single-menu .luna-menu-spec__value ul,
.luna-single-trouble .luna-menu-spec__value ul { margin: 0; padding-left: 1.2em; }

/* イントロ（見出し(左)+製品/施術画像(右)の横並び2カラム）。 */
.luna-single-menu .luna-menu-intro,
.luna-single-trouble .luna-menu-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    margin: 24px 0;
}
.luna-single-menu .luna-menu-intro__media,
.luna-single-trouble .luna-menu-intro__media {
    max-width: 280px;
}
.luna-single-menu .luna-menu-intro__media img,
.luna-single-trouble .luna-menu-intro__media img {
    width: 100%;
    height: auto;
    display: block;
}
.luna-single-menu .luna-menu-intro__text p,
.luna-single-trouble .luna-menu-intro__text p {
    margin: 0 0 0.5em;
}
.luna-single-menu .luna-menu-intro__text p:last-child,
.luna-single-trouble .luna-menu-intro__text p:last-child {
    margin-bottom: 0;
}
.luna-single-menu .luna-menu-intro__eyebrow,
.luna-single-trouble .luna-menu-intro__eyebrow {
    color: var(--luna-clinic-accent, #a88c20);
    font-weight: 600;
    font-size: 0.95rem;
}

/* セクション見出し(h2)左の紺縦バー・h3の「ー」装飾を施術ページにも適用
   （price用に作った装飾はbody.page-id-46限定のため、ここで
   .luna-single-menu/.luna-single-trouble側にも複製する）。 */
.luna-single-menu .entry-content.wp-block-post-content h2,
.luna-single-trouble .entry-content.wp-block-post-content h2 {
    padding-left: 16px;
    border-left: 4px solid #334155;
}
.luna-single-menu .entry-content.wp-block-post-content h3::before,
.luna-single-trouble .entry-content.wp-block-post-content h3::before {
    content: "ー";
    margin-right: 0.4em;
    color: #323639;
}

@media (max-width: 768px) {
    .luna-single-menu .luna-menu-spec__row,
    .luna-single-trouble .luna-menu-spec__row {
        grid-template-columns: 1fr;
    }
    .luna-single-menu .luna-menu-intro,
    .luna-single-trouble .luna-menu-intro {
        grid-template-columns: 1fr;
    }
    .luna-single-menu .luna-menu-intro__media,
    .luna-single-trouble .luna-menu-intro__media {
        max-width: 100%;
    }
}

/* ============================================================
   Task16: /trouble/<slug>/ お悩み個別ページのヒーロー
   ============================================================ */
/* troubleページのヒーローはmenuページ（h1大型ロゴ調タイトル+サブタイトル+CTA・
   中央揃え）とは構造・見た目とも異なる。本番
   https://luna-beauty-clinic.com/ginza/trouble/spots/ をPlaywrightで実測:
   - ヒーロー全体: background #F5F5F5・padding 80px 0 40px・左寄せ
   - タイトル(h2): "Noto Serif JP" 600・32px・color #323639・左寄せ
   - タグ一覧(左)+更新日(右)は同一行に横並び(flex)
   - タグ: 枠線1px #8D8F96・border-radius 22px・padding 2px 13px・13px
   - 更新日(h5): "Noto Serif JP" 600・14px・color #323639・右寄せ */
.luna-single-trouble .luna-trouble-hero {
    background: #f5f5f5;
    text-align: left;
    /* entry-content側のmax-width:1013px制約を突破して画面幅いっぱいの背景に
       する（本番はフルブリード）。内側の余白は本文カラムと同じ位置に揃える。 */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-top: 56px;
    padding-bottom: 32px;
    padding-left: max(24px, calc((100vw - 1013px) / 2 + 24px));
    padding-right: max(24px, calc((100vw - 1013px) / 2 + 24px));
}
/* 詳細度を .entry-content.wp-block-post-content h2（紺縦バー装飾、クラス3+要素1）
   と同格以上にするため h2 要素セレクタを含めて指定する
   （本番はヒーロータイトルに装飾無し・ソース順で本セレクタが後にあるため上書きされる）。 */
.luna-single-trouble .luna-trouble-hero h2.luna-trouble-hero__title {
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: 32px;
    font-weight: 600;
    color: #323639;
    margin: 0 0 20px;
    line-height: 1.3;
    padding-left: 0;
    border-left: none;
}
.luna-single-trouble .luna-trouble-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.luna-single-trouble .luna-trouble-hero__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.luna-single-trouble .luna-trouble-hero__tag a {
    display: inline-block;
    padding: 2px 13px;
    border: 1px solid #8d8f96;
    border-radius: 22px;
    font-size: 13px;
    color: #323639;
    text-decoration: none;
}
.luna-single-trouble .luna-trouble-hero__tag a:hover {
    border-color: var(--luna-clinic-accent, #a88c20);
    color: var(--luna-clinic-accent, #a88c20);
}
.luna-single-trouble .luna-trouble-hero__date {
    font-family: var(--wp--preset--font-family--serif, "Noto Serif JP", serif);
    font-size: 14px;
    font-weight: 600;
    color: #323639;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .luna-single-trouble .luna-trouble-hero {
        padding: 40px 16px 24px;
    }
    .luna-single-trouble .luna-trouble-hero__title {
        font-size: 24px;
    }
    .luna-single-trouble .luna-trouble-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    /* 本番モバイル実測: タグ群は左寄せのまま、更新日だけ右寄せの別行になる。 */
    .luna-single-trouble .luna-trouble-hero__date {
        align-self: flex-end;
    }
}