@charset "UTF-8";
/* ==========================================================================
   興運堂LP スタイル
   正本:docs/02_デザイン仕様.md / 色は docs/01b_ブランドカラー.md
   色の値をこのファイルで書き換えないこと。

   2026-08-24:docs/06_修正判断シート.md の判断(46件)を反映
   ========================================================================== */

/* ==========================================================================
   1. トークン
   ========================================================================== */
:root {
  /* ── ブランド(docs/01b_ブランドカラー.md が正本。変更禁止) ── */
  --color-primary:         #8C6B22;
  --color-primary-dark:    #6E541B;
  --color-secondary:       #104A94;
  --color-secondary-dark:  #0D3D7A;
  --color-secondary-light: #2E6BB8;

  /* さがみ典礼へ行く導線の色（2026-09-03）。さがみ典礼サイトの主色から。
     明るい地では -dark を使う。#008563 はオフホワイト地で4.25:1（AA未達）、
     #00543F なら8.24:1。金茶と同じ扱い */
  --color-parent:      #008563;
  --color-parent-dark: #00543F;

  /* ── 背景 ── */
  --color-bg:      #FFFFFF;
  --color-bg-alt:  #F7F5F0;
  --color-bg-dark: #0D3D7A;

  /* ── 文字 ── */
  --color-text:         #1A1A1A;
  --color-text-sub:     #55524C;
  --color-text-on-dark: #FFFFFF;

  /* ── 罫線 ── */
  --color-border:        #DDD7CA;
  --color-border-strong: #BDB5A4;

  /* ── 書体 ── */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
  --font-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* ── 余白(基本単位 4px) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* ── 画像の表示上限(縮小設計) ──
     支給写真は既存サイト用の書き出しで原寸が小さい。CSSの表示幅を原寸以下に抑え、
     拡大によるぼやけを出さないための上限値。
     高解像度の写真が入手できたら、この値を上げるだけで大きく見せられる。 */
  --img-ihai-max:     140px; /* 原寸 160×286 */
  --img-butsudan-max: 230px; /* 原寸 253×427 */
  --img-boseki-max:   440px; /* 原寸 464×244 */
  --img-shop-max:     460px; /* 原寸 480×269 */
  --img-shop-sm-max:  162px; /* 原寸 162×112 */
  /* 施工前後の合成1枚（cleaning-before-after.png・原寸375×129）用。
     判断Q23で2枚に切り出したため現在は未参照。合成版に戻す場合のみ使う */
  --img-cleaning-max: 375px;

  /* ── 寸法 ── */
  --header-h:   72px;
  /* 器の幅。1080pxでは本文(640px)との差が大きく、PCで本文が左に寄って見えた。
     880pxに詰めたうえで本文ブロックを器の中で中央に置く(2026-08-24)。
     880px の根拠:位牌5列(1枚168px・写真140px)・墓石2列(1枚428px・写真440px上限)・
     仏壇3列(1枚277px・写真230px)がいずれも拡大せずに収まる最小幅。 */
  --content-w:  880px;
  --prose-w:    640px;
  --hero-w:     720px;
  --gutter:      20px;
  --section-y:   56px;
  --sticky-h:    64px;
}

@media (min-width: 768px) {
  :root {
    /* 104px:ロゴ52px＋クリアスペース26px×2(=ロゴ高の1/2、仕様§6)。
       判断Q41で88px＋ロゴ44pxを選んだが、ロゴ幅81pxが仕様の最小80pxの
       1px上という状態になったため、判断Q22でロゴを仕様のPC値52pxに戻した */
    --header-h: 104px;
    --gutter:    32px;
    --section-y: 96px;
  }
}

/* タブレットでは仏壇の写真上限を下げて3列を維持する(判断Q30) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --img-butsudan-max: 165px; }
}

/* ==========================================================================
   2. リセット(最小限)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body { font-size: 17px; padding-bottom: 0; }
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* 和文の折り返し(第2回レビュー 第1位 / 判断Q1)
   `text-wrap: pretty` は最終行が極端に短くなるのを抑えるが、
   **和文の語中改行は防げない。**実測でSP58件・PC29件が「ご相談いた／だく」の
   ように単語の途中で割れていた。`word-break: auto-phrase` は形態素の境界で
   折り返すので、これを併用する。
   実測:語中改行 58→12件、孤立行 9→0件、ページ全高 +267px(1.6%)。
   非対応ブラウザは無視するだけで崩れない。 */
/* 2026-08-25:見出しを対象に加えた。375pxで h3 が
   「その場でお決めいただ／く必要はございません」と語中で割れていた */
h1, h2, h3, h4,
p, li, dd, figcaption, .card__body, .faq__text, .steps__title, th, td {
  text-wrap: pretty;
  word-break: auto-phrase;
}

a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-secondary-dark); }

:focus-visible {
  outline: 3px solid var(--color-secondary-dark);
  outline-offset: 2px;
}
.on-dark :focus-visible { outline-color: var(--color-text-on-dark); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-secondary-dark); color: var(--color-text-on-dark);
  text-decoration: none; font-weight: 700;
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); color: var(--color-text-on-dark); }

/* ==========================================================================
   3. 文字の階層
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
  text-wrap: balance;
}
h1 { font-size: 26px; line-height: 1.5; }
h2 { font-size: 21px; line-height: 1.55; }
/* h4 は h3 と同じ見え方にする。カードの見出しは直前の階層に応じて h3 / h4 になるため。
   2026-08-24:17/20px → 18/22px に引き上げ(判断Q10)。
   リード文(18/21px)より見出しが小さく、書体・色も同一だったため
   階層が1つに見えていた。見出しを上げて大小を正しい順にする。 */
h3, h4 { font-size: 18px; line-height: 1.6; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3, h4 { font-size: 22px; }
}

/* リード文。本文と同寸では階層が成立しないため、本文より一段大きくする(判断Q25)
   デザイン仕様§2の表(SP16/PC18)を、この値に改訂 */
.lead {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.85;
  /* 2026-08-24:見出しと同じ紺(#104A94)から補足のグレーに変更。
     SPではリード18px・h3 18pxで同寸になり、書体・色も同一だったため
     階層が読み取れなかった。色を分けて「紺＝見出し / グレー＝前置き」にする。
     注記(.note)と同じ色だが、リードは明朝18〜21px・注記はゴシック13〜14pxで
     書体も大きさも大きく違うため混同しない。
     コントラスト:白地7.78:1 / オフホワイト地7.15:1(いずれもAA合格)。 */
  color: var(--color-text-sub);
  margin-bottom: var(--space-5);
  text-align: left;
  text-wrap: pretty;
}
@media (min-width: 768px) { .lead { font-size: 21px; } }

.note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .note { font-size: 14px; } }

/* 和文の折り返し制御:文節を inline-block で包み、文節内では折り返さない */
.clauses > span { display: inline-block; }

/* ==========================================================================
   4. レイアウト
   ========================================================================== */
