/* サロン+ サービスサイト
 *
 * 予約アプリ本体（public/）とは別。こちらは「売るための1枚」。
 * 色と書体は予約アプリの「静（sei）」テーマに合わせている。
 * 実物を見たときに同じ空気であることが、いちばんの信用になる。
 *
 * 色は3系統だけ：地（生成り）／文字（墨）／差し色（深緑）。
 * 差し色は CTA と数字にしか使わない。
 */

:root {
  --bg:        #f8f7f3;
  --bg-alt:    #f1efe8;
  --paper:     #ffffff;
  --ink:       #22272a;
  --ink-soft:  #565d5a;
  --muted:     #6a706c;
  --line:      #e2ded4;
  --accent:      #2f5d50;
  --accent-dark: #22463c;
  --accent-tint: #eaf1ee;
  --accent-ink:  #ffffff;

  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --sp-16: 128px;

  /* 文字の大きさ。7段だけ。
     実測（改修前）：PCで13種類・スマホで11種類がベタ書きで散っていた。
     種類が多いほど「なんとなく揃っていない」に見える。
     clamp で幅に応じて連続的に変え、画面幅ごとの書き直しをやめる
     （予約アプリの tokens.css と同じ考え方）。
     下限は14px。予約アプリ側で決めた「13px以下を使わない」に揃える
     （40〜60代のオーナー様がスマホで読む）。 */
  --fs-h1:    clamp(32px, 4.2vw + 16px, 56px);
  --fs-h2:    clamp(28px, 1.4vw + 22px, 36px);
  --fs-price: clamp(34px, 2vw + 26px, 40px);
  --fs-h3:    20px;
  --fs-lead:  clamp(16px, 0.5vw + 14px, 18px);
  --fs-body:  16px;
  --fs-small: 14px;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(34, 39, 42, .07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* 日本語には単語の切れ目が無いので、既定では語の途中で行が変わる。
     auto-phrase は文節の切れ目で折り返す（Chromium系のみ。
     対応していない端末では今までどおりに戻るだけで、害は無い）。 */
  word-break: auto-phrase;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-3); }
.narrow { max-width: 720px; }

section { padding: var(--sp-12) 0; }
@media (max-width: 720px) { section { padding: var(--sp-8) 0; } }

/* 見出しは7つとも中央。1つずつ書かない */
h2 {
  font-size: var(--fs-h2);
  line-height: 1.45;
  letter-spacing: .04em;
  margin-bottom: var(--sp-6);
  text-align: center;
  text-wrap: balance;
}

/* 見出しの下に1文置くとき。中央・行長・見出しとの距離をここで決める */
.section-lead {
  text-align: center;
  max-width: 34em;
  margin: calc(var(--sp-3) * -1) auto var(--sp-6);
}
h3 { font-size: var(--fs-h3); line-height: 1.6; letter-spacing: .02em; }
@media (max-width: 720px) {
  h2 { margin-bottom: var(--sp-4); }
}

p + p { margin-top: var(--sp-2); }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); }
.note { font-size: var(--fs-small); color: var(--muted); }

/* ── ヘッダー ───────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(248, 247, 243, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.logo { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .06em; }
.logo span { color: var(--accent); }

/* ── ファーストビュー ─────────────────────────── */
.hero { padding: var(--sp-16) 0 var(--sp-12); text-align: center; }
@media (max-width: 720px) { .hero { padding: var(--sp-8) 0 var(--sp-6); } }

.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.35;
  letter-spacing: .04em;
  text-wrap: balance;
  margin-bottom: var(--sp-3);
}
.hero .lead { max-width: 30em; margin: 0 auto var(--sp-6); }

.hero-shot {
  max-width: 760px; margin: var(--sp-8) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--paper);
}

/* ── ボタン ─────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  transition: background .18s ease-out, transform .12s ease-out;
}
.btn:hover { background: var(--accent-dark); }
/* 押した瞬間の返事。色だけだと「効いたのか」が分からない */
.btn:active { transform: translateY(1px); }
/* ヘッダーに置く小さいほう。指の最小44pxは保つ */
.btn--sm { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-body); }
.btn--ghost {
  background: transparent; color: var(--accent); border-color: var(--accent);
}
.btn--ghost:hover { background: var(--accent-tint); }
.btn--ghost:active { transform: translateY(1px); }

