@charset "UTF-8";
/*
 * 覚王山 妙宣寺｜上書きCSS
 *
 * 土台のCSS（城山のもの）は書き換えず、このファイルで妙宣寺向けの調整だけを足す。
 * こうしておくと、土台の更新と妙宣寺側の調整を分けて追える。
 * 読み込み順：style.css → custom.css
 */

/* --------------------------------------------------------------
 * 文字色の既定
 *
 * 土台は body に色を書かず、`.p-about_detail` や `.access .text p` のように
 * 個別のセレクタへ #737373 を当てている（build.py がそれを #413b36 に置換する）。
 * そのため、こちらで新しく足したパーツ（パンくず・サイドナビ・お問い合わせ・
 * トップの電話表示など）は色の指定が無く、ブラウザ既定の**真っ黒**のまま
 * 周囲の #413b36 と揃っていなかった（2026-08-21に全16ページ×PC/SPで178か所を実測）。
 * ここで既定を決めておけば、個別指定のある箇所はそのまま勝つので影響が無い。
 * ファイルの先頭に置くこと（後ろに足すと、あとに書いてある指定を上書きしてしまう）。
 * -------------------------------------------------------------- */
body {
  color: #413b36;
}

/* --------------------------------------------------------------
 * 帯を使わないページの、上の余白
 *
 * おしらせ・お問い合わせ・プライバシー・送信完了の4ページは、
 * 帯（番号付きの縦組み）を持たず、縦組みの見出しが上部の顔になる。
 * 土台では余白の出どころがページごとに違っていて、
 *   おしらせ   .p-news       padding-top 120px（SP 80px）
 *   プライバシー .p-faq        padding-top 120px（SP 80px）
 *   お問い合わせ .p-contact    **指定なし**（内側の .p-contact_wrap が 112px を持つが、
 *                             見出しはその外に置かれていたため効いていなかった）
 * となっていた。実測（2026-08-21）＝お問い合わせだけ見出しがヘッダーに接していた（すきま0px）。
 * 見出しは `plain_ttl()` から出すようにしたうえで、上の余白をここで揃える。
 * -------------------------------------------------------------- */
.p-news,
.p-faq,
.p-contact .p-contact_wrap {
  padding-top: 120px;
}

/* 背景も白に揃える（2026-08-21 Sone判断）。
   土台は `.p-news` と `.p-contact` に薄いグレー #f2f0ec を敷いていて、
   プライバシー・送信完了だけが白という状態だった。
   お問い合わせの各項目を包む箱（#f8f7f5）は、白地の上ではほとんど見分けが
   つかず中途半端に浮くので、透明にして入力欄の枠線だけで見せる。 */
.p-news,
.p-contact {
  background-color: #fff;
}

.p-contact .p-contact_box {
  background-color: transparent;
}

/* --------------------------------------------------------------
 * スマートフォンのヘッダー（全ページ共通）
 *
 * 土台は「スマートフォンではスクロールしても小ロゴを出さない」作りで、
 * 下層だけ `header.ex-top` の例外で寺紋が残っていた。その結果、
 *   トップ ＝ スクロールするとロゴが消える
 *   下層   ＝ 寺紋だけが背景のないまま本文に重なる
 * とページごとに違う見え方になっていた（2026-08-21 実測）。
 *
 * スクロールしたら白い帯を敷き、その中に寺紋とハンバーガーを置く。
 * これで全ページ同じになり、どこからでもトップへ戻れる。
 * 印（is-scrolled）を付けるのは myosenji.js。
 * -------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
  /* 白い帯。**body::before は使えない**（土台がドロワーを開いたときの
     黒い暗幕に使っている。奪うと暗幕が出なくなる）。
     myosenji.js が入れる専用の要素に描く。 */
  .m-headbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 76px;
    box-sizing: border-box;
    background-color: #fff;
    /* 仕切りは**ぼかした影ではなく1pxの罫**にする（2026-08-24 修正）。
       もとは `box-shadow: 0 1px 8px rgba(30,26,22,.10)` を敷いていたが、
       下層ページでは静的な白ヘッダー（header.c-head_w）がこの帯の下にもう一枚あり、
       影が「白の上」に落ちて **8px幅の薄いグレーの帯**として浮いて見えていた。
       実測（390px幅・2026-08-24）＝おしらせ／お問い合わせ（背景が白）では
       y76〜84 に rgb(244)〜rgb(254) のグラデが、見出しより前の何もない白地に出ていた。
       1pxの罫なら、白ヘッダーの下端とぴったり重なって段差にならない。 */
    border-bottom: 1px solid rgba(30, 26, 22, .12);
    /* 重なりの高さ。**画面上端の色をこの白帯から採らせるため、最前面のひとつ下**に置く
       （2026-09-01 修正／理由はファイル末尾の「iOS Safari の上下バーの色」の節）。
       もとは 499 → 8002 と上げたが、8002 では実機で直らなかった。
       8002 より前に、全画面の fixed 擬似要素 body::after（99999・白・opacity:0）がいる。

       いまの重なり（下から）
         8001    ＝ 閉じたドロワー（header .sidebar）／土台の暗幕 body::before
         9999    ＝ .loading（この版では出力していない）
         99999   ＝ body::after（ページ遷移の白フェード。opacity:0 でも常にいる）
         2147483646 ＝ ここ（.m-headbar と .m-spcta）
         2147483647 ＝ header .menu_aside（寺紋とハンバーガーの入れ物）
       ハンバーガーと寺紋そのものの z-index は 500 だが、効くのは入れ物のほう。
       入れ物を白帯より1つだけ上に置いて、寺紋が白帯に潜らないようにしている。
       body.fadeout のときだけ元の高さに戻す（ファイル末尾）。 */
    z-index: 2147483646;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility 0s .3s;
  }

  /* 下層ページの静的な白ヘッダーの高さを、上の帯と**1pxも違わないように**そろえる
     （2026-08-24 修正）。土台は
       header.c-head_w  … 1024px以下 105px !important ／ 896px以下 79px !important
     と決めていて、こちらの帯は 76px。この差（SPで3px・タブレットで29px）ぶんだけ
     白が余り、そこに上の影が落ちて「白帯の下に薄いグレーの段差」として見えていた。
     セレクタの詳細度は土台と同じなので、あとから読まれるこのファイルが勝つ。 */
  header.c-head_w {
    height: 76px !important;
  }

  body.is-scrolled .m-headbar {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s linear;
  }

  /* 寺紋を帯の中に固定する。トップは js-top2、下層は js-top1 と
     出しているものが違うので、両方を同じ場所に置く。 */
  /* 出るタイミングを揃える。
     土台は要素ごとに 0.2〜0.4秒とばらばらで、帯・寺紋・ハンバーガーが
     順にずれて出ていた（実測＝帯0.3s／寺紋0.4s／入れ物0.3s／ボタン0.2s）。
     3つとも同じ 0.3秒にして、ひとまとまりに見えるようにする。 */
  .m-headbar,
  header .menu_aside .logo,
  header .menu_aside .logo .m-logo,
  header .menu_aside .logo.scrolled .m-logo,
  header.ex-top .menu_aside .logo.scrolled .m-logo,
  header .menu_aside .menu_btn,
  header .menu_aside .menu_btn span {
    /* 土台は `.logo.scrolled` 付きのセレクタで 0.4秒（visibility には 0.4秒の
       待ちまで）を当てている。詳細度で勝てないと速さが揃わないので、
       こちらも `.scrolled` を含めた形で書く。 */
    transition: opacity .3s linear, visibility .3s linear;
    transition-delay: 0s;
  }

  /* スマートフォンでも「寺名あり → 寺名なし」に切り替える。
     土台は `js-top1`（寺紋＋寺名）をスマートフォンでは display:none にして、
     代わりに1枚目の写真の中へロゴを置いていた。そのため
     ・写真にロゴが焼き込まれているように見える
     ・ヘッダーでの切り替えがスマートフォンだけ起きない
     という状態だった。写真の中のロゴはやめて、ヘッダーに一本化する。 */
  header .menu_aside .js-top1 {
    display: block;
    position: absolute;
    top: 20px;
    left: 25px;
    z-index: 500;
  }

  /* トップは、この寺名ありロゴがメインビジュアルの上に重なる。
     土台は入れ物（.logo）を透明にしているので、見えるように戻す。 */
  body:not(.is-scrolled) header .menu_aside .logo {
    visibility: visible;
    opacity: 1;
  }

  /* ただし入れ物を戻すと、中の「寺紋だけ」のロゴまで出てしまい、
     寺名ありロゴの下に**2つ目の寺紋**が並ぶ（実測＝トップのスクロール前）。
     スクロールするまでは寺紋だけのロゴを隠す。 */
  body:not(.is-scrolled) header .menu_aside .logo .m-logo--sm {
    visibility: hidden;
    opacity: 0;
  }



  /* 写真の上では白。写真の中に置いていたときと同じ影を付けて、
     空に溶けないようにする（寺紋は線の細い紋なので影が要る）。 */
  body:not(.is-scrolled):not(.blocked).first-slide header .menu_aside .logo .m-logo:not(.m-logo--sm) {
    color: #fff;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, .78),
      0 2px 12px rgba(0, 0, 0, .5);
  }

  body:not(.is-scrolled):not(.blocked).first-slide header .menu_aside .logo .m-kamon {
    filter:
      drop-shadow(0 1px 2px rgba(0, 0, 0, .82))
      drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
  }

  /* ドロワーを開くと下地が白くなる。白い文字のままだと読めないので濃い色に戻す。
     （土台はドロワーを開くと body に `blocked` を付ける） */
  body.blocked header .menu_aside .logo .m-logo,
  body.blocked header .menu_aside .logo .m-kamon {
    color: #413b36;
    text-shadow: none;
    filter: none;
  }

  /* ドロワーを開いているあいだは「寺紋だけ」にする。
     寺名ありのロゴは縦に長く（183px）、開いたメニューの項目に重なってしまう。 */
  body.blocked header .menu_aside .logo .m-logo:not(.m-logo--sm) {
    visibility: hidden;
    opacity: 0;
  }

  body.blocked header .menu_aside .logo .m-logo--sm {
    position: fixed;
    top: 15px;
    left: 20px;
    width: 46px;
    visibility: visible;
    opacity: 1;
    z-index: 8004;   /* ドロワー（.menu_aside は z-index 8003）より前に出す */
  }


  /* スクロールしたら「寺名あり」は消す。
     **js-top1 / js-top2 では判別できない。** トップは js-top1＝寺名あり・
     js-top2＝寺紋のみだが、下層は js-top1 が寺紋のみだから。
     寺紋だけのロゴには `m-logo--sm` が付くので、そちらで見分ける。 */
  body.is-scrolled header .menu_aside .logo .m-logo:not(.m-logo--sm) {
    visibility: hidden;
    opacity: 0;
  }

  /* トップは、スクロールすると土台が `.logo` ごと消してしまう。
     中の小ロゴを出すために、入れ物のほうも見えるようにする。
     大ロゴ（js-top1）はスマートフォンでは display:none なので、二重にはならない。 */
  body.is-scrolled header .menu_aside .logo {
    visibility: visible;
    opacity: 1;
  }

  /* スクロール後に帯の中へ出すのは「寺紋だけ」のロゴ */
  body.is-scrolled header .menu_aside .logo .m-logo--sm {
    position: fixed;
    top: 15px;
    left: 20px;
    /* 寺紋の大きさに合わせて幅を固定する。
       トップと下層で入れ物の作りが少し違い、そのままだと 52px と 46px になる */
    width: 46px;
    visibility: visible;
    opacity: 1;
    z-index: 500;
  }

  /* 帯のぶん、いちばん上の見出しが隠れないようにする */
  body.is-scrolled .p-about_main,
  body.is-scrolled .p-faq,
  body.is-scrolled .p-news,
  body.is-scrolled .p-contact {
    scroll-margin-top: 76px;
  }
}

/* --------------------------------------------------------------
 * 地図の見え方をページで揃える
 *
 * 土台は `.access iframe` に `grayscale(1)` を当てていて、トップの地図だけが
 * 白黒になっていた（アクセスページの地図は妙宣寺の自作クラスなので当たらず、色付き）。
 * 実測（2026-08-21）＝トップ grayscale(1) ／ アクセス none。
 * 地図は「道を探すためのもの」なので、路線や施設の色分けが残る**色付きに揃える**。
 * 装飾として白黒に戻したいときは、この指定を消せば土台の白黒に戻る。
 * -------------------------------------------------------------- */
.access iframe {
  -webkit-filter: none;
  filter: none;
}

@media only screen and (max-width: 896px) {
  .p-news,
  .p-faq,
  .p-contact .p-contact_wrap {
    padding-top: 80px;
  }
}

/* --------------------------------------------------------------
 * トップのメインビジュアル
 * 同じ理由で、上に重なるロゴ・スクロール表示を読みやすくする。
 * -------------------------------------------------------------- */
.slide .slide_img {
  position: relative;
}

.slide .slide_img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 12, .18) 0%, rgba(20, 16, 12, 0) 40%);
  pointer-events: none;
}

/* --------------------------------------------------------------
 * ロゴ（寺紋＋寺名）
 *
 * 寺紋は先方から受領した logo.svg をHTMLに直接埋め込んでいる。
 * 塗りを currentColor にしてあるので、置き場所ごとに color で色を変えられる。
 * 　白地のヘッダー → 本文と同じ濃い色
 * 　写真の上（トップのメインビジュアル）→ 白
 * ※ 寺名の文字ロゴは受領待ち。届くまでは文字組みで代用している。
 * -------------------------------------------------------------- */
.m-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #413b36;
}

.m-kamon {
  width: 42px;
  height: 42px;
  display: block;
}

.m-logo__text {
  /* サイズは rem で書く。土台が html{font-size:62.5%}（＝10px基準）の rem 統一なので、
     ここだけ px にすると、利用者がブラウザの文字サイズを変えたときに追従しない */
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: .12em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* ロゴの包み。**トップは `<h1>`、下層は `<p>`**（2026-09-10）。
   下層の h1 はページ名（`.p-about_ttl01` など）に譲ったので、
   ここを要素セレクタで書くと下層だけ `<p>` の既定マージンが戻る。 */
.menu_aside .logo .m-sitename {
  margin: 0;
}

/* トップのメインビジュアル（写真）の上に出るロゴは白 */
/* 写真の上に載る白ロゴ。
   城山の八咫烏は塗りつぶしのシルエットなので白がはっきり出るが、
   妙宣寺の寺紋は「丸に立ち橘」の線画で白抜きが多く、同じ影では空に溶ける。
   近距離の濃い影で輪郭を作り、遠距離のぼかしで背景から浮かせる二段構えにする。 */
.slide_img .logo .m-logo {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .78),
    0 2px 12px rgba(0, 0, 0, .5);
}

.slide_img .logo .m-kamon {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, .82))
    drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}

@media only screen and (max-width: 896px) {
  /* 城山のSPロゴは 52px。寺紋は線の細い紋なので同寸だと重く見えるが、
     34px では本家に対して明らかに小さく存在感が出ないため 46px にする。 */
  .m-kamon {
    width: 46px;
    height: 46px;
  }

  .m-logo__text {
    font-size: 1.6rem;
  }

  /* 寺紋と寺名のあいだ。
     `gap` は指定してあるが、縦組みの寺名は行の箱が上に張り出すため、
     実際には詰まって見える（実測＝スマートフォンでは 0px）。
     余白は寺名の側に持たせて、見た目で空くようにする。 */
  .m-logo__text {
    margin-top: 12px;
  }
}

/* --------------------------------------------------------------
 * 下層ページ上部の帯
 *
 * 帯のタイトルとメニューは白文字。城山の写真は暗めだったので成立していたが、
 * 妙宣寺の写真は青空が多く明るいため、そのままでは文字が読めない。
 * 写真の上に薄い暗幕を重ねて可読性を確保する。
 * （.p-about_main は土台側で position:relative が入っているので、そこは触らない）
 * -------------------------------------------------------------- */
.p-about_main {
  position: relative;
}

/* 帯ぜんぶにかける薄い暗幕。
   文字が乗るところの濃さは、下のタイトル・メニュー個別の暗がりが受け持つ。
   ここを強くすると、境目が段差として見えてしまう。 */
.p-about_main::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* 城山の帯写真は軒下や木材で暗く（白文字との比が17前後）、暗幕なしで成立していた。
     妙宣寺は青空と白壁の写真が多く、この暗幕が .30 では白文字の比が 2.5〜3.0 までしか出ず、
     AA基準（4.5）に届かなかった（実測）。文字が乗る上下を強めにして、
     写真そのものは中央で明るさを残す。 */
  /* 2026-08-26 に少し濃くした。帯の中にページ名（大きい白文字）を足したこと、
     永代供養の帯を明るい石の写真（永代供養塔）に差し替えたことで、
     人生相談の帯（SP）が 4.32 と AA(4.5) を割っていたため。実測しなおした値は下の表を参照。 */
  background:
    linear-gradient(180deg,
      rgba(30, 26, 22, .76) 0%,
      rgba(30, 26, 22, .66) 30%,
      rgba(30, 26, 22, .63) 62%,
      rgba(30, 26, 22, .80) 100%);
}

/* 暗幕より前に出す。
   ※ position は土台のCSS側で absolute が指定されている。
     ここで position を書くと配置が崩れるので、z-index だけを足すこと。 */
.p-about_ttl,
.p-about_menu {
  z-index: 2;
}

/* 文字を写真から浮かせる。
 *
 * 文字の後ろだけ暗くする方法（部分的な影）も試したが、
 * 縦組みの細長い文字に対しては「黒い楕円」や境目の段差として見えてしまった。
 * 帯全体は上のゆるいグラデ一枚だけにして、文字側は縁取りに近い影で立たせる。
 * 写真を沈めずに、どの写真の上でも白文字が読める。 */
.p-about_ttl,
.p-about_menu a {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .5),
    0 0 14px rgba(0, 0, 0, .34);
}

/* トップの「水子供養」全面写真セクションも同じ理由で暗幕を敷く */
.grounds .wrap_img {
  position: relative;
  display: block;
}

/* 写真は inline のままだと、行の下端に文字の下がり（ベースライン）ぶんの
   すき間が残る。暗幕は箱いっぱい（inset:0）に敷くので、そのすき間にも
   暗幕がかかって「写真の下だけ色が違う帯」になる。写真をブロックにして箱と一致させる。 */
.grounds .wrap_img > picture,
.grounds .wrap_img > picture > img,
.grounds .wrap_img > img {
  display: block;
}

/* 暗幕の濃さは **写真を差し替えたら測り直す**（2026-08-26）。
   ここは長らく水子供養の暫定写真（単色 #6b635b）だったので、.34/.12/.34 の薄い幕で足りていた。
   各種ご供養（本堂内陣）に差し替えたところ、白い蝋燭と金色の荘厳が背景に来て、
   白い縦組みタイトルの比が **1.44**（明るい上位5%・実測 1440px）まで落ちた。
   帯（.p-about_main::after ＝ .60〜.78）や .section5（.66〜.74）と同じ濃さに揃える。
   実測しなおした値は下の「実測」を参照。 */
.grounds .wrap_img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 26, 22, .70) 0%, rgba(30, 26, 22, .60) 50%, rgba(30, 26, 22, .70) 100%);
}

/* **position は書かない**（2026-08-24 修正）。
   ここに `position: relative` を書いていたため、スマートフォンで土台が当てている
   `position: absolute`（写真の中央に置く指定）を打ち消してしまい、
   タイトルが写真の**下**へ流れ出していた。その結果 `.wrap_img` の箱が
   写真（320px）より 76px 高くなり（実測 396px・390px幅）、はみ出したぶんの
   暗幕が**白い背景の上**に落ちて、水子供養セクションのグレーが
   「濃いグレーの写真」＋「薄いグレーの帯」の2色に割れて見えていた。
   土台が absolute を当てている要素には、z-index と影だけを足す。 */
.grounds .wrap_img .ttl {
  z-index: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------
 * トップの「05 年中行事」「04 人生相談」のカード（.section5）
 *
 * 土台は暗幕を持っていない（`.section5 .link:before` はコメントアウトされている）。
 * 城山の写真は暗く、白い縦組みタイトルがそのまま読めていたが、妙宣寺の
 * 花まつりの写真は白い提灯と桃色の花で明るく、タイトルが完全に沈んでいた。
 * 実測（2026-08-24・白 #fff との比／タイトルの真後ろの画素）
 *   年中行事（h-hanamatsuri）… 明るい上位5%の画素で 1.12〜1.29（AA 4.5 に遠く届かない）
 *   人生相談（h-hondou2）    … 3.02〜4.71
 * 下層の帯（.p-about_main::after）と同じ考え方で、写真の上に暗幕を1枚敷く。
 * 濃さは、真っ白な画素（輝度1.0）の上でも比 4.5 を超えるところから決めた（中央 .66）。
 * 実測（.66 適用後）＝年中行事 4.24→SP 上位5% 比 5.5前後、人生相談 7.3前後。
 * 数値は帯（.71〜.78）とほぼ同じ濃さで、サイト全体の見え方もそろう。
 * ※ .section5 .link は土台が position:relative を持っているので、ここでは書かない。
 * -------------------------------------------------------------- */
.section5 .link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 写真（z-index なし）より前、タイトル（土台が z-index:3）より後ろ */
  z-index: 2;
  background: linear-gradient(180deg,
      rgba(30, 26, 22, .74) 0%,
      rgba(30, 26, 22, .66) 50%,
      rgba(30, 26, 22, .74) 100%);
}