.container { width: 100%; max-width: var(--content-w); margin-inline: auto; padding-inline: var(--gutter); }

/* 器の中に置く要素は、次の2種類だけにする(2026-08-24)。
   これ以外の中間の幅を作らないこと。
     1. カード群・表   … 器いっぱい(816px)。器が中央なので画面の中心に乗る
     2. それ以外すべて … 本文の列(.prose / 640px)。見出し・本文・図版・囲み・帯・注記
   →意図:図版や囲みを器の左端に置くと、本文の列より左に飛び出して
     「本文とずれている」ように見える。実測で店内写真は画面の中心から
     178pxずれていた。本文の列に入れれば左端が一致する。 */

/* 本文の版面。
   2026-08-24 改訂:器を880pxに詰めたうえで、本文ブロックを器の中で中央に置く。
   →意図:左端を1本に統一する目的(スクロール時に見出しが泳がないこと)は、
     版面幅を640pxに揃えたことで達成できている。そのうえで器の左端に
     寄せると、1585px幅の画面で左285px:右660pxと左に寄って見えた。
     器を詰めて中央に置くと左469px:右470pxでほぼ均等になる。
     本文そのものは左揃えのまま(和文の長文を中央揃えにしない)。 */
.prose { max-width: var(--prose-w); margin-inline: auto; }
.prose p, .prose li { max-width: 38em; }

/* 器が880pxに達しない 704〜879px の幅では、器の内側(689px)と本文の列(640px)の
   差が0〜88pxの途中の値になり、24.5pxという半端なずれが生じていた(判断Q12)。
   この帯では本文の列を器いっぱいにして、左端を1種類に揃える。
   行長は `.prose p { max-width: 38em }` が効くので646pxのまま保たれる。 */
@media (max-width: 879px) { :root { --prose-w: 100%; } }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }

/* 区画の末尾が「囲みのあるCTA帯」のときは、その下に地色の帯を作らない(判断Q24)。
   帯の下辺の罫線が区画の境目と重なり、切れ目が1本になる。

   2026-08-24 修正:`.cta--plain`(囲みのないボタン単体)を除外する。
   除外しないと、ボタンの下端が区画の境目と一致してしまい、
   ボタンの真下で地色が変わる。実測でボタン下端から境目まで0pxだった。 */
.section:has(> .cta:last-child:not(.cta--plain)) { padding-bottom: 0; }

/* セクション見出し:上に幅32px・太さ2pxの金茶の短い罫 */
.section-title { margin-bottom: var(--space-5); }
.section-title::before {
  content: ""; display: block;
  width: 32px; height: 2px; margin-bottom: var(--space-4);
  background: var(--color-primary);
}
/* 見出しの下に列いっぱいの1pxの罫を引く（2026-08-25）。
   →意図:見出しの文字は短く（例「所在地とアクセス」244px）、
     640pxの列の62%が空いて「取り残した空白」に見えていた。
     行の右側を罫で埋めると、左揃えが意図した形として読める。
   金茶の短罫（上）＝アクセント / この罫（下）＝行の締め、で役割が違う。
   中央揃えの見出し（クロージング）には引かない。左揃えの列でのみ効く手当て */
.section-title:not(.clauses)::after {
  content: ""; display: block;
  height: 1px; margin-top: var(--space-4);
  background: var(--color-border);
}
/* 見出しの罫の直後に上罫を持つ要素が来ると、同じ1pxの罫が32px間隔で
   2本並んで二重罫に見える。見出しの罫が「行の締め」の役なので、
   直後の要素の上罫を落とす。
   実測でLPのFAQ（.faq__item:first-of-type）と店舗ページの .spec が該当。
   囲みを持つ要素（.card / .steps-box / .checklist）は面として読めるので対象外 */
/* FAQは見出しが .prose の中、.faq がその次の兄弟という構造 */
.prose + .faq .faq__item:first-of-type,
.section-title + .spec { border-top: 0; }
@media (min-width: 768px) { .section-title { margin-bottom: var(--space-6); } }

.block { margin-top: var(--space-6); }
@media (min-width: 768px) { .block { margin-top: var(--space-7); } }

/* h3 の前後の余白。.block > h3 だけでは .prose 配下の h3 に当たらなかった(判断Q3) */
.prose h3, .block h3, .prose h4 { margin-bottom: var(--space-4); }
h3 + p, h3 + ul, h3 + ol, h4 + p, h4 + ul { margin-top: 0; }
.prose > h3:not(:first-child) { margin-top: var(--space-6); }
@media (min-width: 768px) {
  .prose > h3:not(:first-child) { margin-top: var(--space-7); }
}

/* ==========================================================================
   5. ヘッダー
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.header__inner {
  width: 100%; max-width: var(--content-w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

/* ロゴ:高さで指定し、幅は縦横比 1:0.5418 から自動。最小幅80px。
   SPは44px(幅81px)、PCは仕様§6のとおり52px(幅96px)。
   2行組みのロゴなので、大きいほうが上段「仏壇・仏具の」が読みやすい(判断Q22) */
.logo { height: 44px; width: auto; min-width: 80px; }
@media (min-width: 768px) { .logo { height: 52px; } }

/* PCにはページ内に常時見える電話番号がないため、ヘッダーに置く(判断Q22)
   塗りボタンにはせず、主CVとの優劣は保つ */
.header__tel {
  display: none;
  text-align: right; text-decoration: none; line-height: 1.25;
  color: var(--color-primary-dark);
}
.header__tel:hover { color: var(--color-primary-dark); text-decoration: underline; }
.header__tel small { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.header__tel strong { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  /* 実測43.8pxで、仕様§7の最小44pxをわずかに下回っていた（2026-08-25 発見）。
     タブレット幅では指で押す要素なので下限を明示する。
     小さい文字と大きい数字を積んだ高さの合計に任せない */
  .header__tel {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
    min-height: 44px;
  }
}

/* ==========================================================================
   6. ヒーロー(S1)
   ========================================================================== */
/* 2026-08-24:PC幅で横の61%が空白になり、初回表示に画像が0%という
   指摘があった。写真は追加せず、地色をオフホワイトにしてCTA帯を白へ
   反転する(B案)。色は既存トークンのみ。 */
/* 判断Q2:下の余白と罫線を外す。
   ヒーローは `.section` を持たないため `:has(> .cta:last-child)` の対象外で、
   白のCTA帯の下にオフホワイト97px(PC)/65px(SP)が残り、その終端の1px罫が
   **上下同色の空白の中に浮いていた。**
   0にすると白帯の下辺がそのまま区画の境目になり、切れ目が1本の罫だけになる。
   白帯がS2との切り替えを担うので、地色の交互の原則も実質的に保たれる。 */
.hero {
  padding-block: var(--space-7) 0; text-align: center;
  background: var(--color-bg-alt);
}
/* 表示高720pxのPCで電話ボタンが初回表示に入らなかった（上端753px）。
   ヒーロー内だけ上余白を32pxにして737pxに上げる（2026-08-25） */
.hero .cta { background: var(--color-bg); margin-top: var(--space-6); }
/* 2026-08-25:一括指定が321行の「下0」を上書きしていた。
   判断Q2で消したはずの空帯が768px以上で復活しており、
   次の区画が白地の店舗ページで露出した（実測96px）。下は0のまま維持する */
@media (min-width: 768px) { .hero { padding-block: var(--space-9) 0; } }
.hero__inner { max-width: var(--hero-w); margin-inline: auto; padding-inline: var(--gutter); }

/* このLPの訴求の核。最も小さく最も淡い文字になっていたのを立てる(判断Q42) */
.hero__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: 15px; font-weight: 700; line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
}
@media (min-width: 768px) { .hero__eyebrow { font-size: 16px; } }

