@charset "UTF-8";
/* =============================================================================
   光明寺墓苑 — メインスタイル

   ■ 読み方
     01. デザイントークン   … 色・書体・余白の定義。配色を変えるならここだけ
     02. ベース             … リセットと素の要素
     03. レイアウト         … ページの器
     04. ヘッダー
     05. ヒーロー
     06. セクション共通
     07. 各セクション
     08. フォーム
     09. フッター
     10. 下層ページ・404
     11. ユーティリティ・アニメーション

   ■ 方針
     - ビルド不要のプレーン CSS（SCSS のコンパイルは行わない）
     - クラス名はすべて `km-` 始まり。WordPress のコアクラスと衝突させない
     - JavaScript が動かなくても内容は必ず読める
   ============================================================================= */


/* =============================================================================
   01. デザイントークン
   ============================================================================= */

:root {
    /* --- 色 --------------------------------------------------------------- */
    /*
     * 藍（紺青）と金茶で組む。
     * 瓦の鉄色、石柱の白、そして紺地に金という和の取り合わせから起こしている。
     * 緑は使わない。墓地のご案内は「明るく清潔」が最優先で、
     * 緑は面積が増えるとどうしても湿った印象になるため。
     *
     * 色名を token 名に入れていないのは、色相を変えても名前が嘘にならないため。
     *   --km-deep* … 濃い面（フッター・帯・CTA）
     *   --km-accent … 操作できるもの（ボタン・リンク・電話番号）
     *   --km-gold*  … 差し色
     */
    --km-ink:        #16191c;  /* 墨。本文 */
    --km-ink-2:      #4a5560;  /* 薄墨。補助文 */
    /*
     * 補助文・キャプション用。
     * フォームの説明文や受付時間もこの色で出るため、
     * いちばん濃い地色（--km-paper-3）の上でも 4.5:1 を満たす濃さを
     * 下限にしている（実測 4.61:1。これ以上薄くしない）。
     */
    --km-ink-3:      #646b73;

    --km-paper:      #f8fafc;  /* 白。基本背景 */
    --km-paper-2:    #f1f5f9;  /* 薄氷。交互セクション */
    --km-paper-3:    #e6eef6;  /* 藍をひとさじ。アクセント面 */
    --km-white:      #ffffff;

    --km-deep:      #26405a;  /* 藍。フッターなどの面に使う */
    --km-deep-2:    #182b3d;  /* 濃藍。フッター */
    --km-deep-3:    #4a627c;

    /*
     * 操作できるもの（ボタン・リンク・電話番号）の色。
     * 面の色（--km-deep）と分けてあるので、
     * ページごとに「操作色だけ」を差し替えられる。
     */
    --km-accent:       #24425c;
    --km-accent-hover: #16293b;

    /*
     * 金茶。文字・ボタンにも使うため、白磁・石灰のどちらの背景でも、
     * また白文字を載せた場合でも WCAG AA（4.5:1）を満たす濃さにしてある。
     * これより明るくすると section ラベルや CTA ボタンが読みにくくなる。
     *   #82632c … 白文字と 5.57:1 ／ 白磁の上で 5.29:1 ／ 石灰の上で 4.9:1
     */
    --km-gold:       #82632c;
    --km-gold-lite:  #d9c69b;  /* 淡い金。濃色面のラベル・見出し用 */
    --km-gold-line:  #a98543;  /* 罫・枠など、文字ではない装飾用 */

    --km-line:       rgba(22, 25, 28, 0.13);
    --km-line-2:     rgba(22, 25, 28, 0.06);

    /*
     * すりガラス。トップページで多用する。
     * 背後に「にじみ」がないとただの半透明にしか見えないため、
     * body.km-front に淡い光のむらを敷いてある（後述）。
     */
    --km-glass:       rgba(255, 255, 255, 0.62);
    --km-glass-2:     rgba(255, 255, 255, 0.78);
    --km-glass-line:  rgba(255, 255, 255, 0.85);
    --km-glass-blur:  saturate(1.4) blur(18px);

    /* --- 書体 ------------------------------------------------------------- */
    --km-mincho: "Shippori Mincho B1", "Zen Old Mincho", "Noto Serif JP",
                 "Hiragino Mincho ProN", "Yu Mincho", serif;
    --km-gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    --km-latin:  "Cormorant Garamond", "Times New Roman", serif;
    /* 電話番号・年号など、数字を読ませたい箇所で使う書体設定 */
    --km-num: "Cormorant Garamond", "Times New Roman", serif;

    /* --- 寸法 ------------------------------------------------------------- */
    --km-w:      1120px;  /* 通常の内容幅 */
    --km-w-read: 780px;   /* 読み物幅 */
    --km-pad:    clamp(20px, 5vw, 40px);
    --km-gap-y:  clamp(68px, 9vw, 136px);  /* セクション上下 */

    --km-header-h: 76px;
    --km-radius:   3px;   /* ボタン・入力欄 */
    --km-radius-2: 8px;   /* カード・写真。少しだけ丸めて今風に */
    --km-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

    /* 影は「浮かせる」のではなく「置いてある」程度に */
    --km-shadow-1: 0 2px 10px -6px rgba(23, 26, 25, 0.22);
    --km-shadow-2: 0 18px 44px -30px rgba(23, 26, 25, 0.42);
}

@media (max-width: 768px) {
    :root { --km-header-h: 62px; }
}

/* =============================================================================
   01-2. ページごとの空気感

   同じ部品を使いながら、トップ（墓地のご案内）と下層（寺院紹介）で
   受ける印象を変える。
     ・トップ    … 明るく、開けた印象。白を多く、影で軽く浮かせる
     ・下層ページ … 静かで落ち着いた印象。色を抑え、影を使わず罫線だけで組む
   ============================================================================= */

/* --- トップページ（白基調・すりガラス） ------------------------------------- */
/*
 * 墓地のご案内は「白い部屋に光が差している」状態を目指す。
 *   ・地色はほぼ白。区切りは色面ではなく、すりガラスの板で作る
 *   ・板の背後に淡い光のむら（下の ::before）を敷き、blur に仕事をさせる
 *     ── これが無いと backdrop-filter はただの半透明にしか見えない
 */
body.km-front {
    --km-paper:   #ffffff;
    --km-paper-2: #f7fafd;  /* 交互セクション。ほぼ白 */
    --km-paper-3: #e8f0f8;  /* アクセント面 */

    /* 操作色。白文字と 7.6:1 */
    --km-accent:       #2b5878;
    --km-accent-hover: #1f4560;

    --km-ink-2:   #4a5560;

    --km-gap-y:   clamp(80px, 10vw, 152px);  /* 余白を広げて開放感を出す */

    /* 影は青みの方向へ。すりガラスの縁が濁らない */
    --km-shadow-1: 0 2px 10px -6px rgba(24, 43, 61, 0.18);
    --km-shadow-2: 0 18px 44px -30px rgba(24, 43, 61, 0.34);
}

/*
 * すりガラスの「背後」。画面に固定した淡い光のむら。
 * スクロールしても動かないので、板がその上を滑っていくように見える。
 * 濃度はごく薄い（最大 12%）。これ以上濃くすると白基調が崩れる。
 */
body.km-front::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(62vw 52vh at 6% 8%,   rgba(43, 88, 120, 0.12), transparent 68%),
        radial-gradient(54vw 46vh at 96% 26%, rgba(169, 133, 67, 0.10), transparent 68%),
        radial-gradient(70vw 56vh at 44% 88%, rgba(43, 88, 120, 0.09), transparent 70%);
}
body.km-front .km-page { position: relative; z-index: 1; }

/* --- 下層ページ（静謐に） -------------------------------------------------- */
/*
 * トップと同じ藍の系統でまとめる。違うのは深さと質感だけ。
 * こちらはすりガラスを使わず、細い罫線と一段沈んだ地色で静けさを作る。
 */
body.km-sub {
    --km-paper:   #f4f6f9;
    --km-paper-2: #edf1f5;
    --km-ink-2:   #4e5862;
    /*
     * 補助文（出典・引用元）用。
     * 下層ページは地色が白より暗いぶん、一段濃くしている。
     */
    --km-ink-3:   #616872;
    --km-gap-y:   clamp(64px, 8vw, 124px);

    /* 影を使わず、細い罫線だけで面を分ける */
    --km-shadow-1: none;
    --km-shadow-2: none;
}


/* =============================================================================
   02. ベース
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--km-header-h) + 16px);
    /* 全画面セクションが横スクロールを作らないように */
    overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    font-family: var(--km-gothic);
    font-size: 16px;
    line-height: 1.9;
    color: var(--km-ink);
    background: var(--km-paper);
    overflow-x: clip;
    font-feature-settings: "palt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: var(--km-accent); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--km-gold); }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--km-mincho);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.06em;
}

p { margin: 0 0 1.6em; }
p:last-child { margin-bottom: 0; }

/* 文章の末尾の数文字を折り返さずにまとめる（inc/linebreak.php が付ける）。最後の行に数文字だけ残るのを防ぐ */
.km-nw { white-space: nowrap; }

ul, ol { margin: 0 0 1.6em; padding-left: 1.4em; }

figure { margin: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--km-line);
    margin: 2.4em 0;
}

blockquote {
    margin: 2.2em 0;
    padding: 1.3em 1.6em;
    background: var(--km-paper-2);
    border-left: 3px solid var(--km-gold);
}
blockquote p { font-family: var(--km-mincho); }
blockquote cite {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--km-ink-3);
}

/* キーボード操作時だけフォーカスを目立たせる */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--km-gold);
    outline-offset: 3px;
}

/* 読み上げ専用テキスト */
.km-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.km-skip:focus {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 999;
    width: auto; height: auto;
    margin: 0; padding: 0.9em 1.4em;
    clip-path: none;
    background: var(--km-accent);
    color: #fff;
    font-family: var(--km-mincho);
    letter-spacing: 0.08em;
    text-decoration: none;
}


/* =============================================================================
   03. レイアウト
   ============================================================================= */

.km-page { min-height: 100vh; display: flex; flex-direction: column; }
.km-main { flex: 1 0 auto; }

/* 内容幅の器 */
.km-wrap {
    width: 100%;
    max-width: var(--km-w);
    margin-inline: auto;
    padding-inline: var(--km-pad);
}
.km-wrap--read { max-width: var(--km-w-read); }


/* =============================================================================
   04. ヘッダー
   ============================================================================= */

.km-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--km-header-h);
    display: flex;
    align-items: center;
    /*
     * 地色はページの地色（--km-paper）から作る。トップ・下層・樹木葬（紫苑の配色）で
     * それぞれのページの色に合わせて変わる。
     */
    background: color-mix(in srgb, var(--km-paper) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s var(--km-ease), border-color 0.4s var(--km-ease),
                box-shadow 0.4s var(--km-ease), backdrop-filter 0.4s var(--km-ease);
}

/*
 * 少しスクロールしたら、すりガラスにする。
 * 透明度を上げて（地色 60%）、ぼかしを強める。下の写真や色が淡くにじんで見える。
 * 文字は墨のままなので、ヘッダーの下に濃い帯写真が来ても読める（最も暗い所で約 7:1）。
 */
.km-header.is-stuck {
    background: color-mix(in srgb, var(--km-paper) 60%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(24px);
    backdrop-filter: saturate(1.6) blur(24px);
    border-bottom-color: color-mix(in srgb, var(--km-white) 55%, transparent);
    box-shadow: 0 8px 30px -18px rgba(24, 43, 61, 0.35);
}
/* ぼかしが効かないブラウザでは、透けると文字が読みにくいので不透明に近づける */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .km-header,
    .km-header.is-stuck { background: color-mix(in srgb, var(--km-paper) 96%, transparent); }
}
/* color-mix 非対応（古いブラウザ）のときの地色 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .km-header { background: rgba(250, 249, 245, 0.86); }
    .km-header.is-stuck { background: rgba(250, 249, 245, 0.9); }
}

/*
 * 写真の上にヘッダーが乗っている状態（ページ最上部）では、
 * ヘッダーの地色を消して写真を見せる。文字は白に反転させる。
 * スクロールしたら（.is-stuck）通常の明るいヘッダーに戻る。
 * モバイルメニューを開いている間（.is-menu-open）も通常表示にする。
 */
.km-header--over:not(.is-stuck):not(.is-menu-open) {
    /*
     * 2026-11-03：トップ用写真の空は濃い青で、透明のままだと墨色のメニュー文字が読めない
     * （最悪 2.9:1）。白い膜（グラデーション）をなくしたので、ヘッダーに薄いすりガラスを敷く。
     * スクロール後（.is-stuck）より薄く・弱いぼかしにして、空が透けて見えるようにしている。
     */
    background: color-mix(in srgb, var(--km-paper) 52%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom-color: transparent;
}

/*
 * ヒーローは白く起こしてあるので、ヘッダーの文字は濃色のままでよい。
 * 地色だけを消して、写真がヘッダーの下までつながって見えるようにする。
 */
.km-header--over:not(.is-stuck):not(.is-menu-open) .km-nav__list .km-nav-cta > a {
    box-shadow: 0 4px 18px -10px rgba(23, 26, 25, 0.5);
}

.km-header__inner {
    width: 100%;
    max-width: var(--km-w);
    margin-inline: auto;
    padding-inline: var(--km-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* サイト名 */
.km-brand { display: flex; align-items: center; gap: 0.7em; text-decoration: none; }
.km-brand img { width: auto; max-height: calc(var(--km-header-h) - 30px); }
.km-brand__text {
    font-family: var(--km-mincho);
    font-size: clamp(1.02rem, 2.6vw, 1.28rem);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--km-ink);
    line-height: 1.3;
    white-space: nowrap;
}
/* 寺紋の飾り（assets/img/mon.svg を型抜きして差し色で塗る。装飾なので読み上げない） */
.km-brand__mon {
    flex: none;
    width: 1.9em;
    height: 1.9em;
    font-size: clamp(1.02rem, 2.6vw, 1.28rem);
    background: var(--km-gold);
    -webkit-mask: url("../img/mon.svg") center / contain no-repeat;
    mask: url("../img/mon.svg") center / contain no-repeat;
}
.km-brand:hover .km-brand__text { color: var(--km-nav-hover, var(--km-gold)); }

/* ナビゲーション（PC） */
.km-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
    margin: 0; padding: 0;
    list-style: none;
}
.km-nav__list a {
    font-family: var(--km-mincho);
    font-size: 0.94rem;
    letter-spacing: 0.09em;
    color: var(--km-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s var(--km-ease);
}
.km-nav__list a:hover { color: var(--km-nav-hover, var(--km-gold)); }

/* メニュー内の CTA（メニュー項目に km-nav-cta クラスを付ける）。ページの操作色（2026-11-04 に金茶から変更） */
.km-nav__list .km-nav-cta > a {
    background: var(--km-nav-cta, var(--km-accent));
    color: #fff;
    padding: 0.75em 1.5em;
    border-radius: var(--km-radius);
}
.km-nav__list .km-nav-cta > a:hover { background: var(--km-nav-cta-hover, var(--km-accent-hover)); color: #fff; }

/* ハンバーガー */
.km-burger {
    display: none;
    width: 46px; height: 46px;
    padding: 0;
    background: none;
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius);
    cursor: pointer;
    position: relative;
}
.km-burger span {
    position: absolute;
    left: 50%; width: 20px; height: 1px;
    background: var(--km-ink);
    transform: translateX(-50%);
    transition: transform 0.35s var(--km-ease), opacity 0.2s var(--km-ease);
}
.km-burger span:nth-child(1) { top: 17px; }
.km-burger span:nth-child(2) { top: 22.5px; }
.km-burger span:nth-child(3) { top: 28px; }
.km-burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5.5px) rotate(45deg); }
.km-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.km-burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1024px) {
    .km-burger { display: block; }

    .km-nav {
        position: fixed;
        inset: var(--km-header-h) 0 0 0;
        background: var(--km-paper);
        padding: clamp(24px, 6vw, 48px) var(--km-pad);
        overflow-y: auto;
        /* 閉じているときは完全に不可視・操作不可 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.3s var(--km-ease), transform 0.3s var(--km-ease), visibility 0.3s;
    }
    .km-nav.is-open { opacity: 1; visibility: visible; transform: none; }

    .km-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .km-nav__list li { border-bottom: 1px solid var(--km-line-2); }
    .km-nav__list a {
        display: block;
        padding: 1.15em 0.2em;
        font-size: 1.05rem;
    }
    .km-nav__list .km-nav-cta { border-bottom: 0; margin-top: 1.6em; }
    .km-nav__list .km-nav-cta > a { text-align: center; padding: 1.1em; }
}


/* =============================================================================
   05. ヒーロー
   ============================================================================= */

/*
 * ヒーローは全画面。ヘッダーは fixed なので、写真は画面の一番上から始まり
 * ヘッダーの下へもぐり込む。文字がヘッダーと重ならないよう padding だけ確保する。
 */
.km-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    padding-top: var(--km-header-h);
    overflow: hidden;
    background: var(--km-deep-2);
}

/* スマホのアドレスバー伸縮で高さが跳ねないよう、対応ブラウザでは svh を使う */
@supports (min-height: 100svh) {
    .km-hero { min-height: 100svh; }
}

.km-hero__media { position: absolute; inset: 0; z-index: 0; }
.km-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/*
 * 写真の上の白い膜（グラデーション）は、2026-11-03 の担当者の指示でなくした。
 * 写真はそのまま見せる。文字はすりガラスの板（.km-hero__panel）に載せて読ませる。
 * ヘッダーの文字は、最上部では空の青の上に直接載る（測った値は docs/claude/04 第3章）。
 */
.km-hero__media::after { content: none; }

.km-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--km-w);
    margin-inline: auto;
    padding: 0 var(--km-pad) clamp(72px, 11vw, 128px);
    color: var(--km-ink);
}

