@charset "UTF-8";

/* =========================================================
   enn. — pages.css (v1.6.0)
   信頼を作る要素のスタイル: 初回限定バンド / はじめての方へ / 施術の流れ /
   FAQ / 選ばれる理由 / 悩み別入口 / 症例 / お客様の声 / ご予約について /
   LINE友だち追加 / PC固定CTA(縦タブ) / 今週の空き
   style.css のデザイン変数 (--bg, --gold, --mincho ...) をそのまま使う。
   ========================================================= */

/* ---- 共通: 交互背景・下層ページの共通部品 ---- */
.section.alt { background: var(--bg-warm); }
.section .sec-head { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.sec-title small { display: block; font-size: 0.5em; letter-spacing: 0.1em; color: var(--ink-2); margin-top: 0.6em; font-weight: 400; }
.flow-more { max-width: var(--w); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost .btn-en { color: var(--gold); }
.btn-ghost:hover { border-color: var(--gold); transform: translateY(-3px); }
.reserve-guide { margin-top: 2.2em; font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.06em; }
.reserve-guide a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 0.25em; }

/* 下層ページのヒーロー (price-hero と同じ設計) */
.first-hero, .flow-hero, .faq-hero, .guide-hero, .gallery-hero, .reviews-hero {
    padding: clamp(56px, 9vw, 120px) var(--pad-x) clamp(32px, 5vw, 56px);
}
.first-hero-inner, .flow-hero-inner, .faq-hero-inner, .guide-hero-inner, .gallery-hero-inner, .reviews-hero-inner {
    max-width: var(--w); margin-inline: auto;
}
.first-hero-title, .flow-hero-title, .faq-hero-title, .guide-hero-title, .gallery-hero-title, .reviews-hero-title {
    font-family: var(--mincho); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: 0.12em; line-height: 1.3; color: var(--ink); margin-top: 0.3em;
}
.first-hero-lead, .flow-hero-lead, .faq-hero-lead, .guide-hero-lead, .gallery-hero-lead, .reviews-hero-lead {
    font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; letter-spacing: 0.04em; color: var(--ink-2); margin-top: 1.6em;
}

/* =========================================================
   はじめての方は (ヒーロー直下の1行。帯・バッジは使わない)
   ========================================================= */
.first-line { padding: clamp(22px, 3.5vw, 40px) var(--pad-x); border-bottom: 1px solid var(--line); }
.first-line-inner { max-width: var(--w); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6em 2em; }
.first-line-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.9em; font-family: var(--mincho); color: var(--ink); letter-spacing: 0.08em; }
.first-line-label { font-size: var(--fz-0); color: var(--ink-2); }
.first-line-menu { font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.first-line-price { font-family: var(--serif-en); font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: 0.02em; }
.first-line-price small { font-family: var(--gothic); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--ink-3); margin-left: 0.5em; }
.first-line-dur { font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--ink-3); }
.first-line-links { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; font-size: 0.86rem; }

/* =========================================================
   /first/ はじめての方へ
   ========================================================= */
.first-pick { padding-top: 0; }
.first-pick-card {
    max-width: var(--w); margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
    background: var(--surface); border: 1px solid var(--line);
    padding: clamp(1.4rem, 3vw, 3rem);
}
.first-pick-media { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.first-pick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.first-pick-badge {
    display: inline-block; font-family: var(--gothic); font-size: 0.72rem; letter-spacing: 0.18em;
    color: var(--gold-deep); border: 1px solid var(--gold); padding: 0.35em 0.9em; border-radius: 999px;
}
.first-pick-name {
    font-family: var(--mincho); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 0.1em; line-height: 1.4; color: var(--ink); margin-top: 0.7em;
}
.first-pick-desc { font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); margin-top: 1em; }
.first-pick-spec { margin-top: 1.6em; border-top: 1px solid var(--line); }
.first-pick-spec > div { display: grid; grid-template-columns: 7em 1fr; gap: 1em; padding: 0.75em 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.first-pick-spec dt { font-family: var(--gothic); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--ink-3); }
.first-pick-spec dd { font-family: var(--gothic); font-size: var(--fz-0); color: var(--ink); letter-spacing: 0.04em; }
.first-pick-spec dd small { font-size: 0.78em; color: var(--ink-3); margin-left: 0.6em; letter-spacing: 0.08em; }
.first-pick-price { font-family: var(--serif-en); font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; letter-spacing: 0.02em; }
.first-pick-cta { margin-top: 1.6em; width: 100%; min-width: 0; }
.first-pick-sub { margin-top: 1em; font-family: var(--gothic); font-size: 0.84rem; line-height: 1.9; color: var(--ink-2); letter-spacing: 0.04em; }
.first-pick-sub a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 800px) {
    .first-pick-card { grid-template-columns: 1fr; }
    .first-pick-media { aspect-ratio: 1; }
}