/* 公式キャッチの3行組み。1行が最長14文字でSP幅にも収まるため中央揃え */
.hero__lead { max-width: 38em; margin-inline: auto; margin-bottom: 0; text-align: center; }

.rule-accent { width: 32px; height: 2px; margin: var(--space-5) auto; background: var(--color-primary); }

/* 用件の入口3つ。CTA帯と同じ地色で地続きに見えていたので白地にする(判断Q44) */
.entry {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
  max-width: 480px; margin: var(--space-6) auto 0; list-style: none;
}
/* 2026-08-25:ラベルを14→16pxにしたところ、375pxで「お位牌の／こと」と
   2行になった。実測で文字98.4px・使える幅98.33pxと0.07px足りないだけ。
   列の間隔を4pxに詰めて使える幅を101pxにする */
@media (max-width: 767px) { .entry { gap: var(--space-1); } }
/* 2026-09-03:店舗ページの入口「ご来店にあたって」が
   「ご来／店　にあたっ／て」と2列に割れていた。
   .clauses の <span> が flex の横並び部品になり、縮んだ中で折り返っていた。
   SPだけ縦並びにする。PCは幅が足りていて横並びのまま1行に見えるので触らない */
@media (max-width: 767px) {
  .entry__link.clauses { flex-direction: column; }
}
.entry__link {
  display: flex; align-items: center; justify-content: center;
  /* height:100% を入れないと、ラベルが2行になった入口だけ背が高くなる。
     grid の li は伸びるが、その中の a は中身の高さで止まるため
     (2026-08-25 店舗ページで「ご来店にあたって」が2行になり 52/57/52px にばらけた)。
     LPは3つとも1行なので、この指定を入れても寸法は変わらない */
  height: 100%;
  min-height: 52px; padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-bg); color: var(--color-secondary);
  /* 仕様§2「ボタン内のラベル16px」。14pxで弱く見えていた（2026-08-25） */
  font-size: 16px; font-weight: 700; line-height: 1.4;
  /* 6文字のラベルでは字間0.02emが効いて1行に収まらない。
     短いボタンのラベルなので字間は詰める */
  letter-spacing: normal;
  text-decoration: none;
}
/* PCで入口3つを強める(判断Q21)。
   入口155×56px×3 に対し電話ボタンは332×82pxで面積比1:3.6。構成案S1は
   「CTAは置くが主役にしない。まず名乗り、用件の入口3つを示すことを優先」と
   定めているのに、視覚的な優劣が逆になっていた。
   3商材LPで最も起きやすい離脱(自分の用件がどこにあるか分からない)への手当て。 */
@media (min-width: 768px) {
  .entry { max-width: var(--prose-w); }
  .entry__link { font-size: 16px; min-height: 64px; }
}
.entry__link:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-text-on-dark); }

/* ==========================================================================
   7. CTA区画とボタン
   ========================================================================== */
/* 囲みのあるCTA。構成案の「二枚看板」= S3 お位牌 と S11 クロージング のみ(判断Q19) */
.cta {
  margin-top: var(--space-7);
  padding: var(--space-6) var(--gutter);
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
  text-align: center;
}
@media (min-width: 768px) { .cta { padding-block: var(--space-7); } }
.cta__inner { max-width: var(--prose-w); margin-inline: auto; }
/* 電話への誘導文。本文と同じ大きさにする(判断Q19。PCで16pxだった) */
.cta__note { margin: 0 0 var(--space-4); font-size: 16px; line-height: 1.9; }
@media (min-width: 768px) { .cta__note { font-size: 17px; } }
.cta__sub { margin: var(--space-4) 0 0; }

/* オフホワイトの区画では帯を白にする。親と同色では囲みが機能しない(判断Q20) */
/* 2026-08-25 修正:`.cta--plain` を除外する。
   除外しないと、囲みを持たないはずのCTAにオフホワイト地の上で白い帯が付く。
   `.section--alt .cta`（詳細度0,2,0）が `.cta--plain`（0,1,0）に勝つため。
   判断Q19の「囲みを持たないCTA」の意図が、地色の帯で崩れていた。
   影響:LPの S4 お仏壇 と S7 ご相談の流れ、および店舗ページの S4 お取り扱い */
.section--alt .cta:not(.cta--plain) { background: var(--color-bg); }

/* 囲みを持たないCTA。S4・S5/S6・S7・S9 で使う(判断Q19) */
.cta--plain {
  margin-top: var(--space-7);
  padding: 0 var(--gutter);
  background: transparent;
  border: 0;
  text-align: center;
}

/* 暗背景のCTAは地色を継ぐ */
.section--dark .cta { background: transparent; border: 0; margin-top: var(--space-6); padding-inline: 0; }

/* ── 電話ボタン(主CV) ── */
.btn-tel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 56px; margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  border: 0; border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-sans); text-decoration: none;
  /* 影は使わない */
}
/* display:flex のブロック要素に width:auto を指定すると親幅いっぱいになる。
   fit-content にして「内容に応じた幅」に戻す(判断Q18 / 仕様4-1) */
@media (min-width: 768px) {
  .btn-tel {
    width: fit-content; min-width: 280px; min-height: 60px;
    padding-inline: var(--space-7);
  }
}
.btn-tel:hover, .btn-tel:active { background: var(--color-primary-dark); color: var(--color-text-on-dark); }
/* 01b の運用ルール「金茶の上の白文字は 4.95:1 で余裕が小さいため、
   CTAの文字は太字16px以上」に合わせる(判断Q7。14pxだった) */
.btn-tel__label { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; }
.btn-tel__num {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
}
@media (min-width: 768px) { .btn-tel__num { font-size: 30px; } }
.btn-icon { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* 紺の面に置く場合、地との境界コントラストが 2.16:1 しかないため
   オフホワイトの髪罫で輪郭を立てる */
.section--dark .btn-tel { border: 1px solid var(--color-bg-alt); }

/* ── 輪郭ボタン(副CV) ── */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-secondary); border-radius: 4px;
  background: transparent; color: var(--color-secondary);
  /* 仕様§2「ボタン内のラベル16px」。15pxで細く見えていた（2026-08-25） */
  font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
  text-decoration: none; text-align: center;
}
.btn-outline:hover { background: var(--color-secondary); color: var(--color-text-on-dark); }
/* 仕様§4-1「PCの副次ボタンは最小幅280px」（2026-08-25） */
@media (min-width: 768px) { .btn-outline { min-width: 280px; } }
/* .subcta は260pxの2列で組んである。上の「最小幅280px」は単独で置くボタン向けの値で、
   2列に並べる副CVには当てはまらない（20pxずつ外にはみ出して重なっていた） */