/* キーボードで操作したときの印。
   これまでブラウザ既定（1pxの濃い灰色）に任せていた。生成りの地では細く、
   予約アプリ側（2pxの差し色）とも違って見える。
   このサイトの狙いは「実物を見たときに同じ空気であること」なので、
   アプリと同じ印に揃える。 */
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn-note { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--muted); }

/* ── 困りごと ───────────────────────────────── */
/* 地の色を1段変える区画。区画を数えやすいよう、クラス1つで表す */
.tinted { background: var(--bg-alt); }
.pain-list { display: grid; gap: var(--sp-3); max-width: 640px; margin: 0 auto; }
.pain {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3); background: var(--paper);
  border-radius: var(--radius); border: 1px solid var(--line);
}
/* アイコンは currentColor で描く。色はここで決める。
   差し色を変えたときに、絵だけ古い色で取り残されないようにするため。 */
.pain svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* ── 3つの理由 ──────────────────────────────── */
/* 3枚の高さを揃えない。中身の量が違う（01だけ表が入る）ので、
   揃えると02・03の下に350pxの空白ができ、「型に流し込んだ3枚」に見える。
   料金の3枚（.plans）と同じ扱いに揃える。 */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; } }
.reason {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
}
.reason-no {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .16em;
  color: var(--accent); margin-bottom: var(--sp-1);
}
.reason h3 { margin-bottom: var(--sp-2); }
/* 言い切りの1行。数字がここの主役なので、本文より一段大きく差し色で */
.emph { font-size: var(--fs-h3); color: var(--accent); }
.reason p { font-size: var(--fs-body); color: var(--ink-soft); }

/* 「オプションで増えない」を数字で見せる小さな表 */
.stack { margin-top: var(--sp-3); font-size: var(--fs-small); }
.stack div { display: flex; justify-content: space-between; padding: 3px 0; }
.stack .total {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px;
  font-weight: 700;
}
.stack .total span:last-child { color: var(--accent); }
/* 表のすぐ下に置く出典。表と離すと、どれの注なのか分からなくなる */
.stack + .note { margin-top: var(--sp-1); }

/* ── 料金 ───────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: start; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.plan {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.plan--pick {
  border-color: var(--accent); border-width: 2px;
  box-shadow: var(--shadow);
}
.plan-tag {
  display: inline-block; align-self: flex-start;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em;
  padding: 3px 12px; border-radius: 100px; margin-bottom: var(--sp-2);
}
.plan-name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .04em; }
.plan-for { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-3); }
.plan-price { font-size: var(--fs-price); font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.plan-price small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.plan-price + .note { margin-bottom: var(--sp-3); }

.plan ul { list-style: none; margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-body); }
.plan li { display: flex; gap: 10px; padding: 5px 0; align-items: flex-start; }
.plan li svg { flex-shrink: 0; margin-top: 6px; color: var(--accent); }
/* 使えない機能は、チェックではなく横棒。色も文字と揃えて沈める */
.plan li.off { color: var(--muted); }
.plan li.off svg { color: var(--muted); }
.plan .btn { margin-top: auto; }
/* そのプランだけの但し書き。料金のすぐ下に付ける */
.plan-caveat { margin: -8px 0 var(--sp-2); }

/* ── できること ─────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-6); }
@media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } }
.feature { display: flex; gap: var(--sp-2); align-items: flex-start; }
.feature svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.feature h3 { font-size: var(--fs-h3); margin-bottom: 2px; }
.feature p { font-size: var(--fs-body); color: var(--ink-soft); }

/* ── 導入の流れ ─────────────────────────────── */
.steps { counter-reset: step; max-width: 720px; margin: 0 auto; }
.step {
  position: relative; padding: 0 0 var(--sp-6) var(--sp-6);
  border-left: 2px solid var(--line);
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: -17px; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: var(--fs-body); font-weight: 700;
}
.step h3 { margin-bottom: 2px; }
.step p { font-size: var(--fs-body); color: var(--ink-soft); }
/* 「誰が・何分」の札。見出しの長さで行内に入ったり次の行に落ちたりして、
   段ごとに場所が変わっていた。always 見出しの下に置いて、
   5段ぶんを縦に読み比べられるようにする。 */
.step .who {
  display: table; font-size: var(--fs-small); letter-spacing: .06em;
  background: var(--accent-tint); color: var(--accent-dark);
  padding: 2px 10px; border-radius: 100px;
  margin: var(--sp-1) 0 0;
}
.step h3 + .who, .step .who { line-height: 1.7; }