/* 他のメニュー (折りたたみ) */
.first-others { padding-top: 0; }
.first-others-box { max-width: var(--w); margin-inline: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.first-others-box summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.2em; padding: 1.4em 0; }
.first-others-box summary::-webkit-details-marker { display: none; }
.first-others-box summary .sec-label { margin-bottom: 0; }
.first-others-title { font-family: var(--mincho); font-size: var(--fz-1); letter-spacing: 0.08em; color: var(--ink); flex: 1; }
.first-others-box summary i { width: 12px; height: 12px; border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.4s var(--ease); }
.first-others-box[open] summary i { transform: rotate(-135deg); }
.first-others-body { padding-bottom: 1.6em; }

/* =========================================================
   施術の流れ
   ========================================================= */
.flow-list { max-width: var(--w-narrow); margin-inline: auto; list-style: none; padding: 0; }
.flow-item { display: grid; grid-template-columns: 3.2em 1fr; gap: 1.2em; padding: 1.3em 0; border-top: 1px solid var(--line); }
.flow-item:last-child { border-bottom: 1px solid var(--line); }
.flow-no { font-family: var(--serif-en); font-size: var(--fz-3); color: var(--gold); line-height: 1.2; letter-spacing: 0.04em; }
.flow-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-1); letter-spacing: 0.08em; color: var(--ink); line-height: 1.5; }
.flow-text { font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); margin-top: 0.4em; letter-spacing: 0.03em; }
.flow-benefit { display: block; font-style: normal; color: var(--gold-deep); margin-top: 0.3em; }
.flow-list-compact .flow-item { padding: 1em 0; }

/* トップ: 10工程 (番号と語だけの活字列。箱は使わない) */
.flow-strip { max-width: var(--w); margin-inline: auto; list-style: none; padding: 1.2em 0 0.6em; display: flex; gap: 0.4em clamp(1.2em, 3vw, 2.4em); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid var(--line); }
.flow-strip::-webkit-scrollbar { display: none; }
.flow-strip-item { flex: none; display: flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
.flow-strip-no { font-family: var(--serif-en); font-size: var(--fz-1); color: var(--gold); line-height: 1; }
.flow-strip-title { font-family: var(--mincho); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ink); }
.flow-strip-item + .flow-strip-item::before { content: "—"; color: var(--line); margin-right: clamp(1.2em, 3vw, 2.4em); }

/* 来店前の準備 */
.prep-grid { max-width: var(--w); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.prep-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2.2rem); }
.prep-card-single { max-width: var(--w-narrow); margin-inline: auto; }
.prep-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-1); letter-spacing: 0.08em; color: var(--ink); margin-bottom: 0.8em; }
.prep-list { list-style: none; padding: 0; }
.prep-list li { position: relative; padding-left: 1.4em; font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); letter-spacing: 0.03em; }
.prep-list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--gold); }

/* =========================================================
   FAQ (アコーディオン)
   ========================================================= */