.subcta .btn-outline { min-width: 0; }
.section--dark .btn-outline { border-color: var(--color-text-on-dark); color: var(--color-text-on-dark); }
.section--dark .btn-outline:hover { background: var(--color-text-on-dark); color: var(--color-secondary-dark); }

/* 副CVの2本は幅を揃える(判断Q37) */
.subcta { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 768px) {
  .subcta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
  }
  /* 2026-09-16:店舗ページのクロージングは、さがみ典礼へのボタンが1本だけ。
     2列組みのままだと1本目が左の列に入り、中央から143pxずれる
     （1280pxで実測:ボタン中心497px / 画面中央640px）。
     2列ぶんに広げたうえで幅260pxを保って中央に置く。
     justify-self: center だけだと中身の幅（148px）まで縮み、
     上の電話ボタンと並んだときに細く見える。
     このルールはメディアクエリの中に置くこと。外に出すと
     SP（.subcta が flex）でも幅260pxが効き、全幅のボタンが縮む */
  .subcta > :only-child { grid-column: 1 / -1; width: 260px; margin-inline: auto; }
}
.subcta__note { margin: var(--space-3) 0 0; }

/* 副CVの2本は、文節ごとに改行を固定して高さを揃える(判断Q9)
   文字数の差でSPの1本目だけ2行になり、71px と 52px で19px違っていた。
   画面幅によらず4本すべて同じ高さになる。 */
.subcta .btn-outline .clauses > span { display: block; }

/* ==========================================================================
   8. カード
   ========================================================================== */
.cards { display: grid; gap: var(--space-4); list-style: none; }

/* 列は必ず minmax(0, 1fr) で切る。
   `1fr` は minmax(auto, 1fr) と同義で、中身の min-content が下限として効く。
   商品写真＋内側余白＋罫線が下限になり、SPで横スクロールが発生する。 */