/*
 * 文字を載せるすりガラスの板（2026-11-03）。
 * トップ用写真は本堂の黒い扉や木々が文字の後ろに来るため、白い膜を薄くすると読めなくなる。
 * 膜は下半分だけの薄いものにして、文字のまとまりだけを板に載せる。
 * 板の白 0.66 は、背後がいちばん暗い所でも本文（#3f4a45）が 4.5:1 を保てる濃さ（docs/claude/04 第3章）。
 */
.km-hero__panel {
    width: fit-content;
    max-width: 40rem;
    margin-inline: auto; /* 板は左右中央に置く（文字は板の中で左揃え） */
    padding: clamp(24px, 3.6vw, 44px) clamp(22px, 3.6vw, 46px);
    /*
     * 2026-11-03 試し：すりガラスの板をやめ、文字そのものを白にして写真に直接載せる。
     * 元の板（白 0.66＋blur(18px)＋角丸）に戻すときは、この下の「白文字」ブロックを消して
     * git で元の .km-hero__panel の background / backdrop-filter / border / border-radius / box-shadow を戻す。
     */
}
/* 白文字。明るい所でも沈まないよう、藍のやわらかい影（にじみ）を添える */
.km-hero__panel .km-hero__eyebrow,
.km-hero__panel .km-hero__title,
.km-hero__panel .km-hero__lead {
    color: #fff;
    text-shadow: 0 0 18px rgba(24, 43, 61, 0.55), 0 1px 3px rgba(24, 43, 61, 0.55);
}
.km-hero__panel .km-hero__eyebrow::after { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 6px rgba(24, 43, 61, 0.5); }
@media (max-width: 768px) {
    .km-hero__panel { width: 100%; }
}
/*
 * スマホ：板の余白と字間を詰めて、板の高さを抑える（下の本堂をなるべく見せる）。
 * 見出しは「千二百年の／まなざしのもとで。」の2行に収まる大きさにする。
 */
@media (max-width: 600px) {
    .km-hero__inner { padding-inline: 14px; }
    .km-hero__panel { padding: 20px 18px 22px; border-radius: 16px; }
    .km-hero__panel .km-hero__eyebrow { margin-bottom: 0.9em; }
    .km-hero__panel .km-hero__eyebrow::after { margin-top: 0.8em; }
    .km-hero__panel .km-hero__title { font-size: clamp(1.5rem, 7.4vw, 1.9rem); letter-spacing: 0.04em; }
    .km-hero__panel .km-hero__lead { margin-top: 1em; font-size: 0.86rem; line-height: 1.9; }
    .km-hero__panel .km-hero__actions { margin-top: 18px; gap: 10px; }
    .km-hero__panel .km-btn { min-height: 48px; padding-block: 0.7em; }
}

/*
 * 板は写真の上半分（青空）に置き、下半分の本堂と参道を隠さない。
 * 白い膜は下から中ほどまでなので、板の背後はほぼ空の青になる。
 */
.km-hero { align-items: flex-start; }
.km-hero__inner { padding-top: clamp(16px, 7vh, 84px); padding-bottom: 0; }
@media (max-width: 600px) { .km-hero__inner { padding-top: 14px; } }
/* PC では板を横長にして見出しを1行に収め、板の高さを抑える（本堂の屋根にかからないように） */
@media (min-width: 1100px) {
    .km-hero__panel { max-width: 62rem; }
    .km-hero__title { white-space: nowrap; }
    .km-hero__panel .km-hero__lead { max-width: 46em; }
}

/*
 * 写真の上に乗る小さい文字。
 * 背景が写真なので明るさが一定しない。白い膜を弱めて写真を透かした分、
 * 文字側をさらに一段濃くして読みやすさを確保している。
 * ここを明るく戻すと、写真が透ける部分に重なったときに AA を割る。
 * スマホは切り抜きが縦長になり、この行の背後に本堂の明るい面が来るため
 * いちばん条件が厳しい。そこで合わせてある。
 * （実測 5.22:1／必要 4.5:1。測り方は docs/claude/04 の「写真の上の文字」を参照）
 */
.km-hero__eyebrow {
    font-family: var(--km-mincho);
    font-size: clamp(0.76rem, 2.2vw, 0.9rem);
    letter-spacing: 0.3em;
    color: #443416;
    margin: 0 0 1.5em;
}
.km-hero__eyebrow::after {
    content: "";
    display: block;
    width: 46px; height: 1px;
    margin-top: 1.3em;
    background: #6f5726;
}

.km-hero__title {
    font-size: clamp(1.9rem, 6vw, 3.5rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--km-ink);
    margin: 0;
}

.km-hero__lead {
    max-width: 32em;
    margin: 1.5em 0 0;
    font-size: clamp(0.92rem, 2.5vw, 1.04rem);
    line-height: 2.05;
    /* 通常面の --km-ink-2 より濃い。理由は上の km-hero__eyebrow と同じ */
    color: #3f4a45;
}

.km-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    margin-top: clamp(28px, 4vw, 42px);
}

/* 写真クレジット（CC 表記など） */
.km-hero__credit {
    position: absolute;
    right: var(--km-pad);
    bottom: 10px;
    z-index: 2;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    color: var(--km-ink-3);
}
.km-hero__credit a { color: inherit; }


/* =============================================================================
   06. セクション共通
   ============================================================================= */

.km-sec {
    padding-block: var(--km-gap-y);
    padding-inline: var(--km-pad);
    background: var(--km-paper);
}
.km-sec--stone  { background: var(--km-paper-2); }
.km-sec--white  { background: var(--km-white); }
.km-sec--deep  { background: var(--km-deep); color: rgba(255, 255, 255, 0.88); }
.km-sec--tight  { padding-block: clamp(44px, 6vw, 84px); }

/*
 * 藍をひとさじ入れた明るいアクセント面。
 * 濃い色面で締めるのではなく、淡い色面で変化をつけて明るさを保つ。
 */
.km-sec--accent {
    background:
        linear-gradient(180deg, var(--km-paper-3) 0%, color-mix(in srgb, var(--km-paper-3) 55%, #fff) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .km-sec--accent { background: var(--km-paper-3); }
}

/*
 * トップページだけ、地色の面を敷かない。
 * 白い地色で塗りつぶすと背後の光のむらが消えてしまい、
 * すりガラスがただの半透明になるため。
 * 面の切り替えは、この下の「板」（カード・囲み）が担当する。
 */
body.km-front .km-sec:not(.km-sec--deep) {
    background: transparent;
}
/* 淡い色面はうっすら残す。ただし透過させて背後を透かす */
body.km-front .km-sec--stone  { background: rgba(241, 245, 249, 0.55); }
body.km-front .km-sec--accent { background: rgba(232, 240, 248, 0.60); }


/* =============================================================================
   06-2. すりガラスの板（トップページ）

   「白い紙を置く」のではなく「曇りガラスの板を浮かせる」。
   背後の光のむら（body.km-front::before）が透けて、白の中に階調が出る。

   ■ 触るときの注意
     - backdrop-filter は「背後に描かれたもの」をぼかす。真っ白な面の上では
       何も起きないので、必ず ::before のむらを残しておくこと
     - 非対応ブラウザでは半透明のままだと文字が読みにくくなる。
       下の @supports で不透明な白に落としている
     - 板を重ねすぎると重くなる。区画カードなど「面」の部品だけに使う
   ============================================================================= */

body.km-front .km-reason,
body.km-front .km-plot,
body.km-front .km-heritage,
body.km-front .km-form__box,
body.km-front .km-routes,
body.km-front .wp-block-list.km-treasure-list li {
    background: var(--km-glass);
    -webkit-backdrop-filter: var(--km-glass-blur);
    backdrop-filter: var(--km-glass-blur);
    border: 1px solid var(--km-glass-line);
}

/* 写真を含むカードは、写真の下だけ板を少し濃くして文字を安定させる */
body.km-front .km-plot__body { background: rgba(255, 255, 255, 0.30); }

/* アクセスの経路一覧は素の ul なので、板にするぶんの余白と角丸を足す */
body.km-front .km-routes {
    border-radius: var(--km-radius-2);
    padding: clamp(6px, 1.4vw, 14px) clamp(18px, 2.4vw, 28px);
    box-shadow: var(--km-shadow-1);
}
body.km-front .km-routes li:last-child { border-bottom: none; }

/*
 * 入力欄もガラスに寄せる（白ベタだと板の中で浮いて見える）。
 * :not() で送信ボタンを外している。これを外すと
 * 送信ボタンの地色まで半透明の白になり、白文字が消える。
 */
body.km-front .km-form input:not([type="submit"]):not([type="button"]),
body.km-front .km-form select,
body.km-front .km-form textarea {
    background: rgba(255, 255, 255, 0.70);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.km-front .km-form input:not([type="submit"]):not([type="button"]):focus,
body.km-front .km-form select:focus,
body.km-front .km-form textarea:focus {
    background: rgba(255, 255, 255, 0.95);
}

/* FAQ は板ではなく罫線で組んであるので、行だけ薄く曇らせる */
body.km-front .km-faq details {
    background: rgba(255, 255, 255, 0.42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/*
 * backdrop-filter 非対応（古い Firefox など）。
 * 半透明のまま置くと背後の写真や色が透けて文字が読めなくなるため、
 * ほぼ不透明な白に落とす。見た目は素朴になるが内容は必ず読める。
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.km-front .km-reason,
    body.km-front .km-plot,
    body.km-front .km-heritage,
    body.km-front .km-form__box,
    body.km-front .km-routes,
    body.km-front .wp-block-list.km-treasure-list li,
    body.km-front .km-faq details {
        background: rgba(255, 255, 255, 0.96);
    }
    body.km-front .km-form input:not([type="submit"]):not([type="button"]),
    body.km-front .km-form select,
    body.km-front .km-form textarea { background: #fff; }
}

.km-sec__inner {
    width: 100%;
    max-width: var(--km-w);
    margin-inline: auto;
}

/* 見出しのかたまり */
.km-head { margin-bottom: clamp(36px, 5vw, 64px); text-align: center; }

/*
 * 見出しラベル。
 * 両脇に罫線を引くと古い印象になるため、文字組みだけで見せる。
 */
.km-head__label {
    font-family: var(--km-latin);
    font-size: clamp(0.74rem, 1.6vw, 0.84rem);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--km-gold);
    margin: 0 0 1.1em;
    /* letter-spacing の分だけ右に寄るのを戻す */
    text-indent: 0.34em;
}

.km-head__title {
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    margin: 0 0 0.65em;
    text-wrap: balance;
}
.km-head__title:last-child { margin-bottom: 0; }

/* 見出しの下に短い金の罫を一本だけ */
.km-head__title::after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin: 0.65em auto 0;
    background: var(--km-gold);
    opacity: 0.85;
}
.km-head--left .km-head__title::after { margin-inline: 0; }

.km-head__lead {
    max-width: 40em;
    margin: 0 auto;
    color: var(--km-ink-2);
    font-size: clamp(0.9rem, 2.2vw, 0.98rem);
    line-height: 2.05;
}

.km-sec--deep .km-head__label { color: var(--km-gold-lite); }
.km-sec--deep .km-head__title { color: #fff; }
.km-sec--deep .km-head__lead  { color: rgba(255, 255, 255, 0.76); }

/* ボタン */
.km-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0.9em 2.3em;
    border: 1px solid var(--km-accent);
    border-radius: var(--km-radius);
    background: var(--km-accent);
    color: #fff;
    font-family: var(--km-mincho);
    font-size: clamp(0.94rem, 2.4vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s var(--km-ease), border-color 0.3s var(--km-ease),
                color 0.3s var(--km-ease), transform 0.3s var(--km-ease);
}
.km-btn:hover {
    background: var(--km-accent-hover);
    border-color: var(--km-accent-hover);
    color: #fff;
    transform: translateY(-2px);
}

/*
 * km-btn--gold は、もとは金茶のボタン。ボタンの色はページの操作色に統一したので（2026-11-04）、
 * 今は通常のボタンと同じ色になる。クラスはパターンに残っているため消さずに置いている。
 */
.km-btn.km-btn--gold { background: var(--km-accent); border-color: var(--km-accent); }
.km-btn.km-btn--gold:hover { background: var(--km-accent-hover); border-color: var(--km-accent-hover); }

/*
 * 「.km-btn」と組み合わせたときだけ効かせる。ボタンブロックの外枠（div.wp-block-button）にも
 * km-btn--line が付くため、単独のクラスだと外枠まで塗られ、角の丸いボタンの後ろに四角い影が出る。
 */
.km-btn.km-btn--line {
    background: transparent;
    color: var(--km-ink);
    border-color: rgba(23, 26, 25, 0.3);
}
.km-btn.km-btn--line:hover { background: var(--km-ink); border-color: var(--km-ink); color: #fff; }

/*
 * 明るいヒーローの上に置く副ボタン。
 * 白く塗って輪郭をはっきりさせたほうが清潔に見え、押せることも伝わる。
 */
.km-hero .km-btn.km-btn--line {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(23, 26, 25, 0.18);
    color: var(--km-ink);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px -12px rgba(23, 26, 25, 0.5);
}
.km-hero .km-btn.km-btn--line:hover {
    background: var(--km-ink);
    border-color: var(--km-ink);
    color: #fff;
}

/* 濃い面に置く枠線ボタン（下層ページ・フッター側） */
.km-sec--deep .km-btn.km-btn--line,
.km-cta:not(.km-cta--form) .km-btn.km-btn--line {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(3px);
}
.km-sec--deep .km-btn.km-btn--line:hover,
.km-cta:not(.km-cta--form) .km-btn.km-btn--line:hover {
    background: #fff;
    border-color: #fff;
    color: var(--km-deep);
}

.km-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 16px;
    margin-top: clamp(30px, 4vw, 46px);
}


/* =============================================================================
   07. 各セクション
   ============================================================================= */

/* --- 07-1. コンセプト --------------------------------------------------- */
.km-concept { text-align: center; }
.km-concept::before {
    content: "";
    display: block;
    width: 1px;
    height: clamp(40px, 7vw, 72px);
    margin: 0 auto clamp(28px, 4vw, 44px);
    background: linear-gradient(180deg, transparent, var(--km-gold));
}
.km-concept__copy {
    font-family: var(--km-mincho);
    font-size: clamp(1.15rem, 3.6vw, 1.85rem);
    line-height: 2.1;
    letter-spacing: 0.14em;
    margin: 0 0 1.1em;
}
.km-concept__body {
    max-width: 38em;
    margin-inline: auto;
    color: var(--km-ink-2);
    line-height: 2.15;
}
/* 見出しのすぐ下に置くときは、見出しの金の罫と重なるので縦の線を出さない */
.km-head + .km-concept::before { display: none; }

/* --- 07-2. 選ばれる理由 -------------------------------------------------- */
.km-grid {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .km-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .km-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .km-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .km-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/*
 * カードは「枠で囲う」より「白い紙を置く」印象に。
 * 下層ページでは影を使わない（--km-shadow-1 が none になる）ので、
 * その場合だけ罫線で輪郭を出す。
 */
.km-reason {
    position: relative;
    background: var(--km-white);
    border-radius: var(--km-radius-2);
    box-shadow: var(--km-shadow-1);
    padding: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 32px);
    transition: transform 0.4s var(--km-ease), box-shadow 0.4s var(--km-ease);
}
body.km-sub .km-reason { border: 1px solid var(--km-line-2); }

.km-reason:hover {
    transform: translateY(-4px);
    box-shadow: var(--km-shadow-2);
}

/*
 * 連番は大きく淡く。ただし薄くしすぎると「かすれ」に見えてしまうので、
 * 装飾だと分かる程度の濃さは残す。
 */
.km-reason__no {
    display: block;
    font-family: var(--km-latin);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: 0.02em;
    color: var(--km-gold);
    opacity: 0.34;
    margin-bottom: 0.3em;
}
.km-reason h3 { font-size: clamp(1.05rem, 2.8vw, 1.2rem); margin: 0 0 0.75em; }
.km-reason p  { font-size: 0.92rem; line-height: 2; color: var(--km-ink-2); margin: 0; }

/* --- 07-3. 墓所のご案内 -------------------------------------------------- */
.km-plot {
    display: flex;
    flex-direction: column;
    background: var(--km-white);
    border-radius: var(--km-radius-2);
    box-shadow: var(--km-shadow-1);
    overflow: hidden;
    transition: transform 0.45s var(--km-ease), box-shadow 0.45s var(--km-ease);
}
body.km-sub .km-plot { border: 1px solid var(--km-line-2); }

.km-plot:hover {
    transform: translateY(-5px);
    box-shadow: var(--km-shadow-2);
}
.km-plot__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--km-paper-2); }
.km-plot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--km-ease); }
.km-plot:hover .km-plot__media img { transform: scale(1.05); }

