@charset "UTF-8";

/**
 * なごみ葬祭 スタイルシート
 *
 * ビルドツールを使わない前提で、1枚に収めている。
 * Web フォントは読み込まない。日本語環境に標準で入っている明朝・ゴシックを
 * 使うことで、外部への依存をなくし、回線の細い環境でも即座に表示される。
 *
 * 設計の要:
 *   - 電話番号への到達を最優先する。緊急時に迷わせない。
 *   - 装飾より余白。静けさを、色数の少なさと行間で作る。
 *   - コントラストは本文 4.5:1 以上を確保する。
 */

/* ---------------------------------------------------------------
   変数
   --------------------------------------------------------------- */
:root {
    /* 墨・生成り・藍鼠。彩度を抑え、見やすさは明度差で作る。 */
    --color-ink:        #1f1c1a;  /* 本文。生成り地に対して約 15:1 */
    --color-ink-soft:   #55504a;  /* 補助文。約 7:1 */
    --color-ink-faint:  #7d766e;  /* 日付など。大きめの字にのみ使う */

    --color-paper:      #faf8f5;  /* 地色。純白を避け、紙の白さに寄せる */
    --color-paper-alt:  #f2efe9;  /* セクションの交互背景 */
    --color-line:       #ddd7ce;  /* 罫線 */

    --color-accent:     #3c4a5a;  /* 藍鼠。見出しの罫や強調 */
    --color-accent-deep:#2b3642;

    /* 電話ボタン。緊急時の導線なので、地色から明確に浮かせる。 */
    --color-tel:        #6b4a2f;
    --color-tel-hover:  #543a25;

    /*
       ここから下は「変数にできないから」と生の値を書いていた色。
       半透明やグラデーションが要る箇所で、いずれも値はなごみの生成り。
       テーマは色を変えられるのに、この 3 つだけ変えられず、
       どんな配色のテーマでも生成りが残っていた。**新しい色を足すときは、
       テーマから変えられる形にできないかを先に考えること。**

       半透明のバー。ヘッダーとモバイルの電話バーが共有する。
       別々の変数にしない —— 同じ値を 2 か所に置くと、色を変えるときに
       必ず片方が残る。
    */
    --color-bar-bg:     rgba(250, 248, 245, 0.96);

    /* 写真が入るまでのヒーローの地。新規の設置は必ずこの状態から始まる。 */
    --color-hero-from:  #efeae2;
    --color-hero-mid:   #e2ddd4;
    --color-hero-to:    #d6d1c8;

    /* 写真が未設定のプランカードの色面。 */
    --color-placeholder-from: #e8e3da;
    --color-placeholder-to:   #d8d2c8;

    --font-serif: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho",
                  "YuMincho", "Noto Serif JP", "Songti SC", serif;
    --font-sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                  "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;

    --width-content: 1080px;
    --width-narrow:  760px;

    /*
       ここから下は「かたち」のトークン。色と違い、**変えるとレイアウトの
       印象そのものが変わる。**

       これを入れた理由: 色と節の並びだけを変えられる作りにしていたため、
       どのテーマもヘッダーの形・見出しの寄せ・余白・角・文字の太さが同じで、
       **色違いの同じサイトにしか見えなかった**（2026-08-03 に指摘を受けた）。
       テーマ 1 個の作業量は変えずに、見た目の振れ幅だけを広げるのが狙い。

       ここの既定値はすべて「なごみの現在の値」。だから何も書かないテーマの
       見た目は 1px も変わらない。--color-* と同じ考え方。
    */

    /* 角。カード・ボタン・入力欄・画像など 12 か所が共有する。
       0 にすると全体が角ばり、8px 以上にすると柔らかくなる。 */
    --radius: 2px;

    /* 節の上下の余白。広げるとゆったりし、詰めると情報量が多く見える。
       767px 以下は別の値を使う（狭い画面で余白を広げても間延びするだけ）。 */
    --space-section:    72px;
    --space-section-sp: 56px;

    /* 節の見出し。**寄せを left にするだけで全ページの印象が変わる。** */
    --section-head-align: center;
    --section-head-gap:   48px;    /* 見出しと中身の間 */

    /* 見出しの下の罫。--rule-width: 0 にすると消える。
       --rule-offset-left は寄せと対で使う —— 中央寄せなら auto、
       左寄せなら 0（auto のままだと罫だけ中央に取り残される）。 */
    --rule-width:       48px;
    --rule-height:      1px;
    --rule-offset-left: auto;

    --font-size-section-title: 1.75rem;

    /* 見出しの太さと字間。**日本語は字間で表情が大きく変わる。**
       0.04em は詰まり気味、0.12em まで開くと格式が出る。 */
    --font-weight-heading:    600;
    --letter-spacing-heading: 0.04em;

    /* ヒーローの高さ。最初に目に入る面積そのもの。
       767px 以下は 380px に固定してある（狭い画面では高さより情報が要る）。 */
    --hero-min-height: 480px;

    /* z-index はここでのみ定義する。各所で場当たりに数字を振らない。 */
    /* 縦の柱のヘッダー（header-rail）の地と文字。**既定はキーカラーと白。**
       明るい色を柱にしたいテーマは theme.css でこの 2 つを差し替える
       —— 明るい黄緑に白文字は 2.1:1 で読めない（そなえがその例）。 */
    --rail-bg:  var(--color-accent);
    --rail-ink: #fff;

    --z-header: 30;
    --z-telbar: 40;
}

/* ---------------------------------------------------------------
   リセットと基礎
   --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* モバイルの本文は 16px を下回らせない。 */
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    /* 本文の行間は 1.5〜1.75。日本語は行間を広めに取ると読みやすい。 */
    line-height: 1.9;
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-text-size-adjust: 100%;
}

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

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-accent-deep);
}

/* キーボード操作時に、今どこにいるかが必ず見えるようにする。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-heading);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-heading);
    margin: 0;
}

p {
    margin: 0 0 1.2em;
}

/* 動きを減らす設定の利用者には、動かさない。 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------
   汎用
   --------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--width-content);
    margin: 0 auto;
    padding: 0 20px;
}

.container--narrow {
    max-width: var(--width-narrow);
}

/* 目の見えない利用者がナビを読み飛ばせるようにする。 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--color-ink);
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

.section {
    padding: var(--space-section) 0;
}

.section--alt {
    background: var(--color-paper-alt);
}

.section__head {
    text-align: var(--section-head-align);
    margin-bottom: var(--section-head-gap);
}

.section__title {
    font-size: var(--font-size-section-title);
    margin-bottom: 12px;
}

/* 見出しの下の細い罫。装飾はこれだけに留める。
   4 つ目の margin（左）だけを変数にしてある —— 中央寄せは auto、
   左寄せは 0。1 つの変数で両方に対応する。 */
.section__title::after {
    content: "";
    display: block;
    width: var(--rule-width);
    height: var(--rule-height);
    margin: 20px auto 0 var(--rule-offset-left);
    background: var(--color-accent);
}

.section__lead {
    color: var(--color-ink-soft);
    margin: 0;
}

/* ---------------------------------------------------------------
   節の見出しの型（theme.php の 'section_head'）

   **4 つのテーマがずっと共有していた最後の枠がここ。** ヘッダーもプランの
   カードもフッターも型にしたあと、節の中の見出しの置き方だけは全テーマ同じ
   だった（変えられたのは寄せと罫の太さ＝トークンだけ）。見出しは全ページの
   すべての節に出るので、ここを変えるとサイト全体の見え方が一度に変わる。

   既定は stack ＝ いまの形。**下に書いてあるのは rail の分だけで、宣言して
   いないテーマには 1 行も効かない**（型の class は <main> に、節の名前は
   節に、どちらも宣言したテーマでだけ出る）。

   rail … 節の左端に縦書きの英字ラベルが立ち、見出しは左に寄る。
          参考は斎場の裕心（yushin-sakai.jp）。**英字は節ごとに
          --section-en が持つので、blocks/ のテンプレートは 1 枚も変わらない。**
   --------------------------------------------------------------- */

.head-rail .section {
    position: relative;
    padding-left: 64px;
}

/* 型が寄せを決める（--section-head-align は見ない）。**同じ型を選んだのに
   テーマによって見出しの寄せが違う、という状態を作らないため。**
   参考にしたサイトはここが中央で、左端の縦ラベルとの対比で成り立っている。 */
.head-rail .section__head {
    text-align: center;
}

/* **罫は使わない。** 参考にしたサイトは見出しの下に罫を引かず、かわりに
   斜線と英字を小さく置く（下の ::after）。両方出すとうるさい。 */
.head-rail .section__title::after {
    display: none;
}

/* 見出しの下の「／ EN」。**節ごとの英字は --section-en が持つ**ので、
   ここは 1 つの規則で全部の節に効く。斜線は文字として置いている
   （擬似要素をもう 1 つ重ねるより、字間で位置を調整できるほうが確実）。 */
.head-rail .section__head::after {
    content: "／ " var(--section-en, "");
    display: block;
    margin-top: 10px;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-ink-faint);
}

/* 英字を持たない節では ／ だけが残ってしまう。--section-en が空のときは
   そもそも出さない（:not で空文字の場合を弾けないので、名前のある節だけに
   限定する ―― 名前は rail のテーマでしか付かない）。 */
.head-rail .section:not([class*="section--"]) .section__head::after {
    content: "";
    margin-top: 0;
}


/* 節の左端の縦書きラベル。**--section-en を持たない節では content が空**に
   なり、場所も取らない（トップページ以外のページや、下の一覧に無い節）。 */
.head-rail .section::before {
    content: var(--section-en, "");
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--color-accent);
}

/* --- 縦組みの見出しを本文の左脇に立てる（side）-----------------------
   参考は koshiki-stay（koshiki-stay.jp）。**日本語の見出しそのものを縦に
   組み、本文の左脇に立てる。** 上の rail は小さな英字ラベルが立つだけで
   見出しは中央に残るが、こちらは**中央の見出しが無くなる** ——
   本文の始まる位置が右へずれるので、ページ全体の骨格が変わる。

   **罫は出さない**（rail と同じ判断）。縦の見出しがすでに 1 本の線として
   働いているので、そこへ罫を足すと線が 2 本になる。 */

/* 縦の見出しの原点。**.section ではなく .container に取る** ——
   .section は全幅なので、画面が広いほど見出しが本文から離れてしまう。 */
.head-side .section > .container {
    position: relative;
    /* 縦の見出しが立つ幅。本文はこのぶんだけ右から始まる。 */
    padding-left: 108px;
}

/* **見出しを持たない節では左を空けない。** 一文だけの節（blocks/message）が
   これで、右へ寄せると「見出しが抜けている節」に見える。 */
.head-side .section--message > .container {
    padding-left: 20px;
}

/*
   **すべて「.section の中の見出し」に限る。** .section__title は節の外でも
   使われている —— 問い合わせ誘導（blocks/contact-cta）は自分で背景を持つので
   .section を名乗らず、.container も position を持たない。そこへ絶対配置を
   掛けると、**見出しがページの左上へ飛ぶ**（2026-08-28 に実際に飛ばした。
   「お問い合わせ」が画面の左上に白い縦書きで貼り付いた）。
*/
.head-side .section .section__head {
    text-align: left;
    /* 見出しが流れから外れるので、箱そのものの余白は持たせない。
       **説明文を持たない節で、空の箱に --section-head-gap ぶんの
       空きが残るのを防ぐ。** 空きは下の .section__lead が持つ。 */
    margin-bottom: 0;
}

.head-side .section .section__lead {
    margin-bottom: var(--section-head-gap);
}

.head-side .section .section__title {
    position: absolute;
    top: 0;
    /* .container の左の余白（20px）の内側に立てる。 */
    left: 20px;
    margin: 0;
    writing-mode: vertical-rl;
    /* **節の高さいっぱいまで 1 列で伸ばす。** 縦組みは「高さ」が 1 行の
       長さなので、これが無いと長い見出しが 2 列にも 3 列にも折り返し、
       左脇が文字の塊になる（2026-08-28 に 15 字の見出しで 3 列になった）。

       **em の下限を必ず置くこと。** 100% だけだと、高さの決まっていない
       箱の中では折り返す位置がブラウザ任せになり、8 字の見出しでも 2 列に
       割れた。em は縦組みでは「1 列に入る字数」そのものになる。 */
    height: 100%;
    min-height: 14em;
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: 0.3em;
}

.head-side .section .section__title::after {
    display: none;
}

/* ---------------------------------------------------------------
   写真 3 枚に縦書きの短冊（blocks/photo-tabs.php）

   参考にした斎場の裕心の「CONTENTS」。**写真の高さを 1 枚ずつずらし**、
   濃い色の短冊を写真に重ね、下に白いキャプションの帯を出す。
   段違いにするのがこの並びの要で、そろえると普通の 3 列になる。
   --------------------------------------------------------------- */

.photo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 段違い。2 枚目・3 枚目を少しずつ下げる。 */
.photo-tabs__item--2 { margin-top: 56px; }
.photo-tabs__item--3 { margin-top: 112px; }

.photo-tabs__link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.photo-tabs__media {
    display: block;
    /* 写真が未登録のあいだも場所を確保する（プランのカードと同じ考え方）。 */
    min-height: 420px;
    background:
        linear-gradient(160deg,
            var(--color-placeholder-from), var(--color-placeholder-to));
    background-size: cover;
    background-position: center;
}