.cards--ihai { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* 墓石は4種の形を見比べる区画。SPでも2列にして1画面に収める(判断Q33) */
.cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

@media (min-width: 768px) {
  .cards { gap: var(--space-5); }
  .cards--ihai { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  /* 仏壇3型はタブレットでも3列を維持する。2列だと「2+1」に割れて
     並列であるという構成案の意図が崩れる(判断Q30) */
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .cards--prep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .cards--ihai { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards--3 { gap: var(--space-5); }
  .cards--prep { gap: var(--space-5); }
}

.card {
  display: flex; flex-direction: column;
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  /* 色帯・影は付けない */
}
@media (min-width: 768px) { .card { padding: var(--space-5); } }

/* 白地の区画では、白いカードが面として見えないため地色を反転する(判断Q35)
   商品写真を載せるカード(位牌・仏壇)は透過を活かすため白のまま */
.section:not(.section--alt):not(.section--dark) .card:not(.card--ihai):not(.card--butsudan) {
  background: var(--color-bg-alt);
}

.card--ihai { padding: var(--space-3); }
@media (min-width: 768px) { .card--ihai { padding: var(--space-5); } }

/* 写真がカードの幅いっぱいに入る場合 */
.card__media { margin: -20px -20px var(--space-4); }
@media (min-width: 768px) { .card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4); } }
.card__media img { width: 100%; border-radius: 4px 4px 0 0; }

/* 商品写真(背景が透過しているもの)。写真の枠を作らず商品をカードの地に浮かせる */
.card__media--product { margin: 0 0 var(--space-4); text-align: center; }
.card__media--product img {
  width: auto; max-width: 100%; margin-inline: auto;
  border-radius: 0;
}
/* 位牌5枚も接地面を揃える(2026-08-24)
   切り抜き自体は綺麗だったが、下端の透明余白が0〜10pxばらついており、
   5枚を並べたときに台座の高さが最大10pxずれていた。
   商品の輪郭で切り出した `-trim.png` を使い、共通の縮尺で並べる。
   表示される商品の大きさは変わらない(元キャンバスが共通の縮尺だったため)。 */
.card--ihai .card__media--product {
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(var(--img-ihai-max) * 1.7875); /* 286/160 */
}
.card--ihai .card__media--product img { max-width: none; max-height: none; height: auto; }
/* 元キャンバス160pxに対する各商品の幅比 */
.card--ihai-01 .card__media--product img { width: calc(var(--img-ihai-max) * 0.8750); } /* 140/160 */
.card--ihai-02 .card__media--product img { width: calc(var(--img-ihai-max) * 0.9000); } /* 144/160 */
.card--ihai-03 .card__media--product img { width: calc(var(--img-ihai-max) * 0.9062); } /* 145/160 */
.card--ihai-04 .card__media--product img { width: calc(var(--img-ihai-max) * 0.8500); } /* 136/160 */
.card--ihai-05 .card__media--product img { width: calc(var(--img-ihai-max) * 0.6625); } /* 106/160 */
.card--butsudan .card__media--product img { max-width: var(--img-butsudan-max); }

/* 仏壇3型の接地面を揃える(判断Q29 / 2026-08-24 改訂)
   支給PNGは3枚とも 253×427 の共通キャンバスで、商品の周囲に透明な余白がある。
   枠だけを揃えても、余白量が違うため商品の位置と見かけの大きさが揃わない。
   さらに上置き仏壇は切り抜きが甘く、下部に木の棚板、左右に元写真の暗い背景が
   残っていた。これらを除いて商品の輪郭で切り出した `-trim.png` を使う。

   3枚を共通の縮尺で並べるため、幅は「表示上限 × 元キャンバスに対する幅比」で与える。
   →意図:同じ幅に揃えると相対的な大きさが崩れる。お仏壇は置き場所に収まるかが
     選ぶ基準なので、大きさの違いは情報として保つ必要がある。 */
.card--butsudan .card__media--product {
  display: flex; align-items: flex-end; justify-content: center;
  /* 枠の高さ = 表示上限 × 427/253。いちばん背の高いリビング型がちょうど収まる */
  height: calc(var(--img-butsudan-max) * 1.6877);
  /* 接地面を1本の罫で見せる(判断Q14)。
     接地面の揃え自体はできているが、上置き仏壇だけ枠の38%(149px)が空で
     「画像が入っていない」ように見える余地があった。床を引くと3型が同じ床に
     並んで見え、空きが「背が低い」という情報に読み替わる。
     仕様の「境界は1pxの罫線で示す(影は使わない)」の語彙どおりで、新色も影も足さない。 */
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}
.card--butsudan .card__media--product img {
  max-width: none; max-height: none; height: auto;
}
/* 元キャンバス253pxに対する各商品の幅比 */
.card--butsudan-dentou .card__media--product img { width: calc(var(--img-butsudan-max) * 0.9328); } /* 236/253 */
.card--butsudan-living .card__media--product img { width: calc(var(--img-butsudan-max) * 0.9012); } /* 228/253 */
.card--butsudan-uwaoki .card__media--product img { width: calc(var(--img-butsudan-max) * 0.8063); } /* 204/253 */

/* 墓石カードは画像の地(#E9E5E2)とカードの地(#F7F5F0)の間に14階調の段差が出る。
   意図した1本の線に変える(判断Q15) */
.card--boseki .card__media { border-bottom: 1px solid var(--color-border); }

.card__title { margin-bottom: var(--space-2); }
/* 見出しがカードの最後の要素になる場合は下余白を残さない(判断Q10) */
.card__title:last-child { margin-bottom: 0; }
/* 写真を持たない3枚カード(S6)は、見出しが1行か2行かで本文の開始位置が32pxずれ、
   等高グリッドのため空きが 173/141/25px とばらついていた。
   見出しの高さを2行分で固定して開始位置を揃える(判断Q3) */
@media (min-width: 768px) { .cards--3 .card__title { min-height: 64px; } }
/* 文章を伴わないカードは中央、文章を伴うカードは左(判断Q9) */
.card--ihai .card__title,
.card--boseki .card__title { text-align: center; }
.card--butsudan .card__title { text-align: center; }
.card--butsudan .card__body { text-align: left; }
/* 本文と同じ性格の文章なので、PCでは本文と同じ17pxに揃える(判断Q17) */
.card__body { margin: 0; font-size: 15px; line-height: 1.85; }
@media (min-width: 768px) { .card__body { font-size: 17px; } }

/* ==========================================================================
   9. 写真
   ========================================================================== */
.figure { margin-block: 0; margin-inline: 0; }
/* .figure { margin: 0 } が .block { margin-top } を後勝ちで打ち消していた(判断Q4) */
.figure.block { margin-top: var(--space-6); }
@media (min-width: 768px) { .figure.block { margin-top: var(--space-7); } }
.figure img { width: 100%; border-radius: 2px; /* 枠線・影は付けない */ }
.figure__caption { margin-top: var(--space-2); font-size: 13px; line-height: 1.8; color: var(--color-text-sub); }

/* 写真460pxに対し本文の列が640pxで、右に180pxの空きが残る。
   原寸480pxなので拡大はできない。

   2026-08-25 改訂:空きをキャプションの置き場にしていた(判断Q13)が、
   写真が本文の列の左端に張り付き「中央に来ていない」ように見えた。
   写真を列の中で中央に置き、キャプションは写真の下に戻す。
   →意図:左右に90pxずつの余白が付くので「意図した余白」に見える。
     片側だけ180px空いている状態が、ずれて見える原因だった。
   キャプションは左揃えのまま。写真の左端に頭を揃える */
.figure--shop { max-width: var(--img-shop-max); margin-inline: auto; }

/* 写真・図版の帯も同じ理由で列の中で中央に置く。
   タブレット幅では上限660pxに対し列が704pxで、右に44px空いていた */
.gallery { margin-inline: auto; }

/* 施工前後は原寸で表示上限に達しており拡大できない。
   周囲を締めて相対的に一点の図版として成立させる(判断Q34) */
/* `.figure--cleaning`（施工前後を合成1枚で見せていた時代の囲み）は、
   判断Q23で2枚に切り出したため未使用になり削除した（2026-08-25）。
   囲みは付けず、2枚と矢印を本文の列の中で中央に置いている。 */
/* SPでは囲みの内側余白16px×2＋罫2pxで34pxを取られ、
   唯一「成果」を見せる図版が原寸の8割(301px)に縮んでいた(判断Q16)。
   余白を詰めて317px(倍率0.85)に戻す。囲み自体は維持 */

/* 施工前後の比較(2026-08-24 / 判断Q23)
   支給の合成画像(375×129)から、焼き込みの矢印を避けて2枚を切り出した
   (x0〜161 / x211〜374)。矢印はここでCSSで描き、色をブランド内に戻す。
   →意図:焼き込みの矢印は #255691 で、ページ内で唯一パレットの外にある色だった。
   なお「施工前」「施工後」の白文字は各写真に焼き込まれたまま残る(素材の差し替え待ち)。 */
.beforeafter {
  display: grid; gap: var(--space-3);
  align-items: center; justify-items: center;
  max-width: 200px;
  /* 2026-08-25:本文の列の中で中央に置く。
     PCで378pxの図版が640pxの列の左端に張り付き、右に262px空いていた。
     .figure--shop / .gallery と同じ扱いに揃える */
  margin-inline: auto;
}
.beforeafter figure { margin: 0; }
.beforeafter img { width: 100%; border-radius: 2px; }
/* 縦並び(SP)は下向き、横並び(PC)は右向きの矢印を三角形で描く */
.beforeafter__arrow {
  width: 0; height: 0;
  border-inline: 9px solid transparent;
  border-top: 11px solid var(--color-secondary);
}
@media (min-width: 768px) {
  .beforeafter {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    max-width: calc(162px + 164px + var(--space-4) * 2 + 20px);
  }
  .beforeafter__arrow {
    border-inline: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 11px solid var(--color-secondary);
  }
}

/* 店内の展示。隙間なく連結して1本の帯にする(判断Q32)
   →意図:小さく散らばると「素材が足りない」に見える。連結すると
     解像度の低さが欠点にならず「展示が多い」ことが前に出る
   2026-08-24:本文の列(640px)に収まる幅にし、左端を本文と揃える */
.gallery {
  display: grid; gap: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-border);
}
/* 帯の最大幅を原寸から算出して固定し、拡大を防ぐ(判断Q8)。
   `--img-shop-sm-max` がCSSから参照されておらず、SPで164px表示=倍率1.01、
   タブレット(768〜879px)では4列で170px表示=倍率1.05の拡大になっていた。
   非画像部分:padding 2px×2 ＋ border 1px×2 ＋ gap 2px×(列数-1) */
@media (max-width: 767px) {
  .gallery { max-width: calc(var(--img-shop-sm-max) * 2 + 8px); }  /* 2列 = 332px */
}
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: calc(var(--img-shop-sm-max) * 4 + 12px);            /* 4列 = 660px */
  }
}
.gallery img { width: 100%; border-radius: 0; }

/* ==========================================================================
   10. 手順(四十九日までの流れ)
   ========================================================================== */