.km-plot__body { flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px) clamp(20px, 2.6vw, 28px); }
.km-plot__label {
    font-family: var(--km-latin);
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--km-gold);
    margin: 0 0 0.85em;
}
.km-plot h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); margin: 0 0 0.75em; }
.km-plot p  { font-size: 0.92rem; line-height: 2; color: var(--km-ink-2); margin: 0 0 1.3em; }
/*
 * 3カラムのまま幅が詰まる帯域では、英字ラベルが2行に折り返して
 * 見出しの高さがカードごとにずれる。字間を少し詰めて1行に収める。
 */
@media (max-width: 1080px) {
    .km-plot__label { font-size: 0.66rem; letter-spacing: 0.15em; }
}

/* 一般墓ページ・区画の広さごとの価格カード（ippan-02-prices） */
.km-size {
    --km-size-py: clamp(24px, 3vw, 32px);
    --km-size-px: clamp(20px, 2.6vw, 28px);
    background: var(--km-white);
    border: 1px solid var(--km-line-2);
    border-radius: var(--km-radius-2);
    padding: var(--km-size-py) var(--km-size-px);
    display: flex;
    flex-direction: column;
}
.km-size > .wp-block-group__inner-container { display: flex; flex-direction: column; flex: 1; }
.km-size .km-size__label {
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    color: var(--km-gold);
    margin: 0;
}
.km-size .km-size__area {
    font-family: var(--km-mincho);
    font-size: clamp(1.9rem, 4vw, 2.3rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--km-ink);
    margin: 0.15em 0 0;
}
.km-size__area small { font-size: 0.5em; margin-left: 0.15em; letter-spacing: 0; }
.km-size .km-size__dim {
    font-size: 0.88rem;
    color: var(--km-ink-2);
    margin: 0.4em 0 1.2em;
}
.km-size .km-size__row,
.km-size .km-size__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin: 0;
    padding: 0.7em 0;
    border-top: 1px solid var(--km-line-2);
    font-size: 0.88rem;
    color: var(--km-ink-2);
}
.km-size__row strong { font-weight: 600; color: var(--km-ink); white-space: nowrap; }
.km-size .km-size__total {
    margin-block-start: auto;
    border-top: 1px dashed var(--km-line);
    padding-top: 1em;
    font-family: var(--km-mincho);
    color: var(--km-ink);
}
.km-size__total strong {
    font-size: 1.45em;
    letter-spacing: 0.02em;
    color: var(--km-accent);
    white-space: nowrap;
}
/* 一般墓のカード：面積の数値の右に間口・奥行を並べる（「面積」の小見出しは置かない。2026-11-04） */
.km-size .km-size__head,
.km-size .km-size__head > .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.1em;
    row-gap: 0.2em;
}
.km-size .km-size__head { margin: 0 0 1em; }
.km-size .km-size__head > .wp-block-group__inner-container { width: 100%; }
.km-size__head .km-size__area { margin: 0; }
.km-size__head .km-size__dim { margin: 0; }
/* ゆとり区画のバッジ。図の左上に重ねる（図はカードの余白の内側、左上から始まるので、カードを基準に置く） */
.km-size:has(.km-size__badge) { position: relative; }
.km-size .km-size__badge {
    position: absolute;
    top: calc(var(--km-size-py) + 12px);
    left: calc(var(--km-size-px) + 12px);
    z-index: 1;
    margin: 0 !important;
    padding: 0.3em 0.95em;
    border-radius: 999px;
    background: var(--km-accent);
    font-family: var(--km-gothic);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: var(--km-white);
}
/* 年間管理料（総額には含めず、別途）。総額の下に小さめに添える */
.km-size .km-size__fee {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin: 0;
    padding: 0.55em 0 0;
    font-size: 0.84rem;
    color: var(--km-ink-2);
}
.km-size__fee strong { font-weight: 600; color: var(--km-ink); white-space: nowrap; }
.km-cards .km-size { flex: 1; width: 100%; margin-block: 0; }
/* カード上部の画像（樹木葬の料金プラン）。カードの余白を打ち消して上端と左右いっぱいに置く（.km-heritage__img と同じ考え方） */
.km-cards .km-size .wp-block-image.km-size__img {
    margin: calc(-1 * var(--km-size-py)) calc(-1 * var(--km-size-px)) 1.4em !important;
    max-width: none;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--km-radius-2) var(--km-radius-2) 0 0;
}
.km-size__img img { width: 100%; height: 100%; object-fit: cover; }
/*
 * 一般墓のイメージ図（線画）。カードの余白の内側に収め（写真のように端まで広げない）、
 * 切り取らずに全体を見せる。白地は、下から上へ薄くなる台紙の色になじませる。
 */
.km-cards .km-size .wp-block-image.km-size__img--perse {
    margin: 0 0 1.4em !important;
    aspect-ratio: 4 / 3;
    /* 下（地面側）が濃く、上に向かって白くなる */
    background: linear-gradient(to top, var(--km-paper-3) 0%, var(--km-paper-2) 35%, var(--km-white) 100%);
    border-radius: calc(var(--km-radius-2) - 2px);
}
.km-size__img--perse img { object-fit: contain; padding: 6% 0 3%; mix-blend-mode: multiply; }

/*
 * 一般墓「区画の種類」：標準区画とゆとり区画のカード（2026-11-04）。
 * 平面図は線画なので、切り抜かずに全体を見せる（contain）。地は区画の価格カードの図と同じグラデーション。
 */
.km-cards.km-types.wp-block-columns { max-width: 960px; margin-inline: auto !important; }
.km-type {
    --km-type-py: clamp(24px, 3vw, 32px);
    --km-type-px: clamp(20px, 2.6vw, 28px);
    background: var(--km-white);
    border: 1px solid var(--km-line-2);
    border-radius: var(--km-radius-2);
    padding: var(--km-type-py) var(--km-type-px);
}
.km-cards .km-type { flex: 1; width: 100%; margin-block: 0; }
.km-type .wp-block-image.km-type__img {
    margin: 0 0 1.3em !important;
    max-width: none;
    padding: 7% 8% 5%;
    background: linear-gradient(to top, var(--km-paper-3) 0%, var(--km-paper-2) 35%, var(--km-white) 100%);
    border-radius: calc(var(--km-radius-2) - 2px);
}
.km-type__img img { width: 100%; height: auto; mix-blend-mode: multiply; }
.km-type .km-type__tag {
    margin: 0 0 0.3em;
    font-family: var(--km-latin);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--km-gold);
}
.km-type h3 { margin: 0 0 0.6em; font-size: 1.2rem; }
.km-type p:not(.km-type__tag) { margin: 0; font-size: 0.92rem; line-height: 2; color: var(--km-ink-2); }

/* 7種類のほかの大きさもご案内できる旨 */
.km-sec .km-sizes__more {
    max-width: 900px;
    margin: clamp(24px, 3vw, 34px) auto 0;
    padding: 1.2em 1.5em;
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius-2);
    background: var(--km-white);
    font-size: 0.95rem;
    line-height: 1.95;
    text-align: center;
    color: var(--km-ink);
}
.km-sizes + .km-sizes__more + .km-sources { max-width: 900px; margin-inline: auto; margin-top: clamp(16px, 2vw, 22px); }
/*
 * 価格カードは、カラムブロックのままだと PC で1行に詰まる（コアが 782px 以上で折り返しを止めるため）。
 * この列だけ grid にして、タブレット以上は 2列×3行・スマホ 1列にする。
 */
.km-cards.km-sizes.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .km-cards.km-sizes.wp-block-columns { max-width: 900px; margin-inline: auto !important; } }

/*
 * 一般墓のカードは1列に並べ、カードの中を「左に図・右に明細」の横並びにする（720px 以上）。
 * グループブロックは中間層（.wp-block-group__inner-container）を挟むので、両方の形に当てる。
 * 制約付きレイアウトが子の左右 margin を !important で auto にするため、横並びの中では 0 に戻す。
 */
@media (min-width: 720px) {
    .km-sizes .km-size > .wp-block-group__inner-container,
    .km-sizes .km-size:not(:has(> .wp-block-group__inner-container)) {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        column-gap: clamp(24px, 3.4vw, 40px);
        align-content: start;
    }
    .km-sizes .km-size > .wp-block-group__inner-container > *,
    .km-sizes .km-size:not(:has(> .wp-block-group__inner-container)) > * {
        grid-column: 2;
        max-width: none;
        margin-inline: 0 !important;
    }
    .km-cards.km-sizes .km-size .wp-block-image.km-size__img--perse {
        grid-column: 1;
        grid-row: 1 / span 8;
        align-self: stretch;
        margin: 0 !important;
        aspect-ratio: auto;
        min-height: 100%;
    }
    .km-sizes .km-size .km-size__total { margin-block-start: 0.4em; }
}
.km-cards.km-sizes > .wp-block-column { flex-basis: auto !important; min-width: 0; }
.km-sizes + .km-sources { margin-top: clamp(20px, 2.6vw, 28px); }

/* 樹木葬ページ：特長はタブレット以上で 2列×2行・スマホ 1列、料金プランは 2列（同じ理由で grid にする） */
.km-cards.km-features.wp-block-columns,
.km-cards.km-plans.wp-block-columns {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .km-cards.km-features.wp-block-columns { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto !important; }
}
@media (min-width: 720px) {
    .km-cards.km-plans.wp-block-columns { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto !important; }
}
.km-cards.km-features > .wp-block-column,
.km-cards.km-plans > .wp-block-column { flex-basis: auto !important; min-width: 0; }
/* 料金プランの下の使用期間の説明。注記（※）より一段強く、本文の大きさで */
.km-sec .km-plans__fee.km-plans__period { font-size: 1rem; line-height: 1.9; color: var(--km-ink); }
.km-sec .km-plans__fee.km-plans__period + .km-plans__fee { margin-top: 0.9em; }
@media (max-width: 599px) { .km-sec .km-plans__fee.km-plans__period { text-align: left; } }
/* 特長のカードの見出しは左右中央に（本文は左揃えのまま） */
.km-features .km-reason h3 { text-align: center; }
.km-plans .km-size .km-size__area { font-size: clamp(1.4rem, 3vw, 1.7rem); }
.km-sec .km-plans__fee {
    max-width: 820px;
    margin: clamp(18px, 2.4vw, 26px) auto 0;
    font-size: 0.92rem;
    text-align: center;
    color: var(--km-ink-2);
}

/* カードから詳しいページへのボタン（「詳しく見る」）。カードの幅いっぱいに置く */
.km-plot__body .wp-block-buttons.km-plot__actions { margin: 1.2em 0 0; }
.km-plot__actions .wp-block-button { width: 100%; }
.km-plot__actions .wp-block-button.km-btn-wrap > .wp-block-button__link {
    width: 100%;
    min-height: 54px;
    font-size: 0.98rem;
}

/* 完成予想図など、写真そのものについての但し書き */
.km-plot .km-plot__note {
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--km-ink-3);
    margin: -0.6em 0 1.3em;
}

/*
 * 価格欄はカード下端に揃える。
 * WordPress がグループブロックに出すレイアウト用 CSS が margin を
 * 上書きしてしまうため、子孫セレクタで詳細度を一段上げている。
 */
.km-plot__body .km-plot__spec {
    margin-block-start: auto;
}
.km-plot__spec {
    padding-top: 1.1em;
    border-top: 1px dashed var(--km-line);
    font-family: var(--km-mincho);
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--km-ink-3);
}
.km-plot__spec strong {
    display: block;
    margin-top: 0.3em;
    font-size: 1.3em;
    color: var(--km-accent);
    letter-spacing: 0.02em;
}

/* --- 07-4. 寺院紹介（写真＋テキスト） ------------------------------------ */
.km-split {
    display: grid;
    gap: clamp(28px, 4.5vw, 60px);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1024px) {
    .km-split { grid-template-columns: 1.05fr 1fr; }
    .km-split--rev .km-split__media { order: 2; }
}

.km-split__media { position: relative; overflow: hidden; }
.km-split__media img { width: 100%; transition: transform 1.2s var(--km-ease); }
.km-split__media:hover img { transform: scale(1.04); }
/* 写真左下の金の帯 */
.km-split__media::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34%; height: 3px;
    background: var(--km-gold);
}

.km-split__label {
    font-family: var(--km-latin);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--km-gold);
    margin: 0 0 1em;
}
.km-split h2 {
    font-size: clamp(1.3rem, 3.4vw, 1.85rem);
    margin: 0 0 0.9em;
    /* 行末に1文字だけ残る不格好な折り返しを避ける */
    text-wrap: balance;
}
.km-split p  { line-height: 2.15; color: var(--km-ink-2); }

/*
 * トップ「About the Temple」：担当者が、見出し・説明文を写真の上（全幅）に出し、
 * 写真と表を下に並べるレイアウトへ変えた（2026-11-04）。見出し・説明文が .km-split の外に出たので、
 * 同じ見た目になるよう、ラベルに続く見出し・段落へ .km-split と同じ指定をあてる。
 */
.km-sec .km-subtitle {
    font-size: clamp(1.3rem, 3.4vw, 1.85rem);
    margin: 0 0 0.9em;
    text-wrap: balance;
}
.km-sec .km-split__label:not(.km-split *) ~ p { line-height: 2.15; color: var(--km-ink-2); margin: 0 0 1.2em; }
.km-sec .km-split__label:not(.km-split *) ~ .km-split { margin-top: clamp(28px, 4vw, 52px); }
.km-split .wp-block-media-text__content > p:empty { display: none; }
/* Heritage のセクションの中に入っている。見出しの後に About、そのあとのボタンと文化財カードの間をあける */
.km-sec .km-split + .km-actions { margin-bottom: 0; }
.km-sec .km-actions + .km-subtitle { margin-top: clamp(64px, 9vw, 120px); }
.km-sec .km-subtitle + .km-cards { margin-top: clamp(24px, 3vw, 36px); }
/* 完成予想図など、図版そのものについての但し書き */
.km-split .km-split__note { font-size: 0.78rem; line-height: 1.8; color: var(--km-ink-3); }

/* 寺院の要点 */
.km-facts { margin: clamp(24px, 3vw, 34px) 0 0; border-top: 1px solid var(--km-line); }
.km-facts__row {
    display: grid;
    grid-template-columns: 6em 1fr;
    gap: 0 1.2em;
    padding: 0.85em 0;
    border-bottom: 1px solid var(--km-line-2);
    font-size: 0.92rem;
    line-height: 1.9;
}
.km-facts__key { font-family: var(--km-mincho); letter-spacing: 0.1em; color: var(--km-gold); }
.km-facts__val { color: var(--km-ink-2); }

/* --- 07-5. 文化財（濃緑） ------------------------------------------------ */
/*
 * 文化財カード。
 * 淡い色面の上に、わずかに透けた白い紙を重ねる。
 * 不透明な白より、下地の色がかすかに残るほうが軽やかに見える。
 */
.km-heritage {
    --km-heritage-py: clamp(26px, 3.2vw, 38px);
    --km-heritage-px: clamp(22px, 2.8vw, 30px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--km-radius-2);
    box-shadow: var(--km-shadow-1);
    padding: var(--km-heritage-py) var(--km-heritage-px);
    transition: transform 0.4s var(--km-ease), box-shadow 0.4s var(--km-ease);
}
.km-heritage:hover {
    transform: translateY(-4px);
    box-shadow: var(--km-shadow-2);
}

.km-heritage__tag {
    display: inline-block;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    padding: 0.42em 0.9em;
    margin: 0 0 1.1em;
    border: 1px solid var(--km-gold);
    border-radius: 999px;
    color: var(--km-gold);
}
/* 左右中央揃え（エディタで「中央揃え」にしたとき）。枠線つきのタグは箱ごと中央に寄せる */
.km-heritage__tag.has-text-align-center { display: block; width: fit-content; margin-inline: auto; }
/*
 * カード上部の写真。カードの余白を打ち消して、上端と左右いっぱいに置く。
 * グループの「制約付きレイアウト」が左右の margin を !important で auto にするため、
 * こちらも !important で上書きしている。グループが中間層を挟むことがあるので子孫セレクタにする。
 */
.km-cards .km-heritage .wp-block-image.km-heritage__img {
    margin: calc(-1 * var(--km-heritage-py)) calc(-1 * var(--km-heritage-px)) 1.5em !important;
    max-width: none;
    /* 文化財の写真は縦長（2:3）でそろえてあるので、枠も 2:3 にして全体を見せる（2026-11-04。前は 4:3） */
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--km-radius-2) var(--km-radius-2) 0 0;
}
.km-heritage__img img { width: 100%; height: 100%; object-fit: cover; }
/*
 * 仏像のカード：写真は載せず、本堂の内陣の写真を強くぼかした背景（画像に焼き込み済み）に、拝観の案内を重ねる（2026-11-04）。
 * 案内は画像ブロックのキャプション。文字が読めるよう、背景を少し暗くする。
 */