/* 濃い色の短冊。写真の上端から少しはみ出して重なる。 */
.photo-tabs__label {
    position: absolute;
    top: -32px;
    left: 56%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 14px 30px;
    background: var(--color-accent);
    color: #fff;
    writing-mode: vertical-rl;
}

.photo-tabs__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.16em;
}

.photo-tabs__en {
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    opacity: 0.85;
}

/* 白いキャプションの帯。写真の下端に重ねる。 */
.photo-tabs__caption {
    position: absolute;
    right: 0;
    bottom: -14px;
    left: 24px;
    padding: 14px 16px;
    background: var(--color-paper);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.photo-tabs__link:hover .photo-tabs__caption {
    color: var(--color-accent);
}

/* 節ごとの英字。**節を足したらここにも 1 行足すこと** —— 足さなくても
   崩れず、ラベルが出ないだけ（rail 以外のテーマには最初から効かない）。
   ヒーローと問い合わせ誘導は自分で背景を持ち、section_class() を呼ばないので
   名前が付かない＝ラベルも出ない。 */
.section--plans         { --section-en: "PLAN"; }
.section--plans-lead    { --section-en: "PLAN"; }
.section--facility      { --section-en: "HALL"; }
.section--hall-access   { --section-en: "ACCESS"; }
.section--company       { --section-en: "COMPANY"; }
.section--voices        { --section-en: "VOICE"; }
.section--faq           { --section-en: "FAQ"; }
.section--news          { --section-en: "NEWS"; }
.section--points-3      { --section-en: "REASON"; }
.section--points-band   { --section-en: "REASON"; }
.section--compare-table { --section-en: "COMPARE"; }
.section--photo-tabs    { --section-en: "CONTENTS"; }
.section--membership    { --section-en: "MEMBER"; }
.section--worries       { --section-en: "VOICE"; }

/* ---------------------------------------------------------------
   ボタン
   --------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 触れる領域を 44px 以上にする。 */
    min-height: 48px;
    padding: 12px 32px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    /* 大きさを変えず色だけ変える。レイアウトがずれない。 */
    transition: background-color 200ms ease, color 200ms ease;
}

.button:hover {
    background: var(--color-accent);
    color: #fff;
}

.button--primary {
    background: var(--color-accent);
    color: #fff;
}

.button--primary:hover {
    background: var(--color-accent-deep);
    color: #fff;
}

.button--tel {
    background: var(--color-tel);
    border-color: var(--color-tel);
    color: #fff;
}

.button--tel:hover {
    background: var(--color-tel-hover);
    border-color: var(--color-tel-hover);
    color: #fff;
}

/* ---------------------------------------------------------------
   ヘッダー
   --------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-bar-bg);
    border-bottom: 1px solid var(--color-line);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    /* ナビ7項目とブランド、電話番号を1行に収めるため、本文より広く取る。 */
    max-width: 1240px;
    margin: 0 auto;
}

.header__brand {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ロゴ画像（サイト設定で選ばれているときだけ出る）。
   縦を決めて横は成り行きにする。どんな縦横比のロゴが来ても
   ヘッダーの高さが動かない。max-width は、横長すぎるロゴが
   ナビゲーションを押し出すのを止める。 */
.header__logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.header__brand small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    color: var(--color-ink-faint);
    line-height: 1.4;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0;
    /* flex アイテムの min-width は既定が auto で、中身より縮まない。
       これを 0 にしないと、ナビの合計幅がヘッダーを押し広げ、
       ページ全体に横スクロールが生まれる。 */
    min-width: 0;
}

.nav__link {
    display: block;
    padding: 10px 11px;
    font-size: 0.875rem;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: border-color 200ms ease, color 200ms ease;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* 緊急時の導線。ヘッダーの右端に固定し、常に視界に入れる。 */
.header__tel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--color-tel);
    color: #fff;
    text-decoration: none;
    /* 電話番号は緊急時の導線。決して折り返させない。 */
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 200ms ease;
}

.header__tel:hover {
    background: var(--color-tel-hover);
    color: #fff;
}

.header__tel-number {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.header__tel-note {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    opacity: 0.9;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   ヘッダーの型（parts/header-*.php）

   **上の .header 一式は「横一列」の型そのもの。** 以下は、その上に差分だけを
   足す。テーマは theme.php に 'header' => '...' と 1 行書いて型を選ぶ。
   宣言しないテーマは横一列のままで、ここの規則は 1 つも当たらない。
   --------------------------------------------------------------- */

/* --- ② 中央ロゴ・2 段（header-stack）------------------------------
   ロゴを中央に大きく置き、その下にナビを 1 本の帯にする。
   高さが横一列型の 2 倍以上になるので、上端だけを見ても別物と分かる。 */
.header--stack {
    text-align: center;
}

.header__inner--stack {
    /* 左の釣り合いおもり・ロゴ・電話ボタンの 3 つを、両端の幅を揃えて並べる。
       中央のロゴを position を使わずに本当の中央へ置くための組み方。 */
    align-items: center;
    padding: 20px 24px 16px;
}

/* 左の空き。電話ボタンとおおよそ同じ幅を占めて、ロゴを中央へ押し戻す。
   1023px 以下では電話ボタンが消えるので、これも一緒に消す。 */
.header__spacer {
    flex: 0 0 200px;
}

.header__brand--stack {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.75rem;
    letter-spacing: 0.14em;
    /* 中央寄せなので、長い社名は折り返してよい。 */
    white-space: normal;
}

.header__brand--stack small {
    margin-top: 6px;
    letter-spacing: 0.24em;
}

.header__logo--stack {
    height: 56px;
    max-width: 320px;
    margin: 0 auto;
}

/* ナビの帯。ヘッダーの地とは別の面にして、2 段であることを見せる。 */
.header__navbar {
    border-top: 1px solid var(--color-line);
    background: var(--color-paper);
}

.nav--band {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    justify-content: center;
}

.nav--band .nav__link {
    padding: 12px 20px;
}

/* --- ③ 用件バー付き・2 段（header-utility）-------------------------
   上に細い濃色の帯。上端の濃い色だけで他の型と区別が付く。 */
.header__utility {
    background: var(--color-accent-deep);
    color: #fff;
}

.header__utility-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 6px 24px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.header__utility-note {
    /* 帯は 1 行に収める。入らない文字は落とす（住所が長い設置がある）。 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header__utility-cta {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.header__utility-cta:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* この型は電話ボタンに受付時間の行を出さないので、番号だけで高さを詰める。 */
.header--utility .header__tel {
    padding: 10px 16px;
}

/* --- ④ 透過・写真に重ねる（header-overlay）-------------------------
   **写真つきのメインビジュアルがあるページだけ** この class が付く
   （parts/header-overlay.php が条件を判断する）。写真が無いときは
   .header のまま出るので、淡いヒーローに白文字が乗ることはない。 */
.header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
    /* 上端をわずかに落として、明るい空の写真でも白文字が浮くようにする。
       ヒーロー自身の暗さ（--hero-shade）とは別に、ここだけに掛ける。 */
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
}

.header--overlay .header__brand,
.header--overlay .nav__link {
    color: #fff;
}

.header--overlay .header__brand small {
    color: rgba(255, 255, 255, 0.82);
}

.header--overlay .nav__link:hover,
.header--overlay .nav__link[aria-current="page"] {
    color: #fff;
    border-bottom-color: #fff;
}

/* 電話ボタンは塗りをやめて白い枠にする。写真の上では塗りの色面が
   重く見えるうえ、テーマ色によっては写真と喧嘩する。 */
.header--overlay .header__tel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.header--overlay .header__tel:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* **2 段にするのがこの型の骨格。** 地を透明にするだけでは、並び方が横一列型と
   まったく同じで「背景の色が違うだけ」にしか見えなかった（2026-08-18 に指摘）。
   上段にロゴと電話、下段にナビを置き、間に細い罫を入れて高さと律動を変える。 */
.header--overlay .header__inner {
    padding: 18px 24px 14px;
}

.header__underbar {
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.nav--under {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    justify-content: flex-start;
}

.nav--under .nav__link {
    padding: 10px 18px 10px 0;
    /* 下線の現在地表示は、罫のすぐ下では窮屈に見える。文字の色だけで示す。 */
    border-bottom: none;
    letter-spacing: 0.06em;
}

/* ヘッダーが流れから外れるぶん、ヒーローの中身が上端に寄りすぎる。
   2 段になったので、その高さぶんだけ内側に落とす。 */
.header--overlay + main .hero > .container {
    padding-top: 124px;
}

/* --- ⑤ 面のメニュー（header-panel）--------------------------------
   **メニューだけの型。ロゴも電話も持たない。** 既存の 4 つはどれも
   ロゴ・電話・メニューが同じ帯に同居していた。参考にした斎場の裕心は
   画面いっぱいの絵が先に来て、その下に濃色の面のメニューが敷かれる形で、
   社名は絵の上に小さく置かれている（.hero__brand）。

   **この型は主役の絵を持つページでは絵の下に回る**（Theme::$belowHeroHeaders）。
   絵を持たない下層ページでは、今までどおりページの上端に出る。 */
.nav--panel {
    display: grid;
    /* 項目が増減しても等分を保つ。マス同士の仕切りは、隙間から
       下の濃い地が覗く形で作る（罫を 1 本ずつ引かない）。 */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    padding: 0;
    background: rgba(255, 255, 255, 0.28);
    border-top: 1px solid var(--color-line);
}

.nav--panel .nav__cell {
    display: block;
    padding: 14px 8px 16px;
    background: var(--color-accent);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.nav--panel .nav__cell:hover,
.nav--panel .nav__cell[aria-current="page"] {
    background: var(--color-accent-deep);
}

/* 英字は道しるべではなく飾り。小さく、開いて、目立たせない。 */
.nav__cell-en {
    display: block;
    margin-bottom: 6px;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    opacity: 0.72;
}

.nav__cell-ja {
    display: block;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
}

/* --- ⑥ ロゴ中央・左右振り分け（header-split）-----------------------
   **1 段のまま、メニューをロゴの左右へ割る型。** 既存の 5 つはメニューが
   1 か所にまとまっていて、変わるのはその位置（右・下の帯・下段・絵の下）
   だけだった。**割ってしまうと、上端の律動そのものが変わる。**
   項目数の多いテーマほど釣り合いが取れる（参考元は 9 項目）。 */
.header__inner--split {
    /* 左右を 1fr で等分し、中央をロゴの幅ぶんだけ取る。**両端の中身の幅が
       違ってもロゴが動かない**のがこの組み方の要点で、header-stack が
       釣り合いおもりでやっていることを grid で正確にやっている。 */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
}

/* 左右それぞれの塊。外端に受付時間／電話ボタン、内端にメニューを寄せる。 */
.header__side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

/* 左端の受付時間。**釣り合いを取るためだけの空き箱にしない。**
   電話ボタン側の同じ文は下で消しているので、重複はしない。 */
.header__hours {
    margin: 0;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--color-ink-faint);
    white-space: nowrap;

    /* **縮むのはこちらで、メニューではない。** 受付時間が長い設置
       （「年中無休・事前のご相談も承ります」など）では、縮まない指定に
       していると左のメニューが押し出されて**項目が黙って切れる**
       （2026-08-27 に見本で「会社案内」が「会社案I」になった）。
       道しるべを削るより、案内文を三点リーダで詰めるほうが害が小さい
       —— 用件バー型の .header__utility-note と同じ扱い。 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 割ったメニュー。1 段に 2 本入るので、横一列型より詰めて置く。 */
.nav--split {
    min-width: 0;
    overflow: hidden;
}

.nav--split .nav__link {
    padding: 10px 9px;
}

.header__brand--split {
    text-align: center;
    font-size: 1.375rem;
    letter-spacing: 0.12em;
    /* 中央寄せなので、長い社名は折り返してよい（header-stack と同じ）。 */
    white-space: normal;
}

.header__brand--split small {
    margin-top: 4px;
    letter-spacing: 0.2em;
}

.header__logo--split {
    height: 44px;
    max-width: 260px;
    margin: 0 auto;
}

/* この型は電話ボタンに受付時間を出さない。**左端に同じ文が出ている**ため
   （用件バー型が同じ理由で消しているのと同じ扱い）。番号だけになるぶん、
   高さを詰めて 1 段の中に収める。 */
.header--split .header__tel-note {
    display: none;
}

.header--split .header__tel {
    padding: 10px 16px;
}

/* --- ⑦ 縦の柱（header-rail）---------------------------------------
   **ここだけは「上の帯」ではない。** 2026-08-27 に「どのテーマも同じ
   レイアウトに見える。お客様が選べない」と指摘を受けて作った型で、
   ヘッダーを画面の左端に固定し、本文をその右へ寄せる。上の 6 つは
   並び方こそ違っても**どれも上端の帯**なので、一枚絵の構図が変わらなかった。

   本文を寄せるのは <body>（.has-side-header）。ヘッダー・本文・フッターは
   兄弟で、3 つをくくる要素が無いため、そこにしか掛けられない。 */
.has-side-header {
    padding-left: 260px;
}

.header--rail {
    /* **固定する。** スクロールしても社名と電話が消えない。
       body の padding-left が空けた 260px にちょうど収まる。 */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: var(--z-header);

    background: var(--rail-bg);
    color: var(--rail-ink);
    border-bottom: none;

    /* 項目が多い設置では柱の中で縦にスクロールさせる。
       画面の高さより長くなっても、メニューが画面外へ出ない。 */
    overflow-y: auto;
}

.header__rail-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* 柱は 260px しかないので、横の余白は控えめに取る。**ここを 28px に
       すると、受付時間の行が電話ボタンの中で 2 行に折れる**（下の
       .header__tel--rail .header__tel-note の注記）。 */
    padding: 40px 20px;
}

.header__brand--rail {
    color: var(--rail-ink);
    font-size: 1.375rem;
    letter-spacing: 0.12em;
    /* 柱は狭いので、長い社名は折り返してよい。 */
    white-space: normal;
    line-height: 1.8;
}

.header__brand--rail small {
    margin-top: 10px;
    color: var(--rail-ink);
    /* 地の色に対して十分な差があるので、薄くしてよい。 */
    opacity: 0.78;
    letter-spacing: 0.14em;
}

.header__logo--rail {
    height: 48px;
    max-width: 100%;
}

/* 柱の中の電話。**塗りをやめて枠にする** —— 柱そのものが色面なので、
   その上に別の色面を重ねると柱が 2 色になって濁る。 */
.header__tel--rail {
    background: transparent;
    border: 1px solid var(--rail-ink);
    color: var(--rail-ink);
    /* 柱は幅 260px しかないので、横の余白と間隔を詰めて中身の幅を稼ぐ。 */
    padding: 12px 10px;
    gap: 6px;
}

/*
   **受付時間だけは柱の中で折り返させる。**
   .header__tel は「電話番号を決して折り返させない」ために white-space: nowrap を
   掛けており、受付時間の行もそれを継いでいる。上下の帯のヘッダーでは横幅が
   あるので問題にならないが、**柱は 260px しかないので、受付時間が長い設置
   （「年中無休・事前相談も承ります」など）で枠から文字がはみ出す**
   （2026-08-27 に実機で確認）。

   **番号は nowrap のまま**（.header__tel から継ぐ）。折り返してよいのは
   受付時間の行だけで、緊急の導線である番号は 1 行に保つ。
*/
.header__tel--rail .header__tel-note {
    white-space: normal;
    line-height: 1.5;
}

.header__tel--rail:hover {
    background: var(--rail-ink);
    color: var(--rail-bg);
}

.header__tel--rail .header__tel-number {
    font-size: 1.0625rem;
    letter-spacing: 0;
}

/* メニューは縦に積む。**柱の型の骨格はここ** —— 横一列型は 1 行に
   並べるので、同じ項目でも読み方が変わる。 */
.nav--rail {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.nav--rail .nav__link {
    color: var(--rail-ink);
    padding: 11px 0;
    /* メニューの語も柱の幅で折り返してよい。**上下の帯では nowrap が
       正しい**（1 行に並べるため）が、縦に積む柱では長い項目名が
       はみ出すだけになる（受付時間と同じ理由）。 */
    white-space: normal;
    border-bottom: 1px solid transparent;
    /* 柱の中では下線が「区切り」に見えてしまうので、現在地は
       左の縦棒で示す（下の :hover と aria-current）。 */
    border-left: 3px solid transparent;
    padding-left: 12px;
    letter-spacing: 0.08em;
}

.nav--rail .nav__link:hover,
.nav--rail .nav__link[aria-current="page"] {
    color: var(--rail-ink);
    border-bottom-color: transparent;
    border-left-color: var(--rail-ink);
}

/* --- ⑧ 中央のロゴと、垂れるメニュー（header-drop）------------------
   参考は koshiki-stay（koshiki-stay.jp）。**上端に帯を作らない型。**
   ロゴだけが中央に置かれ、メニューは画面の右上から縦組みの短冊になって
   垂れ下がる。①〜⑥ はどれも上端の帯、⑦ は左端の色の面。
   **この型は色の面を 1 つも持たない**ので、一覧に並べたときの三つ目の構図になる。

   **縦組みは右から読む。** メニューはいちばん右が先頭で、左へ進むほど後ろの
   項目になる。DOM の並びは他の型と同じままにして、向きだけ row-reverse で
   変えている（DOM を逆に書くと、読み上げとタブ移動の順まで逆になる）。 */
.header--drop {
    /* **地も罫も持たない。** 帯に見せないための要。 */
    position: static;
    background: none;
    border-bottom: none;
}

.header__drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px 8px;
    max-width: 1240px;
    margin: 0 auto;
}

.header__brand--drop {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.24em;
    /* 中央のロゴは長い社名でも折り返してよい（1 行に並べる帯ではない）。 */
    white-space: normal;
}

.header__brand--drop small {
    margin-top: 10px;
    letter-spacing: 0.2em;
}

.header__logo--drop {
    height: 56px;
    margin: 0 auto;
}

/* 電話は塗りをやめて字だけにする。**面を持たないのがこの型の骨格**なので、
   ここに色面を置くと上端に帯が戻ってしまう。 */
.header__tel--drop {
    background: none;
    color: var(--color-ink);
    padding: 4px 0;
    gap: 8px;
}

.header__tel--drop:hover {
    background: none;
    color: var(--color-accent);
}

.header__tel--drop .header__tel-number {
    font-size: 1.125rem;
    letter-spacing: 0.08em;
}

/*
   **受付時間だけは折り返させる。** .header__tel の white-space: nowrap は
   「電話番号を決して折り返させない」ための指定で、受付時間の行もそれを継ぐ。
   **新しいヘッダーの型を作るたびにここを踏む**（header-split で語が切れ、
   header-rail で枠からはみ出した）。番号は nowrap のまま。
*/
.header__tel--drop .header__tel-note {
    color: var(--color-ink-faint);
    white-space: normal;
}

/* **画面の右上から垂れる短冊。** どこまで読み進めてもメニューが視界に残る
   （柱の型が固定なのと同じ役目を、縦組みの字だけで果たす）。 */
.nav--drop {
    position: fixed;
    top: 0;
    right: 28px;
    z-index: var(--z-header);
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 20px;
    /* 短冊の背後だけを地の色で敷く。写真や色面の上へ来ても字が読める。 */
    padding: 30px 18px 20px;
    background: var(--color-bar-bg);
}

.nav--drop .nav__link {
    writing-mode: vertical-rl;
    padding: 0 0 0 6px;
    font-size: 0.875rem;
    letter-spacing: 0.28em;
    /* 縦組みでは下線が「右の縦線」になってしまう。現在地の印は左の縦棒に。 */
    border-bottom: none;
    border-left: 2px solid transparent;
    /* 短冊の長さをそろえる。項目名の字数が違っても下端が乱れない。 */
    min-height: 168px;
}

.nav--drop .nav__link:hover,
.nav--drop .nav__link[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--color-accent);
}

/*
   **見本の中では固定をやめる。** position: fixed は画面に対して効くので、
   見本の帯（.preview-bar）の上に短冊が重なる。枠（.preview-frame）は
   position: relative なので、絶対配置にすれば帯の下から始まる。
   撮影（?bare=1）では帯ごと出ないので、サムネイルの写り方は変わらない。
*/
.preview-frame .nav--drop {
    position: absolute;
}

.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ---------------------------------------------------------------
   メインビジュアル
   --------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-height);
    padding: 80px 0;
    /* 写真が入るまでの地。淡い階調で、静けさを保つ。 */
    background:
        linear-gradient(180deg, rgba(31, 28, 26, 0.04), rgba(31, 28, 26, 0.10)),
        linear-gradient(160deg,
            var(--color-hero-from) 0%,
            var(--color-hero-mid) 55%,
            var(--color-hero-to) 100%);
    text-align: center;
}

