@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;700&family=BIZ+UDPGothic:wght@400;700&display=swap');

/* =========================================================
   おはかの手｜共通スタイル（全12ページ共通）
   思想：行動の層（ボタン・価格・導線）は商業サイトの王道。
         印象の層（見出し・余白・色）はエディトリアルに静かに。
   色　：濃紺・生成り・白・墨色の4色のみ。墨色は透明度の濃淡まで可。
         例外はフォームのエラー表示の赤だけ。金色は使わない。
   禁止：角丸、ピル型バッジ、チェックマーク、帯リボン、アイコンバッジ。
   書体：見出し・屋号＝Shippori Mincho B1（600/700）、本文＝BIZ UDPGothic（400/700）。
         Noto は予備（端末に入っている場合に使われる）。
   構成：A 体系化（文字・余白・グリッド）→ B 仕掛け → C ページごとの手直し
   ========================================================= */
:root {
  color-scheme: light;
  /* 4色 */
  --navy: #20394b;      /* 濃紺 */
  --kinari: #f4f1e9;    /* 生成り */
  --white: #fff;        /* 白 */
  --sumi: #2a2826;      /* 墨色 */
  /* 墨色の濃淡（透明度） */
  --sumi-soft: rgba(42, 40, 38, .78);   /* 補足文字（白地で約7:1） */
  --rule: rgba(42, 40, 38, .22);        /* ヘアライン（区切り） */
  --rule-mid: rgba(42, 40, 38, .35);    /* 表の罫など */
  --rule-strong: rgba(42, 40, 38, .72); /* 輪郭線（見出しの上・ヘッダー下端など） */
  --field: rgba(42, 40, 38, .6);        /* 入力欄の枠（白地で3:1以上） */
  --on-navy-rule: rgba(255, 255, 255, .4);
  --on-navy-text: rgba(255, 255, 255, .9);
  --on-navy-soft: rgba(255, 255, 255, .78);
  /* フッター：濃紺に墨色を乗算で重ね、濃紺の色味のまま一段沈める */
  --footer-shade: rgba(42, 40, 38, .4);
  --footer-tight: .25rem;
  --footer-group: 1.75rem;
  /* 例外：フォームのエラーのみ */
  --error: #9c2929;

  /* --- A. 書体 --- */
  --sans: 'BIZ UDPGothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans CJK JP', sans-serif;
  --serif: 'Shippori Mincho B1', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif;

  /* --- A. 文字サイズ（比率 約1.25） --- */
  --fs-body: 1.0625rem;                       /* 17px 本文 */
  --fs-lead: 1.25rem;                         /* 20px リード */
  --fs-h3: 1.375rem;                          /* 22px */
  --fs-h2: clamp(1.75rem, 2.6vw, 2.25rem);    /* 28〜36px */
  --fs-h1: clamp(2.25rem, 4vw, 3.25rem);      /* 36〜52px 下層ページ */
  --fs-display: clamp(2.75rem, 4.6vw, 4rem);  /* 44〜64px ヒーロー（各句は約10.2em。1024px幅でも1句1行に収まる値） */
  --fs-label: .9375rem;                       /* 15px 装飾の数字のみ */

  /* --- A. 字間（4種類だけ） --- */
  --tr-display: .02em;
  --tr-head: .04em;
  --tr-body: 0;
  --tr-label: .08em;

  /* --- A. 余白（4〜128pxの10段階） --- */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;  --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;   --s-9: 6rem;  --s-10: 8rem;

  /* --- A. グリッド（12列。基準線は「見出し：1〜4列」「本文：5〜11列」「全幅：1〜12列」の3本） --- */
  --gutter: 2.5rem;
  --grid-gap: clamp(1rem, 2.5vw, 2rem);
  --section-space: clamp(3.5rem, 8vw, 6rem);

  /* --- B. 背表紙の帯・屋号ロゴ --- */
  --spine: 3.5rem;
  --logo-h: 2.25rem;           /* 屋号ロゴの高さ（PC 36px） */
  --logo-ratio: 4.2585;        /* logo.svg の 幅÷高さ */
}

/* =========================================================
   A. 基本・文字組み
   ========================================================= */
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--white); color: var(--sumi); font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; letter-spacing: var(--tr-body); line-height: 1.95; font-kerning: normal; overflow-wrap: anywhere; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { margin-block-start: var(--s-4); padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--rule-strong); color: var(--sumi-soft); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.8; text-align: left; }
a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { color: var(--navy); text-decoration-thickness: 2px; }
/* 操作時の枠：明るい地では濃紺、濃紺の地では白 */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.cta-section :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
@media (min-width: 64rem) {
  .hero-copy :focus-visible { outline-color: var(--white); }
}

/* 見出し：プロポーショナル詰め（palt）＋字間 .04em、行頭の括弧の空きを詰める */
h1, h2, h3 { margin: 0 0 var(--s-5); color: var(--navy); font-family: var(--serif); font-weight: 600; font-feature-settings: "palt"; letter-spacing: var(--tr-head); line-height: 1.5; text-spacing-trim: trim-start; word-break: auto-phrase; }
h1 { font-size: var(--fs-h1); }
h2 { padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule-strong); font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s-5); text-wrap: pretty; }
strong { font-weight: 700; }

/* 箇条書きの印：全ページで短いダッシュ（0.625em・墨色の線）に統一。番号付きの一覧は数字のまま */
ul, ol { margin: 0 0 var(--s-5); padding-inline-start: 0; }
ol { padding-inline-start: 1.5em; }
li + li { margin-block-start: var(--s-3); }
ol > li::marker { color: var(--sumi-soft); font-variant-numeric: tabular-nums; }
main ul { list-style: none; }
main ul > li { position: relative; padding-inline-start: 1.25em; }
main ul > li::before { content: ''; position: absolute; top: .975em; left: 0; width: .625em; height: 1px; background: var(--sumi); }

.container { width: min(calc(100% - var(--gutter) * 2), 74rem); margin-inline: auto; }
/* 読み物は1行40字前後（17px × 約40字） */
.reading-width { max-width: 42.5rem; }
section, [id] { scroll-margin-block-start: 2rem; }

