/* サロン+ サービスサイト
 *
 * 予約アプリ本体（public/）とは別。こちらは「売るための1枚」。
 * ロゴは桃〜藤のグラデーション。画素を数えて決めた2色：
 *   桃 #f0b3b4 ／ 藤 #ccb3e4。
 * どちらも淡く、白文字を乗せると読めない（比 1.78／1.89。基準は 4.5）。
 *
 * 2026-10-05：C2b案へ更新（design/color-2026-10/README.md 参照）。
 *   ・文字・線 … ロゴの文字のチャコール実測から明度だけを落とした #33323e（生成り地 12.12）
 *   ・押す面 … ロゴのグラデーションをΔL-7.6pt落としたもの（#faab96→#ea9294→#ccb3e4）。
 *     面の上の文字は白ではなく墨（#22272a）
 *   ・ロゴの淡い2色（--brand-rose/--brand-lav） … 飾りだけ。1ミリも動かしていない
 * **淡い色の上に白文字を置かない。**
 *
 * 2026-10-01：紫をやめた。オーナー様の指示「この濃い紫をサイトの中にも
 * 予約アプリにも使わないで。ロゴの色によせたピンクでグラデーションに」。
 * 色の入れ替えは tools/site-pink.mjs が持っている（--check で残りを数えられる）。
 *
 * トップの地は、いただいた背景画像（/assets/bg-top.webp?v=cfcd4278）。
 * 規約・個人情報のページにも、同じ絵を上だけに敷いて空気を揃えている。
 */

:root {
  --bg:        #fdfaf8;          /* 背景画像のいちばん淡いところ */
  --bg-alt:    #faf2f6;          /* 区画を分ける薄い面①（ローズ寄り） */
  --bg-lav:    #fdf3f5;          /* 区画を分ける薄い面②（桃寄り） */
  --paper:     #ffffff;
  --ink:       #22272a;
  --ink-soft:  #565058;
  --muted:     #6b6065;
  --line:      #eee0e3;
  /* 差し色（2026-10-05 C2b案）。ロゴの文字のチャコール実測（#54535e）から明度だけを落とした。
     詳細・コントラスト実測は design/color-2026-10/README.md（C2b章）参照。 */
  --accent:        #33323e;   /* 生成り地 12.12 */
  --accent-dark:   #201f28;   /* 生成り地 15.69 */
  --accent-tint:   #fff3f2;
  --accent-ink:    #22272a;   /* 押す面の上の文字は墨（面が淡いため白文字は読めない） */
  --accent-2:      #33323e;
  --accent-2-tint: #f6eef3;
  /* ロゴそのものの2色。**飾りにだけ使う**（C2bでも1ミリも動かしていない＝ロゴ実測そのまま） */
  --brand-lav:  #ccb3e4;
  --brand-rose: #f0b3b4;
  --brand-grad: linear-gradient(135deg, #fcc9bb 0%, #f0b3b4 52%, #ccb3e4 100%);
  /* 押す面＝ロゴのグラデーションを ΔL -7.6pt だけ落としたもの（墨文字で最低6.06） */
  --accent-grad: linear-gradient(135deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
  --shadow-lift: 0 14px 32px rgba(201, 118, 122, .46);

  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-16: 128px;
  /* ⚠ --sp-5 と --sp-10 は、定義せずに6箇所・2箇所で使われていた。
     定義の無い変数を書くと**宣言ごと無かったことになる**ので、
     margin: var(--sp-5) auto 0 は margin ごと消え、中央寄せが効いていなかった
     （「はじめかた」の一覧が中心から244pxずれていた）。
     残りは tools/css-vars.mjs が数える。 */

  /* 文字の大きさ。7段だけ。
     実測（改修前）：PCで13種類・スマホで11種類がベタ書きで散っていた。
     種類が多いほど「なんとなく揃っていない」に見える。
     clamp で幅に応じて連続的に変え、画面幅ごとの書き直しをやめる
     （予約アプリの tokens.css と同じ考え方）。
     下限は14px。予約アプリ側で決めた「13px以下を使わない」に揃える
     （40〜60代のオーナー様がスマホで読む）。 */
  /* ★ 2026-10-03：PCとスマホで釣り合いが合っていなかった。
     本文が両方とも16pxのまま、見出しだけ大きくなるので、見出し／本文の比が
     スマホ1.75倍に対しPC2.25倍。PCでは見出しだけ浮いて本文が頼りなく見えた。
     本文と注記を少し大きくし、見出しの上限を下げて、比を揃えた。 */
  --fs-h1:    clamp(32px, 3.6vw + 17.9px, 50px);
  --fs-h2:    clamp(28px, 0.9vw + 24.5px, 34px);
  --fs-price: clamp(34px, 2vw + 26px, 40px);
  /* ★ 2026-10-03：ここだけ固定の20pxだった。本文が16→18と伸びるのに
     小見出しが伸びず、PCでは見出し÷本文が1.11倍 ── 見出しに見えていなかった。
     幅に合わせて 20→24px に伸ばす（スマホ1.25倍／PC1.33倍）。 */
  --fs-h3:    clamp(20px, 0.45vw + 18.2px, 24px);
  --fs-lead:  clamp(17px, 0.5vw + 15px, 19px);
  --fs-body:  clamp(16px, 0.3vw + 14.8px, 18px);
  /* ★ 2026-09-30：注記の下限を 14px → 15px。小さい字が多いと読みにくく、
     「大事なことが小さく書いてある」と不安にさせる。1段だけ上げる */
  --fs-small: clamp(15px, 0.2vw + 14.2px, 16px);
  --radius: 10px;
  --shadow: 0 4px 24px rgba(34, 39, 42, .07);

  /* 動き。長さ5段・曲線2本だけ（2026-09-22）。
     棚卸し（改修前）：.12s / .15s / .18s / .2s / .24s / .55s の6種類が、
     ease-out と ease の2つの曲線でばらばらに書かれていた。
     ・press  押した瞬間の返事（短いほど「効いた」と感じる）
     ・hover  色・影の切り替え
     ・enter  小さなものの出入り（FAQの答え・チップ・固定バー）
     ・reveal スクロールで区画が起き上がる
     ・loop   絵のゆっくりした繰り返し（目で追わせない速さ）
     曲線は「出だしが速く、着地がやわらかい」ものを1本。行って戻る繰り返しだけ in-out。
     ⚠ 動きを減らす設定では、ファイル末尾の @media でまとめて止める。 */
  --dur-press:  120ms;
  --dur-hover:  200ms;
  --dur-enter:  320ms;
  --dur-reveal: 640ms;
  --dur-loop:   6s;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --rise: 16px;          /* 起き上がる距離（web-design-quality：16〜24px） */
  --stagger: 70ms;       /* 並ぶものを順に出すときの間隔 */
  --shadow-lift: 0 10px 28px rgba(120, 58, 78, .16);   /* 触れたときに浮く影（プラムの影） */
}

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

html {
  scroll-behavior: smooth;
  /* 上の帯（64px）が貼り付いているので、ページ内リンクで飛んだとき見出しが隠れる。
     その分だけ手前で止める（2026-09-25） */
  scroll-padding-top: 80px;
}

body {
  background: var(--bg);
  color: var(--ink);

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

/* 2026-10-27：Safari（iPhone・Mac）には auto-phrase が無く、語の途中で折れていた（トップだけで 390 で102か所）。
   assets/ja-wrap.js（正は public/assets/ja-wrap.js?v=823a51d6・tools/site-nav.mjs が写して全ページに入れる）が、
   Safari の時だけ文節の切れ目に <wbr> を入れた塊に .jw を付け、keep-all で <wbr> の所でだけ折る。Chromium では .jw は付かない。
   1かたまりが行より長いときは overflow-wrap: anywhere で折れる（はみ出さない）。
   入れ子の別の塊は元に戻す（keep-all が引き継がれると、<wbr> の無い文が折れなくなる）。管理画面の style.css と同じ形 */
.jw :where(div, p, ul, ol, li, dl, dt, dd, table, thead, tbody, tr, td, th, caption, section, article, aside,
  form, fieldset, legend, label, details, summary, h1, h2, h3, h4, h5, h6, figcaption,
  textarea, input, select, button, pre, code) { word-break: normal; }
.jw { word-break: keep-all; overflow-wrap: anywhere; }

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 {  } }

/* 見出しは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); }

/* ── ヘッダー ───────────────────────────────── */
/* 規約・個人情報のページ（2026-09-25）。
   トップと同じ絵を**上だけ**に敷き、地の色へ溶かす。
   下層だけ真っ白だと、同じサービスの続きに見えない。 */
body:has(.doc) {
  background-image:
    linear-gradient(180deg, rgba(253, 250, 248, 0) 0, var(--bg) 360px),
    url(/assets/bg-top.webp?v=cfcd4278);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 360px, 100% 360px;
  background-position: top center, top center;
}
/* :has が効かない環境のための保険。同じ絵を body に直接指定する */
body.page-doc {
  background-image:
    linear-gradient(180deg, rgba(253, 250, 248, 0) 0, var(--bg) 360px),
    url(/assets/bg-top.webp?v=cfcd4278);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 360px, 100% 360px;
  background-position: top center, top center;
}
.doc { background: transparent; }

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(253, 250, 248, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
    justify-content: space-between;
  height: 64px;
}
/* ロゴ（2026-09-21）。マーク＋文字の画像。背景は透過済み（tools/logo-build.mjs）。
   ⚠ 文字が濃いグレーなので、暗い地には置かない（沈んで読めない）。 */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 40px; height: 40px; display: block; }
.logo__word { height: 28px; width: auto; display: block; }
@media (max-width: 720px) {
  .logo__mark { width: 34px; height: 34px; }
  .logo__word { height: 23px; }
}
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-brand img { width: 28px; height: 28px; display: block; }

/* ── ファーストビュー ─────────────────────────── */
.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; 
  /* 面は下の .btn（矢印のところ）でグラデーションにしている（C2b：ロゴの桃〜藤をΔL-7.6pt落としたもの）。
     ここは単色の受け皿。グラデーションが効かないときでも墨文字が読める。
     ⚠ var(--accent) は文字・線の色（C2bで濃いチャコール）に変わったため、ここでは使わない。 */
  background-color: #ea9294; color: var(--accent-ink);
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(201, 118, 122, .40);

}
.btn:hover { background-color: #e07f82; }
/* 触れたら少し浮き、押したら沈む。色だけだと「効いたのか」が分からない。
   浮くのはマウスのときだけ（指で触ると、離したあとも浮いたまま残るため）。 */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
/* ヘッダーに置く小さいほう。指の最小44pxは保つ */
/* ヘッダーの小さいボタンは矢印を出さない（幅が足りず文字に重なる） */
.btn--sm { background-image: none; background-color: #ea9294; color: var(--accent-ink); border: none; min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-body); }
.btn--ghost {
  background: transparent; color: var(--accent); border-color: #948f98;
}
.btn--ghost:hover { background: var(--accent-tint); border-color: #948f98; }

/* キーボードで操作したときの印。
   これまでブラウザ既定（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段変える区画。区画を数えやすいよう、クラス1つで表す */
/* 薄い面は2色を交互に。同じ面が続くと、縦に長いページが平らに見える（2026-09-25） */
.tinted { background: var(--bg-alt); }
.tinted--lav { background: var(--bg-lav); }

/* ── 図①：ビフォーアフター（新設 2026-10-05。2026-10-06 から区画の主役）───────────
   「形はパーツから、値はトークンから」（ASSEMBLY_SPEC第1条）。
   カードの形は .reason（下の「3つの理由」）と同じ発想（paper地・line枠・radius・sp-4padding）を流用。
   .cbar（他社比較・積み上げ棒）とは見た目をそろえない：役目が違う図を同じ型で描くと
   どちらも記憶に残らなくなる（ASSEMBLY_SPEC第3条）。 */
.unify__h { margin-bottom: var(--sp-1); }   /* 2026-10-06：h3 から h2 へ。大きさは h2 の既定（--fs-h2）に任せる */
.unify__lead { color: var(--ink-soft); max-width: 34em; margin-inline: auto; text-align: center; margin-bottom: var(--sp-3); }
.unify {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--sp-3);
  max-width: 920px; margin-inline: auto;
}
@media (max-width: 720px) {
  .unify { grid-template-columns: 1fr; gap: var(--sp-2); }
  .unify__arrow { transform: rotate(90deg); justify-self: center; }
}
.unify__card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); height: 100%;
}
.unify__card--after { border-color: var(--accent); }
.unify__arrow { color: var(--muted); display: flex; align-self: center; }
@media (min-width: 721px) { .unify__arrow { align-self: stretch; } .unify__arrow svg { margin: auto; } }
/* 2026-10-05（design-audit D16）：見出し（.unify__lab）・2段目（.unify__rows/.unify__box）・
   まとめ行の余白が、左右で少しずつ違い、合計で50pxのずれになっていた。
   3つとも高さ・余白を数値で揃える（min-heightの実測値は node デバッグで計測）。 */
.unify__arrow svg { width: 28px; height: 28px; }
.unify__lab { font-weight: 700; margin-bottom: var(--sp-2); display: flex; align-items: baseline; gap: 6px; min-height: 28px; }
.unify__lab span { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.unify__lab--logo img { height: 18px; width: auto; display: block; }
.unify__rows { display: grid; gap: var(--sp-1); list-style: none; }
.unify__rows li { display: flex; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.unify__rows li b { font-weight: 700; white-space: nowrap; }
@media (min-width: 721px) {
  .unify__rows, .unify__box { min-height: 130px; }
}
.unify__sum { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-soft); }
.unify__box {
  background: var(--accent-tint); border-radius: var(--radius); padding: var(--sp-2);
  text-align: center; font-weight: 700; line-height: 1.6;
}
.unify__price { margin-top: var(--sp-3); font-weight: 700; color: var(--accent-dark); font-family: var(--font-serif); }
.unify__note { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }
.unify__src { text-align: center; margin-top: var(--sp-3); max-width: 42em; margin-inline: auto; }


/* ── 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); }

/* ── 料金 ───────────────────────────────────── */
/* 3枚の高さを揃え、解約条件から下を底にそろえる（D16）。 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: stretch; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* カードの定義はここ1箇所（もとは3箇所に分かれ、後ろの2つが前を打ち消していた）。
   上の余白が --sp-3 なのは、札（おすすめ）を枠の上辺に浮かせているため。 */
.plan {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column;
}
/* 札は枠の上辺に浮かせ、行を占めないようにする（3枚の構成を揃えるため・D17） */
.plan-tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
  background: #c63a5e; color: #ffffff;   /* オーナー様が絵を見て決めた値。白文字 5.04 */
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em;
  padding: 3px 12px; border-radius: 100px;
}

/* おすすめの1枚（2026-09-22）
   ・縁：ロゴのグラデ（プラム→ピンク→ラベンダー）が、ゆっくり一周する（14秒）
   ・光：画面に入ったとき一度だけ、淡い光が斜めに走る
   ・影：ほかの2枚より一段浮かせる
   縁は背景2枚重ね（内側＝白、外側＝グラデ）で描く。枠線の太さは2pxのまま変えない。
   ⚠ グラデの上に文字は乗せない（--brand-grad の決まり）。札の地は #c63a5e のまま。 */
.plan--pick {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(115deg, #ea9294 0%, var(--brand-rose) 30%, var(--brand-lav) 62%, #ea9294 100%) 0 0 / 200% 100% border-box;
  box-shadow: var(--shadow-lift);
  isolation: isolate;               /* 光（::after）をカードの地と文字のあいだに置くため */
  animation: pick-edge 14s linear infinite;
}
/* 幅200%の帯を、ちょうど1枚ぶん（-100%×2）ずらして一周。両端が同じ桃（#ea9294）なので継ぎ目は出ない */
@keyframes pick-edge { to { background-position: 0 0, 200% 0; } }
.plan--pick::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(239, 179, 195, .45) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;
}
.plan--pick.is-lit::after { animation: pick-shine 1.4s var(--ease-out) 1 both; }
@keyframes pick-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* 札は、光と同じ瞬間に一度だけ弾む */
.plan--pick.is-lit .plan-tag { animation: tag-pop var(--dur-reveal) var(--ease-out) .2s 1 both; }
@keyframes tag-pop {
  from { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
.plan-name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .04em; }
/* 一言説明は1行のものと2行のものがある。3枚を横に並べるので、
   先に2行ぶん取っておかないと、下の金額と機能一覧がずれる（D16） */
.plan-for { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--sp-3);
  line-height: 1.6; min-height: calc(1.6em * 2); }