/* ── よくあるご質問 ─────────────────────────── */
.faq { max-width: 720px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) 0;
}
/* 質問の行。1箇所にまとめて書く（もとは3箇所に分かれていた）。
   高さ44pxは指で押すための最小。31pxしかなく押しにくかった。 */
.faq summary {
  font-size: var(--fs-lead); font-weight: 700; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: var(--sp-2);
  min-height: 44px;
  align-items: center;
  padding: 4px 0;
  transition: color .15s ease-out;
}
.faq summary::-webkit-details-marker { display: none; }
/* 押せる行であることを、触れたときに返す */
.faq summary:hover { color: var(--accent); }
.faq summary:hover::after { color: var(--accent-dark); }
.faq summary::after {
  content: '＋'; color: var(--accent); flex-shrink: 0; font-weight: 400;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-body); }

/* ── 最後のひと押し ─────────────────────────── */
.closing {
  background: var(--accent); color: var(--accent-ink); text-align: center;
}
.closing h2 { margin-bottom: var(--sp-2); }
.closing p { color: rgba(255, 255, 255, .88); margin-bottom: var(--sp-6); }
.closing .btn { background: var(--paper); color: var(--accent-dark); }
.closing .btn:hover { background: var(--bg-alt); }
.closing .btn-note { color: rgba(255, 255, 255, .8); }