/* ---------- ボタン（角丸なし・矢印は押せる手がかりとして残す） ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .875rem; min-height: 56px; max-width: 100%; padding: .9375rem var(--s-6); border: 1px solid var(--navy); border-radius: 0; background: var(--navy); color: var(--white); font: inherit; font-size: var(--fs-body); font-weight: 700; font-feature-settings: "palt"; letter-spacing: .06em; line-height: 1.6; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.button::after { content: ''; flex: 0 0 .5rem; width: .5rem; height: .5rem; border-block-start: 1px solid currentColor; border-inline-end: 1px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) {
  .button:hover { background: var(--white); color: var(--navy); text-decoration: none; }
}
/* 押した瞬間の手応え：1px沈み、墨色に（濃紺・写真の上の白いボタンでは生成りに） */
.button:active { transform: translateY(1px); border-color: var(--sumi); background: var(--sumi); color: var(--white); }

/* =========================================================
   ヘッダー：白地＋下端に墨色の細線。屋号は文字ロゴ（SVG）で表示
   ========================================================= */
.site-header { background: var(--white); border-block-end: 1px solid var(--rule-strong); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-block: var(--s-5); }
.site-brand { display: inline-flex; flex-direction: column; justify-content: center; gap: var(--s-2); min-width: 0; min-height: 44px; color: var(--navy); text-decoration: none; }
.site-brand:hover { color: var(--navy); text-decoration: none; }
/* 屋号：文字（おはかの手）はHTMLに残したまま、見た目だけ文字ロゴ（images/logo.svg）に置き換える。
   読み上げ・検索・コピーは従来どおり文字として扱われる */
.site-brand-name { display: block; width: calc(var(--logo-h) * var(--logo-ratio)); height: var(--logo-h); overflow: hidden; background: url("images/logo.svg") no-repeat left center / contain; color: transparent; font-family: var(--serif); font-size: var(--logo-h); line-height: 1; text-indent: 110%; white-space: nowrap; }
.site-brand-description { color: var(--sumi-soft); font-size: 1rem; font-feature-settings: "palt"; letter-spacing: var(--tr-label); line-height: 1.5; }
/* Windows のハイコントラスト表示など、背景画像が消える環境では文字で表示 */
@media (forced-colors: active) {
  .site-brand-name { width: auto; height: auto; background: none; color: inherit; font-size: 1.75rem; text-indent: 0; }
}
.site-nav ul, .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.site-nav li, .footer-nav li { margin: 0; }
.site-nav a { position: relative; display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 48px; padding: .625rem var(--s-4); color: var(--navy); font-size: var(--fs-body); font-weight: 400; font-feature-settings: "palt"; letter-spacing: .04em; line-height: 1.5; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.site-nav a[aria-current='page'] { font-weight: 700; }
.site-nav a[aria-current='page']::after { content: ''; position: absolute; right: var(--s-4); bottom: .375rem; left: var(--s-4); height: 1px; background: var(--navy); }
/* 申し込みボタン（文言は「フォーム」のまま、見た目だけボタン） */
.site-nav li:last-child { margin-inline-start: var(--s-3); }
.site-nav a[href='form.html'] { min-width: 7.5rem; padding-inline: var(--s-5); border: 1px solid var(--navy); background: var(--navy); color: var(--white); font-weight: 700; }
.site-nav a[href='form.html'][aria-current='page']::after { background: var(--white); }
@media (hover: hover) {
  .site-nav a[href='form.html']:hover { background: var(--white); color: var(--navy); text-decoration: none; }
  .site-nav a[href='form.html'][aria-current='page']:hover::after { background: var(--navy); }
}
.site-nav a[href='form.html']:active { transform: translateY(1px); border-color: var(--sumi); background: var(--sumi); color: var(--white); }
.skip-link { position: absolute; z-index: 30; top: .5rem; left: 1rem; min-height: 44px; padding: .5rem 1rem; background: var(--white); transform: translateY(-250%); }
.skip-link:focus { transform: translateY(0); }

/* =========================================================
   ヒーロー（トップ）：全面写真＋下から上への濃紺のスクリム＋白文字の特大見出し＋右端の背表紙の帯
   1024px以上：見出しは左下。右下にリード文・信頼ポイント・ボタン（白地・濃紺文字）。
   1023px以下：見出しだけを写真の下部に重ね、注記→信頼ポイント→リード文→ボタンは写真の下（白地）に置く。
   ========================================================= */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(40rem, 86vh, 52rem); padding-block: var(--s-9) 4.5rem; overflow: hidden; background: var(--navy); }
/* スクリム：濃紺で下部だけ濃く（文字の下で .82〜.9）、上部15%は写真そのまま */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(32, 57, 75, .9) 0%, rgba(32, 57, 75, .82) 55%, rgba(32, 57, 75, .55) 70%, rgba(32, 57, 75, 0) 85%); }
.hero-layout { position: static; }
.hero-copy { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(22rem, 30vw, 26rem); grid-template-rows: 1fr auto auto; column-gap: clamp(3rem, 5vw, 4rem); padding-inline-end: max(0px, calc(var(--spine) + 2rem - max(var(--gutter), 50vw - 37rem))); }
.hero-copy h1 { grid-column: 1; grid-row: 1 / 4; align-self: end; margin: 0; padding: 0; border: 0; color: var(--white); font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--tr-display); line-height: 1.35; text-shadow: 0 1px 2px rgba(32, 57, 75, .45), 0 2px 20px rgba(32, 57, 75, .35); }
/* 3つの句は常に1句1行 */
.hero-phrase { display: block; max-width: 100%; }
.hero-copy p { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 var(--s-4); color: var(--white); font-size: var(--fs-lead); line-height: 1.9; text-shadow: 0 1px 2px rgba(32, 57, 75, .5); }
/* 信頼ポイント（ヒーロー内）：等幅3分割をやめ、リード文の下に小さく1行・細線区切り */
.trust-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.hero-copy .trust-list { grid-column: 2; grid-row: 2; margin: 0 0 var(--s-6); }
main .trust-list > li { margin: 0; padding: 0 var(--s-3); color: var(--on-navy-text); font-size: 1rem; font-weight: 700; font-feature-settings: "palt"; letter-spacing: .06em; line-height: 1.6; }
main .trust-list > li::before { content: none; }
main .trust-list > li:first-child { padding-inline-start: 0; }
main .trust-list > li + li { border-inline-start: 1px solid rgba(255, 255, 255, .45); }
.hero-copy .button { grid-column: 2; grid-row: 3; justify-self: start; }
.hero .button, .cta-section .button { min-height: 64px; padding: 1.125rem 2.75rem; font-size: 1.125rem; }
/* 暗い地の上のボタンは白地・濃紺文字に統一（締めのCTA帯と同じ規則） */
.hero .button { border-color: var(--white); background: var(--white); color: var(--navy); }
@media (hover: hover) {
  .hero .button:hover { background: var(--navy); color: var(--white); }
}
.hero .button:active { border-color: var(--kinari); background: var(--kinari); color: var(--navy); }
.hero-figure { position: absolute; inset: 0; margin: 0; }
.hero-figure .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.hero-image { width: 100%; height: auto; }
/* 「※イメージ画像です」：見出しの下の余白に白文字で（スクリムの最も濃い位置） */
.hero-figure figcaption { position: absolute; z-index: 2; left: max(var(--gutter), 50% - 37rem); bottom: 1.25rem; max-width: calc(100% - var(--gutter) * 2); margin: 0; padding: 0; border: 0; background: none; color: var(--white); font-size: var(--fs-body); line-height: 1.6; text-shadow: 0 1px 2px rgba(32, 57, 75, .5); }
/* B. 背表紙の帯：ヒーローの右端に上から下まで濃紺の帯を通し、白の縦書き（見出しからの抜き出し・aria-hidden） */
.hero-vertical { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; width: var(--spine); padding: 2.5rem 0 0; background: var(--navy); color: var(--white); font-family: var(--serif); font-size: 1.125rem; font-weight: 600; letter-spacing: .4em; line-height: var(--spine); writing-mode: vertical-rl; }