/* このLPで最も重要な情報。囲みを付けて区画として立てる(判断Q26) */
.steps-box {
  padding: 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
@media (min-width: 768px) { .steps-box { padding: var(--space-5); } }
.section--alt .steps-box { background: var(--color-bg); }

.steps { position: relative; list-style: none; counter-reset: step; }
/* 接続線は段ごとに引き、次のバッジの中心へ正確に接続させる(判断Q11)。
   以前は .steps::before で1本に通していたが、`bottom` の固定値が
   最後の段の文字量に依存し、最後のバッジより7px下まで線が伸びていた。
   段ごとなら文字量が変わっても終端がずれない。 */
.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 15.5px; top: 18px; bottom: -18px;
  width: 1px; background: var(--color-border-strong); z-index: -1;
}
.steps > li {
  position: relative; z-index: 1;
  counter-increment: step;
  padding: 0 0 var(--space-5) 48px;
  max-width: 38em;
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-secondary); color: var(--color-text-on-dark);
  border-radius: 50%;
  font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1;
}
.steps__title { font-weight: 700; }

/* 箇条書き */
.list-plain { list-style: none; }
.list-plain > li { position: relative; padding-left: 1.1em; max-width: 38em; }
.list-plain > li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 6px; height: 1px; background: var(--color-primary-dark);
}

/* 「選ぶときに見ていただきたいこと」の囲み(判断Q31)
   →意図:電話の前に測っておくとよい項目、という機能を視覚化する */
.checklist {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  list-style: none;
}
@media (min-width: 768px) { .checklist { padding: var(--space-5); } }
.checklist > li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  max-width: none;
}
.checklist > li:first-child { padding-top: 0; }
.checklist > li:last-child { padding-bottom: 0; border-bottom: 0; }
/* 「何を測るか」が要点なので、その説明より小さくしない(判断Q20。14pxだった) */
.checklist__label {
  display: block;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}
@media (min-width: 768px) { .checklist__label { font-size: 16px; } }

/* ==========================================================================
   11. 店舗一覧
   ========================================================================== */
/* ==========================================================================
   店舗一覧（2026-08-25:表 → リスト → カードと組み替え）
   ==========================================================================
   経緯は docs/09_店舗一覧レビュー.md と docs/10_さがみ典礼サイトからの取得.md。
   SP:写真を左・情報を右の横並び / 640px以上:2列カード / 900px以上:3列カード
   →意図:1列カードで組むとSPで一覧が4,209pxになった（横並びなら1,602px）。
     写真を入れる代償を、リスト（1,084px）から518px増に抑える。 */
.ecards { display: grid; gap: var(--space-3); list-style: none; }
.ecard {
  display: flex; flex-direction: row;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

/* 写真。原寸330×200に対しSPは120pxなので0.36倍。拡大しない */
.ecard__media {
  /* 110px:電話と地図リンクを1行に収めるための上限。
     120pxだと本文の幅が183pxしか残らず、電話95px＋地図75px＋間隔で
     折り返して1行（44px）増えた。9店で396px増える */
  flex: 0 0 110px; margin: 0;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
}
.ecard__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* 原寸は横長。SPの縦長の枠に入れると強く切り取られる。
     建物は写真の中央よりやや上にあるため、切り取りを上寄りにして
     駐車場と空ではなく建物が残るようにする */
  object-position: center 38%;
}
/* 写真が未入手の店の枠。高さだけ確保する */
.ecard__media--empty {
  display: grid; place-items: center; text-align: center;
  color: var(--color-text-sub); font-size: 12px; line-height: 1.6;
}

.ecard__body { flex: 1; min-width: 0; padding: var(--space-3); }
.ecard__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.5;
  color: var(--color-secondary);
}
/* 店名がリンクの店（店舗ページがある店）は矢印を出す。
   下線だけではリンクでない店名との差が読み取りにくい */
.ecard__name a {
  color: inherit;
  /* タップ領域44px（仕様§7）。指定しないと27pxになる。
     ただし上下の余白ぶんを負のマージンで打ち消して、
     行の高さは文字ぶん（27px）に戻す。
     打ち消さないと、リンクの店名だけ見出しが44pxになり、
     同じ段の他のカードより住所が17px下がる（PCで実測）。 */
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 8.5px; line-height: 1.3;
  /* 8.5px:44 - 8.5*2 = 27px で、リンクでない店名の行の高さと一致する。
     8pxだと28pxになり、同じ段のカードと1pxずれる */
  margin-block: -8.5px;
}
.ecard__name a::after {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; margin-left: var(--space-2);
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.ecard__addr { margin: 0; font-size: 15px; line-height: 1.7; max-width: none; }
/* 会館名は必ず別の行。1行にすると「さがみ典礼」が「さが / み典礼」と割れる */
/* 2026-09-10:足利店だけ「（さがみ典礼 助戸東山敷地内）」が15文字で、
   393px時の使える幅217pxに対し必要218px＝**1pxだけ**超えて2行に折れていた。
   折れる場所が「さがみ典礼」と「助戸東山」の間のスペースしかないため、
   1行目が92pxの極端に短い行になっていた。
   会館名は住所の補足なので1段小さくし、字間も詰めて余裕を作る（→199px・余裕18px）。
   9店すべてが1行に収まる。住所15px＞会館名14pxの序列にもなる */
.ecard__hall {
  display: block;
  font-size: 14px;
  letter-spacing: normal;
  /* 2026-09-10:狭い画面でどうしても1行に収まらないとき、
     「助戸東山敷地／内）」のように語の途中で切れていた。
     keep-all にすると切れる場所が「さがみ典礼」と会館名の間の
     半角スペースだけになり、折れても
     「（さがみ典礼／助戸東山敷地内）」という読める形になる。
     余裕がある幅では折れないので見た目は変わらない */
  word-break: keep-all;
}

/* ラベル。SPでは出さない（1本19px×2×9店で342px増えるため） */
.ecard__label { display: none; }

/* 電話と地図は同じ行に置く。別の行にすると44px×9店で396px増える */
.ecard__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-3);
  margin: 0; max-width: none;
}
.ecard__tel, .ecard__map {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: var(--space-2); line-height: 1.3;
  font-size: 15px;
}
.ecard__tel { font-weight: 700; }
.ecard__pending { font-size: 15px; color: var(--color-text-sub); }

/* 「詳しいご案内」ボタンはSPでは出さない（44px×9店で396px増える）。
   SPでは店名そのものがリンクになっている */
.ecard__btn { display: none; }

/* ── 390px未満:写真を10px削って住所を2行に収める ──
   2026-09-10:足利店の会館名「（さがみ典礼 助戸東山敷地内）」は199px必要。
   375px（iPhone SE/mini）では使える幅がちょうど199pxで、
   四捨五入の差で1行に入らず3行になっていた。写真を110→100pxにすると
   使える幅が209pxになり、9店すべてが2行以内に収まる（実測）。
   電話と地図が1行に収まるかも確認済み（110pxのときと同じ）。
   390px以上は現状のまま余裕があるので触らない */
@media (max-width: 389px) {
  .ecard__media { flex: 0 0 100px; }
}