/* 写真が設定されているとき。
   どんな写真が来ても見出しが読めることを、編集者の判断に任せない。
   暗いオーバーレイを必ず挟み、文字は白に切り替える。 */
.hero--photo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero--photo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 濃さは .hero--overlay-* が --hero-shade で差し替える。
       上端をすこし濃くしてあるのは、固定ヘッダーが写真に重なる位置で
       境目が消えないようにするため。 */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 40%),
        rgba(0, 0, 0, var(--hero-shade, 0.45));
}

/* 文字と操作は必ずオーバーレイより上に置く。 */
.hero--photo > .container {
    position: relative;
    z-index: 1;

    /*
       写真の上に置くものは、既定で白にしておく。
       要素名を1つずつ並べる書き方だと、ヒーローに新しい行を足すたびに
       ここへの追記を忘れ、「黒い文字が暗い写真に沈んで読めない」を
       繰り返す（blocks/hero-price の金額で実際にやった）。
       色を持つべきものは、それぞれが自分で上書きする。
    */
    color: #fff;
}

.hero--photo .hero__copy,
.hero--photo .hero__sub,
.hero--photo .hero__price {
    color: #fff;
    /* オーバーレイで足りない分の保険。白い空や壁の上でも輪郭が残る。 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 枠だけのボタンは、写真の上では色が沈む。白に置き換える。
   電話ボタン（.button--tel）は塗りつぶしなのでそのままでよい。 */
.hero--photo .button:not(.button--tel) {
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}

.hero--photo .button:not(.button--tel):hover {
    background: #fff;
    color: var(--color-ink);
}

/* 「なし」は本当に何も重ねない。上端のグラデーションも消す
   （0.18 が残ると「なし」を選んだのに暗くなり、設定が嘘になる）。
   文字は白のままなので、明るい写真では読みにくくなる。それを承知で
   選べるようにしてあり、既定にはしていない。 */
.hero--overlay-none::before { display: none; }

.hero--overlay-light  { --hero-shade: 0.28; }
.hero--overlay-medium { --hero-shade: 0.45; }
.hero--overlay-strong { --hero-shade: 0.62; }

.hero__copy {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    line-height: 2;
    letter-spacing: 0.12em;
    color: var(--color-ink);
    margin: 0 0 24px;
}

.hero__sub {
    font-size: 1rem;
    color: var(--color-ink-soft);
    letter-spacing: 0.06em;
    margin-bottom: 40px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* ---------------------------------------------------------------
   メインビジュアル「左右分割」（blocks/hero-split）

   既存の 3 つはどれも**写真を全面に敷いて文字をその上に載せる**形で、
   骨格が同じだった。ここは**重ねずに左右へ分ける**ので、サムネイルの
   上半分の見え方が変わる。

   **文字は写真の上に乗らないので、白へ切り替えない。** .hero--photo を
   付けないため、色は .hero__copy / .hero__sub の既定（濃い文字）のまま。
   --------------------------------------------------------------- */
.hero--split {
    padding: 56px 0;
    text-align: left;
    /* **写真を --hero-min-height いっぱいに伸ばすため**、既定の中央寄せを
       やめて引き伸ばしにする。あゆみのように背の高いヒーローを指定している
       テーマだと、中央寄せのままでは写真の上下に大きな空きが残り、
       置き場所を決めかねているように見える。 */
    align-items: stretch;
}

/* 中の grid まで高さを伝える。.container は width:100% と margin:0 auto を
   持っているので、flex にしても左右の中央寄せは変わらない。 */
.hero--split > .container {
    display: flex;
}

.hero__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 48px;
    width: 100%;
}

/* 伸ばすのは写真だけ。文字は縦位置中央のままにする。 */
.hero__split-body {
    align-self: center;
}

.hero__split-media {
    /* 写真が未登録のあいだも色面で場所を確保する。あとから入れても
       段組みが変わらない（プランのカードと同じ考え方）。 */
    min-height: 380px;
    background:
        linear-gradient(160deg,
            var(--color-placeholder-from), var(--color-placeholder-to));
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
}

/* 全面に敷く型では中央だったが、左右に分けたときに中央寄せのままだと
   見出しと操作の頭がそろわない。 */
.hero--split .hero__actions {
    justify-content: flex-start;
}

/* 主役の絵の上に置く名乗り。**ヘッダーの帯が絵の下へ回る型のときだけ出る。**
   帯にせず、絵の左上に小さく置く（参考にした斎場の裕心と同じ位置）。 */
.hero__brand {
    position: absolute;
    top: 32px;
    left: 40px;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    letter-spacing: 0.16em;
    color: var(--color-ink);
    text-decoration: none;
}

.hero__logo {
    display: block;
    height: 40px;
    width: auto;
}

/* --- 地紋（hero-pattern）------------------------------------------
   **写真を 1 枚も使わない型。** 他の 4 つは写真が主役で、一覧のサムネイルは
   どれも「写真のある一枚絵」になる。地紋（青海波）を敷いて文字だけを置くと、
   並べたときに一目で別物になる。**写真が 1 枚も無い設置でも見え方が
   変わらない**のも、この型だけの性質。 */
.hero--pattern {
    overflow: hidden;
    background: var(--color-paper);
    text-align: center;
}

/* 地紋そのもの。**色は --color-accent を currentColor 経由で受け取り、
   濃さは opacity だけで決める。** 色ごとに rgba を書き分けずに済むので、
   テーマが色を変えれば地紋の色もついてくる。 */
.hero__pattern {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: var(--color-accent);
    opacity: 0.16;
    background-image:
        radial-gradient(circle at 50% 100%,
            transparent 20%, currentColor 21%, currentColor 26%, transparent 27%),
        radial-gradient(circle at 50% 100%,
            transparent 44%, currentColor 45%, currentColor 50%, transparent 51%),
        radial-gradient(circle at 50% 100%,
            transparent 68%, currentColor 69%, currentColor 74%, transparent 75%);
    background-size: 96px 48px;
}

/* 文字は地紋の上。地紋は淡いので、色は本文と同じままで読める
   （全面に敷く型のように白へ切り替えない）。 */
.hero--pattern > .container {
    position: relative;
}

/* ---------------------------------------------------------------
   メインビジュアル「上下 2 段」（blocks/hero-band）

   上がキーカラーの面、下が横長写真の帯。**分ける向きを縦にした型。**
   左右に分ける hero-split と違い、4:3 のサムネイルでは
   「上半分が濃い色、下半分が写真」になり、写真の面積そのものが変わる。

   **文字は写真に乗らないので、暗さのオーバーレイは掛けない。** かわりに
   面の上に載るので、ここだけは白へ切り替える（全面型と同じ理由・別の地）。
   --------------------------------------------------------------- */
.hero--band {
    /* .hero は flex + 中央寄せ + 最低高さ + 上下の余白を持つ。この型は
       **2 つの段の合計で高さを作る**ので、その 4 つとも打ち消す。
       淡いグラデーションの地も、面と帯に完全に隠れるので消す。 */
    display: block;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    background: none;
    text-align: left;
}

/* 上段。キーカラーを全幅に敷く。 */
.hero__band-panel {
    background: var(--color-accent);
    color: #fff;
    padding: 72px 0 64px;
}

/* 面の上なので白へ。**--color-accent は 5 テーマとも白に対して 4.5:1 以上**
   （実測済み）なので、テーマが色を変えてもここは成立する。
   **新しいテーマでキーカラーを明るくするときは、この型を思い出すこと。** */
.hero__band-panel .hero__copy {
    color: #fff;
}

.hero__band-panel .hero__sub {
    color: rgba(255, 255, 255, 0.88);
}

/* 全面に敷く型では中央だったが、面の上では見出しと操作の頭をそろえる
   （hero-split と同じ扱い）。 */
.hero--band .hero__actions {
    justify-content: flex-start;
}

/* 枠だけのボタンは、キーカラーの面の上では枠も文字も沈む。
   .hero--photo が写真の上でやっているのと同じ置き換えをする。 */
.hero--band .button:not(.button--tel) {
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}

.hero--band .button:not(.button--tel):hover {
    background: #fff;
    color: var(--color-ink);
}

/* **電話ボタンは面との境目が立たない。** そなえの場合、金 #8a7034 と
   墨 #33362f の差は 2.60:1 で、非文字の基準（3:1）に届かない。白文字の
   読みやすさ（4.72:1）とは別の話なので、境目だけ細い白枠で立たせる。 */
.hero--band .button--tel {
    border-color: rgba(255, 255, 255, 0.6);
}

/* 下段の写真の帯。**全幅に敷く**（container の中に入れると「帯」に見えず、
   面の下に写真のカードが 1 枚置かれているだけになる）。

   高さは --hero-min-height から導く。テーマがヒーローを高く指定したら
   帯も一緒に伸びる —— 固定値にすると、背の高いテーマでは面ばかりが
   伸びて写真が細い線になる。 */
.hero__band-media {
    height: calc(var(--hero-min-height) * 0.5);
    /* 写真が未登録のあいだも色面で場所を確保する。あとから入れても
       段組みが変わらない（hero-split・プランのカードと同じ考え方）。 */
    background:
        linear-gradient(160deg,
            var(--color-placeholder-from), var(--color-placeholder-to));
    background-size: cover;
    background-position: center;
}

/* ---------------------------------------------------------------
   メインビジュアル「白紙と声」（blocks/hero-quiet）

   参考は第一葬祭（daiichisousai.jp）。**地に何も敷かない。** 写真も地紋も
   使わず、余白そのものを絵にして、その下に**丸の中へお客様の不安の言葉**を
   並べる。売り込みではなく、訪れた人の困りごとを先に言葉にする型。

   **写真の有無に一切左右されない**（hero-pattern と同じ性質）。新規の設置は
   media 0 枚から始まるので、初対面の画面が崩れないのは実際に効く。
   --------------------------------------------------------------- */
.hero--quiet {
    display: block;
    background: var(--color-paper);
    text-align: center;
    /* 余白そのものが骨格なので、上下は --hero-min-height ではなく
       余白で作る（中身の高さで決まる）。 */
    min-height: 0;
    padding: 104px 0 96px;
}

.hero--quiet .hero__copy {
    /* 全面型より一段大きく。**白地にこれ 1 つしか無い**ので、
       小さいと画面が空白に見える。 */
    font-size: clamp(1.75rem, 5vw, 3rem);
    margin-bottom: 28px;
}

.hero--quiet .hero__sub {
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 44px;
}

/* ---------------------------------------------------------------
   手描きの丸（.circles）

   **2 つの部品が共有する飾り。** blocks/hero-quiet（地に何も敷かない
   ヒーロー）と blocks/worries（お客様の不安を並べる節）の両方が使う。
   最初はヒーローの中だけにあったが、2026-08-27 にヒーローを写真の型へ
   乗り換えたときに節へ切り出した。**同じ形の CSS を 2 か所に書かない。**

   **上下にずらす**のがこの飾りの見え方を決めている ——
   横一列にそろえると、ただのボタンの列に見える。
   --------------------------------------------------------------- */
.circles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ヒーローの中に置くときだけ、見出しとのあいだを空ける。 */
.hero--quiet .circles {
    margin-top: 72px;
}

.circles__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    height: 216px;
    padding: 28px;
    box-sizing: border-box;

    /* **正円にしない。** 四隅の半径をわざと不揃いにすると、定規で引いた円
       ではなく手で描いた丸に見える。参考にしたサイトが手描きの丸なので、
       ここだけは「きれいな円」にしないほうが近づく。 */
    border: 2px solid var(--color-accent);
    border-radius: 48% 52% 51% 49% / 50% 47% 53% 50%;

    font-size: 0.9375rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
    text-align: center;
}