.faq-list { max-width: var(--w-narrow); margin-inline: auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: grid; grid-template-columns: 2em 1fr 1.4em; gap: 0.8em; align-items: center; padding: 1.15em 0; background: none; border: 0; cursor: pointer; font-family: var(--mincho); font-size: var(--fz-1); letter-spacing: 0.06em; color: var(--ink); line-height: 1.6; }
.faq-mark { font-family: var(--serif-en); font-size: var(--fz-3); color: var(--gold); line-height: 1; }
.faq-toggle { position: relative; width: 1.1em; height: 1.1em; justify-self: end; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; inset: 50% auto auto 50%; background: var(--ink-2); transform: translate(-50%, -50%); transition: transform 0.4s var(--ease); }
.faq-toggle::before { width: 1em; height: 1px; }
.faq-toggle::after { width: 1px; height: 1em; }
.faq-q[aria-expanded="true"] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq-a > p { overflow: hidden; margin: 0; padding-left: 2.8em; font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); letter-spacing: 0.03em; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: 1.3em; }
.faq-group { max-width: var(--w-narrow); margin: 0 auto clamp(2.4rem, 5vw, 4rem); }
.faq-group-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-2); letter-spacing: 0.1em; color: var(--ink); margin-bottom: 0.8em; display: flex; align-items: baseline; gap: 0.8em; }
.faq-group-title .sec-label { margin-bottom: 0; font-size: var(--fz-1); }
.faq-nav { max-width: var(--w-narrow); margin: 0 auto clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 0.6em; }
.faq-nav a { font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.1em; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 1.2em; transition: border-color 0.4s var(--ease), color 0.4s var(--ease); }
.faq-nav a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* =========================================================
   選ばれる理由 (活字の2段組。枠・背景は使わない)
   ========================================================= */
.reason-list { max-width: var(--w); margin-inline: auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 5vw, 5rem); }
.reason-item { display: grid; grid-template-columns: 3.2em 1fr; gap: 1em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.reason-no { font-family: var(--serif-en); font-size: var(--fz-3); color: var(--gold); line-height: 1.1; }
.reason-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-1); letter-spacing: 0.06em; color: var(--ink); line-height: 1.6; }
.reason-text { font-family: var(--gothic); font-size: 0.92rem; line-height: 2; color: var(--ink-2); margin-top: 0.6em; letter-spacing: 0.03em; }
@media (max-width: 800px) { .reason-list { grid-template-columns: 1fr; } }

/* =========================================================
   悩み別の入口 (雑誌の目次のような縦のインデックス)
   ========================================================= */