/* 帯のタイトル（.p-about_ttl）と同じ縁取りの影で、どの写真の上でも立たせる */
.section5 .link .ttl {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .5),
    0 0 14px rgba(0, 0, 0, .34);
}

/* --------------------------------------------------------------
 * 画像の高さは自動にする
 *
 * 遅延読み込みのガタつきを防ぐため、本文の写真に width / height 属性を入れている。
 * ところが属性の height は「高さの指定」としても効くため、
 * CSSで幅だけを決めている画像は、元の高さのまま横だけ縮められて引き伸ばされる。
 * （例：525×788で出したい写真が 525×1351 になる）
 * 高さを自動に戻し、幅から比率どおりに決めさせる。
 *
 * ※ CSS側で高さを決めている画像（帯・ギャラリー）は、ここに含めないこと。
 * -------------------------------------------------------------- */
.p-about_detail img,
.p-forest_detail img,
.p-news_box img,
.section3_wrap .img img,
.section5 .link img,
.story img {
  height: auto;
}

/* --------------------------------------------------------------
 * 差し替え待ちの写真
 *
 * 水子供養の「慈母観音さま」の写真が手元に無いため、暫定で別の写真を置いている。
 * 先方に撮影を依頼済み（2026-08-18）。届くまでは、そこだけグレースケールにして
 * 「これは仮の写真」と画面上で分かるようにする。
 * 写真を差し替えたら build.py の PROVISIONAL_IMAGES を空にすれば、色が戻る。
 * -------------------------------------------------------------- */
/* 差し替え待ちの写真は、build.py が一色に塗った画像を書き出す。
   CSSでは何もしない（色をCSSで作ると、帯の暗幕やレイアウトの重なりで
   実際の色が変わってしまい、白文字とのコントラストを計算で保証できないため）。
   写真を差し替えたら build.py の PROVISIONAL_IMAGES を空にする。 */


/* --------------------------------------------------------------
 * トップのギャラリー
 *
 * 城山には無いセクションなので、ここで一式を組む。
 * 縦組みの見出し＋正方形の写真を敷き詰める、サイト全体と同じ静かな見せ方にする。
 * -------------------------------------------------------------- */
/* 「境内のようす」は本文の幅から出して、ページの幅いっぱいに広げる（2026-09-02 Sone指示）。
   土台は `.p-about_detail` に max-width:1050px と左右の余白（PC 120px・タブレット 60px・
   SP 35px）を持たせており、そのままだと写真の並びが 1050px に閉じ込められる。
   実測（1440x900）＝ 広げる前のグリッドは 930px しかなかった。
   親の余白ぶんだけ左右へ出し、自分の左右の余白も外して、写真を大きく見せる。 */
.m-gallery {
  padding: 120px 60px;
  box-sizing: border-box;
}

.p-about_detail .m-gallery {
  margin-left: -120px;
  margin-right: -120px;
  padding-left: 0;
  padding-right: 0;
}

.m-gallery .ttl {
  margin: 0 auto 48px;
  font-size: 2.2rem;
  letter-spacing: .1em;
  font-weight: normal;
  width: 33px;
}

.m-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1290px;
}

.m-gallery__grid li {
  margin: 0;
  overflow: hidden;
}

.m-gallery__grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease;
}

.m-gallery__grid li:hover img {
  transform: scale(1.05);
}

@media only screen and (max-width: 1024px) {
  .m-gallery {
    padding: 80px 30px;
  }

  /* 親の左右の余白は 60px */
  .p-about_detail .m-gallery {
    margin-left: -60px;
    margin-right: -60px;
  }

  .m-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 896px) {
  .m-gallery {
    padding: 60px 16px;
  }

  /* 親の左右の余白は 35px */
  .p-about_detail .m-gallery {
    margin-left: -35px;
    margin-right: -35px;
  }

  .m-gallery .ttl {
    font-size: 1.8rem;
    width: 26px;
    margin-bottom: 32px;
  }

  .m-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

/* --------------------------------------------------------------
 * トップのアクセス欄の電話番号
 *
 * 2026-09-01 まで、住所は縦組みだった。電話番号は桁数が多く縦組みに入れると
 * 行が破綻するので、縦組みブロックの外へ出し、`position: absolute` で
 * 地図の左下に置いていた。
 *
 * **アクセス欄を横組みにしたので、外へ出しておく理由がなくなった。**
 * 外に置いたままだと、住所や経路は右にあるのに電話番号だけが
 * 地図の下に離れて見える（2026-09-01 Sone指摘）。
 * 住所のすぐ下、経路の上という並びに戻し、絶対配置をやめる。
 * -------------------------------------------------------------- */
.m-access-tel {
  text-align: left;
  line-height: 1.6;
  /* 前後の行より少しだけ間を空けて、押せる場所として見つけやすくする */
  margin-top: 4px;
  margin-bottom: 18px;
}

.m-access-tel a {
  display: block;
  /* 住所や経路（1.8rem）より大きくして、押せる場所だと分かるようにする */
  font-size: 2.2rem;
  letter-spacing: .04em;
  text-decoration: none;
}

.m-access-tel span {
  display: block;
  font-size: 1.3rem;
  opacity: .8;
}

@media only screen and (max-width: 896px) {
  .m-access-tel a {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------
 * 文字の濃さ
 *
 * 本文色そのものは build.py が土台のCSSごと差し替えている（#737373 → 濃いグレー）。
 * ここでは、色とは別に文字を薄く見せている「透過（opacity）」を戻す。
 * 土台は本文に 0.7 前後の透過をかけており、色を濃くしてもそのままでは薄いままになる。
 * -------------------------------------------------------------- */
.c-accordion__row div,
.p-about_detail .detail,
.p-forest_detail .detail,
.p-news_box .detail,
.story .detail {
  opacity: 1;
}

/* --------------------------------------------------------------
 * よくあるご質問
 *
 * 土台のアコーディオンは［見出し 230px］＋［説明文］の2カラム前提。
 * FAQは質問文そのものが見出しなので、230pxに押し込むと2行に折れて
 * 右半分が空いてしまう。質問は全幅で1行に流す。
 * -------------------------------------------------------------- */
.m-faq .c-accordion__btn .c-accordion__row {
  display: block;
}

.m-faq .c-accordion__btn .c-accordion__icon {
  width: auto;
  padding-right: 40px;
}

/* 説明文を入れていない側の空div（レイアウトの隙間になる） */
.m-faq .c-accordion__btn .c-accordion__row > div:empty {
  display: none;
}

/* 答え側は行間をゆったり */
.m-faq .c-accordion__panel .c-accordion__row {
  display: block;
  line-height: 2.1;
}

/* 答えの本文は1つの段落として流す（2026-10-21）。
   土台は `.c-accordion__panel .c-accordion__row div` に display:flex と
   justify-content: space-between を当てている（表＋説明文を左右に並べる2カラム用）。
   その中に答えを入れると、リンクなどのインライン要素の前後で文字列が別々の
   フレックス項目に割れ、PCでは3列に並び、SPでは3行に分かれていた
   （先方指摘＝/noukotsubo/ の FAQ「永代供養塔とは、何が違いますか。」の中の「永代供養」リンク）。
   文字だけの答えは項目が1つなので、この指定の前後で見た目は変わらない。 */
.m-faq .c-accordion__panel .c-accordion__row > div {
  display: block;
}

/* --------------------------------------------------------------
 * 本文まわりの細かい調整
 * -------------------------------------------------------------- */

/* 料金や祈願の一覧（txt18＝項目名／txt16＝説明）の間隔を少し詰める */
.p-about_detail .txt18 {
  margin-top: 34px;
}

.p-about_detail .txt16 {
  margin-top: 6px;
}

/* ご相談・ご予約のボタン。
   土台の .c-btn_link は「display:block / width:100%」の全幅ボタンなので、
   横に並べたいときは親側で並べる（ボタン自身に margin-left を足すと重なる）。 */
.m-btns {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.m-btns .c-btn_link {
  width: 100%;
}

@media only screen and (max-width: 896px) {
  .m-btns {
    display: block;
  }

  .m-btns .c-btn_link + .c-btn_link {
    margin-top: 12px;
  }
}

/* --------------------------------------------------------------
 * 全幅で使う写真は、必ず横いっぱいに広げる
 *
 * 土台のCSSは max-width:100% だけを指定しており、幅は画像の実寸まかせ。
 * 城山の元画像が2580px幅だったため成立していたが、
 * 画像の実寸より広い画面では右に余白（背景色）が出てしまう。
 * 幅を100%にして、どんな画面幅でも埋まるようにする。高さは比率どおり自動。
 * -------------------------------------------------------------- */
.grounds .wrap_img img,
.p-about_main img,
.section5 .link img {
  width: 100%;
  /* 属性で height を入れているので、これが無いと縦に引き伸ばされる */
  height: auto;
}

/* メインビジュアルも同じ理由で横いっぱいに。
   土台は「高さ100%・幅は成り行き」なので、横長の画面では右に隙間ができる
   （城山の元サイトでも1920px幅で同じ隙間が出る）。
   object-fit: cover が効いているので、幅を100%にしても写真はゆがまない。 */
.slide_img img {
  width: 100%;
  /* メインビジュアルは object-fit: cover で高さを合わせているので、
     ここは属性の height に引きずられないよう 100% のままにする */
  height: 100%;
}

/* --------------------------------------------------------------
 * パンくず（Figmaワイヤーフレームの要件）
 *
 * 城山には無い部品なので新規に作る。
 * 帯のすぐ下に細く置き、書体・色はサイトに合わせて主張させない。
 * -------------------------------------------------------------- */
.m-breadcrumb {
  padding: 22px 60px 0;
  box-sizing: border-box;
}

.m-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1290px;
  font-size: 1.2rem;
  line-height: 1.9;
}

.m-breadcrumb li + li::before {
  content: "／";
  margin-right: 10px;
  opacity: .5;
}

.m-breadcrumb a {
  text-decoration: none;
  opacity: .75;
}

.m-breadcrumb a:hover {
  opacity: 1;
}

/* 途中のグループ名（リンク無し・現在地ではない）も同じ薄さにする。
   2026-09-11 に aria-current を最後の項目だけにしたので、見た目はクラスで持つ */
.m-breadcrumb [aria-current="page"],
.m-breadcrumb .m-breadcrumb__group {
  opacity: .55;
}

@media only screen and (max-width: 896px) {
  .m-breadcrumb {
    padding: 16px 20px 0;
  }

  .m-breadcrumb ol {
    font-size: 1.1rem;
  }
}

/* --------------------------------------------------------------
 * スマホ下部の固定CTA（Figmaワイヤーフレームの要件）
 *
 * 供養やご祈願は「読んでいる途中で電話したくなる」ことが多いので、
 * スマホでは電話とフォームを画面下に常時出す。PCでは出さない。
 * -------------------------------------------------------------- */
/* 相談・予約への固定導線
 *
 * 城山はトップのPC/SPに固定のCTA（`.c-reservation` 227x54）を出している。
 * 妙宣寺はSPだけに出していて、**PCには常時見える導線が一つも無かった**。
 * 左ナビ6項目にも「お問い合わせ」が無いため、
 * PCではハンバーガーを開かない限りフォームに辿り着けない状態だった（2026-08-21 修正）。
 * SPは全幅の2分割バー、PCはサイドバーの右隣に小さく置く。
 */
.m-spcta {
  display: flex;
  position: fixed;
  left: 190px;
  bottom: 40px;
  z-index: 60;
  width: auto;
  box-shadow: 0 2px 16px rgba(30, 26, 22, .18);
}

.m-spcta a {
  display: block;
  padding: 15px 26px;
  font-size: 1.4rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

/* 背景色は画面幅によらず必要。
   896px以下のメディアクエリの中にだけ書いていたため、PCでは
   **背景が透明のまま白い文字**になり、白い紙面に溶けて見えなくなっていた
   （2026-08-21 実測：PCで color rgb(255,255,255) / background transparent）。 */
.m-spcta__tel {
  background: #3a332c;
}

.m-spcta__form {
  background: #6d6155;
}

@media only screen and (max-width: 896px) {
  .m-spcta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 上の白帯と同じ理由で最前面のひとつ下に出す（2026-09-01）。
       8002 では実機で直らなかった（body::after 99999 が前にいた）。
       スマートフォンの全幅バーのときだけ。PC・タブレットの浮かせた形（z-index 60）は
       画面の端に接していないので、そのままにする。 */
    z-index: 2147483646;
    /* 色は中の a（.m-spcta__tel / .m-spcta__form）が持っていて、この入れ物自体は
       透明だった。2つの a が flex:1 で隙間なく埋めるので**見た目は変わらない**が、
       入れ物自身にも色を持たせておく。iOS Safari が下端の色を採るとき、
       入れ物の background-color を見る作りだった場合に備える。 */
    background-color: #3a332c;
  }

  .m-spcta a {
    flex: 1;
    text-align: center;
    padding: 15px 4px;
    font-size: 1.4rem;
    letter-spacing: .04em;
    text-decoration: none;
    color: #fff;
  }

  /* 受付時間はスマートフォンでは出さない。
     2026-08-26、基準の文字を上げたところ「お電話で相談（受付 7:00〜18:00）」が
     nowrap のまま 280px を主張し、隣の「フォームで相談」が画面の外へ出た
     （実測＝320px幅で86px／375pxで31px／390pxで16px はみ出し。
     flex:1 を当てていても min-width:auto ＝内容の最小幅までしか縮まないため）。
     受付時間は本文・アクセス・フッターにも書いてあるので、
     幅の限られる固定バーからは外す。PCでは今までどおり出す。
     隠すのは画面下の固定バーだけにする。ドロワーの中の同じボタン
     （.c-reservation.m-menucta）は縦に積むので幅に余裕があり、受付時間を出せる。 */
  .m-spcta .m-spcta__hours {
    display: none;
  }

  /* 固定CTAの高さぶん、ページの一番下に余白を作って隠れないようにする */
  body {
    padding-bottom: 52px;
  }

  /* 「ページ上部へ」ボタンが固定CTAに重ならないよう持ち上げる。
     土台は `footer .backtotop` で 25px を当てているので、同じ強さで書かないと
     効かない（実測＝ボタン y792〜819 に対して固定CTAが y793〜844 で丸ごと重なっていた）。 */
  footer .backtotop {
    bottom: 66px;
  }

  /* メニューを開いているあいだは、下の固定CTAを出さない。
     ドロワーの中に「ご相談・ご予約はこちら」があり、二重になるため。 */
  body.blocked .m-spcta {
    visibility: hidden;
    opacity: 0;
  }

  /* 同じ理由で「ページ上部へ」も引っ込める */
  body.blocked footer .backtotop {
    visibility: hidden;
    opacity: 0;
  }
}

/* --------------------------------------------------------------
 * 料金の比較表（Figmaワイヤーフレームの要件）
 *
 * 城山には表組みの部品が無いので新規に作る。罫線は細く、色は本文と同じ。
 * スマホでは横に潰さず、1行ぶんを縦に積んで読ませる（項目名は data-label から出す）。
 * -------------------------------------------------------------- */
.m-table {
  margin-top: 30px;
  overflow-x: auto;
}

.m-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  line-height: 1.9;
}

.m-table th,
.m-table td {
  border: 1px solid #d8d2c8;
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}

.m-table thead th {
  background: #f2f0ec;
  font-weight: normal;
  white-space: nowrap;
}

.m-table tbody td:first-child {
  font-size: 1.6rem;
  white-space: nowrap;
}

.m-table tbody td:nth-child(2) {
  white-space: nowrap;
}

.m-table__note {
  margin-top: 16px;
  line-height: 1.9;
}

/* 永代供養の料金表だけ、2列目（費用）の折り返しを許す（2026-10-21 Sone決定）。
   既定の `.m-table tbody td:nth-child(2)` は nowrap。のうこつぼの「（管理費（護寺会費）年3,000円）」が
   1行のまま列を 208px→312px に押し広げ、ほかの3列が細くなって表が縦に伸びていた。
   割ってよい所は build.py の nobr() の塊の間だけ（金額の途中では割らない）。
   同じ詳細度の既定より後ろに置くこと（順番で勝っている）。 */
.m-table--fee-wrap tbody td:nth-child(2) {
  white-space: normal;
}

.m-table__nobr {
  white-space: nowrap;
}

/* セルの中に添える注記（「※霊園・寺院によって異なります」）。
   本文の下に1行で置く。block にしているのは、PCでもスマートフォンでも
   「本文＋注記」の2行に必ず割れるようにするため（<br> だと本文の折り返し位置に
   引きずられて3行4行になる）。 */
.m-table__cellnote {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
  line-height: 1.7;
  opacity: .75;
}

@media only screen and (max-width: 896px) {
  .m-table thead {
    display: none;
  }

  .m-table table,
  .m-table tbody,
  .m-table tr,
  .m-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .m-table tr {
    border: 1px solid #d8d2c8;
    margin-bottom: 16px;
  }

  .m-table td {
    border: 0;
    border-bottom: 1px dotted #d8d2c8;
    padding: 12px 16px;
    white-space: normal;
  }

  .m-table tr td:last-child {
    border-bottom: 0;
  }

  .m-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 1.1rem;
    letter-spacing: .1em;
    opacity: .6;
    margin-bottom: 4px;
  }

  .m-table tbody td:first-child,
  .m-table tbody td:nth-child(2) {
    white-space: normal;
  }
}

/* --------------------------------------------------------------
 * 字間を揃える
 *
 * 土台のCSSには letter-spacing: -2px（16pxの文字で -0.125em）が入っている箇所がある。
 * 城山は短い項目説明にだけ使っていたので目立たなかったが、
 * 妙宣寺は説明文が長いため、そこだけ極端に詰まって見えていた。
 * サイト全体の本文（0em）に揃える。
 * -------------------------------------------------------------- */
.p-about_detail .txt1,
.p-forest_detail .txt1 {
  letter-spacing: 0;
}

@media only screen and (max-width: 896px) {
  .policy_detail .text,
  .policy_detail .text.info span {
    letter-spacing: 0;
  }
}

/* 下層ページの本文に置く地図（アクセスページ） */
.m-map {
  margin-top: 30px;
  aspect-ratio: 16 / 9;
  border: 1px solid #d8d2c8;
}

.m-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media only screen and (max-width: 896px) {
  .m-map {
    aspect-ratio: 4 / 3;
  }
}

/* お問い合わせページの節見出し（Figmaワイヤーフレームの3節構成） */
.m-contact__ttl {
  font-size: 2rem;
  font-weight: normal;
  margin: 60px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d8d2c8;
}

.m-contact__tel a {
  font-size: 3.2rem;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-block;
  margin-right: 16px;
}

.m-contact__tel span {
  font-size: 1.3rem;
  opacity: .75;
}

@media only screen and (max-width: 896px) {
  .m-contact__ttl {
    font-size: 1.7rem;
    margin: 44px 0 16px;
  }

  .m-contact__tel a {
    font-size: 2.6rem;
    display: block;
    margin: 0 0 4px;
  }
}

/* --------------------------------------------------------------
 * トップの3セクション（Figmaワイヤーフレームの構成）
 *
 * 城山には無い並びなので新規に作る。
 * 縦組みの見出し・細い罫線・広い余白という、サイト全体の見せ方に合わせている。
 * -------------------------------------------------------------- */
/* 文字の階層を5段階に固定する（2026-08-20 整理）
 *
 * 直す前は 12/13/14/15/17/20/22px の7種類が混在し、行間・字間もバラバラだった。
 * さらに、これらの自作パーツだけ**文字色が純黒**で、サイト全体の #413b36 から浮いていた
 * （土台は body に色指定が無く、各パーツが個別に色を当てる作りのため）。
 *
 *   Lv1 セクション見出し（縦組みh2） 2.2rem / SP 1.8rem
 *   Lv2 カード見出し               1.8rem
 *   Lv3 小見出し・署名             1.6rem
 *   Lv4 本文                     1.5rem
 *   Lv5 補助（番号・リンク・注記）    1.3rem・#6b635b
 *
 * 余白は8の倍数だけを使う：8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 120
 */
.m-services,
.m-greet,
.m-feats,
.m-gallery,
.m-cta {
  padding: 120px 60px;
  box-sizing: border-box;
  color: #413b36;
}

.m-services .ttl,
.m-greet .ttl,
.m-feats .ttl,
.m-gallery .ttl,
.m-cta .ttl {
  margin: 0 auto 64px;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  /* 縦組みの列の幅。文字と同じ rem で持つ（1440px以下では 33px で従来どおり）。
     px で固定すると、1600px以上で基準の文字を大きくしたときに字だけが太くなって
     列から食み出す（実測＝2560pxで7px）。 */
  width: 3.3rem;
}

/* --- サービス導線カード */
.m-services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1290px;
  margin: 0 auto;
}