/* ── フッター ───────────────────────────────── */
.site-foot {
  padding: var(--sp-6) 0; border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--muted);
}
.site-foot .wrap { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

/* ── スマホの固定バー ───────────────────────── */
.fixed-cta { display: none; }
@media (max-width: 720px) {
  .fixed-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(248, 247, 243, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    padding: 10px var(--sp-3) calc(10px + env(safe-area-inset-bottom));
  }
  .fixed-cta .btn { width: 100%; }
  /* 最初の画面（ヒーローのボタンが見えている間）は下げておく。
     is-hidden を付けるのは JS 側だけなので、JSが動かなければ出たまま。 */
  .fixed-cta {
    transition: transform .24s ease-out, opacity .24s ease-out;
  }
  .fixed-cta.is-hidden {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  /* 固定バーの下に本文が隠れないように */
  body { padding-bottom: 84px; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── 検査で見つかった直し ─────────────────────
 *
 * ① よくあるご質問の答えが1行48字あり、目が行を戻せなくなっていた。
 *    本文は45字（約38em）までに収める。
 * ② 質問の見出し（summary）の高さが31pxで、指では押しにくかった。
 *    押せるものは44px以上にする。→ .faq summary の定義に畳んだ。
 */

.faq details p { max-width: 36em; }

/* フッターのリンクが18pxしかなく、指では押せなかった */
.site-foot .wrap > div:last-child { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.site-foot a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* （スマホで見出しと本文の落差が1.44倍しかなかった件は、
    --fs-h2 と --fs-lead の下限に畳んだ。同じ大きさを2箇所で
    決めていると、片方だけ直して食い違う。） */

/* ── 等倍で見て見つかった直し ───────────────────
 *
 * 縮小して見ると気づけない。1画面ずつ等倍で見て初めて分かった4つ。
 */

/* ① 3枚のカードで金額の高さが揃っていなかった。
 *    「いちばん選ばれます」の帯がある1枚だけ下にずれ、
 *    3つの金額を見比べられなくなっていた。
 *    帯の高さぶんを、全部のカードに最初から空けておく。 */
.plan { padding-top: var(--sp-3); }
.plan::before {
  content: '';
  display: block;
  height: 30px;              /* 帯（.plan-tag）の高さ＋下余白 */
  margin-bottom: var(--sp-2);
}
.plan--pick::before { display: none; }
.plan-tag { margin-bottom: var(--sp-2); }

/* ② 箇条書きが flex なので、<strong> と後ろの文字が別々の項目と見なされ、
 *    「お店のホームページ　の制作」のように隙間が空いていた。
 *    間隔はアイコンの右余白で作り、文字どうしはくっつける。 */
.plan li { gap: 0; }
.plan li > svg { margin-right: 10px; }
.pain { gap: 0; }
.pain > svg { margin-right: var(--sp-2); }
.feature { gap: 0; }
.feature > svg { margin-right: var(--sp-2); }

/* ③ 「自動でお知らせ・前日のリマインド」が折り返して「ド」だけが
 *    次の行に残っていた件。
 *    もとは word-break: keep-all で押さえていたが、keep-all は日本語では
 *    「かな・漢字の間で折らない」なので、入りきらないときは
 *    overflow-wrap: anywhere が効いて**どこででも**折れてしまう。
 *    実際に「リンクをスマホで開いていただ／きます」と語の途中で割れていた。
 *    いまは body 全体に word-break: auto-phrase（文節の切れ目で折る）を
 *    入れてあるので、この上書きは要らない。孤立行が戻らないことは
 *    390 / 375 / 1280px で実測して確認した。 */

/* ④ 中央揃えの注釈が3行になり、最後が「す。」だけになっていた。
 *    中央揃えは2行までにする。長い注釈は左揃えにして幅を絞る。 */
.plans + .note {
  text-align: left;
  max-width: 32em;
}

/* ⑤ 中央揃えの文の最後が「す。」だけの行になっていた（孤立行）。
 *    読み手はそこで一瞬つまずく。
 *    text-wrap: pretty は、最終行が1〜2文字にならないよう折り返しを調整する。 */
p, li, summary { text-wrap: pretty; }

/* 料金の下の注釈。中央揃えのまま3行にすると必ず孤立行が出るので、左揃えにして幅を絞る */
.plans-note {
  margin: var(--sp-6) auto 0;
  max-width: 34em;
  text-align: left;
}

/* ── ファーストビュー（動画）2026-09-15 ─────────
 * 背景は Higgsfield で生成した動画（8秒ループ）。役目は「空気」だけで、
 * 文字は動画が無くても読めるように暗幕を一枚かける（グラデは使わない）。
 * 動画を読み込まない環境（スマホ・動きを減らす設定・JSなし）では poster が背景になる。
 * 文字の大きさは既存の7段から選び、新しい段を増やしていない。 */
.hero-v {
  position: relative; overflow: hidden; color: var(--bg);
  padding: var(--sp-16) 0;
  background: #1c3029 url(/assets/video/hero-poster.webp) center / cover no-repeat;
}
@media (max-width: 720px) { .hero-v { padding: var(--sp-12) 0 var(--sp-8); } }
.hero-v__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 38, 32, .76); }
.hero-v .wrap { position: relative; z-index: 2; }
.hero-v .nb { display: inline-block; }          /* 文節の途中で折れないように */
.hero-v__eyebrow { font-size: var(--fs-small); letter-spacing: .2em; opacity: .85; }
.hero-v h1 { font-size: var(--fs-h1); line-height: 1.35; letter-spacing: .04em; margin-top: var(--sp-2); }
.hero-v__price { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.hero-v__plan { font-size: var(--fs-small); border: 1px solid rgba(248, 247, 243, .6); border-radius: 999px; padding: 2px 14px; }
.hero-v__yen { font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: .01em; }
.hero-v__yen small { font-size: var(--fs-lead); font-weight: 400; margin-left: 2px; }
.hero-v__tax, .hero-v__sub { font-size: var(--fs-small); opacity: .88; }
.hero-v__sub { margin-top: var(--sp-1); }
.hero-v__catch { margin-top: var(--sp-4); font-size: var(--fs-lead); line-height: 1.8; }
.hero-v__cta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero-v .btn { background: var(--bg); color: var(--accent-dark); }
.hero-v .btn:hover { background: var(--paper); }
.hero-v .btn--ghost { background: transparent; color: var(--bg); border-color: rgba(248, 247, 243, .8); }
.hero-v .btn--ghost:hover { background: rgba(248, 247, 243, .12); }
.hero-v .btn-note { color: rgba(248, 247, 243, .82); }
/* 暗い地では深緑の印が見えないので、生成りにする */
.hero-v :where(a):focus-visible { outline-color: var(--bg); }

/* ── 10の機能 ─────────────────────────────── */
.fn10 h2 { font-size: var(--fs-h2); text-align: center; }
.fn10 .lead { text-align: center; max-width: 34em; margin: var(--sp-2) auto 0; }
.fn10__grid {
  list-style: none; margin-top: var(--sp-6);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2);
}
@media (max-width: 860px) { .fn10__grid { grid-template-columns: repeat(2, 1fr); } }
.fn10__grid li {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-2); text-align: center;
}
.fn10__grid .ic {
  width: 44px; height: 44px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.fn10__grid .ic .f { fill: currentColor; stroke: none; }
.fn10__grid span { font-size: var(--fs-small); font-weight: 700; line-height: 1.5; }
.fn10__grid em { font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.fn10__grid .is-up { border-color: var(--accent); }
/* 2列の枠に長い語（LINEリッチメニューデザイン等）が入ると、
   グリッドの子は既定で中身より縮まないため枠ごと押し広げ、390px で横に35pxはみ出した。 */
.fn10__grid li { min-width: 0; }
.fn10__grid span { overflow-wrap: anywhere; }
/* 他社の積み上げ例（選ばれる理由の下）。カードから出して1つの枠にした */
.compare {
  max-width: 520px; margin: var(--sp-6) auto 0; padding: var(--sp-3) var(--sp-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.compare__lead { font-size: var(--fs-body); color: var(--ink-soft); }
/* 料金カード 2026-09-15：
   札（おすすめ）は枠の上辺に浮かせ、行を占めないようにした（3枚の構成を揃えるため・D17）。
   機能の行数はプランで違うので、解約条件から下を底にそろえる。 */
.plan { position: relative; }
.plan-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.plan > ul + .plan-caveat { margin-top: auto; }
.fn10 .nb { display: inline-block; }
/* 3枚の高さを揃え、解約条件から下を底にそろえる。
   プロの解約条件は2行、他は1行なので、2行ぶんの高さを確保して次の行の位置を合わせる（D16）。 */
.plans { align-items: stretch; }
.plan > ul + .plan-caveat { min-height: calc(var(--fs-small) * 1.8 * 2); }
/* ボタンにも margin-top:auto が付いていて、余白が「解約条件の上」と「ボタンの上」に半分ずつ配られ、
   カードごとにずれていた。余白は解約条件の上だけに集める。 */
.plan > ul + .plan-caveat ~ .btn { margin-top: 0; }
/* 上の「等倍で見て見つかった直し ①」（札の高さぶんの空き）は、札を枠の上辺に浮かせたので不要になった。
   残すと、札の無い2枚だけ名前が約47px下がる（D16）。 */
.plan::before { display: none; }

/* ── トップの「2台のスマホ」動画 2026-09-15 ─────
 * お客様の予約からオーナー様の管理までを1本で見せる。画面の文字が読める大きさにするため、
 * 横に並べず、文字の下に横幅いっぱいで置く。 */
.demo2 { margin-top: var(--sp-8); }
.demo2__v {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) * 1.6);
  background: #1c3029 url(/assets/video/lp-phones-poster.webp) center / cover no-repeat;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.demo2__steps {
  list-style: none; margin-top: var(--sp-3);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-4);
}
.demo2__steps li { font-size: var(--fs-small); color: rgba(248, 247, 243, .9); display: flex; align-items: center; gap: var(--sp-1); }
.demo2__steps b {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-small);
}
@media (max-width: 720px) {
  .demo2 { margin-top: var(--sp-6); }
  .demo2__steps { flex-direction: column; align-items: flex-start; }
}
/* 2台のスマホの動画をファーストビューに入れるため、ヒーローの上下の余白を詰める（PC）。 */
@media (min-width: 721px) {
  .hero-v { padding: var(--sp-8) 0 var(--sp-8); }
  .hero-v__price { margin-top: var(--sp-3); }
  .hero-v__catch { margin-top: var(--sp-3); }
  .hero-v__cta { margin-top: var(--sp-4); }
  .demo2 { margin-top: var(--sp-6); }
}
.fn10__note { text-align: center; margin-top: var(--sp-1); }
.fn10__note { max-width: 30em; margin-left: auto; margin-right: auto; }

/* ── 選ばれる理由（絵つき）2026-09-15 ─────────
 * 「簡素すぎる・文字が多い」への直し。上半分を絵、下半分を短い言葉にした。
 * 絵は3色の中で描いた SVG（色を増やさない）。 */
.reasons--v { gap: var(--sp-3); align-items: stretch; }
.reason--v { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.reason__art { background: var(--accent-tint); padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; justify-content: center; }
.reason__art svg { display: block; width: 100%; max-width: 230px; height: auto; }
.reason__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.reason--v h3 { margin-bottom: var(--sp-1); }

/* 他社の積み上げ例：棒の図 */
.compare { max-width: 560px; }
.compare__lead { text-align: center; }
.cbar { display: flex; justify-content: center; align-items: stretch; gap: var(--sp-8); margin-top: var(--sp-3); position: relative; }
.cbar::before {
  content: "→"; position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  font-size: var(--fs-h3); color: var(--muted);
}
.cbar__col { width: 180px; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.cbar__total { font-size: var(--fs-h3); font-weight: 700; color: var(--ink-soft); }
.cbar__total--big { color: var(--accent); }
.cbar__stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; margin-top: var(--sp-1); min-height: 200px; }
.blk { display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink); font-size: var(--fs-small); font-weight: 700; line-height: 1.2; }
.blk--base { background: #b9d3c7; color: var(--accent-dark); }
.cbar__lab { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--muted); }
.compare .note { text-align: center; margin-top: var(--sp-2); }
@media (max-width: 720px) {
  .cbar { gap: var(--sp-4); }
  .cbar__col { width: 140px; }
}
/* スマホ：右の棒に文字（＋チャット 1,000円）が収まらず折れていた。
   左の棒は細くし、右を広げ、矢印は省く。 */
@media (max-width: 720px) {
  .compare { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .cbar { gap: var(--sp-2); }
  .cbar::before { content: none; }
  .cbar__col { width: 96px; }
  .cbar__col + .cbar__col { width: auto; flex: 1; }
  .blk { white-space: nowrap; }
}
/* スマホ：横に並べると幅が揃わず（D12）、ラベルが折れて行もずれた（D16）。縦に積んで横幅いっぱいにする。 */
@media (max-width: 720px) {
  .cbar { flex-direction: column; gap: var(--sp-4); }
  .cbar__col, .cbar__col + .cbar__col { width: 100%; flex: none; }
  .cbar__stack { min-height: 0; }
}

/* ── ご紹介で1か月無料 2026-09-16 ───────────── */
.refer__lead { text-align: center; max-width: 34em; margin: var(--sp-2) auto var(--sp-6); }
.refer__note { max-width: 40em; margin: var(--sp-4) auto 0; text-align: center; }
.refer__cta { text-align: center; margin-top: var(--sp-4); }
/* 紹介：絵＋手順の2段組み（3カラムの区画が続く単調さを避ける） */
.refer { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-8); align-items: center; max-width: 880px; margin: 0 auto; }
.refer__art { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.refer__art svg { display: block; width: 100%; height: auto; }
.refer__steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.refer__steps li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.refer__no { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-small); }
.refer__steps h3 { font-size: var(--fs-h3); margin-bottom: 2px; }
.refer__steps p { font-size: var(--fs-body); color: var(--ink-soft); }
@media (max-width: 860px) { .refer { grid-template-columns: 1fr; gap: var(--sp-4); } .refer__art { max-width: 300px; margin: 0 auto; } }

/* 棒の高さは変数で持つ（スマホで伸ばせるようにするため） */
.blk { height: var(--h); }
/* スマホでも横に並べる。縦積みをやめ、棒を1.7倍に伸ばして文字を2行で収める。
   幅は左右そろえ（D12）、2本の高さは flex で自動的にそろうのでラベルの行もずれない（D16）。 */
@media (max-width: 720px) {
  .cbar { flex-direction: row; gap: var(--sp-2); align-items: stretch; }
  .cbar__col, .cbar__col + .cbar__col { width: auto; flex: 1 1 0; min-width: 0; }
  .cbar__stack { min-height: 0; }
  .blk { height: calc(var(--h) * 1.7); white-space: normal; line-height: 1.3; padding: 0 4px; }
}

/* ══════════════════════════════════════════════════════════════
   スマホ：横スワイプの区画（2026-09-17）

   なぜ要ったか：スマホでページ全体が 16,000px あった（**画面19.7枚ぶん**）。
   下まで見る人はいない。縦に積まれていた「料金3枚」「選ばれる理由3枚」
   「お困りごと4枚」「できること6枚」「はじめるまで6段」を、**横に並べて
   スワイプで見る**形に変えた。

   決めごと：
   ・PC（721px以上）では今までどおりの並び。**触るのはスマホだけ**
   ・カードは画面の 84% ＝ **次の1枚が必ず見切れる**。「横にもある」は
     見出しや矢印では伝わらない。見切れているものだけが伝わる
   ・JSが動かなくても横スクロールで全部読める（ドットと見出しはJSの飾り）
   ・`.wrap` の左右余白を打ち消して端まで流す。**画面より広くはならない**
     （site-check の「横にはみ出していない」が落ちるため）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .swipe {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;      /* grid で組まれていた区画を上書き */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-2);
    /* 端まで流す：外側の余白を打ち消し、同じ幅を内側の余白で戻す */
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
    padding-bottom: var(--sp-2);
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * {
    flex: 0 0 84%;
    scroll-snap-align: center;
    min-width: 0;
  }
  /* 最後の1枚も中央まで来られるように、右端に余白の板を置く */
  .swipe::after { content: ''; flex: 0 0 1px; }

  /* カードとして見えるように、枠の無いものには枠を足す */
  .pain-list.swipe > .pain,
  .feature-grid.swipe > .feature,
  .steps.swipe > .step {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-3);
  }
  .steps.swipe { counter-reset: step; }
  .steps.swipe > .step::before { position: static; display: inline-flex; margin-bottom: var(--sp-1); }
  .steps.swipe > .step { padding-left: var(--sp-3); }

  /* 何枚目かを示す点 */
  .swipe-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: var(--sp-2);
  }
  .swipe-dots button {
    width: 44px; height: 32px;            /* 指で押せる大きさ（実際の点は中の span） */
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .swipe-dots span {
    display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--line); transition: background .2s, transform .2s;
  }
  .swipe-dots button[aria-current="true"] span { background: var(--accent); transform: scale(1.5); }

  .swipe-hint {
    text-align: center; font-size: var(--fs-small); color: var(--muted);
    margin-top: calc(var(--sp-1) * -1);
  }
  .swipe-hint::before { content: '← '; }
  .swipe-hint::after  { content: ' →'; }
}
/* PCでは点も案内も出さない */
@media (min-width: 721px) { .swipe-dots, .swipe-hint { display: none; } }