.concern-index { max-width: var(--w); margin-inline: auto; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.concern-row { border-bottom: 1px solid var(--line); position: relative; }
.concern-link { display: grid; grid-template-columns: 3em minmax(0, 1.4fr) minmax(0, 1fr) 2em; align-items: baseline; gap: 0.6em 1.4em; padding: clamp(1.2rem, 2.6vw, 1.9rem) 0; color: inherit; text-decoration: none; }
.concern-no { font-family: var(--serif-en); font-size: var(--fz-1); color: var(--gold); letter-spacing: 0.06em; }
.concern-main { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.concern-label { font-family: var(--mincho); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: 0.1em; line-height: 1.4; color: var(--ink); transition: transform 0.6s var(--ease); }
.concern-lead { font-family: var(--gothic); font-size: 0.9rem; line-height: 1.9; color: var(--ink-2); letter-spacing: 0.03em; }
.concern-side { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.concern-menu-name { font-family: var(--mincho); font-size: var(--fz-0); letter-spacing: 0.06em; color: var(--ink); }
.concern-menu-price { font-family: var(--gothic); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--ink-3); }
.concern-arrow { font-family: var(--serif-en); color: var(--gold-deep); text-align: right; transition: transform 0.5s var(--ease); }
.concern-link:hover .concern-label { transform: translateX(6px); }
.concern-link:hover .concern-arrow { transform: translateX(6px); }
.concern-cases { position: absolute; right: 2.6em; bottom: 0.9em; font-family: var(--gothic); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 800px) {
    .concern-link { grid-template-columns: 2.4em minmax(0, 1fr) 1.6em; gap: 0.4em 0.9em; }
    .concern-side { grid-column: 2; }
    .concern-arrow { grid-row: 1; grid-column: 3; }
    .concern-cases { position: static; display: inline-block; margin: -0.6em 0 1em 3.3em; }
}

/* =========================================================
   症例 (Before / After)
   ========================================================= */
.case-grid { max-width: var(--w); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.case-card { background: transparent; border: 0; }
.case-compare { position: relative; aspect-ratio: 4 / 5; overflow: hidden; user-select: none; background: var(--bg-warm); }
.case-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.case-after-wrap .case-img { position: absolute; inset: 0; }
.case-tag { position: absolute; top: 0.8em; font-family: var(--sans-en); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: rgba(46, 42, 35, 0.55); padding: 0.4em 0.8em; pointer-events: none; }
.case-tag-before { left: 0.8em; }
.case-tag-after { right: 0.8em; }
.case-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 2; }
.case-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); pointer-events: none; }
.case-handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.case-body { padding: 1em 0 0.4em; }
.case-concerns { display: flex; flex-wrap: wrap; gap: 0.4em 0.8em; font-family: var(--gothic); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--gold-deep); }
.case-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-1); letter-spacing: 0.06em; color: var(--ink); margin-top: 0.4em; line-height: 1.6; }
.case-comment { font-family: var(--gothic); font-size: 0.9rem; line-height: 1.9; color: var(--ink-2); margin-top: 0.5em; }
.case-meta { display: flex; flex-wrap: wrap; gap: 0.4em 1em; margin-top: 0.7em; font-family: var(--gothic); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-3); }
.case-cta { margin-top: 0.8em; font-size: 0.86rem; }
.case-empty { max-width: var(--w-narrow); margin-inline: auto; font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); text-align: center; }
.case-filter { max-width: var(--w); margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; gap: 0.6em; }
.case-filter a { font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.1em; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.55em 1.2em; transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease); }
.case-filter a:hover, .case-filter a.is-active { border-color: var(--gold); color: #fff; background: var(--gold); }
.cases-note { max-width: var(--w); margin: clamp(1.4rem, 3vw, 2rem) auto 0; font-family: var(--gothic); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.9; }

/* =========================================================
   お客様の声
   ========================================================= */
.review-summary { max-width: var(--w); margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em 1.4em; }
.review-avg { font-family: var(--serif-en); font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; color: var(--ink); }
.review-stars { color: var(--gold); letter-spacing: 0.12em; font-size: 1.1rem; }
.review-count { font-family: var(--gothic); font-size: 0.86rem; letter-spacing: 0.08em; color: var(--ink-2); }
.review-grid { max-width: var(--w); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--line); }
.review-card { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: clamp(1.3rem, 2.5vw, 1.8rem) 0; display: flex; flex-direction: column; gap: 0.6em; }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.review-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-1); letter-spacing: 0.06em; color: var(--ink); line-height: 1.6; }
.review-body { font-family: var(--gothic); font-size: 0.92rem; line-height: 2; color: var(--ink-2); letter-spacing: 0.02em; }
.review-meta { margin-top: auto; padding-top: 0.6em; font-family: var(--gothic); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.3em 1em; }
.review-reply { border-left: 2px solid var(--gold-soft); padding-left: 1em; font-family: var(--gothic); font-size: 0.86rem; line-height: 1.9; color: var(--ink-2); }
.review-reply b { display: block; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--gold-deep); font-weight: 500; }
.review-google { max-width: var(--w); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 1.6em; font-family: var(--gothic); font-size: 0.9rem; color: var(--ink-2); }
.review-empty { max-width: var(--w-narrow); margin-inline: auto; font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); text-align: center; }

/* =========================================================
   ご予約について (/guide/)
   ========================================================= */
.guide-grid { max-width: var(--w); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.guide-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.6em; }
.guide-card .sec-label { margin-bottom: 0.2em; font-size: var(--fz-1); }
.guide-title { font-family: var(--mincho); font-weight: 500; font-size: var(--fz-2); letter-spacing: 0.08em; color: var(--ink); line-height: 1.5; }
.guide-text { font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); letter-spacing: 0.03em; }
.guide-text a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.guide-card .btn { margin-top: auto; align-self: flex-start; min-width: 0; }
.guide-dl { max-width: var(--w-narrow); margin-inline: auto; border-top: 1px solid var(--line); }
.guide-dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 1em; padding: 1.1em 0; border-bottom: 1px solid var(--line); }
.guide-dl dt { font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--ink-3); padding-top: 0.3em; }
.guide-dl dd { font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink); letter-spacing: 0.03em; }
.guide-dl dd a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 560px) { .guide-dl > div { grid-template-columns: 1fr; gap: 0.2em; } }
.pay-badges { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.4em; }
.pay-badges span { font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ink); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0.4em 1em; }

/* =========================================================
   LINE (中央寄せ。手順や番号は置かない)
   ========================================================= */