.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); }

/* ★ 2026-09-30：金額に添える小さな注記（（税込）／円／月）は、明朝をやめる。
   ここだけのために明朝400（約230KB）を読んでいた。数字そのものは明朝のまま。
   注記が本文と同じ書体になるぶん、数字のほうが際立つ。 */
.hero-v__yen small,
.plan-price small,
.cbar__total small,
.cbar__total--big small {
  font-family: var(--font-sans);
  font-weight: 400;
}
.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;  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;  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: #ffffff;
  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; }

/* ── よくあるご質問 ─────────────────────────── */
/* 定義はファイル後半の「よくあるご質問（2026-09-22 作り直し）」に1つにまとめた。 */

/* ── 最後のひと押し ─────────────────────────── */
.closing {
  position: relative; overflow: hidden;
  /* 地はサロンの絵（Higgsfield で生成・2026-09-25）。役目は「空気」だけなので、
     文字が絵に頼らず読めるよう、濃い桃いろの幕を一枚かける（白文字とのコントラストは7以上） */
  /* 2026-09-29：地を動画にした（VIDEO_RUNBOOK 型A・10秒・音なし）。3層に分ける。
       .closing の background = 動画の1フレーム目と同じ静止画。動画を読まない人（スマホ・
                                「動きを減らす」設定・読み込み前）が見るのはこれ
       .closing__bg          = 動画。**申し込みフォームの背後では動かさない**ため、
                                区画の上部だけに敷き、下端を溶かして消す
       .closing__veil        = 濃い桃いろの幕。静止画にも動画にも同じ1枚がかかるので、
                                どちらで見ても白文字のコントラストは7以上のまま */
  background: url(/assets/video/closing-amb-poster.webp?v=a28c5ad7) center / cover no-repeat;
   text-align: center;
}
.closing__bg {
  position: absolute; inset: 0 0 auto 0; z-index: 0; overflow: hidden;
  height: clamp(320px, 52vw, 640px); pointer-events: none;
}
.closing__v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  /* 読み終わるまでは下の静止画のまま。差し替わる瞬間を見せない */
  opacity: 0; transition: opacity .9s ease;
  /* 下端は溶かす。静止画と同じ絵なので境目は見えない */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.closing__v.is-on { opacity: 1; }
.closing__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* このルールは現在未使用（背景は closing::before/::after のradial-gradientが担う）。 */

}
/* 桃いろの光を、隅にひとつまみだけ置く（文字の上には重ねない）。
   2026-10-01：藤いろだったほうも桃に替えた（紫を使わない） */
.closing::before {
  content: ""; position: absolute; z-index: 2; inset: -20% -10% auto auto; width: 620px; height: 620px;

  pointer-events: none;
}
.closing::after {
  content: ""; position: absolute; z-index: 2; inset: auto auto -30% -12%; width: 560px; height: 560px;

  pointer-events: none;
}
.closing .wrap { position: relative; z-index: 3; }
.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 {  }

/* ── フッター ───────────────────────────────── */
.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); }

/* ── 下の固定ボタン（スマホ＝横幅いっぱいの帯／パソコン＝右下に浮かぶボタン） ──
   2026-10-25 オーナー様のご指示：「PCでLPを開いた時に、スマホ表示のように下にも、相談するボタンを常に表示する」。
   それまではスマホ（〜720px）だけで、721px からは出していなかった。
   ・パソコンは帯にしない。横1280pxの帯はボタン1つに対して面が広すぎ、本文の下端をまるごと塞ぐ。
     右下に浮かぶボタン1つにする（上のバーの「相談する」と同じ右側で、読む列の真ん中にかからない）
   ・出し引きはスマホと同じ（下の JS は1つ）。最初の画面（すぐ上に同じボタン）と、締めの公式LINEの口
     （パソコンでは QR つき）が見えている間は引っ込める。だから QR とこのボタンが同じ画面に並ばない
   ・引っ込めている間は visibility も落とす。見えないのに Tab で止まる場所を作らない
   ・is-hidden を付けるのは JS 側だけなので、JS が動かなければ出たまま
   ・動きを減らす設定では、ファイル末尾の一括指定で滑りが止まる（出る・消えるだけになる） */
.fixed-cta {
  position: fixed; z-index: 30;
  right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  transition: transform var(--dur-enter) var(--ease-out), opacity var(--dur-enter) var(--ease-out),
              visibility var(--dur-enter);
}
.fixed-cta .btn { padding: 0 var(--sp-5); }
.fixed-cta.is-hidden {
  transform: translateY(calc(100% + var(--sp-5)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 固定ボタンの下に、フッターの最後の行が隠れないように（ボタン52px＋下の24px＋ゆとり20px）。
   固定ボタンがあるのはトップだけなので、ほかのページの下は空けない */
@media (min-width: 721px) {
  body:has(> .fixed-cta) { padding-bottom: var(--sp-12); }
}
@media (max-width: 720px) {
  .fixed-cta {
    left: 0; right: 0; bottom: 0;
    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%; padding: 0 var(--sp-4); }
  .fixed-cta.is-hidden { transform: translateY(110%); }
  /* 固定バーの下に本文が隠れないように */
  body { padding-bottom: 84px; }
}

/* 動きを減らす設定は、ファイル末尾の1箇所でまとめて扱う */

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

/* （①の max-width は、後半の「よくあるご質問」の定義に畳んだ） */

/* フッターのリンクが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枚のカードで金額の高さが揃っていなかった件は、札を枠の上辺に浮かせて解消した
 *    （.plan-tag の定義に畳んだ。帯の高さぶんを空けておく ::before は不要になり削除）。 */

/* ② 箇条書きが flex なので、<strong> と後ろの文字が別々の項目と見なされ、
 *    「お店のホームページ　の制作」のように隙間が空いていた。
 *    間隔はアイコンの右余白で作り、文字どうしはくっつける。 */
.plan li { gap: 0; }
.plan li > svg { margin-right: 10px; }
.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文字にならないよう折り返しを調整する。 */
/* ★ 2026-10-11：text-wrap: pretty をやめた。
   **Chromium は最後の数行の孤立だけを直すが、Safari（WebKit）は段落全体の行の長さを
   ならす。** 日本語の左揃えだと行が全体に短くなり、右に大きな余白が空いて
   文字の塊が左に寄って見える（2026-10-11 オーナー様が iPhone でご指摘）。
   エンジンで振る舞いが変わる指定に頼らず、**切れ目は <br> で自分で決める**。
   孤立行は design-audit（D4・D16）と ja-wrap（W1）が数える。
   数えかた：node tools/ja-wrap.mjs --browser=webkit ／ --browser=chromium の両方 */
/* p, li, summary { text-wrap: pretty; }  ← 外した理由は上 */

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

/* ── ファーストビュー 2026-09-25 ────────────────
 * 地はいただいた背景画像（ロゴと同じ淡い2色のにじみ）。
 * 以前は暗幕をかけた濃い紫だったが、ロゴとサロンの空気に対して重すぎた。
 * 明るい地なので、文字は墨のまま。読みやすさは白の薄幕で作る（グラデは使わない）。 */
.hero-v {
  position: relative; overflow: hidden; color: var(--ink);

  background: var(--bg) url(/assets/bg-top.webp?v=cfcd4278) center / cover no-repeat;
}
@media (max-width: 720px) {
  .hero-v { 
    /* 縦長では真ん中（いちばん淡いところ）だけが映るので、色のある左上を見せる */
     }
}
/* 白の薄幕。絵のにじみは残しつつ、文字が乗る明るさまで持ち上げる */
.hero-v::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .46) 38%, rgba(255, 255, 255, .62) 100%); }
.hero-v .wrap { position: relative; z-index: 2; }
.hero-v .nb { display: inline-block; }          /* 文節の途中で折れないように */
.hero-v__price {  display: flex; flex-wrap: wrap;  gap: var(--sp-1) var(--sp-2); }
.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__sub { font-size: var(--fs-small); color: var(--ink-soft); }
.hero-v__cta {  display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* スマホでは主ボタンを幅いっぱいに。親指で押しやすく、いちばん目立つ場所にする（2026-09-21）。
   内容の幅のままだと、390pxの画面で半分ほどしか占めず、押す場所として弱かった。 */
@media (max-width: 720px) {
  .hero-v__cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}
.hero-v .btn { background-color: #ea9294; color: var(--accent-ink); }
.hero-v .btn:hover { background-color: #e07f82; }
.hero-v .btn--ghost { background: rgba(255, 255, 255, .7); color: var(--accent); border-color: #948f98; }
.hero-v .btn--ghost:hover { background: var(--paper); border-color: #948f98; }
.hero-v .btn-note { color: var(--muted); }

/* ── 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; }
/* 2026-10-03：5列（スマホで2列）のカードをやめ、スマホのホーム画面のような
   3列の絵にした。枠を描かず、丸い四角の絵そのものを単位にする。
   並びと大きさは、このファイルのいちばん下（作り直しの章）で決めている。 */
.fn10__grid .ic {
  width: 44px; height: 44px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* ⚠ 2026-10-16：<use> で差し込んだ <symbol> の中身は .ic の子孫にならないので「.ic .f」は届かない（点が輪になり「888」に見えていた）。
   塗りは index.html の絵の束に属性で書いた（fill="currentColor" stroke="none"）。この行は念のため、届く書き方にしてある。 */
symbol .f { fill: currentColor; stroke: none; }

/* 他社の積み上げ例（選ばれる理由の下）。カードから出して1つの枠にした */
.compare {
   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);
  margin-top: var(--sp-8);
  max-width: 1032px;
}
.compare__lead {  color: var(--ink-soft); max-width: 34em; margin-inline: auto; font-size: var(--fs-h3); text-align: center; }
/* 料金カード 2026-09-15：
   札（おすすめ）の位置と3枚の高さ揃えは、上の「料金」の定義に畳んだ（2026-09-22）。
   機能の行数はプランで違うので、解約条件から下を底にそろえる。
   プロの解約条件は2行、他は1行なので、2行ぶんの高さを確保して次の行の位置を合わせる（D16）。 */
.plan > ul + .plan-caveat { margin-top: auto; min-height: calc(var(--fs-small) * 1.8 * 2); }
.fn10 .nb { display: inline-block; }
/* ボタンにも margin-top:auto が付いていて、余白が「解約条件の上」と「ボタンの上」に半分ずつ配られ、
   カードごとにずれていた。余白は解約条件の上だけに集める。 */
.plan > ul + .plan-caveat ~ .btn { margin-top: 0; }

/* ── トップの「2台のスマホ」動画 2026-09-15 ─────
 * お客様の予約からオーナー様の管理までを1本で見せる。画面の文字が読める大きさにするため、
 * 横に並べず、文字の下に横幅いっぱいで置く。 */
.demo2 { margin-top: var(--sp-8); }
/* 2026-10-05：動画の説明（UX監査 Q2-8）。値は既存トークンのみ。 */
/* 2026-10-05：FVの背景写真（bg-top.webp）の暗い部分に乗ると比が足りなくなった（site-contrast NG）。
   .demo2__play と同じ不透明の白地を敷いて、写真の濃淡に関係なく読めるようにする。 */
.demo2__cap {
  display: block; width: max-content; max-width: calc(100% - 2 * var(--sp-3)); margin-inline: auto;
  margin-top: var(--sp-2); text-align: center; font-size: var(--fs-small); color: var(--ink);
  background: var(--paper); border-radius: 999px; padding: 6px 16px;
}
/* ★ 2026-10-06：スマホでは説明文を出さない（オーナー様の指示）。
   読み上げには <video aria-label="サロン+ の紹介動画。音は出ません"> が残るので情報は失われない。
   .demo2__cap の定義はこの1箇所だけ（grep 済み）。ここに足す。 */
@media (max-width: 720px) { .demo2__cap { display: none; } }

/* ★ 2026-09-30：CSSの背景に**古い動画の1枚目**を敷いていた。
   29秒の紹介動画（16:9）に差し替えたあとも残っていて、
   スマホでは下に別の絵が透けて見えていた。poster の指定だけで足りる。 */
.demo2__v {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) * 1.6);
  background: var(--accent-dark);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  object-fit: cover;
}
.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);
}
/* 2026-09-25：地が明るくなったので、生成り色では読めない。札の形にして大きくする */
.demo2__steps li { font-size: var(--fs-body); font-weight: 400; color: var(--ink); display: flex; align-items: center; gap: var(--sp-1);
  background: rgba(255, 255, 255, .82); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; }
.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__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__cta { margin-top: var(--sp-4); }
  .demo2 { margin-top: var(--sp-6); }
}

/* ★ 2026-09-29：ノートパソコンは縦が短い（768〜800px が多い）。
   上の余白が64pxでも、申し込みのボタンが最初の画面から押し出されていた
   （1366×768 で12px・1280×800 で44px）。背の低い画面だけ、さらに詰める。
   ⚠ この塊は、上の @media (min-width: 721px) より**後ろ**に置くこと。
      前に置くと、同じ .hero-v を書いているあちらに負けて1行も効かない。 */
@media (min-width: 721px) and (max-height: 830px) {
  .hero-v { padding: var(--sp-3) 0 var(--sp-8); }
  .hero-v__cta { margin-top: var(--sp-3); }
}
.fn10__note { text-align: center; margin-top: var(--sp-1); }
/* 札のあとに置く注意書き。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; }
/* ★ 2026-10-06：スマホは横スワイプで1枚ずつしか見えないので、
   色は**いま見えている札**に乗せる（料金の .plan.is-center と同じ考え方・オーナー様の指示）。
   PC（≥721px）は3枚同時に見えるので据え置き。 */
@media (max-width: 720px) {
  .reasons.swipe .reason.is-center .reason__art {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
  }
}
.reason__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.reason--v h3 { margin-bottom: var(--sp-1); }

/* 他社の積み上げ例：棒の図
   ⚠ 2026-10-05 統合：.compare/.compare__lead の空の殻はここに無くなった（本体は639/643行へ集約）。
   .cbar__col は現行HTML・JSに存在しないため削除（grep 0件・design/css-consolidate/LOG.md 参照）。
   .cbar / .cbar__stack / .cbar__lab / .cbar__total 系は、離れた場所にあった同一セレクタの重複を
   ここと各本体（.cbar__lab→1957行付近、.cbar__total→下の方、他）へ1本化した。 */
.cbar {
  justify-content: center; gap: var(--sp-8); position: relative;
  align-items: end;
  display: block; grid-template-columns: none; grid-template-rows: none; margin-top: var(--sp-4);
}
.cbar::before {
   position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  font-size: var(--fs-h3); color: var(--muted);
}
.cbar__stack {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  margin-top: var(--sp-1); min-height: 200px;
  flex: 1 1 auto; grid-row: 2;
}
.compare .note { text-align: center; margin-top: var(--sp-2); font-size: var(--fs-small); max-width: 34em; margin-inline: auto; }
/* 棒の高さは変数で持つ（スマホで伸ばせるようにするため） */
/* スマホ（2026-09-22 に4箇所の上書きを1つに畳んだ。最後に効いていた値だけを残している）
   ・横に並べたまま、2本の幅をそろえる（D12）。高さは flex でそろうのでラベルの行もずれない（D16）
   ・棒を1.7倍に伸ばし、文字を2行で収める（「＋チャット 1,000円」が収まらなかった）
   ・矢印は省く（2本の間が狭く、棒にかぶる） */
@media (max-width: 720px) {
  .cbar { flex-direction: row; gap: var(--sp-2); }
  .cbar::before { content: 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: #ffffff;
  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; } }