.km-heritage .km-heritage__img--blur { position: relative; }
.km-heritage__img--blur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(24, 16, 8, 0.34), rgba(24, 16, 8, 0.5));
}
.km-heritage .km-heritage__img--blur figcaption {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1.2em;
    font-family: var(--km-mincho);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    line-height: 2;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
/* 写真を押すと拡大表示（site.js のライトボックス） */
.km-heritage .km-heritage__img { position: relative; z-index: 1; }
.km-heritage__img img[role="button"] { cursor: zoom-in; transition: transform 0.6s var(--km-ease); }
.km-heritage__img img[role="button"]:hover { transform: scale(1.03); }
.km-heritage__img img[role="button"]:focus-visible { outline: 3px solid var(--km-gold); outline-offset: -3px; }
/* 縦長の写真は上寄りに切り抜く（塔や碑の頭が切れないように）。枠を 2:3 にしてからは、ほぼ切れずに収まる */
.km-heritage__img--top img { object-position: 50% 6%; }

/*
 * 寺院紹介「境内の文化財」：写真入りのリンクカード（2026-11-04）。
 * トップの文化財カード（.km-heritage）と同じ見た目で、件数が多いのでグリッドで並べる（PC 3列・スマホ 1列）。
 * 江東区の該当ページへのリンクは、カード下端の「江東区のページ ↗」だけ（2026-11-04。前はカード全体がリンクだった）。
 */
/* グループの内側の箱（wp-block-group__inner-container）が挟まる場合は、そちらを並べる */
.km-treasure-grid:has(> .wp-block-group__inner-container) { display: block; }
.km-treasure-grid,
.km-treasure-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(20px, 3vw, 32px);
}
.km-treasure-grid .km-treasure { position: relative; display: flex; flex-direction: column; margin: 0 !important; max-width: none; }
.km-treasure p + p { margin-top: 0.6em; }
/* 登録年と、江東区のページへのリンクの一行。カードの下端にそろえる */
.km-heritage p.km-treasure__date {
    display: flex;
    /* 幅が足りないときは「江東区のページ」を次の行へ送り、登録年が「登/録」のように切れないようにする */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3em 1em;
    margin-top: auto;
    padding-top: 1.1em;
    font-size: 0.78rem;
    color: var(--km-ink-3);
}
.km-treasure__date .km-treasure__link { flex: none; color: var(--km-accent); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.km-treasure__date .km-treasure__link:hover { color: var(--km-accent-hover); text-decoration-color: currentColor; }
/* 写真のない仏像は、写真の位置に拝観の案内を出す */
.km-cards .km-heritage p.km-treasure__noimg {
    margin: calc(-1 * var(--km-heritage-py)) calc(-1 * var(--km-heritage-px)) 1.5em !important;
    aspect-ratio: 2 / 3;
    display: grid;
    place-items: center;
    padding: 1em;
    border-radius: var(--km-radius-2) var(--km-radius-2) 0 0;
    background: var(--km-paper-2);
    font-size: 0.82rem;
    line-height: 1.9;
    text-align: center;
    color: var(--km-ink-3);
}
/*
 * PC（860px 以上）は、カードを2列に並べ、カードの中を「左に写真・右に説明」の横並びにする（2026-11-04）。
 * 縦長（2:3）の写真を縦並びにするとカードが縦に長くなりすぎ、説明の短いカードは間延びするため。
 * スマホ・タブレットは縦並びのまま（写真が細くなりすぎないように）。トップの文化財カードは変えない。
 * 写真は高さいっぱいに広げ、説明が長くて写真より高くなったときも、写真が下まで届くようにする。
 */
@media (min-width: 860px) {
    .km-treasure-grid,
    .km-treasure-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .km-treasure-grid .km-treasure > .wp-block-group__inner-container,
    .km-treasure-grid .km-treasure:not(:has(> .wp-block-group__inner-container)) {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        /* 説明の段（最大7つ）のあとに伸びる段を置き、カードが隣より低いときの余りをそこで受ける */
        grid-template-rows: repeat(7, auto) 1fr;
        column-gap: clamp(20px, 2.4vw, 28px);
        flex: 1;
    }
    .km-treasure-grid .km-treasure > .wp-block-group__inner-container > *,
    .km-treasure-grid .km-treasure:not(:has(> .wp-block-group__inner-container)) > * {
        grid-column: 2;
        max-width: none;
        margin-inline: 0 !important;
    }
    .km-cards .km-treasure .wp-block-image.km-heritage__img,
    .km-cards .km-treasure p.km-treasure__noimg {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: stretch;
        aspect-ratio: auto;
        margin: calc(-1 * var(--km-heritage-py)) 0 calc(-1 * var(--km-heritage-py)) calc(-1 * var(--km-heritage-px)) !important;
        border-radius: var(--km-radius-2) 0 0 var(--km-radius-2);
    }
    .km-treasure .km-heritage__img img { aspect-ratio: 2 / 3; height: 100%; }
    .km-cards .km-treasure p.km-treasure__noimg { min-height: 100%; }
    /* 横並びのときは写真の枠が細いので、拝観の案内の文字を小さくして2行に収める */
    .km-treasure.km-heritage .km-heritage__img--blur figcaption { padding: 0.6em; font-size: 0.8rem; letter-spacing: 0.02em; }
    /* 右側の文字は左揃えに（縦並びのときの中央揃えを戻す） */
    .km-treasure-grid .km-treasure .km-heritage__tag { margin: 0 0 0.6em !important; }
    .km-treasure-grid .km-treasure :is(.has-text-align-center, h3) { text-align: left; }
    .km-treasure-grid .km-treasure h3 { margin-top: 0; }
    .km-treasure-grid .km-treasure p.km-treasure__date { margin-top: 0.4em; flex-wrap: wrap; column-gap: 1em; row-gap: 0.2em; }
}

.km-heritage :is(h3, h4) { font-size: 1.08rem; color: var(--km-ink); margin: 0 0 0.75em; }
.km-heritage p  { font-size: 0.9rem; line-height: 2; color: var(--km-ink-2); margin: 0; }

/* 濃色面に置いた場合（下層ページなどで使うとき）の見た目も残しておく */
.km-sec--deep .km-heritage {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}
.km-sec--deep .km-heritage__tag { border-color: var(--km-gold-lite); color: var(--km-gold-lite); }
.km-sec--deep .km-heritage :is(h3, h4) { color: #fff; }
.km-sec--deep .km-heritage p  { color: rgba(255, 255, 255, 0.76); }

/* --- 07-6. ご見学の流れ -------------------------------------------------- */
.km-step { padding-top: 2.6em; position: relative; }
.km-step__no {
    position: absolute;
    top: 0; left: 0;
    font-family: var(--km-latin);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    color: var(--km-gold);
}
.km-step__no::after {
    content: "";
    display: block;
    min-width: 48px;
    height: 1px;
    margin-top: 0.9em;
    background: var(--km-line);
}
.km-step h3 { font-size: 1.04rem; margin: 0 0 0.7em; }
.km-step p  { font-size: 0.9rem; line-height: 2; color: var(--km-ink-2); margin: 0; }

/*
 * トップ「建立までの流れ」：縦に並ぶ7つのステップ（2026-11-04。前は横並びの4つのカード .km-step）。
 * 左に丸い番号、右に見出し・説明・確認する項目（丸いラベル）。番号の丸のあいだを細い線でつなぐ。
 * グループブロックは中間層（.wp-block-group__inner-container）を挟むことがあるので、両方の形に当てる。
 */
.km-flow { --km-flow-no: 64px; }
@media (max-width: 600px) { .km-flow { --km-flow-no: 52px; } }
.km-flow__step { position: relative; margin: 0 !important; padding-bottom: clamp(28px, 4vw, 40px); }
.km-flow__step:last-child { padding-bottom: 0; }
.km-flow__step > .wp-block-group__inner-container,
.km-flow__step:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: var(--km-flow-no) minmax(0, 1fr);
    column-gap: clamp(18px, 3vw, 32px);
    align-content: start;
}
.km-flow__step > .wp-block-group__inner-container > *,
.km-flow__step:not(:has(> .wp-block-group__inner-container)) > * {
    grid-column: 2;
    max-width: none;
    margin-inline: 0 !important;
}
/* 番号の丸のあいだの線 */
.km-flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--km-flow-no) / 2);
    top: var(--km-flow-no);
    bottom: 0;
    width: 1px;
    background: var(--km-gold-line);
    opacity: 0.55;
}
.km-flow .km-flow__no {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--km-flow-no);
    height: var(--km-flow-no);
    margin: 0 !important;
    border: 1px solid var(--km-gold-line);
    border-radius: 50%;
    background: var(--km-white);
    font-family: var(--km-latin);
    font-size: calc(var(--km-flow-no) * 0.36);
    line-height: 1;
    color: var(--km-accent);
}
.km-flow__no span {
    margin-bottom: 0.25em;
    font-size: 0.4em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--km-gold);
}
.km-flow .km-flow__title {
    margin: calc(var(--km-flow-no) / 2 - 0.75em) 0 0.45em;
    font-size: clamp(1.05rem, 1.6vw, 1.16rem);
    line-height: 1.5;
}
.km-flow__step p:not(.km-flow__no) { margin: 0; font-size: 0.92rem; line-height: 2; color: var(--km-ink-2); }
/* 確認する項目・ご用意いただくもの */
.km-flow .km-flow__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 0.6em;
    margin: 0.9em 0 0;
    padding: 0;
    list-style: none;
}
.km-flow__items li {
    margin: 0;
    padding: 0.35em 1em;
    border: 1px solid var(--km-line);
    border-radius: 999px;
    background: var(--km-white);
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--km-ink);
}

/* --- 07-7. アクセス ------------------------------------------------------ */
.km-access { display: grid; gap: clamp(26px, 3.5vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .km-access { grid-template-columns: 1.15fr 1fr; } }

.km-access__map { min-height: 340px; }
.km-access__map iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    filter: grayscale(0.2) contrast(1.02);
}
.km-access h3 { font-size: 1.12rem; margin: 0 0 1em; }

/*
 * 交通案内。
 * grid にすると <strong> と後続のテキストが別セルに入って崩れるため、
 * 素直に「左に余白＋点は絶対配置」で組む。
 */
.km-routes { list-style: none; margin: 0; padding: 0; }
.km-routes li {
    position: relative;
    padding: 0.9em 0 0.9em 1.4em;
    border-bottom: 1px solid var(--km-line-2);
    font-size: 0.93rem;
    line-height: 1.95;
    color: var(--km-ink-2);
}
.km-routes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.6em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--km-gold);
}
.km-routes strong {
    display: block;
    color: var(--km-ink);
    font-family: var(--km-mincho);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.1em;
}

/* --- 07-8. よくあるご質問 ------------------------------------------------ */
.km-faq { max-width: var(--km-w-read); margin-inline: auto; }
.km-faq details {
    border-bottom: 1px solid var(--km-line);
    background: transparent;
}
.km-faq details:first-of-type { border-top: 1px solid var(--km-line); }

/* flex にすると、質問の文と末尾の .km-nw（inc/linebreak.php）が別の行に分かれ、間に gap が空く。
   ふつうのブロックにして「Q」は左の余白に置く */
.km-faq summary {
    display: block;
    padding: 1.4em 2.6em 1.4em 1.82em;
    position: relative;
    cursor: pointer;
    list-style: none;
    font-family: var(--km-mincho);
    font-size: clamp(0.98rem, 2.6vw, 1.06rem);
    letter-spacing: 0.04em;
    line-height: 1.7;
    transition: color 0.25s var(--km-ease);
}
.km-faq summary::-webkit-details-marker { display: none; }
.km-faq summary:hover { color: var(--km-gold); }

.km-faq summary::before {
    content: "Q";
    position: absolute;
    top: calc(1.4em / 1.15); left: 0; /* summary の上の余白（1.4em）。ここは font-size 1.15em なので割り戻す */
    font-family: var(--km-latin);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--km-gold);
    line-height: 1.3;
}

/* 開閉の＋−記号 */
.km-faq summary::after {
    content: "";
    position: absolute;
    top: 50%; right: 4px;
    width: 14px; height: 14px;
    margin-top: -7px;
    background:
        linear-gradient(var(--km-ink-2), var(--km-ink-2)) center / 14px 1px no-repeat,
        linear-gradient(var(--km-ink-2), var(--km-ink-2)) center / 1px 14px no-repeat;
    transition: transform 0.3s var(--km-ease);
}
.km-faq details[open] summary::after {
    transform: rotate(90deg);
    background:
        linear-gradient(var(--km-gold), var(--km-gold)) center / 14px 1px no-repeat;
}

.km-faq__a {
    display: flex;
    gap: 0.9em;
    padding: 0 2.6em 1.7em 0;
    font-size: 0.94rem;
    line-height: 2.05;
    color: var(--km-ink-2);
}
.km-faq__a::before {
    content: "A";
    flex: none;
    font-family: var(--km-latin);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--km-ink-3);
    line-height: 1.5;
}

/* --- 07-9. ギャラリー ---------------------------------------------------- */
.km-gallery {
    display: grid;
    gap: clamp(8px, 1.2vw, 14px);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) { .km-gallery { grid-template-columns: repeat(3, 1fr); } }

.km-gallery figure { overflow: hidden; }
.km-gallery img {
    width: 100%; height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--km-ease);
}
.km-gallery a:hover img { transform: scale(1.05); }