/* =========================================================
   各章（トップ）：12列グリッド。見出しは1〜4列、本文は5〜11列
   ========================================================= */
.content-section { padding-block: var(--section-space); background: var(--white); }
.content-section + .content-section { border-block-start: 1px solid var(--rule); }
.content-section--tinted { background: var(--kinari); }
.content-section h2 { margin-block-end: var(--s-6); }
.section-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.section-layout > h2 { grid-column: 1 / span 4; grid-row: 1 / span 12; margin: 0; }
.section-layout > :not(h2) { grid-column: 5 / span 7; min-width: 0; }
.section-layout > :last-child { margin-block-end: 0; }
.note { color: var(--sumi-soft); font-size: var(--fs-body); line-height: 1.9; }
.next-link { margin-block: var(--s-6) 0; }
.section-cta { margin-block: var(--s-6) 0; }
.content-section > .container:not(.section-layout) > p { max-width: 42.5rem; }
.content-section a:not(.button), .page-content a:not(.button) { display: inline-block; max-width: 100%; min-width: 44px; min-height: 44px; padding-block: .3125rem; }
.cemetery-links a { display: inline-block; min-height: 44px; padding-block: .375rem; }

/* B. 余白を内容の重さで変える（上／下）：お悩み 64／料金 112・96／エリア 72／決まりごと 96／流れ 96／FAQ 72 */
.index-page .content-section:has(#concerns-heading) { padding-block: var(--s-8); }
.index-page .content-section:has(#plans-heading) { padding-block: 7rem var(--s-9); }
.index-page .content-section:has(#area-heading) { padding-block: 4.5rem; }
.index-page .content-section:has(#rules-heading) { padding-block: var(--s-9); }
.index-page .content-section:has(#flow-heading) { padding-block: var(--s-9); }
.index-page .content-section:has(#faq-heading) { padding-block: 4.5rem; }

/* B. こんなお悩みに：2×2の格子、明朝体、細線区切り（印なし） */
.index-page .section-layout:has(> #concerns-heading) > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); margin: 0; }
.index-page .section-layout:has(> #concerns-heading) > ul > li { margin: 0; padding: var(--s-5) 0; border-block-start: 1px solid var(--rule); color: var(--navy); font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; font-feature-settings: "palt"; letter-spacing: var(--tr-head); line-height: 1.65; }
.index-page .section-layout:has(> #concerns-heading) > ul > li::before { content: none; }

/* B. 安心のための決まりごと：条文風（小さな番号＋細線区切り。番号は装飾で読み上げない） */
.rules-list { counter-reset: rule; border-block-end: 1px solid var(--rule); }
main .rules-list > li { counter-increment: rule; margin: 0; padding: var(--s-5) 0 var(--s-5) 3.25rem; border-block-start: 1px solid var(--rule); }
main .rules-list > li::before { content: counter(rule, decimal-leading-zero); content: counter(rule, decimal-leading-zero) / ""; top: var(--s-5); width: auto; height: auto; background: none; color: var(--sumi-soft); font-family: var(--sans); font-size: var(--fs-label); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-label); line-height: calc(var(--fs-body) * 1.95); }

/* トップ：ご利用の流れ（5ステップ）は全幅・横並び。番号を残すのはここだけ（順序に意味がある） */
.index-page .section-layout:has(> #flow-heading) > h2 { grid-column: 1 / -1; grid-row: auto; margin-block-end: var(--s-7); }
.index-page .section-layout:has(> #flow-heading) > ol { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: flow-step; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule-strong); }
.index-page .section-layout:has(> #flow-heading) > ol > li { counter-increment: flow-step; margin: 0; padding: var(--s-6) var(--s-5) var(--s-1); }
.index-page .section-layout:has(> #flow-heading) > ol > li:first-child { padding-inline-start: 0; }
.index-page .section-layout:has(> #flow-heading) > ol > li + li { border-inline-start: 1px solid var(--rule); }
.index-page .section-layout:has(> #flow-heading) > ol > li::before {
  content: counter(flow-step);
  content: counter(flow-step) / "";
  display: block; margin-block-end: var(--s-4); color: var(--navy); font-family: var(--serif); font-size: clamp(2.5rem, 3.6vw, 3.25rem); font-weight: 600; line-height: 1;
}

/* トップ：よくある質問（抜粋）は細線で区切って全件表示 */
.index-page .section-layout:has(> #faq-heading) > ul { border-block-start: 1px solid var(--rule-strong); }
.index-page .section-layout:has(> #faq-heading) > ul > li { margin: 0; padding: var(--s-4) 0; border-block-end: 1px solid var(--rule); }
.index-page .section-layout:has(> #faq-heading) > ul > li::before { content: none; }

/* =========================================================
   料金：表組み（白い箱をやめ、3列を細線で区切る）。中央（清掃ライト）だけ墨色の枠線＋左端の細い縦罫・白地
   ========================================================= */
.plan-list, .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; margin: var(--s-7) 0; padding: 0; border-block: 1px solid var(--rule-strong); list-style: none; }
.plan-list > li, .plan-card { position: relative; min-width: 0; margin: 0; padding: var(--s-6) var(--s-6) var(--s-7); border: 0; background: transparent; font-size: var(--fs-body); line-height: 1.9; }
main .plan-list > li::before { content: none; }
.plan-list > li + li, .plan-grid > .plan-card + .plan-card { border-inline-start: 1px solid var(--rule); }
.plan-list > li:nth-child(2), .plan-grid > .plan-card:nth-child(2) { z-index: 1; margin-block: -1px; border: 1px solid var(--sumi); background: var(--white); }
.plan-list > li:nth-child(2) + li, .plan-grid > .plan-card:nth-child(2) + .plan-card { border-inline-start: 0; }
main .plan-list > li:nth-child(2)::before, .plan-grid > .plan-card:nth-child(2)::before { content: ''; position: absolute; top: var(--s-5); bottom: var(--s-5); left: .5rem; width: 2px; height: auto; background: var(--sumi); }
.plan-name, .plan-heading { display: block; margin: 0 0 var(--s-5); padding: 0 0 var(--s-5); border-block: 0; border-block-end: 1px solid var(--rule); color: var(--navy); font-weight: 400; }
.plan-label { display: block; font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; font-feature-settings: "palt"; letter-spacing: var(--tr-head); line-height: 1.5; }
/* 価格は大きく太く。全列で同じ位置に来る（名称は1行） */
.plan-price { display: block; max-width: 100%; margin-block-start: var(--s-2); color: var(--navy); font-family: var(--sans); font-size: clamp(2.25rem, 3.2vw, 2.75rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.3; }
.plan-currency { margin-inline-start: var(--s-1); font-size: 1.125rem; font-weight: 400; letter-spacing: 0; }
.plan-meta { display: block; margin-block-start: var(--s-2); color: var(--sumi-soft); font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; line-height: 1.7; }
.plan-card ul { margin: 0; }
.page-content .plan-grid > .plan-card { margin: 0; }
.page-content .plan-grid > .plan-card:nth-child(2) { margin-block: -1px; }

/* =========================================================
   画像
   ========================================================= */
/* 読み込み中は、画像の範囲（4:3）だけに生成りの地を敷く。注記の部分には敷かない */
.supporting-image { --img-ratio: 4 / 3; --fig-pad: 0px; position: relative; max-width: 38rem; margin: var(--s-7) auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23f4f1e9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; background-origin: content-box; background-clip: content-box; }
.supporting-image img { width: 100%; height: auto; aspect-ratio: var(--img-ratio); object-fit: cover; transition: opacity .3s ease-out; }
/* 生成りのセクションの上では、生成りの地が背景に溶けるので、墨色6%の地にする */
.content-section--tinted .supporting-image { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Crect width='4' height='5' fill='%232a2826' fill-opacity='.06'/%3E%3C/svg%3E"); }
/* site.js が読み込み中の画像にだけ付ける印。読み込み完了で300msかけて浮かび上がる */
.supporting-image img[data-img='loading'] { opacity: 0; }

/* C. 写真の暫定処理（差し替えまで）：元のファイル名の画像にだけ効く。
   後処理済みの画像（*-graded.jpg）に差し替えると、この指定は自動的に外れる */
img[src$="cemetery-view.jpg"], img[src$="cleaning-hands.jpg"], img[src$="offering-flowers.jpg"], img[src$="prayer-hands.jpg"], img[src$="report-phone.jpg"] { filter: saturate(.86) contrast(.94); }
.supporting-image:has(img[src$="cleaning-hands.jpg"], img[src$="offering-flowers.jpg"], img[src$="prayer-hands.jpg"], img[src$="report-phone.jpg"])::after,
.hero-figure:has(.hero-image[src$="cemetery-view.jpg"])::before { content: ''; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .09; }
.supporting-image:has(img[src$="cleaning-hands.jpg"], img[src$="offering-flowers.jpg"], img[src$="prayer-hands.jpg"], img[src$="report-phone.jpg"])::after { position: absolute; top: var(--fig-pad); right: var(--fig-pad); left: var(--fig-pad); aspect-ratio: var(--img-ratio); }
.supporting-image:has(img[data-img='loading'])::after { opacity: 0; }
.hero-figure:has(.hero-image[src$="cemetery-view.jpg"])::before { position: absolute; inset: 0; z-index: 1; }

/* =========================================================
   締めのCTA帯：濃紺地に白い大きな四角ボタン
   ========================================================= */
.cta-section { padding-block: clamp(4.5rem, 9vw, 7.5rem); background: var(--navy); color: var(--white); text-align: center; }
.cta-section p { max-width: 34em; margin: 0 auto var(--s-6); color: var(--white); font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; font-feature-settings: "palt"; letter-spacing: var(--tr-head); line-height: 1.95; text-wrap: balance; word-break: auto-phrase; }
.cta-section .button { border-color: var(--white); background: var(--white); color: var(--navy); }
@media (hover: hover) {
  .cta-section .button:hover { background: var(--navy); color: var(--white); }
}
.cta-section .button:active { border-color: var(--kinari); background: var(--kinari); color: var(--navy); }
/* 保険：CTA帯に見出し・リンク・注記が入っても濃紺に沈まないように */
.cta-section h2, .cta-section h3, .cta-section .note, .cta-section li { color: var(--white); }
.cta-section h2 { border: 0; padding: 0; }
.cta-section a:not(.button) { color: var(--white); }

/* 保険：写真を持たない .hero は全幅写真用の高さと重なりを解除 */
.hero:not(:has(.hero-figure)) { min-height: 0; }
.hero:not(:has(.hero-figure))::before { display: none; }

/* =========================================================
   下層ページの基本形：トップと同じ12列グリッド（PCは見出し左・本文右の2カラム）
   ========================================================= */
.page-heading { padding-block: clamp(2.5rem, 5vw, 4rem); border-block-end: 1px solid var(--rule); background: var(--kinari); }
.page-heading h1 { max-width: 24em; margin: 0; padding: 0; border: 0; font-size: var(--fs-h1); line-height: 1.4; }
.page-heading h1::before { content: ''; display: block; width: 2.5rem; height: 1px; margin-block-end: var(--s-5); background: var(--sumi); }
.page-content { padding-block: var(--section-space); }
.page-content h2 { padding-block-start: 0; border-block-start: 0; }
.page-content > .container > section + section { margin-block-start: var(--s-8); padding-block-start: var(--s-7); border-block-start: 1px solid var(--rule); }
.page-content section > section + section { margin-block-start: var(--s-7); }
.page-content section > p:last-child, .page-content section > ul:last-child { margin-block-end: 0; }

/* FAQ：質問（「Q.」の太字だけの段落）を明朝・細線区切りに */
.page-content p:has(> strong:only-child) { margin-block: var(--s-6) var(--s-2); padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); color: var(--navy); font-family: var(--serif); font-size: 1.125rem; font-feature-settings: "palt"; letter-spacing: .02em; line-height: 1.7; }
.page-content p:has(> strong:only-child) > strong { font-weight: 600; }
.page-content h3 + p:has(> strong:only-child) { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }

/* 料金ページ */
.price-page .plan-grid { background: var(--kinari); }
.price-page #plans > .supporting-image { --img-ratio: 16 / 7; max-width: none; margin: 0 0 var(--s-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 7'%3E%3Crect width='16' height='7' fill='%23f4f1e9'/%3E%3C/svg%3E"); }
.price-page #plans > .supporting-image img { object-position: center 55%; }
.price-page #section-6 { margin: var(--s-7) 0 0; padding: var(--s-6); border: 1px solid var(--rule); background: var(--kinari); }

/* 流れページ：大きな数字とヘアライン（丸数字バッジは使わない） */
.flow-step { position: relative; padding: var(--s-6) 0 var(--s-7) 5.5rem; border-block-end: 1px solid var(--rule); }
.flow-page #section-1 > h2 + .flow-step { border-block-start: 1px solid var(--rule-strong); }
.page-content .flow-step + .flow-step { margin-block-start: 0; }
.flow-step h3 { margin-block-end: var(--s-4); }
.step-number { position: absolute; top: var(--s-6); left: 0; display: block; color: var(--navy); font-family: var(--serif); font-size: 2.75rem; font-weight: 600; letter-spacing: 0; line-height: 1; }
.flow-step .supporting-image { margin-block: var(--s-6); }
/* ステップ7（写真付きご報告）：既存の写真を細線の枠と余白で静かに */
.flow-page #section-8 { padding-block-end: var(--s-7); }
.flow-page #section-8 .supporting-image { --fig-pad: clamp(.75rem, 2vw, 1.25rem); max-width: 34rem; margin-block: var(--s-6); padding: var(--fig-pad); border: 1px solid var(--rule-strong); background-color: var(--white); }
.flow-page #section-8 > .button { margin-block-start: var(--s-2); }

/* 表・フォーム */
.table-wrap { max-width: 100%; }
table { width: 100%; margin-block-end: var(--s-5); border-collapse: collapse; table-layout: fixed; background: var(--white); font-size: var(--fs-body); }
th, td { padding: 1.125rem; border: 1px solid var(--rule-mid); vertical-align: top; text-align: left; }
th { background: var(--kinari); color: var(--navy); font-weight: 700; }
thead th:first-child { width: 30%; }
form { max-width: 42.5rem; }
input, select, textarea, button { font: inherit; }
label, legend { font-weight: 700; }
input:not([type='checkbox']):not([type='radio']), select, textarea { width: 100%; min-height: 48px; padding: .875rem; border: 1px solid var(--field); border-radius: 0; background: var(--white); color: var(--sumi); font-size: var(--fs-body); }
textarea { min-height: 10rem; resize: vertical; }
input[type='checkbox'], input[type='radio'] { width: 1.25rem; height: 1.25rem; accent-color: var(--navy); }
label:has(input[type='checkbox']), label:has(input[type='radio']) { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; }
fieldset { min-width: 0; margin: 0 0 var(--s-6); padding: var(--s-5); border: 1px solid var(--rule); }
.form-field { margin-block-end: var(--s-6); }
.form-field > label { display: block; margin-block-end: var(--s-3); }
.form-help { margin-block: var(--s-2) 0; color: var(--sumi-soft); font-size: var(--fs-body); }
/* 例外色：フォームのエラーのみ */
.form-error { color: var(--error); }
[aria-invalid='true'] { border-color: var(--error) !important; }
iframe { display: block; width: 100%; max-width: 100%; border: 0; }

/* =========================================================
   フッター：CTA帯より一段暗い濃紺。境目の白線は使わず、色の段差で区切る
   並び（スマホ）：屋号＋メール → 細線 → ナビ5つ（5等分1行）→ 特商法・プライバシー → 細線 → コピーライト
   並び（PC）　　：左に屋号＋メール、右にナビ1行。最下段は左にコピーライト、右に法務リンク
   ========================================================= */
.site-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--s-6); background: linear-gradient(var(--footer-shade), var(--footer-shade)), var(--navy); background-blend-mode: multiply; color: var(--white); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.footer-brand { grid-row: 1; }
.contact-email { grid-row: 2; }
.footer-nav { grid-row: 3; }
.copyright { grid-row: 4; }
.footer-brand { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; font-feature-settings: "palt"; letter-spacing: .06em; line-height: 1.8; }
.contact-email { margin: var(--footer-tight) 0 0; color: var(--on-navy-text); font-size: var(--fs-body); letter-spacing: .025em; }
.contact-email a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; max-width: 100%; color: var(--on-navy-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.contact-email a:hover { color: var(--white); text-decoration-thickness: 2px; }
.footer-nav { margin-block-start: var(--footer-group); padding-block-start: var(--footer-group); border-block-start: 1px solid var(--on-navy-rule); }
.footer-nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--footer-tight) .125rem; max-width: 30rem; }
.footer-nav li:nth-child(n+3) { grid-row: 1; }
.footer-nav li:nth-child(1) { grid-row: 2; grid-column: 1; }
.footer-nav li:nth-child(2) { grid-row: 2; grid-column: 2 / -1; }
.footer-nav a { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 44px; min-height: 44px; padding-block: .375rem; color: var(--on-navy-text); font-size: var(--fs-body); font-feature-settings: "palt"; line-height: 1.6; text-align: center; text-decoration: none; white-space: nowrap; }
.footer-nav li:nth-child(-n+2) a { justify-content: flex-start; color: var(--on-navy-soft); text-align: left; }
.footer-nav a:hover { color: var(--white); text-decoration: underline; }
.copyright { margin: var(--footer-group) 0 0; padding-block-start: var(--footer-group); border-block-start: 1px solid var(--on-navy-rule); color: var(--on-navy-soft); font-size: var(--fs-body); }

@media (min-width: 60.0625rem) {
  @supports (grid-template-rows: subgrid) {
    .footer-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(3rem, 1fr) auto; column-gap: var(--s-8); }
    .footer-brand { grid-column: 1; grid-row: 1; }
    .contact-email { grid-column: 1; grid-row: 2; }
    .footer-nav { grid-column: 2; grid-row: 1 / 5; display: grid; grid-template-rows: subgrid; margin: 0; padding: 0; border: 0; }
    .footer-nav ul { grid-row: 1 / 5; grid-template-columns: repeat(5, max-content); grid-template-rows: subgrid; column-gap: var(--s-6); row-gap: 0; max-width: none; }
    .footer-nav li:nth-child(n+3) { align-self: start; }
    .footer-nav li:nth-child(1) { grid-row: 4; grid-column: 1; }
    .footer-nav li:nth-child(2) { grid-row: 4; grid-column: 2 / -1; }
    .footer-nav li:nth-child(-n+2) { padding-block-start: var(--footer-group); }
    .footer-nav li:nth-child(n+3) a { justify-content: center; }
    .footer-inner::after { content: ''; grid-column: 1 / -1; grid-row: 4; align-self: start; height: 1px; background: var(--on-navy-rule); }
    .copyright { grid-column: 1; grid-row: 4; align-self: start; display: flex; align-items: center; min-height: calc(44px + var(--footer-group)); margin: 0; padding-block-start: var(--footer-group); border: 0; }
  }
}

/* =========================================================
   インタラクション（site.js と連動）
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1); }
  .js-reveal [data-reveal='pending'] { opacity: 0; transform: translateY(.75rem); }
}
.sticky-cta { display: none; }
@media (max-width: 47.9375rem) and (min-height: 31.25rem) {
  .sticky-cta { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: block; padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--rule-strong); background: var(--white); opacity: 0; transform: translateY(100%); visibility: hidden; transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s; }
  .sticky-cta[data-state='shown'] { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s; }
  .sticky-cta .button { width: 100%; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .sticky-cta[data-state='shown'], .supporting-image img { transition: none; }
}

/* =========================================================
   C. PC（960px超）：トップの料金セクションと下層ページを12列グリッドに揃える
   ========================================================= */
@media (min-width: 60.0625rem) {
  /* トップの料金：料金表は全幅。注記・リンク・ボタンは左7列、供花の写真は右4列（上端を揃える） */
  /* 6行目（1fr）に写真の余った高さを逃がし、左の注記・リンク・ボタンの間隔を詰めたままにする */
  .index-page .content-section:has(#plans-heading) > .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto 1fr; column-gap: var(--grid-gap); align-items: start; }
  .index-page .content-section:has(#plans-heading) > .container > * { grid-column: 1 / span 7; min-width: 0; }
  .index-page .content-section:has(#plans-heading) > .container > h2,
  .index-page .content-section:has(#plans-heading) > .container > .plan-list { grid-column: 1 / -1; }
  .index-page .content-section:has(#plans-heading) > .container > .supporting-image { --img-ratio: 4 / 5; grid-column: 9 / span 4; grid-row: 3 / 7; max-width: none; margin: 0; }
  .index-page .content-section:has(#plans-heading) .plan-list { margin-block: var(--s-5) var(--s-7); }
  .index-page .content-section:has(#plans-heading) .supporting-image img { object-position: 18% 50%; }

  /* 下層ページ：ページ見出しは屋号と同じ左端に。本文は「見出し1〜4列／本文5〜11列」 */
  .page-heading > .container { max-width: none; }
  .page-content > .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); max-width: none; }
  .page-content > .container > * { grid-column: 5 / span 7; min-width: 0; }
  /* 章（section）を持たないページ（フォーム・完了・特商法）は、左端から8列 */
  .page-content > .container:not(:has(> section)) > * { grid-column: 1 / span 8; max-width: 48rem; }
  .page-content > .container > section { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .page-content > .container > section > * { grid-column: 5 / span 7; min-width: 0; }
  /* 章の見出しは左の4列に置き、長い章では読み進めても見出しが追従する */
  .page-content > .container > section > h2 { position: sticky; top: var(--s-6); grid-column: 1 / span 4; grid-row: 1 / span 40; margin: 0; }
  /* 料金ページの「プラン詳細」：見出し（左）と写真（右）→ 料金表（全幅）→ 対応できない作業（右） */
  .price-page #plans > h2 { position: static; grid-row: 1; }
  .price-page #plans > .supporting-image { grid-column: 5 / span 7; grid-row: 1; }
  .price-page #plans > .plan-grid { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .price-page #plans > #section-6 { grid-column: 5 / span 7; grid-row: 3; }
}

/* =========================================================
   レスポンシブ
   ========================================================= */
/* 〜1023px：ヒーローは写真に見出しだけを重ね、ほかは写真の下へ。トップの流れは縦並び */
@media (max-width: 63.9375rem) {
  :root { --spine: 2.5rem; }
  .hero { display: block; min-height: 0; padding-block: 0 var(--s-7); background: var(--white); }
  .hero::before { display: none; }
  .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-figure { display: contents; }
  .hero-figure .hero-image, .hero-figure::after, .hero-figure::before { grid-row: 1; grid-column: 1; width: auto; margin-inline: calc(50% - 50vw); }
  .hero-figure .hero-image { width: calc(100% + (50vw - 50%) * 2); max-width: none; height: clamp(28rem, 120vw, 36rem); object-position: 72% 40%; }
  .hero-figure:has(.hero-image[src$="cemetery-view.jpg"])::before { position: relative; inset: auto; }
  .hero-figure::after { content: ''; position: relative; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(32, 57, 75, .88) 0%, rgba(32, 57, 75, .7) 40%, rgba(32, 57, 75, 0) 68%); }
  /* 背表紙の帯：写真の右端に上から下まで */
  .hero-vertical { position: relative; z-index: 3; top: auto; right: auto; bottom: auto; grid-row: 1; grid-column: 1; justify-self: end; align-self: stretch; margin-right: calc(50% - 50vw); padding-top: var(--s-5); font-size: 1rem; letter-spacing: .36em; }
  .hero-copy h1 { position: relative; z-index: 2; grid-row: 1; grid-column: 1; align-self: end; margin: 0 max(var(--s-2), calc(var(--spine) - var(--gutter) + var(--s-2))) var(--s-5) 0; font-size: clamp(2.25rem, 5.6vw, 3.25rem); }
  .hero-figure figcaption { position: static; grid-row: 2; grid-column: 1; max-width: none; margin: var(--s-3) 0 0; padding: 0 0 0 var(--s-3); border-inline-start: 1px solid var(--rule-strong); color: var(--sumi-soft); text-shadow: none; }
  /* 信頼ポイント：写真の下、リード文の上。白地なので濃紺の文字・ダッシュの印で縦に並べる */
  .hero-copy .trust-list { grid-row: 3; grid-column: 1; display: block; margin: var(--s-5) 0 0; }
  main .hero-copy .trust-list > li { position: relative; padding: 0 0 0 1.25em; border: 0; color: var(--navy); font-family: var(--serif); font-size: var(--fs-body); font-weight: 600; line-height: 1.85; }
  main .hero-copy .trust-list > li + li { margin-block-start: var(--s-1); border: 0; }
  main .hero-copy .trust-list > li::before { content: ''; position: absolute; top: .925em; left: 0; width: .625em; height: 1px; background: var(--navy); }
  .hero-copy p { grid-row: 4; grid-column: 1; margin: var(--s-4) 0 var(--s-6); max-width: 34em; color: var(--sumi); font-size: var(--fs-body); line-height: 1.95; text-shadow: none; }
  /* 写真の下（白地）のボタンは濃紺地 */
  .hero .hero-copy .button { grid-row: 5; grid-column: 1; justify-self: start; border-color: var(--navy); background: var(--navy); color: var(--white); }
  .index-page .section-layout:has(> #flow-heading) > ol { grid-template-columns: minmax(0, 1fr); }
  .index-page .section-layout:has(> #flow-heading) > ol > li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); align-items: start; padding: var(--s-5) 0; }
  .index-page .section-layout:has(> #flow-heading) > ol > li + li { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .index-page .section-layout:has(> #flow-heading) > ol > li::before { margin: 0; font-size: 2.25rem; }
}

/* 〜959px：ヘッダー2段（ロゴ＋説明／ナビ5等分）、表・2カラムを縦に */
@media (max-width: 60rem) {
  :root { --logo-h: 1.75rem; }
  .header-inner { flex-direction: column; align-items: stretch; gap: var(--s-2); padding-block: var(--s-3); }
  .site-brand { flex-direction: row; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: var(--s-1) var(--s-4); }
  .site-nav { width: 100%; }
  .site-nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); }
  .site-nav li:last-child { margin-inline-start: 0; }
  .site-nav a { width: 100%; padding-inline: var(--s-1); font-size: 1rem; letter-spacing: 0; }
  .site-nav a[href='form.html'] { min-width: 0; padding-inline: var(--s-1); }
  .site-nav a[aria-current='page']::after { right: var(--s-2); left: var(--s-2); }
  /* 料金：表を縦に。各プランは細線で区切り、清掃ライトは枠線と縦罫を維持 */
  .plan-list, .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-list > li, .plan-card { padding: var(--s-5) 0 var(--s-6); }
  .plan-list > li + li, .plan-grid > .plan-card + .plan-card { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .plan-list > li:nth-child(2), .plan-grid > .plan-card:nth-child(2) { margin: 0 calc(var(--s-4) * -1); padding: var(--s-5) var(--s-4) var(--s-6) var(--s-6); border: 1px solid var(--sumi); }
  .page-content .plan-grid > .plan-card:nth-child(2) { margin: 0 calc(var(--s-4) * -1); }
  .plan-list > li:nth-child(2) + li, .plan-grid > .plan-card:nth-child(2) + .plan-card { border-block-start: 0; }
  .price-page .plan-grid { padding-inline: var(--s-4); }
  .section-layout { display: block; }
  .section-layout > h2 { margin-block-end: var(--s-6); }
  .index-page .section-layout:has(> #flow-heading) > h2 { margin-block-end: var(--s-6); }
  /* トップの料金：供花の写真はボタンの後ろに縦長で */
  .index-page .content-section:has(#plans-heading) .supporting-image { --img-ratio: 4 / 5; max-width: 26rem; margin: var(--s-7) 0 0; }
  .index-page .content-section:has(#plans-heading) .supporting-image img { object-position: 18% 50%; }
}

/* 〜767px：お悩みは1列 */
@media (max-width: 47.9375rem) {
  .index-page .section-layout:has(> #concerns-heading) > ul { grid-template-columns: minmax(0, 1fr); }
  .index-page .section-layout:has(> #concerns-heading) > ul > li { font-size: 1.25rem; }
}

/* 〜639px：スマホ。余白は控えめに */
@media (max-width: 40rem) {
  :root { --gutter: 1.25rem; --section-space: 3.5rem; --spine: 2.25rem; }
  /* お悩み 48／料金 64・56／エリア 48／決まりごと 56／流れ 56／FAQ 48 */
  .index-page .content-section:has(#concerns-heading) { padding-block: var(--s-7); }
  .index-page .content-section:has(#plans-heading) { padding-block: var(--s-8) 3.5rem; }
  .index-page .content-section:has(#area-heading) { padding-block: var(--s-7); }
  .index-page .content-section:has(#rules-heading) { padding-block: 3.5rem; }
  .index-page .content-section:has(#flow-heading) { padding-block: 3.5rem; }
  .index-page .content-section:has(#faq-heading) { padding-block: var(--s-7); }
  /* 見出し：背表紙の帯と重ならない大きさ（最大32px） */
  /* 各句は約10.2em。帯を避けた幅に約3%の余裕を持たせて収める（最大32px） */
  .hero-copy h1 { font-size: min(2rem, calc((100vw - var(--gutter) - max(var(--gutter) + var(--s-2), var(--spine) + var(--s-2))) / 10.5)); }
  .hero-vertical { padding-top: var(--s-4); font-size: .9375rem; letter-spacing: .32em; }
  .site-nav ul { gap: .125rem; }
  .site-nav a, .site-nav a[href='form.html'] { padding-inline: 0; white-space: nowrap; }
  .hero .button, .section-cta .button, .flow-page #section-8 > .button { width: 100%; }
  .cta-section .button { width: 100%; padding-inline: 1.25rem; }
  .cta-section p { font-size: 1.1875rem; }
  .plan-list, .plan-grid { margin-block: var(--s-6); }
  .plan-price { font-size: 2.5rem; }
  .supporting-image { margin-block: var(--s-6); }
  .price-page #plans > .supporting-image { --img-ratio: 4 / 3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Crect width='4' height='3' fill='%23f4f1e9'/%3E%3C/svg%3E"); }
  .page-content > .container > section + section { margin-block-start: var(--s-7); padding-block-start: var(--s-6); }
  .price-page #section-6 { padding: var(--s-5); }
  .flow-step { padding: var(--s-5) 0 var(--s-6); }
  .step-number { position: static; margin-block-end: var(--s-3); font-size: 2.25rem; }
  th, td { padding: var(--s-3); }
  .footer-brand { font-size: 1.125rem; }
}

/* 〜367px：小型スマホでナビ5等分が収まるよう、ナビの文字だけ15pxに */
@media (max-width: 22.9375rem) {
  .site-nav a, .footer-nav li:nth-child(n+3) a { font-size: .9375rem; }
  .footer-nav li:nth-child(1) { grid-column: 1 / -1; }
  .footer-nav li:nth-child(2) { grid-row: 3; grid-column: 1 / -1; }
}
/* 〜359px（320px級の旧小型機）：左右の余白16px、ナビの文字14px */
@media (max-width: 22.4375rem) {
  :root { --gutter: 1rem; }
  .site-nav a[href='form.html'] { border-width: 0; }
  .site-nav a, .footer-nav li:nth-child(n+3) a { font-size: .875rem; letter-spacing: 0; }
}

/* =========================================================
   印刷
   ========================================================= */
@media print {
  @page { size: A4; margin: 16mm; }
  html { font-size: 12pt; }
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.7; }
  .site-nav, .footer-nav, .skip-link, .hero-vertical, .hero::before, .hero-figure::before, .hero-figure::after, .supporting-image::after, .footer-inner::after { display: none !important; }
  .container, .reading-width, .page-heading > .container, .page-content > .container { width: 100%; max-width: none; }
  .site-header, .site-footer, .hero, .content-section, .cta-section, .page-heading, .page-content, .plan-card, .plan-list > li, .price-page .plan-grid, .price-page #section-6 { background: #fff; color: #000; }
  .header-inner { padding-block: 0 5mm; }
  .site-brand { color: #000; }
  .site-brand-name { width: auto; height: auto; background: none; color: #000; font-size: 20pt; text-indent: 0; }
  .site-brand-description, figcaption, .note, .contact-email, .copyright, .footer-brand, .cta-section p { color: #000; font-size: 12pt; }
  .hero { display: block; min-height: 0; }
  .hero, .content-section, .cta-section, .page-heading, .page-content, .site-footer { padding-block: 5mm; }
  .hero-figure, .hero-figure figcaption { position: static; background: none; }
  .hero-layout, .section-layout, .plan-list, .plan-grid, .footer-inner, .trust-list, .page-content > .container, .page-content > .container > section, .index-page .content-section > .container { display: block; }
  .index-page .section-layout:has(> #flow-heading) > ol, .index-page .section-layout:has(> #concerns-heading) > ul { display: block; }
  .hero-copy, .hero-figure { display: block; max-width: none; padding: 0; }
  .hero-copy h1, .hero-copy p, .hero-figure figcaption, main .trust-list > li { color: #000; text-shadow: none; }
  main .trust-list > li { padding: 0; border: 0; }
  .page-content > .container > section > h2 { position: static; }
  img { filter: none !important; }
  .hero-copy h1, h1 { font-size: 20pt; }
  .hero-copy p { font-size: 12pt; line-height: 1.7; }
  h2 { font-size: 16pt; padding-block-start: 3mm; }
  h3, .plan-label { font-size: 14pt; }
  h1, h2, h3, .plan-name, .plan-price, .step-number, th { color: #000; }
  h1, h2, h3 { break-after: avoid; }
  .button::after, .page-heading h1::before { display: none; }
  .contact-email a { color: #000; }
  .hero-figure, .supporting-image, .price-page #plans > .supporting-image { max-width: 85mm; margin: 5mm auto; background-image: none; }
  .hero-figure .hero-image, .supporting-image img { height: auto; max-height: 65mm; aspect-ratio: auto; object-fit: contain; }
  .plan-list, .plan-grid { margin-block: 5mm; padding: 0; border: 0; }
  .plan-card, .plan-list > li, .plan-list > li:nth-child(2), .plan-grid > .plan-card:nth-child(2) { margin: 5mm 0; padding: 5mm; border: 1px solid #777; break-inside: avoid; }
  .plan-list > li::before, .plan-grid > .plan-card::before { display: none; }
  .plan-price { font-size: 20pt; }
  .plan-meta, .plan-currency { font-size: 12pt; }
  .plan-name, .plan-heading { padding-block-end: 3mm; margin-block-end: 3mm; }
  .page-content > .container > section + section { margin-block-start: 5mm; padding-block-start: 5mm; }
  .price-page #section-6 { margin-block-start: 5mm; padding: 5mm; }
  .flow-step { padding: 5mm 0; break-inside: auto; }
  .step-number { position: static; display: inline; font-size: 14pt; }
  a, .site-footer a { color: #000; }
  .button, .cta-section .button, .hero .button, .hero .hero-copy .button { min-height: 0; padding: 3mm 5mm; border-color: #777; background: #fff; color: #000; }
  .site-footer, .copyright { border-color: #777; }
  .copyright { margin-block-start: 5mm; padding-block-start: 3mm; }
  tr, figure { break-inside: avoid; }
  .sticky-cta { display: none !important; }
  [data-reveal], .supporting-image img { opacity: 1 !important; transform: none !important; transition: none !important; }
}