/* 副次の2枚（ご祈願・人生相談）。
   直す前は見出しの字を 20px→18px と落としただけで、写真の大きさは主力と同じだった。
   字の大きさで格を作ると「サイズがバラバラなだけ」に見えるので、
   見出しは主力と同じにして、**カードの幅**で格を付ける。 */
.m-services__grid--sm {
  margin-top: 80px;
  max-width: 980px;
}

.m-svc {
  display: block;
  text-decoration: none;
}

.m-svc__img {
  display: block;
  overflow: hidden;
}

.m-svc__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s ease;
}

.m-svc:hover .m-svc__img img {
  transform: scale(1.04);
}

.m-svc__body {
  display: block;
  padding-top: 24px;
}

/* カードのタイトルは横書き。縦組みは帯やセクション見出しに任せ、
   ここは読みやすさを優先する。 */
/* Lv2 */
.m-svc__ttl {
  display: block;
  writing-mode: horizontal-tb;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Lv4 */
.m-svc__txt {
  display: block;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .05em;
}

/* Lv5 */
.m-svc__more {
  display: block;
  margin-top: 16px;
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: .12em;
  color: #6b635b;
}

.m-svc__more::after {
  content: " →";
}

.m-svc--sm .m-svc__ttl {
  font-size: 1.8rem;
}

/* --- 住職ごあいさつ */
.m-greet__inner {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  max-width: 1290px;
  margin: 0 auto;
  align-items: start;
}

.m-greet__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* Lv4。指定が無く 14px・行間1.5 のままで、他の本文（1.5rem・行間2）と揃っていなかった */
.m-greet__body .detail {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .05em;
}

/* Lv3 */
.m-greet__name {
  margin-top: 32px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
}

.m-greet__btn {
  margin-top: 40px;
  /* px で持つと html{font-size} の段階拡大に追従せず、広い画面で文字だけがはみ出す。
     36.5rem＝897px以上の基準（71.875%＝11.5px）で 419.75px。見た目は変えていない。 */
  max-width: 36.5rem;
}

/* --- 選ばれている点 */
.m-feats__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1290px;
}

.m-feats__list li {
  border-top: 1px solid #d8d2c8;
  padding-top: 16px;
}

/* Lv5（番号）。opacity で薄めると罫線まで薄く見えるので、色で決める */
.m-feat__no {
  display: block;
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: .2em;
  color: #6b635b;
  margin-bottom: 8px;
}