/* ── スクロールで浮かび上がる（2026-09-17）──────────
   区画が10個あるので、一度に全部見せると「長い一枚の紙」に見える。
   入ってきたものだけを起こすと、読む場所が1つに絞られる。
   ⚠ JSが動かないときのために、既定は「見えている」。JS が付けた
   `.reveal` にだけ効かせる（出ないまま消える事故を防ぐ）。 */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .55s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ── スマホの縦を詰める（2026-09-17）───────────────────────
   区画が10あるので、上下の余白だけで 1,280px（画面1.6枚ぶん）使っていた。 */
@media (max-width: 720px) {
  section { padding: 44px 0; }

  /* 10の機能：アイコンを上に置くと1枚174pxになる。横に並べて90pxに。
     2列×5行＝871px → 2列×5行＝およそ450px。読む順も左→右で自然になる。 */
  .fn10__grid li {
    flex-direction: row;
    flex-wrap: wrap;            /* ⚠ 折り返しを許さないと、下の em が幅100%を取りに行って
                                   見出しが縦1文字ずつに潰れる（実測316px になった） */
    align-items: center;
    text-align: left;
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .fn10__grid .ic { flex: 0 0 auto; width: 22px; height: 22px; }
  .fn10__grid li > span { flex: 1 1 auto; }
  .fn10__grid em { flex-basis: 100%; margin-left: 32px; }  /* アイコンの幅＋間 */

  /* 料金：機能の一覧は4つまで出して、残りは押して開く（下のスクリプトが付ける）。
     1枚1,335px＝画面1.6枚ぶんあり、3枚目までたどり着けなかった。 */
  .plan ul.is-folded li:nth-child(n + 5) { display: none; }
  .plan .more {
    background: none; border: 0; padding: 10px 0; margin: -8px 0 var(--sp-2);
    color: var(--accent); font: inherit; font-size: var(--fs-small); font-weight: 700;
    cursor: pointer; text-align: left; min-height: 44px;
  }
  .plan .more::after { content: ' ▾'; }
  .plan .more[aria-expanded="true"]::after { content: ' ▴'; }
}

/* 申し込みボタンが開かないとき用の宛先。**リンクにしない**
   （押せる高さが18pxで検査に落ちた。押すところはボタン1つに絞る）。 */
.mail-plain { font-weight: 700; letter-spacing: .02em; user-select: all; }
/* 1行が45字を超えないよう、この段だけ幅を抑える（本文の行長の決まり）。 */
.mail-fallback { max-width: 32em; margin-inline: auto; }