/* ══════════════════════════════════════════════════════════════
   スマホ：横スワイプの区画（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 > * {

    scroll-snap-align: center;
    min-width: 0;
  }
  /* 最後の1枚も中央まで来られるように、右端に余白の板を置く */
  .swipe::after { content: ''; flex: 0 0 1px; }
  /* 料金の札（おすすめ）は枠の上辺から半分はみ出している。横スワイプの箱は
     縦のはみ出しを切るので、札の上半分が消えていた。はみ出すぶんだけ上に空ける（2026-09-22） */
  .plans.swipe {  }

  /* カードとして見えるように、枠の無いものには枠を足す */
  .feature-grid.swipe > .feature {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);

  }
  

  /* 何枚目かを示す点 */
  .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-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
  }
  .swipe-dots button[aria-current="true"] span { background: #8a7c62; transform: scale(1.5); }   /* 消えている点との差 3.19／地との差 3.93 */

  .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: ' →'; }
}

/* ── 横スワイプを「カバーフロー」にする（2026-09-25）────────────
   真ん中の1枚だけをはっきり見せ、左右はひと回り小さく・すこし傾け・ぼかして覗かせる。
   参考にしたのは 21st.dev の feature-carousel（3Dカバーフロー）。

   ★ 仕組みは今までどおり **CSSのスクロール**（scroll-snap）。
     JSがしているのは「真ん中からの距離に応じて見た目を変える」ことだけなので、
     JSが動かなくても指でなぞれば全部読める（この決まりは崩さない）。
   ★ 動きを減らす設定では、傾きもぼかしも出さない（ファイル末尾の @media で止める）。 */
@media (max-width: 720px) {
  .swipe { perspective: 1100px; perspective-origin: 50% 45%; }

  /* JSが付ける。JSが動かないときは、今までどおり平らなまま並ぶ */
  /* ★ 2026-09-26：transform と opacity の transition を外した。
     毎コマ JS が値を書き替えるので、そのたびに新しいアニメーションが始まり、
     指の動きから遅れて「カクッ、ヌルッ」と見えていた。
     ぼかしだけは「遠いか近いか」の2択なので、そこにだけ緩みを残す。 */
  .swipe.is-flow > * {
    transition: filter 180ms var(--ease-out);
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  /* 真ん中から遠い札だけ、うっすらぼかす（値は変えない＝描き直しが軽い） */
  .swipe.is-flow > .is-far { filter: blur(1.6px); }
  /* 真ん中以外は、押すとそこまで滑らせる（指が届く） */
  .swipe.is-flow > *:not(.is-center) { cursor: pointer; }

  /* 前後のボタン。点だけだと、片手で押す場所が小さい */
  /* 前後のボタンは左右の端に置く。中央に寄せると、左揃えの本文に対して
     ボタンだけが右へずれて見える（検査D21が拾う） */
  .swipe-nav {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    flex-wrap: wrap; margin-top: var(--sp-2);
  }
  /* 点は前後ボタンのあいだに入れる。6枚あると点だけで264pxになり、画面からはみ出す
     （2026-09-25 に実際にはみ出した）ので、点の側を縮めて折り返さない形にする */
  .swipe-nav .swipe-dots {
    justify-content: center; margin-top: 0;
    flex: 1 1 auto; flex-wrap: nowrap; max-width: 100%; gap: 6px;
  }
  .swipe-nav button {
    width: 46px; height: 46px; flex: none;
    border: 1.5px solid var(--line); border-radius: 50%;
    background: var(--paper); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color var(--dur-hover) var(--ease-out);
  }
  .swipe-nav button:hover { background: var(--accent-tint); }
  .swipe-nav button svg { width: 20px; height: 20px; }
  
  .swipe-count { text-align: center; font-size: var(--fs-small); color: var(--muted); margin-top: var(--sp-1); }
  /* ★ 2026-10-06：料金だけ、この行を出さない（オーナー様の指示）。
     料金は点のすぐ下に3プランの金額（.swipe-pricehint）が並ぶので、
     「3 / 3」は同じことを2回言っている。強み区画では点だけが手がかりなので残す。 */
  #price .swipe-count { display: none; }
  .swipe-pricehint { text-align: center; font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--sp-1); }

  /* ── 料金カードは、上半分を色の帯にする ──────────────
     並んだ3枚のうちどれを見ているかが、色だけで分かる。
     淡い2色の上には白文字を置かない決まりなので、帯は濃い版のグラデにする。 */
  .plans.swipe .plan { border-radius: 22px; overflow: hidden; padding: 0; }
  .plans.swipe .plan-head {
    background: var(--accent-tint);
    color: var(--ink); padding: var(--sp-3) var(--sp-3) var(--sp-2);
  }
  /* ★ 2026-10-06：スマホは横スワイプで1枚ずつしか見えないので、色は
     「おすすめ」ではなく**いま見えている札**に付ける（オーナー様の指示）。
     中央にいない札は .plans.swipe .plan-head（淡色）のまま。
     PC（≥721px）は3枚とも色の帯にした（2026-10-06・おすすめの合図は .plan-tag）。 */
  .plans.swipe .plan.is-center .plan-head {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
    color: var(--ink);
  }
  .plans.swipe .plan-head .plan-name { color: var(--ink); }
  .plans.swipe .plan-head .plan-for { color: var(--muted); }
  .plans.swipe .plan-head .plan-price { color: var(--ink); }
  .plans.swipe .plan-head .note { color: var(--muted); }
  /* おすすめ札の帯は塗りが乗るので、通常札(muted)より少し強い墨寄りにする（C2b） */
  .plans.swipe .plan.is-center .plan-head .plan-for,
  .plans.swipe .plan.is-center .plan-head .note,
  .plans.swipe .plan.is-center .plan-head .plan-price small { color: rgba(34, 39, 42, .80); }
  /* （2026-10-06）PC の色を @media (min-width: 721px) の中へ移したので、
     ここにあった「中央にいない .plan--pick の色を戻す打ち消し」は要らなくなった。 */
  /* 帯の下に、2色の細い線を1本だけ引く */
  .plans.swipe .plan-head::after {
    content: ""; display: block; height: 3px; margin-top: var(--sp-2);
    background: linear-gradient(90deg, var(--brand-rose), var(--brand-lav), transparent);
    border-radius: 2px;
  }
  /* ⚠ .more は index.html のスクリプトが**後から差し込む**要素。
     この一覧から漏れていたため、「ほか8つを見る／閉じる」だけが札の縁に貼り付いていた。
     上下の負のマージン（.plan .more）は保つので、左右だけここで揃える。 */
  .plans.swipe .plan > ul,
  .plans.swipe .plan > .plan-caveat,
  .plans.swipe .plan > .more,
  .plans.swipe .plan > .btn { margin-left: var(--sp-3); margin-right: var(--sp-3); }
  .plans.swipe .plan > ul { margin-top: var(--sp-3); }
  .plans.swipe .plan > .btn { margin-bottom: var(--sp-3); }
  /* 「おすすめ」の札は帯の中へ（枠を切り取るので、外にはみ出せなくなる）。
     ⚠ もとの定義は transform で半分持ち上げている。position だけ変えると
     文字が枠の外へ逃げ、空の札に見える（2026-09-25 に実際そうなった） */
  .plans.swipe .plan { position: relative; }
  .plans.swipe .plan-tag {
    position: absolute; top: 14px; right: 14px; left: auto; transform: none;
    z-index: 2;
    padding: 5px 14px;
  }
  /* 中央にいない札の帯は淡色。税込の添え字は灰（muted）にする。
     （2026-10-06：以前ここは「濃い帯の上で明るく」の白だったが、帯が淡色の札では
     ほぼ消えていた＝計算済みスタイルで rgba(253,250,248,.82) を確認。中央の札は上の規則が墨にする） */
  .plans.swipe .plan-head .plan-price small { color: var(--muted); }
  .plans.swipe { padding-top: 0; }
}

/* PCでは点も案内も出さない */
@media (min-width: 721px) { .swipe-dots, .swipe-hint, .swipe-nav, .swipe-count, .swipe-pricehint { display: none; } }

/* ── スクロールで浮かび上がる（2026-09-17 → 2026-09-22 拡張）──────────
   区画が10個あるので、一度に全部見せると「長い一枚の紙」に見える。
   入ってきたものだけを起こすと、読む場所が1つに絞られる。
   ⚠ JSが動かないときのために、既定は「見えている」。JS が付けた
   `.reveal` にだけ効かせる（出ないまま消える事故を防ぐ）。

   2026-09-22：並ぶもの（カード・手順・機能の10枚）は、箱ごとではなく1枚ずつ順に起こす。
   `.stagger` と各子の --i（何番目か）は JS が付ける。間隔は --stagger（70ms）。 */
.reveal { opacity: 0; transform: translateY(var(--rise)); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
/* 並ぶもの：箱は動かさず、中身を順に */
.reveal.stagger { opacity: 1; transform: none; }
.reveal.stagger > * { opacity: 0; transform: translateY(var(--rise)); }
.reveal.stagger.is-in > * {
  opacity: 1; transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger));
}

/* 10の機能：枠が起きたあと、アイコンが少し遅れて弾む */
.fn10__grid.reveal .ic { transform: scale(.5); }
.fn10__grid.reveal.is-in .ic {
  transform: none;
  transition: transform var(--dur-reveal) cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * var(--stagger) + 120ms);
}

/* はじめるまで：番号の丸が順に置かれる */
.steps.reveal .step::before { transform: scale(.4); }
.steps.reveal.is-in .step::before {
  transform: none;
  transition: transform var(--dur-enter) cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * var(--stagger) + 120ms);
}

/* 他社の積み上げ例：合計が最後に浮かび上がる。
   ⚠ 2026-10-05：.blk は現行HTMLに存在しないクラスだったため削除（grep 0件）。 */
.compare.reveal .cbar__total--big { opacity: 0; transform: scale(.85); }
.compare.reveal.is-in .cbar__total--big {
  opacity: 1; transform: none;
  transition: opacity var(--dur-enter) var(--ease-out) 960ms, transform var(--dur-enter) cubic-bezier(.34, 1.56, .64, 1) 960ms;
}

/* ── ファーストビュー：開いた瞬間に、上から順に置かれる（2026-09-22）──────────
   JS不要（読み込みと同時に一度だけ）。2台のスマホの絵は「透明から」にしない
   （いちばん大きな絵なので、表示の速さの指標＝LCPを遅らせないため。位置だけ動かす）。 */
@keyframes rise-in { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes rise-only { from { transform: translateY(24px); } }
.hero-v .wrap > * { animation: rise-in var(--dur-reveal) var(--ease-out) both; }
.hero-v .wrap > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.hero-v .wrap > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.hero-v .wrap > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.hero-v .wrap > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.hero-v .wrap > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.hero-v .wrap > :nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.hero-v .wrap > .demo2 { animation: rise-only 900ms var(--ease-out) calc(var(--stagger) * 5) both; }
/* 動画の下の 1→2→3：番号が順に灯る */
.demo2__steps li { animation: rise-in var(--dur-reveal) var(--ease-out) both; }
.demo2__steps li:nth-child(1) { animation-delay: 700ms; }
.demo2__steps li:nth-child(2) { animation-delay: 850ms; }
.demo2__steps li:nth-child(3) { animation-delay: 1000ms; }

/* 暗い地の奥で、ロゴの色の光がゆっくり漂う。
   スマホでは動画を流さないので、止まった一枚絵に見えないようにするための「空気」。
   暗幕（::before）の上・文字の下に置く。文字の読みやすさは暗幕が保つ（光は淡く、面積も小さい）。 */
.hero-v::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset: -25%;
  background:
    radial-gradient(closest-side at 28% 34%, rgba(239, 179, 195, .30), transparent),
    radial-gradient(closest-side at 74% 68%, rgba(195, 174, 227, .26), transparent);
  background-size: 60% 60%, 55% 55%;
  background-repeat: no-repeat;
  background-position: 18% 22%, 82% 78%;
  animation: hero-drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes hero-drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  to   { transform: translate3d(4%, 3%, 0) rotate(8deg); }
}

/* ── 絵の中の小さな繰り返し（2026-09-22）────────────────────
   選ばれる理由・ご紹介の絵に、それぞれ1つだけ動きを入れる。
   何を伝える動きかを決めてから入れた：
     01 あとから増えません … 「OK」の丸が、上限の線の上で軽く浮く（上がらない、を見せる）
     02 予約管理と電子カルテが一つに … 通知からカルテへの矢印が、小さく押し出す（2026-10-26 入れ替え）
     03 難しい設定は必要ございません … 画面の中の歯車（点線の輪）が回る＝こちらが作業している
     ご紹介                … 人から人への矢印が、行き先を指して小さく押し出す
   画面の外では止める（.loop-off を JS が付け外しする）。 */