/* --- 07-10. CTA ---------------------------------------------------------- */
/* フッターと同じ色にすると境目が消えるため、CTA は一段明るい緑にする */
.km-cta {
    position: relative;
    background: var(--km-deep);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.km-cta__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.km-cta__label {
    font-family: var(--km-latin);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--km-gold-lite);
    margin: 0 0 1.1em;
}
.km-cta h2 { font-size: clamp(1.35rem, 4vw, 2.05rem); color: #fff; margin: 0 0 0.85em; }
.km-cta p  { color: rgba(255, 255, 255, 0.8); line-height: 2.05; }

.km-cta__tel {
    margin-top: clamp(26px, 4vw, 40px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.km-cta__telLabel {
    margin: 0 0 0.4em;
    font-family: var(--km-mincho);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: var(--km-gold-lite);
}

/*
 * LP末尾の申込セクション。
 *
 * ここが最終的な申し込み口。濃い色で締めると重い印象になるため、
 * 明るい面のまま、白い紙（フォーム）を浮かせて視線を集める。
 */
.km-cta--form {
    background:
        linear-gradient(180deg, var(--km-paper-3) 0%, color-mix(in srgb, var(--km-paper-3) 40%, #fff) 60%, #fff 100%);
    color: var(--km-ink);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .km-cta--form { background: var(--km-paper-3); }
}

.km-cta--form .km-cta__label { color: var(--km-gold); }
.km-cta--form h2 { color: var(--km-ink); }
.km-cta--form p  { color: var(--km-ink-2); }

.km-cta--form .km-cta__tel {
    border-top-color: var(--km-line);
}
.km-cta--form .km-cta__telLabel { color: var(--km-gold); }
.km-cta--form .km-cta__num .km-tel { color: var(--km-accent); }
.km-cta--form .km-cta__num .km-tel:hover { color: var(--km-gold); }
/* 12px と小さいため、補助色ではなく本文の補助色を使う（4.5:1 確保） */
.km-cta--form .km-cta__note { color: var(--km-ink-2); }

.km-cta--form .km-form { margin-top: clamp(34px, 5vw, 56px); }
.km-cta--form .km-cta__inner { margin-bottom: 0; }

/*
 * CTA セクションは中央揃えだが、フォームの中身まで中央になると
 * ラベルと入力欄の対応が読み取りにくい。フォーム内は左揃えに戻す。
 * （送信ボタンだけは中央のまま）
 */
.km-cta--form .km-form,
.km-cta--form .km-consent { text-align: left; }
.km-cta--form .km-form .cf7-actions { text-align: center; }

/* フォームの紙は少し強めに浮かせて、申し込み口だと分かるようにする */
.km-cta--form .km-form__box {
    box-shadow: 0 24px 60px -34px rgba(23, 26, 25, 0.45);
    border-radius: var(--km-radius-2);
}
.km-cta--form .km-consent {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
    border-radius: var(--km-radius-2);
    color: var(--km-ink-2);
}
.km-cta__num { margin: 0; }
.km-cta__num .km-tel {
    font-family: var(--km-latin);
    font-size: clamp(1.7rem, 5.4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
}
.km-cta__num .km-tel:hover { color: var(--km-gold-lite); }
.km-cta__note {
    margin: 0.3em 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.65);
}

/* フォームページの電話欄 */
.km-form-tel {
    max-width: 820px;
    margin: clamp(28px, 4vw, 44px) auto 0;
    padding: clamp(22px, 3vw, 32px);
    text-align: center;
    background: var(--km-accent);
}
.km-form-tel__label {
    margin: 0 0 0.5em;
    font-family: var(--km-mincho);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--km-gold-lite);
}
.km-form-tel__num { margin: 0; }
.km-form-tel__num .km-tel {
    font-family: var(--km-latin);
    font-size: clamp(1.7rem, 6vw, 2.3rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
}
.km-form-tel__num .km-tel:hover { color: var(--km-gold-lite); }
.km-form-tel__note {
    margin: 0.5em 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.68);
}

/* --- 07-11. お知らせ ----------------------------------------------------- */
.km-news { max-width: var(--km-w-read); margin-inline: auto; list-style: none; padding: 0; margin-bottom: 0; }
.km-news li { border-bottom: 1px solid var(--km-line-2); }
.km-news a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.2em 1.6em;
    padding: 1.2em 0;
    text-decoration: none;
    color: var(--km-ink);
}
@media (min-width: 768px) { .km-news a { grid-template-columns: 8em 1fr; align-items: baseline; } }
.km-news time { font-family: var(--km-latin); font-size: 0.88rem; letter-spacing: 0.08em; color: var(--km-gold); }
.km-news span { font-size: 0.96rem; line-height: 1.8; }
.km-news a:hover span { color: var(--km-gold); text-decoration: underline; }


/* =============================================================================
   08. フォーム（Contact Form 7）
   ============================================================================= */

.km-form { max-width: 820px; margin-inline: auto; }
.km-form__box {
    background: var(--km-white);
    border: 1px solid var(--km-line-2);
    padding: clamp(24px, 4.5vw, 52px) clamp(18px, 3.5vw, 48px);
    box-shadow: 0 14px 40px -30px rgba(23, 26, 25, 0.4);
}
.km-form__note {
    font-size: 0.86rem;
    line-height: 1.95;
    color: var(--km-ink-3);
    margin: 0 0 2em;
    padding-bottom: 1.4em;
    border-bottom: 1px solid var(--km-line-2);
}

/* 入力行 */
.km-form .cf7-section {
    padding-block: clamp(16px, 2.4vw, 24px);
    border-bottom: 1px solid var(--km-line-2);
}
.km-form .cf7-section:last-of-type { border-bottom: 0; }

/* 「ご希望をお選びください」だけ目立たせる */
.km-form .cf7-section--kibou {
    background: var(--km-paper);
    border: 1px solid var(--km-gold-lite);
    border-top: 2px solid var(--km-gold);
    padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 26px);
    margin-bottom: clamp(8px, 1.4vw, 16px);
}

/*
 * 1項目 = .cf7-field。
 * 「項目名（.cf7-label）→ 入力欄」の縦並び。
 * 項目名の中に入力欄を入れない構造にしてあるので、CSS は単純で済む。
 */
.km-form .cf7-field { margin-bottom: 1.4em; }
.km-form .cf7-field:last-child { margin-bottom: 0; }

/*
 * 「お近くの町名から選ぶ」（site.js が「郵便番号」の見出しのすぐ下に作る select）。
 * ボタンに見えるようにして、押すとスマホ標準の選択画面がそのまま開く（2026-11-08）。
 */
.km-form .cf7-field--postal select.km-town-select {
    display: block;
    margin-bottom: 0.7em;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 0.7em 2.6em 0.7em 1.2em;
    font-family: var(--km-gothic);
    font-size: 1rem;
    font-weight: 500;
    color: var(--km-accent);
    background-color: var(--km-white);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.25em center, right 0.95em center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--km-accent);
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.km-form .cf7-field--postal select.km-town-select:hover { background-color: rgba(43, 88, 120, 0.06); }

.km-form .cf7-label {
    display: block;
    margin-bottom: 0.55em;
    font-family: var(--km-mincho);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--km-ink);
    line-height: 1.6;
}

.km-form .cf7-hint {
    font-size: 0.8rem;
    line-height: 1.85;
    color: var(--km-ink-3);
    font-family: var(--km-gothic);
    font-weight: 400;
    margin: 0;
}

/*
 * 必須のしるし。
 * form.txt が付ける .cf7-field--required を手がかりに、
 * 項目名の後ろへバッジを差し込む。項目を増やしても CSS の追記は不要。
 */
.km-form .cf7-field--required > .cf7-label::after {
    content: "必須";
    display: inline-block;
    margin-left: 0.7em;
    padding: 0.36em 0.7em;
    font-family: var(--km-gothic);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    vertical-align: 0.16em;
    color: #fff;
    background: #9c3b2e;
    border-radius: 2px;
}

.km-form input[type="text"],
.km-form input[type="email"],
.km-form input[type="tel"],
.km-form input[type="url"],
.km-form input[type="number"],
.km-form input[type="date"],
.km-form select,
.km-form textarea {
    width: 100%;
    padding: 0.85em 1em;
    font-family: inherit;
    /* 16px 未満にすると iOS が自動でズームするため下げない */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--km-ink);
    background: var(--km-paper);
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius);
    transition: border-color 0.25s var(--km-ease), background-color 0.25s var(--km-ease), box-shadow 0.25s var(--km-ease);
}
.km-form textarea { min-height: 9em; resize: vertical; }
.km-form input:focus,
.km-form select:focus,
.km-form textarea:focus {
    outline: none;
    background: var(--km-white);
    border-color: var(--km-accent);
    box-shadow: 0 0 0 3px rgba(43, 88, 120, 0.16);
}
/* 記入例（プレースホルダー）はブラウザ既定（#757575 前後）より一段薄く。入力欄を選んだら消す */
.km-form input::placeholder,
.km-form textarea::placeholder { color: #a6acb3; opacity: 1; }
.km-form input:focus::placeholder,
.km-form textarea:focus::placeholder { color: transparent; }

.km-form .wpcf7-list-item { margin: 0; display: block; }
.km-form .wpcf7-checkbox,
.km-form .wpcf7-radio { display: flex; flex-direction: column; gap: 0.6em; }
.km-form .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    font-family: var(--km-gothic);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.6;
    cursor: pointer;
}
.km-form input[type="checkbox"],
.km-form input[type="radio"] {
    flex: none;
    width: 19px; height: 19px;
    margin: 0.15em 0 0;
    accent-color: var(--km-accent);
    cursor: pointer;
}

/* 日付＋時刻の2列 */
.km-form .cf7-datetime-row > p { display: flex; gap: 0.75rem; margin: 0; }
.km-form .cf7-datetime-row .wpcf7-form-control-wrap { flex: 1 1 0; min-width: 0; }

.km-form .cf7-actions { margin-top: clamp(26px, 4vw, 40px); text-align: center; }
/* 送信ボタンの上の「営業・勧誘はご遠慮ください」（2026-11-08） */
.km-form .cf7-actions .cf7-hint { margin-bottom: 1em; }
/*
 * 送信ボタンの上の Turnstile（迷惑な自動送信の確認）。中身は Cloudflare の iframe なので色は変えられない。
 * theme:light（form.txt）で白地にし、ここでは中央寄せと、読み込み中に高さが跳ねない余白だけ持たせる（2026-11-08）
 */
.km-form .cf7-turnstile { margin: 0 0 0.8em; }
.km-form .cf7-turnstile .wpcf7-turnstile { display: flex; justify-content: center; min-height: 65px; }
.km-form input[type="submit"],
.km-form .wpcf7-submit {
    appearance: none;
    min-width: min(100%, 340px);
    min-height: 62px;
    padding: 1em 2.6em;
    font-family: var(--km-mincho);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: #fff;
    background: var(--km-accent);
    border: 1px solid var(--km-accent);
    border-radius: var(--km-radius);
    cursor: pointer;
    transition: background-color 0.3s var(--km-ease), transform 0.3s var(--km-ease);
}
.km-form input[type="submit"]:hover,
.km-form .wpcf7-submit:hover { background: var(--km-accent-hover); border-color: var(--km-accent-hover); transform: translateY(-2px); }

.km-form .wpcf7-spinner { display: block; margin: 1em auto 0; }
.km-form .wpcf7-not-valid { border-color: #9c3b2e; background: #fdf6f5; }
.km-form .wpcf7-not-valid-tip { display: block; margin-top: 0.5em; font-size: 0.82rem; color: #9c3b2e; }
.km-form .wpcf7-response-output {
    margin: 1.6em 0 0 !important;
    padding: 1.1em 1.3em !important;
    border-width: 1px !important;
    border-radius: var(--km-radius);
    font-size: 0.92rem;
    line-height: 1.9;
}
.km-form form.sent .wpcf7-response-output { border-color: #2f6b4f !important; background: #f2f8f4; color: #23503c; }
.km-form form.invalid .wpcf7-response-output,
.km-form form.failed .wpcf7-response-output,
.km-form form.aborted .wpcf7-response-output { border-color: #9c3b2e !important; background: #fdf6f5; color: #7d2f24; }

.km-consent {
    max-width: 820px;
    margin: clamp(22px, 3vw, 32px) auto 0;
    padding: 1.3em 1.5em;
    background: var(--km-paper-2);
    border: 1px solid var(--km-line-2);
    font-size: 0.86rem;
    line-height: 1.95;
    color: var(--km-ink-2);
}


/* =============================================================================
   09. フッター
   ============================================================================= */

.km-footer {
    background: var(--km-deep-2);
    color: rgba(255, 255, 255, 0.7);
    padding: clamp(48px, 7vw, 84px) var(--km-pad) clamp(24px, 3vw, 32px);
}
.km-footer__inner { max-width: var(--km-w); margin-inline: auto; }
.km-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.km-footer a:hover { color: var(--km-gold-lite); }

.km-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9em 2em;
    margin: 0 0 clamp(30px, 4vw, 46px);
    padding: 0 0 clamp(26px, 3.4vw, 38px);
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--km-mincho);
    font-size: 0.92rem;
    letter-spacing: 0.08em;
}

.km-footer__entity { text-align: center; font-size: 0.9rem; line-height: 2; }
/* 墓地販売の会社の公式サイトへのリンク（補足の下） */
.km-footer__entity .km-footer__company { margin-top: -0.4em; font-size: 0.84rem; }
.km-footer__company a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(255, 255, 255, 0.4); }
.km-footer__company a:hover { text-decoration-color: currentColor; }
.km-footer__ext { margin-left: 0.3em; font-size: 0.9em; }
.km-footer__name {
    font-family: var(--km-mincho);
    font-size: 1.06rem;
    letter-spacing: 0.14em;
    color: #fff;
    margin: 0 0 0.5em;
}
.km-footer__tel {
    display: inline-block;
    margin-top: 1.2em;
    font-family: var(--km-latin);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
}

.km-footer__hours {
    margin: 0.4em 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.km-footer__copy {
    margin: clamp(28px, 3.4vw, 40px) 0 0;
    padding-top: 1.4em;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}


/* =============================================================================
   10. 下層ページ・404
   ============================================================================= */

/* 下層のページヘッダー */
.km-pagehead {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(240px, 34vh, 380px);
    padding: calc(var(--km-header-h) + 40px) var(--km-pad) 40px;
    background: var(--km-deep);
    text-align: center;
    overflow: hidden;
}
.km-pagehead__media { position: absolute; inset: 0; z-index: 0; }
.km-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/*
 * 帯写真の上の幕。藍寄りに振ってページ全体の色みと揃えている。
 * 濃度 0.68 は、担当者が明るい写真に差し替えても
 * 上の小さいラベル（淡い金）が 4.5:1 を保てる下限。薄くしないこと。
 */
.km-pagehead__media::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(18, 30, 43, 0.68);
}
.km-pagehead__inner { position: relative; z-index: 1; color: #fff; }
.km-pagehead__label {
    font-family: var(--km-latin);
    font-size: 0.74rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--km-gold-lite);
    margin: 0 0 0.9em;
}
.km-pagehead__title {
    font-size: clamp(1.5rem, 5vw, 2.3rem);
    letter-spacing: 0.13em;
    color: #fff;
    margin: 0;
    /* 折り返すときは行の長さをそろえ、最後の行に1〜2文字だけ残らないようにする */
    text-wrap: balance;
}
/* 幅の狭いスマホでは字間を詰め、「プライバシーポリシー」などが1行に収まるようにする */
@media (max-width: 400px) {
    .km-pagehead__title { letter-spacing: 0.06em; }
}

/* パンくず */
.km-crumb {
    max-width: var(--km-w);
    margin-inline: auto;
    padding: 1.1em var(--km-pad);
    font-size: 0.78rem;
    color: var(--km-ink-3);
}
.km-crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.km-crumb__item + .km-crumb__item::before { content: "／"; margin-right: 0.5em; color: var(--km-line); }
.km-crumb a { color: var(--km-ink-2); text-decoration: none; }
.km-crumb a:hover { color: var(--km-gold); text-decoration: underline; }

/* 本文（固定ページ・お知らせ） */
.km-entry { max-width: var(--km-w-read); margin-inline: auto; }
.km-entry h2 {
    font-size: clamp(1.3rem, 3.6vw, 1.7rem);
    margin: 2.6em 0 0.9em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--km-line);
}
.km-entry h3 {
    font-size: clamp(1.08rem, 2.8vw, 1.26rem);
    margin: 2.3em 0 0.8em;
    padding-left: 0.7em;
    border-left: 3px solid var(--km-gold);
}
.km-entry > :first-child { margin-top: 0; }
.km-entry p { line-height: 2.1; color: var(--km-ink-2); }
.km-entry img { margin-block: 1.6em; }

/*
 * 資料の紙面（寺院紹介の『新編武蔵風土記稿』）。
 * 浮世絵の作品紹介と同じく台紙に載せて「資料」であることが伝わるようにする。
 * 紙面は縦に長いので本文の幅いっぱいには広げない（広げると一画面を超える）。
 * 細かい字は、押すと別のタブで開く原寸の画像で読んでもらう。
 */
.km-entry .km-doc {
    max-width: 440px;
    margin: 0 auto 2.6em;
}
.km-doc > a {
    display: block;
    padding: clamp(8px, 1.4vw, 14px);
    background: var(--km-white);
    border: 1px solid var(--km-line-2);
    cursor: zoom-in;
}
.km-entry .km-doc img { display: block; width: 100%; height: auto; margin: 0; }
.km-doc > a:hover { border-color: var(--km-gold); }
/* 余白を透過にした画像（本所絵図）は、白い台紙を敷かずに紙の形のまま見せる（2026-11-04） */
.km-doc.km-doc--clear > a { padding: 0; background: transparent; border: 0; }
.km-doc.km-doc--clear img { filter: drop-shadow(0 10px 18px rgba(23, 26, 25, 0.22)); }
.km-doc figcaption {
    margin: 0.9em 0 0;
    font-size: 0.76rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--km-ink-3);
}
.km-doc figcaption a { color: inherit; }

/* 年表 */
.km-chrono { max-width: var(--km-w-read); margin-inline: auto; list-style: none; padding: 0; position: relative; }
.km-chrono::before {
    content: "";
    position: absolute;
    left: 0.42em; top: 0.9em; bottom: 0.9em;
    width: 1px;
    background: var(--km-line);
}
.km-chrono li { position: relative; display: grid; gap: 0.25em; padding: 0 0 2em 2.2em; }
.km-chrono li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--km-paper);
    border: 2px solid var(--km-gold);
}
.km-chrono__year { font-family: var(--km-mincho); font-size: 0.94rem; letter-spacing: 0.06em; color: var(--km-gold); }
.km-chrono__text { font-size: 0.93rem; line-height: 2; color: var(--km-ink-2); }

@media (min-width: 1024px) {
    .km-chrono::before { left: 9.42em; }
    .km-chrono li { grid-template-columns: 9em 1fr; gap: 0 3em; padding-left: 0; }
    .km-chrono li::before { left: 9em; }
    .km-chrono__year { text-align: right; }
}

/*
 * 寺院紹介の年表：巻物風の縦書き（2026-11-04）。
 * 表ブロックに km-emaki を付けると、表ごと縦書き（右から左）になり、行が横に並んで横スクロールになる。
 * 1行（年・できごと）が縦の1列。左右の太い縁が巻物の軸、地は和紙の色。
 * 縦方向のホイールは横スクロールに置きかえる（assets/js/site.js 4）。
 */
.km-emaki__hint {
    margin: 0 auto 0.9em;
    max-width: var(--km-w);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-align: right;
    color: var(--km-ink-3);
}
.km-emaki__hint::before { content: "← "; color: var(--km-gold); }
/*
 * 巻物の飾り（2026-11-04）。表ブロックを包むグループ（km-emaki-wrap）に付ける。
 * 枠（.km-emaki）はグループの内容幅いっぱいに広げ、飾りはその外側にくっつける。
 * 左＝巻いてある部分の筒と、上下に突き出た軸。右＝読みはじめの端から垂れる紐。
 * 枠はスクロールする箱なので、飾りは外側の箱の ::before（筒と軸）・::after（紐）に描く。
 * 飾りはセクションの左右の余白に置く。余白が狭い画面では、横にはみ出さない大きさまで小さくする
 * （紐は余白が足りないと描かない）。
 */