.line-block { padding: clamp(56px, 9vw, 120px) var(--pad-x); border-top: 1px solid var(--line); }
.line-block-inner { max-width: var(--w-narrow); margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.line-block-title { font-family: var(--mincho); font-weight: 500; font-size: clamp(var(--fz-3), 3.4vw, var(--fz-5)); letter-spacing: 0.1em; line-height: 1.6; color: var(--ink); margin-top: 0.4em; }
.line-block-lead { font-family: var(--gothic); font-size: var(--fz-0); line-height: 2.1; color: var(--ink-2); margin-top: 1.2em; letter-spacing: 0.04em; max-width: 34em; }
.line-block-benefit { margin-top: 1em; font-family: var(--gothic); font-size: 0.88rem; letter-spacing: 0.1em; color: var(--gold-deep); }
.line-block-actions { margin-top: 1.8em; }
.line-block-qr { margin-top: 1.6em; width: min(140px, 40vw); }
.line-block-qr img { width: 100%; height: auto; display: block; }

/* =========================================================
   今週の空き (1行の活字。箱・チップは使わない)
   ========================================================= */
.avail { padding: clamp(22px, 3.5vw, 36px) var(--pad-x); border-block: 1px solid var(--line); }
.avail-inner { max-width: var(--w); margin-inline: auto; }
.avail-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.2em; font-family: var(--mincho); color: var(--ink); letter-spacing: 0.08em; }
.avail-title { font-weight: 500; font-size: var(--fz-1); }
.avail-title::after { content: "："; color: var(--ink-3); }
.avail-slots { display: inline; }
.avail-slot { display: inline; font-family: var(--mincho); color: var(--ink); text-decoration: none; }
.avail-slot .avail-slot-date { font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ink-2); margin-right: 0.4em; }
.avail-slot .avail-slot-time { font-family: var(--serif-en); font-size: var(--fz-2); letter-spacing: 0.02em; border-bottom: 1px solid var(--gold); padding-bottom: 0.1em; transition: color 0.4s var(--ease); }
.avail-slot .avail-slot-time small { font-family: var(--gothic); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--gold-deep); margin-left: 0.4em; border: 0; }
.avail-slot:hover .avail-slot-time { color: var(--gold-deep); }
.avail-slot + .avail-slot::before { content: "／"; color: var(--ink-3); margin: 0 0.7em; font-family: var(--mincho); }
.avail-today { font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--ink-2); }
.avail-today b { color: var(--gold-deep); font-weight: 500; }
.avail-today:empty { display: none; }
.avail-note { margin-top: 0.6em; font-family: var(--gothic); font-size: 0.78rem; color: var(--ink-3); letter-spacing: 0.06em; }
.avail-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.avail-slots .avail-loading, .avail-slots .avail-empty { font-family: var(--gothic); font-size: 0.86rem; color: var(--ink-3); letter-spacing: 0.06em; }

/* =========================================================
   PC 固定CTA: 右端の縦タブ (ネットで予約 / LINE / 電話)
   ========================================================= */