/* ── 640px以上:カードにして写真を上に ── */
@media (min-width: 640px) {
  .ecards {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
    /* 写真の原寸は330px。2列のまま器が広がるとカードが330pxを超え、
       写真が拡大する（タブレット753pxで1.02倍になっていた）。
       原寸から上限を出して固定する */
    max-width: calc(330px * 2 + var(--space-4));
    margin-inline: auto;
  }
  .ecard { flex-direction: column; }
  .ecard__media {
    flex: none; border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .ecard__media img { width: 100%; height: auto; aspect-ratio: 330 / 200; }
  .ecard__media--empty { aspect-ratio: 330 / 200; }

  .ecard__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-4); }
  .ecard__name { font-size: 18px; margin-bottom: var(--space-2); }
  /* ボタンが出るので店名の矢印は重複。消す。タップ領域44pxは維持する */
  .ecard__name a { text-decoration: none; }
  .ecard__name a::after { display: none; }

  .ecard__label {
    display: inline-block;
    margin-right: var(--space-2); padding: 1px var(--space-2);
    background: var(--color-bg-alt); border-radius: 3px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--color-primary-dark); white-space: nowrap;
    vertical-align: 2px;
  }
  /* ラベルの幅ぶん字下げすると本文の幅が削られ、会館名が2行に折れやすくなる。
     ぶら下げ（ラベルは1行目だけ）にして、会館名は左端から始める */
  .ecard__hall { margin-left: 0; }

  .ecard__btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: auto; min-height: 44px; padding-block: var(--space-2);
    color: var(--color-secondary); font-size: 15px; font-weight: 700;
  }
  .ecard__btn::after {
    content: ""; width: 5px; height: 5px;
    border-top: 1px solid currentColor; border-right: 1px solid currentColor;
    transform: rotate(45deg);
  }
}
@media (min-width: 900px) {
  /* 2026-09-10:3列にすると器880pxに対しカードが256pxになり、SP（217px）と
     ほぼ同じ狭さになる。ラベル「住　所」「お電話」が52px占めるため、
     足利店の住所（200px）が1行に収まらず3行に折れていた。
     SPでラベルを隠しているのと同じ理由（カードが狭い）なので、ここでも隠す。
     2列（640〜899px・カード約322px）では余裕があるので出したまま */
  .ecard__label { display: none; }

  .ecards {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
    /* 3列時の上限。器880pxのほうが先に効くので実際には拡大しないが、
       器を広げたときに拡大しないよう原寸から算出して置いておく */
    max-width: calc(330px * 3 + var(--space-5) * 2);
  }
}

/* ==========================================================================
   12. FAQ(details/summary。JSは使わない)
   ========================================================================== */
/* 本文と同じ幅・同じ中心軸に置き、見出しと左端を完全に一致させる */
.faq { max-width: var(--prose-w); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item:first-of-type { border-top: 1px solid var(--color-border); }

.faq__q {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 56px; padding: var(--space-4) 0;
  cursor: pointer; list-style: none;
  font-size: 16px; line-height: 1.7;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-secondary-dark); }

.faq__mark {
  flex: none; width: 1.4em;
  font-family: var(--font-serif); font-weight: 500; font-size: 18px;
  color: var(--color-secondary);
}
.faq__text { flex: 1; }

/* 開閉の記号。1pxでは手がかりとして細すぎた(判断Q12) */
.faq__toggle { flex: none; position: relative; width: 18px; height: 18px; margin-top: 0.42em; }
.faq__toggle::before, .faq__toggle::after {
  content: ""; position: absolute; background: var(--color-primary);
}
.faq__toggle::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq__toggle::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__item[open] .faq__toggle::after { display: none; }

.faq__a {
  display: flex; gap: var(--space-3);
  padding: 0 0 var(--space-5);
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-4);
  margin-left: 2px;
}
.faq__a .faq__mark { color: var(--color-primary-dark); }
.faq__a p { margin: 0; font-size: 16px; line-height: 1.85; }
@media (min-width: 768px) { .faq__a p { font-size: 17px; } }

/* ==========================================================================
   13. クロージング(S11・暗背景)
   ========================================================================== */
.closing { text-align: center; }
.closing h2 { color: var(--color-text-on-dark); }
.closing .section-title::before { margin-inline: auto; }
.closing__logo { height: 64px; width: auto; margin: 0 auto var(--space-5); }
/* 中央揃えの区画にリードだけ左揃えのブロックが入り、軸が二重になっていた(判断Q39)
   文節を包んで孤立行を防いだうえで中央に統一する */
.closing__lead {
  color: var(--color-text-on-dark);
  margin-inline: auto;
  text-align: center;
}
.closing__address {
  margin-top: var(--space-6);
  color: var(--color-text-on-dark);
  font-size: 15px; line-height: 1.9;
  /* address 要素のブラウザ既定 italic を戻す。
     Noto Sans JP に斜体字形がないため擬似斜体になっていた(判断Q1) */
  font-style: normal;
}
/* タップ領域44px以上（仕様§7）。min-height で下限を保証する。
   padding だけでは文字サイズによって44pxに届かない */
.closing__address a {
  color: var(--color-text-on-dark);
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: var(--space-2); line-height: 1.3;
}
.closing__name { display: block; font-weight: 700; }
.closing__tel { font-size: 17px; }
.closing .note { color: var(--color-bg-alt); }

/* ==========================================================================
   14. フッター
   ========================================================================== */
/* 紺のクロージングの直後に白地の帯が来て、ページの終わりが二度来ていた(判断Q40) */
.footer {
  padding-block: var(--space-6);
  background: var(--color-bg-dark);
  border-top: 0;
  color: var(--color-bg-alt);
}
.footer__inner { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; }
.footer .note { margin: 0; color: var(--color-bg-alt); }
/* リンクの既定色(紺)は紺地の上で読めない(実測1.24:1)。
   紺地の上では必ず白系に上書きする。
   min-height:44px は指で押せる大きさ。margin-block のマイナスで
   行間が広がるのを打ち消している */
.footer a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  margin-block: calc(var(--space-2) * -1);
  color: var(--color-text-on-dark);
}

/* ==========================================================================
   15. 追従電話ボタン(SPのみ。ヒーロー通過後に出す)
   ========================================================================== */
.sticky-tel {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--sticky-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-primary);
  border-top: 1px solid var(--color-primary-dark);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transform: translateY(100%);
  visibility: hidden;
}
.sticky-tel.is-visible { transform: translateY(0); visibility: visible; }
.sticky-tel:hover { background: var(--color-primary-dark); color: var(--color-text-on-dark); }
@media (min-width: 768px) { .sticky-tel { display: none; } }
/* 押す前に掛け先が分かるよう番号を出す(判断Q23) */
.sticky-tel__label { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; }
.sticky-tel__num {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
}
.sticky-tel__num .btn-icon { width: 18px; height: 18px; }
/* S2「「興運堂」とは」の末尾に置く、さがみ典礼への導線。
   親会社を説明している区画なので、確かめに行く道として文脈が合う。
   金茶の塗りは電話（主CV）だけに残し、ここは枠線のボタンにする。 */
.about-parent {
  margin-top: var(--space-7);
  text-align: center;
}/* S2のさがみ典礼への導線を立てる。
   区画がオフホワイト（#F7F5F0）なので、白地にすると面として浮き上がる。
   これはヒーローの入口3つと同じ手法（判断Q44）。新しい色は持ち込まない。
   電話ボタン（332×84px・金茶の塗り）を超えない範囲に収める。 */