.anim-bob, .anim-spin, .anim-ripple, .anim-nudge { transform-box: fill-box; transform-origin: center; }
.anim-bob    { animation: bob 3.2s var(--ease-in-out) infinite alternate; }
.anim-spin   { animation: spin 9s linear infinite; }
.anim-ripple { animation: ripple 2.4s var(--ease-out) infinite; }
.anim-nudge  { animation: nudge 1.6s var(--ease-in-out) infinite alternate; }
@keyframes bob    { from { transform: translateY(2px); } to { transform: translateY(-5px); } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes ripple { from { transform: scale(.55); opacity: .9; } 70%, to { transform: scale(1.5); opacity: 0; } }
@keyframes nudge  { from { transform: translateX(-2px); } to { transform: translateX(4px); } }

/* 画面の外にある繰り返しは止める（電池と描画の節約）。data-loop の箱に JS が付ける */
/* 止めるのは繰り返しだけ（ファーストビューの登場は止めない。止めると透明のまま残る） */
.loop-off, .loop-off::after,
.loop-off .anim-bob, .loop-off .anim-spin, .loop-off .anim-ripple, .loop-off .anim-nudge { animation-play-state: paused !important; }

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

  /* 10の機能（スマホ）：札の並べ方は「できること10こ」の章の .fn10__grid li（まとめた先）にある */
  .fn10__grid .ic { flex: 0 0 auto; }

  /* 料金：機能の一覧は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: ' ▴'; }
}

/* ── よくあるご質問（2026-09-22 作り直し） ──────────────────
   「変に空いていたり、詰まっていたりする」への直し。実測（PC 1280px）：
     見出し→説明 48px ／ 説明→「言葉でさがす」 0px ／ 検索欄→分類のボタン 0px ／
     分類のボタン→最初の分類見出し 96px ／ 分類どうし 192px ／ 質問1行 93px
   原因は2つだった。
     ① 分類のまとまりが <section> で、サイト共通の section { padding: 96px 0 } を
        受け継いでいた（スマホでは 44px）。→ <div> にした（tools/faq-build.mjs）
     ② 余白に、このファイルに無い変数（--space-3/4/5・--fs-caption）を使っていた。
        無い変数を含む margin は丸ごと無効になり 0px に、文字は本文と同じ 16px になった。
   近いものほど近く置く（近接）で、余白を4段に分けた：
     説明→検索欄 8px（説明が検索欄の見出しを兼ねる）
     検索欄→分類 16px ／ 分類のボタンどうし 8px
     分類見出し→質問の列 8px ／ 質問1行 約62px（全部同じ高さ）
     探す道具→答えの一覧 48px（スマホ 32px）／ 分類どうし 48px（スマホ 32px）
   探す道具（説明・検索・分類）は白い板1枚にまとめ、答えの一覧と役割を分けた。
   ⚠ しぼり込みは**付け足し**。JavaScript が動かなくても、全問がそのまま読めること。 */

.faq { max-width: 720px; margin: 0 auto; }

/* 探す道具 */
.faq-find {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.faq-lead { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--ink); }

.faq-search { display: block; position: relative; }
/* 「言葉でさがす」は、上の説明と入力欄の中の例文・虫めがねで伝わるので画面からは外す。
   読み上げでは入力欄の名前として読まれる（label の中に残している）。
   料金表の「このプランには含まれません」も同じ扱い（2026-10-26 運営者の指示で画面から外し、読み上げには残す。tools/pricing-table.mjs） */
.faq-search__label,
.off-note__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.faq-search input {
  display: block;
  width: 100%;
  min-height: 48px;
  /* 16px を下回ると iPhone が勝手に拡大する。押した瞬間に画面が跳ねる */
  font-size: var(--fs-body);
  padding: 0 var(--sp-2) 0 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a706c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50% / 18px 18px;
  color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.faq-search input:hover { border-color: var(--accent); }
.faq-search input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background-color: var(--paper);
}

.faq-cats { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.faq-cat {
  display: inline-flex; align-items: center;
  /* 44px 以上。指で押す場所を小さくしない */
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.faq-cat:hover { border-color: var(--accent); color: var(--accent); }
.faq-cat:active { transform: scale(.96); }
.faq-cat.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.faq-cat__t { display: inline; }
.faq-cat__n {
  margin-left: 6px;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.faq-cat.is-on .faq-cat__n { opacity: .85; }

.faq-none {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
}

/* 答えの一覧。分類どうしの間は gap で持つ（しぼり込みで消えた分類の余白が残らない） */
#faqList { display: flex; flex-direction: column; gap: var(--sp-6); }
.faq-group__h {
  margin: 0;

  line-height: 1.6;

}
.faq-group__lead { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* 「よくある質問」と言葉で探したときは、各分類に1〜2問しか出ないので説明文は出さない
   （2行の見出しに1問、が続くと一覧が細切れになる）。data-view は下のスクリプトが付ける。 */
#faqList:is([data-view="top"], [data-view="find"]) .faq-group__lead { display: none; }
.faq-group__list { margin-top: var(--sp-1); border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }
/* 質問の行。行全体が押せる（高さ44px以上）。上下の余白は行の中に持たせ、
   どの質問も同じ高さに揃える。 */
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) 0;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.6;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-hover) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
/* 押せる行であることを、触れたときに返す */
.faq summary:hover { color: var(--accent); }
/* 開閉の印。＋が45度回って×になる（文字の差し替えだと、切り替わりが一瞬で見えない） */
.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-h3); font-weight: 400; line-height: 1;
  transition: transform var(--dur-enter) var(--ease-out), background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.faq summary:hover::after { background: var(--accent); color: #ffffff; box-shadow: none; }
.faq details[open] > summary::after { transform: rotate(45deg); }
/* 答え。質問のすぐ下（16px）に付け、次の質問との間（24px）より近くする */
.faq details > p {
  margin: 0;
  padding: 0 0 var(--sp-3);
  max-width: 36em;              /* 1行45字まで（本文の行長の決まり） */
  color: var(--ink-soft);
  font-size: var(--fs-body);
}
.faq details[open] > p { animation: faq-open var(--dur-enter) var(--ease-out) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* しぼり込みで出てきたものは、ふわっと出す（display が戻るたびに一度だけ動く） */
.faq-group:not([hidden]), .faq-item:not([hidden]) { animation: faq-show var(--dur-enter) var(--ease-out) both; }
@keyframes faq-show { from { opacity: 0; transform: translateY(8px); } }

/* しぼり込みで外れたものを消す。[hidden] が効かない要素があるので個別に指定 */
.faq-item[hidden], .faq-group[hidden] { display: none !important; }

@media (max-width: 720px) {
  .faq-find { padding: var(--sp-2); margin-bottom: var(--sp-4); }
  #faqList { gap: var(--sp-4); }
  /* 分類のボタンは2列の升目に。流し込みだと390pxで6段・端ががたがたで、
     それ自体が「詰まって見える」原因だった（升目なら5段で、左右の端がそろう）。
     長い分類名は升目の中で2行に折れてよい（丸い札だと2行で潰れるので角丸にする）。 */
  .faq-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-cat { justify-content: center; text-align: center; border-radius: var(--radius); padding: 4px var(--sp-1); }
}

/* ── 動画：スマホは押して再生（2026-09-21） ────────────────────
   静止画の上に再生ボタンを重ねる。押すまで動画は読み込まない（VIDEO_RUNBOOK §5 型B）。 */
.demo2__stage { position: relative; }
.demo2__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 指で押す場所。44px を下回らせない */
  min-height: 56px;
  padding: 10px 20px 10px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.demo2__play small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.demo2__play-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent, #33323e);
  position: relative;
}
/* 三角の再生マーク（画像を持たずに描く） */
.demo2__play-ic::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 11px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}
.demo2__play:hover { background: #fff; }
.demo2__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* ⚠ display:flex は [hidden] を打ち消す。PCで自動再生中の動画の上にボタンが残っていた */
.demo2__play[hidden] { display: none; }

/* ══ 動きを減らす設定（2026-09-22 に1箇所へ集約）════════════════════
   OS の「視差効果を減らす」「アニメーションを減らす」を選んだ人には、動きを一切出さない。
   ・遷移も繰り返しも全部止める（疑似要素も）
   ・起き上がり演出は JS が最初から付けないが、念のため「見えている姿」に固定する
   ・動画は別の仕組み（押したときだけ再生）なので、ここでは触らない */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal.stagger > *, .fn10__grid.reveal .ic, .steps.reveal .step::before,
  .compare.reveal .cbar__total--big { opacity: 1 !important; transform: none !important; }
  .btn:hover, .btn:active, .faq-cat:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   2026-09-25 の作り直し（②）── 書体・ボタン・読みにくかった区画
   ══════════════════════════════════════════════════════════ */

/* ── 書体 ────────────────────────────────────────
   見出しは明朝（Zen Old Mincho）。サロンの「品」は書体でいちばん早く伝わる。
   本文は Zen Kaku Gothic New。字面が素直で、40〜60代のオーナー様が読みやすい。
   ⚠ 日本語のWebフォントは重いので、太さは必要な3つだけに絞る。 */
:root {
  --font-serif: 'Zen Old Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
body { font-family: var(--font-sans); }
h1, h2, h3,
.hero-v__yen, .plan-price, .plan-name, .cbar__total, .stat__n {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* 見出しをロゴで出す（「サロン+ が選ばれる理由」） */
.h2-logo { display: flex; align-items: center; justify-content: center; gap: .5em; flex-wrap: wrap; }
.h2-logo img { height: 1.05em; width: auto; display: block; }

/* ── ボタン ──────────────────────────────────────
   いただいた「フローボタン」の形に合わせた：
   ・丸い枠 → 触れると角が締まり、真ん中から円が広がって地が変わる
   ・矢印が左から入り、右へ抜ける
   素のCSSで作っている（このサイトはビルド無しのHTML/CSS/JSのため）。
   ⚠ 主ボタンは塗りのまま残す。全部を線だけにすると、いちばん押してほしいものが弱くなる。 */
.btn {
  position: relative; z-index: 0; overflow: hidden;
  border-radius: 100px;
  /* 3枚目が面（ロゴ寄りの桃いろのグラデーション）。
     ⚠ 面はここに書く。上の .btn に書くと、この background-image に消される */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 17px 17px, 17px 17px, cover;
  background-position: -26px center, calc(100% - 18px) center, 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322272a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322272a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    var(--accent-grad);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    background-position .7s cubic-bezier(.34, 1.56, .64, 1),
    border-radius .55s cubic-bezier(.23, 1, .32, 1),
    color .4s var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
/* 真ん中から広がる円。文字より後ろに置く（z-index:-1） */
.btn::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #d4777b; opacity: 0;
  transition: width .8s cubic-bezier(.19, 1, .22, 1), height .8s cubic-bezier(.19, 1, .22, 1),
              margin .8s cubic-bezier(.19, 1, .22, 1), opacity .5s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { border-radius: 14px; background-position: 18px center, calc(100% + 26px) center; }
  .btn:hover::before { width: 520px; height: 520px; margin: -260px 0 0 -260px; opacity: 1; }
  /* 線だけのボタンは、円が広がったときに文字と矢印を白へ */
  .btn--ghost:hover {
    color: var(--accent-ink); border-color: transparent;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}
/* 線だけのボタンは、ふだんは差し色の矢印 */
.btn--ghost {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333323e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333323e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* 明るい地の上に置く線ボタン（ファーストビュー）も同じ扱いにする */
.hero-v .btn--ghost { background-color: rgba(255, 255, 255, .72); }
/* 2026-10-05：矢印（17px・右端から18pxの位置）が文字にくっついていた（PM実測）。
   矢印の分だけ右側の余白を広げる。.btn--sm は矢印を出さないので対象外。 */
.btn:not(.btn--sm) { padding-right: calc(var(--sp-4) + 20px); }
.btn--sm:hover { background-image: none; }
/* 宛先は1行で収める。2行になると、丸い座布団が間延びして見える */

/* ── よその料金の積み上げ図（読みにくかったので作り直し）──── */
.compare__sub { text-align: center; color: var(--ink-soft); margin-top: var(--sp-1); }
/* 結論の1行。図だけ見て終わらせない */
.compare__take {
  margin: var(--sp-4) auto 0; max-width: 32em; text-align: center;
   border: 1.5px solid var(--accent); border-radius: var(--radius);
  padding: var(--sp-3); font-size: var(--fs-lead); line-height: 1.8;
}
.compare__take strong { color: var(--accent-2); }

/* ── 料金の下の注記（3行の壁だったので、3枚の札に）──────── */
.plan-notes {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
}
@media (max-width: 860px) { .plan-notes { grid-template-columns: 1fr; } }
.plan-notes li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3); font-size: var(--fs-body); line-height: 1.85; color: var(--ink-soft);
}
.plan-notes b { display: block; color: var(--ink); font-size: var(--fs-h3); margin-bottom: var(--sp-1); }

/* ══════════════════════════════════════════════════════════
   ファーストビューの作り直し（2026-09-25）
   ねらい：**スクロールしなくても、誰に・何を・いくらで・次に何を押すかが分かる。**
   ・左に言葉、右に実物の画面（お客様のスマホ／オーナー様のパソコン）
   ・宛先（どんなサロンか）を小さな字でなく、読める大きさで先頭に置く
   ・画面は**本物のスクリーンショット**。作り物の画面は使わない
   ══════════════════════════════════════════════════════════ */
/* padding はこの下のメディアクエリ2つが持つ。ここで上書きすると、
   後から書いた同じ強さの指定が勝って、PC用に詰めた値が一度も描かれない */
.hero-v__grid {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--sp-6); align-items: center;
}
@media (max-width: 980px) { .hero-v__grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* 宛先。ここが読めないと「自分の店の話」だと分からない */
.hero-v__to {
  display: inline-block; font-size: var(--fs-lead); font-weight: 700; letter-spacing: .04em;
  color: var(--accent-2); background: rgba(255, 255, 255, .78);
  border-radius: 999px; padding: 10px 22px;
  line-height: 1.7;
  animation: hero-in .6s var(--ease-out) .05s backwards;
}
.hero-v h1 { font-size: var(--fs-h1); line-height: 1.32; letter-spacing: .03em; margin-top: var(--sp-1); animation: hero-in .7s var(--ease-out) .16s backwards; }

/* ⚠ 2026-10-05 統合：「要点3つ」(.hero-v__pts) と「端末（パソコン/スマホの実機写真）」
   (.hero-v__shot/.hero-v__pc/.hero-v__sp/.hero-v__cap) は、どちらも現行の
   ファーストビュー（index.html）に存在しないクラス。HTML・JSの両方を grep して
   0件だったので削除した（詳細: design/css-consolidate/LOG.md）。
   .hero-v h1 の animation は上の本体（.hero-v h1 { ... }）へ合流済み。
   .hero-v__to の animation も上（.hero-v__to { ... }）へ合流済み。 */

/* 動き。**最初に見える場所なので、ここだけは黙って出さない**。
   ただし派手にはしない（サロンの広告としてうるさくなる）。
   ⚠ 出るのは一度きり。消えたままにならないよう both は使わず、終わり値で止める。 */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-v__price, .hero-v__sub { animation: hero-in .7s var(--ease-out) .28s backwards; }
.hero-v__cta, .hero-v .btn-note { animation: hero-in .7s var(--ease-out) .4s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-v__to, .hero-v h1, .hero-v__price, .hero-v__sub,
  .hero-v__cta, .hero-v .btn-note { animation: none; }
}

/* ヘッダーの小さいボタンは矢印なし（幅が足りず文字に重なる）。
   ⚠ .btn の指定より後ろに置くこと。同じ強さなら後ろが勝つ */
.btn--sm, .btn--sm:hover { background-image: none; }

/* 2枚の札の下の見出しは、行数が違うと段がずれる（検査D16）。高さを合わせる */


/* 最後のCTAの白いボタン。矢印は白だと見えないので差し色にし、
   触れたときは円（濃い紫）が広がるので文字も矢印も白へ返す */
.closing .btn {
  /* ⚠ .closing .btn は .btn より強いので、background の一括指定で
     繰り返し・大きさ・位置が初期値に戻る。矢印が敷き詰められるので、ここで持ち直す */
  background-color: var(--paper);
  background-repeat: no-repeat, no-repeat;
  background-size: 17px 17px, 17px 17px;
  background-position: -26px center, calc(100% - 18px) center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333323e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333323e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (hover: hover) {
  .closing .btn:hover {
    color: var(--accent-ink);
    background-position: 18px center, calc(100% + 26px) center;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}

/* 6枚目は「作業」ではなく、そのあとのお試し期間。番号を続けると
   「お願いは5つ」と数が合わなくなるので、番号ではなく印にする（2026-09-25） */
.step--last::before { content: "✓"; font-size: var(--fs-body); }

/* ── お約束（申し込みの直前）───────────────────── */
.promise h2 { text-align: center; font-size: var(--fs-h2); }
.promise__list {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
@media (max-width: 860px) { .promise__list { grid-template-columns: 1fr; } }
.promise__list li {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--sp-4) var(--sp-3); line-height: 1.9; color: var(--ink-soft);
}
.promise__list b {
  display: block; font-family: var(--font-serif); font-size: var(--fs-h3);
  color: var(--ink); margin-bottom: var(--sp-1);
}
/* 絵は10の機能の札と同じ作り（大きさ・線の太さ・色）。
   区画ごとに絵の見た目が変わると、同じサイトに見えなくなる（2026-09-29） */
.promise__list .ic {
  display: block; width: 40px; height: 40px; margin-bottom: var(--sp-2);
  color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
/* 塗りは絵の束の属性で付けている（上の symbol .f の注記を参照） */
/* ご紹介は「決めたあと」の話。宛先を先に出す */
.refer__for {
  text-align: center; font-size: var(--fs-small); font-weight: 700; letter-spacing: .12em;
  color: var(--accent-2);
}

/* ══════════════════════════════════════════════════════════
   2026-09-25 デザイナー評価の反映
   ══════════════════════════════════════════════════════════ */

/* ⚠ 2026-10-05：① スマホの端末写真ブロック（.hero-v__shot/__pc/__sp/__cap）は
   いまのHTMLに存在しないため削除した（上の「統合」注記を参照）。 */

/* ② 「10の機能」のアイコンの大きさ（スマホ） */
@media (max-width: 720px) {
  .fn10__grid .ic { width: 24px; height: 24px; grid-area: 1 / 1; }
}

/* ③ 明朝は「見出しの格」に付ける。タグ名で決めると、strong/b の見出しが取り残される */
.compare__lead, .plan-notes b, .promise__list b {
  font-family: var(--font-serif); font-weight: 600;
}
/* FAQの分類は見出しではなく「ラベル」。中身より目立たせない */
.faq-group__h {
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .14em; color: var(--muted);
}

/* ④ よその料金の棒は無彩色に。色は「サロン+」の側だけに取っておく */
/* 2026-10-06 午後：この枠も var(--accent) 由来で、--accent が墨に変わって黒くなっていた。
   棒と同じ区画にある枠なので、公開中の桃いろへ戻す（aa402fe で直し漏れていた1箇所）。 */
.compare__take { background: var(--accent-tint); border-color: #c63a5e; }

/* ⑥ 料金カードの帯は、スマホだけの飾りにしない。PCでも同じ部品にする。
   PC は3枚とも色の帯（下の @media (min-width: 721px)）。おすすめの合図は .plan-tag が担う。 */
.plans .plan { border-radius: 22px; overflow: hidden; padding: 0; }
.plans .plan-head { background: var(--accent-tint); color: var(--ink); padding: var(--sp-3) var(--sp-3) var(--sp-2); }
/* PC（721px〜）は3枚とも同じ色の帯。どれがおすすめかは .plan-tag（桃いろの札）が担う（2026-10-06 オーナー様の確定）。
   スマホ（〜720px）は1枚ずつしか見えないので、いま見えている札（.is-center）だけに色が付く。 */
@media (min-width: 721px) {
  .plans .plan .plan-head {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
    color: var(--ink);
  }
  .plans .plan .plan-head .plan-name,
  .plans .plan .plan-head .plan-price { color: var(--ink); }
  .plans .plan .plan-head .plan-for,
  .plans .plan .plan-head .note,
  .plans .plan .plan-head .plan-price small { color: rgba(34, 39, 42, .80); }
}
.plans .plan-head::after {
  content: ""; display: block; height: 3px; margin-top: var(--sp-2); border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-rose), var(--brand-lav), transparent);
}
.plans .plan > ul, .plans .plan > .plan-caveat, .plans .plan > .btn {
  margin-left: var(--sp-3); margin-right: var(--sp-3);
}
.plans .plan > ul { margin-top: var(--sp-3); }
.plans .plan > .btn { margin-bottom: var(--sp-3); }

/* ⑦ 終わらない動きは1画面に1本まで。視界の端で揺れ続けるものは落ち着きを奪う */
@media (min-width: 721px) {
  .reason:not(:nth-child(2)) .anim-bob,
  .reason:not(:nth-child(2)) .anim-ripple,
  .reason:not(:nth-child(2)) .anim-spin,   /* 2026-10-26：歯車の札が3番目に移ったので、ここでも止める */
  .reason:not(:nth-child(2)) .anim-nudge { animation: none; }
}

/* ⑧ スマホの区画余白を規格（8の倍数）に戻す。44pxはどの段にも無い値だった */
@media (max-width: 720px) { section { padding: 56px 0; } }



/* 「おすすめ」の札。カードに overflow:hidden を付けた（帯を角丸で切るため）ので、
   枠の上辺から半分はみ出す元の置き方だと**文字が切れる**。帯の中へ入れる。
   ⚠ もとの定義は transform で半分持ち上げているので、それも打ち消す（2026-09-25） */
.plans .plan { position: relative; }
.plans .plan-tag {
  position: absolute; top: 14px; right: 14px; left: auto; transform: none;
  z-index: 2;
  padding: 5px 14px; box-shadow: 0 6px 16px rgba(120, 58, 78, .18);
}
.plans { padding-top: 0; }

/* スマホの1画面目に、端末の上端まで入れる（2026-09-25）。
   実測：端末の上が922pxで、画面（844px）から78px溢れていた。
   文字は削らず、余白と札の詰め方だけで100pxほど詰める。 */
@media (max-width: 720px) {
  .hero-v__to { padding: 8px 16px; font-size: var(--fs-body); }
  .hero-v__price { margin-top: var(--sp-3); }
  .hero-v__cta { margin-top: var(--sp-3); }
}

/* 手順の札：2行になるものだけ番号が上下に泳いでいた */
@media (max-width: 720px) {
  .demo2__steps li { align-items: flex-start; }
  .demo2__steps b { flex: none; }
}


/* ヘッダーのロゴも押せる高さを確保（画像の高さのままだと34pxしかなかった） */
.logo { padding: 5px 0; min-height: 44px; }

/* 見出しの最後の行に2〜3文字だけ残るのを減らす（日本語は禁則で落ちやすい） */
h1, h2, h3, .compare__lead { text-wrap: balance; }

/* ── スマホの手直し（2026-09-25 第2回・等倍で1画面ずつ見てから）────────────── */
@media (max-width: 720px) {
  /* ① 点が6つあると、前後ボタンと並べたときに2段に折り返していた（見ため事故）。
        指で横になぞれば送れるので、スマホでは前後ボタンを出さない。
        点そのものが「その枚へ飛ぶボタン」なので、押す手段は残る */
  .swipe-nav .swipe-arrow { display: none; }
  
  /* 指で押すところは44px以上（40〜60代のオーナー様が使うため）。
     「できること」は8枚あり、44px×8＝352pxで画面から9pxはみ出していた。
     枚数が多いときだけ自動で詰まるように、幅は上限44pxの伸び縮みにする（高さは44pxのまま） */
  .swipe-nav .swipe-dots button { flex: 0 1 44px; width: auto; min-width: 34px; height: 44px; }

  

  
}

/* ④ 日本語の折り返しを、文節の切れ目に寄せる。
      「予約通知メッセ／ージ」「ホットペッパ／ー・」のように、
      伸ばし棒が行のあたまに来る割れ方をしていた。
      auto-phrase＝文節で折る／strict＝ー・小さいカナを行あたまに置かない */
h1, h2, h3, .lead, .hero-v__to, .fn10__grid span, .plan-name, .faq h3,
.step b, .reason h3, .promise__list b {
  word-break: auto-phrase;
  line-break: strict;
}



/* ⑥ カードの中の文章が1行12〜15字しか入らず、読むのに目が何度も折り返していた
      （384pxの画面で、文章に使えていたのは232px）。
      カードを少し広げ、内側の余白を詰めて、1行あたりの字数を増やす。
      左右の「次のカードが覗く」見え方は残す（横に送れると分かるため） */
@media (max-width: 720px) {
  .swipe > * { flex: 0 0 92%; }
  .feature-grid.swipe > .feature { padding: 20px; }
}

/* ── スマホの直し・第3回（2026-09-26）──────────────────────── */
@media (max-width: 720px) {
  /* ① 背景の絵にある「きらめき（ダイヤ）」が、縦長の画面では大きく映って
        柄物のように見えていた。スマホでは絵をやめ、ロゴの2色のにじみだけにする。
        パソコン表示は、いただいた絵のままにしてある */
  .hero-v {
    background-image:
      radial-gradient(120% 78% at 8% -6%, rgba(240, 179, 180, .42) 0%, rgba(240, 179, 180, 0) 62%),
      radial-gradient(110% 72% at 104% 6%, rgba(204, 179, 228, .40) 0%, rgba(204, 179, 228, 0) 64%),
      radial-gradient(120% 60% at 50% 104%, rgba(204, 179, 228, .22) 0%, rgba(204, 179, 228, 0) 70%);
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0 0;
  }
  /* 絵をやめたので、上に重ねていた白い幕も要らない（かけると色が抜ける） */
  .hero-v::before { display: none; }

  }

/* ── スマホの動画（2026-09-26）──────────────────────────────
   横長（16:9）だと、342px 幅では高さ192px。中のスマホは幅70pxほどで、
   何をしている画面かまったく読めなかった。
   スマホには縦長（4:5）を配り、置き場所もそれに合わせる。 */
@media (max-width: 720px) {
  /* ★ 2026-09-30：スマホだけ 4:5 にして、古い縦長の1枚目を敷いていた。
     いまの動画は16:9の1本だけなので、形も絵も上と同じでよい。
     ただし16:9はスマホだと縦が短く、中の文字が読みにくい。
     左右の余白を打ち消して端まで使い、少しでも大きく見せる。 */
  .demo2 {
    margin-top: var(--sp-6);
    margin-inline: calc(var(--sp-3) * -1);
  }
  .demo2__v {
    border-radius: 0;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  }
  .demo2 figcaption { padding-inline: var(--sp-3); }
}

/* 「はじめるまで」の下の案内。横スワイプの点のすぐ下に来るので、少し離す */
.steps__more { margin-top: var(--sp-6); text-align: center; }
@media (max-width: 720px) { .steps__more .btn { display: flex; justify-content: center; } }

/* ── お問い合わせの口：公式LINE（2026-10-23 オーナー様の決定）──────────
   それまでは締め（#contact）にフォームを置いていた（2026-09-28〜）。
   お問い合わせを公式LINE「Salon+サポート」1本にしたので、ボタン1つと、
   パソコン幅（901px〜）だけ友だち追加の QR を横に置く（スマホはボタンで足りる）。 */
.line-cta { margin: 0 auto; max-width: 30em; }
.closing .line-cta__lead { margin-bottom: var(--sp-3); }
.line-cta .btn { width: 100%; justify-content: center; }
.closing .line-cta .btn-note { margin-bottom: 0; }
.line-cta__qr { display: none; margin: 0; }
.line-cta__qr img { display: block; width: 168px; height: 168px; margin: 0 auto;
  border-radius: 12px; box-shadow: 0 6px 18px rgba(201, 118, 122, .22); }
.line-cta__qr figcaption { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; }
/* スマホでは、上の .closing__who（左そろえ）と行頭を揃える */
@media (max-width: 720px) {
  .line-cta__lead, .closing .line-cta .btn-note { text-align: left; }
}
@media (min-width: 901px) {
  .line-cta {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 200px;
    gap: var(--sp-5); align-items: center; text-align: left;
  }
  .line-cta__qr { display: block; text-align: center; }
}
/* 自動投稿よけの見えない欄。導入前の登録フォーム（site/entry-…/）が使っている。
   トップのフォームは外したが、これは消さない */
.apply__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 文の中のリンクも、指で押せる高さにする。
   2026-09-28：フォームの注記にある「プライバシーポリシー」が20pxしかなく、検査で落ちた。
   行間を崩さないよう、上下の余白は負の margin で相殺する。 */
.btn-note a, .note a, .plan-caveat a {
  display: inline-block; padding: 6px 2px; margin: -6px 0;
}

/* 比較図の作り直し（2026-09-28）。
   それまでは「他社の表示価格」と「積み上げ後」の2本で、こちらの額は文章の中にしか無かった。
   いちばん効く数字（差額）が目に入らないので、**他社の積み上げ × サロン+** の2本に変える。 */
.compare__h { font-size: var(--fs-h3); text-align: center; margin-bottom: var(--sp-2); }

/* ⚠ 2026-10-05 統合：ここにあった「2本の棒を行でそろえる」格子(grid)レイアウトは、
   下の「比較図・横棒（3回目）」で display:block に差し替えられて使われなくなっていた
   （.cbar__col は現行HTML・JSに存在しないため削除。align-items/grid-row 等は
   .cbar/.cbar__stack/.cbar__lab の本体へ統合し、ここでは重複を消した）。
   .cbar__total, .cbar__total--big, .cbar__total--ours { grid-row: 1; align-self: end; } は
   .cbar__total 単体の重複カウントに数えられないため残置（他のセレクタと複合）。 */
.cbar__total, .cbar__total--big, .cbar__total--ours { grid-row: 1; align-self: end; }

/* ── よくいただく心配（2026-09-28）──────────────────────────
   料金の直前に置く。ここで残っている不安を落とせないと、金額を見た瞬間に離れる。 */
.worry { background: var(--bg-alt); }
.worry h2 { font-size: var(--fs-h2); text-align: center; }
.worry__list {
  margin-top: var(--sp-6); display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.worry__card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4);
}
.worry__card h3 { font-size: var(--fs-h3); line-height: 1.5; min-height: calc(1.5em * 2); }
.worry__card p { margin-top: var(--sp-2); line-height: 1.9; }

/* ★ 2026-09-29：ここは1枚あたり3段落の説明文だった（区画で660字・絵は0）。
   心配を確かめに来た人は、答えが最初に見えないと読むのをやめる。
   「1行の答え → 図 → 補足」の順に変えた。答えがいちばん強い。 */
.worry__ans {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.7;
  /* 問いも答えも、札によって1行だったり2行だったりする。
     先に2行ぶん取って、下の図と補足の位置を3枚で揃える */
  min-height: calc(1.7em * 2);
}
.worry__fig { margin: var(--sp-3) 0 0; }
.worry__fig svg { display: block; width: 100%; height: auto; }
.worry__fig figcaption {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.7;
  /* 3枚を横に並べるので、説明が1行の札と2行の札で下の段がずれる。
     2行ぶんの高さを先に取っておく（D16 の「行が揃っていない」対策） */
  min-height: calc(1.7em * 2);
}
.worry__card .note { margin-top: var(--sp-2); }
.worry__more { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-small); }
/* 指で押す文字は、44px の高さを持たせる（行だけだと20pxしかない） */
.worry__more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); }

/* 図の中の文字と棒。色はトークンから取る（図だけ別の配色にしない） */
.wf-lab  { font-size: 13px; fill: var(--muted); }
.wf-num  { font-size: 15px; font-weight: 700; fill: var(--accent-dark); }
.wf-num--sub { fill: var(--ink-soft); font-weight: 400; }
.wf-bar  { fill: var(--accent); }
/* 「いまのまま」の棒。よそ・現状は無彩色にして、桃いろは「サロン+」の側だけに取っておく */
.wf-bar--sub { fill: #cbc5c7; }
.wf-free { font-size: 14px; font-weight: 700; fill: var(--accent-dark); }
.wf-line { stroke: var(--line); stroke-width: 4; }
.wf-dot  { fill: var(--accent); }
.wf-dot--pay { fill: var(--accent-2); }
.wf-pill rect { fill: var(--accent-tint); }
.wf-pill text { font-size: 13px; fill: var(--accent-dark); text-anchor: middle; }
.wf-arrow { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.wf-box  { fill: none; stroke: var(--accent); stroke-width: 2; }
.wf-boxt { font-size: 15px; font-weight: 700; fill: var(--accent-dark); }
.worry__calc {
  background: var(--accent-tint); border-radius: 10px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
}
@media (max-width: 860px) { .worry__list { grid-template-columns: 1fr; } }

/* 料金表の「含まれません」。横棒だけだと、薄い灰色の行が「入っている」に見える */
.off-note { font-size: var(--fs-small); color: var(--muted); margin-left: 4px; }

/* LINEの入口（2026-09-28）。
   緑のボタンにすると、サイトの2色（紫・ばら）とぶつかって、そこだけ別のサイトに見える。
   形は他のボタンと同じにして、アイコンで見分けられるようにする。 */
.btn--line {
  background: transparent; color: var(--accent);
  border: 1px solid #948f98; gap: 8px; box-shadow: none;
}
.btn--line:hover { background: var(--accent-tint); }
.btn--line svg { flex: none; }
/* 塗りのボタンに LINE の印を付けるとき（2026-10-23：申し込みのボタンが公式LINEを直に開くようになった） */
.btn--icon { gap: 8px; }
.btn--icon svg { flex: none; }

/* ── 比較図・横棒（2026-09-28・3回目）────────────────────────────
   縦積みをやめた。理由は2つ。
   ① **棒の高さが金額に比例していなかった**（15,980円と8,800円が同じ高さに見えた）。
      比較の図で大小が正しく出ていないのは、数字が間違っているのと同じくらい悪い。
   ② 小さい項目（2,000円）の札に文字が入らず、2行に折れて箱からはみ出していた。
   横棒なら、幅がそのまま金額の比になり、スマホでも縦に伸びない。 */
.cbar::before { content: none; }
.cbar__row + .cbar__row {  }
.cbar__lab {
  align-items: flex-start; justify-content: center;
  grid-row: 3; align-self: start;
  display: block;                      /* 旧：flex。<b>他社</b>で が離れて描かれていた */
  min-height: 0; margin: 0 0 6px;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); text-align: left;
}
.cbar__track {
  display: flex; width: 100%; height: 44px; border-radius: 8px; overflow: hidden;
  background: rgba(34, 39, 42, .06);
  /* 角丸に沿う内側の線。いちばん淡い区分が地に溶けるのを防ぐ（outline と違い丸みに沿う） */
  box-shadow: inset 0 0 0 1px rgba(120, 96, 48, .32);
}
.cbar__track .seg {
  width: var(--w); flex: 0 0 var(--w); height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.seg--base {  color: var(--ink); }
.seg--op1  {  color: var(--ink); }
.seg--op2  {  color: var(--ink); }
.seg--op3  {  color: var(--ink); }
.seg--ours { background-color: #e8d173; color: var(--ink); }   /* 淡い面に白文字は消える。墨文字 9.92 */
.cbar__total {
  margin-top: 8px; text-align: right;
  font-size: var(--fs-h3); font-weight: 700; color: var(--ink-soft);
}
.cbar__total small { font-size: var(--fs-small); font-weight: 400; margin-left: 6px; }
.cbar__total--big { color: var(--ink); }
.cbar__total--ours { color: var(--accent-dark); }
.cbar__legend {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px var(--sp-3);
  font-size: var(--fs-small); color: var(--muted);
}
.cbar__legend li { display: flex; align-items: center; gap: 6px; }
.cbar__legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
@media (max-width: 720px) {
  .cbar__track { height: 40px; }
  /* ★ 2026-09-30：12px だった。ここは「ぜんぶ入って、この1つだけ」という
     いちばん言いたい一言が乗る帯なので、注記と同じ大きさまで上げる */
  .cbar__track .seg { font-size: var(--fs-small); }
  /* 狭いと、いちばん細い区分に文字を入れても読めない。全部しまって凡例に任せる */
  .cbar__track .seg:not(.seg--ours) { font-size: 0; }
  .cbar__legend { gap: 4px var(--sp-2); }
}

/* 横棒の詰め（2026-09-28）。淡すぎて、積み上がっていることが見えなかった。
   区切りの線を入れ、色の差を広げ、2本の棒のあいだも空ける。 */
.cbar__track .seg + .seg { box-shadow: inset 1px 0 0 var(--paper); }
/* ★ 2026-10-06（午後・オーナー様のご指示）：1区分ずつを濃い線で囲っていたのをやめた。
   outline は角丸に沿わないため、8pxで丸めた棒の四隅が四角く出ていた（かくかくの正体）。
   面の色はそのまま。境目は元どおり紙色の仕切り線、外側は棒そのものに沿う細い線で見せる。 */
.cbar__legend i { box-shadow: inset 0 0 0 1px rgba(120, 96, 48, .32); }
.seg--base { background-color: #f4e7a4; }
.seg--op1  { background-color: #f8efc4; }
.seg--op2  { background-color: #fbf5db; }
.seg--op3  { background-color: #fdfaed; }
.cbar__row + .cbar__row { margin-top: var(--sp-6); }
.cbar__legend { margin-top: 10px; }

/* 「10の機能」を、題＋1文の形にした（2026-09-28）。
   機能名だけの札は、読んでも自分の1日がどう変わるか分からなかった。 */
/* ★ 2026-09-30：ここは見出し14px＋説明13px で、区画の85%が16px未満だった。
   10枚続くと、区画ぜんぶが「細かい注意書き」に見える。
   説明は消して、見出しを本文と同じ大きさにした。伝えたいのは見出しのほう。 */
.fn10__t { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.55; }

/* よくあるご質問のページ（2026-09-28）。全問をここに出す */
.faq-page { padding: var(--sp-10) 0 var(--sp-12); }
.faq-page h1 { font-size: var(--fs-h1); line-height: 1.4; }
.faq-page > .wrap > .lead { margin-top: var(--sp-2); color: var(--ink-soft); }
.faq-page__cta {
  margin-top: var(--sp-10); padding: var(--sp-5); text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.faq-page__cta p { margin-bottom: var(--sp-3); }
.faq-page__cta .btn + .btn { margin-left: var(--sp-2); }
.faq-page .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-6); }
/* トップから「すべての質問を見る」への入口 */
.faq-more { margin-top: var(--sp-5); text-align: center; }
@media (max-width: 720px) {
  .faq-page__cta .btn { width: 100%; justify-content: center; }
  .faq-page__cta .btn + .btn { margin-left: 0; margin-top: var(--sp-2); }
  .faq-more .btn { display: flex; justify-content: center; }
}

/* よくあるご質問のページ：本文の行長を抑える（2026-09-28）。
   PCでは1行65字まで伸びていた（目安は35〜45字）。読む書類なので幅を絞る。 */
.faq-page .wrap { max-width: 46em; }

/* 札に本文が入ったので、スマホでは1列にする（2026-09-28）。
   2列だと1枚の幅が163pxしかなく、40字の文が6行に折れて読めなかった。 */
@media (max-width: 720px) {
  .fn10__grid { grid-template-columns: 1fr; }
}

/* /faq の分類見出しは左揃え（h2 はサイト既定で中央寄せ。ここは読む一覧なので左） */
.faq-page .faq-group__h { text-align: left; }

/* 締めの1行にあるリンクも、指で押せる高さにする */
/* 濃い地の上なので、ブラウザ既定の青（#0000ee）では読めなかった（比1.6）。
   地と同じ白で、下線だけ残す（比 10 以上） */
.closing__who a { display: inline-block; padding: 8px 2px; margin: -8px 0;
  color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* 10の機能：スマホでの詰め（2026-09-28）。
   1列にして読めるようになった代わりに、区画が2.4画面に伸びた。
   余白と行間だけを詰める（文字は小さくしない。40〜60代が読むため）。 */
@media (max-width: 720px) {
  .fn10__grid { gap: 8px; margin-top: var(--sp-4); }
}

/* ── 入力欄は端末の書体で描く（2026-10-02） ──────────────────
   書体を「このサイトに出る文字だけ」に削って自分のところから配るようにした
   （914KB・82本 → 264KB・6本）。お客様が打つ字は、その削った中に無い。
   入力欄だけ端末の書体にしておけば、どんな字を打っても同じ見た目で出る。
   （打った字だけ書体が混ざる、という一番みっともない状態を避ける） */
input, textarea, select {
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
/* ── リンクの色の受け皿（2026-10-02） ──────────────────────
   色を書き忘れたリンクが14本あり、**ブラウザ既定の青**のまま出ていた。
   トップの「ひと月の通数の上限」「よくあるご質問」、規約・個人情報・特商法の
   3ページ、運営者ページなど。読めてはいたが、そこだけ別のサイトに見える。
   （締めの区画では同じ見落としで比 1.34 ＝読めない状態になっていた）
   ここで受けておけば、次に足すリンクも最初から正しい色になる。
   ボタン・足元など色を持っているものは、そちらが勝つ（この指定より強い）。
   残っていないかは tools/site-contrast.mjs が数える。 */
a { color: var(--accent-2); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

/* ── 上のメニュー（2026-10-03） ────────────────────────────
   「スクロールしないと何があるか分からない」をやめるために置いた。
   PCは横に並べ、スマホはハンバーガーの中に畳む。アイコンを付けて、
   読まなくても見当がつくようにしている。 */
.site-head .wrap { display: flex; align-items: center; gap: var(--sp-3); }
.site-head .logo { margin-right: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; border-radius: 10px;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.nav a .ic { width: 18px; height: 18px; flex: none; color: var(--accent); }
.nav a:hover { background: var(--accent-tint); color: var(--accent-dark); }
.nav .nav__cta { margin-left: var(--sp-2); color: var(--accent); }
.nav .nav__cta .ic { color: currentColor; }
/* スマホでバーに常駐させる「相談する」。PCは .nav__cta があるので出さない（下の 900px 以下で出す） */
.head-cta { display: none; }

/* ハンバーガー。PCでは出さない */
.burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  padding: 0; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  /* 畳んだメニュー。高さを0にして閉じる（display:none だと動きが出ない） */
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(120, 58, 78, .10);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s var(--ease-out), visibility 0s linear .3s;
  }
  .nav.is-open { max-height: 70vh; visibility: visible; transition: max-height .3s var(--ease-out); }
  .nav a { min-height: 52px; padding: 0 var(--sp-3); border-radius: 0; font-size: var(--fs-body); }
  .nav a + a { border-top: 1px solid var(--line); }
  /* 2026-10-06：上のバーはスマホでも常に出す（以前はここで position: relative にして、スクロールで消えていた）。
     base の .site-head が sticky / top:0 / z-index:20 を持つので、上書きを消すだけで効く。
     畳んだメニューの absolute は、sticky も基準になるのでそのまま動く。
     「相談する」はバーに常駐させ（.head-cta）、メニューの中のものは重複なので隠す。 */
  .head-cta { display: inline-flex; }
  .nav .nav__cta { display: none; }
}
/* 幅が足りないところでは、文字を落としてアイコンだけにする */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav a { padding: 0 8px; }
  .nav a:not(.nav__cta) { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   2026-10-03 の作り直し（オーナー様の指示）
   「がっつり説明を聞きたい人ではなく、フラッと立ち寄る感覚」
   「全体像がすぐわかる」「スクロールしないとわからないのをやめる」
   ══════════════════════════════════════════════════════════════ */

/* ── ファーストビュー：空白を詰め、動画までを短くする ────────── */
.hero-v { padding: var(--sp-8) 0 var(--sp-6); }
@media (max-width: 720px) { .hero-v { padding: var(--sp-6) 0 var(--sp-4); } }
.hero-v__grid { display: block; }          /* 実機の写真をやめたので1段でよい */
.hero-v__say { max-width: 40em; margin-inline: auto; text-align: center; }
.hero-v__def { margin-top: var(--sp-2); }
/* .hero-v h1 の margin-top は 1463行の本体へ合流（2026-10-05 統合）。ここに書き足さない */
/* 2026-10-26 運営者の指示：額（月5,980円〜）を上、「初期費用0円」を下に縦に並べる（PC でも横に並べない） */
.hero-v__price { margin-top: var(--sp-3); flex-direction: column; align-items: center; justify-content: center; }

/* 初期費用0円。お試しの価値を上げる一言なので、金額と同じ重さで出す */
.hero-v__free {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 999px; background: var(--accent-grad); color: var(--accent-ink);
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .04em;
}
.hero-v__cta { margin-top: var(--sp-3); justify-content: center; }
.hero-v__sub { margin-top: var(--sp-1); }

/* ── できること10こ：スマホのホーム画面のような3列 ───────────── */
.fn10__grid {
  list-style: none; margin: var(--sp-5) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-2);
  max-width: 760px;                    /* PCでも3列のまま。横に伸ばすと札が間延びする */
}
/* 2026-10-05（section-rhythm R4）：悩みを2番目へ上げたことで、料金→できること→強み が
   3列・3列・3列と3連続になった（単調＝AIっぽさの主因）。
   「スタンダードから、さらに4つ」はちょうど4項目なので、こちらだけ4列の1行にして変化を作る
   （基本の6つは3列のまま。間延びする、という元の判断は変えない）。 */
@media (min-width: 721px) {
  /* 複合セレクタで詳細度を上げる（後方の「.fn10__grid { max-width:580px }」に競り負けないため） */
  .fn10__grid.fn10__grid--more { grid-template-columns: repeat(4, 1fr); max-width: 1000px; }
}
/* グリッドの子は既定で中身より縮まない。長い語が入ると枠ごと押し広げ、
   390px で横にはみ出す（2026-10-03 にも「スタンダードから」で 487px まで広がった）。→ min-width: 0 */
.fn10__grid li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
  min-width: 0;
}
/* スマホ（.fn10__grid li の まとめた先）。上の本体と同じ強さなので、同じ項目は書かないこと
   （2026-10-05 css-consolidate：li は本体1＋ここ1にした。本体と食い違う指定は「後ろが勝つ」ので消した）。
   grid-template-* は display:flex の箱では効かないが、計算済みスタイルを変えないために残している。 */
@media (max-width: 720px) {
  .fn10__grid li {
    flex-wrap: wrap;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    padding: 12px 14px;
  }
  .fn10__grid li > span { flex: 1 1 auto; grid-area: auto / 2; }
}
.fn10__ic {
  display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 20px;                 /* スマホのアイコンと同じ角の丸み */
  background: var(--accent-tint); border: 1px solid var(--accent-2-tint);
}
.fn10__ic .ic { width: 32px; height: 32px; color: var(--accent); }
/* 札の字は短いので、語の途中では折らない（「二重予約な／し」と割れていた） */
.fn10__grid b {
  font-size: var(--fs-small); font-weight: 700; line-height: 1.45;
  word-break: keep-all; line-break: strict;
}
@media (max-width: 420px) {
  .fn10__ic { width: 58px; height: 58px; border-radius: 17px; }
  .fn10__ic .ic { width: 28px; height: 28px; }
  .fn10__grid { gap: var(--sp-3) 6px; }
}


/* ── はじめかた：1画面に畳む ─────────────────────────────── */
.flow { list-style: none; margin: var(--sp-5) auto 0; padding: 0; max-width: 34em; }
.flow li {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.flow li:last-child { border-bottom: 0; }
.flow b {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: #ea9294; color: var(--ink);   /* 墨文字 6.49 */
  font-size: var(--fs-small); font-weight: 700;
}
.flow span { flex: 1; font-size: var(--fs-body); }
.flow em { flex: none; font-style: normal; font-size: var(--fs-small); color: var(--muted); }

/* ── 申し込みの区画：地を変える（2026-10-03 のご指示） ──────────
   それまでは濃い桃いろ1色の幕だった。最後の画面だけ暗く落ちるので、
   ページ全体の明るさに合わせ、やわらかい桃いろのグラデーションにする。
   文字は濃い墨に戻す（白文字をやめる）。 */
.closing { color: var(--ink); }
.closing__veil {
  background: linear-gradient(160deg, #fff7f4 0%, #ffeef1 48%, #ffe3ea 100%);
}
.closing::before { background: radial-gradient(circle, rgba(246, 201, 180, .5), transparent 62%); }
.closing::after  { background: radial-gradient(circle, rgba(248, 204, 212, .55), transparent 62%); }
.closing h2, .closing p, .closing .closing__who { color: var(--ink); }
.closing .closing__who a { color: var(--accent-2); }
.closing .btn-note { color: var(--ink-soft); }
.closing .btn-note a { color: var(--accent-2); }
/* 6つのあとに置く小見出し。札ごとに「スタンダードから」と書くと、
   390px の3列では字が札からはみ出し、ページ全体が横に広がっていた（487px）。 */
.fn10__more {
  max-width: 760px; margin: var(--sp-6) auto 0;
  font-size: var(--fs-small); font-weight: 700; color: var(--accent-2); text-align: center;
}
.fn10__more + .fn10__grid { margin-top: var(--sp-3); }

/* 「はじめかた」の1行が57字になっていた（読める上限は45字）。
   下の一覧と同じ幅に揃えて中央に置く。 */
#start h2 { text-align: center; }
#start .lead { max-width: 34em; margin-left: auto; margin-right: auto; text-align: center; }
#start .steps__more { text-align: center; margin-top: var(--sp-5); }

/* ── 2026-10-03 その2：等倍で見て直したところ ──────────────────
   「無駄な空白や、見にくい箇所が多い（60点）」というご指摘を受けて、
   1280px の等倍スクショを1区画ずつ見て直した。 */

/* ① PCのヒーロー：右半分（約640px）がまるごと空いていた。
      文字を中央に置いて、空きを無くす。動画は幅を保つ（縮めると中の画面が読めない）。 */
/* ★ 2026-10-06：FVの文字は**すべての画面幅で中央そろえ**（オーナー様の指示）。
   以前は @media (min-width: 901px) の中にあり、901px未満だけが左そろえで
   900pxで128〜177px、390pxで18〜65px 左へずれていた。枠を外して全幅に効かせる。
   .hero-v__say の max-width は上（.hero-v__say）へ合流済み。ここに書き足さない。 */
/* .hero-v__price / .hero-v__cta の justify-content は上の本体へ合流済み（2026-10-06）。ここに書き足さない。 */
.hero-v__to { margin-inline: auto; }
/* 見出しと説明文は、行の長さを揃えて折る（「中で回ります。」だけの行を防ぐ） */
.hero-v h1, .hero-v__def { text-wrap: balance; }


/* ③ 比べる箱：560px しかなく、左右に大きな空きが出ていた（幅は639/643行の本体へ統合済み） */

/* ④ 区画のあいだが上下96pxずつ＝192px あり、1画面ぶん近く空いていた。
      読みの切れ目が分かる範囲で詰める。 */
/* ★ 2026-10-05：PCの区画の上下を 80px → 64px に。区画の切れ目は上下が足されるので
   **160pxの空白**になっていた（全長11,564pxのうち、何も描かれていない帯が1,358px＝11.7%）。
   128pxでも区画の切れ目は十分に分かる。スマホ（48px）は詰まっているので触らない。 */
section { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
@media (max-width: 720px) { section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } }
/* 見出しのすぐ下も詰める */
.fn10 .lead, #start .lead { margin-top: var(--sp-2); }
/* 比べる箱を広げたぶん、下の注記が1行64字になっていた（読める上限は45字）。幅は734行の本体へ統合済み。 */
/* 申し込みの前の文を畳んだとき、「運営者について」が .closing__who の外に出て、
   指で押す44pxの高さを失っていた（24pxしかなかった）。
   この区画の文中リンクは、どこにあっても押せる高さにする。 */
.closing p a { display: inline-block; padding: 8px 2px; margin: -8px 0; }

/* ── 2026-10-03 その3：スマホを等倍で通して直したところ ──────────── */

/* ① 強み：スワイプの案内と「比べる箱」のあいだが99px空いていた */
@media (max-width: 720px) {
  .compare { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-2); }
}

/* ② 比べる箱の見出しと説明：中央そろえのまま、行の長さを揃えて折る。
      「同じことを／するのに、いくらかかるか」のように途中で割れていた。 */
.compare__h, .compare__lead { text-wrap: balance; }

/* ③ ご紹介の絵：白い札の中に小さな絵が1つで、スマホでは206pxが
      ほぼ空白だった。絵を大きくして、札の余白を詰める。 */
@media (max-width: 720px) {
  .refer__art { padding: var(--sp-2); }
  .refer__art svg { width: 100%; height: auto; max-height: 150px; }
}

/* ④ 小さい注記が中央そろえで4〜5行に割れると、行の頭が揃わず読みにくい。
      スマホでは左そろえにする（行頭が揃うと目が迷わない）。 */
@media (max-width: 720px) {
  .compare .note, .refer__note, #referral .note { text-align: left; }
}

/* ── 申し込みボタンを、いちばん強い見た目に戻す（2026-10-03） ──────
   地が暗かったころの名残で、白地にピンクの文字だった。
   地を明るくしたので、**ページでいちばん押してほしいボタンがいちばん弱く**なっていた。
   トップのボタンと同じ、桃いろのグラデーションの塗りに戻す。
   ⚠ .closing .btn は .btn より強いので、矢印の指定も一緒に書き直す必要がある
     （background-image だけ上書きすると矢印が消える）。
   2026-10-23：締めのボタンはフォームの送信から公式LINEのボタン（.line-cta）に替わった。 */
.closing .line-cta .btn {
  background-color: #ea9294;
  color: var(--accent-ink);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 17px 17px, 17px 17px, cover;
  background-position: -26px center, calc(100% - 18px) center, 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322272a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322272a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"),
    var(--accent-grad);
  box-shadow: 0 10px 24px rgba(201, 118, 122, .40);
}
@media (hover: hover) {
  .closing .line-cta .btn:hover { background-color: #e07f82; color: var(--accent-ink); }
}
/* 文節の途中で折らないための印。これまで .hero-v と .fn10 の中だけだったので、
   ほかの区画で使っても効いていなかった（「まず、20日間お／ためしください」と割れた）。 */
.nb { display: inline-block; }

/* ── はじめかたのページ：見出しと「5分」のあいだが54px空いていた ──────
   手順が5つあるので、1つにつき1行ぶんの空きが積もって見える。
   時間の札は見出しのすぐ下に置く。 */
.steps5 h2 { margin-bottom: 0; }
.steps5 .time { margin-top: 10px; }
.steps5 li > p { margin-top: 10px; }

/* ⚠ ここにあった ▶ とぶら下げの指定は、2026-10-05 に下の章（丸い＋）へ移した。
   flex にしたので、折り返した行のぶら下げは要らなくなっている。 */
/* 棒の名前は、文字ではなくロゴで出す（2026-10-03・オーナー様の指示）。
   他社の棒は文字、こちらはロゴ。どちらの棒の話かが、読まずに分かる。 */
/* ⚠ 左の「他社で、同じことをそろえると」と行頭を揃える。
   flex にしただけだと、親の text-align:center が効かなくなる代わりに中央に寄った。 */
.cbar__lab--logo { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.cbar__lab--logo img { height: 20px; width: auto; display: block; }

/* ── 比較の箱と注記の幅（2026-10-03）───────────────────────────
   PCで、棒は966px幅なのに結論の箱は608px・注記は544pxで、
   同じ区画の中に3つの幅が並んでいた。箱は3行・注記は4行に折れ、
   「最新は／各社の公式ページで。」のような切れ方をしていた。
   PCだけ幅を広げ、どちらも2行で収める。スマホ（720px以下）は変えない。 */
@media (min-width: 721px) {
  .compare__take { max-width: 42em; }
  /* 44em だと1行46字になり、社内の上限45字を超えた（2026-10-03 実測） */
  .compare .note { max-width: 43em; }
}

/* ── できること10こ：PCでの散らばりを詰める（2026-10-03）──────────
   3列のまま幅760pxで置いていたので、1列あたり250px。中身は絵68px＋札で
   100px ほどしかなく、札と札のあいだが空きすぎて「置き忘れ」に見えていた。
   PCだけ幅を詰める（スマホは3列ぴったりなので触らない）。
   あわせて、4つのほうの最後の1個が左端に1つだけ残る形を中央に直す。 */
@media (min-width: 721px) {
  .fn10__grid { max-width: 580px; }
  /* ⚠ 2026-10-05：.fn10__grid--more（4列・4項目）にも効いてしまい、4番目の札が
     2列目へ強制されて2番目の札と重なっていた（実測）。3列グリッド専用にする。 */
  .fn10__grid:not(.fn10__grid--more) li:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ご紹介の注記は、PCでも4行に割れて行頭がばらついていた（2026-10-03・等倍で確認）。
   スマホで左そろえにした理由（行頭が揃うと目が迷わない）は、幅に関係なく同じ。
   比較の注記は2行に収まったので、中央そろえのままでよい。 */
@media (min-width: 721px) {
  .refer__note, #referral .note { text-align: left; max-width: 38em; }
}

/* できること10この下の注意書きも、中央そろえで3〜4行に割れて行頭がばらついていた。
   比較・ご紹介の注記と同じ扱いにする（行頭が揃うと目が迷わない）。2026-10-03 */
/* ★ 2026-10-06：箱は中央だが、38em(608px) に対し最長行が500px しかなく、
   左そろえなので余り108px が全部右に出て、文字が54px 左へ寄って見えていた。
   30em にすると ずれは0px（＝ふつうの行末のがたつき）。中央そろえにはしない
   （行頭がばらつくので左そろえへ直した経緯がある）。
   ⚠ この値は**いまの文言に合わせた実測値**。文章を変えたら測り直すこと。 */
.fn10__after {
  margin-top: var(--sp-6); margin-left: auto; margin-right: auto;
  text-align: left; max-width: 30em;
}

/* ご紹介：絵の札（206px）と手順（347px）で高さが141px違い、
   左の列の上下に71pxずつ空きが出ていた（2026-10-04 実測）。
   札を手順と同じ高さまで伸ばし、絵は中で中央に置く。絵自体は大きくしない
   （線画なので引き伸ばすと粗くなる）。 */
@media (min-width: 861px) {
  .refer { align-items: stretch; }
  .refer__art { display: grid; place-items: center; }
}

/* ── できること10こ：説明の吹き出し（2026-10-05）─────────────────
   札だけでは「誰に何が起きるのか」が伝わっていなかった。
   ただし文字を足すと3列・1画面が崩れるので、**ふだんは隠して、知りたい人にだけ出す**。
   PC＝カーソルを合わせる／キーボードの焦点、スマホ＝タップ。
   ⚠ display:none ではなく visibility で隠す。display を切り替えると
     開いた瞬間に高さが変わり、押した指の下で札が動く。 */
.fn10__cell { position: relative; }
.fn10__btn {
  /* 見た目は札のまま。押せることは、触れたときの反応で伝える */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 4px 2px; margin: 0;
  background: none; border: 0; border-radius: 14px;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fn10__btn:hover .fn10__ic,
.fn10__btn:focus-visible .fn10__ic { border-color: var(--accent); }
.fn10__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fn10__btn:active { transform: translateY(1px); }
.fn10__ic { transition: border-color var(--t-hover, .15s) ease; }

/* 2026-10-21（オーナー様の決定）：ページのほかの枠と同じ部品にそろえた。
   もとは枠が札の絵（.fn10__ic）の --accent-2-tint・角丸12px・灰色の濃い影で、
   料金カードや「選ばれる理由」の枠（白・--line の1px・--radius）と別の部品に見えていた。
   ・枠と地 … .reason / .worry__card / .faq-find と同じ（--paper・1px --line・--radius）
   ・影     … 触れたときに出る物なので、おすすめの料金カード・ボタンと同じ --shadow-lift
   ・字     … 大きさは注記（.note）と同じ --fs-small、色は FAQ の答えと同じ --ink-soft
   ・余白   … 8の倍数の --sp-2（もとは 12px 14px で、どの段にも無い値だった） */
.fn10__tip {
  position: absolute; z-index: 5; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 230px;
  padding: var(--sp-2);
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-small); line-height: 1.8; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* 吹き出しの足。枠の色（--line）と地の色を2枚重ねて三角にする。
   上の1枚を √2px（1.414px）ずらすと、斜めの線の太さがちょうど1px＝本体の枠と同じになる
   （45度の辺なので、縦のずれ×0.707 が線の太さ。もとの1.5pxだと1.06px）。 */
.fn10__tip::before,
.fn10__tip::after {
  content: ""; position: absolute; top: 100%; left: var(--tip-x, 50%);
  margin-left: -8px; border: 8px solid transparent;
}
.fn10__tip::before { border-top-color: var(--line); }
.fn10__tip::after { border-top-color: var(--paper); margin-top: -1.414px; }

.fn10__cell:hover .fn10__tip,
.fn10__btn:focus-visible + .fn10__tip,
.fn10__cell.is-open .fn10__tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* 端の列は、まん中そろえだと画面からはみ出す（幅390で53px出ていた）。
   左端は左そろえ、右端は右そろえにして、足だけ札の真上に残す。
   ⚠ 2026-10-05：.fn10__grid--more（4列）には当てない。4番目が3n+1・3番目が3nに
   当たってしまい、4列レイアウトでは位置が合わない（下に専用の規則を新設）。 */
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n + 1) .fn10__tip { left: 0; transform: translateX(0) translateY(4px); --tip-x: 34px; }
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n + 1):hover .fn10__tip,
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n + 1) .fn10__btn:focus-visible + .fn10__tip,
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n + 1).is-open .fn10__tip { transform: translateX(0) translateY(0); }
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n) .fn10__tip { left: auto; right: 0; transform: translateX(0) translateY(4px); --tip-x: calc(100% - 34px); }
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n):hover .fn10__tip,
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n) .fn10__btn:focus-visible + .fn10__tip,
.fn10__grid:not(.fn10__grid--more) > li:nth-child(3n).is-open .fn10__tip { transform: translateX(0) translateY(0); }

/* 4つのほうは最後の1枚だけが中央に来る（下の規則で grid-column:2）。
   その札は3n+1 なので左そろえになってしまう。真ん中に戻す。
   （.fn10__grid--more は対象外なので、ここも影響しない） */
@media (min-width: 721px) {
  .fn10__grid:not(.fn10__grid--more) > li:last-child:nth-child(3n + 1) .fn10__tip {
    left: 50%; right: auto; transform: translateX(-50%) translateY(4px); --tip-x: 50%;
  }
  .fn10__grid:not(.fn10__grid--more) > li:last-child:nth-child(3n + 1):hover .fn10__tip,
  .fn10__grid:not(.fn10__grid--more) > li:last-child:nth-child(3n + 1).is-open .fn10__tip {
    transform: translateX(-50%) translateY(0);
  }
}

/* .fn10__grid--more（4列・4項目）は端の寄せを使わず、既定のまん中そろえのまま。
   1000px幅・1280viewportで計算すると、1番目・4番目の吹き出し（280px幅）も画面内に収まる
   （はみ出さない）。4つとも同じ向き・同じ位置の決まりにする。 */
@media (min-width: 721px) {
  .fn10__grid--more > li .fn10__tip { left: 50%; right: auto; transform: translateX(-50%) translateY(4px); --tip-x: 50%; }
  .fn10__grid--more > li:hover .fn10__tip,
  .fn10__grid--more > li .fn10__btn:focus-visible + .fn10__tip,
  .fn10__grid--more > li.is-open .fn10__tip { transform: translateX(-50%) translateY(0); }
}

/* .fn10__grid--more は 721px 以上でだけ4列。スマホ（〜720px）では基本の6つと同じ3列に並ぶので、
   左端（1・4番目）は左そろえ、右端（3番目）は右そろえにする。そろえないと、3番目の吹き出し（230px）が
   画面の右へ36pxはみ出して、ページ全体が横にずれた（2026-10-06 に site-check が検出）。 */
@media (max-width: 720px) {
  .fn10__grid--more > li:nth-child(3n + 1) .fn10__tip { left: 0; transform: translateX(0) translateY(4px); --tip-x: 34px; }
  .fn10__grid--more > li:nth-child(3n + 1):hover .fn10__tip,
  .fn10__grid--more > li:nth-child(3n + 1) .fn10__btn:focus-visible + .fn10__tip,
  .fn10__grid--more > li:nth-child(3n + 1).is-open .fn10__tip { transform: translateX(0) translateY(0); }
  .fn10__grid--more > li:nth-child(3n) .fn10__tip { left: auto; right: 0; transform: translateX(0) translateY(4px); --tip-x: calc(100% - 34px); }
  .fn10__grid--more > li:nth-child(3n):hover .fn10__tip,
  .fn10__grid--more > li:nth-child(3n) .fn10__btn:focus-visible + .fn10__tip,
  .fn10__grid--more > li:nth-child(3n).is-open .fn10__tip { transform: translateX(0) translateY(0); }
}

/* 721〜1100px は、4列でも画面の幅が足りない（768pxで4番目の吹き出しが32px右へはみ出した）。
   1番目は左そろえ、4番目は右そろえにする。1101px以上は、上の「まん中そろえ」で収まる（1280pxで実測）。 */
@media (min-width: 721px) and (max-width: 1100px) {
  .fn10__grid--more > li:first-child .fn10__tip { left: 0; transform: translateX(0) translateY(4px); --tip-x: 34px; }
  .fn10__grid--more > li:first-child:hover .fn10__tip,
  .fn10__grid--more > li:first-child .fn10__btn:focus-visible + .fn10__tip,
  .fn10__grid--more > li:first-child.is-open .fn10__tip { transform: translateX(0) translateY(0); }
  .fn10__grid--more > li:last-child .fn10__tip { left: auto; right: 0; transform: translateX(0) translateY(4px); --tip-x: calc(100% - 34px); }
  .fn10__grid--more > li:last-child:hover .fn10__tip,
  .fn10__grid--more > li:last-child .fn10__btn:focus-visible + .fn10__tip,
  .fn10__grid--more > li:last-child.is-open .fn10__tip { transform: translateX(0) translateY(0); }
}

/* 動きを止める設定の方には、動かさずに出す */
@media (prefers-reduced-motion: reduce) {
  .fn10__tip { transition: none; transform: translateX(-50%); }
  .fn10__grid:not(.fn10__grid--more) > li:nth-child(3n + 1) .fn10__tip,
  .fn10__grid:not(.fn10__grid--more) > li:nth-child(3n) .fn10__tip { transform: translateX(0); }
}
/* 上の「スマホで --more も3列」の分。721px以上の4列には当てない（当てると中央そろえが崩れる） */
@media (prefers-reduced-motion: reduce) and (min-width: 721px) and (max-width: 1100px) {
  .fn10__grid--more > li:first-child .fn10__tip,
  .fn10__grid--more > li:last-child .fn10__tip { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .fn10__grid--more > li:nth-child(3n + 1) .fn10__tip,
  .fn10__grid--more > li:nth-child(3n) .fn10__tip { transform: translateX(0); }
}

/* 1行目の札は、吹き出しを**下に**出す。上に出すと区画の見出しと説明文を覆ってしまう
   （2026-10-05、等倍で確認）。足も上下ひっくり返す。
   .fn10__grid--more は4つとも1行目にあたるので、4つとも同じ扱いにする。 */
.fn10__grid:not(.fn10__grid--more) > li:nth-child(-n + 3) .fn10__tip,
.fn10__grid--more > li .fn10__tip {
  bottom: auto; top: calc(100% + 10px);
}
.fn10__grid:not(.fn10__grid--more) > li:nth-child(-n + 3) .fn10__tip::before,
.fn10__grid:not(.fn10__grid--more) > li:nth-child(-n + 3) .fn10__tip::after,
.fn10__grid--more > li .fn10__tip::before,
.fn10__grid--more > li .fn10__tip::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
}
.fn10__grid:not(.fn10__grid--more) > li:nth-child(-n + 3) .fn10__tip::before,
.fn10__grid--more > li .fn10__tip::before { border-bottom-color: var(--line); }
.fn10__grid:not(.fn10__grid--more) > li:nth-child(-n + 3) .fn10__tip::after,
.fn10__grid--more > li .fn10__tip::after {
  border-bottom-color: var(--paper); margin-top: 0; margin-bottom: -1.414px;
}
/* PCは横に余裕があるので、1行あたりの字数を増やして行数を減らす（6行→4行） */
@media (min-width: 721px) {
  .fn10__tip { max-width: 280px; }
}

/* タップで開いた札は、どれを押したのか分かるように縁を濃くする
   （スマホには hover が無いので、これが無いと吹き出しの持ち主が分からない） */
.fn10__cell.is-open .fn10__ic { border-color: var(--accent); }

/* ── よくあるご質問のページ：開閉の印を、トップと同じ丸い＋にする（2026-10-05）──
   ブラウザ既定の ▶ のままで、トップページの質問（丸い＋が45度回って×になる）と
   見た目が揃っていなかった。/about の箇条書きが黒丸だったのと同じ型。
   flex にすると折り返した行も自然に揃うので、ぶら下げの指定は要らなくなる。
   あわせて、触れる高さを44pxにする（1行の質問が29pxしかなかった）。 */
.faq-page summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding-left: 0; text-indent: 0; min-height: 44px;
  list-style: none; cursor: pointer;
}
.faq-page summary::marker { content: ''; }
.faq-page summary::-webkit-details-marker { display: none; }
.faq-page summary::after {
  content: '+';
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-h3); font-weight: 400; line-height: 1;
  transition: transform var(--dur-enter) var(--ease-out),
              background-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
}
.faq-page summary:hover { color: var(--accent); }
.faq-page summary:hover::after { background: var(--accent); color: #ffffff; box-shadow: none; }
.faq-page details[open] > summary::after { transform: rotate(45deg); }
/* 2026-10-27（統合の直し site3-23・24・43）：問いが2行に折れると、2行目が「す」「か？」だけになり、
   開いた答えと同じ太さ・同じ色で、ひと続きの段落に見えていた。問いは太字・行の長さをそろえ（balance）、答えとの間を空ける */
.faq-page summary { font-weight: 700; text-wrap: balance; }
.faq-page details[open] > summary + p { margin-top: var(--sp-1); padding-bottom: var(--sp-2); color: var(--ink-soft); }

/* 料金の下の3枚の札も、文の長さが違うぶん短い札の下が空いていた（約70px・2026-10-05）。
   中身を縦の中央に置く。（2026-10-06：以前は、いまは無い困りごと4枚と同じ扱いだった） */
@media (min-width: 861px) {
  .plan-notes li { display: flex; flex-direction: column; justify-content: center; }
}

/* 2026-10-06 オーナー様のご指示：FVを全幅で中央そろえ（本採用は媒体クエリの枠を外す） */
.hero-v__say   { max-width: 40em; margin-inline: auto; text-align: center; }
.hero-v__price { justify-content: center; }
.hero-v__cta   { justify-content: center; }
.hero-v__to    { margin-inline: auto; }
.hero-v h1, .hero-v__def { text-wrap: balance; }

/* 2026-10-06 オーナー様のご指示：注意書きの幅を文に合わせる（1文消したので 32em → 29em） */
.fn10__after { max-width: 29em; }

/* 2026-10-06 オーナー様のご指示：強みの is-center の札に色を当てる（オーナー様のご指示） */
@media (max-width: 720px) {
  .reasons.swipe .reason.is-center .reason__art {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
  }
}

/* 2026-10-06 オーナー様のご指示：スマホでは demo2__cap を出さない（オーナー様のご指示） */
@media (max-width: 720px) { .demo2__cap { display: none; } }

/* 2026-10-06 オーナー様のご指示：is-center の札に帯の色を移す（オーナー様のご指示） */
@media (max-width: 720px) {
  .plans.swipe .plan.is-center .plan-head {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
    color: var(--ink);
  }
  .plans.swipe .plan.is-center .plan-head .plan-name,
  .plans.swipe .plan.is-center .plan-head .plan-price { color: var(--ink); }
  .plans.swipe .plan.is-center .plan-head .plan-for,
  .plans.swipe .plan.is-center .plan-head .note,
  .plans.swipe .plan.is-center .plan-head .plan-price small { color: rgba(34, 39, 42, .80); }
  /* 中央にいない「おすすめ」は、淡いほうに戻す（色が2枚に出ると主役が消える） */
  .plans.swipe .plan--pick:not(.is-center) .plan-head { background: var(--accent-tint); }
  .plans.swipe .plan--pick:not(.is-center) .plan-head .plan-for,
  .plans.swipe .plan--pick:not(.is-center) .plan-head .note,
  .plans.swipe .plan--pick:not(.is-center) .plan-head .plan-price small { color: var(--muted); }
}

/* 2026-10-06 オーナー様のご指示：ほか◯つを見る の左右に、他の要素と同じ余白を付ける */
@media (max-width: 720px) {
  .plans.swipe .plan > .more { margin-left: var(--sp-3); margin-right: var(--sp-3); }
}

/* 2026-10-06 オーナー様のご指示：swipe-count を出さない（オーナー様のご指示） */
@media (max-width: 720px) { .swipe-count { display: none; } }

/* 2026-10-06 オーナー様のご指示：分類ボタンで送った先が、固定バーの下に隠れないように */
.faq-group { scroll-margin-top: 76px; }

/* 2026-10-06 オーナー様のご指示：上のバーを常に出す（スマホ）。ロゴ／相談する／ハンバーガー */
.head-cta { display: none; }
@media (max-width: 900px) {
  .site-head { position: sticky; top: 0; z-index: 20; }
  .nav .nav__cta { display: none; }              /* ハンバーガーの中の「相談する」は重複なので隠す */
  .head-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px; white-space: nowrap;   /* 指で押す下限44px（design-audit D5） */
    background-image: none;                      /* 矢印は入れない（幅が足りない） */
    font-size: var(--fs-small);
  }
}


/* 2026-10-06 オーナー様のご指示：比べる棒を肌色〜淡い黄に、選択中の点を薄く
   灰みのベージュ（H37 S24%）では「黄色っぽく」のご指示に届かないので、
   色相はそのままに**彩度を 24% → 約52%** へ上げた（H38〜40・暖かい側） */
/* 他社の棒：白っぽく・黄色っぽく（色相 H38〜40 → H42〜44、明度も上げた）。
   さらに**上から光が当たったような縦のグラデーション**を重ねる（上が明るく、下へ落ちる）。
   地の色は変えず、白い光を上に薄くかけるだけなので、墨文字との比は下の値より良くなる方向。 */
/* 色はそのまま、面はベタ塗りに戻す（2026-10-06 午後・オーナー様のご指示） */
.seg--base { background: #f4e7a4; }   /* H50 S78 L80・墨 12.08 */
.seg--op1  { background: #f8efc4; }   /* H50 S78 L87・墨 13.03 */
.seg--op2  { background: #fbf5db; }   /* H50 S78 L92・墨 13.79 */
.seg--op3  { background: #fdfaed; }   /* H50 S78 L96・墨 14.42 */
.seg--ours { background: #e8d173; color: var(--accent-ink); }  /* H48 S72 L68・墨 9.92 */
/* 選択中の点：#33323e（地との差 12.12）は濃すぎた。棒に合わせて暖かい側へ。
   #8a7c62 で 消えている点との差 3.19／地との差 3.93。1.5倍の拡大と併せて見分けられる */
.swipe-dots button[aria-current="true"] span { background: #c63a5e; }   /* 濃いピンク。地との差 5.04 */

/* 2026-10-06 オーナー様のご指示：「おすすめ」の札を元の桃いろへ戻す（オーナー様のご指示）。
   札は background: var(--accent) で、--accent が #c63a5e → #33323e に変わったため黒くなっていた。
   白文字とのコントラストは 5.04（基準4.5）。 */
.plan-tag,
.plans .plan-tag,
.plans.swipe .plan-tag { background: #c63a5e; color: #ffffff; }

/* 2026-10-06 オーナー様のご指示：おすすめ枠を走る「黒い線」を消す（オーナー様のご指示）。
   正体は .plan--pick の 2px の枠線で、ぐるぐる回るグラデーションの両端が
   var(--accent)（#33323e＝墨）になっていた。桃いろの側に替える。 */
.plan--pick {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(115deg, #ea9294 0%, var(--brand-rose) 30%, var(--brand-lav) 62%, #ea9294 100%) 0 0 / 200% 100% border-box;
}

/* 2026-10-06 オーナー様のご指示：「LINEで相談する」の色を元へ戻す（オーナー様のご指示）。
   var(--accent) 由来で墨（#33323e）に変わって黒く見えていた。公開中のサイトと同じ桃いろへ。 */
.btn--line {
  background: var(--paper); color: #a32a4d;                  /* 生成り地 6.54 */
  border: 1.5px solid #c63a5e;
}
.btn--line:hover { background: var(--accent-tint); color: #a32a4d; }

/* 2026-10-06 オーナー様のご指示：はじめかたの番号の地を薄く（オーナー様のご指示）。
   var(--accent)（#33323e＝墨）に白文字だった。桃いろの面＋墨文字へ（比 6.49）。 */
.flow b { background: #ea9294; color: var(--accent-ink); }
/* ご紹介の区画の番号も、はじめかたと同じ色に揃える（オーナー様のご指示）。
   こちらも var(--accent) 由来で墨の丸になっていた。 */
.refer__no { background: #ea9294; color: var(--accent-ink); }

/* 2026-10-06 オーナー様のご指示：PCでも3枚すべての札に色を付ける（オーナー様のご確定）。
   どれがおすすめかは、桃いろの「おすすめ」札（.plan-tag）が担う。 */
@media (min-width: 721px) {
  .plans .plan .plan-head {
    background:
      radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .5), transparent 52%),
      linear-gradient(150deg, #faab96 0%, #ea9294 52%, #ccb3e4 100%);
    color: var(--ink);
  }
  .plans .plan .plan-head .plan-name,
  .plans .plan .plan-head .plan-price { color: var(--ink); }
  .plans .plan .plan-head .plan-for,
  .plans .plan .plan-head .note,
  .plans .plan .plan-head .plan-price small { color: rgba(34, 39, 42, .80); }
}

/* はじめかたの下の但し書き（.flow__note）は 2026-10-26 運営者の指示で外した（site/index.html）。⑦の強調（.flow__last）も同じ日に外した */

/* 料金の札の下に置く1行の注記（2026-10-09）。
   .note のままだと PC で1行が長くなりすぎるので、読める幅（全角40字）に絞って中央に置く。 */
.plan-soon {
  max-width: 40em; margin: var(--sp-4) auto 0; text-align: center;
}

/* ── スマホでは、長い本文を中央揃えにしない（2026-10-10）── ja-wrap W2 ──
   オーナー様がスマホで読んで「左右がでこぼこで読みにくい」とご指摘。
   中央揃えは行の左端がそろわないので、3行を超えると目が戻る場所を探すことになる。
   390px で4〜7行になっていたのは、料金のリード・比べる文・10の機能の札・
   はじめかたのリード・締めの文・注記（Googleカレンダー／LINE公式／出どころ）。
   **見出しと、1〜2行で収まる短い札は中央のまま。** 本文だけ左にそろえる。
   PC（1280）ではどれも3行以内なので、ここはスマホだけに当てる。
   数えているのは tools/ja-wrap.mjs（--width=390）。 */
@media (max-width: 720px) {
  .lead,
  .section-lead,
  .compare__lead,
  .compare__take,
  .closing__who,
  .note.plan-soon,
  .note.unify__src,
  #start .lead,   /* id 付きの指定（2264行）に負けるので、ここでも名指しする */
  .fn10__tip {
    text-align: left;
  }
}



/* 長い注記は、どの幅でも左そろえ（2026-10-11）。
   text-wrap: pretty を外したぶん行数が増え、PC でも4行の中央揃えになった。
   中央揃えは行の左端がそろわないので、3行を超えると目が戻る場所を探すことになる
   （2026-10-10 のスマホの判断と同じ。数えているのは ja-wrap の W2）。 */
.note.plan-soon,
.note.unify__src {
  text-align: left;
}

/* 比べる文は、スマホでは行をそろえない（2026-10-11）。
   text-wrap: balance も Safari では行の長さをならすので、左揃えにした4行が
   右に大きく空いて、塊ごと左に寄って見えた（pretty と同じ型）。
   見出し（h1〜h3・FVの一文）は2〜3行で収まるので balance のままでよい。 */
@media (max-width: 720px) {
  .compare__lead { text-wrap: wrap; }
}

/* ── salonfix-site（2026-10-26） ── */

/* 公式LINEのボタンをパソコンで押した時の窓（site/assets/line-add.js?v=d77dcbd1）。
   スマホでは出ない（押すと今まで通り LINE アプリが開く）。値はトークンだけ。
   幅は画面より細くなれる作り（min()。中の ID の箱も折り返せる） */
.line-add {
  width: min(32rem, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  margin: auto; padding: 0; border: none; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 64px rgba(34, 39, 42, .24);
  overflow: auto; overscroll-behavior: contain;
}
.line-add::backdrop { background: rgba(34, 39, 42, .5); }
.line-add__in { position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
/* button は既定で書体を受け継がない（Safari では端末の書体になっていた） */
.line-add button { font-family: inherit; }
.line-add .line-add__h {
  margin: 0 var(--sp-5) 0 0; font-size: var(--fs-h3); line-height: 1.5; text-align: left; text-wrap: wrap;
}
.line-add__lead { margin-top: var(--sp-1); color: var(--ink-soft); line-height: 1.8; }
/* × は窓の上に留める（sticky）。背の低い画面（1280×560 など）で「スマホで追加する場合」を開くと窓の中が流れ、
   absolute の × は中身と一緒に上へ流れて半分切れていた（2026-10-26 レビュー）。
   流れの中に置き、外側の余白の分だけ負の margin で右上へ寄せる（見出しの位置は今まで通り） */
.line-add__x {
  position: sticky; top: var(--sp-2); z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: calc(var(--sp-2) - var(--sp-4)) calc(var(--sp-2) - var(--sp-4)) calc(var(--sp-4) - var(--sp-2) - 44px) auto;
  border: none; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
}
.line-add__x:hover { background: var(--accent-tint); }
.line-add__id {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-3); padding: var(--sp-2); border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--line);
}
.line-add__id > * { min-width: 0; }
.line-add__cap { flex: 1 0 100%; font-size: var(--fs-small); color: var(--muted); }
.line-add__val { flex: 1 1 auto; font-size: var(--fs-h3); letter-spacing: .06em; user-select: all; }
.line-add .line-add__copy { flex: none; box-shadow: none; }
.line-add__msg { min-height: 1.8em; margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 700; color: var(--accent); }
.line-add__steps { margin: var(--sp-1) 0 0; padding-left: 1.6em; line-height: 1.8; }
.line-add__steps li + li { margin-top: 4px; }
.line-add__sp { margin-top: var(--sp-3); border-top: 1px solid var(--line); }
.line-add__sp summary {
  display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; padding: var(--sp-1) 40px 0 0;
  position: relative; font-weight: 700; cursor: pointer; list-style: none;
}
.line-add__sp summary::-webkit-details-marker { display: none; }
/* 開け閉めの印（FAQ と同じ「＋」。開いたら45度回して「×」に） */
.line-add__sp summary::after {
  content: "+"; position: absolute; right: 4px; top: calc(50% + 4px); transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid #948f98; font-weight: 400; line-height: 1;
}
.line-add__sp[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.line-add__qr { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-1); }
.line-add__qr img { flex: none; width: 128px; height: 128px; }
.line-add__qr p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.8; }
.line-add__web { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--muted); line-height: 1.8; }
.line-add__web a { display: inline-block; padding-block: 6px; color: var(--accent); font-weight: 700; }