/* 1 つずつ形と高さを変える。**同じ形を 3 つ並べると手描きに見えない。** */
.circles__item--1 {
    border-radius: 49% 51% 47% 53% / 52% 48% 52% 48%;
}

.circles__item--2 {
    margin-top: 40px;
    border-radius: 52% 48% 53% 47% / 47% 53% 47% 53%;
}

.circles__item--3 {
    margin-top: 12px;
    border-radius: 47% 53% 49% 51% / 51% 49% 51% 49%;
}

/* ---------------------------------------------------------------
   メインビジュアル「縦組みと写真」（blocks/hero-vertical）

   参考は東京家族葬（tokyo.yawaragisaijyo.com）。**写真を全面に敷き、
   キャッチを縦に組む。** 2026-08-27 に「昔のサイトみたい」と指摘を受けて
   足した型で、見本帳の 3 社とも大きな写真を持っていたのに、そなえだけが
   写真 0 枚だったのが最大の差だった。

   **縦組みは右から読む。** 見出しがいちばん右、副文がその左に来る。
   --------------------------------------------------------------- */
.hero--vertical {
    position: relative;
    display: block;
    min-height: var(--hero-min-height);
    padding: 0;
    /* .hero の淡いグラデーションは下の媒体が受け持つ。 */
    background: none;
    text-align: left;
}

.hero__vertical-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    /* 写真が未登録のあいだの地。**この状態でも文字は濃いまま**なので読める
       （白へ切り替えるのは .hero--vertical-photo のときだけ）。 */
    background-image:
        linear-gradient(160deg,
            var(--color-hero-from), var(--color-hero-mid), var(--color-hero-to));
}

/* **文字が乗る右側だけを落とす。** 全面を暗くすると写真の中身が死ぬ。
   写真があるときだけ掛ける。 */
.hero--vertical-photo .hero__vertical-media::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(270deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.30) 34%,
        rgba(0, 0, 0, 0) 66%);
}

.hero--vertical > .container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* 縦組みは右から読むので、塊ごと右へ寄せる。 */
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    min-height: var(--hero-min-height);
    padding-top: 64px;
    padding-bottom: 64px;
}

/* **row-reverse。** DOM は見出し → 副文の順だが、縦組みでは
   いちばん右が先に読まれる。ここを row にすると読む順が逆になる。 */
.hero__vertical-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 24px;
}

.hero__copy--vertical {
    writing-mode: vertical-rl;
    margin: 0;
    /* 縦組みは 1 行の長さが高さになるので、横組みより字を大きく取れる。 */
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    line-height: 1.9;
    letter-spacing: 0.16em;
    /* **1 列に収めようとしない。** 縦組みは列の高さで折り返すのが自然で、
       収めきろうとすると字が小さくなるか、ヒーローが画面より高くなる。
       ヒーローの高さから操作とボタンのぶんを引いた値で折り返させる。 */
    max-height: calc(var(--hero-min-height) - 220px);
}

.hero__sub--vertical {
    writing-mode: vertical-rl;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 2.2;
    letter-spacing: 0.1em;
    max-height: calc(var(--hero-min-height) - 220px);
}

/* 写真の上では白へ。文字は縦組みでも読みやすさの基準は同じ。 */
.hero--vertical-photo .hero__copy--vertical,
.hero--vertical-photo .hero__sub--vertical {
    color: #fff;
    /* 落としきれない明るい部分（障子・空）の上でも輪郭が残るように。 */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* 操作は横組みのまま。**縦にすると押せる面積が細くなる**うえ、
   スマホで指の当たりが悪くなる。右端にそろえる。 */
.hero--vertical .hero__actions {
    justify-content: flex-end;
}

/* 枠だけのボタンは写真の上では沈む。全面型と同じ置き換えをする。 */
.hero--vertical-photo .button:not(.button--tel) {
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
}

.hero--vertical-photo .button:not(.button--tel):hover {
    background: #fff;
    color: var(--color-ink);
}

/* ---------------------------------------------------------------
   メインビジュアル「対角の 2 枚」（blocks/hero-scatter）

   参考は koshiki-stay（koshiki-stay.jp）。**写真を全面に敷かず、大きな
   2 枚を左上と右下にずらして置く。** 全面型（hero / hero-price /
   hero-emergency / hero-vertical）は 4:3 の一枚絵では「暗い写真に白い文字」に
   しか見えず、重ねない型（hero-split は左右・hero-band は上下）は面が
   1 本の直線で割れる。**この型は写真が 2 つの塊に分かれて斜めに置かれる。**

   置き方は 2 行。写真と文字が対角に来るように配る。

       ┌───────────────┬──────────┐
       │  写真1         │  キャッチ   │
       ├──────────┬────┴──────────┤
       │  ボタン    │   写真2          │
       └──────────┴─────────────────┘

   **文字は写真に乗らない。** だから写真が 1 枚も無い設置でも最初から
   読める（hero-split と同じ性質。全面型は写真の有無で文字色が変わる）。
   --------------------------------------------------------------- */
.hero--scatter {
    display: block;
    /*
       **写真のはみ出しをここで飲む。** 下の 2 枚は画面の端まで届かせて
       あるので、縦のスクロールバーのぶんだけ外へ出ることがある。
       塞がないとページ全体に横スクロールが生まれる。
    */
    overflow: hidden;
    /* 高さは中の 2 行が決める。--hero-min-height を外枠に掛けると、
       写真の高さと二重に効いて縦に間延びする。 */
    min-height: 0;
    padding: 56px 0 64px;
    /* .hero の淡いグラデーションは写真の側が持つ。地はページのまま。 */
    background: none;
    text-align: left;
}

.hero__scatter {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 40px;
    row-gap: 32px;
    align-items: center;
}

.hero__scatter-photo {
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    /* 写真が未登録のあいだの地。**文字が乗らないので、この状態でも
       読みやすさは 1 つも変わらない。** */
    background-image:
        linear-gradient(160deg,
            var(--color-hero-from), var(--color-hero-mid), var(--color-hero-to));
}

/* **写真は箱の外へはみ出させる。** 参考元がそうしていて、中央 1080px に
   収めると「並んだカード」に見える。はみ出す向きは 2 枚で逆にする。 */
.hero__scatter-photo--1 {
    grid-column: 1 / 8;
    grid-row: 1;
    height: calc(var(--hero-min-height) * 0.66);
    /* **画面の左端ちょうどまで届かせる。** 中央 1080px の箱の中に収めると
       「並んだカード」に見える。固定値にすると、箱と画面の隙間が広い画面では
       端に届かず、狭い画面でははみ出しすぎる。 */
    margin-left: calc(50% - 50vw);
}

.hero__scatter-photo--2 {
    grid-column: 6 / 13;
    grid-row: 2;
    height: calc(var(--hero-min-height) * 0.54);
    margin-right: calc(50% - 50vw);
}

.hero__scatter-text {
    grid-column: 8 / 13;
    grid-row: 1;
}

/* 操作は左下。**文字と対角に置く**ので、写真・文字・操作が四隅に散る。
   中央へ寄せると他の型と同じ構図に戻る。 */
.hero__actions--scatter {
    grid-column: 1 / 6;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.hero__copy--scatter {
    /* 右の狭い列に入るので、全面型より字を小さく取る。 */
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 2.1;
    margin-bottom: 20px;
}

.hero__sub--scatter {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   一文だけの節（blocks/message.php）

   参考は koshiki-stay（koshiki-stay.jp）。ファーストビューの直後に、
   **見出しも罫も写真も持たない一文だけ**を置く。訴求点を 3 つ並べる
   （points-3）のとも、語を横一列に置く（points-band）のとも違い、
   **数えられるものが何も無い**のがこの節の役目。
   --------------------------------------------------------------- */
.message__text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    line-height: 2.6;
    letter-spacing: var(--letter-spacing-heading);
    text-align: center;
}

/* ---------------------------------------------------------------
   プランのカード（4カラム）
   --------------------------------------------------------------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* 拡大縮小はしない。カードが動くとレイアウトが揺れる。 */
.plan-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 16px rgba(31, 28, 26, 0.08);
    color: inherit;
}

.plan-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 写真の縦横比がまちまちでも、カードの高さを揃える。 */
    object-fit: cover;
    background: linear-gradient(160deg,
        var(--color-placeholder-from), var(--color-placeholder-to));
    /* aspect-ratio 非対応の古いブラウザでも高さが潰れないようにする。 */
    min-height: 160px;
}