/* S2のさがみ典礼への導線。
   区画がオフホワイトなので白地にして面として立てる（判断Q44と同じ手法）。
   電話（332×84px・金茶の塗り）を超えないよう、塗りにはしない。 */
.about-parent {
  margin-top: var(--space-7);
  text-align: center;
}
/* 押す理由を書く一文。ボタンだけだと「なぜ押すのか」が伝わらない */
.about-parent__note {
  margin: 0 auto var(--space-4);
  max-width: 34em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
@media (min-width: 768px) { .about-parent__note { font-size: 16px; } }

.about-parent__btn {
  background: var(--color-bg);
  border-width: 2px;
  /* 360px を望むが、画面が狭いときは親の幅を超えない。
     min() は「小さいほうを採用する」関数。360px 固定だと
     375px 幅の端末で横スクロールが出てしまう */
  min-width: min(360px, 100%);
  min-height: 60px;
  font-size: 17px;
}
/* 「よそへ移動する」ことを記号で示す。
   店舗ページのカードや店舗一覧の店名と同じ矢印の作り方 */
.about-parent__btn::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: var(--space-1);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
/* ==========================================================================
   さがみ典礼へ行く導線を緑で示す（2026-09-03）
   ==========================================================================
   このページには目的が2つある。
     金茶の塗り … 興運堂に電話する
     緑         … さがみ典礼へ行く（電話は宇都宮御苑に転送され、さがみ典礼が主）
   HTMLを触らずに済むよう、行き先のURLで対象を選んでいる。
   さがみ典礼へのリンクを増やしても、自動的に緑になる。 */
.btn-outline[href*="alphaclub-sagami.com"] {
  border-color: var(--color-parent-dark);
  color: var(--color-parent-dark);
  background: var(--color-bg);
}
.btn-outline[href*="alphaclub-sagami.com"]:hover {
  background: var(--color-parent-dark);
  border-color: var(--color-parent-dark);
  color: var(--color-text-on-dark);
}

/* クロージングは紺地。緑は 2.31:1 でAA基準に届かないので白のまま残す */
.section--dark .btn-outline[href*="alphaclub-sagami.com"] {
  border-color: var(--color-text-on-dark);
  color: var(--color-text-on-dark);
  background: transparent;
}
/* ==========================================================================
   スマホでの改行制御（2026-09-03）
   ==========================================================================
   iPhone Safari は word-break: auto-phrase に対応していない可能性が高く、
   語の途中で改行される（Chromeでの実測:auto-phrase 有効10件 / 無効55件）。
   そこで <wbr>（改行してよい位置）を自分で置き、それ以外では改行させない。
   PC・タブレットでは列が広く崩れが目立たないので auto-phrase に任せる。

   ★ keep-all だけだと日本語は改行できる場所がなくなり、はみ出す（実測54px）。
     overflow-wrap: anywhere を併せると、収まらないときだけ語中で折り返して
     溢れない（実測0px）。<wbr> の入れ忘れに対する保険。
     .wb は <wbr> を入れた要素に付ける。 */
/* nb = No Break。割られると意味が壊れる語（固有名詞・住所・電話番号）を守る。
   2026-09-04:当初はSPのメディアクエリ内に置いていたが、PCでは効かず
   1280pxで「上三川イ／ンターチェンジ」と割れた（双樹苑店ページで実測）。
   固有名詞は画面幅に関係なく割ってはいけないので、全幅に効く位置へ移した。
   overflow-wrap: anywhere は、枠に収まらないときだけ折る保険 */
.nb {
  /* 2026-09-10:keep-all は「漢字の間で改行しない」指定で、
     **ハイフンの後ろの改行は止められない**（UAX-14の一般規則）。
     そのため「助戸東山町858-1」が「858-／1」と割れていた（900px以上のLPで実測）。
     white-space: nowrap でこの語の中では一切改行させない。
     文字を足す方法（WORD JOINER U+2060）でも同じ結果になるが、
     住所や電話番号をコピーしたときに見えない文字が混入するので採らない。
     ※nowrap は overflow-wrap より強いので、枠より長い語は溢れる。
       守る語を増やすときは必ず全幅で横あふれ0を確認すること */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --- スマホでの改行のしかた ---------------------------------------------
   iPhone Safari には word-break: auto-phrase（日本語の文節で改行する機能）が
   無いため、改行のしかたを自分で決める必要がある。
   見出しと本文で狙いが違うので、扱いを分けている。

   ■ 見出し（h1〜h4）= .wb
     「区切りのよい位置」でだけ改行する。見出しは短いので行末が余っても
     気にならないが、変な位置で切れると目立つため。
     改行してよい位置は HTML 側に <wbr> で書き込んである。

   ■ 本文（p / li / dd など）= 既定のまま（word-break: normal）
     行を画面の端まで詰める。語の途中でも切る。
     ただし <span class="nb"> で囲んだ語＝固有名詞・住所・電話番号は割らない。

   HTML側の生成: python3 tools_linebreak.py fill
   本文も見出しと同じ「区切りよく切る」にしたい場合は
   下の .wb に p, li, dd を足し、python3 tools_linebreak.py phrase を実行する。
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* keep-all = 日本語でも語の途中では折り返さない。
     折り返してよい場所は <wbr> で示す。
     overflow-wrap: anywhere = <wbr> の位置では入りきらないときだけ
     語の途中で折る（横スクロールを出さないための最後の手段） */
  .wb,
  .clauses > span {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 2026-09-04:本文は行の端まで詰める。
     上の「和文の折り返し」で全体にかけている
     word-break: auto-phrase（文節で改行）と text-wrap: pretty（行の長さを揃える）は
     どちらも「まだ入るのに改行する」ので、SPの本文では既定値に戻して打ち消す。
     実測:行末の余り 52px → 9px、段落が5行→4行に減った。
     ・見出し（h1〜h4）は対象にしない:見出しは .wb と <wbr> で区切りよく改行させる
     ・.nb（固有名詞）は詳細度（0,1,0 > 0,0,1）で勝つのでそのまま効く
     ※このルールは .nb の外に置くこと。中に入れるとCSSの入れ子と解釈され
       「.nb の中の p」という当たらないルールになる（2026-09-04に実際に起きた） */
  /* ★クラスのセレクタ（0,1,0）は要素（0,0,1）より強い。
        p を並べただけでは .lead / .steps__title を上書きできない。
        132行目のリストにクラスで入っているもの（.card__body / .faq__text /
        .steps__title）と、独自に text-wrap を持つもの（.lead・202行目）は
        ここにも必ず並べること。2026-09-04:.lead と .steps__title の
        取りこぼしで42px・100pxの余りが出ていた */
  p, li, dd, dt, figcaption,
  .lead, .card__body, .faq__text, .steps__title, th, td {
    word-break: normal;
    text-wrap: wrap;
  }
}