.side-cta { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 85; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-right: 0; }
.side-cta a { writing-mode: vertical-rl; text-orientation: mixed; padding: 1.3em 0.85em; font-family: var(--gothic); font-size: 0.82rem; letter-spacing: 0.2em; background: var(--surface); color: var(--ink); transition: background 0.4s var(--ease), color 0.4s var(--ease); display: flex; align-items: center; gap: 0.6em; }
.side-cta a .side-cta-en { font-family: var(--sans-en); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.side-cta a:hover { background: var(--gold-soft); }
.side-cta .side-cta-reserve { background: var(--gold); color: #fff; }
.side-cta .side-cta-reserve .side-cta-en { color: rgba(255, 255, 255, 0.8); }
.side-cta .side-cta-reserve:hover { background: var(--gold-deep); }
.side-cta.is-closed .side-cta-tel { order: 3; }
@media (max-width: 1000px) { .side-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .side-cta a, .concern-label, .concern-arrow, .avail-slot-time { transition: none; } }

/* 症例 単体ページ */
.case-grid-single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.case-content { max-width: var(--w-narrow); margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; font-family: var(--gothic); font-size: var(--fz-0); line-height: 2; color: var(--ink-2); }
.case-content p + p { margin-top: 1em; }
.gallery-hero-lead a { color: var(--gold-deep); }

/* =========================================================
   v1.6.10 — CTA の強い色と、リンクの視認性 (背景と同化していた箇所の修正)
   - .btn-outline は元々 暗い .reserve 用 (白い枠・白文字)。明るい背景 (LINE / 下層CTA / first / guide / price) で
     白文字が消えていたので、明るい背景では CTA 色にする。暗い背景 (.reserve / .hero) だけ従来の白。
   - 予約系の主ボタン (.btn-fill / 右側タブ / モバイル下部バー) は金からテラコッタ (#a8432c) に。
     アイボリー地でのコントラスト 5.9:1 (金 #b08d57 は 2.6:1 で弱かった)。
   - 小さなテキストリンクは CTA 色 + 下線。装飾の金 (番号・ラベル) はそのまま。
   ========================================================= */
:root { --cta: #a8432c; --cta-deep: #8a3320; --cta-soft: #f7e7e1; }

/* 主ボタン */
.btn-fill { background: var(--cta); color: #fff; }
.btn-fill .btn-en { color: rgba(255, 255, 255, 0.82); }
.btn-fill:hover { background: var(--cta-deep); }
/* 明るい背景の枠ボタン */
.btn-outline { border: 1px solid var(--cta); color: var(--cta); background: transparent; }
.btn-outline .btn-en { color: var(--cta); opacity: 0.85; }
.btn-outline:hover { background: var(--cta-soft); }
/* 暗い背景 (写真の上) はこれまで通り白 */
.reserve .btn-outline, .hero .btn-outline, [data-invert] .btn-outline { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.reserve .btn-outline .btn-en, .hero .btn-outline .btn-en, [data-invert] .btn-outline .btn-en { color: #fff; opacity: 0.85; }
.reserve .btn-outline:hover, .hero .btn-outline:hover, [data-invert] .btn-outline:hover { background: rgba(255, 255, 255, 0.14); }

/* 固定 CTA (PC 右側タブ / モバイル下部バー) の予約 */
.side-cta .side-cta-reserve { background: var(--cta); color: #fff; }
.side-cta .side-cta-reserve .side-cta-en { color: rgba(255, 255, 255, 0.85); }
.side-cta .side-cta-reserve:hover { background: var(--cta-deep); }
.float-line { background: var(--cta); color: #fff; font-weight: 500; }

/* テキストリンク: 明るい背景で確実に見える色と下線 */
.text-link span::after { background: var(--cta); height: 1px; }
.first-line-links .text-link { margin-top: 0; color: var(--cta); }
.first-line-links .text-link:hover { color: var(--cta-deep); }
.concern-arrow, .concern-cases { color: var(--cta); }
.concern-cases { text-decoration-color: var(--cta); }
.concern-link:hover .concern-label { color: var(--cta-deep); }
.avail-slot .avail-slot-time { color: var(--cta); border-bottom-color: var(--cta); }
.avail-slot .avail-slot-time small { color: var(--cta); }
.avail-slot:hover .avail-slot-time { color: var(--cta-deep); }
.avail-note a, .faq-more a, .faq-more, .reviews-more, .cases-more, .flow-more, .news-more,
.bk-trust-contact a, .booking-contact a, .bk-member-hint a, .bk-policy-box a, .bk-manage-link, .line-block-benefit,
.mg-notoken a, .mg-error a, .mg-done a { color: var(--cta); }
.bk-earliest { border-color: var(--cta); background: var(--cta-soft); }
.bk-earliest b { color: var(--cta-deep); }
.bk-earliest-btn { border-color: var(--cta); color: var(--cta); }
.bk-next, .bk-next.is-submit { background: var(--cta); color: #fff; }
.bk-next:hover:not(:disabled) { background: var(--cta-deep); }
.bk-line-send { background: #06c755; color: #fff; }
.bk-tab.is-active, .bk-visit-btn.is-active { border-color: var(--cta); }
.bk-visit-btn.is-active { background: var(--cta); color: #fff; }
.bk-tab.is-active { color: var(--cta-deep); background: var(--cta-soft); }
.bk-option.is-on { background: var(--cta-soft); }
.bk-option input, .bk-check input, .bk-agree input { accent-color: var(--cta); }
.faq-q::after { color: var(--cta); }