.plan-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px;
}

.plan-card__name {
    font-size: 1.125rem;
    margin-bottom: 10px;
}

.plan-card__summary {
    font-size: 0.875rem;
    color: var(--color-ink-soft);
    line-height: 1.8;
    flex: 1;
    margin-bottom: 16px;
}

.plan-card__price {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    color: var(--color-ink);
    border-top: 1px solid var(--color-line);
    padding-top: 14px;
}

.plan-card__price small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-ink-faint);
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   プランのカードの型（theme.php の 'plan_card'）

   **カードが持つものは全型とも同じ 4 つ**（写真・名前・概要・価格）で、
   変わるのは並べ方だけ。だからテンプレートは public/_plan-card.php の
   1 枚を全型で共有し、ここでは箱に付いた修飾クラスだけで組み替える。

   **既定（tile）には修飾クラスが付かない**ので、上の規則がそのまま
   従来の 4 列格子になる。宣言しないテーマの見た目は 1px も変わらない。

   型を増やすときは Theme::$planCardTypes にも足すこと。
   --------------------------------------------------------------- */

/* row … 全幅の行を縦に積む。写真が左、文字が右、価格は右端。
   金額が縦に揃って上から下へ読み比べられるので、価格を訴える型に向く。 */
.plan-grid--row {
    grid-template-columns: 1fr;
    gap: 20px;
}

.plan-grid--row .plan-card {
    flex-direction: row;
}

.plan-grid--row .plan-card__image {
    width: 280px;
    /* 縮まないよう flex-basis で固定する。写真の幅が行ごとに違うと、
       文字の始まる位置がそろわず「表」に見えなくなる。 */
    flex: 0 0 280px;
}

/* 名前と概要を左に積み、価格をその右へ縦位置中央で置く。
   縦積みの flex では価格が下に流れてしまうので、ここだけ grid にする。 */
.plan-grid--row .plan-card__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 28px;
    padding: 20px 24px;
}

.plan-grid--row .plan-card__name {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 6px;
}

.plan-grid--row .plan-card__summary {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
}

.plan-grid--row .plan-card__price {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* 罫は縦積みのときに名前と価格を分けるためのもの。横並びでは
       価格が独立した列になっているので要らない。 */
    border-top: 0;
    padding-top: 0;
    text-align: right;
    font-size: 1.625rem;
    /* 「168,000円」が折り返すと金額が 2 行になり、行ごとに高さがずれる。 */
    white-space: nowrap;
}

/* duo … 2 列の大判。写真を横長にして面積を増やし、余白を広く取る。
   4 列より 1 枚あたりの情報が大きく出るので、格式を出す型に向く。 */
.plan-grid--duo {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.plan-grid--duo .plan-card__image {
    aspect-ratio: 16 / 9;
}

.plan-grid--duo .plan-card__body {
    padding: 28px 32px 32px;
}

.plan-grid--duo .plan-card__name {
    font-size: 1.375rem;
}

.plan-grid--duo .plan-card__price {
    font-size: 1.625rem;
}

/* feature … 先頭の 1 枚だけを全幅の横並びにし、残りを 3 列で下に敷く。
   「まずこれ」を示す型。並び順は管理画面のプランの並びがそのまま効く。

   **プランが 5 つ以上あると 2 段目が 3 列 + 余りになる。** 崩れはしないが、
   この型を選ぶテーマは 4 つ前後を想定している。 */
.plan-grid--feature {
    grid-template-columns: repeat(3, 1fr);
}

.plan-grid--feature .plan-card:first-child {
    grid-column: 1 / -1;
    flex-direction: row;
}

.plan-grid--feature .plan-card:first-child .plan-card__image {
    width: 50%;
    flex: 0 0 50%;
}

.plan-grid--feature .plan-card:first-child .plan-card__body {
    justify-content: center;
    padding: 32px 36px;
}

.plan-grid--feature .plan-card:first-child .plan-card__name {
    font-size: 1.5rem;
}

/* 縦積みでは概要が伸びて価格を下端へ押し出すが、この 1 枚は中央に
   まとめたいので伸ばさない。 */
.plan-grid--feature .plan-card:first-child .plan-card__summary {
    flex: 0 0 auto;
}

.plan-grid--feature .plan-card:first-child .plan-card__price {
    font-size: 1.75rem;
}

/* ---------------------------------------------------------------
   プラン（面と写真）（blocks/plans-lead.php）

   参考は斎場の裕心（yushin-sakai.jp）の PLAN。**左にキーカラーで塗った面、
   右に写真 1 枚**を隙間なく並べ、金額もプラン名もトップには出さない。

   **カードを並べる節（blocks/plans.php）とは別の節。** プランのカードの型
   （theme.php の 'plan_card'）はこの節に効かない —— この節を選んだテーマでも、
   /plans に並ぶカードは型に従う。

   **面と写真は突き合わせる（gap を持たない）。** 参考にしたサイトも面の右端に
   写真が接していて、隙間を空けると独立した 2 つの箱に見える。
   --------------------------------------------------------------- */
.plans-lead {
    display: grid;
    grid-template-columns: 420px 1fr;
    align-items: stretch;
}

/* **この節に帯の地色は塗らない。** 面がキーカラーで塗ってあるので、その下に
   帯を敷くと面と写真が「地の上に浮いたカード」に見える。帯の交互は
   数え続けるので、次の節からは今までどおり交互に戻る。 */
.section--plans-lead.section--alt {
    background: var(--color-paper);
}

/* **白文字を載せる面。** 5 テーマとも --color-accent は白に対して 4.5:1 を
   満たしている（実測済み）。新しいテーマでキーカラーを明るくするときは、
   ここに白文字が載ることを思い出すこと。 */
.plans-lead__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
    background: var(--color-accent);
    color: #fff;
}

.plans-lead__title {
    font-size: var(--font-size-section-title);
    color: #fff;
    margin: 0;
}

.plans-lead__en {
    display: block;
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    opacity: 0.8;
}

.plans-lead__body {
    margin: 24px 0 0;
    font-size: 0.95rem;
}

/* **面の上のボタンだけは、テーマのボタンの形を借りない。** .button は
   テーマ側で地色も枠も変えられている（こころは下線だけ・墨の文字）ので、
   キーカラーの面に載せると読めなくなる。白い下線に固定して、面の色が
   何であっても成立させる。 */
.plans-lead__link {
    align-self: flex-start;
    margin-top: 28px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-decoration: none;
}

.plans-lead__link:hover {
    border-bottom-color: #fff;
    color: #fff;
}

/* 写真。**高さは左の面が決める**（stretch）ので、写真の縦横比に
   引きずられない。写真が未登録のあいだは色面のまま場所を確保する
   （プランのカードと同じ約束）。 */
.plans-lead__media {
    min-height: 420px;
    background-color: var(--color-placeholder-from);
    background-image: linear-gradient(
        160deg,
        var(--color-placeholder-from),
        var(--color-placeholder-to)
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------
   新着情報
   --------------------------------------------------------------- */
.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
}

.news-list__item {
    border-bottom: 1px solid var(--color-line);
}

.news-list__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 24px;
    padding: 20px 8px;
    text-decoration: none;
    color: var(--color-ink);
    transition: background-color 200ms ease;
}

.news-list__link:hover {
    background: var(--color-paper-alt);
    color: var(--color-ink);
}

/*
   一覧のサムネイル。写真のあるお知らせだけに出る。

   margin-left:auto で右端へ寄せ、日付と見出しの位置を写真の有無で
   動かさない。align-self が無いと、親の align-items:baseline に従って
   画像の下辺が文字のベースラインに載り、行から飛び出す。
   flex-shrink:0 が無いと、長いタイトルに押されて潰れる。
*/
.news-list__image {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}

.news-list__date {
    font-size: 0.875rem;
    color: var(--color-ink-faint);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.news-list__title {
    flex: 1;
    min-width: 240px;
}

/* ---------------------------------------------------------------
   お客様の声
   --------------------------------------------------------------- */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.voice {
    padding: 28px;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

/*
   お客様の声の写真。任意なので、無い声とある声が同じ列に並ぶ。
   高さを固定して、写真の有無で隣のカードとずれないようにする。
*/
.voice__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* aspect-ratio 非対応の古いブラウザでも高さが潰れないようにする。 */
    min-height: 140px;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.voice__body {
    font-size: 0.9375rem;
    line-height: 2;
    margin-bottom: 16px;
}

.voice__author {
    font-size: 0.8125rem;
    color: var(--color-ink-faint);
    letter-spacing: 0.04em;
}

/*
   お知らせ詳細の写真。本文の前に1枚。
   max-width: 100% が無いと、幅の広い写真が 375px で横スクロールを起こす。
*/
.news-detail__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 32px;
}

/* ---------------------------------------------------------------
   Q&A
   --------------------------------------------------------------- */
.faq {
    border-top: 1px solid var(--color-line);
}

.faq__item {
    border-bottom: 1px solid var(--color-line);
    padding: 24px 8px;
}

.faq__question {
    display: flex;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    margin-bottom: 12px;
}

.faq__answer {
    display: flex;
    gap: 14px;
    font-size: 0.9375rem;
    color: var(--color-ink-soft);
    margin: 0;
}

/* Q と A の目印。色だけに頼らず、文字そのもので区別する。 */
.faq__mark {
    flex-shrink: 0;
    width: 1.5em;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--color-accent);
    line-height: 1.5;
}

.faq__category {
    font-size: 1.0625rem;
    margin: 40px 0 16px;
    padding-left: 12px;
    border-left: 3px solid var(--color-accent);
}

.faq__category:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------------------
   固定ページ・記事本文
   --------------------------------------------------------------- */
.prose {
    line-height: 2;
}

.prose h3 {
    font-size: 1.25rem;
    margin: 40px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line);
}

.prose h3:first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    padding-left: 1.5em;
    margin: 0 0 1.2em;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
}

.prose th,
.prose td {
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    text-align: left;
    vertical-align: top;
}

.prose th {
    width: 30%;
    background: var(--color-paper-alt);
    font-weight: 600;
    white-space: nowrap;
}

/* 横に長い表は、本文ではなく表の中だけを横スクロールさせる。 */
.table-scroll {
    overflow-x: auto;
}

/* ---------------------------------------------------------------
   フォーム
   --------------------------------------------------------------- */
.form__row {
    margin-bottom: 28px;
}

.form__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.form__required {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: normal;
    color: #fff;
    background: var(--color-tel);
    border-radius: var(--radius);
    vertical-align: 2px;
}

.form__optional {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: normal;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    vertical-align: 2px;
}

.form__input,
.form__textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: var(--font-sans);
    /* モバイルで入力欄に触れたとき、画面が拡大しないよう 16px を保つ。 */
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.form__textarea {
    min-height: 200px;
    resize: vertical;
}

.form__input:focus,
.form__textarea:focus {
    border-color: var(--color-accent);
}

/* 入力欄に問題があることを、赤色だけでなく文言と枠線でも示す。 */
.form__input--error,
.form__textarea--error {
    border-color: #a3241c;
    border-width: 2px;
}

.form__error {
    display: block;
    margin-top: 8px;
    font-size: 0.875rem;
    color: #a3241c;
}

.form__note {
    font-size: 0.875rem;
    color: var(--color-ink-soft);
}

.alert {
    padding: 16px 20px;
    margin-bottom: 32px;
    border-radius: var(--radius);
    border: 1px solid;
}

.alert--error {
    color: #7d1c15;
    background: #fdf3f2;
    border-color: #e5b4b0;
}

.alert--success {
    color: #1f5b3a;
    background: #f1f7f3;
    border-color: #b5d3c1;
}

.alert__title {
    font-weight: 600;
    margin: 0 0 8px;
}

.alert ul {
    margin: 0;
    padding-left: 1.4em;
}

/* ---------------------------------------------------------------
   問い合わせ誘導
   --------------------------------------------------------------- */
.contact-cta {
    padding: 64px 0;
    background: var(--color-accent);
    color: #fff;
    text-align: center;
}

.contact-cta__title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 12px;
}

.contact-cta__title::after {
    background: rgba(255, 255, 255, 0.5);
}

.contact-cta__lead {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 32px;
}

.contact-cta__tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.contact-cta__tel:hover {
    color: #fff;
    text-decoration: underline;
}

.contact-cta__note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 8px 0 32px;
}

/* ---------------------------------------------------------------
   フッター
   --------------------------------------------------------------- */
.footer {
    padding: 56px 0 40px;
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.85);
}