.km-emaki-wrap {
    /* 枠の外の余白。100vw はスクロールバーを含むので少し差し引く */
    --km-emaki-side: max(var(--km-pad), calc((100vw - var(--km-w)) / 2 - 10px));
    --km-emaki-roll: min(76px, calc(var(--km-emaki-side) + 12px));  /* 筒の太さ（枠の左の縁 12px に重ねる） */
    --km-emaki-rod: 20px;    /* 軸が上下に突き出る長さ */
    --km-emaki-cord: min(80px, calc(var(--km-emaki-side) - 4px));   /* 紐の幅 */
    position: relative;
    box-sizing: border-box;
    /* 幅はセクション（グループ）の内容幅 max-width をそのまま受ける */
    width: 100%;
    margin: 0 auto;
    padding-block: var(--km-emaki-rod);
    /*
     * 枠の外側の暗い細い線（3px）。枠には右端を消すマスクをかけているため、枠の box-shadow は表示されない。
     * そこで、枠より 3px 大きい暗い四角を、この箱の背景として枠のうしろに敷く。
     */
    --km-emaki-edge: 22px;   /* 表装の縁の幅（枠の border と同じ） */
    background:
        /* 紙のうしろにも和紙の色を敷く。右端で紙が透明になっても、文字だけが消えて見える */
        linear-gradient(#fbf8f1, #fbf8f1) 12px var(--km-emaki-edge) / calc(100% - 12px - var(--km-emaki-edge)) calc(100% - 2 * var(--km-emaki-edge)) no-repeat,
        linear-gradient(#2b2117, #2b2117) -3px -3px / calc(100% + 6px) calc(100% + 6px) no-repeat;
    background-origin: content-box;
    background-clip: padding-box;
    /* 巻物全体の下の影（マスクで消える枠の影の代わり） */
    filter: drop-shadow(0 10px 12px rgba(22, 25, 28, 0.22));
}

.km-emaki-wrap > .wp-block-group__inner-container { position: static; }
.km-emaki-wrap .wp-block-table.km-emaki { max-width: none; }
/* 筒（上の層）と軸（下の層）。軸は筒の上下に突き出る */
.km-emaki-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(12px - var(--km-emaki-roll));
    width: var(--km-emaki-roll);
    border-radius: 6px;
    background:
        linear-gradient(90deg, #3b2d1f 0%, #6e573c 34%, #8a6e4d 48%, #634d35 68%, #3b2d1f 100%)
            center / 100% calc(100% - 2 * var(--km-emaki-rod) + 6px) no-repeat,
        linear-gradient(90deg, #241b13, #4a3a2a 45%, #241b13)
            center / 22% 100% no-repeat;
    /*
     * 影は紙と文字の上に落とす（筒は枠より手前）。近くの濃い影と、遠くまで伸びる薄い影を重ね、
     * 文字が筒の下から出てくるように見せる
     */
    filter:
        drop-shadow(4px 0 4px rgba(22, 16, 10, 0.55))
        drop-shadow(12px 0 14px rgba(22, 16, 10, 0.35))
        drop-shadow(26px 0 24px rgba(22, 16, 10, 0.18));
    pointer-events: none;
    /* 枠（表示演出で transform がかかる）より手前に描く。後ろだと筒の右端が枠に隠れ、軸が右に寄って見える */
    z-index: 1;
}
/* 紐（枠の右の縁から外へ垂れる） */
.km-emaki-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--km-emaki-cord));
    width: var(--km-emaki-cord);
    height: calc(var(--km-emaki-cord) * 2.75);
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 220'%3E%3Cpath d='M3 110 C12 113 18 110 26 106 C36 101 38 98 44 86 C52 72 52 60 46 46 C40 32 38 28 42 18 C46 6 60 4 68 10 C76 16 74 26 76 36 C78 46 72 50 72 62 C72 74 62 86 56 100 C50 114 46 120 42 128 C36 138 32 140 30 150 C28 160 34 166 36 176 C38 186 44 186 52 190 C62 194 66 192 74 184 C80 178 78 168 78 160' fill='none' stroke='%2343362a' stroke-width='4.5' stroke-linecap='round'/%3E%3Crect x='0' y='103' width='9' height='14' rx='2.5' fill='%2343362a'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
@media (max-width: 600px) {
    .km-emaki-wrap { --km-emaki-rod: 14px; --km-emaki-edge: 16px; }
    .km-emaki-wrap::after { display: none; }
}
.wp-block-table.km-emaki {
    --km-emaki-paper: #fbf8f1;
    --km-emaki-axis: #5a4630;
    box-sizing: border-box;
    margin: 0 auto;
    /* 縦書きの枠は、横幅が中身から決まってしまうので、親の幅に明示的に合わせる */
    width: 100%;
    max-width: var(--km-w);
    /* 上・右・下の表装の縁（22px × 2）の分だけ高くして、紙の高さを保つ */
    height: clamp(534px, calc(62vh + 104px), 624px);  /* 説明が縦に長く入るよう 60px 高くした（2026-11-04） */
    writing-mode: vertical-rl;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background:
        /* 紙の左端（筒に巻き込まれる側）を暗くする。右端はうっすら */
        linear-gradient(90deg, rgba(60, 44, 28, 0.30), rgba(60, 44, 28, 0.08) 40px, transparent 90px, transparent calc(100% - 18px), rgba(90, 70, 48, 0.10)),
        var(--km-emaki-paper);
    /*
     * 表装の縁（2026-11-04）。上・右・下に格子模様の縁を付ける（見本 files/巻物.pdf）。
     * 左は巻き軸がかぶさるので模様を付けない（幅 12px は巻き軸の下に隠れる）。
     * 縁はスクロールする範囲の外なので、年表を送っても動かない。
     */
    border-style: solid;
    border-color: var(--km-emaki-axis);
    border-width: 22px 22px 22px 12px;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(0 24)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(0 48)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(24 0)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(24 24)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(24 48)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(48 0)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(48 24)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3Cg transform='translate(48 48)'%3E%3Cpath d='M0 0h24v24H0z' fill='%234a3a29'/%3E%3Cpath d='M3 0v24' stroke='%23a38a5e' stroke-width='2.2'/%3E%3Cpath d='M7 3l14 18M7 21L21 3' stroke='%23a38a5e' stroke-width='2.2' stroke-linecap='square'/%3E%3C/g%3E%3C/svg%3E") 24 / 22px 22px 22px 0 / 0 round;
    /* 紙の内側の左右の余白（右＝読みはじめの端、左＝巻き軸の側）。2026-11-04 */
    padding-right: 1rem;
    padding-left: 3rem;
    border-radius: 2px;
    box-shadow:
        inset 0 2px 0 var(--km-gold-line),
        inset 0 -2px 0 var(--km-gold-line),
        inset -2px 0 0 var(--km-gold-line);
    scrollbar-color: var(--km-gold-line) transparent;
    scrollbar-width: thin;
    /*
     * 右端（読みはじめの側）の境界で、文字が透明になって消えていくようにする。
     * 表装の縁は消さず、紙の中（padding-box）の右端 20px だけを透明にする（読みはじめの行は右端から約23px内側にあり、消えない）。
     * 重ね方：下から「枠全体」「紙の中」を引き算して縁だけ残し、その上に「右端が透明な紙の中」を足す。
     * 対応していないブラウザでは、ふつうに（消えずに）表示されるだけ。
     */
    -webkit-mask:
        linear-gradient(to left, transparent 0, #000 20px) padding-box,
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: source-over, xor;
    mask:
        linear-gradient(to left, transparent 0, #000 20px) padding-box,
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0) border-box;
    mask-composite: add, exclude;
}
/* マウスでつかんで動かせることを示す。動かしている間は文字を選択しない */
@media (hover: hover) and (pointer: fine) {
    .wp-block-table.km-emaki { cursor: grab; }
}
.wp-block-table.km-emaki.is-dragging { cursor: grabbing; user-select: none; }
/* キーボードで選んだときの枠線。枠にはマスクがかかっていて枠線が見えないので、外側の箱に出す */
.wp-block-table.km-emaki:focus-visible { outline: none; }
.km-emaki-wrap:has(.km-emaki:focus-visible) { outline: 2px solid var(--km-accent); outline-offset: 2px; }
/*
 * 題「光明寺年表」（表ブロックのキャプション）。巻物のいちばん右（読みはじめ）に大きな筆文字で置く。
 * 枠を縦書きのフレックスにして（並ぶ向きは右から左）、キャプションを先頭に回す。
 */
.wp-block-table.km-emaki { display: flex; flex-direction: column; }
.wp-block-table.km-emaki > table { flex: none; }
.wp-block-table.km-emaki > figcaption {
    order: -1;
    flex: none;
    margin: 0;
    padding: 1.4rem 1.6rem 1.4rem 1.8rem;
    /* 題だけ毛筆体（Yuji Boku。題の5文字だけ読み込む。inc/enqueue.php） */
    font-family: "Yuji Boku", "Yuji Syuku", var(--km-mincho);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4em;
    text-align: center;
    color: var(--km-ink);
    border-left: 1px solid rgba(130, 99, 44, 0.35);
}
.wp-block-table.km-emaki table {
    height: 100%;
    width: auto;
    border-collapse: collapse;
    /* 年表の中だけ筆文字（Yuji Syuku。寺院紹介ページでだけ読み込む。inc/enqueue.php）。太さは1種類なので太字にしない */
    font-family: "Yuji Syuku", var(--km-mincho);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.08em;
}
.wp-block-table.km-emaki td {
    border: 0;
    border-block-start: 1px solid rgba(130, 99, 44, 0.22);
    padding: 0.3rem 0.7em;
    line-height: 1.9;
    /* 縦書きの表では vertical-align が左右の位置に効く。列の幅の中で左右中央にそろえる */
    vertical-align: middle;
    color: var(--km-ink-2);
    background: transparent;
    white-space: normal;
}
.wp-block-table.km-emaki tr:first-child td { border-block-start: 0; }
/* 年（上の段）。行ごとに高さをそろえ、できごとの書き出しの位置を合わせる */
/*
 * 1行目が元号、2行目（改行のあと）が西暦。西暦は小さく添えるので、欄の文字は西暦の大きさにし、
 * 1行目だけ ::first-line で元号の大きさにする（本文に印を付けずに済み、表ブロックの編集をそのままにできる）。
 * 欄の長さ（縦）は「昭和二十一年」など6文字の元号と、（一五五五）などの西暦が1行に収まる長さ
 * （「慶応四年・明治元年」や、年の幅がある西暦など、それより長いものは折り返す）。
 * 大きさの違う2行があるので rem で決める。
 */
.wp-block-table.km-emaki td:first-child {
    inline-size: 7.6rem;
    padding-top: 0.7rem;
    padding-block-end: 0.25em;
    /* 西暦の大きさ。「（一六八八〜一七〇三）」のような期間も1列に収まるよう、小さくして字間を詰める */
    font-size: 0.6rem;
    /* 和暦と西暦の行の間（縦書きなので左右の間）。詰めて、ひとまとまりに見せる */
    line-height: 1.45;
    letter-spacing: -0.04em;
    font-weight: 400;
    color: var(--km-accent);
    border-inline-end: 0;
    background: transparent;
}
.wp-block-table.km-emaki td:first-child::first-line { font-size: 0.9rem; line-height: 1.45; letter-spacing: 0.02em; }
.wp-block-table.km-emaki td:last-child { inline-size: auto; padding-block-start: 0.35em; padding-bottom: 0.3rem; }
@media (max-width: 600px) {
    .wp-block-table.km-emaki {
        height: 552px;
        border-width: 16px 16px 16px 12px;
        border-image-width: 16px 16px 16px 0;
    }
    .wp-block-table.km-emaki table { font-size: 0.92rem; }
    .wp-block-table.km-emaki > figcaption { padding: 1rem 1.1rem 1rem 1.3rem; font-size: 1.7rem; }
    .wp-block-table.km-emaki td:first-child { inline-size: 7.1rem; font-size: 0.56rem; }
    .wp-block-table.km-emaki td:first-child::first-line { font-size: 0.82rem; }
}

/* 文化財一覧 */
.km-treasures {
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--km-line-2);
    border: 1px solid var(--km-line-2);
}
@media (min-width: 640px)  { .km-treasures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .km-treasures { grid-template-columns: repeat(3, 1fr); } }
.km-treasures li { background: var(--km-white); padding: 1.4em 1.5em; }
.km-treasures__name { display: block; font-family: var(--km-mincho); font-size: 1.02rem; letter-spacing: 0.05em; margin-bottom: 0.35em; }
.km-treasures__note { display: block; font-size: 0.82rem; color: var(--km-ink-3); line-height: 1.8; }

/* 概要テーブル */
.km-table-scroll { max-width: var(--km-w-read); margin-inline: auto; overflow-x: auto; }
.km-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.km-table th, .km-table td {
    padding: 1em 1.2em;
    border-bottom: 1px solid var(--km-line-2);
    text-align: left;
    vertical-align: top;
    line-height: 1.95;
}
.km-table th {
    width: 9em;
    font-family: var(--km-mincho);
    font-weight: 600;
    letter-spacing: 0.08em;
    background: var(--km-paper-2);
    white-space: nowrap;
}
.km-table td { color: var(--km-ink-2); }
@media (max-width: 768px) {
    .km-table { font-size: 0.88rem; }
    .km-table th { width: 7em; padding-inline: 0.9em; }
}

/* 物語（樹木葬「紫苑」の由来）。読み物なので明朝で、段落の間を広めにとる */
.km-story p { font-family: var(--km-mincho); line-height: 2.2; }
.km-story .km-story__note { font-family: var(--km-gothic); font-size: 0.82rem; line-height: 1.9; color: var(--km-ink-3); }

/* 原文（詳細ブロックで折りたたむ） */
.km-original.wp-block-details {
    margin: clamp(26px, 3.4vw, 38px) 0 0;
    border-top: 1px solid var(--km-line);
    border-bottom: 1px solid var(--km-line);
}
.km-original > summary {
    padding: 1.1em 0;
    cursor: pointer;
    font-family: var(--km-mincho);
    letter-spacing: 0.08em;
    color: var(--km-accent);
}
.km-original > summary:hover { color: var(--km-gold); }
.km-original > p { font-family: var(--km-mincho); font-size: 0.92rem; line-height: 2.1; }
.km-original > p:last-child { padding-bottom: 1.4em; }
.km-original .km-original__note { font-family: var(--km-gothic); font-size: 0.78rem; line-height: 1.8; color: var(--km-ink-3); }
/* 出典は本文の明朝に揃えない。原文の下罫と二重にならないよう、上の罫は引かない */
.km-story .km-sources { font-family: var(--km-gothic); }
.km-original + .km-sources { margin-top: 1.4em; padding-top: 0; border-top: 0; }

/* 萱草と紫苑のカードの下の結び */
.km-plants-coda { margin-top: clamp(36px, 5vw, 60px); }

/*
 * 樹木葬「紫苑」の名前の由来のページ（セクションに .km-shion を付ける）。
 *
 * 和の飾りとして、紫苑の小紋（assets/img/shion-mark.svg。当サイトで作成）と、
 * 江戸後期の本草書『本草図譜』の図（パブリックドメイン）を使う。
 * 紫苑色は小紋の中だけで使い、文字や面の色には使わない（色の決まりは docs/claude/04 §0）。
 */

/* 見出しの下の金の罫を、紫苑の小紋をはさんだ罫に替える */
.km-shion .km-head__title::after,
.km-shion .km-story::after {
    width: 132px;
    height: 20px;
    opacity: 1;
    background:
        url("../img/shion-mark.svg") center / 20px 20px no-repeat,
        linear-gradient(var(--km-gold-line), var(--km-gold-line)) left center / 48px 1px no-repeat,
        linear-gradient(var(--km-gold-line), var(--km-gold-line)) right center / 48px 1px no-repeat;
}
/* 物語の結びにも同じ飾りを置く */
.km-shion .km-story::after {
    content: "";
    display: block;
    margin: clamp(36px, 5vw, 56px) auto 0;
}

/* 結びの文の上の縦線も、小紋ひとつに替える */
.km-shion .km-plants-coda::before {
    width: 20px;
    height: 20px;
    margin-bottom: clamp(18px, 2.6vw, 26px);
    background: url("../img/shion-mark.svg") center / contain no-repeat;
}

/* 図譜の図（写真ではないので切り取らずに台紙に載せる）。縦に長いので高さを抑え、台紙を図の幅に合わせる */
.km-plate.wp-block-media-text .wp-block-media-text__media {
    justify-self: center;
    width: fit-content;
    max-width: 100%;
}
.km-plate.wp-block-media-text .wp-block-media-text__media img {
    width: auto;
    max-width: 100%;
    max-height: 640px;
    margin-inline: auto;
}
/* スマホでは図が本文の上に来るので、本文が遠くならないよう低めにする */
@media (max-width: 767px) {
    .km-plate.wp-block-media-text .wp-block-media-text__media img { max-height: 460px; }
}
.km-split .km-plate__name {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin: 0 0 0.5em;
    font-family: var(--km-mincho);
    font-size: clamp(1.7rem, 4.6vw, 2.4rem);
    letter-spacing: 0.16em;
    line-height: 1.3;
    color: var(--km-ink);
}
.km-split .km-plate__name::before {
    content: "";
    flex: none;
    width: 0.95em;
    height: 0.95em;
    background: url("../img/shion-mark.svg") center / contain no-repeat;
}

/* 萱草と紫苑のカードの図。紙の色の地に置き、花が見えるよう上寄せで収める */
.km-plant .km-plant__img {
    margin: 0 0 1.4em;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--km-radius);
    background: #efe8d6;
}
.km-plant .km-plant__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* 出典 */
.km-sources {
    max-width: var(--km-w-read);
    margin: clamp(30px, 4vw, 46px) auto 0;
    padding-top: 1.4em;
    border-top: 1px solid var(--km-line-2);
    font-size: 0.78rem;
    line-height: 1.9;
    color: var(--km-ink-3);
}
.km-sources a { color: inherit; }