/* Lv3 */
.m-feat__ttl {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

/* Lv4 */
.m-feat__txt {
  display: block;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .05em;
}

/* --- ご相談・ご予約（トップとおしらせ記事の末尾）
 *
 * 素の `.wrap` に置いていたときは、土台のCSSが `.ttl` も `.detail` も
 * 親セレクタ付きでしか定義していないため、見出しがブラウザ既定の太字・黒
 * （実測 font-weight 700 / rgb(0,0,0) / 16.38px）になり、`.c-btn_link` が
 * 全幅1290pxで縦に2つ並んでいた。他の自作セクションと同じ骨格に揃える。
 */
.m-cta__inner {
  max-width: 98rem;
  margin: 0 auto;
}

.m-cta__lead {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: .05em;
  text-align: center;
}

/* ボタンは .m-btns が横に並べる。ここでは列の幅だけ決める */
.m-cta .m-btns {
  max-width: 88rem;
  margin-left: auto;
  margin-right: auto;
}

/* 土台の .c-btn_link は右端 25px に矢印を置く。文字が長いボタンは中央寄せの文字が
   そこまで伸びて矢印に触れるので、矢印のぶんだけ内側に余白を持たせる。 */
.m-cta .c-btn_link,
.m-cta-inline .c-btn_link {
  padding-left: 4rem;
  padding-right: 4rem;
}

@media only screen and (max-width: 1024px) {
  .m-feats__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .m-greet__inner {
    grid-template-columns: 300px 1fr;
    gap: 36px;
  }
}

@media only screen and (max-width: 896px) {
  .m-services,
  .m-greet,
  .m-feats,
  .m-gallery,
  .m-cta {
    padding: 64px 20px;
  }

  /* 幅が狭いと中央揃えの本文は行の頭が揃わず読みにくい。SPでは左揃えにする */
  .m-cta__lead {
    text-align: left;
  }

  .m-services .ttl,
  .m-greet .ttl,
  .m-feats .ttl,
  .m-gallery .ttl,
  .m-cta .ttl {
    font-size: 1.8rem;
    width: 2.6rem;
    margin-bottom: 40px;
  }

  .m-services__grid {
    gap: 48px;
  }

  .m-services__grid--sm {
    margin-top: 48px;
    max-width: none;
  }

  .m-feats__list {
    gap: 40px;
  }

  .m-services__grid,
  .m-services__grid--sm {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .m-services__grid--sm {
    margin-top: 36px;
  }

  .m-greet__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .m-greet__img {
    max-width: 280px;
    margin: 0 auto;
  }

  .m-feats__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* --------------------------------------------------------------
 * 縦組みは見出し（h2）だけにする
 *
 * 土台は本文・小見出し・リンクまで縦組みにしているが、
 * 読みやすさを優先して、縦に組むのはセクション見出し（h2）に限る。
 * ヘッダーとフッターのナビは構造の一部なので、縦のまま残す。
 * -------------------------------------------------------------- */

/* 下層ページの大見出し（h3） */
.p-about_ttl01 {
  writing-mode: horizontal-tb;
  width: auto;
  margin: 0 auto 8px;
  max-width: 1290px;
  text-align: left;
}

/* ------------------------------------------------------------------
   お問い合わせフォーム（フォームメーラー・HTML設置型）

   土台（城山）のフォームCSSは「入力画面 → 確認画面」の2枚組が前提で、
   入力画面では送信ボタンを隠す作りになっている（.p-contact .p-contact_wrapbtn { display:none }）。
   妙宣寺は1枚で送信するので、ここで出し直す。
   ※ 静的HTML版のダミーフォームでも同じ理由でボタンが出ていなかった（2026-08-20 修正）。
------------------------------------------------------------------ */
.p-contact .p-contact_wrapbtn {
    display: block;
    margin-top: 56px;
}

/* 入力欄の見た目。
   土台は `.p-contact.c-form form textarea` のように詳細度の高いセレクタで
   `border: transparent` を当てているので、こちらも同じ強さで書かないと勝てない。
   実測（2026-08-21）＝枠線が付いていたのは text / tel / email だけで、
   textarea・日付・時間の選択は枠が無く、欄ごとに見た目が違っていた。 */
.p-contact.c-form form input[type="text"],
.p-contact.c-form form input[type="tel"],
.p-contact.c-form form input[type="email"],
.p-contact.c-form form input[type="date"],
.p-contact.c-form form select,
.p-contact.c-form form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid #d8d2c8;
    border-radius: 0;
    background-color: #fff;
    color: #413b36;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.7;
    -webkit-appearance: none;
    appearance: none;
}

.p-contact.c-form form textarea {
    resize: vertical;
    height: 250px;
}

/* 選択欄だけは、押せることが分かるように下向きの印を出す（appearance を消したため） */
.p-contact.c-form form select {
    background-image: linear-gradient(45deg, transparent 50%, #6b635b 50%),
                      linear-gradient(135deg, #6b635b 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.p-contact.c-form form input:focus,
.p-contact.c-form form select:focus,
.p-contact.c-form form textarea:focus {
    outline: none;
    border-color: #413b36;
}

/* 入力欄の下に置く補足。土台が `.p-contact_box p` の頭に「・」を出すので、それを止める */
.p-contact_box .m-formnote::before {
    content: none;
}

.p-contact_box .m-formnote {
    padding-left: 0;
    margin-top: 8px;
    font-size: 1.3rem;
    color: #6b635b;
    text-align: left;   /* 土台が中央寄せにしているので、入力欄の左端に揃える */
}

/* 必須のしるし */
.p-contact_label span {
    margin-left: 12px;
    padding: 3px 10px;
    background-color: #413b36;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* 同意のチェックと送信ボタン */
.p-contact_wrapbtn .detail {
    text-align: center;
    margin-bottom: 28px;
    padding-left: 0;
}

.p-contact_wrapbtn label {
    cursor: pointer;
}

.p-contact_wrapbtn input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
}

.p-contact_wrapbtn .c-btn_link {
    max-width: 420px;
    margin: 0 auto;
}

.p-contact_wrapbtn .c-btn_link:hover {
    background-color: #413b36;
    color: #fff;
}

/* フォームについての添え書き（確認画面のこと・設定待ちのお知らせ） */
.m-formnote {
    margin-top: 20px;
    font-size: 1.4rem;
    color: #6b635b;
    text-align: center;
}

/* ------------------------------------------------------------------
   おしらせ 記事ページ（WordPress版）

   余白は**下層ページ（p-about_detail）の刻みに合わせる**（2026-08-24 調整）。
   直す前は、パンくずの下端と日付の上端がぴったり接していて（実測 0px。
   下層は h3 の padding-top が SP 60px / PC 120px）、記事の頭が
   パンくずにめり込んで見えていた。あわせて見出しの前後と段落間も、
   下層の `.p-about_ttl02`（SP 17px・下 32px ／ PC 19px・下 52px）と
   本文（行間2.0）にそろえる。
------------------------------------------------------------------ */
.p-news_single {
    max-width: 840px;
    margin: 0 auto;
    /* 上＝下層の h3 と同じ 60px（PCは下で 120px にする） */
    padding: 60px 20px 40px;
    box-sizing: border-box;
}

.p-news_single .date {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: #6b635b;
    margin-bottom: 16px;
}

.p-news_single .ttl {
    font-size: 2.4rem;
    line-height: 1.7;
    color: #413b36;
    margin-bottom: 40px;
}

.p-news_single img {
    max-width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.p-entry {
    font-size: 1.6rem;
    line-height: 2.1;
    color: #413b36;
    margin-bottom: 64px;
}

/* 段落と段落のあいだは1行ぶん。下層は本文中の `<br><br>` で
   ちょうど1行ぶん（28px）空いているので、それと同じ見え方にする。 */
.p-entry p {
    margin-bottom: 2em;
}

/* 見出しは、前を広く・後ろを狭く。下層の「節見出し → 本文」と同じ関係にする。 */
.p-entry h2,
.p-entry h3 {
    font-size: 1.7rem;
    line-height: 1.8;
    margin: 3em 0 1.2em;
    color: #413b36;
}

/* 最初の見出しの上は、タイトルとの間隔が二重にならないよう詰める */
.p-entry > h2:first-child,
.p-entry > h3:first-child {
    margin-top: 0;
}

.p-news_single .c-btn_link {
    max-width: 320px;
    margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
    .p-news_single .ttl {
        font-size: 2rem;
    }
}

/* PCは下層ページと同じ 120px から始める。
   ※ この上に 1024px 以下の指定があるので、必ず min-width で範囲を切ること。 */
@media only screen and (min-width: 897px) {
    .p-news_single {
        padding-top: 120px;
        padding-bottom: 56px;
    }

    .p-news_single .ttl {
        margin-bottom: 48px;
    }

    .p-entry h2,
    .p-entry h3 {
        font-size: 1.9rem;
    }
}

/* ------------------------------------------------------------------
   メニュー（ドロワー）の中の相談導線（2026-08-24）

   画面下にいつも出している固定CTA（.m-spcta）は「お電話で相談（受付 7:00〜18:00）」と
   「フォームで相談」の2つ。メニューの中だけがフォーム1つだったので、
   **種類・並び順・文言・色をすべて固定CTAに合わせる**。
   色は .m-spcta__tel / .m-spcta__form をそのまま使い回すので、
   どちらか一方だけ変わることが起きない。

   土台の `.c-reservation a` は「幅220px・高さ54px・背景#222」の1本ボタン用。
   詳細度が (0,2,0) なので、こちらは `.c-reservation.m-menucta a` (0,3,0) で上書きする。
------------------------------------------------------------------ */
.c-reservation.m-menucta {
    display: flex;
}

.c-reservation.m-menucta a {
    flex: 1;
    width: auto;
    height: auto;
    padding: 15px 4px;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    /* 固定CTAと同じく折り返さない。これが無いと「お電話で相談（受付 7:00〜18:00）」が
       2行になって高さが 51px → 72px になり、下に出ている固定CTAと見た目がそろわない。
       折り返さないと flex は文字の長さで幅を決めるので、実測 390px 幅で
       電話 244.8px ／ フォーム 145.2px と、固定CTAとまったく同じ分かれ方になる。 */
    white-space: nowrap;
    /* 土台の #222 を解除。色は下の2行が持つ（先に書くと打ち消してしまう） */
    background-color: transparent;
}

.c-reservation.m-menucta .m-spcta__tel {
    background-color: #3a332c;
}

.c-reservation.m-menucta .m-spcta__form {
    background-color: #6d6155;
}

/* PCでは固定CTA（実測 440px）と同じ幅で、サイドの下に置く */
@media only screen and (min-width: 897px) {
    .c-reservation.m-menucta {
        width: 440px;
    }
}

/* メニューを開いているあいだは、画面下の固定CTAを引っ込める。
   ドロワーの中に同じ2つが出るため、そのままだと二重になる。
   もとは 896px 以下にしか書いていなかったので、PCでは重なっていた（2026-08-24 修正）。 */
body.blocked .m-spcta,
body.blocked footer .backtotop {
    visibility: hidden;
    opacity: 0;
}


/* --------------------------------------------------------------
 * PCの左サイドバー｜画面の高さが低いときの重なり（2026-08-20 修正）
 *
 * 土台の .menu_aside は flex（縦・space-between）で、子が flex-shrink:1。
 * 画面の高さが足りないと各ブロックを縮めるが、中の縦組みロゴは高さ142pxで
 * 縮まないため、枠からはみ出して下のナビに重なる。
 * 実測：画面高 860px＝セーフ／820px＝19px／780px＝59px／700px＝132px 重なる。
 * ノートPC（1366x768・MacBook Air 13"）は日常的にこの高さに入る。
 *
 * 縮めるのをやめ、入りきらないときだけサイドバーの中をスクロールさせる。
 * -------------------------------------------------------------- */
@media print, screen and (min-width: 1025px) {
    /* サイドバー自体は動かさない。寺紋ロゴは上、ハンバーガーは下に固定したまま、
       入りきらないぶんはナビの一覧だけを中でスクロールさせる。
       （サイドバー全体をスクロールにすると、ハンバーガーが画面外に出てしまう） */
    .menu_aside {
        overflow: hidden;
    }

    .menu_aside > .logo,
    .menu_aside > .menu_btn {
        flex-shrink: 0;
    }

    /* 2026-09-11：flex-grow を 0 にした（旧 1 1 auto）。伸ばすと画面の余った高さが
       寺紋↔縦メニュー／縦メニュー↔ハンバーガーの間に出て、2560x1440 で 185.6px 空いていた。
       縮むほう（shrink 1・min-height 0・中でスクロール）は従来どおり。
       余りの行き先は下の「サイドバー｜1部品としての拡縮とバランス」の節を参照 */
    .menu_aside_detail {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* 余白があるときは中央に、入りきらないときは上詰めにする（safe center）。
           ただの center だと、あふれたときに上が画面外へ出て触れなくなる。 */
        display: flex;
        flex-direction: column;
        justify-content: safe center;
        /* 送れることが分かるよう、細く控えめなスクロールバーを出す。
           消してしまうと、低い画面で最後の項目に気づけない。 */
        scrollbar-width: thin;
        scrollbar-color: #d8d2c8 transparent;
    }

    .menu_aside_detail::-webkit-scrollbar {
        width: 3px;
    }

    .menu_aside_detail::-webkit-scrollbar-thumb {
        background: #d8d2c8;
        border-radius: 3px;
    }
}

/* 高さの低い画面では、なるべくスクロールせずに収まるよう項目の間隔を詰める。
   あわせて、寺紋ロゴとナビが接してしまわないよう最低限の余白を確保する
   （高い画面では space-between が空けてくれるが、低い画面では詰まりきる）。 */
/* 項目の間隔（margin-bottom）はここには書かない。
   このセレクタ（0,1,2）は土台（0,3,3）に負けて効かない。
   いまは下の「サイドバーの拡縮とバランス」の節でまとめて持っている。 */
/* 2026-09-09、画面高ごとに px を打ち分ける下の2ブロック（max-height 880 / 780）は
   全部やめた。ロゴの余白だけが効いてハンバーガー側は詳細度で負けており、
   **低い画面で上下の余白が非対称になっていた**（実測＝1366x628 で上25px／下3px）。
   いまは1つの基準（--aside-u）から上下対称に組み立てている。 */

/* --------------------------------------------------------------
 * 大きな画面での文字サイズ（2026-08-20）
 *
 * 土台（城山）は本文を縦組みにする前提なので、画面がいくら広くても
 * 文字は 18px 固定でよかった（縦に伸びるので間延びしない）。
 * 妙宣寺は本文を横組みにしたため、広い画面では文字だけが取り残されて
 * 極端に小さく見える（2560px幅で本文18px＝画面幅の 7‰）。
 *
 * 文字サイズの指定は土台・上書きとも全て rem（html は 62.5%＝10px基準）なので、
 * 基準の1か所を上げれば全体が同じ比率で大きくなる。
 * 箱の寸法は px のままなので、あふれないことを 1920px・2560px × 12ページで実測して確認済み。
 * -------------------------------------------------------------- */
@media screen and (min-width: 1600px) {
    html {
        font-size: 68.75%;   /* 11px基準 → 本文 19.8px */
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 75%;      /* 12px基準 → 本文 21.6px */
    }
}

@media screen and (min-width: 2400px) {
    html {
        font-size: 81.25%;   /* 13px基準 → 本文 23.4px */
    }
}

/* --------------------------------------------------------------
 * トップ「住職ごあいさつ」「妙宣寺について」の立て直し（2026-08-20）
 *
 * 実測で出ていた不具合：
 *  ・住職ごあいさつ＝写真(570px)と本文(287〜338px)の高さが揃わず、
 *    写真の下だけ 232〜283px 空いていた（align-items:start のため）
 *  ・妙宣寺について＝5列固定でカード幅が 208〜232px しかなく、
 *    「車椅子でもお参りできます」「宗旨・宗派を問いません」だけ見出しが2行になり、
 *    説明文の開始位置が段違いになっていた（見出し高 38px と 75px が混在）
 *  ・どちらも中身の最大幅が 1290px 固定で、大きな画面ほど窮屈に見えていた
 * -------------------------------------------------------------- */

/* 写真と本文を中央で揃える。写真の下だけ空く状態を解消する */
.m-greet__inner {
    align-items: center;
}

/* ボタンは本文の幅なりに置く（420px固定だと本文枠の中で中途半端に余る）。
   31.3rem＝897px以上の基準（71.875%＝11.5px）で 359.95px。見た目は変えずに rem 化した。 */
.m-greet__btn {
    max-width: 31.3rem;
}

/* カードの見出しは2行ぶんの高さで揃え、説明文の開始位置を一直線にする。
   狭い幅では「車椅子でもお参りできます」「宗旨・宗派を問いません」だけが2行になり、
   説明文の開始位置が段違いになるため。 */
.m-feat__ttl {
    min-height: calc(1.7em * 2);
}

/* 2行ぶんの高さ確保が要るのは「複数列で、かつ列が狭い」帯域だけ。
   1439px超はどの見出しも1行に収まり（実測）、896px以下は1列なので折り返さない。
   それ以外で確保したままだと、見出しと説明文のあいだが1行ぶん空いて見える。 */
@media screen and (min-width: 1440px),
       screen and (max-width: 896px) {
    .m-feat__ttl {
        min-height: 0;
    }
}

/* 1025〜1279px は5列だとカード幅が125〜176pxしかなく窮屈なので3列に落とす。
   （min-width も指定して、896px以下の1列指定を上書きしないようにする） */
@media only screen and (min-width: 897px) and (max-width: 1279px) {
    .m-feats__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 本文の行が長くなりすぎないようにする。
   日本語は1行40字前後が読みやすい上限で、それを超えると視線が戻れなくなる。
   ただし**列そのもの**を絞ること。中の文字だけ絞ると、列の右側が余って
   ブロック全体の中心が縦組み見出しの中心とずれる。

   ※ この指定より前に 1024px・896px の1列指定があるので、
     必ず min-width で範囲を切ること。切らないとSPの1列指定を上書きして
     380px＋40em の2列になり、横スクロールが出る（2026-08-20に一度やった）。 */
@media screen and (min-width: 1025px) {
    .m-greet__inner {
        grid-template-columns: 380px minmax(0, 40em);
        justify-content: center;
    }
}

/* 大きな画面では中身の幅も広げる（基準サイズだけ上げても箱が1290pxのままだと窮屈）。
   ごあいさつは写真を大きくして、本文の行長は 40em で止める。
   カード列は横に伸びても問題ないので、もう少し広く取る。 */
@media screen and (min-width: 1920px) {
    .m-greet__inner {
        grid-template-columns: 460px minmax(0, 40em);
        max-width: none;
    }

    .m-feats__list,
    .m-services__list {
        max-width: 1560px;
    }
}

@media screen and (min-width: 2400px) {
    .m-greet__inner {
        grid-template-columns: 520px minmax(0, 40em);
        max-width: none;
    }

    .m-feats__list,
    .m-services__list {
        max-width: 1760px;
    }
}

/* FAQの質問見出し。2026-09-10 に h5 → h3 へ上げた（節見出しが h2 になったため）。
   土台は `.c-accordion__icon h4 { font-weight: normal }` とタグ込みで書いてあるので、
   タグを変えると太字が戻る。それを引き継ぐ。

   **font-size も要る。** この見出しには文字サイズを決めるクラスが無く、
   ブラウザ既定の h5＝0.83em がそのまま効いていた
   （実測 1440px＝18.14px ＝ 入れ物 21.85px × 0.83 ／ 390px＝14.32px）。
   h3 にすると既定が 1.17em になり一回り大きくなるので、0.83em を明示して
   **見た目を 1px も変えない**。入れ物側（`.c-accordion__icon`）が
   PC 1.9rem / SP 1.5rem と breakpoint で変わるため、em で書けば1行で両方に効く。 */
.c-accordion__icon h3 {
    font-weight: normal;
    font-size: .83em;
}

/* --------------------------------------------------------------
 * ロゴのスクロール切り替え（2026-08-20 復元）
 *
 * 土台（城山）は .logo の中にロゴを2枚重ね、スクロールで入れ替える作り。
 *   .js-top1 = 大きいロゴ（初期表示）  .js-top2 = 小さいロゴ（スクロール後）
 *   ナビ一覧 .menu_aside_detail.js-top2 もスクロール後に現れる
 * 妙宣寺はロゴが1枚しかなく、しかもナビに js-top1 を付けていたため
 * 「スクロールしても何も変わらない・ナビが出っぱなし」になっていた。
 *
 * 城山はロゴ画像2枚だが、妙宣寺は寺紋SVG＋寺名なので、
 * 大＝寺紋＋縦組みの寺名／小＝寺紋だけ、で作る。
 * -------------------------------------------------------------- */
/* 城山は「大・小の2枚をどちらも絶対配置で同じ場所に重ね、箱の高さは小ロゴぶん」にしている
   （実測：.logo=150x62、js-top1=70x272 と js-top2=70x62 がどちらも absolute の 40,40）。
   こうしないと
     ・切り替わった瞬間に小ロゴが左へ飛ぶ（大＝中央 / 小＝左端）
     ・箱が大ロゴの高さのまま残り、小ロゴの下に空白ができる
   という2つのズレが出る。実際どちらも起きていた（2026-08-20 修正）。 */
@media print, screen and (min-width: 1025px) {
    header .menu_aside .logo .m-sitename {
        position: relative;
        /* 高さは寺紋ぶん。2026-09-09 に 42px 固定から --aside-kamon に変えた
           （サイドバーの3要素をまとめて拡縮するため。既定値は 42px 相当） */
        height: var(--aside-kamon, 42px);
    }

    header .menu_aside .logo .m-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* SP・タブレット
 *
 * 土台はロゴの位置を `header .menu_aside .logo img { position:relative; left/top }` と
 * **img 名指しで**決めている。妙宣寺のロゴは img ではなく span＋SVGなので、
 * その指定がまったく当たらず、PC用の中央寄せ（left:50%＋translateX(-50%)）だけが効いて
 * **左に -17px はみ出していた**（2026-08-20 修正）。
 * 土台が img に与えているのと同じ値を .m-logo に当て直す。
 */
@media only screen and (max-width: 1024px) {
    header .menu_aside .logo .m-sitename {
        position: relative;
        height: auto;
    }

    header .menu_aside .logo .m-logo {
        position: relative;
        top: 20px;
        left: 25px;
        transform: none;
    }

    /* 下層（ex-top）は土台も別の値を当てている */
    header.ex-top .menu_aside .logo .m-logo {
        top: 15px;
        left: 20px;
    }
}

.m-logo--sm .m-kamon {
    width: 42px;
    height: 42px;
}

/* 小さいほうは寺紋だけ。寺名の文字は出さない */
.m-logo--sm .m-logo__text {
    display: none;
}

@media only screen and (max-width: 1024px) {
    /* 下層のヘッダーロゴはこの指定が効く（.m-kamon 単独より詳しいため）。
       城山のSPロゴは52px。34pxでは小さすぎたので46pxに揃える。 */
    .m-logo--sm .m-kamon {
        width: 46px;
        height: 46px;
    }
}

/* 画面には出さないが、読み上げ・検索エンジンには残す文字 */
.u-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------
 * トップのメインビジュアル｜上端の暗幕（2026-08-20）
 *
 * 写真の上に白いロゴとハンバーガーが乗る。城山のFV写真は暗く成立していたが、
 * 妙宣寺は青空の写真が多く、白文字の比が 2.07〜2.39 しか出ていなかった（実測）。
 * 写真全体は明るいまま残したいので、**上端の帯だけ**を暗くする。
 * -------------------------------------------------------------- */
.slide {
    position: relative;
}

.slide::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(20, 18, 15, .58) 0%,
        rgba(20, 18, 15, .44) 62%,
        rgba(20, 18, 15, 0) 100%);
}

/* ロゴとスクロール表示は暗幕より前に出す */
.slide_img .logo,
.slide .c-scroll {
    position: relative;
    z-index: 3;
}

/* ロゴの周りだけ、もう一段落とす。
   メインビジュアルは5枚を切り替えるので、どの写真でも成立させる必要がある。
   帯状の暗幕を強くすると写真全体が暗くなってしまうため、
   ロゴが載る左上だけを楕円で沈める。「明るく」を保ったまま白ロゴが立つ。 */
.slide_img .logo::before {
    content: "";
    position: absolute;
    left: -34px;
    top: -30px;
    width: 190px;
    height: 300px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 42% 30%,
        rgba(18, 16, 13, .58) 0%,
        rgba(18, 16, 13, .34) 55%,
        rgba(18, 16, 13, 0) 100%);
}

/* SP・タブレットでは写真の上に縦組みのロゴが乗る（実測 y=20〜178）。
   グラデが消えきる位置がロゴの下端より上だと、そこだけ白文字が浮くので余裕を持たせる。 */
@media only screen and (max-width: 1024px) {
    .slide::after {
        height: 320px;
    }
}

/* 本文の途中に置く相談導線。
   末尾の「ご相談・ご予約」より軽く見せる（見出しなし・上下の余白は控えめ）。 */
.m-cta-inline {
    margin-top: 56px;
    margin-bottom: 56px;
}

.m-cta-inline .detail {
    margin-bottom: 24px;
}

.m-cta-inline .m-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 幅は rem で持つ。土台の .c-btn_link は font-size が rem・height が px 固定なので、
   幅を px で固定すると広い画面（1600px以上で基準の文字を大きくしている）で
   文字だけが大きくなって折り返し、枠の下へ落ちる。実測＝1920/2560px で42〜43px落ちていた。 */
.m-cta-inline .c-btn_link {
    max-width: 44rem;
}

@media only screen and (max-width: 896px) {
    .m-cta-inline {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .m-cta-inline .m-btns {
        display: block;
    }

    .m-cta-inline .c-btn_link {
        max-width: none;
    }

    .m-cta-inline .c-btn_link + .c-btn_link {
        margin-top: 12px;
    }

    /* 土台の .c-btn_link は高さ45px・行間43pxの固定。
       「お電話で相談する（受付 7:00〜18:00）」は21文字あり、375px幅の端末では
       1行に収まらず、枠の下へ30px落ちていた（実測）。
       自作のCTAだけ高さを内容にまかせる。縦積みなので2行になっても崩れない。 */
    .m-cta .c-btn_link,
    .m-cta-inline .c-btn_link {
        height: auto;
        min-height: 45px;
        line-height: 1.6;
        padding: 12px 3rem;
    }
}

/* ============================================================ 閉じるボタン（×）
   PC（1025px以上）で、×の2本が同じ点で交わらず、左右に1.8pxずれていた（実測）。

   .menu_btn の中は幅1px・高さ40pxの縦線が3本。これを .menu_btn ごと90度回して
   3本線に見せ、開いたときは line1 を右へ、line3 を左へ translateX して×にする。
   土台は ±11px を当てているが、3本は inline-block なので**HTMLの改行由来の空白文字**
   が間隔に混ざり、実際の中心間の距離は 11.9px だった。0.9px ずつ足りず、
   交差点が中心から外れて左右非対称に見えていた。

   空白文字の幅は書体と文字サイズで変わる（＝本番の書体を決めると再びずれる）ので、
   値を 11.9px に直すのではなく font-size を 0 にして空白そのものを消し、
   間隔を「幅1px＋左右のmargin 3.5px×2＝8px」に確定させる。
   .menu_btn の中に文字は無いので、文字サイズを0にしても失うものはない。

   ※ かつてここに「1024px以下は現状でぴったり合っている（実測ズレ 0px）」と書いていたが、
   2026-09-10 に測り直したところ **2.750px ずれていた**。下のブロックで同じ形に直してある。 */
@media only screen and (min-width: 1025px) {
    header .menu_aside .menu_btn {
        font-size: 0;
    }

    /* **移動量は「3本の間隔」から出す。固定pxを置かない**（2026-09-09）。
       line1 と line3 の中心の距離は「線幅1px ＋ 間隔×2」の2倍なので、
       各々が動くべき量は 1px + 間隔×2。間隔が 3.5px のとき 8px になり、
       これが下の 8px（2026-08-26 に確定させた値）と一致する。
       間隔を基準連動にしたのに 8px を固定で残していたため、
       ×の2本が同じ点で交わらなくなっていた（実測＝1920x1080 で 4.0px、
       2560x1440 で 4.7px のずれ。変更前は全サイズ 0px）。
       `round()` を持たないブラウザは1つ前の 8px を使う。 */
    .menu_btn.active .line1 {
        -webkit-transform: translateY(0) translateX(8px) rotate(45deg);
        transform: translateY(0) translateX(8px) rotate(45deg);
        transform: translateY(0)
                   translateX(calc(1px + 2 * round(nearest, calc(var(--aside-u) * 0.2), 0.5px)))
                   rotate(45deg);
    }

    .menu_btn.active .line3 {
        -webkit-transform: translateY(0) translateX(-8px) rotate(-45deg);
        transform: translateY(0) translateX(-8px) rotate(-45deg);
        transform: translateY(0)
                   translateX(calc(-1px - 2 * round(nearest, calc(var(--aside-u) * 0.2), 0.5px)))
                   rotate(-45deg);
    }
}

/* ---- 同じ考え方をスマートフォン・タブレット（1024px以下）にも通す（2026-09-10）
   旧メモの「1024px以下は現状でぴったり合っている」は誤りだった。**実測 2.750px ずれる。**

   土台は移動量を左右で違う固定値で書いている
   （≤1024 は line1 +10px / line3 -8px、≤896 は line1 +8px / line3 -6px）。
   左右差 2px ぶん交点が中心から外れる。加えて3本は inline-block なので
   HTMLの改行由来の空白文字（実測 2.625px＝本文書体16.1px のスペース幅）が間隔に混ざり、
   ずれは 2.750px になっていた（1024/896/768/640/375px × DPR1/2 の20通りすべてで同じ値）。

   直し方はPC（上のブロック）と同じ。
     1. font-size: 0 で空白文字を消し、間隔を「線幅1px ＋ 左右のmargin」だけに確定させる
     2. 間隔そのものを --btn-gap 1本に集約し、margin と移動量の両方をそこから出す
   line1 と line3 の中心の距離は `線幅1px + 間隔×2` なので、各々が動くべき量も同じ式になる。
     ≤1024（間隔2px）→ 1 + 2×2 = 5px ／ ≤896（間隔1px）→ 1 + 2×1 = 3px
   固定値を書き足さないので、間隔を変えれば移動量も自動で追従する。

   土台の `.menu_btn.active .line1`(0,2,0) に勝つため (0,4,0) の形で書く。
   margin を span へ当て直すと土台の `.line1{margin-left:0}` を上書きしてしまうので、
   直後に同じ形で戻す（順番を入れ替えないこと）。 */
@media only screen and (max-width: 1024px) {
    header .menu_aside .menu_btn {
        --btn-gap: 2px;
        font-size: 0;
    }

    header .menu_aside .menu_btn span {
        margin-left: var(--btn-gap);
        margin-right: var(--btn-gap);
    }

    header .menu_aside .menu_btn .line1 {
        margin-left: 0;
    }

    header .menu_aside .menu_btn .line3 {
        margin-right: 0;
    }

    header .menu_aside .menu_btn.active .line1 {
        -webkit-transform: translateY(0) translateX(calc(1px + 2 * var(--btn-gap))) rotate(45deg);
        transform: translateY(0) translateX(calc(1px + 2 * var(--btn-gap))) rotate(45deg);
    }

    header .menu_aside .menu_btn.active .line3 {
        -webkit-transform: translateY(0) translateX(calc(-1px - 2 * var(--btn-gap))) rotate(-45deg);
        transform: translateY(0) translateX(calc(-1px - 2 * var(--btn-gap))) rotate(-45deg);
    }
}

/* 896px以下は土台が間隔を 1px に狭めている。基準だけ差し替えれば、
   上のブロックの式がそのまま移動量を 3px に追従させる。 */
@media only screen and (max-width: 896px) {
    header .menu_aside .menu_btn {
        --btn-gap: 1px;
    }
}

/* ==============================================================
 * 2026-08-26 の修正（先方からの指摘一式）
 * ============================================================== */

/* --------------------------------------------------------------
 * 1. 文字を大きくする（利用者の年齢層が高い）
 *
 * これまで基準（html）の font-size を上げていたのは **1600px以上だけ**で、
 * ふだんのPC（1280〜1440px）とスマートフォンは 62.5%（＝10px基準）のままだった。
 * 文字の指定は土台・上書きとも全て rem なので、ここ1か所で全体が同じ比率で動く。
 *
 * **本文は 1.8rem ではない。** 2026-08-26 に実物のページで測ったところ、
 * 土台の本文は **スマートフォン 1.4rem ／ PC 1.6rem** だった。
 * 以前ここに書いていた「本文18.9px」などの換算は 1.8rem を前提にした誤りで、
 * 実際には 65.625% のときスマートフォンの本文は **14.7px** しか出ていなかった。
 * 年齢層を考えると小さいので、スマートフォンを1段上げて 16px 台に乗せる。
 *
 * 段（かっこ内は実測値。スマートフォンは 1.4rem、PCは 1.6rem 換算）
 *   〜896px   71.875% → 11.5px基準・本文 16.1px
 *   897px〜   71.875% → 11.5px基準・本文 18.4px
 *   1600px〜  75%     → 12px  基準・本文 19.2px
 *   1920px〜  78.125% → 12.5px基準・本文 20.0px
 *   2400px〜  81.25%  → 13px  基準・本文 20.8px
 * 段はどこも前の段より小さくならないようにする（スマートフォンだけ上げると
 * 897px の境目でPCのほうが小さくなり、幅を広げると文字が縮む逆転が起きる）。
 *
 * **箱の寸法は px のまま**なので、上げたら必ず find_overflow を全幅で流すこと。
 * -------------------------------------------------------------- */
html {
    font-size: 71.875%;   /* 11.5px基準 → 本文 16.1px（1.4rem） */
}

@media screen and (min-width: 897px) {
    html {
        font-size: 71.875%;  /* 11.5px基準 → 本文 18.4px（1.6rem） */
    }
}

@media screen and (min-width: 1600px) {
    html {
        font-size: 75%;      /* 12px基準 → 本文 19.2px */
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 78.125%;  /* 12.5px基準 → 本文 20.0px */
    }
}

@media screen and (min-width: 2400px) {
    html {
        font-size: 81.25%;   /* 13px基準 → 本文 20.8px */
    }
}

/* --------------------------------------------------------------
 * PCの左サイドバー｜1部品としての拡縮とバランス（2026-09-09・2回目）
 *
 * 【経緯】1回目は「縦メニューの font-size だけ」を可変にした。その結果
 *   ・広い画面で**文字だけが大きくなり、寺紋(42px)とハンバーガー(40px)が固定のまま
 *     取り残された**（2560pxで文字31.2px＝本文の1.50倍。寺紋は42pxのまま）
 *   ・低い画面で**上下の余白が非対称**（実測＝1366x628 でロゴ下25px／ハンバーガー上3px。
 *     1025x620 では 24px／2px）。原因は max-height ごとに px を打っていた2ブロックのうち、
 *     ロゴ側 `.menu_aside .logo`(0,2,0) は当たるのに、ハンバーガー側
 *     `.menu_aside .menu_btn`(0,2,0) が土台の
 *     `header .menu_aside .menu_btn { margin: 0 auto }`(0,2,1) に**詳細度で負けて
 *     計算値0pxのまま**だったこと
 *   ・サイドバーの上下パディングが土台のまま **上40px / 下45px** で揃っていない
 *   ・縦組みは行が箱の右端から積まれるので、文字が大きくなるほど列の中心が右へ寄る
 *     （実測＝文字列の中心 1366px:72 → 2560px:87。寺紋とハンバーガーの中心は常に75）
 *
 * 【方針】**サイドバーは「寺紋＋縦メニュー＋ハンバーガー」で1つの部品**として扱う。
 * 基準を `--aside-u` 1本にして、3要素も余白も全部そこからの比で決める。
 * 比率は現行の見た目（文字17.25px のとき 寺紋42px・線40px・padding40px・すきま31px）を
 * そのまま保つ値にしてあるので、基準を変えても関係は崩れない。
 *
 *   --aside-u      … 縦メニューの文字サイズ（＝この部品の基準）
 *   寺紋           … 2.4u   （u=17.25 で 41.4px。現行42px）
 *   ハンバーガー線 … 2.3u   （    〃    39.7px。現行40px）
 *   上下パディング … 2.2u   （    〃    38.0px。現行 上40/下45 → **上下同じにする**）
 *   ロゴ↔メニュー / メニュー↔ハンバーガー … 1.8u（  〃 31.1px。上下**同じ値**）
 *   項目間        … 1.7em、字間 .08em（2026-09-10 に 0.9em から変更。理由は下）
 *
 * 【項目間は字送りより広くする】2026-09-10 Sone指摘「下層の左帯の縦メニューが読みづらい」。
 * 実測（1440x900）＝字送り 19.91px（＝1.08u。文字18.43＋字間1.47）に対して
 * **項目間が 16.59px（0.9em）しかなく、単語の中より単語の切れ目のほうが詰まっていた**。
 * 6項目がひと続きの一本の縦線に見えるのはこれが原因。
 * → 項目間を **1.7em** にした。字送りの **1.574倍**（0.9em のときは 0.83倍）。
 *   1.7 を採ったのは、ロゴ↔メニューの 1.8u（＝1階層上の隔たり）を**超えない**上限だから。
 *   これ以上広げると「項目どうしの隔たり」と「ブロックどうしの隔たり」が並んでしまう。
 *
 * 【高さの収まり】この部品の総高さは
 *   2×2.2u ＋ 2.4u ＋ 2×1.8u ＋ 2.3u ＋ 26×1.08u ＋ 5×1.7u = 49.3u
 * なので **u ≦ 画面高 ÷ 49.3**。高さの項を 1.97vh（＝1/50.8）にして内側に入れている。
 * 幅の項 1.28vw と、小さいほうを採る。
 * ※ 項目間を 0.9em → 1.7em にすると総高さが 45.3u → 49.3u に増えるので、
 *   **高さの項も 2.15vh → 1.97vh に下げないと低い画面であふれる**（実測＝1280x720 で
 *   0.9em のときの余りは上下あわせて19pxしかなく、5か所ぶんの増分を吸収できない）。
 *   このため高さで決まる画面（1440x900 など）では基準が 18.43px → 17.73px に少し縮む。
 *   **縦メニューだけでなく寺紋・ハンバーガーも同じ比で縮む**（1部品として設計しているため）。
 *
 * 【上限】本文は 1.6rem 固定なので、縦メニューだけが膨らむと不自然になる。
 * 上限 1.8rem＝本文の1.125倍で止める（1回目は2560pxで1.50倍まで伸びていた）。
 * 下限 1.1rem。
 *
 * 【余った高さの行き先】2026-09-11 Sone指摘「2560x1440 で寺紋と縦メニューの間が大きく空く」。
 * それまでは縦メニューの箱が伸びて（flex:1）中央に置かれていたので、
 * 余りは**全部ロゴ↔メニュー／メニュー↔ハンバーガーの2か所**に出ていた。
 * 実測（変更前）＝ 2560x1440 で 185.6px、1920x1440 で 206px、1440x1080 で 119px。
 * 高さで基準が決まる画面（1440x900 45px／1920x1080 54px）だけ詰まって見えていた。
 * → 3要素を**1つの部品のまま上下中央**に置き（justify-content: safe center・縦メニューは伸ばさない）、
 *   余りは**外側（上下パディング）**へ回す。隔たりは外側の階層のほうを広くする、の原則どおり。
 * ロゴ↔メニューの隔たりは「1.8u ＋ 余りの半分（ただし 0.7u まで）」。
 *   0.7u は、高さで基準が決まる画面で**これまで実際に出ていた余り（≒0.73u）**に合わせた値で、
 *   1440x900・1920x1080 の見た目はほぼ変わらない（45.0→44.3px／54.2→53.2px）。
 *   余りが無い画面（下限 1.1rem が効く低い画面）では 1.8u のまま＝変更前と同じ高さに収まる。
 *   固定の 2.5u にしなかったのは、2560x720 で総高さが 50.68u×14.3px＝725px になりスクロールが出たため（実測）。
 * 49.3 は上の総高さ。**項目や係数を変えたら、ここの 49.3 も一緒に直す。**
 *
 * **触ったら必ず「幅×高さ」の組み合わせで、上余白・下余白・収まりを実測すること。**
 * 縦メニューは6項目26文字あり、高さが効く。幅だけの確認では見つからない。
 * 検算＝scratchpad の aside_audit.cjs（padT/padB・紋・gap上/gap下・列高・収まりを出す）。
 * -------------------------------------------------------------- */
@media print, screen and (min-width: 1025px) {
    header .menu_aside {
        /* この部品の基準。幅と高さの小さいほうに合わせる */
        --aside-u: clamp(1.1rem, min(1.28vw, 1.97vh), 1.8rem);
        --aside-pad: calc(var(--aside-u) * 2.2);
        /* ロゴ↔メニュー／メニュー↔ハンバーガー。1.8u に「余った高さの半分（0.7u まで）」を足す。
           余った高さ＝画面高 − 総高さ 49.3u。負のとき（入りきらない）は 0 */
        --aside-gap: calc(var(--aside-u) * 1.8
                          + clamp(0px, (100vh - var(--aside-u) * 49.3) / 2, var(--aside-u) * 0.7));
        --aside-kamon: calc(var(--aside-u) * 2.4);
        --aside-bar: calc(var(--aside-u) * 2.3);

        /* 3要素を1つの部品として上下中央に置く。余った高さは上下パディングの外側に出る。
           safe：入りきらないときは上詰めに戻す（寺紋が画面の上へ切れないように） */
        justify-content: safe center;

        /* 土台は 40px 0 45px 0 で上下が違う。上下対称にする */
        padding-top: var(--aside-pad);
        padding-bottom: var(--aside-pad);
    }

    /* 寺紋。土台の .logo は min-height:62px で、寺紋42pxとのすきま20pxが
       ロゴの箱の下にぶら下がっていた。箱は寺紋ぶんちょうどにして、
       すきまは margin で明示的に持つ（そうしないと上下を揃えられない） */
    header .menu_aside .logo {
        min-height: 0;
        margin-bottom: var(--aside-gap);
    }

    header .menu_aside .logo .m-kamon {
        width: var(--aside-kamon);
        height: var(--aside-kamon);
    }

    /* トップページのPCサイドバーには寺名の文字も出る（下層は m-logo--sm で非表示）。
       寺紋だけ大きくすると釣り合わないので、こちらも同じ基準で動かす。
       1.07u / 0.7u は現行（1.6rem＝18.4px / 12px）と同じになる値 */
    header .menu_aside .logo .m-logo__text {
        font-size: calc(var(--aside-u) * 1.07);
        margin-top: calc(var(--aside-u) * 0.7);
    }

    /* 縦メニュー。
       margin を auto にしているのは、縦組みでは行が箱の右端から積まれるため、
       土台の margin-left:62.5px 固定だと文字が大きくなるほど列の中心が右へ寄るから
       （実測＝2560pxで中心87px。寺紋とハンバーガーは75px）。
       auto にすると、どの文字サイズでも寺紋・ハンバーガーと同じ中心に乗る。

       項目間（下マージン）は **em＝この li の font-size 基準**。px で書くと
       文字サイズが変わっても隔たりだけが取り残される。
       1.7em ＝ 字送り（1.08em）の 1.574 倍。値の根拠は上のコメントの
       「項目間は字送りより広くする」を参照。 */
    header .menu_aside .menu_aside_detail ul li {
        font-size: var(--aside-u);
        letter-spacing: .08em;
        margin: 0 auto 1.7em;
    }

    /* ハンバーガー。上のすきまはロゴ側と同じ値。
       土台の `header .menu_aside .menu_btn { margin: 0 auto }` は (0,2,1) なので、
       同じ形（0,3,1）で書かないと当たらない。1回目はここで負けていた。 */
    header .menu_aside .menu_btn {
        margin-top: var(--aside-gap);
    }

    header .menu_aside .menu_btn span {
        height: var(--aside-bar);
        /* 3本の間隔も基準に連動させる。0.2u は現行3.5pxと同じになる値。
           ただし shorthand で書くと土台の .line1 / .line3 の 0 を
           上書きしてしまうので、左右を個別に書いて下で戻す。

           **端数のまま使ってはいけない（2026-09-09 実測）。**
           `.menu_btn` は幅150pxのサイドバーの中央に置かれるので、真ん中の線は
           常に中央（x=74.5）に来る。外側2本だけが間隔ぶん動くため、間隔に端数が
           あると左右のすきまが 1px（DPR2では2px）ずれて**真ん中の線が中心から
           外れる**。幅40通り×高さ60通りを走査したところ、端数のままでは
           98/100 で間隔が不揃いだった（線の太さ・濃さは全件そろっており、
           サブピクセルで細く描かれる現象は再現しなかった）。
           0.5px 刻みに丸めると、3本とも .5 の位置に載って左右のすきまが必ず一致する。
           `round()` を持たないブラウザは1つ前の 3.5px（＝土台と同じ値）を使う。 */
        margin-left: 3.5px;
        margin-right: 3.5px;
        margin-left: round(nearest, calc(var(--aside-u) * 0.2), 0.5px);
        margin-right: round(nearest, calc(var(--aside-u) * 0.2), 0.5px);
    }

    header .menu_aside .menu_btn .line1 {
        margin-left: 0;
    }

    header .menu_aside .menu_btn .line3 {
        margin-right: 0;
    }
}

/* --------------------------------------------------------------
 * 5 / 10. 縦組みの中の欧文・数字（縦中横）
 *
 * 縦書きでは、ラテン文字と半角数字は既定で90度倒れる。
 * 実測（2026-08-26・トップのリード）＝「JR和歌山駅」の JR だけが横倒しで、
 * そこで読む向きが変わっていた。番号「01」「02」も同じ。
 *
 *   c-tcy     … 1〜2文字。1文字ぶんの枡に収める（縦中横）
 *   c-upright … 3文字以上。1文字ずつ立てて縦に積む（枡に押し込むと潰れるため）
 *
 * 包むのは build.py の tcy()。`.access .text p span` は土台が既に
 * 同じことをしているので、こちらでは触らない。
 * -------------------------------------------------------------- */
.c-tcy {
    -webkit-text-combine: horizontal;
    -ms-text-combine-horizontal: all;
    text-combine-upright: all;
}

.c-upright {
    text-orientation: upright;
    letter-spacing: 0;
}

/* 番号の span は土台が display:block にしている。
   縦中横はインラインの箱にかかる指定なので、インラインに戻してから当てる。 */
.p-about_ttl span.c-tcy,
.p-forest_ttl span.c-tcy,
.c-ttl1 span.c-tcy,
.grounds .ttl span.c-tcy,
.section5 .link .ttl span.c-tcy {
    display: block;
}

/* --------------------------------------------------------------
 * 13. 帯の中にページタイトルを出す
 *
 * 帯に「01 ご供養」しか出ていないため、リンクを押しても遷移したのか分からない、
 * という指摘。ページタイトル（h3）を帯の中へ移した（build.py の about_page）。
 *
 * 縦組みでは右の列から読むので、「01 ご供養」（小さな見出し）を右に、
 * ページ名（大きい）をその左に置く。2つで1つのかたまりに見えるよう、
 * 土台が h2 に当てている `left: calc(50% - 24px)` も、対で中央に来るようずらす。
 * -------------------------------------------------------------- */
.p-about_main .m-bandttl {
    /* 2026-09-01、帯から「01 ご供養」（h2）を外し、ページ名だけにした（Sone指示）。
       それまでは2本を対にして中央に見せていたので、h3 は左へ 78px ずらしてあった。
       1本になったぶん、文字の幅（縦組みなので文字サイズぶん）の半分だけ左へ寄せて
       中央に戻す。実測（1440x900・永代供養）＝ ずらす前は中心が 58px 左に寄っていた。 */
    /* `.p-about_ttl01` は下層の横組み見出し用に writing-mode: horizontal-tb を持っている。
       帯に置くぶんは縦組みに戻す（クラスを両方付けているので、ここで上書きする）。 */
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    position: absolute;
    /* 2026-09-01、96px から 72px へ上げた。長いページ名（7文字以上）が
       下のグループ内メニューに乗っていたため、逃げ場を24px作る。 */
    top: 72px;
    /* 中央寄せは transform で行う。手で「文字幅の半分」を引くやり方だと、
       字の大きさを変えたときに中央からずれる（2026-09-01）。 */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 3.2rem;
    font-weight: normal;
    letter-spacing: .12em;
    line-height: 1.35;
    z-index: 2;
    text-align: left;
    max-width: none;
    /* 帯の白文字は写真の上に載る。土台のタイトルと同じ縁取りの影で立たせる */
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .5),
        0 0 14px rgba(0, 0, 0, .34);
}

/* h3 を帯へ移したぶん、本文の上の余白をここで持たせる
   （土台では `.p-about_ttl01` の padding: 120px 0 78px が担っていた）。
   見出しが無くなったので、そのままの高さだと**ただの空白**になる。
   本文の最初の区切り線が、パンくずのすぐ下に来る程度に詰める。 */
.p-about_detail {
    padding-top: 72px;
}

/* --------------------------------------------------------------
 * I. 下層ページの余白（PCのみ・2026-09-02）
 *
 * 土台は各節の入れ物 `.wrap` に `padding-top: 114px`（PC）を持っている。
 * 区切り線の下にこの余白が入るので、**節と節の間もすべて同じだけ空く**。
 * 実測（1440x900）＝ 区切り線から見出しの文字まで 115px。
 * 帯の直下はこれに上の 72px が乗って、帯の下端から最初の文字まで 235px あった。
 *
 * **スマートフォンは触らない。** SPの同じ値は 50px で、実測でも
 * 区切り線から見出しまで 51px。詰める必要がない（Sone判断）。
 * -------------------------------------------------------------- */
@media only screen and (min-width: 897px) {
    .p-about_detail {
        padding-top: 48px;
    }

    .p-about_detail .wrap {
        padding-top: 72px;
    }
}

@media only screen and (max-width: 896px) {
    .p-about_main .m-bandttl {
        top: 36px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.6rem;
    }

    .p-about_detail {
        padding-top: 40px;
    }
}

/* --------------------------------------------------------------
 * 19 / 23. PCで ②④ の上に大きなすき間が空く
 *
 * 土台は `.p-about_detail .wrap2 { align-items: end }` で、写真と文章を
 * **下端で揃えて**いる。写真（縦2:3・788px）より文章が短い段では、そのぶんが
 * まるごと文章の上のすき間になる。
 * 実測（2026-08-26・1440px）
 *   永代供養 ②＝439px ／ ④＝375px（上下が揃っている段は 115px）
 *   水子供養 ＝503px ／ 375px
 *   各種ご供養 ＝567px
 * 上端で揃え、他の段（wrap1）と同じ 115px にする。
 * ※ スマートフォンは1列なので関係ない。**PCだけに閉じる。**
 * -------------------------------------------------------------- */
@media only screen and (min-width: 897px) {
    .p-about_detail .wrap2,
    .p-forest_detail .wrap2 {
        -webkit-box-align: start;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------
 * 3. ギャラリーは8枚
 *
 * 12枚は多いという指摘で8枚にした（build.py の GALLERY）。
 * 3列だと 3+3+2 で最後の段が欠けるので、タブレットまでは4列、
 * スマートフォンは2列にして、どの幅でも段が埋まるようにする。
 * -------------------------------------------------------------- */
@media only screen and (max-width: 1024px) and (min-width: 897px) {
    .m-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------
 * 28. お問い合わせページの字づまり
 *
 * 「文字のスペースがきつきつ」という指摘。行間・字間・項目間を広げる。
 * 土台のフォーム部品は行間の指定が薄く、入力欄と見出しが詰まって見えていた。
 * -------------------------------------------------------------- */
.p-contact .detail,
.p-contact .p-contact_label,
.p-contact .m-formnote {
    line-height: 2.1;
    letter-spacing: .06em;
}

/* **項目を包む箱の余白（padding）を落とす。**
   土台は各項目を薄いグレー（#f8f7f5）の箱で囲み、その内側に
   PC 45px/35px・SP 25px/17px の余白を持たせていた。
   このサイトでは箱を透明にして入力欄の枠線だけで見せているので、
   その余白は**何も囲んでいないただの空白**になる。
   そこへ項目間の margin まで足していたため、前の入力欄から次のラベルまで
   PC で 152px も空いていた（2026-09-01 実測・Sone指摘）。
   間隔は margin だけで作る。 */
/* **`margin-top` も指定する。** 土台は `.p-contact_box` に `margin-top: 72px` を
   持っており、`margin-bottom` だけを書いても**マージンの相殺で大きいほうが勝つ**。
   40px と書いても実際の間隔は 72px のままだった（2026-09-01 実測）。 */
.p-contact .p-contact_box {
    padding: 0;
    margin-top: 0;
    /* 2026-09-02、40px から 28px へ詰めた（まだ広いという指摘）。
       ラベルの行の高さぶん（上下に約6px）が加わるので、見た目の間隔は約34px。 */
    margin-bottom: 28px;
}

/* --------------------------------------------------------------
 * H. お問い合わせページの上の余白（2026-09-02）
 *
 * 土台は `.p-contact.c-form .p-contact_wrap` に
 * PC 112px・SP 80px の上余白を持っている。実測でヘッダーの下端から
 * 大見出しの文字まで PC 120px・SP 80px 空いていた。
 * 縦組みの大見出し（高さ PC263px・SP217px）と合わせると、
 * 本文にたどり着くまでが遠い。
 *
 * セレクタは土台と同じ強さ（`.p-contact.c-form` から書く）にする。
 * `.p-contact .p-contact_wrap` では詳細度で負けて効かない。
 * -------------------------------------------------------------- */
.p-contact.c-form .p-contact_wrap {
    padding-top: 56px;
}

@media only screen and (max-width: 896px) {
    .p-contact.c-form .p-contact_wrap {
        padding-top: 36px;
    }
}

.p-contact .p-contact_label {
    margin-bottom: 14px;
}

.p-contact.c-form form input[type="text"],
.p-contact.c-form form input[type="tel"],
.p-contact.c-form form input[type="email"],
.p-contact.c-form form input[type="date"],
.p-contact.c-form form select,
.p-contact.c-form form textarea {
    padding: 16px 18px;
    line-height: 1.9;
}

.p-contact .m-contact__ttl {
    letter-spacing: .1em;
}

/* リード文と、いちばん上の見出しのあいだ */
.p-contact .p-contact_wrap > .detail {
    margin-bottom: 8px;
}

/* --------------------------------------------------------------
 * 本文の中のリンクが、本文と見分けられない（2026-08-26 実測）
 *
 * 実測＝永代供養ページの本文リンク（「お電話（073-422-7968・受付 7:00〜18:00）」）は
 * 色 rgb(65,59,54)・下線なし・太さ300 で、**まわりの本文と完全に同じ**だった。
 * 押せることが分からないので、電話も「詳しくはこちら」も踏まれない。
 * 下線を引いて、押せることを見た目で示す（色は変えない。写真の上の白文字や
 * ボタン・メニューには当てないよう、本文の箱の中だけに閉じる）。
 * よくあるご質問の答えの中のリンクも同じ見た目にした（2026-10-21 Sone決定。
 * それまで /noukotsubo/ のQ&Aの「永代供養」リンクは下線が無く、本文と見分けられなかった）。
 * -------------------------------------------------------------- */
.p-about_detail .detail a,
.p-about_detail .txt16 a,
.p-about_detail .txt18 a,
.p-about_detail .m-table__note a,
.p-forest_detail .detail a,
.m-cta__lead a,
.p-contact .detail a,
.policy_detail .text a,
.p-entry a,
.m-faq .c-accordion__panel a {
    text-decoration: underline;
    text-underline-offset: .25em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(65, 59, 54, .45);
}

.p-about_detail .detail a:hover,
.p-forest_detail .detail a:hover,
.m-cta__lead a:hover,
.p-contact .detail a:hover,
.policy_detail .text a:hover,
.p-entry a:hover,
.m-faq .c-accordion__panel a:hover {
    text-decoration-color: currentColor;
}

/* ボタンには下線を引かない（上のセレクタに入らないよう、念のため戻す） */
.p-about_detail .m-btns a,
.p-about_detail .m-morebtn a,
.p-about_detail a.c-btn_link,
.m-cta a.c-btn_link {
    text-decoration: none;
}


/* --------------------------------------------------------------
 * 「〜について 詳しくはこちら」を枠線ボタンにする（2026-08-26）
 *
 * 素のテキストリンクは、下線を引いても本文の中に埋もれて押されない。
 * このサイトは「押せる」を **枠線ボタン（.c-btn_link）** で既に作っている
 * （CTA・「妙宣寺について 詳しく見る」・フォームの送信）ので、その記号を流用する。
 * カード化・写真リンク化はしない。
 *
 * 土台の .c-btn_link は height:60px / line-height:58px の **固定**。
 * PC 1.6rem（897px〜 は 11.5px 基準＝18.4px）で全角21文字は約386px あり、
 * .text は土台の `.p-about_detail .wrap1 div { width:50% }` で親の半分しかないため、
 * **897〜1290px の帯域で 388px まで縮む**。SPだけに当てていた .m-cta-inline と
 * 同じ折り返しが PC でも起きるので、PC側も最初から height:auto にする。
 *
 * 包むのは必ず <p>。<div> だと上の 50% ルールに巻き込まれる。
 * 無条件のルールは書かない（ソース順で先の 1024/896px 指定を上書きしてSPが壊れる）。
 * -------------------------------------------------------------- */
@media only screen and (min-width: 897px) {
    .m-morebtn {
        margin-top: 3.2rem;
        margin-bottom: 0;
    }

    .m-morebtn .c-btn_link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 6rem;
        line-height: 1.7;
        padding: 1.2rem 3.6rem;   /* 右の矢印SVG（right:25px）に文字がかからない幅 */
        max-width: 34rem;
        font-size: 1.5rem;
        transition: border-color .3s, background-color .3s;
    }

    /* 2本並ぶ箇所（み教え）は縦に積む。.text が 525px しかなく横2列は入らない */
    .m-morebtn .c-btn_link + .c-btn_link {
        margin-top: 1.6rem;
    }

    .m-morebtn .c-btn_link:hover {
        border-color: rgba(65, 59, 54, .55);
        background-color: rgba(65, 59, 54, .04);
    }

    .m-morebtn .c-btn_link:focus-visible {
        outline: .2rem solid rgba(65, 59, 54, .7);
        outline-offset: .2rem;
    }
}

@media only screen and (max-width: 896px) {
    .m-morebtn {
        margin-top: 2.4rem;
        margin-bottom: 0;
    }

    .m-morebtn .c-btn_link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 4.6rem;       /* 11.5px 基準＝52.9px。指で押せる 44px を満たす */
        line-height: 1.7;
        /* 左右を同じ 3.4rem にすると、375px 幅で「きうりふうじの日程と持ち物を見る」
           （16文字×14.95px＝239.2px）だけが折り返し、2行目に「る」が1文字だけ残った（実測）。
           右は矢印SVG（right:25px・幅5px）を避けるため 3.4rem を保ち、**左だけ詰める**。
           375px の使える幅＝305 − 18.4 − 39.1 − 枠2 ＝ 245.5px で1行に収まる。
           左右同値では 2.9rem まで詰めても 236.3px しか取れず入らない（計算・実測とも）。 */
        padding: 1rem 3.4rem 1rem 1.6rem;
        max-width: none;
    }

    .m-morebtn .c-btn_link + .c-btn_link {
        margin-top: 1.2rem;
    }

    /* SPには :hover を当てない（一度触れた状態が残る sticky hover を避ける） */
    .m-morebtn .c-btn_link:focus-visible {
        outline: .2rem solid rgba(65, 59, 54, .7);
        outline-offset: .2rem;
    }
}

/* --------------------------------------------------------------
 * 指で押せる大きさにする（2026-08-27）
 *
 * `checks/find_smalltap.cjs` で 44x44px 未満のタップ領域を洗ったところ、
 * **妙宣寺で足した部品では2種類**が基準を割っていた（実測）。
 *   ・パンくず（.m-breadcrumb a）  SP 38x13 ／ PC 41x14
 *   ・トップの電話（.m-access-tel a） SP 265〜280x37 ／ PC 238x40
 * 利用者の年齢層が高いサイトなので、押せないのではなく「押し間違える」が起きる。
 *
 * **見た目は1pxも変えない。** padding で当たり判定を広げ、同じ量の負マージンで
 * 箱の大きさを元に戻す。文字の位置・行間・まわりの余白は変わらない。
 * （文字を大きくしたり行間を空けたりすると、細く置くという設計が崩れる）
 *
 * 数字は 11.5px 基準（〜896px と 897px〜 が同じ 71.875%）で計算している。
 * 基準が上がる 1600px 以上では rem なので一緒に大きくなる。
 * 土台由来のもの（ドロワー・フッターのナビ・「ページ上部へ」）は触らない。
 * 城山も同種で、直すと土台の見た目が変わる（AI_CONTEXT 8）。
 *
 * **広げた当たり判定が、ほかのリンクと重なっていないことを実測で確認している**
 * （320 / 375 / 390 / 1440 × 帯ありページ・下層ページ ＝ 重なり0）。
 * パンくずは上へ16px 伸びるが、帯の下のグループメニューとの間は SP320 でも約50px空く。
 * 隣どうし（トップ ／ ご祈願）の当たり判定のすき間は 21〜22px。
 * ※ 重なりを測るときは **`waitUntil:'networkidle'` でレイアウトを落ち着かせてから**。
 *   遅延読み込みの写真が入る前に測ると、要素の座標が数百px ずれて偽の重なりが出る
 *   （実際に「SP320 で6件重なる」という誤った結果を一度出した）。
 *
 * **見た目が変わっていないことも実測で確かめてある**（390 / 1440）。
 * この指定を外した状態と入れた状態で、
 *   パンくず ＝ 箱 40px / 48.2px・ol の位置・本文の開始位置がすべて同値
 *   電話    ＝ 箱 60.7px / 64.4px・番号の位置・受付時間の位置がすべて同値
 * padding と負マージンが打ち消し合っているので、動くのは当たり判定だけ。
 * -------------------------------------------------------------- */
@media only screen and (min-width: 897px) {
    .m-breadcrumb a {
        /* inline のままだと当たり判定が文字の高さ（14px）しか無い。
           inline-block にすると行の高さ（PC 26px）ぶんになり、そこへ padding を足す。
           高さ＝26 + 1.4rem×2（32.2px）＝ 58px ／ 幅＝41 + .5rem×2（11.5px）＝ 53px */
        display: inline-block;
        padding: 1.4rem .5rem;
        margin: -1.4rem -.5rem;
    }

    .m-access-tel a {
        /* 40 + .45rem×2（10.4px）＝ 50.4px 高。幅は 238px あるので足りている */
        padding-top: .45rem;
        padding-bottom: .45rem;
        margin-top: -.45rem;
        margin-bottom: -.45rem;
    }
}

@media only screen and (max-width: 896px) {
    .m-breadcrumb a {
        /* 高さ＝24 + 1.4rem×2（32.2px）＝ 56px ／ 幅＝38 + .5rem×2（11.5px）＝ 49.5px */
        display: inline-block;
        padding: 1.4rem .5rem;
        margin: -1.4rem -.5rem;
    }

    .m-access-tel a {
        /* 37 + .45rem×2（10.4px）＝ 47.4px 高 */
        padding-top: .45rem;
        padding-bottom: .45rem;
        margin-top: -.45rem;
        margin-bottom: -.45rem;
    }
}

/* --------------------------------------------------------------
 * 写真を1節1枚にする（2026-08-27 Sone指示）
 *
 * それまでは1節に縦写真＋横写真の2枚組で、img タグを3つ出していた
 * （PC用の縦・SP用の縦・横）。横を残す節は blk_plain(img=) へ移し、
 * 縦を残す節は .wrap-v が付く。
 *
 * **土台の余白は「下に来る横写真との間隔」で決まっていた。**
 * `.wrap1 { padding-bottom: 119px }`（PC）と `img.sp-only { margin-bottom: 75px }`（SP）。
 * 横写真が消えるとその値が丸ごう空白として残るので、ここで詰める。
 *
 * **写真の列を本文の高さに追従させる。**
 * `align-self: stretch` ＋ `height:100%` ＋ `object-fit: cover`。
 * これをしないと、本文が短い節（④のうこつぼ・きうり封じなど）で
 * 写真列だけが 788px 伸びて、左下に約390pxの空白が出る。
 *   min-height 34rem ＝ 本文が2〜3行の節でも写真が潰れない下限
 *   max-height 62rem ＝ 本文が長い節で縦に伸びすぎ、2:3 の切り取りが破綻する上限
 * `right: -6rem` ＝ 土台の -120px は「横写真1050pxとの重なり」で決まっていた値なので、
 * 縦のみになったら控えめにする。はみ出しは残す（土台の意匠）。
 * -------------------------------------------------------------- */
@media only screen and (min-width: 897px) {
    .p-about_detail .wrap-v {
        padding-bottom: 6rem;
        -webkit-box-align: stretch;
        align-items: stretch;
    }

    .p-about_detail .wrap-v .text {
        width: 56%;
    }

    .p-about_detail .wrap-v .img {
        width: 40%;
        right: -6rem;
        top: 1rem;
        align-self: stretch;
        min-height: 34rem;
        max-height: 62rem;
        overflow: hidden;
    }

    .p-about_detail .wrap-v .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* 写真つきの節が続くと、写真が右側に縦に並ぶ。
       上から数えて偶数番目を左右入れ替えて、互い違いにする（2026-09-02 Sone指示）。
       印を付けるのは build.py の `_alternate_sides()`。
       はみ出し（right: -6rem）も左右を入れ替える。 */
    .p-about_detail .wrap-v--rev {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        flex-direction: row-reverse;
    }

    .p-about_detail .wrap-v--rev .img {
        right: auto;
        left: -6rem;
    }
}

@media only screen and (max-width: 896px) {
    .p-about_detail .wrap-v {
        padding-bottom: 4rem;
    }

    .p-about_detail .wrap-v img.sp-only {
        margin-bottom: 3.2rem;
    }
}

/* ==============================================================
 * iOS の安全領域（ノッチ／ホームインジケータ）— 2026-08-31
 *
 * これまで viewport の meta は `width=device-width, initial-scale=1.0` だけで、
 * `env(safe-area-inset-*)` はプロジェクト全体で1件も使っていなかった。
 * この状態（viewport-fit=auto）だと iPhone では
 *   ・レイアウトの領域が上下の安全領域のぶんだけ内側に寄せられる
 *   ・その外側（ノッチ側の帯・ホームインジケータ側の帯）はブラウザが塗る
 * となる。結果、
 *   ・`position:fixed; top:0` のドロワー（header .sidebar）の白は、帯の下から始まる
 *   ・`position:fixed; bottom:0` の固定CTA（.m-spcta）の色も、帯の上で止まる
 * ので、上端／下端に「背景が敷かれていない」帯が残る。
 *
 * meta に `viewport-fit=cover` を足して画面いっぱいに描くようにしたうえで、
 * **画面の縁に接している要素だけ**を安全領域のぶん内側へ戻す。
 * cover を入れないと env() は常に 0 を返すので、meta と この節はセットで意味を持つ。
 *
 * 変数にしてあるのは、検査のときに値を差し替えて（例：--sa-top:59px）
 * 実機なしでも「ずらしたときに崩れないか」を確かめられるようにするため。
 * 対応していないブラウザでは env() の第2引数 0px が返るので、見た目は今までと同じ。
 * ============================================================== */
:root {
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
}

/* ドロワーの高さ。
   100vh は iOS では「アドレスバーが引っ込んでいるときの高さ」で、
   バーが出ている間は画面より高くなる（＝下がはみ出す）。
   100dvh は今見えている高さに追従する。対応していないブラウザは上の行が残る。 */
header .sidebar {
    height: 100vh;
    height: 100dvh;
}

/* 横向きのとき、本文がノッチ側へ潜らないようにする。
   `position:fixed` の要素には body の余白が効かないので、それらは個別に足す（下）。 */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
    body {
        padding-left: var(--sa-left);
        padding-right: var(--sa-right);
    }
}

@media only screen and (max-width: 1024px) {
    /* 上の白い帯。高さを足して、画面の物理的な上端まで白を届かせる */
    .m-headbar {
        height: calc(76px + var(--sa-top));
    }

    /* 下層ページの静的な白ヘッダー。上の帯と1pxも違わないようにそろえてあるので、
       同じだけ伸ばす（土台が !important なので、こちらも同じ強さで書く） */
    header.c-head_w {
        height: calc(76px + var(--sa-top)) !important;
    }

    /* ヘッダーの中身（寺紋・寺名・ハンバーガー）を安全領域のぶん下げる。
       .menu_aside は header の中の absolute なので、左右は body の余白で足りる。 */
    header .menu_aside .js-top1,
    header .menu_aside .logo .m-logo {
        top: calc(20px + var(--sa-top));
    }

    header.ex-top .menu_aside .logo .m-logo {
        top: calc(15px + var(--sa-top));
    }

    header .menu_aside .menu_btn {
        top: calc(32px + var(--sa-top));
    }

    /* ここから下は position:fixed。左右も自分で足す必要がある */
    header .menu_aside.fixed .menu_btn {
        top: calc(30px + var(--sa-top));
        right: calc(45px + var(--sa-right));
    }

    body.is-scrolled header .menu_aside .logo .m-logo--sm,
    body.blocked header .menu_aside .logo .m-logo--sm {
        top: calc(15px + var(--sa-top));
        left: calc(20px + var(--sa-left));
    }

    /* ドロワーは fixed なので左右も自分で持つ */
    header .sidebar {
        padding-left: var(--sa-left);
        padding-right: var(--sa-right);
    }

    /* 帯のぶんの scroll-margin も合わせる */
    body.is-scrolled .p-about_main,
    body.is-scrolled .p-faq,
    body.is-scrolled .p-news,
    body.is-scrolled .p-contact {
        scroll-margin-top: calc(76px + var(--sa-top));
    }

    /* メインビジュアル上端の暗幕。ロゴが下がったぶん、暗い範囲も下へ伸ばす */
    .slide::after {
        height: calc(320px + var(--sa-top));
    }
}

@media only screen and (max-width: 896px) {
    header .menu_aside .menu_btn,
    header .menu_aside.fixed .menu_btn {
        top: calc(20px + var(--sa-top));
    }

    header .menu_aside.fixed .menu_btn {
        right: calc(35px + var(--sa-right));
    }

    header .menu_aside .js-top1,
    header .menu_aside .logo .m-logo {
        top: calc(20px + var(--sa-top));
    }

    /* ドロワー。上の余白にノッチぶんを足す。
       背景（#fff）は要素の外周に敷かれるので、余白を増やしても白は上端まで届く。
       下は、中に固定されている相談ボタン（54px）とホームインジケータのぶんだけ
       送れるようにして、最後の項目が潜らないようにする。 */
    header .sidebar {
        padding-top: calc(115px + var(--sa-top));
        padding-bottom: calc(54px + var(--sa-bottom));
    }

    /* 画面下の固定CTA。**色は .m-spcta ではなく中の a が持っている**ので、
       入れ物ではなく a の下余白を伸ばす。こうしないと伸ばした部分が透明になり、
       「下だけ背景が敷かれていない」状態が残る。 */
    .m-spcta a,
    .c-reservation.m-menucta a {
        padding-bottom: calc(15px + var(--sa-bottom));
    }

    /* 固定CTAの高さが増えたぶん、ページ下端の余白も増やす */
    body {
        padding-bottom: calc(52px + var(--sa-bottom));
    }

    /* 「ページ上部へ」も同じだけ持ち上げる */
    footer .backtotop {
        bottom: calc(66px + var(--sa-bottom));
        right: calc(25px + var(--sa-right));
    }

    /* ドロワーの中の相談ボタンから受付時間を外す。
       ここは「縦に積むので幅に余裕がある」という前提で受付時間を出していたが、
       実測（2026-08-31・390px幅）では画面下の固定CTAと同じ横並びで、
       「フォームで相談」が右へ 13px はみ出して切れていた。
       画面下の固定CTA（.m-spcta）と同じ扱いにそろえる。 */
    .c-reservation.m-menucta .m-spcta__hours {
        display: none;
    }
}

/* タブレット（897〜1024px）の固定CTAはサイドバーの下に浮かせている。
   iPad にもホームインジケータがあるので、その手前で止める。 */
@media only screen and (min-width: 897px) {
    .m-spcta {
        bottom: calc(40px + var(--sa-bottom));
    }
}

/* フッターに達したときの「ページ上部へ」も同じだけ持ち上げる
   （土台が .is-bottom で 80px を当てているので、同じ形で書かないと効かない） */
@media only screen and (max-width: 896px) {
    footer .backtotop.is-bottom {
        bottom: calc(80px + var(--sa-bottom));
    }
}

/* ==============================================================
 * iOS Safari の上下バーの色（2026-09-01・2回目の修正）
 *
 * 症状：iPhone の Safari で、画面いちばん上のステータスバー側と、
 *       いちばん下のツールバー側だけ、白帯／固定CTAの色が届かない。
 *
 * Safari は上下バーの色を「ビューポートの端に接している position:fixed / sticky の
 * 要素」から採る（WebKit Bugzilla 301756）。このサイトで上下の端にいて、
 * いちばん前面にいたのは白ヘッダーではなかった。
 *
 * 1回目（8002）は**実機で直らなかった**。閉じたドロワー（8001）は越えたが、
 * その前に全画面の fixed 擬似要素 body::after（99999・白・opacity:0）がいた。
 * querySelectorAll では擬似要素が出てこないので、最初の実測から漏れていた。
 *
 * 実機で直ることが確認できているのは検証ページ satest/l.html の条件4、
 * すなわち **.m-headbar と .m-spcta を 2147483646（最前面のひとつ下）にした版**だけ。
 * 中間の値は実機で試していないので採らない。
 *
 * ただし条件4のままだと、白帯が寺紋とハンバーガーの入れ物（8003／9000）も越えてしまい、
 * **寺紋とハンバーガーが白帯の下に潜って消える**（実機で発生）。
 * そこで入れ物だけを 2147483647（上限）に上げて、1つぶんの差で前に出す。
 *
 *   2147483647  header .menu_aside（寺紋・ハンバーガーの入れ物）
 *   2147483646  .m-headbar ／ .m-spcta
 *       99999   body::after（ページ遷移の白フェード）
 *        9999   .loading（この版では出力していない）
 *        9000   もとの header.ex-top .menu_aside（下層）
 *        8003   もとの header .menu_aside（トップ）
 *        8001   閉じたドロワー header .sidebar ／ 暗幕 body::before
 *
 * 入れ物 header .menu_aside は**高さ0**（中身が全部 absolute / fixed）で背景も透明なので、
 * 上端の色を採る対象にはならない（実測＝トップ・下層とも rect の top と bottom が同じ0）。
 * 上げても上端のサンプリングを奪わない。
 *
 * 下の規則は、上げたせいで前に出てはいけない場面で元の高さに戻すためのもの。
 * ============================================================== */
@media only screen and (max-width: 1024px) {
    /* ドロワーを開いているあいだ（body.blocked）は元に戻す。
       戻さないと、白帯（と下端の1pxの罫）が開いたドロワーの上に重なる。
       このとき端にいるのは見えているドロワー自身（白）なので、色は正しく採られる。
       ※ 入れ物（menu_aside）は上げたままにする。中の閉じる×と寺紋は
         開いたドロワー（8001）より前に居続ける必要がある。 */
    body.blocked .m-headbar {
        z-index: 499;
    }

    /* ページ遷移の白フェード（body.fadeout ＝ body::after 99999）より後ろへ戻す。
       **これは 2147483646 にしたことで新しく必要になった規則。**
       戻さないと、白くフェードしているあいだ白帯・固定CTA・寺紋だけが
       フェードの上に浮いて残る。body.fadeout は読み込み直後の1秒間と、
       リンクを踏んでから遷移するまでの0.6秒に付く（base/js/main.js）。 */
    body.fadeout .m-headbar {
        z-index: 499;
    }

    body.fadeout header .menu_aside {
        z-index: 8003;
    }

    body.fadeout header.ex-top .menu_aside {
        z-index: 9000;
    }

    /* 土台のモーダル（暗幕 body::before ＝ 8001／白箱 body::after ＝ 8002）が出る場面でも戻す。
       ※ このサイトでは body.overlay を付けるJSが1箇所も無く、body.removefadeout も
         body.grounds1（境内案内・このサイトには無いページ）専用なので、いまは発動しない。
         土台をあとから使ったときに白帯が暗幕を突き抜けないよう、先に書いておく。 */
    body.overlay .m-headbar,
    body.removefadeout .m-headbar {
        z-index: 499;
    }

    /* 寺紋とハンバーガーの入れ物。白帯（2147483646）より1つだけ前に出す。
       ここを上げないと、白帯を上げたぶん寺紋とハンバーガーが白帯の下に隠れる。
       トップは position:absolute（8003）、下層は header.ex-top で position:fixed（9000）と
       土台の作りが違うので、両方に書く。 */
    header .menu_aside {
        z-index: 2147483647;
    }

    header.ex-top .menu_aside {
        z-index: 2147483647;
    }
}

@media only screen and (max-width: 896px) {
    body.blocked .m-spcta,
    body.overlay .m-spcta,
    body.removefadeout .m-spcta {
        z-index: 60;
    }

    body.fadeout .m-spcta {
        z-index: 60;
    }
}

/* ==============================================================
 * 2026-09-01 の指摘（Sone）
 * ============================================================== */

/* --------------------------------------------------------------
 * A. 画面の低いPCで、メニューが画面からはみ出す
 *
 * 土台は `@media (max-width:1024px)` で
 * `header .sidebar_menu { min-height: 400px; padding-top: 200px }` を当てている。
 * 幅1024px以下では、メニューだけで600px近い高さを要求するため、
 * 画面の高さが650pxを下回るとドロワーの下（相談ボタン）が画面の外に出る。
 *
 * 実測（2026-09-01・ローカル）＝ 1024x560 で 90px、1024x600 で 50px はみ出す。
 * 1024x650 でちょうど収まり、幅1025px以上では 262px なので起きない。
 *
 * 幅ではなく**高さ**が足りないことが原因なので、高さで分岐して余白を詰める。
 * 幅の分岐はそのままにするので、通常のタブレット・スマートフォンの見え方は変わらない。
 * -------------------------------------------------------------- */
@media only screen and (max-width: 1024px) and (max-height: 700px) {
    header .sidebar_menu {
        min-height: 0;
        padding-top: 40px;
    }
}

/* --------------------------------------------------------------
 * B. トップの「アクセス」を横組みにする
 *
 * 土台は住所・経路を縦組みで右から左へ並べる作り。
 * 住所と経路は縦に読ませる文ではなく、横組みのほうが早く読める（Sone判断）。
 * スマートフォン（896px以下）では土台が既に横組みなので、ここはPC・タブレット向け。
 *
 * `c-txt_vertical` は build.py 側で外した。ここでは
 * 土台が縦組み前提で入れている「横並び」と「1つめの p の左余白」を戻す。
 * -------------------------------------------------------------- */
.access .text.m-access-text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    align-items: flex-start;
    /* 土台は `.access .map` に `width:100%` を持たせているので、
       文字側にも幅を書かないと地図が場所を全部取る。
       住所（〒＋和歌山県…8号）が1行で収まる幅を確保する。 */
    flex: 0 0 48%;
    max-width: 48%;
    padding-top: 4px;
}

.access .text.m-access-text h3,
.access .text.m-access-text p {
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    margin-left: 0;
    text-align: left;
}

.access .text.m-access-text h3 {
    margin-bottom: 20px;
}

.access .text.m-access-text p {
    line-height: 2;
    margin-bottom: 10px;
}

/* 土台が「2つめの子（＝最初の p）」に付ける縦組み用の左余白を消す */
.access .text.m-access-text p:nth-child(2) {
    margin-left: 0;
}

/* 文字側に幅を割いたぶん地図が狭くなる（実測 1440px で 510px → 426px）。
   土台が地図の右に空けている 120px を詰めて、地図の見やすさを戻す。 */
@media only screen and (min-width: 897px) {
    .access .map {
        margin-right: 60px;
    }
}

/* スマートフォンは土台が地図と文字を縦に積む。幅の取り合いは起きないので全幅に戻す */
@media only screen and (max-width: 896px) {
    .access .text.m-access-text {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
}

/* --------------------------------------------------------------
 * C. お問い合わせページ：見出しと本文がくっついている
 *
 * 実測（2026-09-01・1440x900）＝ 縦組みの大見出し `.c-ttl02` の下端と
 * 本文の上端の差が **0px**。土台は `.c-ttl02` に下の余白を持たせていない。
 * -------------------------------------------------------------- */
.p-contact .c-ttl02 {
    margin-bottom: 48px;
}

@media only screen and (max-width: 896px) {
    .p-contact .c-ttl02 {
        margin-bottom: 32px;
    }
}

/* --------------------------------------------------------------
 * D. 入力欄の余白
 *
 * 実測（2026-09-01）＝ padding 16px/18px・高さ55px。文字が枠に近い。
 *
 * **土台が `.c-form form input` と `select` に `height: 55px` を書いている。**
 * `box-sizing: border-box` なので、padding を増やしても高さは 55px のままで、
 * 内側の文字の居場所が減るだけだった（padding を 20px にしても高さは 55px）。
 * 高さの固定を外して、余白が実際の高さに出るようにする。
 * -------------------------------------------------------------- */
.p-contact.c-form form input[type="text"],
.p-contact.c-form form input[type="tel"],
.p-contact.c-form form input[type="email"],
.p-contact.c-form form input[type="date"],
.p-contact.c-form form select {
    height: auto;
    min-height: 55px;
    padding: 18px 22px;
}

.p-contact.c-form form textarea {
    padding: 18px 22px;
}

/* --------------------------------------------------------------
 * E. プレースホルダーが読めない
 *
 * 実測（2026-09-01）＝ 色の指定が無く、ブラウザ既定の #757575 が出ていた。
 * 白地とのコントラスト比は 4.61:1 で、AAの下限（4.5）ぎりぎり。
 * 本文の補助色 #6b635b（同 5.90:1）に合わせる。
 * 本文色 #413b36 よりは薄いので、入力済みの文字と見分けはつく。
 * -------------------------------------------------------------- */
.p-contact.c-form form input::-webkit-input-placeholder,
.p-contact.c-form form textarea::-webkit-input-placeholder {
    color: #6b635b;
    opacity: 1;
}

.p-contact.c-form form input::placeholder,
.p-contact.c-form form textarea::placeholder {
    color: #6b635b;
    opacity: 1;
}

/* --------------------------------------------------------------
 * F. 帯のページ名が長いと、下のメニューと重なる（2026-09-01）
 *
 * 帯のタイトルは縦組みで、上から下へ**文字数ぶん伸びる**。
 * スマートフォンでは帯の高さが画面幅と同じ（bgsp が 1:1）しかなく、
 * 7文字を超えるとグループ内メニューに乗ってしまう。
 *
 * 実測（390x844）＝ 7文字で26px、8文字で59px、9文字（きうりふうじ祈祷会）で86px。
 * タイトルの上端(122px)とメニューの上端(331px)の間に使える高さは 209px しかない。
 *
 * 文字数は build.py が `m-bandttl--len7/8/9` として付ける。
 * PC・タブレットでは重ならない（実測 768x1024・1440x900 とも重なり無し）ので、
 * 小さくするのはスマートフォンだけにする。
 * -------------------------------------------------------------- */
/* PC・タブレット（帯の高さ500px・タイトル3.2rem）
   2026-09-02、6文字も対象に足した。「きうり封じ」を「きうりふうじ」に改めたことで
   帯の下のメニューが縦に伸び、6文字のタイトルでも乗るようになったため（実測）。 */
.p-about_main .m-bandttl--len6 {
    font-size: 2.6rem;
}

.p-about_main .m-bandttl--len7 {
    font-size: 2.3rem;
}

.p-about_main .m-bandttl--len8 {
    font-size: 2.2rem;
}

.p-about_main .m-bandttl--len9 {
    font-size: 1.9rem;
}

/* スマートフォン（帯の高さ＝画面幅・タイトル2.6rem） */
@media only screen and (max-width: 896px) {
    .p-about_main .m-bandttl--len6 {
        font-size: 2.4rem;
    }

    .p-about_main .m-bandttl--len7 {
        font-size: 2rem;
    }

    /* 画面の狭い機種（375px幅）だと帯も低くなるので、8文字は 2rem では
       3px だけ乗る。実測で確かめて 1.9rem にした（2026-09-01）。 */
    .p-about_main .m-bandttl--len8 {
        font-size: 1.9rem;
    }

    .p-about_main .m-bandttl--len9 {
        font-size: 1.7rem;
    }
}

/* --------------------------------------------------------------
 * G. 元が小さい写真は、表示幅を抑えて粗さを出さない（2026-09-01）
 *
 * 水子永代供養の納骨壇は、頂いた原本が 862x574 しかない。
 * 本文の横写真は 810px 幅で出るので、画素密度2倍の画面では
 * 1620px 必要なところに 862px しかなく、実測の充足率は 0.53 だった
 * （規格どおり 1400px ある写真でも 0.86 なので、これは明らかに低い）。
 *
 * 元の解像度は上げられないので、**表示のほうを小さくして密度を合わせる**。
 * 500px で 862 ÷ (500×2) = 0.86 となり、他の写真と同じ細かさになる。
 *
 * より大きい原本を頂けたらこの指定を消すこと。
 * セレクタが写真の名前を直に指しているのは、これが「その写真の事情」だから。
 * -------------------------------------------------------------- */
/* **`width: 100%` を必ず一緒に書く。**
   `max-width` だけだと、画面が狭いときも写真の持っている大きさ（862px）が
   優先されて 500px のまま出て、画面からはみ出す
   （2026-09-01 実測＝SP 390px で横スクロール145px）。
   `width: 100%` があれば親の幅に収まり、そのうえで 500px を超えない。 */
/* セレクタは**部分一致**にする。2026-09-02 に写真のURLへ `?v=指紋` を足したので、
   末尾一致（`$=`）では当たらなくなった（実測＝表示幅が500pxから862pxへ戻っていた）。 */
.p-about_detail img[src*="h-noukotsu-mizuko"] {
    width: 100%;
    max-width: 500px;
}

/* --------------------------------------------------------------
 * J. 「境内のようす」を押したら大きく見せる（2026-09-02 Sone指示）
 *
 * 一覧は正方形（760x760）に切ったもの。押したときは切り取っていない
 * `gf-`（長辺1600）を出す。一覧をそのまま拡大すると、画面いっぱいでは粗く、
 * 正方形に切った状態のままになってしまう。
 *
 * 前面に出すものなので、重なりの順番はサイトで一番前にする。
 * ドロワー（2147483647）より前に出す必要はないが、
 * 画面下の固定CTA（2147483646）と白い帯より前でないと、写真の上に帯が残る。
 * -------------------------------------------------------------- */
.m-gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* ボタンにしたことで付くブラウザ既定の枠を消し、押せることは拡大で示す */
    -webkit-appearance: none;
    appearance: none;
}

.m-gallery__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* 開いている間は背面を動かさない */
body.is-lbopen {
    overflow: hidden;
}

.m-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    box-sizing: border-box;
    background-color: rgba(26, 22, 18, .92);
}

.m-lightbox[hidden] {
    display: none;
}

.m-lightbox__inner {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.m-lightbox__img {
    max-width: 100%;
    /* 見出し（キャプション）のぶんを残して収める */
    max-height: calc(100vh - 10vmin - 48px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.m-lightbox__cap {
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: .06em;
    text-align: center;
}

/* 閉じる・送りのボタン。文字ではなく線で描く（書体に依存させない） */
.m-lightbox__close,
.m-lightbox__prev,
.m-lightbox__next {
    position: absolute;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.m-lightbox__close {
    top: 12px;
    right: 12px;
}

.m-lightbox__close::before,
.m-lightbox__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 28px;
    height: 1px;
    background-color: #fff;
}

.m-lightbox__close::before {
    transform: rotate(45deg);
}

.m-lightbox__close::after {
    transform: rotate(-45deg);
}

.m-lightbox__prev {
    left: 8px;
    top: 50%;
    margin-top: -28px;
}

.m-lightbox__next {
    right: 8px;
    top: 50%;
    margin-top: -28px;
}

.m-lightbox__prev::before,
.m-lightbox__next::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 20px;
    width: 18px;
    height: 18px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.m-lightbox__prev::before {
    transform: rotate(-135deg);
}

.m-lightbox__next::before {
    transform: rotate(45deg);
}

.m-lightbox__close:focus-visible,
.m-lightbox__prev:focus-visible,
.m-lightbox__next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -8px;
}

@media only screen and (max-width: 896px) {
    .m-lightbox {
        padding: 3vmin;
    }

    .m-lightbox__prev,
    .m-lightbox__next {
        width: 48px;
        height: 48px;
    }
}

/* --------------------------------------------------------------
 * アクセスの経路図（2026-09-07）
 *
 * 「起点 → 区間 → 中継 →（合流）→ 到達」を1本の図で見せる。
 * HTMLは build.py の route_diagram() が出す。**画像にしない。**
 * 文字が画像になると読めず、拡大もできず、検索にも出ない。
 *
 * 色は既存のものだけを使う（このサイトに色のCSS変数は無い）。
 *   本文 #413b36 ／ 補助 #6b635b ／ 罫線 #d8d2c8 ／ 濃い背景 #3a332c
 * 参照にした他サイトの図は無彩色のグレーだが、そちらは持ち込まない。
 *
 * PCは横に流し、1024px以下では縦に組み替える。**横スクロールにしない。**
 * この図の値打ちは「入口が2つあって1点に合流する」という全体像で、
 * 横スクロールにすると全体が一度に見えず、スクロールできることにも気づかれない。
 * -------------------------------------------------------------- */
.m-route {
    display: flex;
    align-items: stretch;
    margin: 2.4rem 0 0;
    /* いちばん下の枝の総所要は絶対配置で箱の外に出ているので、その高さぶん下を空ける。
       空けないと図の真下にある注記と行がくっつく（目視で確認）。 */
    padding-bottom: 3.2rem;
    color: #413b36;
}

/* 枝を縦に積む。**grid にするのは起点ブロックの幅を枝どうしで揃えるため。**
   幅を中身まかせ（flex）にすると「JR和歌山駅から」と「南海和歌山市駅から」で
   ブロックの幅が変わり、区間の始まる位置が段ごとにずれる（実測で31pxの差）。
   1列目を max-content にすると、その図の中でいちばん長い起点に全段が揃う。
   `.m-route__branch` は意味を持たない箱なので display:contents で畳んでよい
   （中の <ol> はそのまま残るので、リストとしての読み上げは変わらない）。 */
.m-route__branches {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    /* 総所要を箱の外（絶対配置）に出しているので、その高さぶん余分に空ける */
    row-gap: 5.6rem;
}

.m-route__branch {
    display: contents;
}

/* 起点。幅は中身で決める（「堺市方面から」と「南海和歌山市駅から」で必要な幅が違う）。
   固定幅にすると、短い起点の図まで余分に場所を取り、右の区間が足りなくなる。 */
/* 起点。**総所要は箱の高さに含めない。**
   含めると「箱＋総所要」の中心が行の中心になり、箱そのものの中心が
   罫線より下がる（実測17px）。参照にした図と同じく、罫線は箱の中心から出す。 */
.m-route__start {
    flex: 0 0 auto;
    position: relative;
}

.m-route__from {
    background: #3a332c;
    color: #fff;
    text-align: center;
    padding: 1.2rem 1.2rem;
    font-size: 1.5rem;
    line-height: 1.5;
    white-space: nowrap;
}

.m-route__from span {
    display: block;
    font-size: 1.3rem;
}

.m-route__total {
    position: absolute;
    top: calc(100% + .8rem);
    left: 0;
    font-size: 1.4rem;
    color: #6b635b;
    line-height: 1.4;
    white-space: nowrap;
}

/* 区間・中継・到達を並べる列。道順は順序に意味があるので ol で組んでいる */
/* **区間の高さを揃える（align-items: stretch）。**
   center にすると、経路名が2行の区間だけ箱が縦に伸び、その区間の
   経路名の下端と所要時間の上端が下へ押し下げられる（実測で13pxのずれ）。
   高さを揃えたうえで、区間の中を上下ちょうど半分に割り、
   上半分に経路名を下寄せ、下半分に所要時間を上寄せで置く。
   境目（＝50%）が罫線の位置なので、経路名が何行になっても
   **上に伸びるだけで罫線も所要時間も動かない。** */
.m-route__steps,
.m-route__trunk {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 中継・到達は罫線の高さに合わせる（枝をまたぐ trunk のぶんは下で stretch に戻す） */
.m-route__steps > .m-route__node,
.m-route__steps > .m-route__goal {
    align-self: center;
}

/* 合流後の区間は、枝をまたぐ縦長の箱に挟まれている。ここまで stretch にすると
   経路名と所要時間が図の上端・下端まで引き離される。中身の高さのままにする。 */
.m-route__trunk > .m-route__leg {
    align-self: center;
}

.m-route__trunk {
    flex: 0 0 auto;
}

/* 区間。罫線が中央を通り、上に経路名・下に所要時間が乗る */
/* 区間。罫線が中央を通り、上に経路名・下に所要時間が乗る。
   **幅は中身で決める。** 均等幅（min-width固定）にすると、中身の長い区間だけが
   何行にも折り返し、しかも日本語は語中でも切れる。実測（2026-09-07・1280px）で
   「阪神高速4号湾岸線〜阪和自動車道」が4.4行、「約13分／約5km」が2.4行になり、
   その区間だけ縦に伸びて罫線と箱の高さが揃わなくなっていた。
   max-content で「折り返さずに済む幅」を下限にし、余りがあれば伸ばす。 */
.m-route__leg {
    position: relative;
    flex: 1 1 auto;
    min-width: max-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 1.2rem;
}

.m-route__leg::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #d8d2c8;
}

.m-route__via,
.m-route__time {
    display: block;
    position: relative;
    font-size: 1.4rem;
    line-height: 1.5;
    color: #6b635b;
    /* 「約38分／約52km」を「約38分／約」「52km」に割らない。
       意図した位置で折るときは HTML 側に <br> を書く。 */
    white-space: nowrap;
}

/* 上下を半分ずつに割る。経路名は下端を罫線に、所要時間は上端を罫線に合わせる */
.m-route__via {
    flex: 1 1 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .8rem;
}

.m-route__time {
    flex: 1 1 50%;
    padding-top: .8rem;
}

.m-route__node {
    flex: 0 0 auto;
    border: 1px solid #d8d2c8;
    background: #fff;
    padding: 1.2rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5;
}

.m-route__goal {
    flex: 0 0 auto;
    background: rgba(216, 210, 200, .35);
    padding: 1.2rem 1.4rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.5;
}

/* 合流したあとの共通部分。枝が2本あるので、箱を図の高さいっぱいに伸ばす */
.m-route__trunk > .m-route__node,
.m-route__trunk > .m-route__goal {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 縦に積んだときだけ出す「合流後のくり返し」。横に流すPCでは共通部分が1つあれば足りる */
.m-route__tail {
    display: none;
}

.m-route__note {
    margin-top: 1.6rem;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #6b635b;
}

.m-route__after {
    margin-top: 1.6rem;
}

/* スマートフォン・タブレット。横に流すのをやめて上から下へ読ませる。
   罫線も横から縦へ引き直す。合流の表現（縦に伸びる箱）はPCだけのものなので外す。 */
@media only screen and (max-width: 1024px) {
    .m-route {
        display: block;
        margin-top: 2rem;
        padding-bottom: 0;
    }

    .m-route__branches {
        display: block;
    }

    .m-route__branch {
        display: block;
    }

    .m-route__from {
        white-space: normal;
    }

    /* 縦に積むときは上下半分割りも絶対配置も要らない */
    .m-route__start {
        position: static;
    }

    .m-route__total {
        position: static;
        margin-top: .6rem;
    }

    .m-route__leg {
        display: block;
    }

    .m-route__via,
    .m-route__time {
        display: block;
        flex: none;
    }

    .m-route__branch + .m-route__branch {
        margin-top: 2.4rem;
    }

    .m-route__start {
        width: auto;
    }

    .m-route__from {
        text-align: left;
        padding: 1rem 1.4rem;
    }

    .m-route__total {
        margin-top: .6rem;
    }

    .m-route__steps,
    .m-route__trunk {
        display: block;
    }

    .m-route__leg {
        padding: 1.2rem 0 1.2rem 2.4rem;
        min-width: 0;
        text-align: left;
    }

    /* 縦に積むときは幅が足りないので折り返しを許す。ただし語中では切らない
       （keep-all を外すと「阪和自動車」「道」のように漢字の途中で割れる）。 */
    .m-route__via,
    .m-route__time {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .m-route__leg::before {
        left: .8rem;
        right: auto;
        top: 0;
        bottom: 0;
        border-top: 0;
        border-left: 1px solid #d8d2c8;
    }

    .m-route__via { padding-bottom: .2rem; }
    .m-route__time { padding-top: 0; }

    .m-route__node,
    .m-route__goal {
        display: block;
        text-align: left;
        padding: 1rem 1.4rem;
    }

    .m-route__trunk > .m-route__node,
    .m-route__trunk > .m-route__goal {
        display: block;
    }

    /* 縦のときは合流を描けない。枝ごとに道順を最後まで出し、共通部分のほうを隠す。
       同時に両方が出ることはないので、読み上げでも道順は1回しか流れない。 */
    .m-route__tail {
        display: block;
    }

    .m-route__trunk {
        display: none;
    }
}

/* ==================================================================
   コラム記事の本文（.p-entry）で使う部品（2026-09-10）

   おしらせ・コラムの記事本文は、どちらも `.p-entry` の中に入る。
   ここまでの `.p-entry` には段落・h2/h3・リンクしか無く、
   箇条書き・表・引用・写真の説明・注記・区切り線が素のまま出ていた。
   記事を書き始めるにあたって、本文で使う部品を一通りそろえる。

   決めごと（既存の流儀に合わせる）
     ・色は本文 #413b36 ／ 補助 #6b635b ／ 罫線 #d8d2c8 ／ 薄い地 #f7f5f1
       （このサイトに色のCSS変数は無いので直値で書く）
     ・余白は文字サイズ基準（em）。固定pxを足さない
     ・見出しは「前を広く・後ろを狭く」
     ・土台（style.css）は触らず、ここで当てる
   土台のリセットで `ol, ul { list-style: none }` と
   `h1〜h6 { font-weight: bold }` が効いているので、両方ここで戻している。
   ================================================================== */

/* ---- 見出し（3段を見分けられるようにする）
   これまで h2 と h3 はまったく同じ見た目だった（1.7rem／PC 1.9rem）ので、
   階層が2段以上あると読み手には区別が付かなかった。
   h2 だけ一回り大きくして下に細い罫線を引き、h3 は今までのまま、
   h4 は本文と同じ大きさにして頭に短い罫線を置く。
   太さは下層ページの節見出し（.p-about_ttl02）に合わせて normal。 */
.p-entry h2,
.p-entry h3,
.p-entry h4 {
    font-weight: normal;
}

.p-entry h2 {
    font-size: 1.9rem;
    padding-bottom: .5em;
    border-bottom: 1px solid #d8d2c8;
    /* 回り込ませた写真の横から始まらないようにする */
    clear: both;
}

.p-entry h4 {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #413b36;
    margin: 2.4em 0 1em;
}

/* h4 の頭に置く短い罫線。文字を小さくせずに階層を下げるための印。 */
.p-entry h4::before {
    content: "";
    display: inline-block;
    width: .9em;
    height: 1px;
    background: #b9b1a5;
    vertical-align: .3em;
    margin-right: .6em;
}

/* 見出しがすぐ下の見出しに続くときは、間を詰める（3em は空きすぎる） */
.p-entry h2 + h3,
.p-entry h3 + h4 {
    margin-top: 1.6em;
}

.p-entry > h4:first-child {
    margin-top: 0;
}

/* ---- 強調と注釈 */
.p-entry strong {
    font-weight: 600;
}

.p-entry small,
.p-entry .p-entry__note {
    font-size: 1.3rem;
    line-height: 1.9;
    color: #6b635b;
}

/* ---- 箇条書き
   土台のリセットが list-style を消しているので、両方ここで戻す。
   点の箇条書きは、細い罫線と同じ色の小さな丸で打つ。 */
.p-entry ul,
.p-entry ol {
    margin: 0 0 2em;
    padding: 0;
}

.p-entry li {
    margin-bottom: .3em;
}

.p-entry li:last-child {
    margin-bottom: 0;
}

.p-entry ul > li {
    position: relative;
    padding-left: 1.3em;
}

.p-entry ul > li::before {
    content: "";
    position: absolute;
    left: .25em;
    /* 行の高さの半分（line-height 2.1）に丸の半径ぶんを引いて、1行目の中央に置く */
    top: calc(1.05em - 2px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b9b1a5;
}

.p-entry ol {
    list-style: decimal;
    padding-left: 1.8em;
}

.p-entry ol > li {
    padding-left: .2em;
}

/* 入れ子。中の箇条書きは下の余白を持たせない */
.p-entry li > ul,
.p-entry li > ol {
    margin: .3em 0 .6em;
}

/* ---- 引用 */
.p-entry blockquote {
    margin: 0 0 2em;
    padding: .2em 0 .2em 1.4em;
    border-left: 1px solid #d8d2c8;
}

.p-entry blockquote p:last-child {
    margin-bottom: 0;
}

.p-entry blockquote cite {
    display: block;
    margin-top: .8em;
    font-size: 1.3rem;
    font-style: normal;
    color: #6b635b;
}

.p-entry blockquote cite::before {
    content: "— ";
}

/* ---- 写真
   `.p-news_single img` が下に 40px の余白を持っているので、
   説明付き（figure）のときは画像側の余白を消し、figure が余白を持つ。 */
.p-entry figure {
    margin: 0 0 2em;
}

.p-entry figure img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
}

.p-entry figcaption {
    margin-top: .8em;
    font-size: 1.3rem;
    line-height: 1.9;
    color: #6b635b;
}

/* 回り込ませた写真の下に、次の見出しや区切り線が食い込まないようにする */
.p-entry::after {
    content: "";
    display: block;
    clear: both;
}

.p-entry hr {
    clear: both;
    border: 0;
    border-top: 1px solid #d8d2c8;
    margin: 3em 0;
}

/* ---- 注記の囲み（「※ ご注意」）
   `.m-note` は本文の外でも使えるようにモジュールとして定義する。 */
.m-note {
    margin: 0 0 2em;
    padding: 1.4em 1.6em;
    background: #f7f5f1;
    border: 1px solid #e3ddd3;
    box-sizing: border-box;
}

.m-note__ttl {
    font-size: 1.4rem;
    letter-spacing: .08em;
    color: #6b635b;
}

/* 本文の段落の余白（2em）が囲みの中で二重にならないようにする */
.p-entry .m-note p {
    margin-bottom: .6em;
}

.p-entry .m-note p:last-child {
    margin-bottom: 0;
}

/* ---- ほかのページへのボタン
   `.p-news_single .c-btn_link` が幅320px・中央寄せを決めているので、
   ここでは上下の余白と、本文リンクの下線を消すことだけを受け持つ。 */
.p-entry a.c-btn_link {
    text-decoration: none;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* ---- 本文中のコード表記（クラス名などを書くとき） */
.p-entry code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    background: #f2f0ec;
    padding: .1em .4em;
    border-radius: 2px;
}

/* ---- よくあるご質問を本文の中に置いたとき
   アコーディオンの中身は div なので `.p-entry p` の余白は掛からないが、
   最後の項目の下だけは本文の段落と同じ間隔にそろえる。 */
.p-entry .m-faq {
    margin-bottom: 2em;
}

.p-entry .m-faq .c-accordion:last-child {
    margin-bottom: 0;
}

/* 質問文の見出し。**その節の見出しより1段だけ下の h を使う**
   （本文の見出しが h2 なら h3）。見出しの段が飛ぶと、読み上げでも
   検索エンジンでも階層が崩れる（2026-09-10、h2 の直後に h5 を置いて
   audit_seo.cjs が「階層とび」を出した）。
   どの段を使っても見た目は変わらないよう、h3〜h5 をまとめて素に戻す。
   大きさと色は入れ物の `.c-accordion__icon` が決めている。 */
.p-entry .m-faq .c-accordion__icon h3,
.p-entry .m-faq .c-accordion__icon h4,
.p-entry .m-faq .c-accordion__icon h5 {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: normal;
    margin: 0;
    padding: 0;
    border: 0;
}

.p-entry .m-faq .c-accordion__icon h4::before {
    content: none;
}

/* ---- 表を本文の中に置いたとき
   `.m-table` の余白は 30px 固定なので、本文の段落と同じ間隔にそろえる。 */
.p-entry .m-table {
    margin-top: 0;
    margin-bottom: 2em;
}

.p-entry .m-table + .m-table__note {
    margin-top: -1.2em;
    margin-bottom: 2em;
    font-size: 1.4rem;
    color: #6b635b;
}

@media only screen and (min-width: 897px) {
    .p-entry h2 {
        font-size: 2.2rem;
    }

    .p-entry h4 {
        font-size: 1.7rem;
    }

    /* 写真の回り込み。狭い画面では横に流せないので、PCだけで効かせる。 */
    .p-entry figure.is-right {
        float: right;
        width: 40%;
        margin: .4em 0 1.6em 2em;
    }

    .p-entry figure.is-left {
        float: left;
        width: 40%;
        margin: .4em 2em 1.6em 0;
    }
}

/* --------------------------------------------------------------
 * 横に流す表（.m-table--scroll）
 *
 * 既定の `.m-table` は、狭い画面では1行ぶんを縦に積んで読ませる作り
 * （項目名は `data-label` から出す）。これは列の意味が決まっている
 * 料金表のために作ったもので、`data-label` を手で書く必要がある。
 *
 * 記事の本文に貼る表は、書く人が `data-label` を毎回書けるとは限らない。
 * この修飾子を付けた表は、狭い画面でも表のまま横に動かして読ませる。
 * 包んでいる `.m-table` が overflow-x: auto を持っているので、
 * **はみ出すのは表の中だけで、ページ全体は横に動かない。**
 * -------------------------------------------------------------- */
@media only screen and (max-width: 896px) {
  .m-table--scroll table {
    display: table;
    width: auto;
    min-width: 100%;
  }

  .m-table--scroll thead {
    display: table-header-group;
  }

  .m-table--scroll tbody {
    display: table-row-group;
  }

  .m-table--scroll tr {
    display: table-row;
    border: 0;
    margin-bottom: 0;
  }

  .m-table--scroll th,
  .m-table--scroll td {
    display: table-cell;
    width: auto;
    border: 1px solid #d8d2c8;
    padding: 12px 16px;
    /* 折り返さないことで表の幅が画面より広くなり、横に動かして読める */
    white-space: nowrap;
  }

  .m-table--scroll td::before {
    content: none;
  }

  /* セルの中の小さな注記だけは折り返してよい */
  .m-table--scroll .m-table__cellnote {
    white-space: normal;
  }
}

/* --------------------------------------------------------------
 * 「項目｜値」の2列の表（.m-table--spec）2026-09-11
 *
 * /about/ の寺院概要で使う（build.py の spec_table）。
 * 既定の `.m-table` は SP で1行ずつ縦に積み、項目名を `data-label` から出す作り。
 * この表は項目名を行見出し `th` で持つので、SP でも2列の表のまま読ませる
 * （縦に積むと9行が9枚の箱に割れて、かえって一覧しにくい）。
 * 罫線・見出しの地色は既存の表と同じ #d8d2c8 / #f2f0ec。新しい色・固定pxは足していない
 * （SP の余白 12px 16px は既定の `.m-table` の SP と同じ値）。
 * -------------------------------------------------------------- */
.m-table--spec th {
  width: 8em;
  background: #f2f0ec;
  font-weight: normal;
  white-space: nowrap;
}

/* 既定の `.m-table tbody td:nth-child(2)` は料金表向けに折り返しを止めている。
   この表では値（住所など）が長いので折り返させる。 */
.m-table--spec tbody td:nth-child(2) {
  white-space: normal;
}

@media only screen and (max-width: 896px) {
  .m-table--spec table {
    display: table;
  }

  .m-table--spec tbody {
    display: table-row-group;
  }

  .m-table--spec tr {
    display: table-row;
    border: 0;
    margin-bottom: 0;
  }

  .m-table--spec th,
  .m-table--spec td {
    display: table-cell;
    border: 1px solid #d8d2c8;
    padding: 12px 16px;
  }

  /* 項目名の列は中身の幅まで縮め、値の列に幅を回す */
  .m-table--spec th {
    width: 1%;
  }

  .m-table--spec td {
    width: auto;
  }

  /* data-label を持たないので、既定の見出し（::before）は出さない */
  .m-table--spec td::before {
    content: none;
  }
}

/* WordPress は本文の `<img>` を自動で `<p>` で包む（wpautop）。
   包まれると `.p-news_single img` の 40px と段落の 2em が二重に効くので、
   段落の中の写真は自分では余白を持たず、段落側に持たせる。
   静的HTMLの見本（包まれない）と見え方をそろえるため、
   直接置かれた写真の余白も 2em にする。 */
.p-entry > img {
    margin-bottom: 2em;
}

.p-entry p > img {
    margin-bottom: 0;
}

/* --------------------------------------------------------------
 * 横に流す表の案内（ScrollHint）
 *
 * 【2026-09-10 に置き換えた】
 * ここには以前、`background-attachment: local, local, scroll, scroll` の
 * 4段グラデーションで作った「端のぼかし」があった。JSなしで
 * 「端まで動かすと影が消える」を実現できる作りだったが、
 * **ケルソンファミリークリニックと見え方をそろえる**という Sone 指示（2026-09-10）で外し、
 * ScrollHint の `suggestiveShadow`（下の `.scroll-hint-shadow-wrap`）へ一本化した。
 * ぼかしと影を重ねると端が二重に暗くなるので、両方は置かない。
 *
 * ライブラリ本体＝`assets/css/scroll-hint.css`（ScrollHint 1.2.8 / MIT・steelydylan）。
 * 初期化は `myosenji.js`。対象は `.m-table--scroll` だけで、
 * 料金表（既定の `.m-table`）には当てていない。
 *
 * 横スクロールそのものは `.m-table { overflow-x: auto }` が持っているので、
 * **JSが読めなくても表は横に動く**（案内が出なくなるだけ）。
 * -------------------------------------------------------------- */

/* 指アイコンの位置。ライブラリの既定は要素の垂直中央（`top: calc(50% - 25px)`）だが、
   表の頭のほうが目に入りやすいので、ケルソンと同じく上から 60px に置く。 */
.m-table--scroll .scroll-hint-icon {
  top: 60px;
}

/* `suggestiveShadow` は対象を `.scroll-hint-shadow-wrap` で包む＝**DOMが1段深くなる**。
   `.p-entry .m-table + .m-table__note`（表の直後の注記）は隣接セレクタなので、
   包まれると当たらなくなる。包みも同じ扱いにする。
   ※ ここを足さないと、表の下の「※ …」だけ余白が広がる。 */
.p-entry .scroll-hint-shadow-wrap + .m-table__note {
  margin-top: -1.2em;
  margin-bottom: 2em;
  font-size: 1.4rem;
  color: #6b635b;
}

/* --------------------------------------------------------------
 * 記事ページ（おしらせ・コラム）の、上の余白（2026-09-10）
 *
 * Sone がスマートフォンで「上が空きすぎている」と指摘した箇所。
 * 元は記事の頭に縦組みの大見出し（`.c-ttl02`「コラム」）があり、
 * その存在を前提にした余白だった。2026-09-10 に大見出しを外したのに
 * 余白だけが残っていた（実測 SP390＝ヘッダー下から日付まで 180px）。
 *
 * `.p-news` の 120/80 と `.p-news_single` の 120/60 は、
 * **帯（bg-common）や大見出しがある一覧ページのための値**で、
 * どちらも持たない記事ページでは二重に効いてしまう。
 *
 * 記事ページだけを詰める。**一覧（/news/ /column/）は触らない**
 * （そちらには `.c-ttl02` の大見出しが残っているので元の余白が要る）。
 *
 * 値は新しく決めずに、下層ページの同じ位置から借りる。
 * 下層は「帯 → パンくず → `.p-about_detail`」で、
 * パンくずの下の本文ブロックが **SP 40px / PC 48px** の padding-top を持つ
 * （実測＝/eitaikuyo/ /about/ /access/ とも SP 40px・PC 48px）。
 * 記事も「（頭） → パンくず → 本文」と並びが同じなので、同じ刻みを当てる。
 * パンくず自身の padding-top（PC 22px / SP 16px）はそのまま。
 *
 * 記事の入れ物にだけ `p-news--entry` を付けてある（build.py の
 * `SINGLE_PHP_TPL` / `SINGLE_COLUMN_PHP_TPL` / `column_single_html()` の3か所）。
 * -------------------------------------------------------------- */
.p-news--entry {
  padding-top: 48px;
}

.p-news--entry .p-news_single {
  padding-top: 48px;
}

@media only screen and (max-width: 896px) {
  .p-news--entry {
    padding-top: 40px;
  }

  .p-news--entry .p-news_single {
    padding-top: 40px;
  }
}

/* --------------------------------------------------------------
 * コラム記事の著者ボックス（2026-09-10）
 *
 * Sone の指示「コラムには住職の情報を入れて権威性を持たせたい」に対する実装。
 * 置き場所は `.p-entry`（本文）の**外**。本文用の要素セレクタ（`.p-entry h2` など）に
 * 巻き込まれると、記事の節と同じ見た目になって「本文の続き」に見えてしまう。
 *
 * 罫線・背景・色は既存の表（`.m-table`）と同じ #d8d2c8 / #f2f0ec / #413b36 を使う。
 * 新しい色は足していない。余白は文字サイズ基準（em）で、字を変えれば一緒に動く。
 * -------------------------------------------------------------- */
.m-author {
    /* 下にも同じだけ空ける。本文と同じく、次の「コラム一覧へ」ボタンとくっつかないように */
    margin: 64px 0;
    padding: 2em;
    border: 1px solid #d8d2c8;
    background: #fbfaf8;
    color: #413b36;
    font-size: 1.5rem;
    line-height: 2;
}

.m-author__ttl {
    margin-bottom: 1.4em;
    font-size: 1.4rem;
    letter-spacing: .08em;
    opacity: .75;
}

/* 写真と文章。狭い画面では縦に積む（下の 896px 以下を参照）。 */
.m-author__body {
    display: flex;
    gap: 2em;
    align-items: flex-start;
}

.m-author__photo {
    flex: 0 0 120px;
}

/* 元は 600x600 の正方形。枠より大きく書き出してあるので、
   幅を決めて高さは比率に任せる（引き伸ばさない）。 */
.m-author__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.m-author__text > p {
    margin-bottom: 1.2em;
}

.m-author__text > p:last-child {
    margin-bottom: 0;
}

.m-author__name {
    font-size: 1.7rem;
    line-height: 1.8;
}

/* リンクは2本を縦に並べる。本文中のリンク（`.p-entry a`）とは別物なので
   ここで下線を持たせる。 */
.m-author__links a {
    display: block;
    margin-top: .6em;
    color: #413b36;
    text-decoration: underline;
    text-underline-offset: .3em;
}

.m-author__links a:hover {
    opacity: .7;
}

/* 冒頭の署名。日付と同じ行に置く。 */
.p-news_single .date .byline {
    margin-left: 1.2em;
    font-size: .8em;
    letter-spacing: .04em;
}

@media only screen and (max-width: 896px) {
    .m-author {
        margin: 48px 0;
        padding: 1.6em;
        font-size: 1.4rem;
    }

    /* 写真を上に、文章を下に。写真は小さめにして本文の幅を確保する。 */
    .m-author__body {
        display: block;
    }

    .m-author__photo {
        width: 96px;
        margin-bottom: 1.4em;
    }

    .m-author__name {
        font-size: 1.6rem;
    }

    /* 日付の行が2行に割れると読みにくいので、署名は改行して下に置く。 */
    .p-news_single .date .byline {
        display: block;
        margin-left: 0;
        margin-top: .4em;
    }
}

/* --------------------------------------------------------------
 * み教え（/mioshie/）2026-09-11
 *
 * 一覧はカードではなく、投稿の本文ごと縦に並べる（見出し → 出典・年代 → 本文）。
 * 入れ物は記事ページと同じ `.p-news_single`（幅840px）。各件の区切りは
 * 表と同じ罫線色 #d8d2c8、出典・年代は記事の日付と同じ #6b635b。新しい色は足していない。
 * 本文は `.p-entry`（記事本文と同じ字の大きさ・行間）。
 * -------------------------------------------------------------- */
.m-mioshie {
    padding: 64px 0;
    border-top: 1px solid #d8d2c8;
}

/* 先頭の上と末尾の下は、入れ物の余白に任せる（二重に空けない） */
.m-mioshie:first-child {
    padding-top: 0;
    border-top: 0;
}

.m-mioshie:last-child {
    padding-bottom: 0;
}

.m-mioshie__ttl {
    font-size: 2.2rem;
    line-height: 1.7;
    color: #413b36;
}

/* 見出しは個別ページへのリンク。見出しとして読ませたいので下線は触れたときだけ */
.m-mioshie__ttl a {
    color: inherit;
    text-decoration: none;
}

.m-mioshie__ttl a:hover {
    text-decoration: underline;
    text-underline-offset: .3em;
}

.m-mioshie__src {
    margin: 10px 0 28px;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: .04em;
    color: #6b635b;
}

.m-mioshie__src span + span {
    margin-left: 1em;
}

/* 一覧の中の本文は、次の区切り線との間を .m-mioshie の余白だけで決める */
.m-mioshie .p-entry {
    margin-bottom: 0;
}

.m-mioshie .p-entry p:last-child {
    margin-bottom: 0;
}

/* 個別ページ：タイトルと出典・年代は1組なので近づけ、本文の前で空ける。
   `.p-news_single .ttl` の下の余白（SP 40 / PC 48）より詳細度を上げて上書きする。 */
.p-mioshie .p-news_single .ttl {
    margin-bottom: 12px;
}

.p-mioshie .p-news_single .m-mioshie__src {
    margin: 0 0 40px;
}

@media only screen and (max-width: 896px) {
    .m-mioshie {
        padding: 48px 0;
    }

    .m-mioshie__ttl {
        font-size: 1.9rem;
    }

    /* 出典と年代は、狭い画面では1行ずつにする（途中で割れると読みにくい） */
    .m-mioshie__src span {
        display: block;
    }

    .m-mioshie__src span + span {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------
 * 一覧のページ送り（おしらせ・コラム・み教え）2026-09-29
 *
 * WordPress の `the_posts_pagination()` が出す `<nav class="navigation pagination">`。
 * **土台のCSSにも custom.css にも、これまで1行も指定が無かった。**
 *
 * それで何が起きていたか（2026-09-29に本番 /column/ で実測）：
 *   ・置き場所が `</main>` と `<footer>` のあいだだったため、
 *     `main`／`footer` に当たっている `width: calc(100% - 150px); margin-left: 150px`
 *     のどちらも効かず、nav だけが画面左端（x=0・幅1440px）から始まっていた。
 *     カードの並び `.p-news_wrap` は x=150・幅1290px。**リンク「2」は x=13px** にあり、
 *     幅150pxの固定サイドバーの下に完全に潜っていて、PCからは見えも押せもしなかった。
 *     → 置き場所は build.py 側で一覧の箱（.p-news）の中へ移した。
 *   ・`.screen-reader-text` を隠すCSSが無く、読み上げ用の見出しが
 *     **24.15pxの本文として画面に出ていた**（既定の英語 "Posts pagination"）。
 *
 * 見た目はサイトの語彙に合わせる。枠線ボタン（.c-btn_link）と同じ
 * 「細い罫線・透明の地・明朝」で、現在ページだけ地を反転させる。
 * 押せる面は44pxを下回らせない（素のままでは 9.2 x 24px しかなかった）。
 * -------------------------------------------------------------- */

/* 読み上げ専用テキストを画面から外す。WordPress標準の言い回しをそのまま採る。
   `display:none` だと読み上げからも消えるので、位置で追い出す。 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 一覧の箱（.p-news）の中、カードの並びの下に置く。
   左右の余白は .p-news_wrap と同じにして、カードの列と面を合わせる。 */
.p-news .navigation.pagination {
  margin-top: 56px;
  padding: 0 9.3%;
  box-sizing: border-box;
}

.p-news .navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* 数字・「前へ」「次へ」。枠線ボタンと同じ細い罫線にそろえる */
.p-news .navigation.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #aaaaaa;
  color: #413b36;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.p-news .navigation.pagination a.page-numbers:hover,
.p-news .navigation.pagination a.page-numbers:focus-visible {
  background-color: #413b36;
  border-color: #413b36;
  color: #ffffff;
}

/* いま見ているページ。押せないので地を反転させて区別する */
.p-news .navigation.pagination .page-numbers.current {
  background-color: #413b36;
  border-color: #413b36;
  color: #ffffff;
}

/* 「…」は枠を持たせない */
.p-news .navigation.pagination .page-numbers.dots {
  border-color: transparent;
  min-width: 24px;
  padding: 0 4px;
}

@media only screen and (max-width: 1024px) {
  .p-news .navigation.pagination {
    padding: 0 60px;
  }
}

@media only screen and (max-width: 896px) {
  .p-news .navigation.pagination {
    margin-top: 40px;
    padding: 0 35px;
  }

  .p-news .navigation.pagination .page-numbers {
    font-size: 1.3rem;
  }
}