.footer a:hover {
    color: #fff;
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 32px;
}

.footer__brand {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: #fff;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__nav a {
    display: inline-block;
    padding: 6px 0;
    text-decoration: none;
}

.footer__copyright {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

/* ---------------------------------------------------------------
   フッターの型（theme.php の 'footer'）

   **カードと違い、フッターは型ごとにテンプレートを分けている**（parts/footer-*.php）。
   列を作るか・見出しを持つか・メニューを帯に出すかで**要素の入れ子そのものが
   違う**ため。ここには、その部品が使う見た目だけを置く。

   **既定（footer-split）には修飾クラスが付かない**ので、上の規則がそのまま
   従来の形になる。宣言しないテーマの見た目は 1px も変わらない。
   --------------------------------------------------------------- */

/* 型をまたいで使う小さな部品。 */
.footer__address {
    margin: 0 0 10px;
    line-height: 1.9;
}

.footer__tel {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.footer__tel a {
    color: #fff;
    text-decoration: none;
}

.footer__tel-note {
    display: block;
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* columns … 会社情報／サイトのご案内／お問い合わせ を 3 列に分ける。 */
.footer__cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
}

.footer__col-title {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    color: #fff;
}

/* 列の中では、メニューは横に流さず縦に積む。 */
.footer__nav--stack {
    display: block;
}

.footer__nav--stack li + li {
    margin-top: 2px;
}

.footer__copyright--left {
    text-align: left;
}

/* center … 列を作らず中央に積む。 */
.footer--center .container {
    text-align: center;
}

.footer__brand--lg {
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.footer__nav--center {
    justify-content: center;
    margin-top: 24px;
}

/* band … 一番上にメニューだけの帯を通し、その下に実務情報を 3 つ並べる。 */
.footer--band {
    /* 帯をフッターの上端に貼り付けるので、上の余白は帯の中で持たせる。 */
    padding-top: 0;
}

.footer__band {
    margin-bottom: 36px;
    background: rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__nav--band {
    gap: 0 26px;
}

.footer__nav--band a {
    padding: 15px 0;
}

.footer__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 20px;
}

.footer__meta-label {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}

.footer__meta-value {
    margin: 0;
    line-height: 1.8;
}

.footer__copyright--right {
    text-align: right;
}

/* ---------------------------------------------------------------
   モバイル固定の電話ボタン
   緊急時にどの位置までスクロールしていても、1タップで電話できる。
   --------------------------------------------------------------- */
.telbar {
    display: none;
}

/* ---------------------------------------------------------------
   価格を前に出すメインビジュアル（blocks/hero-price）
   --------------------------------------------------------------- */
/*
   金額は公開中のプランの最安値から出る（テンプレートに数字は書かない）。
   桁数が変わっても崩れないよう、幅ではなく行の高さで組む。
*/
.hero__price {
    margin: 0 0 16px;
    line-height: 1.1;
}

.hero__price-amount {
    font-family: var(--font-sans);
    /* 数字は本文の書体だと細く見えるので、字面を大きく取る。 */
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/*
   金額に続く「からの家族葬」。**語の途中で折り返させない。**
   狭い画面では金額だけで 1 行が埋まり、放っておくと「からの家族／葬」と
   割れる（375px で実際にそうなった）。まとめて次の行へ送る。
*/
.hero__price-from {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    margin-left: 4px;
    white-space: nowrap;
}

/* 価格型は見出しが金額の従になるので、hero__copy を一段落とす。 */
.hero--price .hero__copy {
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    margin-bottom: 28px;
}

/*
   補助の一行。**色を決め打ちしない。**
   親から受け継いだ色（写真の上なら白、写真なしなら墨）を薄めて使う。
   ここで var(--color-ink-soft) を指定すると、その宣言が継承に勝ってしまい、
   写真の上で薄墨のまま沈む（実際にそうなった）。
*/
.hero__note {
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.8;
}

/* ---------------------------------------------------------------
   電話番号を前に出すメインビジュアル（blocks/hero-emergency）
   --------------------------------------------------------------- */
/*
   この型だけ左寄せにする。番号・補足・ボタンが縦に積まれるので、
   中央寄せだと各行の頭が揃わず、目が左右に振られて読む速度が落ちる。
   .hero の text-align: center を、この型に限って打ち消している。
*/
.hero--emergency {
    text-align: left;
}

.hero--emergency .hero__actions {
    justify-content: flex-start;
    margin-top: 28px;
}

/* この型は番号が主役なので、キャッチコピーを一段落とす
   （価格型が hero__copy を金額の従にしているのと同じ考え方）。 */
.hero--emergency .hero__copy {
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    line-height: 1.8;
    margin-bottom: 20px;
}

/*
   「24時間365日 受付」の小さな札。塗りつぶした面なので、写真の上でも
   そのまま成立する（.button--tel と同じ扱い）。白文字を載せる面の
   コントラストは各テーマが --color-accent で担保している
   （問い合わせ誘導の帯が同じ組み合わせを使っている）。
*/
.hero__badge {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 14px;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* 番号の上の一行。色は決め打ちせず、親から受け継いだ色を薄めて使う
   （.hero__note と同じ理由 —— 写真の上で薄墨のまま沈むのを避ける）。 */
.hero__lead {
    margin: 0 0 8px;
    font-size: 1rem;
    color: inherit;
    opacity: 0.85;
    letter-spacing: 0.06em;
}

/*
   電話番号そのもの。**この節の主役なので、見出しより大きく取る。**
   リンク全体を押せる面にしてある（番号だけを狙わせない）。
*/
.hero__tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    line-height: 1.1;
}

.hero__tel:hover .hero__tel-number {
    text-decoration: underline;
}

.hero__tel-icon {
    width: clamp(28px, 5vw, 40px);
    height: clamp(28px, 5vw, 40px);
    flex-shrink: 0;
    fill: currentColor;
}

/*
   数字は本文の書体だと細く見えるので、字面を大きく取る。
   **折り返させない** —— 375px で「0120-000-」「000」と割れると、
   番号としてひと目で読めなくなる。
*/
.hero__tel-number {
    font-family: var(--font-sans);
    font-size: clamp(1.9rem, 6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/*
   写真が無いときだけ、番号をキーカラーにする。
   **写真があるときは触らない** —— .hero--photo > .container の白を
   そのまま継承させたいので、ここで色を持たせると継承に勝って沈む。
   条件を :not(.hero--photo) 側に置くことで、写真の上の規則を
   1 つも増やさずに済んでいる。
*/
.hero:not(.hero--photo) .hero__tel {
    color: var(--color-accent);
}

/* ---------------------------------------------------------------
   訴求点 3つ（blocks/points-3）
   --------------------------------------------------------------- */
.points-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.points-3__item {
    text-align: center;
    padding: 0 8px;
}

/*
   番号は装飾なので aria-hidden にしてある。見た目でだけ順序を示す。
   地色に沈ませ、見出しより前に出ないようにする。
*/
.points-3__num {
    display: block;
    font-family: var(--font-sans);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.35;
    margin-bottom: 12px;
}

.points-3__title {
    font-size: 1.15rem;
    margin: 0 0 10px;
}

.points-3__body {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-ink-soft);
    text-align: left;
}

/* ---------------------------------------------------------------
   選ばれる理由（帯に語を横一列）（blocks/points-band.php）

   参考は斎場の裕心（yushin-sakai.jp）の REASON。**理由を 1 つずつ説明せず、
   語だけを帯の中へ横一列に置く。** 3 つに分けて説明文を配る .points-3 とは、
   同じ「理由」でも読ませ方が逆になる。

   **帯の色は、その節が帯（.section--alt）かどうかで反転させる。** 節の地色と
   同じ色で塗ると帯が消えてしまうが、節が何番目に来るかは theme.php が決める
   ので、置かれた場所によらず成立するようにしてある。
   --------------------------------------------------------------- */
.points-band {
    padding: 56px 40px;
    background: var(--color-paper-alt);
    text-align: center;
}

.section--alt .points-band {
    background: var(--color-paper);
}

/* 見出しは節の共通の形（.section__head）を帯の中に置いたもの。見出しの型が
   rail のテーマでは「／ REASON」もこの帯の中に出る。 */
.points-band .section__head {
    margin-bottom: 28px;
}

.points-band__words {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 2.2;
}

/* **語の途中では折らない。** 1 行に収まらないときは語と語のあいだで
   折り返す（狭い画面では 2〜3 行になる）。 */
.points-band__word {
    display: inline-block;
    white-space: nowrap;
    /* 語と語のあいだ。鉤括弧のぶん字面が寄って見えるので、空白 1 つでは
       足りない（折り返した行でも同じだけ空く）。 */
    margin: 0 8px;
}

/* 鉤括弧は飾りなので CSS で足す。**管理画面で編集する文言に括弧を
   含めない** —— 顧客が片方だけ消したり、二重に書いたりしなくて済む。 */
.points-band__word::before {
    content: "「";
}

.points-band__word::after {
    content: "」";
}

/* ---------------------------------------------------------------
   会員制度（blocks/membership.php）

   参考はのむら葬祭（nomura-sosai.jp）の「やすらぎ会」。**左が会員証を
   模した枠、右が特典の並び。** 会員制度は「制度の名前」と「入るとどう
   なるか」の 2 つで出来ているので、片方を面に、もう片方を読み物にして分ける。

   **枠の色はキーカラー（--color-accent）で受け取る。** 部品は共通なので、
   使うテーマが増えてもここは触らない。別の色にしたいテーマは theme.css で
   border-color だけを上書きする（そなえが金でそうしている）。
   --------------------------------------------------------------- */
.membership {
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: 48px;
    align-items: start;
}

/* 会員証を模した枠。**面で塗らず線で作る。** この節はテーマの主役でも、
   色面はヒーローがすでに持っているので、ここまで塗ると画面が重くなる。 */
.membership__card {
    padding: 32px 28px 28px;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    /* **節が帯（.section--alt）でも地色を変えない。** 帯の上では白く浮き、
       白地の上では枠だけが見える。節が何番目に来るかは theme.php が決めるので、
       置かれた場所によらず成立させる（points-band と同じ考え方・別の解き方）。 */
    background: var(--color-paper);
}

.membership__card-label {
    margin: 0 0 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    color: var(--color-ink-faint);
}

.membership__card-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--color-ink);
}

/* 券面の条件。**既定は空**なので、書かれていなければ節ごと出ない
   （blocks/membership.php が判断する）。 */
.membership__facts {
    margin: 24px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.membership__fact {
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
}

.membership__fact + .membership__fact {
    margin-top: 8px;
}

.membership__card-note {
    margin: 20px 0 0;
    font-size: 0.8125rem;
    color: var(--color-ink-soft);
}

/* 右の特典。**番号を振らない。** .points-3 が番号を振って 3 列に並べる
   ので、同じ見せ方にすると節が違っても同じものに見える。罫で区切る。 */
.membership__perks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.membership__perk {
    padding: 20px 0;
    border-top: 1px solid var(--color-line);
}

/* 最後の 1 つだけ下にも罫を引いて、並びを閉じる。 */
.membership__perk:last-child {
    border-bottom: 1px solid var(--color-line);
}

.membership__perk-title {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
}

.membership__perk-body {
    margin: 0;
    color: var(--color-ink-soft);
}

/* ---------------------------------------------------------------
   比較表（blocks/compare-table）
   --------------------------------------------------------------- */
/*
   狭い画面では横スクロールさせる。列を落として畳むと、比較のために
   置いた表から比較対象が消えてしまう。
*/
.table-scroll {
    overflow-x: auto;
    /* キーボードで横スクロールできるようにフォーカスを受け取れる形に。 */
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
    border: 1px solid var(--color-line);
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}

.compare-table thead th {
    background: var(--color-paper-alt);
    text-align: center;
    white-space: nowrap;
}

/* 左上の空セル。罫線を消して「見出しではない」ことを示す。 */
.compare-table__corner {
    border-top-color: transparent;
    border-left-color: transparent;
    background: none;
}

.compare-table tbody th {
    background: var(--color-paper-alt);
    white-space: nowrap;
    font-weight: 600;
}

/*
   自社の列を強調する。色だけで差をつけると、色覚特性によっては
   どちらの列か分からなくなるので、見出しの文字も太くしてある。
*/
.compare-table__ours {
    background: rgba(60, 74, 90, 0.06);
}

.compare-table thead .compare-table__ours {
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   式場のご案内（blocks/hall-access）
   --------------------------------------------------------------- */
.hall-access {
    border: 1px solid var(--color-line);
    background: var(--color-paper);
    padding: 32px;
}

.hall-access__list {
    margin: 0;
    display: grid;
    /* 項目名の幅を固定し、値の頭を揃える。 */
    grid-template-columns: 6em 1fr;
    gap: 14px 20px;
}

.hall-access__list dt {
    font-weight: 600;
    color: var(--color-ink-soft);
    font-size: 0.95rem;
}

.hall-access__list dd {
    margin: 0;
}

.hall-access__map {
    margin-left: 12px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.hall-access__tel {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-tel);
}

.hall-access__note {
    margin-left: 12px;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}

.hall-access__actions {
    margin: 28px 0 0;
    text-align: center;
}

/* ---------------------------------------------------------------
   デザインの選定画面（/themes）
   営業のための画面。config の showcase が true の設置でだけ出る。
   --------------------------------------------------------------- */
/*
   一覧（/themes）だけのヘッダーとフッター（layout/showcase）。
   **葬儀社の看板を出さない画面。** 社名も葬儀プランのナビも電話番号も
   持たないので、.header / .footer とは別に持つ。
   ここは theme.css を読まない画面なので、既定のトークンだけで組む。
*/
.showcase-head {
    border-bottom: 1px solid var(--color-line);
    background: var(--color-paper);
    padding: 18px 0;
}

.showcase-head__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-ink);
}

.showcase-foot {
    border-top: 1px solid var(--color-line);
    padding: 28px 0 40px;
    color: var(--color-ink-soft);
    font-size: 0.85rem;
}

.showcase-foot p {
    margin: 0;
}

.preview-bar {
    background: var(--color-ink);
    color: #fff;
    padding: 10px 0;
    font-size: 0.9rem;
    /* ヘッダーが固定なので、その上に出す。 */
    position: relative;
    z-index: calc(var(--z-header) + 1);
}

.preview-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
}

.preview-bar a {
    color: #fff;
    margin-left: auto;
}

/*
   見本の帯の下からを「上端」にする枠（layout/public.php が見本のときだけ出す）。
   **透過ヘッダーの型は position:absolute の top:0 に置かれる。** 枠が無いと
   画面のいちばん上＝帯と同じ位置に重なり、社名が帯の裏に隠れる。
   position:relative を 1 つ置くだけで、その基準が帯の下へ移る。
*/
.preview-frame {
    position: relative;
}

/*
   **見本の中のリンクは押せなくする。**

   見本はトップページだけを描いていて、中のリンク（ナビ・プラン・お問い合わせ・
   フッターのメニュー）は**その設置の実ページへ出る。** 営業の場で押されると、
   選んでもらっている最中に 1 社目の本番サイトが開く（2026-08-24 に実際に踏まれた）。

   **body に掛けること。** 最初は見本の枠（.preview-frame）に掛けたが、
   **枠は </main> で閉じるので、フッターとスマホの電話バーが外に残っていた**
   —— 本文のボタンは死んでいるのにフッターのメニューだけ生きている、という
   half-fixed の状態になり、指摘を受けた。**印は body に付けるのがいちばん外側。**

   is-preview が付くのは見本のときだけなので、顧客の公開サイトには一切効かない。
   サムネイルの撮影（?bare=1）でも preview は立たないので、写り方も変わらない。

   キーボードでの移動までは止まらない（pointer-events はマウスの話）。
   そこまで塞ぐには HTML 側で a を別の要素に変えることになるが、**節を
   1 枚ずつ見本用に分けることになる**ので、ここでは踏み込まない。
*/
.is-preview a {
    pointer-events: none;
    cursor: default;
}

/* **送信はできない。** 見本のお問い合わせページはフォームの形を見てもらう
   ためだけに出している。押せると、見本から設置の担当者へ本物の問い合わせが
   飛ぶ（メールは設置の config の宛先へ届く）。 */
.is-preview button[type="submit"],
.is-preview input[type="submit"] {
    pointer-events: none;
    cursor: default;
    opacity: 0.55;
}

/* **見本の中で完結する道だけは押せる。** 帯の「一覧へ戻る」と、
   /themes/<スラッグ>/… へ写された見本のページへのリンクがこれにあたる
   （View::url() が写す）。tel: や、写されなかった道（プランの詳細など）は
   押せないまま＝設置の実サイトへは飛ばない。 */
.is-preview a[href*="/themes/"] {
    pointer-events: auto;
    cursor: pointer;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
   **枠は「カード」ではなく「見本の画像」に付ける**（2026-08-31）。

   それまではカード全体（画像 + 名前 + 説明文 + 節の数）を 1 つの箱で
   囲っていた。説明文と節の数をやめて画像と名前だけにすると、箱の下端と
   名前のあいだの余白が「何のための空きか分からない帯」になる。
   見本帳 mihoncho.com と同じく、**囲うのは画像だけ・名前はその下に
   地のまま置く**。
*/
.theme-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/*
   見本は縦長（トップページの上のほう）を切り出した画像。比率を固定して
   おかないと、撮れているテーマと撮れていないテーマでカードの高さが
   ばらばらになり、並びが壊れて見える。
*/
.theme-card__shot {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top center;
    background: var(--color-paper-alt);
    /* 外枠。**明るい見本（あゆみなど）の縁が地に溶けるのを止めるためのもの。**
       線は 1px の細さのままで、色だけ罫線（--color-line #ddd7ce）より一段
       濃くする。--color-ink-faint まで濃くすると枠が絵より強く出て、
       7 枚並んだときに枠の格子だけが目に入る。 */
    border: 1px solid #c9c2b8;
}

.theme-card__link:hover .theme-card__shot {
    border-color: var(--color-accent);
}

.theme-card__shot--empty {
    /* 見本がまだ無いカード。斜線で「準備中」を示す。 */
    background:
        repeating-linear-gradient(
            45deg,
            var(--color-paper-alt),
            var(--color-paper-alt) 10px,
            var(--color-paper) 10px,
            var(--color-paper) 20px
        );
}

/* 画像の下の名前。**1 枚のカードに残る唯一の文字。** */
.theme-card__name {
    display: block;
    padding-top: 12px;
    font-weight: 700;
    color: var(--color-ink);
}

/* ---------------------------------------------------------------
   レスポンシブ
   --------------------------------------------------------------- */
/*
   ヘッダーをモバイル型に切り替える境界。
   ナビ7項目・ブランド・電話ボタンが1行に収まらなくなるのは 1024px 未満。
   ここを 767px にすると、768〜1023px でナビがヘッダーを押し広げ、
   ページ全体に横スクロールが生まれる。
*/
@media (max-width: 1023px) {
    .plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* **上の .plan-grid はこの修飾クラスより後ろに書かれている**（詳細度は
       同じ 1 つ）。ここで言い直さないと、横並びの行が 2 列に割れる。 */
    .plan-grid--row {
        grid-template-columns: 1fr;
    }

    /* 3 列だと 2 段目の 1 枚が 240px を切り、写真も文字も潰れる。 */
    .plan-grid--feature {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 面と写真を横に並べたままだと、どちらも狭くなりすぎる。縦に積んで
       写真を下へ回す（面が先なので、読む順は変わらない）。 */
    .plans-lead {
        grid-template-columns: 1fr;
    }

    .plans-lead__media {
        min-height: 320px;
    }

    /* 選定画面のカードは 3 列だと 1 枚 300px を切り、見本が潰れる。 */
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voice-grid {
        grid-template-columns: 1fr;
    }

    .header__inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
    }

    /* 画面上部の電話ボタンは、下部の固定バーに役割を譲る。 */
    .header__tel {
        display: none;
    }

    .nav {
        order: 3;
        width: 100%;
        /* width:100% だけでは、中身の合計幅がこれを上書きする。
           min-width:0 と併せて初めて、はみ出しがこの中に閉じる。 */
        min-width: 0;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav__link {
        padding: 8px 12px;
    }

    /* --- ヘッダーの型ごとの調整 ---------------------------------- */

    /* 中央ロゴ型: 電話ボタンが消えるので、釣り合いおもりも消す。
       消さないと 200px の空きだけが残り、ロゴが右へずれる。 */
    .header__spacer {
        display: none;
    }

    .header__brand--stack {
        font-size: 1.375rem;
        letter-spacing: 0.1em;
    }

    .header__logo--stack {
        height: 44px;
    }

    /* ナビの帯も横スクロールに切り替える。中央寄せのままだと、
       項目が入りきらないときに左端が画面外へ出て触れなくなる。 */
    .nav--band {
        justify-content: flex-start;
        padding: 0 16px;
    }

    .nav--band .nav__link {
        padding: 10px 12px;
    }

    /* 用件バー: 住所は狭い画面では落とす。受付時間と資料請求を残す。 */
    .header__utility-note--wide {
        display: none;
    }

    /* 透過型: 上段の電話ボタンが消えてロゴだけになるので、その分を戻す。
       ナビの下段は横スクロールに切り替える（他の型と同じ扱い）。 */
    .nav--under {
        padding: 0 16px;
    }

    .nav--under .nav__link {
        padding: 10px 14px 10px 0;
    }

    .header--overlay + main .hero > .container {
        padding-top: 104px;
    }

    /* 左右振り分け型: 3 列の grid をやめ、ロゴを 1 行目に出して、
       割ってあった 2 本のメニューを続けて並べる。**狭い画面では
       「1 本のメニューが折り返している」ように見えるほうが素直**で、
       左右に振り分けた形をそのまま縮めても意味が伝わらない。 */
    .header__inner--split {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 0;
        padding: 12px 16px;
    }

    .header__brand--split {
        order: -1;
        width: 100%;
        font-size: 1.25rem;
    }

    /* 受付時間は下部の固定バーに役目を譲る（電話ボタンと同じ扱い）。 */
    .header__hours {
        display: none;
    }

    .header__side {
        width: auto;
        min-width: 0;
    }

    /* 上の .nav が width:100% と order:3 を掛けるので、割ったメニューには
       戻しておく。**戻さないと 2 本が縦に 2 段積みになり**、狭い画面ほど
       ヘッダーが高くなる。 */
    .nav--split {
        order: 0;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        /* **overflow-x だけを戻してはいけない。** 上の .nav--split が
           overflow: hidden を掛けているので、x だけ visible にすると
           y が hidden のままになり、ブラウザは x を auto と解釈する
           （＝折り返さずに横スクロールで隠れる）。両方まとめて戻す。 */
        overflow: visible;
    }

    /* 縦の柱型: **柱をやめて上の帯に戻す。** 260px を横に取ると、
       狭い画面では本文が読めない幅になる。固定も外す（画面の高さの
       半分を柱が占めることになるため）。 */
    .has-side-header {
        padding-left: 0;
    }

    .header--rail {
        position: static;
        width: auto;
        bottom: auto;
        overflow-y: visible;
    }

    .header__rail-inner {
        /* 上の帯に戻すので、中身は横に並べる。メニューは折り返す。 */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 20px;
        padding: 14px 16px;
    }

    .header__brand--rail {
        font-size: 1.25rem;
    }

    .nav--rail {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        order: 3;
    }

    .nav--rail .nav__link {
        padding: 8px 12px;
        /* 横並びに戻ったら、現在地の印も下線へ戻す（縦棒は縦積みの形）。 */
        border-left: none;
        padding-left: 12px;
        border-bottom: 2px solid transparent;
    }

    .nav--rail .nav__link:hover,
    .nav--rail .nav__link[aria-current="page"] {
        border-left-color: transparent;
        border-bottom-color: var(--rail-ink);
    }

    /* 垂れるメニュー型: **短冊をやめて、上の帯に戻す。** 縦組みの短冊は
       高さを 170px 使うので、狭い画面では本文の上端をふさいでしまう。
       固定も外す（ロゴの上に重なるため）。 */
    .header__drop-inner {
        padding: 24px 16px 8px;
        gap: 10px;
    }

    .header__brand--drop {
        font-size: 1.25rem;
        letter-spacing: 0.16em;
    }

    .header__logo--drop {
        height: 44px;
    }

    .nav--drop {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 4px 16px 12px;
        background: none;
    }

    /*
       **見本の中の上書きを、ここで必ず戻すこと。**
       上の .preview-frame .nav--drop（position: absolute）は、短冊が見本の帯に
       重ならないようにするための指定だが、**詳細度が 2 つあるので、この
       メディアクエリの .nav--drop（1 つ）では消せない**。メディアクエリは
       詳細度を足さない。戻さないと、狭い画面の見本だけで短冊が絶対配置の
       まま横並びに変わり、**メニューが 2 段に折れてロゴに重なる**
       （2026-08-28 にスマホで実際に出した）。
    */
    .preview-frame .nav--drop {
        position: static;
    }

    .nav--drop .nav__link {
        writing-mode: horizontal-tb;
        min-height: 0;
        padding: 8px 12px;
        letter-spacing: 0.08em;
        /* 横並びに戻ったら、現在地の印も下線へ戻す（縦棒は縦組みの形）。 */
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .nav--drop .nav__link:hover,
    .nav--drop .nav__link[aria-current="page"] {
        border-bottom-color: var(--color-accent);
    }

    /* 対角の 2 枚: 12 列をやめて縦に積む。**写真・キャッチ・写真・ボタンの
       順**にして、読む順を DOM と合わせる。 */
    .hero__scatter {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .hero__scatter-photo--1,
    .hero__scatter-photo--2 {
        grid-column: 1;
        /* 縦に積んだら、はみ出す向きは左右どちらも同じにする。 */
        margin-left: -20px;
        margin-right: -20px;
    }

    .hero__scatter-photo--1 {
        grid-row: 1;
        height: 240px;
    }

    .hero__scatter-text {
        grid-column: 1;
        grid-row: 2;
    }

    .hero__scatter-photo--2 {
        grid-row: 3;
        height: 200px;
    }

    .hero__actions--scatter {
        grid-column: 1;
        grid-row: 4;
        flex-direction: row;
    }

    /* 縦組みの見出し: 左脇に立てるのをやめ、中身の上へ戻す。**縦のまま
       狭い画面へ持ち込むと、見出し 1 本で画面の高さを使い切る。** */
    .head-side .section > .container {
        padding-left: 20px;
    }

    .head-side .section .section__title {
        position: static;
        writing-mode: horizontal-tb;
        /* **縦組みのときの高さを必ず戻すこと。** 横組みに戻すと height は
           そのまま「縦の高さ」になるので、min-height: 14em が見出しの下に
           308px の空白として残る（2026-08-28 にスマホで実際に出した）。 */
        height: auto;
        min-height: 0;
        letter-spacing: var(--letter-spacing-heading);
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .head-side .section .section__head {
        margin-bottom: var(--section-head-gap);
    }

    .head-side .section .section__lead {
        margin-bottom: 0;
    }

    /* 白紙と声の型: 丸は 2 列に折り返す。**上下のずらしはやめる**
       —— 折り返した先で高さがそろわず、階段に見える。 */
    .hero--quiet {
        padding: 64px 0 56px;
    }

    .circles {
        gap: 20px;
    }

    .hero--quiet .circles {
        margin-top: 48px;
    }

    .circles__item {
        width: 168px;
        height: 168px;
        padding: 20px;
        font-size: 0.8125rem;
        line-height: 1.8;
    }

    .circles__item--2,
    .circles__item--3 {
        margin-top: 0;
    }

    /* 縦組み型: 狭い画面では縦組みをやめて横組みに戻す。**縦のまま縮めると
       1 行が画面の高さを超え、読むのにスクロールが要る。** */
    .hero--vertical > .container {
        align-items: flex-start;
        gap: 28px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .hero__vertical-text {
        flex-direction: column;
        gap: 16px;
    }

    .hero__copy--vertical,
    .hero__sub--vertical {
        writing-mode: horizontal-tb;
        max-height: none;
    }

    .hero__copy--vertical {
        letter-spacing: 0.06em;
        line-height: 1.8;
    }

    /* 横組みに戻したので、暗くする向きも上下に変える。 */
    .hero--vertical-photo .hero__vertical-media::after {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.52) 100%);
    }

    .hero--vertical .hero__actions {
        justify-content: flex-start;
    }

    /* 画面下部に固定する電話ボタン。高さは 44px を大きく超える。 */
    .telbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-telbar);
        padding: 10px 12px;
        /* ヘッダーと同じ変数を使う。元は不透明度だけが 0.97 で、
           ヘッダーの 0.96 と食い違っていたが、意図のある差ではなかった。 */
        background: var(--color-bar-bg);
        border-top: 1px solid var(--color-line);
    }

    .telbar__link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 56px;
        border-radius: var(--radius);
        background: var(--color-tel);
        color: #fff;
        text-decoration: none;
        font-size: 1.125rem;
        letter-spacing: 0.04em;
    }

    .telbar__number {
        font-family: var(--font-serif);
        font-size: 1.375rem;
    }

    /* 固定バーに隠れる分だけ、ページ末尾に余白を足す。 */
    .footer {
        padding-bottom: 108px;
    }
}

@media (max-width: 767px) {
    .hero__brand {
        top: 20px;
        left: 20px;
        font-size: 1rem;
    }

    .plans-lead__panel {
        padding: 36px 24px;
    }

    .plans-lead__media {
        min-height: 240px;
    }

    /* 帯の左右の余白は、狭い画面では語の入る幅を削るだけになる。 */
    .points-band {
        padding: 40px 20px;
    }

    .points-band__words {
        font-size: 1rem;
    }

    /*
       段違いの 3 枚は、狭い画面では縦に積む（段差も外す）。

       **隙間は 48px では足りない。** 3 枚を横に並べているあいだは隣どうしの
       話だったが、縦に積むと**隙間の上下から 2 つの飾りが食い込む** ――
       キャプションの白帯は写真の下端から 14px はみ出し（`bottom: -14px`）、
       次の 1 枚の短冊は写真の上端より 32px 高いところから始まる
       （`top: -32px`）。48px から両方を引くと**残りは 2px** で、
       白帯と次の短冊がくっついて見えた（2026-08-30 にスマホの実機で指摘）。
       **はみ出す 46px + 目に見える余白 50px** で 96px にする。
       PC は 3 列のままなので、この隙間は横方向にしか効かない。
    */
    .photo-tabs {
        grid-template-columns: 1fr;
        gap: 96px;
    }

    .photo-tabs__item--2,
    .photo-tabs__item--3 {
        margin-top: 0;
    }

    /*
       **写真の高さは短冊の長さを決めている。** 短冊は絶対配置だが、縦組み
       （`writing-mode: vertical-rl`）では**行の進む向きが縦なので、収まる字数を
       決めるのは写真の高さのほう**になる。300px では既定の「式場と対応エリア」
       （8 字 + 英字）がぎりぎり 7px 足りず、**「ア」だけが 2 列目に折れていた**
       （2026-08-30 にスマホの実機で指摘）。360px にして、字数に余裕を持たせる。
    */
    .photo-tabs__media {
        min-height: 360px;
    }

    /* 短冊も少しだけ詰める。**見出しは顧客が書き換えるので、既定の 8 字が
       収まるだけでは足りない**（余裕は 3 字ぶんほど見ておく）。 */
    .photo-tabs__label {
        padding: 20px 12px 24px;
    }

    .photo-tabs__title {
        letter-spacing: 0.12em;
    }

    /*
       面のメニューは、**狭い画面ではマス目をやめて細い帯に戻す。**
       等分のマスを 2 列に折り返すと、1 マスが英字と和文の 2 行ぶん（約 85px）
       あるので、道が 7 本なら 4 段 = **画面の 4 割近くをメニューが占めた**
       （2026-08-30 にスマホの実機で指摘を受けた）。項目が奇数だと最後の
       1 マスが空いて面の右下が白く欠ける問題も、マス目をやめれば消える。

       **えんじの面は残す。** 塗りまで捨てると、上端の形が「字だけを
       折り返す」つどい（`header-drop`）とほとんど同じになり、
       スマホでテーマの見分けが付かなくなる。
       PC は今までどおり 7 等分のマス目（この上書きは 767px 以下だけ）。
    */
    .nav--panel {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 6px 10px 10px;
        /* マス目の仕切り（白 28%）は、マスが無くなれば帯の地になってしまう。 */
        background: var(--color-accent);
    }

    /* 英字は飾りなので、狭い画面では落とす。1 項目が 1 行に収まり、
       帯の高さがそのまま半分になる。 */
    .nav--panel .nav__cell-en {
        display: none;
    }

    .nav--panel .nav__cell {
        padding: 9px 13px;
        /* 帯の地と同じ色を敷き直さない（マスの境目が見えてしまう）。 */
        background: none;
        /* 現在地の印は、塗り分けから字の下の細い線へ移す。 */
        border-bottom: 2px solid transparent;
    }

    .nav--panel .nav__cell:hover,
    .nav--panel .nav__cell[aria-current="page"] {
        background: none;
        border-bottom-color: rgba(255, 255, 255, 0.85);
    }

    /* 縦書きラベルは狭い画面では場所を食うので、左の余白ごと詰める。
       消さないのは、節の切り替わりの目印として効いているため。 */
    .head-rail .section {
        padding-left: 40px;
    }

    .head-rail .section::before {
        left: 10px;
        font-size: 10px;
        letter-spacing: 0.2em;
    }

    .section {
        padding: var(--space-section-sp) 0;
    }

    /* 左右に分けられる幅ではないので縦に積む。**写真を上へ回す** ——
       全面に敷く型と同じく、最初に目に入るのが写真であるほうが自然。 */
    .hero__split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero__split-media {
        order: -1;
        min-height: 220px;
    }

    /* 列は狭い画面では成り立たない。どの型も 1 列に積む。 */
    .footer__cols,
    .footer__meta {
        grid-template-columns: 1fr;
    }

    /* 1 列になると左右の寄せは意味を持たない（幅いっぱいの 1 本になる）。
       コピーライトだけ寄せが残ると、上の情報とそろわず浮いて見える。 */
    .footer__copyright--left,
    .footer__copyright--right {
        text-align: center;
    }

    /* 狭い画面ではロゴを小さくする。220px のままだと、ナビゲーションを
       押し出してヘッダーに横スクロールが生まれる。 */
    .header__logo {
        height: 32px;
        max-width: 160px;
    }

    .hero {
        min-height: 380px;
        padding: 56px 0;
    }

    /*
       **対角の 2 枚は、すぐ上の .hero を打ち消し直す。** 高さは中の 2 枚が
       決める型なので、外枠に min-height と大きな余白が付くと写真の下に
       空きが残る。**画面幅の指定の外に書いた .hero--scatter は、この
       .hero より前にある**ので、ここで言い直さないと負ける
       （hero-band と hero-vertical で同じことを踏んでいる）。
    */
    .hero--scatter {
        min-height: 0;
        padding: 32px 0 40px;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .button {
        width: 100%;
    }

    /* 上下 2 段型: **すぐ上の .hero が最低高さと余白を戻すので、もう一度
       打ち消す。** 詳細度が同じで後に書かれているぶん、こちらが負ける。
       2 つの段の合計で高さを作る型なので、外枠に余白が付くと帯が浮く。 */
    .hero--band {
        min-height: 0;
        padding: 0;
    }

    .hero__band-panel {
        padding: 48px 0 44px;
    }

    /* --hero-min-height は狭い画面でも値が変わらない（.hero の 380px は
       トークンではなく直接の指定）ので、帯の高さはここで別に決める。 */
    .hero__band-media {
        height: 200px;
    }

    .plan-grid {
        grid-template-columns: 1fr;
    }

    /* 会員証の枠と特典を横に並べられる幅ではないので縦に積む。
       券面が先で、特典がその下（読む順はそのまま）。 */
    .membership {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* 幅 375px に「写真 280px + 文字」は入らない。横並びの型は縦積みへ戻す。
       戻すのは並べ方だけで、上書きした値も元へ返さないと中途半端になる。 */
    .plan-grid--row .plan-card,
    .plan-grid--feature .plan-card:first-child {
        flex-direction: column;
    }

    .plan-grid--row .plan-card__image,
    .plan-grid--feature .plan-card:first-child .plan-card__image {
        width: 100%;
        flex: none;
    }

    /* grid で組んだ本体を、縦積みの flex（.plan-card__body の既定）へ戻す。
       flex-direction は上書きしていないので、既定の column がそのまま効く。 */
    .plan-grid--row .plan-card__body {
        display: flex;
        /* **display だけ戻しても足りない。** 横並びのときの align-items: center が
           残っていると、縦積みの flex では「子が内容の幅まで縮んで中央に寄る」に
           意味が変わり、名前と価格だけが真ん中に浮く。既定の stretch へ戻す。 */
        align-items: stretch;
    }

    .plan-grid--row .plan-card__summary {
        margin-bottom: 16px;
    }

    /* 縦積みでは名前と価格のあいだに罫が要る。 */
    .plan-grid--row .plan-card__price {
        border-top: 1px solid var(--color-line);
        padding-top: 14px;
        text-align: left;
        font-size: 1.375rem;
    }

    .prose th {
        width: auto;
        white-space: normal;
    }

    /* 狭い画面では「に電話する」を省き、番号だけを大きく見せる。 */
    .telbar__link {
        font-size: 1rem;
    }

    /*
       狭い画面では日付・見出し・写真がそれぞれ改行される。ここで
       margin-left:auto を残すと、写真だけが 3 行目の右端に飛んで
       文字列とのつながりが切れる。左に揃えて見出しの真下に置く。
    */
    .news-list__image {
        margin-left: 0;
    }

    /*
       訴求点は 3 列のままだと 1 列が 100px 前後になり、日本語が 1 文字ずつ
       折り返される。縦に積む。
    */
    .points-3 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .points-3__body {
        text-align: center;
    }

    .hall-access {
        padding: 24px 20px;
    }

    /*
       項目名を固定幅にしたままだと、住所が 6em の残りに押し込まれる。
       名前を上、値を下の 1 列に積む。
    */
    .hall-access__list {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .hall-access__list dd {
        margin-bottom: 12px;
    }

    /* 住所の右に置くと 1 文字ずつ折り返される。行を分ける。 */
    .hall-access__map,
    .hall-access__note {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    /*
       選定画面のカードは、狭い画面では 1 列。

       **1 列にすると、カードの切れ目が分からなくなる。** 見本の画像が画面幅
       いっぱいに縦へ並ぶので、28px の隙間では「1 枚の長いページ」に見え、
       どの名前がどの見本のものか読み取れない（2026-08-18 に社長が
       スマホで見たときに実際にそうなった）。隙間を広げ、画像の枠と影を
       はっきりさせて、1 枚ずつの塊に見せる。

       **名前が画像の下に 1 行だけになったぶん、隙間はいっそう効く**
       （2026-08-31）。上の名前と下の画像の距離が近いと、名前がどちらの
       ものか迷う。gap は 44px のまま据え置き、名前の上の余白（12px）との
       差で「名前は上の画像のもの」と読ませる。
    */
    .theme-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .theme-card__shot {
        border-color: var(--color-ink-faint);
        box-shadow: 0 2px 10px rgba(31, 28, 26, 0.10);
    }

    /* 名前は「どの見本のものか」の見出しになる。画像のすぐ下で目に入るよう、
       本文より一段大きくする。 */
    .theme-card__name {
        font-size: 1.125rem;
    }

    /* 「一覧へ戻る」を右端に寄せたままだと、折り返して行の右上に浮く。 */
    .preview-bar a {
        margin-left: 0;
    }
}