/* 出典・参考資料の一覧（寺院紹介ページ #sources） */
.km-source-groups h3 {
    margin: 2.2em 0 0.8em;
    font-size: 1rem;
}
.km-source-groups h3:first-child { margin-top: 0; }
.wp-block-list.km-source-list {
    margin: 0;
    padding-left: 1.2em;
    font-size: 0.86rem;
    line-height: 1.85;
    color: var(--km-ink-2);
}
.wp-block-list.km-source-list li + li { margin-top: 0.7em; }
.wp-block-list.km-source-list a { overflow-wrap: anywhere; }
.km-source-list__note { font-size: 0.92em; color: var(--km-ink-3); }

/* 写真クレジット */
.km-credit { font-size: 0.72rem; color: var(--km-ink-3); letter-spacing: 0.02em; }

/* 404 */
.km-404 { display: grid; place-items: center; min-height: 60vh; padding-top: var(--km-header-h); text-align: center; }

.km-404__tel {
    margin: clamp(30px, 4vw, 44px) 0 0;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    color: var(--km-ink-3);
}
.km-404__tel .km-tel {
    display: block;
    margin: 0.4em 0 0.2em;
    font-family: var(--km-latin);
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--km-accent);
    text-decoration: none;
}
.km-404__tel .km-tel:hover { color: var(--km-gold); }
.km-404__tel span { display: block; font-size: 0.78rem; }


/* =============================================================================
   11. コアブロックとの調整

   セクションはブロックエディタの「グループ」「カラム」で組んである。
   WordPress が自動で付けるレイアウト用クラス（is-layout-constrained など）と
   噛み合うように、ここで最小限の調整をしている。
   ============================================================================= */

/* the_content() が出す本文はページ幅いっぱいに流す（余白はセクション側が持つ） */
.km-article > .km-sec,
.km-main > .km-sec { margin-block: 0; }

/* グループで作ったセクションが縦に隙間なく並ぶように */
.km-sec + .km-sec { margin-top: 0; }

/* 見出しのかたまり（グループ）に既定マージンが付かないように */
.km-sec .km-head { margin-top: 0; }

/* カード列（カラムブロック） */
.km-cards.wp-block-columns {
    gap: clamp(20px, 3vw, 32px);
    flex-wrap: wrap;
    margin-block: 0;
}
.km-cards .wp-block-column {
    display: flex;
    flex-direction: column;
    /* 3列でも2列でも破綻しない下限 */
    flex-basis: 260px;
}
/* カード本体はカラムいっぱいに伸ばして高さを揃える */
.km-cards .km-reason,
.km-cards .km-plot,
.km-cards .km-heritage,
.km-cards .km-step { flex: 1; width: 100%; margin-block: 0; }

/*
 * グループブロックは、環境によって .wp-block-group__inner-container を
 * 1枚挟むことがある。挟まれると flex の親子関係が切れて
 * 「価格欄をカード下端に揃える」といった指定が効かなくなるため、
 * その中間層も同じ flex コンテナとして扱う。
 */
.km-plot > .wp-block-group__inner-container,
.km-plot__body > .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

/* カード内の画像ブロック */
.km-plot .wp-block-image {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.km-plot > .wp-block-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--km-ease);
}
.km-plot:hover > .wp-block-image img { transform: scale(1.05); }

/* 写真＋文章（メディアと文章ブロック） */
.km-split.wp-block-media-text {
    gap: clamp(28px, 4.5vw, 60px);
    align-items: center;
    margin-block: 0;
}
.km-split.wp-block-media-text .wp-block-media-text__media { position: relative; overflow: hidden; }
.km-split.wp-block-media-text .wp-block-media-text__media img { transition: transform 1.2s var(--km-ease); }
.km-split.wp-block-media-text .wp-block-media-text__media:hover img { transform: scale(1.04); }
.km-split.wp-block-media-text .wp-block-media-text__media::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34%; height: 3px;
    background: var(--km-gold);
}
/*
 * 浮世絵などの資料図版。写真と違い、切り取らずに全体を見せる。
 * 金の帯は写真用の装飾なので付けない。
 */
.km-split--art.wp-block-media-text .wp-block-media-text__media {
    background: var(--km-paper-2);
    padding: clamp(10px, 1.6vw, 18px);
    border: 1px solid var(--km-line-2);
}
.km-split--art.wp-block-media-text .wp-block-media-text__media::after { display: none; }
.km-split--art.wp-block-media-text .wp-block-media-text__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.km-split--art.wp-block-media-text .wp-block-media-text__media:hover img { transform: none; }

.km-split.wp-block-media-text .wp-block-media-text__content { padding-inline: 0; }
@media (min-width: 1024px) {
    .km-split.wp-block-media-text .wp-block-media-text__content { padding-inline: clamp(8px, 2vw, 28px); }
}
/*
 * 1024px 未満では .km-split が 1 列指定になる一方、メディアと文章ブロックは本文を 2 列目に置くため、
 * 列幅をインラインで指定していないブロック（寺院紹介の国貞の節など）で図版の列が潰れていた。
 * その幅では図版の下に本文を積む。列幅をインライン指定しているブロック（トップの光明寺について）は対象外。
 */
@media (max-width: 1023px) {
    .km-split.wp-block-media-text:not([style*="grid-template-columns"]) .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
    .km-split.wp-block-media-text:not([style*="grid-template-columns"]) .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
}

/* ギャラリーブロックを確実に3列（スマホ2列）にする */
.km-sec .wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    margin-block: 0;
}
@media (min-width: 1024px) {
    .km-sec .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); }
}
.km-sec .wp-block-gallery.has-nested-images > .wp-block-image {
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
    overflow: hidden;
}
.km-sec .wp-block-gallery.has-nested-images > .wp-block-image a { display: block; height: 100%; }
.km-sec .wp-block-gallery.has-nested-images img {
    width: 100%; height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--km-ease);
}
.km-sec .wp-block-gallery.has-nested-images > .wp-block-image:hover img { transform: scale(1.05); }

/*
 * 写真に名前を添えるギャラリー（寺院紹介の「境内のようす」「境内の文化財」）。
 * コアのギャラリーはキャプションを写真の上に黒い帯で重ねるが、
 * このサイトでは写真の下に置く（写真を暗くしない）。
 * コアの切り抜き指定は :not(#individual-image) で詳細度を上げているため、同じ形で上書きする。
 */
.km-sec .wp-block-gallery.km-photos > .wp-block-image { overflow: visible; }
.km-sec .wp-block-gallery.km-photos > .wp-block-image::before { content: none; }
.km-sec .wp-block-gallery.km-photos figure.wp-block-image:not(#individual-image) img {
    flex: none;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--km-radius-2);
    transition: none;
}
.km-sec .wp-block-gallery.km-photos > .wp-block-image:hover img { transform: none; }
.km-sec .wp-block-gallery.km-photos figure.wp-block-image figcaption {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    margin: 0.7em 0 0;
    font-size: 0.86rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--km-ink-2);
    text-shadow: none;
}
.km-sec .wp-block-gallery.km-photos { row-gap: clamp(18px, 2.4vw, 28px); }

/* 縦長の写真（文化財）。4列（スマホ2列） */
/* 縦に切り詰める分は、塔や碑の頭が切れないよう上を少なめにする */
.km-sec .wp-block-gallery.km-photos--portrait figure.wp-block-image:not(#individual-image) img { aspect-ratio: 3 / 4; object-position: 50% 25%; }
@media (min-width: 768px) {
    .km-sec .wp-block-gallery.km-photos--portrait { grid-template-columns: repeat(4, 1fr); }
}
.km-sec .wp-block-gallery.km-photos--portrait { margin-block-end: clamp(32px, 4vw, 48px); }

/* ボタン（ボタンブロック） */
.wp-block-buttons.km-actions { margin-block: clamp(30px, 4vw, 46px) 0; }
/* ボタンの文字が折り返すときは行の長さをそろえ、最後の行に1〜2文字だけ残らないようにする */
.km-btn,
.wp-block-button.km-btn-wrap > .wp-block-button__link { text-wrap: balance; }
.wp-block-button.km-btn-wrap > .wp-block-button__link {
    /* .km-btn と同じ見た目にする */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0.9em 2.3em;
    border: 1px solid var(--km-accent);
    border-radius: var(--km-radius);
    background: var(--km-accent);
    color: #fff;
    font-family: var(--km-mincho);
    font-size: clamp(0.94rem, 2.4vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.3s var(--km-ease), transform 0.3s var(--km-ease);
}
.wp-block-button.km-btn-wrap > .wp-block-button__link:hover {
    background: var(--km-accent-hover);
    border-color: var(--km-accent-hover);
    transform: translateY(-2px);
}
.wp-block-button.km-btn-wrap.km-btn--gold > .wp-block-button__link {
    background: var(--km-accent);
    border-color: var(--km-accent);
}
.wp-block-button.km-btn-wrap.km-btn--gold > .wp-block-button__link:hover { background: var(--km-accent-hover); border-color: var(--km-accent-hover); }
.wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link {
    background: transparent;
    color: var(--km-ink);
    border-color: rgba(23, 26, 25, 0.3);
}
.wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link:hover {
    background: var(--km-ink); border-color: var(--km-ink); color: #fff;
}
.km-sec--deep .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link,
.km-cta .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}
.km-sec--deep .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link:hover,
.km-cta .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link:hover {
    background: #fff; border-color: #fff; color: var(--km-deep);
}

/*
 * 浮世絵の作品紹介。
 * 写真と違い、切り取らずに全体を見せる。台紙に載せた見え方にして
 * 「資料」であることが伝わるようにする。
 */
.km-work { height: 100%; }

.km-work .km-work__img {
    margin: 0 0 1.4em;
    padding: clamp(10px, 1.6vw, 16px);
    background: var(--km-white);
    border: 1px solid var(--km-line-2);
    box-shadow: var(--km-shadow-1);
}
body.km-sub .km-work .km-work__img { box-shadow: none; }

.km-work .km-work__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/*
 * 縦並びの作品だけ高さをそろえる。
 * :not() で除外しているのは、いったん 3/4 を当ててしまうと
 * aspect-ratio:auto では元の比率に戻らないブラウザがあるため
 * （横長の作品が縦に間延びする）。上書きではなく最初から当てない。
 */
.km-work:not(.km-work--wide) .km-work__img img {
    aspect-ratio: 3 / 4;
    background: var(--km-paper-2);
}

.km-work__name {
    font-size: clamp(1rem, 2.6vw, 1.12rem);
    letter-spacing: 0.05em;
    margin: 0 0 0.7em;
}
.km-work p { font-size: 0.9rem; line-height: 2; color: var(--km-ink-2); margin: 0 0 0.9em; }

.km-work__cred {
    font-size: 0.76rem !important;
    line-height: 1.8 !important;
    color: var(--km-ink-3) !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
}

/*
 * 三枚続などの横長の作品。一段まるごと使い、比率をいじらずに見せる。
 * 縦長用の 3/4 を上書きするので、この指定を消すと絵の上下が余る。
 */
.km-work--wide {
    height: auto;
    margin-top: clamp(28px, 4vw, 48px);
    text-align: center;
}
.km-work--wide .km-work__name { margin-top: 0; }
.km-work--wide > * { max-width: none; }

/*
 * スマホでは三枚続が 300px ほどに縮み、絵柄が判別できなくなる。
 * 高さを確保して横スクロールで見てもらう（JS は使わない）。
 */
@media (max-width: 600px) {
    .km-work--wide .km-work__img {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    .km-work--wide .km-work__img img {
        width: auto;
        max-width: none;
        height: 44vh;
    }
    .km-work--wide .km-work__img::after {
        content: '← 横にスクロールできます →';
        display: block;
        position: sticky;
        left: 0;
        margin-top: 0.7em;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: var(--km-ink-3);
    }
}

/* FAQ は「詳細」ブロックで作る */
.km-faq .wp-block-details {
    border-bottom: 1px solid var(--km-line);
    margin-block: 0;
    padding: 0;
}
.km-faq .wp-block-details:first-of-type { border-top: 1px solid var(--km-line); }
.km-faq .wp-block-details > summary {
    display: block;
    padding: 1.4em 2.6em 1.4em 1.82em;
    position: relative;
    cursor: pointer;
    list-style: none;
    font-family: var(--km-mincho);
    font-size: clamp(0.98rem, 2.6vw, 1.06rem);
    letter-spacing: 0.04em;
    line-height: 1.7;
}
.km-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.km-faq .wp-block-details > summary:hover { color: var(--km-gold); }
.km-faq .wp-block-details > summary::before {
    content: "Q";
    position: absolute;
    top: calc(1.4em / 1.15); left: 0; /* summary の上の余白（1.4em）。ここは font-size 1.15em なので割り戻す */
    font-family: var(--km-latin);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--km-gold);
    line-height: 1.3;
}
.km-faq .wp-block-details > summary::after {
    content: "";
    position: absolute;
    top: 50%; right: 4px;
    width: 14px; height: 14px;
    margin-top: -7px;
    background:
        linear-gradient(var(--km-ink-2), var(--km-ink-2)) center / 14px 1px no-repeat,
        linear-gradient(var(--km-ink-2), var(--km-ink-2)) center / 1px 14px no-repeat;
    transition: transform 0.3s var(--km-ease);
}
/* 開いているときは「−」。縦線を消し、回転は半回転にとどめる（縦棒に見せない） */
.km-faq .wp-block-details[open] > summary::after {
    transform: rotate(180deg);
    background: linear-gradient(var(--km-gold), var(--km-gold)) center / 14px 1px no-repeat;
}
.km-faq .wp-block-details > *:not(summary) {
    padding: 0 2.6em 0.4em 2.1em;
    font-size: 0.94rem;
    line-height: 2.05;
    color: var(--km-ink-2);
}
.km-faq .wp-block-details > *:last-child { padding-bottom: 1.7em; }

/* 概要テーブル（テーブルブロック） */
.wp-block-table.km-table-wrap { margin-block: 0; max-width: var(--km-w-read); margin-inline: auto; }
.wp-block-table.km-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.wp-block-table.km-table-wrap td, .wp-block-table.km-table-wrap th {
    padding: 1em 1.2em;
    border: 0;
    border-bottom: 1px solid var(--km-line-2);
    text-align: left;
    vertical-align: top;
    line-height: 1.95;
    color: var(--km-ink-2);
}
/* 1列目を見出し扱いにする */
.wp-block-table.km-table-wrap td:first-child {
    width: 9em;
    font-family: var(--km-mincho);
    font-weight: 600;
    letter-spacing: 0.08em;
    background: var(--km-paper-2);
    color: var(--km-ink);
    white-space: nowrap;
}
@media (max-width: 768px) {
    .wp-block-table.km-table-wrap table { font-size: 0.88rem; }
    /* 5文字の見出し（年間管理料・宗旨・宗派 など）が1行に収まる幅。6文字以上は、区切りの位置に .km-nw を入れて折り返す */
    .wp-block-table.km-table-wrap td:first-child { width: 7.4em; padding-inline: 0.9em; white-space: normal; }
}

/* リストブロックを使った交通案内・文化財一覧 */
.wp-block-list.km-routes { list-style: none; padding: 0; margin-block: 0; }
.wp-block-list.km-treasure-list {
    list-style: none;
    padding: 0;
    margin-block: 0;
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr;
    background: var(--km-line-2);
    border: 1px solid var(--km-line-2);
}
@media (min-width: 640px)  { .wp-block-list.km-treasure-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wp-block-list.km-treasure-list { grid-template-columns: repeat(3, 1fr); } }
.wp-block-list.km-treasure-list li {
    background: var(--km-white);
    padding: 1.3em 1.5em;
    font-size: 0.88rem;
    line-height: 1.85;
    color: var(--km-ink-3);
}
.wp-block-list.km-treasure-list li strong {
    display: block;
    font-family: var(--km-mincho);
    font-size: 1.14em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--km-ink);
    margin-bottom: 0.3em;
}

/* 埋め込み地図 */
.km-map { margin-block: 0; }
.km-map iframe { width: 100%; min-height: 340px; border: 0; display: block; filter: grayscale(0.2) contrast(1.02); }
/* トップのアクセス：地図を右の案内（駅からの道のり）の高さに合わせる。縦に並ぶスマホでは高さ 400px のまま */
.km-access-cols > .wp-block-column:first-child { display: flex; flex-direction: column; }
.km-access-cols .km-map { flex: 1; display: flex; flex-direction: column; }
.km-access-cols .km-map iframe { flex: 1; height: 100%; }
/* 「Google マップで開く」は列の下、全体の左右中央 */
.km-access-cols + .km-actions { margin-top: clamp(24px, 3vw, 36px); }


/* =============================================================================
   11-2. 樹木葬「紫苑」のページ（body.km-soft）

   草花に囲まれたお墓の印象に合わせて、このページだけ角を丸め、
   セクションの境目を波の曲線にする。配色も「藍と金」から、紫苑の花の
   「薄紫の花びらと黄色い芯」に置き換える（docs/claude/04 §0 の例外）。
   body クラスは inc/setup.php の km_body_class() で /jumoku/ にだけ付ける。
   ============================================================================= */

/*
 * 紫苑の配色。トークンを差し替えるだけで、部品の CSS は共通のまま。
 * コントラスト（白地または --km-paper-3 の上）：
 *   --km-accent 白文字と 7.70:1 ／ --km-paper-3 の上で 6.32:1
 *   --km-ink-3  --km-paper-3 の上で 5.03:1
 *   --km-gold   --km-paper-3 の上で 4.58:1（芯の黄色の代わり。藍と金のときと同じ値）
 */
body.km-soft {
    --km-paper:   #f7f5fa;  /* 薄紫をひとしずく */
    --km-paper-2: #f0ecf6;
    --km-paper-3: #ebe7f3;
    --km-ink-2:   #4f4d5e;
    --km-ink-3:   #5f6170;

    --km-deep:    #3b3260;  /* 紫紺。フッターなどの面 */
    --km-deep-2:  #2a2346;
    --km-deep-3:  #5d5383;

    --km-accent:       #574a86;  /* 紫苑色を濃くしたもの。ボタン・リンク */
    --km-accent-hover: #463a70;

    --km-line:    rgba(70, 55, 120, 0.16);
    --km-line-2:  rgba(70, 55, 120, 0.08);

    --km-radius:   14px;  /* 入力欄など */
    --km-radius-2: 26px;  /* カード・写真 */
    --km-wave-h:   clamp(26px, 4vw, 54px);

    /* グローバルメニュー：ホバーは紫苑色、資料請求ボタンは紫苑色の地（白文字 7.70:1） */
    --km-nav-hover:     var(--km-accent);
    --km-nav-cta:       var(--km-accent);
    --km-nav-cta-hover: var(--km-accent-hover);
}

/*
 * ページヘッダー。写真は樹木葬の完成予想図（アイキャッチ画像）。
 * 下端は、幅より大きい楕円で切り抜いて、端まで同じ調子のゆるい弧にする
 * （border-radius だと両端だけが急に曲がる）。
 */
body.km-soft .km-pagehead {
    clip-path: ellipse(125% 100% at 50% 0);
    padding-bottom: calc(40px + var(--km-wave-h) * 0.6);
}
/*
 * 幕は紫紺。完成予想図は背景が白いので、白い画素の上でも
 * 淡い紫のラベル（#ddd4ef）が 4.5:1 を保てる濃さにしている（0.78 で 4.7:1）。
 */
body.km-soft .km-pagehead__media::after { background: rgba(46, 38, 72, 0.78); }
body.km-soft .km-pagehead__label { color: #ddd4ef; }

/*
 * セクションの境目を波にする。
 * 後ろのセクションの地色で波を描き、前のセクションの下端に重ねる
 * （background: inherit で、そのセクションの地色をそのまま使う）。
 */
body.km-soft .km-article > .km-sec + .km-sec { position: relative; }
/* 申込セクション（.km-cta）は overflow: hidden なので、そのままだと波が切れる */
body.km-soft .km-article > .km-cta { overflow: visible; }
body.km-soft .km-article > .km-sec + .km-sec::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--km-wave-h) + 1px);
    height: var(--km-wave-h);
    background: inherit;
    background-size: 100% 100vh;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 6 360 2 540 18s360 40 540 30 270-34 360-40v58z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 6 360 2 540 18s360 40 540 30 270-34 360-40v58z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}
/* 波の向きを交互に変えて、同じ形が続かないようにする */
body.km-soft .km-article > .km-sec:nth-child(even)::before { transform: scaleX(-1); }

/* 見出しの下の金の罫を、紫苑の花のしるし（assets/img/shion-flower.svg。由来のページの小紋より花びらを少なくしたもの）にする */
body.km-soft .km-head__title::after {
    width: 30px;
    height: 30px;
    margin-top: 0.5em;
    opacity: 1;
    background: url("../img/shion-flower.svg") center / contain no-repeat;
}

/* ボタンは丸みのある形に */
body.km-soft .wp-block-button.km-btn-wrap > .wp-block-button__link,
body.km-soft .km-btn { border-radius: 999px; }
/* 枠線のボタンは、押せる色（紫苑色）で縁取り、ホバーで同じ色に塗る */
body.km-soft .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link {
    color: var(--km-accent);
    border-color: color-mix(in srgb, var(--km-accent) 45%, transparent);
}
body.km-soft .wp-block-button.km-btn-wrap.km-btn--line > .wp-block-button__link:hover {
    background: var(--km-accent);
    border-color: var(--km-accent);
    color: #fff;
}

/* 写真・図版は大きく丸める。直線の金の帯は外す */
body.km-soft .km-split.wp-block-media-text .wp-block-media-text__media {
    border-radius: var(--km-radius-2);
    overflow: hidden;
}
body.km-soft .km-split.wp-block-media-text .wp-block-media-text__media::after { display: none; }
body.km-soft .km-split--art.wp-block-media-text .wp-block-media-text__media img { border-radius: calc(var(--km-radius-2) - 8px); }

/* 特長の連番は、丸の中に置く */
body.km-soft .km-reason__no {
    display: grid;
    place-items: center;
    width: 2.7em;
    height: 2.7em;
    margin: 0 auto 1em;
    border: 1px solid var(--km-gold-line);
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    opacity: 1;
    color: var(--km-gold);
}
body.km-soft .km-reason { border-color: transparent; box-shadow: 0 10px 30px rgba(24, 43, 61, 0.06); }

/* 料金プランのカード */
body.km-soft .km-size { border-color: transparent; box-shadow: 0 10px 30px rgba(24, 43, 61, 0.06); }
body.km-soft .km-size .km-size__label {
    align-self: flex-start;
    padding: 0.35em 1em;
    border: 1px solid var(--km-gold-line);
    border-radius: 999px;
    letter-spacing: 0.14em;
}
body.km-soft .km-size .km-size__row { border-top-style: dotted; }

/* 概要の表は、角の丸い白い板に載せる */
body.km-soft .wp-block-table.km-table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--km-radius-2);
    background: var(--km-white);
    box-shadow: 0 10px 30px rgba(24, 43, 61, 0.06);
}
body.km-soft .wp-block-table.km-table-wrap tr:last-child td { border-bottom: 0; }

/* よくあるご質問は、罫線で区切らず、角の丸い淡い板を並べる */
body.km-soft .km-faq details,
body.km-soft .km-faq details:first-of-type {
    border: 0;
    border-radius: 20px;
    background: var(--km-paper-2);
    padding-inline: clamp(18px, 3vw, 28px);
    margin-block: 0 12px;
}
body.km-soft .km-faq summary:hover { color: var(--km-accent); }

/* 申込フォームの白い紙も丸める */
body.km-soft .km-form__box { border-radius: var(--km-radius-2); }


/* =============================================================================
   12. ユーティリティ・アニメーション
   ============================================================================= */

/*
 * 数字の高さをそろえる。
 * Cormorant Garamond の既定はオールドスタイル数字（0や2が下に落ちる）で、
 * 電話番号や年号としては読みにくいため、数字を出す箇所ではライニング数字にする。
 */
.km-cta__num .km-tel,
.km-form-tel__num .km-tel,
.km-footer__tel,
.km-news time,
.km-reason__no,
.km-step__no,
.km-404 .km-tel {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* スマホだけの改行 */
.km-br-sp { display: none; }
@media (max-width: 768px) { .km-br-sp { display: inline; } }

/* PC だけの改行（<br class="km-br-pc">）。スマホ（768px 以下）では改行せず、文章を続けて流す */
@media (max-width: 768px) { .km-br-pc { display: none; } }

/* 画面下に固定する問い合わせバー（スマホ） */
.km-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: none;
    gap: 1px;
    background: var(--km-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 24px -14px rgba(0, 0, 0, 0.5);
}
.km-sticky a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    min-height: 60px;
    padding: 0.5em;
    font-family: var(--km-mincho);
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--km-accent);
    background: var(--km-white);
}
.km-sticky a small { font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.8; font-family: var(--km-gothic); }
/*
 * 資料請求・見学予約（km-sticky--gold）は操作色の地に白文字、電話は白地に操作色の文字。
 * どちらも操作色にすると同じ色が2つ並んで見分けにくいため、塗りを分けている（2026-11-04 に金茶から変更）。
 */
.km-sticky a.km-sticky--gold { background: var(--km-accent); color: #fff; }

@media (max-width: 768px) {
    .km-sticky { display: flex; }
    /* 固定バーの分だけフッターに余白を足す */
    .km-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 24px); }
    /* 入力欄で文字を打っているあいだは隠す（キーボードの上に出て入力欄をふさぐため。site.js が html.km-typing を付ける） */
    html.km-typing .km-sticky { display: none; }
}

/*
 * スクロールで現れる演出。
 * 既定は「見えている」状態。JS が html.km-anim を付けたときだけ隠す。
 * JS が動かない・失敗した場合でも本文が読めなくならないための設計。
 */
.km-in { opacity: 1; transform: none; }

html.km-anim .km-in {
    opacity: 0;
    transform: translateY(22px);
    /* ほんの少しだけ霞ませてから合焦させると、ふわりと現れる印象になる */
    filter: blur(6px);
    transition:
        opacity 0.9s var(--km-ease),
        transform 0.9s var(--km-ease),
        filter 0.9s var(--km-ease);
    will-change: opacity, transform;
}
html.km-anim .km-in.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/*
 * カードの並びは、親ではなく一枚ずつ順に現れるようにする。
 * 全部が同時に動くより落ち着いて見え、かつ手が込んで見える。
 */
html.km-anim .km-in.km-cards {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}
html.km-anim .km-in.km-cards > .wp-block-column {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    transition:
        opacity 0.85s var(--km-ease),
        transform 0.85s var(--km-ease),
        filter 0.85s var(--km-ease);
}
html.km-anim .km-in.km-cards.is-in > .wp-block-column {
    opacity: 1;
    transform: none;
    filter: none;
}
html.km-anim .km-in.km-cards.is-in > .wp-block-column:nth-child(1) { transition-delay: 0ms; }
html.km-anim .km-in.km-cards.is-in > .wp-block-column:nth-child(2) { transition-delay: 110ms; }
html.km-anim .km-in.km-cards.is-in > .wp-block-column:nth-child(3) { transition-delay: 220ms; }
html.km-anim .km-in.km-cards.is-in > .wp-block-column:nth-child(4) { transition-delay: 330ms; }

/*
 * ヒーローのパララックス。
 * スクロール駆動アニメーション（CSS だけで完結し、JS より滑らか）を使う。
 * 非対応ブラウザでは単に動かないだけで、表示は変わらない。
 * 動きは控えめ（写真が 8% ぶん、ゆっくり後退する程度）に留める。
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .km-hero__media img {
            animation: km-parallax linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }

        /* 下層ページの帯写真も同様に、さらに控えめに */
        .km-pagehead__media img {
            animation: km-parallax-soft linear both;
            animation-timeline: view();
            animation-range: entry 0% exit 100%;
        }
    }
}

@keyframes km-parallax {
    from { transform: translate3d(0, -4%, 0) scale(1.08); }
    to   { transform: translate3d(0, 4%, 0) scale(1.08); }
}
@keyframes km-parallax-soft {
    from { transform: translate3d(0, -2.5%, 0) scale(1.05); }
    to   { transform: translate3d(0, 2.5%, 0) scale(1.05); }
}

/* スクロールを促すマウスの形のアイコン（ヒーロー右下。2026-11-04 担当者提供の形に差し替え） */
.km-scrollcue {
    position: absolute;
    right: clamp(20px, 3vw, 44px);
    bottom: 20px;
    z-index: 2;
    text-align: center;
    font-family: serif;
    font-size: 14px;
    letter-spacing: 0.04em;
    /*
     * 写真の上に直接載せる。すりガラスには載せず、枠線・文字とも白にし、藍のやわらかい影を添える。
     * 飾り（aria-hidden）なので、文字色のコントラスト基準の対象ではない。
     */
    color: #fff;
    text-shadow: 0 0 14px rgba(24, 43, 61, 0.9), 0 0 6px rgba(24, 43, 61, 0.75), 0 1px 2px rgba(24, 43, 61, 0.8);
    pointer-events: none;
}
.km-scrollcue__mouse {
    display: block;
    position: relative;
    width: 30px;
    height: 50px;
    margin: 0 auto 6px;
    border: 1px solid #fff;
    border-radius: 20px;
    box-shadow: 0 0 8px rgba(24, 43, 61, 0.7), inset 0 0 8px rgba(24, 43, 61, 0.45);
}
.km-scrollcue__mouse::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 1px;
    height: 8px;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 2px;
    animation: km-cue 2s infinite;
}
@keyframes km-cue {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 20px); }
}

@media (max-width: 768px) {
    .km-scrollcue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.km-anim .km-in,
    html.km-anim .km-in.km-cards > .wp-block-column {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    .km-scrollcue__mouse::before { animation: none; }
    .km-plot__media img,
    .km-split__media img,
    .km-gallery img { transition: none; }
}

/* 印刷時は装飾を落とす */
@media print {
    .km-header, .km-sticky, .km-hero__media, .km-cta { display: none !important; }
    body { background: #fff; color: #000; }
}

/* =============================================================================
   画像のライトボックス（サイト共通。site.js「5.」。2026-11-04）
   ホイールで拡大・縮小、拡大中はドラッグで移動。画像の外側・× で閉じる。
   ============================================================================= */
a.km-zoomable, img.km-zoomable { cursor: zoom-in; }
.km-lightbox {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    margin: 0; padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    overscroll-behavior: contain;
    /* ピンチや指での移動をブラウザの拡大・スクロールにとられないように（site.js で扱う） */
    touch-action: none;
}
.km-lightbox::backdrop { background: rgba(12, 18, 24, 0.9); }
.km-lightbox__stage {
    position: absolute;
    inset: clamp(48px, 7vh, 76px) clamp(12px, 4vw, 56px) clamp(64px, 10vh, 96px);
    /* grid だと画像の max-height: 100% が効かず、縦長の画像が画面からはみ出すため flex にする */
    display: flex;
    align-items: center;
    justify-content: center;
}
.km-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    flex: none;
    border-radius: 4px;
    /* 余白を透過にした画像でも四角い影が出ないよう、画像の形に沿う影にする */
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5));
    transform-origin: 50% 50%;
    transition: transform 0.12s ease-out;
    cursor: zoom-in;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}
.km-lightbox.is-zoomed .km-lightbox__img { cursor: grab; }
.km-lightbox.is-dragging .km-lightbox__img { cursor: grabbing; transition: none; }
.km-lightbox__caption,
.km-lightbox__hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 760px);
    margin: 0;
    text-align: center;
    pointer-events: none;
}
.km-lightbox__caption {
    bottom: clamp(30px, 4.6vh, 48px);
    font-family: var(--km-mincho);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.km-lightbox__hint {
    bottom: clamp(10px, 1.6vh, 18px);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}
/* 拡大しているあいだは、画像に重なる説明を消す */
.km-lightbox__caption { transition: opacity 0.2s; }
.km-lightbox.is-zoomed .km-lightbox__caption { opacity: 0; }
.km-lightbox__close {
    position: absolute;
    top: clamp(10px, 2vh, 20px); right: clamp(10px, 2vw, 24px);
    z-index: 2;
    width: 48px; height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}
.km-lightbox__close:hover { background: rgba(255, 255, 255, 0.15); }
/* 「北を上にする」（本所絵図だけ。押すと左へ90度回す） */
.km-lightbox__tool {
    position: absolute;
    top: clamp(10px, 2vh, 20px); left: clamp(10px, 2vw, 24px);
    z-index: 2;
    min-height: 44px;
    padding: 0.55em 1.2em;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    font-family: var(--km-gothic);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #fff;
    cursor: pointer;
}
.km-lightbox__tool[hidden] { display: none; }
.km-lightbox__tool:hover { background: rgba(255, 255, 255, 0.15); }
.km-lightbox__tool[aria-pressed="true"] { background: #fff; border-color: #fff; color: #182b3d; }
.km-lightbox__tool[aria-pressed="true"]::before { content: "✓ "; }
@media (prefers-reduced-motion: no-preference) {
    .km-lightbox[open] .km-lightbox__stage { animation: km-lightbox-in 0.35s var(--km-ease); }
    @keyframes km-lightbox-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
}