/* ==========================================================================
   熊本県葬祭事業協同組合 本番サイト トップページ CSS
   docs/claudecode_honban.md に完全準拠

   構成：
   1.  リセット & ベース
   2.  デザイントークン（CSS変数）
   3.  フォント（明朝固定）
   4.  レイアウト共通・PC/SP表示切り替え
   5.  共通UIコンポーネント（ボタン・見出し・フェードイン）
   6.  ヘッダー
   7.  ヒーロー
   8.  信頼の数字（カウントアップ）
   8.5 組合とは／9.5 加盟葬儀社を探す／10.5-14.5 各セクション追加スタイル
   9.  3つの安心（特徴）
   10. 公的実績・連携
   11. もしもの時の流れ
   12. ふるる葬のご案内
   13. お知らせ（TOPICS）
   14. CTA
   15. フッター
   16. スマホ固定フッター
   17. ページトップへ戻るボタン
   18. レスポンシブ
   ========================================================================== */

/* ---------- 1. リセット & ベース ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-off-white);
  color: var(--color-text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* タップ時の既定の青いハイライトを、サイトのモスグリーン系に置き換える。
     既定色のままだと配色（濃紺・モスグリーン・ゴールド）から浮く。
     完全に透明にはしない — 押した手応えがないと連打され、二重送信の原因になる。 */
  -webkit-tap-highlight-color: rgba(74, 103, 65, 0.18);
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

address {
  font-style: normal;
}

/* ---------- 2. デザイントークン（CSS変数） ---------- */
:root {
  /* カラー */
  --color-dark: #1a2744; /* 濃紺：ヘッダー・重厚セクション背景 */
  --color-charcoal: #2c2c2c; /* チャコール：フッター・テキスト */
  --color-green: #4a6741; /* モスグリーン：アクセント・ボタン */
  --color-green-light: #6a8f60; /* ライトグリーン：ホバー */
  --color-green-pale: #e8f0e5; /* ペールグリーン：背景アクセント */
  --color-white: #ffffff;
  --color-off-white: #faf9f7; /* メイン背景 */
  --color-cream: #f0ede8; /* セクション背景の切り替えに */
  --color-text: #1a1a1a; /* 本文テキスト */
  --color-text-sub: #666666; /* サブテキスト */
  --color-gold: #c9a84c; /* ゴールド：認可・実績の強調に */

  /* フォント */
  --font-mincho: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-gothic: 'Noto Sans JP', sans-serif;

  /* スペーシング */
  --section-padding: clamp(60px, 8vw, 120px);

  /* トランジション */
  --transition: 0.3s ease;

  /* タイポグラフィスケール */
  --fs-xs: 0.875rem;                          /* 14px：ラベル・タグ・キャプション */
  --fs-sm: 0.875rem;                          /* 14px：補助テキスト・メタ情報 */
  --fs-base: 1.0625rem;                       /* 17px：本文（通常の説明文） */
  --fs-md: 1.375rem;                          /* 22px：カード見出し・小見出し */
  --fs-lg: clamp(1.375rem, 2.5vw, 1.875rem);  /* 22〜30px：セクション中見出し(h3) */
  --fs-xl: clamp(1.875rem, 3.5vw, 2.8125rem); /* 30〜45px：セクション大見出し(h2) */
  --fs-hero: clamp(2rem, 3.8vw, 4.2rem);      /* 32〜67px：ヒーロー(h1)。.p-hero__titleの現状値のまま */
}

/* ---------- 3. フォント（明朝固定） ---------- */
/* 見出しはShippori Mincho、本文はNoto Sans JPで統一する */
body {
  font-family: var(--font-gothic);
}
h1,
h2,
h3,
.p-hero__title {
  font-family: var(--font-mincho);
}

/* ---------- 4. レイアウト共通・PC/SP表示切り替え ---------- */
.l-container {
  width: min(1400px, 92%);
  margin: 0 auto;
}

.l-header__inner {
  width: min(1600px, 95%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: 24px;
}

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

/* .u-pc-only：768px以上でのみ表示
   .u-sp-only：767px以下でのみ表示
   ヘッダーの電話番号・お問い合わせボタンなど、PC/SPで出し分ける要素に付与し、
   二重表示を防ぐ。 */
.u-pc-only {
  display: block;
}
.u-sp-only {
  display: none;
}

/* ---------- 5. 共通UIコンポーネント ---------- */

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.c-btn--primary {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}
/* ホバー効果は @media (hover: hover) で囲み、マウス等のポインタがある環境に限定する。
   タッチ端末には「乗せる」状態がないため、囲まないとタップした瞬間に:hoverが発火して
   指を離しても貼り付き、戻ってきた時にボタンが押されたまま・カードが浮いたままに見える。
   囲めばタッチ端末では規則自体が存在しないことになり、通常時の値がそのまま効く。
   （打ち消す形で書くと通常時の値を複製することになり、元を変えた時にずれる）
   以降のホバー規則もすべて同じ方針。 */
@media (hover: hover) {
  .c-btn--primary:hover {
    background: var(--color-green-light);
    border-color: var(--color-green-light);
    transform: translateY(-2px);
  }
}
.c-btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}
@media (hover: hover) {
  .c-btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-2px);
  }
}
.c-btn--white {
  background: var(--color-white);
  color: var(--color-green);
}
@media (hover: hover) {
  .c-btn--white:hover {
    background: var(--color-cream);
    transform: translateY(-2px);
  }
}
.c-btn--tel {
  color: var(--color-white);
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 8px 12px;
  border: none;
}
.c-btn--tel svg {
  width: 20px;
  height: 20px;
}
.c-btn--sm {
  padding: 10px 24px;
  font-size: var(--fs-xs);
}
.c-btn--outline-green {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
@media (hover: hover) {
  .c-btn--outline-green:hover {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateY(-2px);
  }
}

/* 本文中のテキストリンク。
   ベースの a { color: inherit; text-decoration: none }（58行目）が効くため、
   クラスを付けないと本文と同色・下線なしになりリンクだと分からない
   （column/007.html の記事間リンクが実際にその状態だった）。 */
.c-text-link {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  .c-text-link:hover {
    text-decoration-thickness: 2px;
  }
}

/* 別ページへ誘導するバナー。
   index.html のコラムセクションと column/index.html の上部で使う（2箇所なので c- 側に置く）。
   コラムカード（白＋影）と見分けがつくよう、ペールグリーンの面にしている
   （speech.html の実例ボックスと同じ色で、行き先と印象をつないでいる）。 */
.c-promo-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 840px;
  margin: 0 auto 40px;
  background: var(--color-green-pale);
  border-radius: 4px;
  padding: 24px 28px;
  transition: var(--transition);
}
/* ページ上部に置く場合は下だけでなく上の余白も要らない（セクションのpaddingがある） */
.c-promo-banner--top {
  margin-bottom: 48px;
}
@media (hover: hover) {
  .c-promo-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26, 39, 68, 0.1);
  }
}
.c-promo-banner__body {
  flex: 1;
}
.c-promo-banner__label {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 2px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.c-promo-banner__title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 8px;
}
.c-promo-banner__desc {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-bottom: 12px;
}
.c-promo-banner__points {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.c-promo-banner__points li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-sub);
}
/* チェック印（speech.htmlの特徴カードと同じ描き方） */
.c-promo-banner__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg);
}
.c-promo-banner__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 50%;
}

/* ボタンを2つ以上横並びにする受け皿。
   text-align: center の中に直接2つ置くと隙間が数pxしか空かず、
   スマホで隣を誤タップする（基準は8px以上）。gapで確実に離す。 */
.c-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* セクション見出し（日英併記） */
.c-section-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.c-label-en {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  color: var(--color-green);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.c-heading {
  font-size: var(--fs-xl);
  letter-spacing: 0.08em;
  font-weight: 700;
}
/* 濃紺背景セクションでは白文字に */
.p-numbers .c-heading,
.p-flow .c-heading {
  color: var(--color-white);
}
.p-numbers .c-label-en,
.p-flow .c-label-en {
  color: var(--color-green-light);
}

/* スクロールフェードイン（IntersectionObserverでis-visibleを付与） */
.js-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 6. ヘッダー ---------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(250, 249, 247, 0.85); /* --color-off-white 85%不透明 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1060;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* スクロール時：固定ヘッダーであることを示す影を付与 */
.l-header.is-scrolled {
  box-shadow: 0 1px 3px rgba(26, 39, 68, 0.08);
}

.l-header__logo {
  flex-shrink: 0;
}
.l-header__logo-link {
  display: flex;
  align-items: center;
}
/* 「熊本県知事認可」の文字が読める大きさを確保 */
.l-header__logo-img {
  height: 52px;
  width: auto;
}

.l-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
}
.l-header__nav-link {
  color: var(--color-dark);
  font-size: 0.9375rem; /* 15px。トークンではなく個別指定（--fs-smは他箇所で16px下限を維持するため） */
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 4px;
}
.l-header__nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-green);
  transition: width 0.3s ease;
}
@media (hover: hover) {
  .l-header__nav-link:hover {
    color: var(--color-green);
  }
  .l-header__nav-link:hover::after {
    width: 100%;
  }
}
.l-header__nav-link.is-current,
.l-header__nav-link[aria-current="page"] {
  color: var(--color-green);
  font-weight: 700;
}

.l-header__contact {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}
.l-header__tel-block {
  text-align: right;
}
.l-header__contact-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.3;
  margin-bottom: 2px;
}
.l-header__tel {
  text-align: right;
  color: var(--color-dark);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* ハンバーガーメニュー（スマホ） */
.l-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  z-index: 1100;
}
.l-header__menu-btn span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-dark);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.l-header__menu-btn.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.l-header__menu-btn.is-active span:nth-child(2) {
  opacity: 0;
}
.l-header__menu-btn.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* スマホ用ドロワーメニュー */
.l-header__mobile-nav {
  display: none;
}
.l-header__nav-divider {
  list-style: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}

/* ドロワー表示時のオーバーレイ：メニュー未展開時は完全に非表示にする */
.l-header__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.l-header__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- 7. ヒーロー ---------- */
.p-hero {
  position: relative;
  /* スマホはアドレスバーの伸縮で 100vh が実際の表示領域より大きくなり、
     ボタンやスクロール誘導が画面外へ押し出される。dvh は実表示領域に追従する。
     100vh は dvh 非対応ブラウザ向けのフォールバックとして先に書く。 */
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.p-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(26, 39, 68, 0.65) 0%,
    rgba(26, 39, 68, 0.45) 25%,
    rgba(26, 39, 68, 0.15) 50%,
    rgba(26, 39, 68, 0.03) 60%,
    rgba(26, 39, 68, 0) 70%
  );
  pointer-events: none;
}

/* ヒーロー背景スライドショー（3枚クロスフェード） */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  /* パララックス効果（PCのみ。スマホでは17.のメディアクエリでscrollに上書き） */
  background-attachment: fixed;
  /* iOS Safari実機で、background-imageを持つ要素のopacityアニメーションが
     合成レイヤー化されず再描画が止まる（1枚目のまま固まる）不具合への対策。
     ここでtransformを使うと background-attachment: fixed が無効になり
     PCのパララックスが消えるため、レイヤー化のヒントはwill-changeのみに留める。
     transformによる強制レイヤー化はパララックスを切っているスマホ幅側で行う。 */
  will-change: opacity;
}

.hero-slide.is-active {
  opacity: 1;
}

/* 背景画像（PC・デフォルト）。スマホ版はスマホ用メディアクエリ内で上書き */
.hero-slide--1 { background-image: url('../images/main-img.jpg'); }
.hero-slide--2 { background-image: url('../images/main-img2.jpg'); }
.hero-slide--3 { background-image: url('../images/main-img3.jpg'); }

/* 視差効果（background-attachment: fixed）はスクロールに連動して背景が動くため無効化する。
   一方でクロスフェードは opacity だけの変化で移動・拡大・回転を伴わないため、そのまま残す。
   ここを transition: none にすると3秒ごとに画像が瞬間的に切り替わり、かえって目に障る。 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    background-attachment: scroll;
  }
}

.p-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 850px;
  padding-left: clamp(20px, 6vw, 100px);
  padding-right: 24px;
}

.p-hero__en {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.p-hero__title {
  font-size: var(--fs-hero);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.p-hero__desc {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 2;
  margin-bottom: 2.5rem;
}

.p-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* スクロールインジケーター */
.p-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p-hero__scroll-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
}
.p-hero__scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.4);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------- 8. 信頼の数字（カウントアップ） ---------- */
.p-numbers {
  background: var(--color-dark);
  color: var(--color-white);
}

.p-numbers__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.p-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 56px;
}

.p-numbers__item {
  text-align: center;
}

.p-numbers__num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
  font-feature-settings: 'tnum';
}

.p-numbers__num--text {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.p-numbers__suffix {
  font-size: var(--fs-md);
  color: var(--color-gold);
}

.p-numbers__label {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* 認可バッジ */
.p-numbers__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.p-numbers__badge {
  padding: 10px 22px;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* ---------- 9. 3つの安心（特徴） ---------- */
.p-features {
  background: var(--color-off-white);
}

.p-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.p-features__card {
  background: var(--color-white);
  padding: 48px 32px;
  text-align: center;
  border-top: 4px solid var(--color-green);
  box-shadow: 0 10px 30px rgba(26, 39, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
  .p-features__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(26, 39, 68, 0.12);
  }
}

.p-features__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  color: var(--color-green);
}
.p-features__icon svg {
  width: 100%;
  height: 100%;
}

.p-features__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.p-features__desc {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 1.9;
  text-align: left;
}

/* ---------- 10. 公的実績・連携 ---------- */
.p-trust {
  background: var(--color-cream);
}

.p-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ①戦没者追悼式カードは他より大きく・目立たせるため2カラム分を占有 */
.p-trust__card {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 39, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
@media (hover: hover) {
  .p-trust__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 39, 68, 0.12);
  }
}

.p-trust__card--featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

/* 左上のモスグリーンのアクセントライン */
.p-trust__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 4px;
  background: var(--color-green);
  z-index: 1;
}

.p-trust__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* memorial.jpg 未入手のため、濃紺背景に菊をイメージしたアイコン＋テキストを
   配置したプレースホルダー（写真入手後は img に差し替え） */
.p-trust__img--memorial {
  height: 100%;
  min-height: 240px;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.p-trust__memorial-icon {
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, 0.55);
}
.p-trust__memorial-title {
  font-size: var(--fs-sm);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
}
.p-trust__memorial-date {
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.p-trust__body {
  padding: 28px 30px;
}

.p-trust__card--featured .p-trust__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-trust__date {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.p-trust__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  line-height: 1.6;
}

.p-trust__desc {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 1.9;
}

/* ---------- 11. もしもの時の流れ ---------- */
.p-flow {
  background: var(--color-dark);
  color: var(--color-white);
}

.p-flow__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 56px;
}

.p-flow__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

/* スクロールで画面に入ったとき、左から順に0.15秒ずつズレてフェードイン（main.jsで delay を付与） */
.p-flow__step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.p-flow__step-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  color: var(--color-green-light);
}
.p-flow__step-icon svg {
  width: 100%;
  height: 100%;
}

.p-flow__step-content {
  flex: 1;
  min-width: 0; /* flexアイテムのテキスト折り返しを正しく機能させるため */
}

.p-flow__step-label {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.p-flow__step-desc {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* ステップ間の矢印はCSSの疑似要素で実装。最後の要素には表示しない */
.p-flow__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(50% + 40px);
  width: calc(100% - 56px);
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.p-flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  z-index: 1;
}

.p-flow__cta {
  text-align: center;
}

/* ---------- 12. ふるる葬のご案内 ---------- */
.p-fururu {
  background: var(--color-off-white);
}

.p-fururu__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.p-fururu__text .c-label-en,
.p-fururu__text .c-heading {
  text-align: left;
}
.p-fururu__text .c-heading {
  margin-bottom: 24px;
}

.p-fururu__lead {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 32px;
}

.p-fururu__list {
  margin-bottom: 40px;
}
.p-fururu__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
  font-size: var(--fs-base);
}
.p-fururu__list-item:first-child {
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
.p-fururu__list-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-green);
  margin-top: 2px;
}
.p-fururu__list-icon svg {
  width: 100%;
  height: 100%;
}

.p-fururu__btns-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* 右側：ふるる葬の特徴カード（モスグリーンの縁取りで囲む） */
.p-fururu__card {
  background: var(--color-white);
  border: 2px solid var(--color-green);
  border-radius: 4px;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 40px);
}
.p-fururu__card-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  color: var(--color-green);
  font-weight: 700;
  margin-bottom: 24px;
}
.p-fururu__card-list {
  margin-bottom: 28px;
}
.p-fururu__card-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-green-pale);
}
.p-fururu__card-list li:last-child {
  border-bottom: none;
}
.p-fururu__card-list li::before {
  content: '✦';
  color: var(--color-green);
  font-size: var(--fs-xs);
  flex-shrink: 0;
}
.p-fururu__card-note {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  text-align: right;
}

/* ---------- 13. お知らせ（TOPICS） ---------- */
.p-topics {
  background: var(--color-cream);
}

/* 幅は topics.html の記事一覧（.p-topics-page__list）と同じ800pxにそろえる。
   900pxのままだと、タイトルとサムネイルの間に268pxの空白ができて
   小さな写真が右端に取り残されて見えた（2026年8月17日に指摘を受けて調整）。 */
.p-topics__list {
  max-width: 800px;
  margin: 0 auto 40px;
}
.p-topics__item {
  border-bottom: 1px solid rgba(26, 39, 68, 0.12);
}
.p-topics__item:first-child {
  border-top: 1px solid rgba(26, 39, 68, 0.12);
}
/* 行全体をリンクにして topics.html の該当記事へ飛ばす。
   paddingは .p-topics__item ではなくこちらに持たせ、行のどこを押しても
   反応するようにしている（スマホでのタップ領域を確保するため）。

   構造は [ .p-topics__body（日付＋タイトル） ][ .p-topics__thumb ]。
   サムネイルは写真のある記事にしか出ないので、__body 側を flex:1 で伸ばして
   写真を右端に寄せている。こうすると写真の無い行でも日付・タイトルの
   左端が動かず、有無が混ざっても並びが崩れない。 */
.p-topics__link {
  display: flex;
  align-items: center;
  gap: 24px;
  /* 写真のある行（サムネ94px＋上下20px＝134px）と無い行（25px＋40px＝65px）の
     高さの差を縮めるため、28px→20px に詰めた */
  padding: 20px 0;
  transition: var(--transition);
}
.p-topics__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 32px;
}
/* 日付とタグをひとかたまりにする。「お知らせ」「活動報告」はどちらも4文字で
   バッジ幅が揃うので、タイトルの左端が行によってずれることはない。 */
.p-topics__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* バッジの見た目は topics.html（.p-topics-page__tag）と揃えている。
   色の意味も同じ：お知らせ＝組合からの告知（緑ベタ）、
   活動報告＝活動の記録（淡い緑）。 */
.p-topics__tag {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.p-topics__tag--news {
  background: var(--color-green);
  color: var(--color-white);
}
.p-topics__tag--report {
  background: var(--color-green-pale);
  color: var(--color-green);
}
/* 3:2 の写真を想定。object-fit: cover なので比率が違っても枠は崩れない。
   120×80だと800px幅の行の中で小さすぎて取り残されて見えたため、
   140×94に上げた（2026年8月17日）。行の高さは134pxになる。 */
.p-topics__thumb {
  flex-shrink: 0;
  width: 140px;
  height: 94px;
  object-fit: cover;
  border-radius: 4px;
}
@media (hover: hover) {
  .p-topics__link:hover .p-topics__title {
    color: var(--color-green);
  }
}
.p-topics__date {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-green);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.p-topics__title {
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.p-topics__more {
  text-align: right;
  max-width: 900px;
  margin: 0 auto;
}
.p-topics__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-green);
  border-bottom: 1px solid var(--color-green);
  padding-bottom: 4px;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .p-topics__more-link:hover {
    opacity: 0.6;
  }
}

/* ---------- 14. CTA ---------- */
.p-cta {
  position: relative;
  text-align: center;
  padding: 100px 0;
  color: var(--color-white);
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-green), var(--color-green-light), var(--color-green));
  background-size: 200% 200%;
  animation: ctaGradient 12s ease infinite;
}
@keyframes ctaGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.p-cta__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.p-cta__desc {
  font-size: var(--fs-base);
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}
.p-cta__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.p-cta__hours {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- 15. フッター ---------- */
.l-footer {
  background: var(--color-charcoal);
  color: rgba(255, 255, 255, 0.85);
  padding: 72px 0 32px;
}

.l-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 32px;
}

.l-footer__logo-img {
  height: 32px;
  width: auto;
  margin-bottom: 20px;
  /* 濃色背景でも視認できるよう白背景ロゴを想定。差し替え時に調整 */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.l-footer__info {
  font-size: var(--fs-xs);
  line-height: 2;
  color: rgba(255, 255, 255, 0.65);
}
.l-footer__info-badges {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.9;
}

.l-footer__nav-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.l-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l-footer__nav-link {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .l-footer__nav-link:hover {
    color: var(--color-green-light);
  }
}

.l-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.l-footer__copyright {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
}

/* ---------- 16. スマホ固定フッター ---------- */
/* PCでは常に非表示（18.のメディアクエリで!important指定）。
   スマホでは常にflexコンテナとして存在させ、is-active時のみ
   opacity/visibilityで表示することで、300pxスクロール後に
   フェードインする（main.jsが.is-activeを付与）。 */
.p-fixed-footer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 900;
}
/* iPhoneのホームバー領域（セーフエリア）を避ける。これがないとボタンの下端が
   ホームバーに重なり、押したつもりがホーム画面に戻ってしまう。
   ノッチのない端末では env() が 0 になるので、余計な余白は生じない。 */
.p-fixed-footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.p-fixed-footer__tel,
.p-fixed-footer__contact {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-white);
}
.p-fixed-footer__tel svg,
.p-fixed-footer__contact svg {
  width: 16px;
  height: 16px;
}
.p-fixed-footer__tel {
  background: var(--color-dark);
}
.p-fixed-footer__contact {
  background: var(--color-green);
}

/* ---------- 17. ページトップへ戻るボタン ---------- */
.scroll-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(26, 39, 68, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
  z-index: 950;
}
.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .scroll-to-top:hover {
    background: var(--color-green-light);
  }
}
.scroll-to-top svg {
  width: 20px;
  height: 20px;
}

/* ---------- 8.5 組合とは ---------- */
.p-about {
  background: var(--color-off-white);
}

.p-about__lead {
  max-width: 720px;
  margin: 0 auto 1.6em;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}

/* 全葬連サブコンテンツ */
.p-about__zensoren {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 56px;
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
.p-about__zensoren-label {
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  margin-bottom: 20px;
}
.p-about__zensoren-text {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}

.p-about__ambassador {
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--color-white);
  border-radius: 4px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(26, 39, 68, 0.06);
}
/* 全葬連フューネラルアンバサダー田村淳さんのYouTube動画（youtube-nocookie.com）。
   2026年8月17日に合成バナー画像（935×425）から差し替えた。
   埋め込みの既定サイズ560×315に合わせて max-width を560pxにしてある。
   iframeはwidth/height属性の比率を保たないので、aspect-ratio で16:9を維持する */
.zensoren-ambassador {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.zensoren-ambassador iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
}
.p-about__ambassador-role {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-green);
  margin-bottom: 4px;
}
.p-about__ambassador-name {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 14px;
}
.p-about__ambassador-quote {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-bottom: 20px;
}
.p-about__ambassador-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- 9.5 加盟葬儀社を探す ---------- */
.p-members {
  background: var(--color-cream);
}
.p-members__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}
.p-members__tab {
  padding: 10px 22px;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  border: 1px solid var(--color-green);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-green);
  transition: var(--transition);
}
/* 選択中タブは常に塗りつぶす。ホバーは見た目が同じだが、
   タッチ端末で貼り付かないようポインタ環境に限定する。 */
.p-members__tab.is-active {
  background: var(--color-green);
  color: var(--color-white);
}
@media (hover: hover) {
  .p-members__tab:hover {
    background: var(--color-green);
    color: var(--color-white);
  }
}
.p-members__note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-bottom: 32px;
}
.p-members__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
/* JavaScript無効環境向けの案内。一覧はJSで動的生成しているため、
   JSが無いとこの枠が空のままになってしまう。 */
.p-members__noscript {
  background: var(--color-cream);
  border-left: 4px solid var(--color-green-light);
  padding: 16px 20px;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-bottom: 40px;
}
.p-members__noscript a {
  color: var(--color-green);
  text-decoration: underline;
}
.p-members__card {
  position: relative;
  overflow: hidden; /* 背景の和柄がカード外にはみ出さないように */
  background: var(--color-white);
  padding: 24px 26px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
}
.p-members__card.is-hidden {
  display: none;
}
.p-members__card-content {
  position: relative;
  z-index: 1;
}

/* TOPページ④セクション専用：社名＋地域ラベルのみのシンプル表示。
   カード全体が個別ページへのリンク（<a>タグ）になる */
.p-members__card--simple {
  display: block;
  min-height: auto;
  padding: 20px 24px;
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
@media (hover: hover) {
  .p-members__card--simple:hover {
    box-shadow: 0 10px 24px rgba(26, 39, 68, 0.12);
    transform: translateY(-2px);
  }
}

/* 背景の和柄：地域タグに紐づく視覚バリエーション（柄の意味と地域性に関連はない）。
   5柄とも単色（モスグリーン）・不透明度8%で統一し、濃淡のムラを作らない。 */
.p-members__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.08;
  pointer-events: none;
  /* 左側（テキスト側）は柄なしにし、右へ行くほど柄が現れる */
  mask-image: linear-gradient(to right, transparent 0%, transparent 35%, black 70%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 35%, black 70%);
}

/* 熊本市：亀甲 */
.p-members__card--kumamoto-shi::before {
  background-image:
    repeating-linear-gradient(30deg, var(--color-green) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(-30deg, var(--color-green) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(90deg, var(--color-green) 0 1.5px, transparent 1.5px 26px);
}

/* 県北：市松 */
.p-members__card--kenpoku::before {
  background-image:
    linear-gradient(45deg, var(--color-green) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-green) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-green) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-green) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

/* 県央：籠目（簡略版） */
.p-members__card--kenou::before {
  background-image:
    repeating-linear-gradient(60deg, var(--color-green) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-60deg, var(--color-green) 0 2px, transparent 2px 18px);
}

/* 県南：格子 */
.p-members__card--kennan::before {
  background-image:
    repeating-linear-gradient(0deg, var(--color-green) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, var(--color-green) 0 1px, transparent 1px 14px);
}

/* 阿蘇・天草：鱗（天草3社+阿蘇1社共通） */
.p-members__card--amakusa::before {
  background-image:
    radial-gradient(circle at 50% 0%, transparent 60%, var(--color-green) 61% 66%, transparent 67%),
    radial-gradient(circle at 50% 0%, transparent 60%, var(--color-green) 61% 66%, transparent 67%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.p-members__card-region {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 999px;
  padding: 2px 12px;
  margin-bottom: 12px;
}
.p-members__card-name {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 10px;
}
.p-members__card-address,
.p-members__card-tel {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.8;
}
.p-members__card-tel a {
  position: relative;
  z-index: 2; /* stretched-linkより手前にして電話タップを優先させる */
  color: inherit;
}
.p-members__card-stretched-link {
  color: inherit;
  text-decoration: none;
}
.p-members__card-stretched-link::after {
  content: '';
  position: absolute;
  /* 起点は.p-members__card-content（position:relative）なので、親カードのpadding分だけ外側に広げてカード全体を覆う */
  top: -24px;
  right: -26px;
  bottom: -24px;
  left: -26px;
  z-index: 1;
}
.p-members__card-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--color-green);
  pointer-events: none; /* アイコン自体はクリックを奪わない、装飾のみ */
  opacity: 0.7;
  transition: var(--transition);
}
@media (hover: hover) {
  .p-members__card:hover .p-members__card-arrow {
    opacity: 1;
    transform: translateX(2px);
  }
}
.p-members__more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- 10.5 公的実績：ロゴ用固定高さスロット ---------- */
.p-trust__logo-slot {
  height: 40px;
}

/* ---------- 11.5 もしもの時の流れ：補足文言 ---------- */
.p-flow__note {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 2;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- 12.5 ふるる葬：プランカード ---------- */
.p-fururu__member-note {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-bottom: 28px;
}
.p-fururu__plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p-fururu__plan-card {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden; /* 画像をカードの角丸に合わせて切り抜く */
  border-left: 6px solid var(--color-green-light);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
}
.p-fururu__plan-card--mid {
  border-left-color: var(--color-green);
}
.p-fururu__plan-body {
  flex: 1 1 auto;
  min-width: 0; /* テキストが画像に押し出されて崩れるのを防ぐ */
  padding: 24px 28px;
}
.p-fururu__plan-image-wrap {
  flex: 0 0 50%;   /* カード幅に対する割合。PC・スマホ問わずこれ1つで対応 */
  max-width: 350px; /* PCで画面が広い時に、際限なく大きくならないための上限（指示書⑫の見た目を維持） */
  min-width: 96px;  /* スマホで極端に潰れすぎないための下限 */
  position: relative;
  overflow: hidden;
}
.p-fururu__plan-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%; /* 祭壇正面（遺影枠付近）が見切れないよう縦位置を調整 */
  filter: saturate(0.85) brightness(0.97); /* イメージ写真である旨を伝えるため主張を抑える */
}
.p-fururu__plan-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 25%);
  pointer-events: none;
}
.p-fururu__plan-tier {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  margin-bottom: 6px;
}
.p-fururu__plan-name {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 8px;
}
.p-fururu__plan-price {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 6px;
}
.p-fururu__plan-price span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: 6px;
}
.p-fururu__plan-guest {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.p-fururu__plans-note {
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-top: 8px;
}

/* ---------- 13.5 よくあるご質問（アコーディオン） ---------- */
.p-qa {
  background: var(--color-cream);
}
.p-qa__list {
  max-width: 840px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-qa__item {
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(26, 39, 68, 0.05);
  overflow: hidden;
}
.p-qa__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 500;
}
.p-qa__q-mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-xs);
}
.p-qa__q-text {
  flex: 1;
  line-height: 1.7;
}
.p-qa__q-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-green);
  transition: transform 0.3s ease;
}
.p-qa__item.is-open .p-qa__q-icon {
  transform: rotate(45deg);
}
.p-qa__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.p-qa__answer p {
  padding: 0 26px 24px 74px;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-qa__item.is-open .p-qa__answer {
  max-height: 600px;
}
.p-qa__more {
  text-align: center;
}

/* ---------- 13.6 コラム ---------- */
.p-column {
  background: var(--color-off-white);
}
.p-column__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}
.p-column__card {
  display: block;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(26, 39, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
  .p-column__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(26, 39, 68, 0.1);
  }
}
.p-column__card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.p-column__card-body {
  padding: 22px 24px;
}
.p-column__card-cat {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-green);
  border: 1px solid var(--color-green);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.p-column__card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 12px;
}
.p-column__card-desc {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-text-sub);
}
.p-column__list {
  max-width: 840px;
  margin: 0 auto 40px;
}
.p-column__list-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
}
.p-column__list-item:first-child {
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
.p-column__list-cat {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--color-green);
  letter-spacing: 0.03em;
}
.p-column__list-title {
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.p-column__more {
  text-align: center;
}

/* ---------- 14.5 関連リンク ---------- */
.p-related {
  background: var(--color-cream);
}
.p-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.p-related__card {
  display: block;
  background: var(--color-white);
  padding: 28px 30px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .p-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(26, 39, 68, 0.1);
  }
}
.p-related__card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 10px;
}
.p-related__card-desc {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 1.8;
  margin-bottom: 14px;
}
.p-related__card-link {
  font-size: var(--fs-sm);
  color: var(--color-green);
  border-bottom: 1px solid var(--color-green);
  padding-bottom: 2px;
}

/* ---------- 19. if.html：もしもの時に ---------- */

/* ページヘッダー：TOPページ⑧「もしもの時の流れ」と同系統の濃紺タイポグラフィ */
.p-if-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-if-header .c-label-en {
  color: var(--color-green-light);
}
.p-if-header .c-heading {
  color: var(--color-white);
}

/* 今すぐの方へ：TOPページCTAと同系統のグラデーション背景で最上部に強調配置 */
.p-if-emergency {
  position: relative;
  text-align: center;
  padding: 56px 0;
  color: var(--color-white);
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-green), var(--color-green-light), var(--color-green));
  background-size: 200% 200%;
  animation: ctaGradient 12s ease infinite;
}
.p-if-emergency__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.p-if-emergency__desc {
  font-size: var(--fs-base);
  line-height: 2;
  margin-bottom: 14px;
}
.p-if-emergency__note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 32px;
}

/* Part1：もしもに備えて（画像・テキストとも⑨ふるる葬プランカードの分割パターンを踏襲。
   flex比率＋max/min-widthのみで対応し、ブレークポイントごとの出し分けは行わない） */
.p-if-prepare {
  background: var(--color-off-white);
}
.p-if-prepare__lead {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  max-width: 640px;
  margin: 0 auto 48px;
}
.p-if-prepare__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p-if-prepare__item {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  border-left: 6px solid var(--color-green-light);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
}
.p-if-prepare__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
}
.p-if-prepare__num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-green);
  margin-bottom: 8px;
}
.p-if-prepare__title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}
.p-if-prepare__desc {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-if-prepare__image-wrap {
  flex: 0 0 50%;
  max-width: 350px;
  min-width: 96px;
  position: relative;
  overflow: hidden;
}
.p-if-prepare__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.98);
}
.p-if-prepare__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 25%);
  pointer-events: none;
}

/* Part2：ご逝去から火葬までの流れ（縦積みタイムライン。画像帯はPart1と同じ考え方で
   flex比率＋max/min-widthのみ、ブレークポイント出し分けなし） */
.p-if-flow {
  background: var(--color-cream);
}
.p-if-flow__lead {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  max-width: 640px;
  margin: 0 auto 48px;
}
.p-if-flow__list {
  display: flex;
  flex-direction: column;
}
.p-if-flow__step {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 40px;
}
.p-if-flow__step:last-child {
  padding-bottom: 0;
}
.p-if-flow__step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
  position: relative;
  z-index: 1;
}
.p-if-flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--color-green-pale);
}
.p-if-flow__step-body {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
}
.p-if-flow__step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.p-if-flow__step-title {
  font-size: var(--fs-md);
  font-weight: 700;
}
.p-if-flow__step-time {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  white-space: nowrap;
}
.p-if-flow__step-content {
  display: flex;
  gap: clamp(12px, 2.5vw, 24px);
  align-items: flex-start;
  background: var(--color-white);
  border-radius: 4px;
  padding: clamp(14px, 2.5vw, 20px);
  box-shadow: 0 4px 14px rgba(26, 39, 68, 0.05);
}
.p-if-flow__step-image-wrap {
  flex: 0 0 42%;
  max-width: 220px;
  min-width: 88px;
  border-radius: 4px;
  overflow: hidden;
}
.p-if-flow__step-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.p-if-flow__step-text {
  flex: 1;
  min-width: 0;
}
.p-if-flow__step-text p {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-bottom: 16px;
}
.p-if-flow__note {
  margin-top: 40px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.8;
  text-align: center;
}

/* よくある不安：開閉不要の静止表示ミニFAQ（TOPページ⑩のアコーディオンとは別実装） */
.p-if-faq {
  background: var(--color-white);
}
.p-if-faq__lead {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 40px;
}
.p-if-faq__list {
  max-width: 840px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p-if-faq__item {
  background: var(--color-cream);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 28px);
}
.p-if-faq__q {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}
.p-if-faq__a {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-if-faq__more {
  text-align: center;
}

/* ページ末尾CTA：2カラム＋共通補足 */
.p-if-cta {
  background: var(--color-cream);
}
.p-if-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.p-if-cta__col {
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
}
.p-if-cta__col-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 16px;
}
.p-if-cta__col-desc {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 24px;
}
.p-if-cta__footer {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-if-cta__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  margin-bottom: 16px;
}

/* ---------- 18. レスポンシブ ---------- */

/* 狭いPC幅（1025〜1439px）：ヘッダーナビの折り返し対策（PENDING P-020）

   ナビ6項目を1行に並べるには631.5px必要だが、使える幅は
   0.95×画面幅 −700.7px（ロゴ295.5 ＋ 連絡ブロック357.2 ＋ 余白48）しかなく、
   1366×768のノートPCでも足りずに全項目が2行になっていた。
   項目間・文字サイズ・ロゴを詰めて必要幅を536pxに下げ、1243px以上で1行に収める。

   **1440px以上は従来のままにしてある**（そこは元々1行で、詰める理由がないため）。
   上限を1439pxにしているのは、メディアクエリの幅がスクロールバーを含む
   ウィンドウ幅で判定されるため。従来の見た目で1行に収まるのは
   レイアウト幅1402px以上＝ウィンドウ幅1417px以上で、1399pxで切ると
   1400〜1417pxのウィンドウが取り残される（実測で確認済み）。
   1024px以下はハンバーガーなので影響しない。
   残る1025〜1242pxは、6項目を1行に置く幅が原理的に足りず、まだ折り返す。 */
@media (min-width: 1025px) and (max-width: 1439px) {
  .l-header__nav-list {
    gap: 20px; /* 既定 clamp(20px, 2.4vw, 40px) の下限に固定 */
  }
  .l-header__nav-link {
    font-size: 0.875rem; /* 15px → 14px */
  }
  .l-header__logo-img {
    height: 42px; /* 52px。ロゴの表示幅が295.5px → 約239pxになる */
  }
}

/* タブレット */
@media (max-width: 1024px) {
  .l-header__nav {
    display: none; /* ハンバーガーメニューに切り替え */
  }

  .p-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-trust__card--featured {
    grid-column: span 2;
  }

  .p-flow__steps {
    flex-wrap: wrap;
    row-gap: 40px;
  }
  .p-flow__step {
    flex: 0 0 25%;
  }
  .p-flow__step:not(:last-child)::after,
  .p-flow__step:not(:last-child)::before {
    display: none;
  }

  .l-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .p-members__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-column__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ */
@media (max-width: 767px) {
  :root {
    --section-padding: 64px;
    --fs-xs: 0.8125rem;                        /* 13px：ラベル・タグ・キャプション */
    --fs-sm: 0.8125rem;                        /* 13px：補助テキスト・メタ情報 */
    --fs-base: 1rem;                           /* 16px：本文（通常の説明文） */
    --fs-md: 1.125rem;                         /* 18px：カード見出し・小見出し */
    --fs-lg: clamp(1.125rem, 4vw, 1.5rem);     /* 18〜24px：セクション中見出し(h3) */
    --fs-xl: clamp(1.5rem, 4vw, 2rem);         /* 24〜32px：セクション大見出し(h2) */
  }

  /* ヒーロー：コンテンツ量が画面高さを超える場合にボタンが切れないよう可変化 */
  .p-hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ヒーロー：パララックス無効化（スマホでは重くなるためscrollに戻す） */
  .hero-slide {
    background-attachment: scroll;
    /* iOS Safari実機でクロスフェードが1枚目のまま固まる不具合への対策。
       translateZ(0)で独立した合成レイヤーを強制的に作らせ、opacityの変化を
       確実に再描画させる。この幅ではパララックス（background-attachment: fixed）を
       既に切っているため、transformを入れても見た目の副作用はない。 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* ヒーロー：スマホ専用の縦長画像（4:5）に差し替え */
  .hero-slide--1 { background-image: url('../images/main-img-sp.jpg'); }
  .hero-slide--2 { background-image: url('../images/main-img2-sp.jpg'); }
  .hero-slide--3 { background-image: url('../images/main-img3-sp.jpg'); }

  .p-hero__title {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }

  /* ヒーローコンテンツ：固定ヘッダーの裏に潜り込まないよう上余白を確保。
     下余白はスクロール誘導（SCROLL）の占有分を確保する値にして、
     ボタンと重ならないようコンテンツ全体を上に寄せる。 */
  .p-hero__inner {
    padding-top: 90px;
    padding-bottom: 115px;
  }

  /* ヒーロー英語ラベル：折り返し対策 */
  .c-label-en {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }

  /* ヒーローボタン：375px幅でも横並び1行を維持 */
  .p-hero__btns {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .p-hero__btns .c-btn {
    flex: 1;
    padding: 12px 8px;
    font-size: var(--fs-sm); /* 16px。最小フォント方針を維持するためこれ以上は縮小しない */
    white-space: nowrap; /* 既にc-btnベースで指定済みだが明示的に維持 */
    letter-spacing: normal; /* 320px幅で「加盟葬儀社を探す」が右端をわずかに超えるため字間を詰めて解消 */
  }

  /* スクロールインジケーター：PC同様のabsolute配置。
     スマホは表示領域が狭くボタンと干渉するため、縦の占有量を抑える。 */
  .p-hero__scroll {
    bottom: 24px;
    gap: 6px;
  }
  .p-hero__scroll-line {
    height: 36px;
  }

  /* ヘッダー：ハンバーガー表示、PC用ナビ・電話は非表示 */
  .u-pc-only {
    display: none !important;
  }
  .u-sp-only {
    display: block;
  }

  .l-header__menu-btn {
    display: flex;
  }

  /* ヘッダー：狭い端末でハンバーガーが画面外に押し出されるのを防ぐ。
     ロゴは flex-shrink: 0 ＋ 高さ52px固定（＝幅295px）で縮まないため、
     320px幅では ロゴ295 ＋ gap24 ＋ ボタン44 = 363px が
     内側の幅304pxに収まらず、ボタンが left:327px まで押し出されていた。
     body の overflow-x: hidden で切れるだけなので横スクロールバーも出ず、
     320px端末ではメニューを開く手段が無い状態だった。

     ボタンは44pxを死守し、余らない分だけロゴを縮める。
     flex-shrink は足りないときにしか効かないので、375px幅では
     従来どおり52pxのまま表示され「熊本県知事認可」の可読性も変わらない。 */
  .l-header__inner {
    gap: 12px;
  }
  .l-header__logo {
    flex-shrink: 1;
    min-width: 0;
  }
  /* height を固定したまま幅だけ縮むと画像が横に潰れるため、
     max-* で上限だけ与えて縦横比はブラウザに保たせる。 */
  .l-header__logo-img {
    height: auto;
    max-height: 52px;
    max-width: 100%;
  }
  /* 320px幅ではロゴが43.6pxまで縮み、リンクの当たり判定が44pxを割る。
     ヘッダーは70pxあるので、リンク側で下限だけ確保しておく。 */
  .l-header__logo-link {
    min-height: 44px;
  }

  .l-header__mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: var(--color-dark);
    padding: 100px 32px 40px;
    overflow-y: auto;
    transition: right 0.4s ease;
    z-index: 1050;
  }
  .l-header__mobile-nav.is-active {
    right: 0;
  }
  .l-header__mobile-nav .l-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    /* リンク側で上下11pxのpaddingを持たせた分、gapを26px→9pxに下げる。
       項目のピッチは 28.8+26=54.8px から 45.4+9=54.4px とほぼ変わらず、
       ドロワー全体の高さも611.8→607.4pxで、見た目と内部スクロール量を保てる。
       （リンクをblockにするとli側の行ボックスが無くなり、高さの内訳が
         「行の高さ28.8px」から「リンク45.4px」に変わる。gapはその差の調整） */
    gap: 9px;
  }
  .l-header__mobile-nav .l-header__nav-link {
    font-size: var(--fs-xs);
    color: var(--color-white);
    /* 当たり判定の確保。inlineのままだと高さが23pxしかなく基準44pxを割る。
       blockにして上下にpaddingを入れ、50.8pxにする。 */
    display: block;
    padding: 11px 0;
  }
  /* ホバー時の下線は、上のpaddingを入れる前と同じ「文字の4px下」に留める
     （padding-bottomが4px→11pxになった分だけ bottom を上げる）。 */
  .l-header__mobile-nav .l-header__nav-link::after {
    bottom: 7px;
  }
  /* 一般向けと事業者向けを分ける区切り。gapを26px→9pxに下げた分をmarginで戻す。
     区切り線自体は幅0で描画されておらず、この余白だけが2群の境目を示している。 */
  .l-header__mobile-nav .l-header__nav-divider {
    margin: 13px 0;
  }
  .l-header__mobile-contact {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
  }
  /* ドロワー内の電話番号は高さ25.6pxで基準44pxを割っていた。急ぎの方が最初に押す
     導線なので当たり判定を広げる。増えた22px分は、上をラベルの負マージン（-8px）、
     下をtel-blockのマージン（20→8px）で相殺し、文字の位置と余白は元のままにする。 */
  .l-header__mobile-contact .l-header__tel-block {
    text-align: left;
    margin-bottom: 9px; /* 電話のpadding-bottom 11px と合わせて、文字下からボタンまで20px */
  }
  .l-header__mobile-contact .l-header__contact-label {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: -8px; /* 電話のpadding-top 10px と相殺し、ラベルと番号の間隔は2pxのまま */
  }
  .l-header__mobile-contact .l-header__tel {
    color: var(--color-white);
    display: inline-block;
    padding: 10px 0 11px;
  }

  /* 信頼の数字：2カラム */
  .p-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 特徴セクション：1カラム */
  .p-features__grid {
    grid-template-columns: 1fr;
  }

  /* 公的実績・連携：縦積み */
  .p-trust__grid {
    grid-template-columns: 1fr;
  }
  .p-trust__card--featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .p-trust__img--memorial {
    min-height: 180px;
  }

  /* 流れ：縦並び */
  .p-flow__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .p-flow__step {
    flex-direction: row;
    text-align: left;
    width: 100%;
    gap: 16px;
  }
  .p-flow__step-num {
    margin-bottom: 0;
  }
  .p-flow__step-icon {
    display: none;
  }
  .p-flow__step:not(:last-child)::after,
  .p-flow__step:not(:last-child)::before {
    display: none;
  }

  /* ふるる葬：1カラム */
  .p-fururu__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-fururu__plan-body {
    padding: 20px 20px;
  }
  .p-fururu__btns-row {
    flex-direction: column;
    align-items: center;
  }

  /* TOPICS */
  /* 日付とタイトルだけを縦に積む。__link は横並びのままにして、
     サムネイルは右端に置く。縦に積むと写真が画面幅いっぱいになり、
     一覧ではなく記事本文のように見えてしまうため。 */
  .p-topics__body {
    flex-direction: column;
    gap: 8px;
  }
  .p-topics__link {
    gap: 16px;
  }
  .p-topics__thumb {
    width: 88px;
    height: 59px;
  }
}

/* ---------- 19. 加盟葬儀社 個別ページ（members/配下・ビルドスクリプト生成） ---------- */
.p-company {
  background: var(--color-cream);
  padding-top: clamp(96px, 14vw, 140px);
}

.c-breadcrumb {
  margin-bottom: 32px;
}
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-breadcrumb__item:not(:last-child)::after {
  content: '›';
  margin-left: 8px;
  color: var(--color-text-sub);
}
.c-breadcrumb__link {
  color: var(--color-text-sub);
  transition: color var(--transition);
}
@media (hover: hover) {
  .c-breadcrumb__link:hover {
    color: var(--color-green);
  }
}
.c-breadcrumb__current {
  color: var(--color-text);
}

.p-company__title {
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
  margin-bottom: 40px;
}

.p-company__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  padding: 32px;
  background: var(--color-white);
  border-radius: 4px;
  margin-bottom: 64px;
}
@media (max-width: 767px) {
  .p-company__info {
    grid-template-columns: 1fr;
  }
}
.p-company__info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-company__info-label {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}
.p-company__info-value {
  font-size: var(--fs-base);
}
.p-company__info-row--btn {
  align-self: end;
}
.p-company__info-btn {
  margin-top: 4px;
}

.p-company__halls-heading {
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

.p-company__halls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.p-company__hall {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
}
/* 同一住所の斎場は1カードにまとまるため、斎場名が複数並ぶことがある。
   アンカー遷移の着地点は個々の斎場名なので、scroll-margin-topはカードではなくここに付ける。 */
.p-company__hall-name {
  font-size: var(--fs-md);
  padding: 0 24px;
  scroll-margin-top: 100px; /* members.html「地図を見る」からのアンカー遷移時、固定ヘッダーに隠れないように */
}
.p-company__hall-name:first-of-type {
  padding-top: 20px;
}
.p-company__hall-name + .p-company__hall-name {
  margin-top: 4px;
}
/* 一覧から「この斎場の地図を見る」で飛んできたとき、カード内のどれを指しているか分かるようにする */
.p-company__hall-name:target {
  color: var(--color-green);
}
.p-company__hall-address {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  padding: 8px 24px 0;
}
.p-company__hall-address--unknown {
  font-style: italic;
}
.p-company__hall-note {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  padding: 4px 24px 0;
}
.p-company__hall-map {
  margin-top: 16px;
  line-height: 0;
}
.p-company__hall-map iframe {
  width: 100%;
  display: block;
}

.p-company__back {
  text-align: center;
}

@media (max-width: 767px) {
  .p-company__halls {
    grid-template-columns: 1fr;
  }

  /* 組合とは：アンバサダーカードは狭い画面幅ほどバナー画像内の文字が小さくなるため、余白を絞って画像幅を優先確保 */
  .p-about__ambassador {
    padding: 20px;
  }

  /* 加盟葬儀社を探す：1カラム */
  .p-members__grid {
    grid-template-columns: 1fr;
  }
  .p-members__more {
    flex-direction: column;
    align-items: stretch;
  }
  .p-members__tabs {
    gap: 8px;
  }
  /* 高さ44px（指の接触面積の目安）を確保する。paddingだけだと文字サイズ13px・
     行間23.4pxの合計で41.4pxにしかならず2.6px足りない。min-heightで下限を決め、
     flexで中央寄せすれば、将来フォントを変えても44pxは崩れない。 */
  .p-members__tab {
    padding: 8px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* QAの回答パディングをスマホ用に調整 */
  .p-qa__answer p {
    padding: 0 20px 22px 20px;
  }

  /* コラム：1カラム */
  .p-column__cards {
    grid-template-columns: 1fr;
  }
  .p-column__list-item {
    flex-direction: column;
    gap: 6px;
  }

  /* 関連リンク：1カラム */
  .p-related__grid {
    grid-template-columns: 1fr;
  }

  /* if.html：ページ末尾CTAは1カラム */
  .p-if-cta__grid {
    grid-template-columns: 1fr;
  }

  /* if.html：Part1・Part2は本文が長いため、スマホ幅では画像を上・テキストを下に積む
     （⑨ふるる葬プランカードは短い単語のみなので50:50のままで問題ないが、
     ここは1〜2文の説明文が入るため、狭い列に閉じ込めると読みにくくなる） */
  .p-if-prepare__item {
    flex-direction: column;
  }
  .p-if-prepare__image-wrap {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: 180px;
  }
  .p-if-prepare__image-wrap::after {
    background: linear-gradient(to bottom, var(--color-white) 0%, transparent 20%);
  }

  .p-if-flow__step-content {
    flex-direction: column;
  }
  .p-if-flow__step-image-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  /* CTA */
  .p-cta__btns {
    flex-direction: column;
  }

  /* お知らせの「一覧を見る →」：高さ28.4px（行23.4＋下余白4＋下線1）で44pxに届かない。
     padding-topだけを足すことで、下線と文字の距離（4px）を保ったまま上方向に広げる。
     paddingを上下に振ると下線が文字から離れて見えるため、上だけにしている。 */
  .p-topics__more-link {
    padding-top: 16px;
  }

  /* 電話リンク：18pxの文字だけで高さ32.4pxしかなかった。
     このサイトで電話は最重要の導線（もしもの時に、不安な状態で押される）なので、
     44pxは確実に確保する。inline-blockのままだと文字の縦位置がずれるため
     inline-flexで中央に揃える。 */
  .p-plan-contact__tel,
  .p-plandetail-membership__contact-tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ラジオ・チェックボックスの選択肢：ラベルの高さが28.8pxしかなかった。
     四角自体は13pxしかないが、labelがinputを内包しているのでラベル全体が
     タップ判定になる。そのラベルを44pxにすれば、文字のどこを押しても選べる。
     選択肢どうしの間隔は27.6pxあり、隣を誤って押す心配はない。 */
  .p-consultation-form__body dd label,
  .p-contact-form__body dd label {
    min-height: 44px;
  }

  /* 斎場一覧（members.html）の絞り込みボタン群。
     表示形式35.4〜43.4px・地域41.4px・エリア35.4pxと、いずれも44pxに届かない。
     ここは目的の斎場を探して連続でタップする場所なので、押し間違いが特に響く。 */
  .p-halls__toggle button,
  .p-halls__region-tabs button,
  .p-halls__area-chips button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 斎場カードの「地図を見る →」は高さ24.4px。41件すべてに効く。 */
  .p-halls__card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* サイトマップ：14リンクすべてが高さ24px。ページの用途が丸ごと「リンクを押す」
     ことなので、ここが押しにくいとページの意味がない。 */
  .p-sitemap__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* 加盟葬儀社の個別ページ（members/ 42件）。テンプレート由来なので全件に効く。
     電話番号は葬儀社に直接つながる最重要の導線だが高さ24pxしかなかった。
     アンカーにクラスが無いため、値セル配下のtel:リンクとして指定する
     （build-members.js のテンプレートを変えずに済み、再生成が不要）。 */
  .p-company__info-value a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* パンくず：一覧へ戻る導線。高さ23.4pxだった。members/ 配下のみで使用。
     「TOP」は文字が短く、高さを44pxにしても幅が25.3pxしかない。左右に余白を足して
     幅を確保しつつ、その分リスト全体を引き戻して左端の位置を元のまま保つ
     （padding分だけ本文より右にずれると、パンくずだけ字下げされて見えるため）。 */
  .c-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
  }
  .c-breadcrumb__list {
    margin-left: -10px;
  }

  /* フッター */
  .l-footer__top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* フッターリンクは高さ23.4pxしかなく、隣とも14pxしか離れていない。
     min-heightで44pxを確保し、そのぶん項目間の隙間を詰めて全体の高さを抑える。
     スマホで見えるのは「その他」グループの2件だけ（他はu-pc-only）なので、
     フッターが極端に伸びることはない。 */
  .l-footer__nav-list {
    gap: 4px;
  }
  .l-footer__nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .l-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .l-footer {
    padding-bottom: 100px; /* スマホ固定フッター分の余白 */
  }

  /* スマホ固定フッター：flexコンテナとして存在させ、is-active時のみ表示 */
  .p-fixed-footer {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .p-fixed-footer.is-active {
    opacity: 1;
    visibility: visible;
  }

  /* ページトップボタンはスマホ用固定フッターと被らないよう位置調整 */
  .scroll-to-top {
    bottom: 88px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* PC（スマホ専用要素の非表示・スマホ固定フッター非表示） */
@media (min-width: 768px) {
  .p-fixed-footer {
    display: none !important;
  }
  .u-sp-only {
    display: none;
  }
}

/* ---------- 20. 加盟葬儀社を探す（members.html：ページヘッダー・②対応斎場一覧） ---------- */
.p-members-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-members-header .c-label-en {
  color: var(--color-green-light);
}
.p-members-header .c-heading {
  color: var(--color-white);
}
.p-members-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

.p-halls {
  background: var(--color-off-white);
  scroll-margin-top: 100px; /* plan.html「対応斎場を探す」からのアンカー遷移時、固定ヘッダーに隠れないように */
}

/* 表示形式切り替え（カード／テーブル） */
.p-halls__toggle {
  display: flex;
  width: fit-content;
  border: 1px solid var(--color-green);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 auto 28px;
}
.p-halls__toggle-btn {
  border: none;
  background: var(--color-white);
  color: var(--color-green);
  padding: 10px 24px;
  font-size: var(--fs-sm);
  font-family: var(--font-gothic);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--transition);
}
.p-halls__toggle-btn.is-active {
  background: var(--color-green);
  color: var(--color-white);
}

/* 地域タブ */
.p-halls__region-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.p-halls__region-tabs button {
  border: 1px solid var(--color-text-sub);
  background: var(--color-white);
  color: var(--color-text);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: var(--transition);
}
.p-halls__region-tabs button.is-active {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

/* 市町村サブフィルタ */
.p-halls__area-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 28px;
  padding: 14px 16px;
  background: var(--color-cream);
  border-radius: 6px;
}
.p-halls__area-chips button {
  border: 1px solid transparent;
  background: var(--color-white);
  color: var(--color-text-sub);
  padding: 5px 14px;
  border-radius: 16px;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: var(--transition);
}
.p-halls__area-chips button.is-active {
  background: var(--color-green);
  color: var(--color-white);
}
.p-halls__result-count {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-bottom: 16px;
}

/* --- カード形式 --- */
.p-halls__card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.p-halls__card {
  background: var(--color-white);
  border-radius: 6px;
  padding: 20px 22px;
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
}
.p-halls__card-area {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--color-green);
  background: var(--color-green-pale);
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.p-halls__card-name {
  font-family: var(--font-mincho);
  font-size: var(--fs-md);
  margin: 0 0 6px;
}
.p-halls__card-company {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-bottom: 10px;
}
.p-halls__card-address {
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
/* 固定ホールを持たない社などの補足（halls-data.js の publicNote）。
   小さい文字なので、コントラストの確保できるサブテキスト色にする。 */
.p-halls__card-note {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-top: 6px;
}
.p-halls__table-note {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.p-halls__card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--color-green);
  border-bottom: 1px solid var(--color-green);
}

/* --- テーブル形式（一覧表） --- */
/* スマホ幅では表がコンテナ幅（min-width: 640px）を超えて横スクロールになるが、
   見た目だけでは気づきにくいため、スクロール可能なことを示すヒントを添える。 */
.p-halls__table-hint {
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.p-halls__table-hint-arrow {
  display: inline-block;
  animation: halls-table-hint-arrow 1.4s ease-in-out infinite;
}
.p-halls__table-hint-arrow:last-child {
  animation-direction: reverse;
}
@keyframes halls-table-hint-arrow {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(-4px); opacity: 1; }
}

.p-halls__table-wrap {
  position: relative;
  background: var(--color-white);
  border-radius: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.p-halls__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 640px;
}
.p-halls__table th {
  text-align: left;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  background: var(--color-cream);
  padding: 10px 14px;
}
.p-halls__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-cream);
  vertical-align: top;
}
.p-halls__table tr:last-child td {
  border-bottom: none;
}
.p-halls__table .p-halls__table-company {
  color: var(--color-text-sub);
  font-size: var(--fs-xs);
}
.p-halls__table .p-halls__table-link a {
  color: var(--color-green);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.p-halls__table-note {
  color: var(--color-gold);
  font-size: var(--fs-xs);
}

.is-hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .p-halls__card-grid {
    grid-template-columns: 1fr;
  }

  .p-halls__table-hint {
    display: flex;
  }

  /* 右端に淡いフェードを重ね、表の続きがあることを視覚的に示す（スマホのみ。
     PCは表がコンテナ幅に収まりスクロールが発生しないため不要） */
  .p-halls__table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(26, 39, 68, 0.12));
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-halls__table-hint-arrow {
    animation: none;
  }
}

/* ---------- 21. consultation.html：事前相談 ---------- */

/* ①ページヘッダー：p-if-header／p-members-headerと同構成 */
.p-consultation-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-consultation-header .c-label-en {
  color: var(--color-green-light);
}
.p-consultation-header .c-heading {
  color: var(--color-white);
}
.p-consultation-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* ②事前相談とは */
.p-consultation-intro__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 720px;
  margin: 0 auto 24px;
}
.p-consultation-intro__text:last-child {
  margin-bottom: 0;
}

/* ③こんなことが相談できます：p-members__grid（3カラム・gap24px）に準じたグリッド。
   カード自体はp-features__cardのアイコンカードパターンを踏襲 */
.p-consultation-topics {
  background: var(--color-off-white);
}
.p-consultation-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p-consultation-topics__card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  padding: 28px 26px;
  border-radius: 4px;
  border-top: 4px solid var(--color-green);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
  .p-consultation-topics__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(26, 39, 68, 0.1);
  }
}
.p-consultation-topics__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--color-green);
}
.p-consultation-topics__icon svg {
  width: 100%;
  height: 100%;
}
.p-consultation-topics__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.6;
}

/* ④事前相談の流れ：p-if-flow__stepの縦積みタイムラインを簡略化（画像・所要目安なし） */
.p-consultation-flow {
  background: var(--color-cream);
}
.p-consultation-flow__list {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
}
.p-consultation-flow__step {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}
.p-consultation-flow__step:last-child {
  padding-bottom: 0;
}
.p-consultation-flow__step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-md);
  position: relative;
  z-index: 1;
}
.p-consultation-flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--color-green-pale);
}
.p-consultation-flow__step-body {
  flex: 1;
  min-width: 0;
  background: var(--color-white);
  border-radius: 4px;
  padding: 18px 24px;
  box-shadow: 0 4px 14px rgba(26, 39, 68, 0.05);
}
.p-consultation-flow__step-title {
  font-size: var(--fs-base);
  font-weight: 700;
}
.p-consultation-flow__note {
  margin-top: 32px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.8;
  text-align: center;
}

/* ⑤事前相談フォーム */
.p-consultation-form__body {
  max-width: 720px;
  margin: 0 auto;
}
.p-consultation-form__body dl {
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-consultation-form__body dt,
.p-consultation-form__body dd {
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}
.p-consultation-form__body dt {
  font-size: var(--fs-base);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: none;
}
.p-consultation-form__body dd {
  padding-top: 0;
}
.p-consultation-form__body dd.required::before {
  content: '必須';
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 2px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
/* 入力欄の見た目。type="text"だけを指定すると、スマホ用にtype="email"/"tel"へ
   変えた瞬間に対象から外れて欄が素のまま（高さ19px・文字13px）になる。実際に一度
   そうなった。ラジオ・チェックボックス・送信ボタン以外は全部この見た目、と
   書いておけば、今後type="date"等が増えても同じ事故は起きない。 */
.p-consultation-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.p-consultation-form__body select,
.p-consultation-form__body textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: var(--transition);
}
.p-consultation-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.p-consultation-form__body select:focus,
.p-consultation-form__body textarea:focus {
  outline: none;
  border-color: var(--color-green);
}
.p-consultation-form__body textarea {
  resize: vertical;
}
.p-consultation-form__body dd label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 24px;
  font-size: var(--fs-base);
}
.p-consultation-form__body dd label input[type="radio"] {
  width: auto;
}

/* ハニーポット：人間には見えないが、display:noneではなくCSSで画面外に飛ばす
   （一部ボットがdisplay:noneの入力欄を無視するため） */
.c-form__honeypot {
  position: absolute;
  left: -9999px;
}

.p-consultation-form__submit {
  text-align: center;
  margin-top: 40px;
}

/* ⑥補足導線：p-if-cta__footerと同じ見た目パターン */
.p-consultation-urgent {
  background: var(--color-cream);
}
.p-consultation-urgent__footer {
  text-align: center;
}
.p-consultation-urgent__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .p-consultation-topics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .p-consultation-topics__grid {
    grid-template-columns: 1fr;
  }
  .p-consultation-flow__step {
    align-items: flex-start;
  }
}

/* ---------- 22. thanks.html：送信完了（共通サンクスページ） ---------- */
.p-thanks {
  padding-top: clamp(96px, 14vw, 140px);
  text-align: center;
}
.p-thanks__text {
  margin-top: 24px;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 32px;
}

/* ---------- 23. contact.html：お問い合わせ ---------- */

/* ①ページヘッダー：p-if-header／p-members-header／p-consultation-headerと同構成 */
.p-contact-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-contact-header .c-label-en {
  color: var(--color-green-light);
}
.p-contact-header .c-heading {
  color: var(--color-white);
}
.p-contact-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* ②お問い合わせの種類から選ぶ：p-consultation-topicsのグリッド・カード意匠を踏襲。
   カード自体が外部ページ／アンカーへの<a>リンクになる点のみ差分 */
.p-contact-select {
  background: var(--color-off-white);
}
.p-contact-select__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p-contact-select__card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-white);
  padding: 28px 26px;
  border-radius: 4px;
  border-top: 4px solid var(--color-green);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .p-contact-select__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(26, 39, 68, 0.1);
  }
}
.p-contact-select__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: var(--color-green);
}
.p-contact-select__icon svg {
  width: 100%;
  height: 100%;
}
.p-contact-select__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.6;
}

/* ③補足導線：p-if-cta__footer／p-consultation-urgentと同スタイル */
.p-contact-urgent {
  background: var(--color-cream);
}
.p-contact-urgent__footer {
  text-align: center;
}
.p-contact-urgent__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}

/* ④その他のお問い合わせフォーム：p-consultation-formのdl/dt/ddレイアウトを踏襲 */
.p-contact-form {
  scroll-margin-top: 100px; /* ②カード⑥からのアンカー遷移時、固定ヘッダーに隠れないように */
}
.p-contact-form__body {
  max-width: 720px;
  margin: 0 auto;
}
.p-contact-form__body dl {
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-contact-form__body dt,
.p-contact-form__body dd {
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}
.p-contact-form__body dt {
  font-size: var(--fs-base);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: none;
}
.p-contact-form__body dd {
  padding-top: 0;
}
.p-contact-form__body dd.required::before {
  content: '必須';
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 2px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
.p-contact-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.p-contact-form__body select,
.p-contact-form__body textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: var(--transition);
}
.p-contact-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.p-contact-form__body select:focus,
.p-contact-form__body textarea:focus {
  outline: none;
  border-color: var(--color-green);
}
.p-contact-form__body textarea {
  resize: vertical;
}
.p-contact-form__body dd label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 24px;
  font-size: var(--fs-base);
}
.p-contact-form__body dd label input[type="checkbox"] {
  width: auto;
}
.p-contact-form__submit {
  text-align: center;
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .p-contact-select__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .p-contact-select__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 24. plan.html：生協くまもと ふるる葬ページ ---------- */

/* ①ページヘッダー：p-if-header／p-consultation-header／p-contact-headerと同構成 */
.p-plan-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-plan-header .c-label-en {
  color: var(--color-green-light);
}
.p-plan-header .c-heading {
  color: var(--color-white);
}
.p-plan-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* ②ふるる葬とは：チェックリストはTOPページ⑫ .p-fururu__list をそのまま流用 */
.p-plan-intro__logo {
  max-width: 640px;
  margin: 0 auto 32px;
}
.p-plan-intro__logo-img {
  width: 100%;
  height: auto;
  display: block;
}
.p-plan-intro__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 640px;
  margin: 0 auto 32px;
}
.p-plan-intro__list {
  max-width: 640px;
  margin: 0 auto 24px;
}
.p-plan-intro__cta {
  text-align: center;
  margin-bottom: 24px;
}
.p-plan-intro__note {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* ③プラン一覧：プランカードは.p-plandetail-lineup__*（統合時に移植）を使用 */
.p-plan-lineup {
  padding-bottom: 0;
}
.p-plan-lineup__outro {
  max-width: 640px;
  margin: 48px auto 0;
}
.p-plan-lineup__outro p {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-plan-lineup__outro p + p {
  margin-top: 24px;
}

/* ④基本プランに含まれるもの：内容は.p-plandetail-included__*（統合時に移植）を使用 */

/* ⑤火葬プランのご案内：告知ボックス（見出しなし） */
.p-plan-cremation {
  padding-top: 30px;
}
.p-plan-cremation__box {
  background: var(--color-cream);
  border-radius: 6px;
  padding: 32px 40px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.p-plan-cremation__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 20px;
}
.p-plan-cremation__box .c-btn {
  white-space: normal;
  max-width: 100%;
}

/* ⑥宗派・宗教への対応 */
.p-plan-religion__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 720px;
  margin: 0 auto 32px; /* 下の小見出しと詰まらないように。②intro の .p-plan-intro__text と同値 */
  text-align: center;
}

/* ⑤-2 キリスト教・神葬祭 祭壇イメージ（旧plan-detail.html統合時に新規追加） */
.p-plan-religion__altars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0 8px;
}
.p-plan-religion__altar {
  margin: 0;
}
.p-plan-religion__altar-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.p-plan-religion__altar figcaption {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  text-align: center;
}

/* ⑥資料ダウンロード：TOPページ⑫のPDFボタン行と同じスタイル */
.p-plan-docs__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ⑦お問い合わせ：電話番号カード2枚 */
.p-plan-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.p-plan-contact__card {
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
}
.p-plan-contact__label {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-bottom: 8px;
}
.p-plan-contact__tel {
  display: inline-block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.p-plan-contact__hours {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}

/* ⑧補足導線：p-if-cta__footer／p-consultation-urgentと同スタイル */
.p-plan-cta {
  background: var(--color-cream);
}
.p-plan-cta__footer {
  text-align: center;
}
.p-plan-cta__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}
.p-plan-cta__footer-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ページ内アンカー遷移時、固定ヘッダーに隠れないように */
.p-plan-lineup,
.p-plan-included,
.p-plan-religion {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  .p-plan-contact__grid {
    grid-template-columns: 1fr;
  }
  .p-plan-religion__altars {
    grid-template-columns: 1fr;
  }
}

/* ---------- 25. plan.html後半：ふるる葬 資料セクション（独自配色スコープ） ----------
   pdf/fururu-plan.pdf のレイアウト・配色を再現するための専用スコープ。
   .p-plandetail 配下でのみ有効な帯色トークンを定義。デザイン統一により
   単なるアクセント色だった--plandetail-headingはサイト共通の--color-green系に
   統一済みで、現在このスコープに残る独自カラーはプラン階層色
   （premium/standard/family）・4分類の区別色・金額強調色など、
   情報を区別する意味を持つ色分けのみ。 */
.p-plandetail {
  --plandetail-premium: #a02060;
  --plandetail-standard: #2e7d32;
  --plandetail-family: #1565c0;
  --plandetail-heading: #1565c0;
  --plandetail-accent-purple: #8e2f78;
  --plandetail-accent-orange: #d9531e;
  --plandetail-accent-green: #3a7d44;
  --plandetail-accent-red: #c81e2c;
}

/* このページ専用のコンテナ幅（サイト標準 .l-container の1400pxより狭い1000px） */
.p-plandetail-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ページ内アンカー遷移時、固定ヘッダーに隠れないように */
.p-plandetail-estimate,
.p-plandetail-membership {
  scroll-margin-top: 100px;
}

/* スクリーンリーダー専用（視覚上は非表示、表のcaptionなどに使用） */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 25.1 ①基本プランのご案内：帯色付きプランカード ---------- */
.p-plandetail-lineup__group {
  display: flex;
  margin-bottom: 24px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(26, 39, 68, 0.08);
}
.p-plandetail-lineup__group--premium { --tier-color: var(--plandetail-premium); }
.p-plandetail-lineup__group--standard { --tier-color: var(--plandetail-standard); }
.p-plandetail-lineup__group--family { --tier-color: var(--plandetail-family); }

.p-plandetail-lineup__label {
  flex: 0 0 48px;
  background: var(--tier-color);
  color: var(--color-white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: var(--fs-sm);
  padding: 16px 0;
}
.p-plandetail-lineup__cards {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-plandetail-lineup__card:not(:last-child) {
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
}
.p-plandetail-lineup__card-tier {
  display: none; /* PCではグループ左の縦帯がティアを示すため不要（スマホでのみ表示） */
}
.p-plandetail-lineup__card-title {
  background: var(--tier-color);
  color: var(--color-white);
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 24px;
}
.p-plandetail-lineup__card-title-name {
  font-size: var(--fs-base);
  letter-spacing: 0.1em;
}
.p-plandetail-lineup__card-title-num {
  font-family: var(--font-mincho);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
}
.p-plandetail-lineup__card-body {
  display: flex;
  align-items: flex-start;
  background: color-mix(in srgb, var(--tier-color) 8%, white);
}
.p-plandetail-lineup__image-wrap {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px;
}
/* <picture>を挟んでも、画像の幅計算が<img>直置きのときと変わらないようにする */
.p-plandetail-lineup__image-wrap picture {
  display: block;
  width: 100%;
}
.p-plandetail-lineup__image {
  display: block;
  width: 100%;
  aspect-ratio: 1270 / 400;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
}
.p-plandetail-lineup__note {
  font-size: 0.7rem;
  color: var(--color-text-sub);
  text-align: center;
  margin-top: 6px;
}
.p-plandetail-lineup__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  padding: 16px 24px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-plandetail-lineup__meta {
  flex: 0 0 260px;
  padding: 18px 24px;
  text-align: right;
  border-left: 1px dashed rgba(26, 39, 68, 0.12);
}
.p-plandetail-lineup__meta-row {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.7;
}
.p-plandetail-lineup__meta-row strong {
  color: var(--color-text);
  font-weight: 700;
  margin-left: 4px;
}
.p-plandetail-lineup__price {
  margin-top: 8px;
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1.9vw, 1.6rem);
  font-weight: 700;
  color: var(--plandetail-accent-red);
  white-space: nowrap;
}
.p-plandetail-lineup__price span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: 4px;
  white-space: nowrap;
}

/* ---------- 25.2 ②基本プランの内容：アイコングリッド・表 ---------- */
.p-plandetail-included__block {
  display: flex;
  margin-bottom: 32px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(26, 39, 68, 0.06);
}
.p-plandetail-included__block--included { --block-color: var(--plandetail-heading); }
.p-plandetail-included__block--extra { --block-color: var(--plandetail-accent-purple); }
.p-plandetail-included__block--related { --block-color: var(--plandetail-accent-orange); }
.p-plandetail-included__block--important { --block-color: var(--plandetail-accent-green); }

.p-plandetail-included__block-label {
  flex: 0 0 48px;
  background: var(--block-color);
  color: var(--color-white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: var(--fs-sm);
  padding: 20px 0;
}
.p-plandetail-included__block-body {
  flex: 1 1 auto;
  min-width: 0;
  background: color-mix(in srgb, var(--block-color) 5%, white);
  padding: clamp(20px, 3vw, 32px);
}
.p-plandetail-included__block-title {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-bottom: 16px;
}
.p-plandetail-included__block-title:not(:first-child) {
  margin-top: 28px;
}

.p-plandetail-included__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.p-plandetail-included__item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 1px 4px rgba(26, 39, 68, 0.06);
}
.p-plandetail-included__item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
.p-plandetail-included__item span {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text);
}

.p-plandetail-included__lettertable-wrap {
  overflow-x: auto;
}
.p-plandetail-included__lettertable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  text-align: center;
}
.p-plandetail-included__lettertable th {
  background: var(--color-cream);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  padding: 10px;
}
.p-plandetail-included__lettertable td {
  padding: 12px;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--plandetail-heading);
  border-top: 1px solid var(--color-cream);
  background: var(--color-white);
}

.p-plandetail-included__note-top {
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin: -8px 0 16px;
}
.p-plandetail-included__note {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-top: 16px;
  line-height: 1.8;
}
.p-plandetail-included__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 24px;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* ---------- 25.3 地域別火葬料金表 ---------- */
.p-plandetail-firetable {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
  margin-bottom: 12px;
}
.p-plandetail-firetable table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.p-plandetail-firetable td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--color-cream);
}
.p-plandetail-firetable td:first-child {
  color: var(--color-text-sub);
}
.p-plandetail-firetable td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.p-plandetail-included__important {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-plandetail-included__important li {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text);
}

/* ---------- 25.4 ③お見積り例・宗教対応 ---------- */
.p-plandetail-estimate__intro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}
.p-plandetail-estimate__plan-badge {
  flex: 0 0 260px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  background: var(--color-green);
  color: var(--color-white);
  border-radius: 4px;
  padding: 20px;
  font-size: var(--fs-base);
  font-weight: 700;
}
.p-plandetail-estimate__plan-badge .num {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.p-plandetail-estimate__conditions {
  flex: 1 1 320px;
  background: var(--color-white);
  border: 1px solid var(--color-cream);
  border-radius: 4px;
  padding: 20px 28px;
  font-size: var(--fs-sm);
  line-height: 2;
}
.p-plandetail-estimate__conditions strong {
  color: var(--plandetail-accent-red);
}
.p-plandetail-estimate__price {
  text-align: center;
  margin-bottom: 28px;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
}
.p-plandetail-estimate__price .amount {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--plandetail-accent-red);
  margin-right: 6px;
}

.p-plandetail-estimate__table-wrap {
  overflow-x: auto;
  margin-bottom: 28px;
}
.p-plandetail-estimate__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.p-plandetail-estimate__table .group {
  background: var(--color-green);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-align: center;
  vertical-align: middle;
  width: 64px;
  padding: 10px;
}
.p-plandetail-estimate__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-cream);
}
.p-plandetail-estimate__table td.amount {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.p-plandetail-estimate__table td:last-child {
  color: var(--color-text-sub);
  font-size: var(--fs-xs);
}

.p-plandetail-estimate__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  background: var(--color-cream);
  border-radius: 4px;
  padding: 20px 28px;
  margin-bottom: 24px;
}
.p-plandetail-estimate__total-label {
  flex-shrink: 0;
  background: var(--color-green);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 10px 20px;
  border-radius: 2px;
}
.p-plandetail-estimate__total-amount {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 700;
  color: var(--plandetail-accent-red);
}
.p-plandetail-estimate__total-amount span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-sub);
  margin-left: 10px;
}
.p-plandetail-estimate__notes {
  margin-bottom: 48px;
}
.p-plandetail-estimate__notes li {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.9;
}

/* ---------- 25.5 宗教対応表 ---------- */
.p-plandetail-religion__subtitle {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}
.p-plandetail-religion__text {
  font-size: var(--fs-sm);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 20px;
}
.p-plandetail-religion__table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}
.p-plandetail-religion__table-wrap table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: center; /* 会葬礼状の表と同じく、短い値が並ぶ表なのでセル内は中央揃え */
}
.p-plandetail-religion__table-wrap th {
  background: var(--color-cream);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  padding: 10px 16px;
}
.p-plandetail-religion__table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-cream);
}
.p-plandetail-religion__table-wrap td:first-child {
  font-weight: 700;
}
.p-plandetail-religion__row--family td:first-child {
  border-left: 4px solid var(--plandetail-family);
}
.p-plandetail-religion__row--standard td:first-child {
  border-left: 4px solid var(--plandetail-standard);
}
.p-plandetail-religion__row--premium td:first-child {
  border-left: 4px solid var(--plandetail-premium);
}

/* ---------- 25.6 ④会員登録：特典・お問い合わせ・フリーダイヤル ---------- */
.p-plandetail-membership__sub {
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--plandetail-accent-red);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.p-plandetail-membership__benefits {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto 48px;
}
.p-plandetail-membership__benefit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.p-plandetail-membership__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-base);
}
.p-plandetail-membership__benefit-title {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-green);
  margin-bottom: 4px;
}
.p-plandetail-membership__benefit-text {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}

.p-plandetail-membership__contact {
  max-width: 720px;
  margin: 0 auto 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(26, 39, 68, 0.08);
}
.p-plandetail-membership__contact-head {
  background: var(--color-green);
  color: var(--color-white);
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-base);
  padding: 16px;
}
.p-plandetail-membership__contact-body {
  background: var(--color-white);
  padding: clamp(24px, 4vw, 36px);
}
.p-plandetail-membership__contact-text {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
  margin-bottom: 20px;
}
.p-plandetail-membership__contact-dept {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}
.p-plandetail-membership__contact-tel {
  display: inline-block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-green);
}
.p-plandetail-membership__contact-hours {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-left: 8px;
}
.p-plandetail-membership__contact-address {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-top: 10px;
}

.p-plandetail-membership__freedial {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--plandetail-accent-red);
  color: var(--color-white);
  border-radius: 6px;
  padding: 28px;
}
.p-plandetail-membership__freedial-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 6px 22px;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 14px;
}
.p-plandetail-membership__freedial-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mincho);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--color-white);
}
.p-plandetail-membership__freedial-num svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.p-plandetail-membership__freedial-hours {
  font-size: var(--fs-xs);
  margin-top: 10px;
  opacity: 0.9;
}

/* ---------- 25.7 レスポンシブ ---------- */
@media (max-width: 1024px) {
  .p-plandetail-included__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-plandetail-firetable {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* タブレット（768〜1024px）：プラン一覧の列の取り分だけを変える。
   PCは「画像46% ＋ 説明文 ＋ 価格260px」の3列だが、画像は割合固定・価格は幅固定で
   譲らないため、狭くなると説明文だけが潰れる。768pxでは内側40px＝1行2〜3文字になり、
   カード高が770pxまで伸びていた。画像と価格の取り分を減らすと説明文が186pxに戻り、
   カード高も220pxに収まる。3列の構成自体は変えないので見た目の設計は同じ。
   **PC（1025px以上）には掛からない範囲指定にしてある。** */
@media (min-width: 768px) and (max-width: 1024px) {
  .p-plandetail-lineup__image-wrap {
    flex: 0 0 34%;
  }
  .p-plandetail-lineup__meta {
    flex: 0 0 200px; /* 中身の都合で実際は207px前後までしか縮まない */
  }
  .p-plandetail-lineup__text {
    padding: 16px;
  }
}

@media (max-width: 767px) {
  /* プラン一覧：スマホではindex.htmlのふるる葬カード型（左に文字・右に画像）にする */
  .p-plandetail-lineup__group {
    flex-direction: column;
    box-shadow: none; /* カード単位で影を持たせるため、グループの影は外す */
    overflow: visible;
    margin-bottom: 16px; /* グループ内のカード間（gap:16px）と同じ間隔にそろえる */
  }
  .p-plandetail-lineup__label {
    display: none; /* 縦書きの帯は隠し、代わりに各カード内のティア名を出す */
  }
  .p-plandetail-lineup__cards {
    gap: 16px;
  }
  .p-plandetail-lineup__card {
    display: grid;
    /* minmax(0,...)にしないと、左カラムが中身の最小幅（価格の1行）で踏ん張り、
       320px幅でグリッドがカードからはみ出して画像の右端が切れる */
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-areas:
      "title title"
      "tier  img"
      "meta  img"
      "text  text";
    border-left: 6px solid var(--tier-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  }
  .p-plandetail-lineup__card:not(:last-child) {
    border-bottom: none; /* カードが独立したので区切り線は不要 */
  }
  /* card-bodyの箱を透過させ、中の3要素を直接カードのグリッドに載せる */
  .p-plandetail-lineup__card-body {
    display: contents;
  }
  .p-plandetail-lineup__card-title {
    grid-area: title;
    padding: 8px 16px;
  }
  .p-plandetail-lineup__card-tier {
    grid-area: tier;
    display: block;
    padding: 12px 16px 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--color-text-sub);
    background: color-mix(in srgb, var(--tier-color) 8%, white);
  }
  .p-plandetail-lineup__meta {
    grid-area: meta;
    padding: 4px 16px 14px;
    text-align: left;
    border-left: none;
    background: color-mix(in srgb, var(--tier-color) 8%, white);
  }
  .p-plandetail-lineup__price {
    white-space: normal; /* 狭い端末では「（税別）」を次行に送る。金額自体はspan側のnowrapで守る */
  }
  .p-plandetail-lineup__image-wrap {
    grid-area: img;
    padding: 0;
    justify-content: stretch;
    background: color-mix(in srgb, var(--tier-color) 8%, white);
  }
  .p-plandetail-lineup__image-wrap picture {
    flex: 1 1 auto;
    min-height: 0; /* 画像が左カラムの高さを押し広げないようにする */
  }
  .p-plandetail-lineup__image {
    height: 100%;
    aspect-ratio: auto; /* PC用の 1270/400 を解除し、左カラムの高さに合わせる */
    object-fit: cover;
    object-position: 50% 35%; /* index.htmlと同じ。遺影枠が見切れない位置 */
    border-radius: 0;
  }
  .p-plandetail-lineup__note {
    padding: 4px 8px 8px;
    margin-top: 0;
  }
  .p-plandetail-lineup__text {
    grid-area: text;
    padding: 12px 16px 14px;
    border-top: 1px dashed rgba(26, 39, 68, 0.12);
    background: var(--color-white);
  }

  /* 会葬礼状の表：見出しを「プラン30／50／70／90／120」に短縮したうえで
     左右paddingを6pxにすると320pxの枠にも収まるので、横スクロールさせない */
  .p-plandetail-included__lettertable {
    min-width: 0;
  }
  .p-plandetail-included__lettertable th,
  .p-plandetail-included__lettertable td {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 宗派対応表：3列の中身は左右padding6pxなら284pxに収まる。
     min-width:480px を外せば320pxでも折り返さずに全列が見える（横スクロール不要）。
     テーブルは width:100% で枠いっぱいに伸びるため、375pxでの列間の余白は
     paddingを詰めても見た目上ほとんど変わらない */
  .p-plandetail-religion__table-wrap table {
    min-width: 0;
  }
  .p-plandetail-religion__table-wrap th,
  .p-plandetail-religion__table-wrap td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .p-plandetail-included__block {
    flex-direction: column;
  }
  .p-plandetail-included__block-label {
    flex: 0 0 auto;
    writing-mode: horizontal-tb;
    padding: 12px;
  }
  .p-plandetail-included__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-plandetail-included__item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .p-plandetail-firetable {
    grid-template-columns: 1fr;
  }

  .p-plandetail-estimate__plan-badge {
    flex-basis: 100%;
  }
  .p-plandetail-estimate__total {
    flex-direction: column;
    align-items: flex-start;
  }

  .p-plandetail-membership__benefit {
    align-items: flex-start;
  }
}

/* ---------- 26. qa.html：よくある質問 ---------- */

/* ①ページヘッダー：p-consultation-header等と同構成 */
.p-qa-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-qa-header .c-label-en {
  color: var(--color-green-light);
}
.p-qa-header .c-heading {
  color: var(--color-white);
}
.p-qa-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* ③補足導線：p-consultation-urgentと同スタイル */
.p-qa-more {
  background: var(--color-cream);
}
.p-qa-more__footer {
  text-align: center;
}
.p-qa-more__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}

/* ---------- 27. about.html：組合について ---------- */

/* ①ページヘッダー：p-consultation-header等と同構成 */
.p-about-page-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-about-page-header .c-label-en {
  color: var(--color-green-light);
}
.p-about-page-header .c-heading {
  color: var(--color-white);
}
.p-about-page-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* ②組合概要 */
.p-about-page-summary__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 760px;
  margin: 0 auto 24px;
}
.p-about-page-summary__table {
  max-width: 560px;
  margin: 40px auto 0;
  border-top: 1px solid rgba(26, 39, 68, 0.1);
}
.p-about-page-summary__row {
  display: flex;
  gap: 24px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
}
.p-about-page-summary__row dt {
  flex: 0 0 120px;
  font-weight: 700;
  color: var(--color-dark);
}
.p-about-page-summary__row dd {
  color: var(--color-text-sub);
}

/* ③理事長挨拶：画像＋テキストの2カラム（p-if-prepare__itemの考え方を踏襲） */
.p-about-page-greeting {
  background: var(--color-off-white);
}
.p-about-page-greeting__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px);
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  border-left: 6px solid var(--color-green-light);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
  padding: clamp(24px, 4vw, 40px);
}
.p-about-page-greeting__image-wrap {
  flex: 0 0 240px;
  max-width: 240px;
}
.p-about-page-greeting__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-about-page-greeting__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-about-page-greeting__text p {
  margin-bottom: 20px;
}
.p-about-page-greeting__sign {
  text-align: right;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0 !important;
}

/* ④資格を持った専門スタッフ：p-if-prepare__itemと同じ画像＋テキスト行パターン */
.p-about-page-staff__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.p-about-page-staff__item {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  border-left: 6px solid var(--color-green-light);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.06);
}
.p-about-page-staff__image-wrap {
  flex: 0 0 40%;
  max-width: 300px;
  min-width: 96px;
  position: relative;
  overflow: hidden;
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-about-page-staff__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 24px;
}
.p-about-page-staff__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
}
.p-about-page-staff__title {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}
.p-about-page-staff__desc {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ⑤沿革・事務局情報 */
.p-about-page-info {
  background: var(--color-cream);
}
.p-about-page-info__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 760px;
  margin: 0 auto 32px;
}
.p-about-page-info__office {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  font-style: normal;
  line-height: 2;
  color: var(--color-text-sub);
}
.p-about-page-info__office-name {
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 4px;
}

/* ⑥CTA：p-consultation-urgentと同スタイル */
.p-about-page-cta__footer {
  text-align: center;
}
.p-about-page-cta__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}
.p-about-page-cta__btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .p-about-page-summary__row {
    flex-direction: column;
    gap: 4px;
  }
  .p-about-page-summary__row dt {
    flex: 0 0 auto;
  }
  .p-about-page-greeting__body {
    flex-direction: column;
  }
  .p-about-page-greeting__image-wrap {
    flex: 0 0 auto;
    max-width: 200px;
    margin: 0 auto;
  }
  .p-about-page-staff__item {
    flex-direction: column;
  }
  .p-about-page-staff__image-wrap {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
}

/* ---------- 28. join.html／seminar.html／recruit.html：業務向け3ページ共通パターン ----------
   3ページとも同一構成（ヘッダー→呼びかけ文→フォーム→補足導線）のため、
   consultation.html／contact.htmlと同じ考え方でセレクタをまとめて定義する */

.p-join-header,
.p-seminar-header,
.p-recruit-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-join-header .c-label-en,
.p-seminar-header .c-label-en,
.p-recruit-header .c-label-en {
  color: var(--color-green-light);
}
.p-join-header .c-heading,
.p-seminar-header .c-heading,
.p-recruit-header .c-heading {
  color: var(--color-white);
}
.p-join-header__lead,
.p-seminar-header__lead,
.p-recruit-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

.p-join-intro__text,
.p-seminar-intro__text,
.p-recruit-intro__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 720px;
  margin: 0 auto 24px;
}
.p-join-intro__list,
.p-seminar-intro__list,
.p-recruit-intro__list {
  max-width: 480px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-join-intro__list li,
.p-seminar-intro__list li,
.p-recruit-intro__list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
}
.p-join-intro__list li::before,
.p-seminar-intro__list li::before,
.p-recruit-intro__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-green-pale);
  border: 2px solid var(--color-green);
}

.p-join-form,
.p-seminar-form,
.p-recruit-form {
  background: var(--color-off-white);
}
.p-join-form__body,
.p-seminar-form__body,
.p-recruit-form__body {
  max-width: 720px;
  margin: 0 auto;
}
.p-join-form__body dl,
.p-seminar-form__body dl,
.p-recruit-form__body dl {
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-join-form__body dt,
.p-join-form__body dd,
.p-seminar-form__body dt,
.p-seminar-form__body dd,
.p-recruit-form__body dt,
.p-recruit-form__body dd {
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}
.p-join-form__body dt,
.p-seminar-form__body dt,
.p-recruit-form__body dt {
  font-size: var(--fs-base);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: none;
}
.p-join-form__body dd,
.p-seminar-form__body dd,
.p-recruit-form__body dd {
  padding-top: 0;
}
.p-join-form__body dd.required::before,
.p-seminar-form__body dd.required::before,
.p-recruit-form__body dd.required::before {
  content: '必須';
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 2px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
.p-join-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.p-join-form__body textarea,
.p-seminar-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.p-seminar-form__body textarea,
.p-recruit-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.p-recruit-form__body textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: var(--transition);
}
.p-join-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.p-join-form__body textarea:focus,
.p-seminar-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.p-seminar-form__body textarea:focus,
.p-recruit-form__body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus,
.p-recruit-form__body textarea:focus {
  outline: none;
  border-color: var(--color-green);
}
.p-join-form__body textarea,
.p-seminar-form__body textarea,
.p-recruit-form__body textarea {
  resize: vertical;
}
.p-join-form__submit,
.p-seminar-form__submit,
.p-recruit-form__submit {
  text-align: center;
  margin-top: 40px;
}
.p-join-other,
.p-seminar-other,
.p-recruit-other {
  background: var(--color-cream);
}
.p-join-other__footer,
.p-seminar-other__footer,
.p-recruit-other__footer {
  text-align: center;
}
.p-join-other__footer-text,
.p-seminar-other__footer-text,
.p-recruit-other__footer-text {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  line-height: 2;
  margin-bottom: 24px;
}

/* ---------- 29. sitemap.html：サイトマップ ---------- */
.p-sitemap-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-sitemap-header .c-label-en {
  color: var(--color-green-light);
}
.p-sitemap-header .c-heading {
  color: var(--color-white);
}
.p-sitemap__groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.p-sitemap__group-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-dark);
  border-bottom: 2px solid var(--color-green-light);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.p-sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p-sitemap__list a {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  transition: var(--transition);
}
@media (hover: hover) {
  .p-sitemap__list a:hover {
    color: var(--color-green);
  }
}

@media (max-width: 1024px) {
  .p-sitemap__groups {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .p-sitemap__groups {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- 30. privacy.html：プライバシーポリシー ---------- */
.p-privacy-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-privacy-header .c-label-en {
  color: var(--color-green-light);
}
.p-privacy-header .c-heading {
  color: var(--color-white);
}
.p-privacy__body {
  max-width: 780px;
  margin: 0 auto;
  color: var(--color-text-sub);
}
.p-privacy__lead {
  font-size: var(--fs-base);
  line-height: 2;
  margin-bottom: 40px;
}
.p-privacy__body h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
}
.p-privacy__body h2:first-of-type {
  margin-top: 0;
}
.p-privacy__body p {
  font-size: var(--fs-base);
  line-height: 2;
}
.p-privacy__body ul {
  margin-top: 8px;
  padding-left: 1.4em;
}
.p-privacy__body ul li {
  font-size: var(--fs-base);
  line-height: 1.9;
  list-style: disc;
  margin-bottom: 8px;
}
.p-privacy__body a {
  color: var(--color-green);
  text-decoration: underline;
}
.p-privacy__date {
  text-align: right;
  margin-top: 48px;
  font-size: var(--fs-sm);
}

/* ---------- 31. 404.html：ページが見つかりません ---------- */
.p-notfound {
  padding-top: clamp(96px, 14vw, 140px);
  text-align: center;
}
.p-notfound__text {
  margin-top: 24px;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 32px;
}

/* お知らせ一覧（topics.html。中身は scripts/build-news.js の生成物） */
.p-topics-page {
  padding-top: clamp(96px, 14vw, 140px);
}

/* 絞り込みタブ：加盟葬儀社の地域タブ（.p-members__tab）と同じ見た目に揃える。
   別クラスにしているのは、片方の余白を触ったときにもう片方が巻き込まれないようにするため。 */
.p-topics-page__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(32px, 5vw, 48px);
}
.p-topics-page__tab {
  padding: 10px 22px;
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  border: 1px solid var(--color-green);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-green);
  transition: var(--transition);
}
.p-topics-page__tab.is-active {
  background: var(--color-green);
  color: var(--color-white);
}
@media (hover: hover) {
  .p-topics-page__tab:hover {
    background: var(--color-green);
    color: var(--color-white);
  }
}

/* 記事一覧 */
.p-topics-page__list {
  max-width: 800px;
  margin: 0 auto;
}
.p-topics-page__item {
  padding: clamp(28px, 4vw, 40px) 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.12);
  /* #topic-〜 のアンカーで飛んできたとき、記事の上端が固定ヘッダー（約70px）の
     下に潜って日付・タグ・見出しの頭が隠れる。その分だけ手前で止める。
     TOPのお知らせ一覧とお見舞いセクションの導線がここへ飛んでくる。 */
  scroll-margin-top: 90px;
}
.p-topics-page__item:first-child {
  border-top: 1px solid rgba(26, 39, 68, 0.12);
}

.p-topics-page__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.p-topics-page__date {
  font-size: var(--fs-sm);
  color: var(--color-green);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.p-topics-page__tag {
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
/* お知らせ＝組合からの告知、活動報告＝当時の活動記録。
   色を変えて、一覧の中で性格の違いが一目で分かるようにしている。 */
.p-topics-page__tag--news {
  background: var(--color-green);
  color: var(--color-white);
}
.p-topics-page__tag--report {
  background: var(--color-green-pale);
  color: var(--color-green);
}

.p-topics-page__item-title {
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-bottom: 16px;
}
.p-topics-page__body p {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
.p-topics-page__body p + p {
  margin-top: 1em;
}

.p-topics-page__images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.p-topics-page__images img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  border-radius: 4px;
}
/* 複数枚の記事だけ高さを詰める。旧サイトの写真は横500pxあり、320pxのままだと
   800pxのコンテナに1枚しか入らず、3枚の記事で縦に900px近く伸びてしまう。
   220pxなら横長写真が391pxになり、2枚が1行（391+16+391=798px）に収まる。 */
.p-topics-page__images--multi img {
  max-height: 220px;
}

@media (max-width: 767px) {
  .p-topics-page__tabs {
    gap: 8px;
  }
  /* 高さ44px（指の接触面積の目安）を確保する。加盟葬儀社の地域タブ
     （.p-members__tab）と同じ理由・同じ手当て。 */
  .p-topics-page__tab {
    padding: 8px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 写真は横並びをやめて1枚ずつ縦に積む。旧サイトの写真は横500pxしかないため、
     2枚並べるとスマホ幅では1枚あたり160px程度まで縮んで何が写っているか分からなくなる。 */
  .p-topics-page__images {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }
  /* 縦位置の制限を外す。スマホでは横幅（max-width:100%）だけで決めるほうが
     縦長の写真も潰れずに済む。旧サイトの写真は横500pxしかないので、
     width:100% で引き伸ばすとぼやける。auto のままにしておくこと。 */
  .p-topics-page__images img {
    max-height: none;
  }
}

/* ---------- 32. column/：コラム一覧・記事詳細 ---------- */
.p-column-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-column-header .c-label-en {
  color: var(--color-green-light);
}
.p-column-header .c-heading {
  color: var(--color-white);
}
.p-column-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.8);
}

/* 記事詳細ページ */
.p-column-article__header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
/* このセクションは濃紺背景なので、パンくずも通常のグレー基調ではなく
   白の半透明トーンで再定義する（c-breadcrumbの既定色は明るい背景が前提）。 */
.p-column-article__header .c-breadcrumb {
  text-align: left;
  margin-bottom: 24px;
}
.p-column-article__header .c-breadcrumb__list,
.p-column-article__header .c-breadcrumb__item:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.55);
}
.p-column-article__header .c-breadcrumb__link {
  color: rgba(255, 255, 255, 0.8);
}
@media (hover: hover) {
  .p-column-article__header .c-breadcrumb__link:hover {
    color: var(--color-white);
  }
}
.p-column-article__header .c-breadcrumb__current {
  color: var(--color-white);
}
.p-column-article__date {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}
.p-column-article__cat {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-green-light);
  border: 1px solid var(--color-green-light);
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 16px;
}
.p-column-article__header .c-heading {
  color: var(--color-white);
}
.p-column-article__image-wrap {
  max-width: 900px;
  margin: -32px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.p-column-article__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(26, 39, 68, 0.15);
}
.p-column-article__body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text-sub);
}
/* 本文中の挿入画像（図解など） */
.p-column-article__figure {
  margin: 32px 0 36px;
}
.p-column-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
/* 図解は細かい文字が入るため、タップで原寸表示できるようにしている */
.p-column-article__figure-link {
  display: block;
}
.p-column-article__figure figcaption {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-sub);
  text-align: center;
}
.p-column-article__figure-hint {
  color: var(--color-green);
}
.p-column-article__body p {
  font-size: var(--fs-base);
  line-height: 2.1;
  margin-bottom: 28px;
}
.p-column-article__body h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
  margin: 40px 0 20px;
}
.p-column-article__note {
  background: var(--color-cream);
  border-left: 4px solid var(--color-green-light);
  padding: 16px 20px;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-bottom: 32px;
}
.p-column-article__nav {
  max-width: 760px;
  margin: 48px auto 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- 33. speech.html：喪主の挨拶 文例集 ---------- */

.p-speech-header {
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
  padding: clamp(96px, 14vw, 140px) 0 48px;
}
.p-speech-header .c-label-en {
  color: var(--color-green-light);
}
.p-speech-header .c-heading {
  color: var(--color-white);
}
.p-speech-header__lead {
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.8);
}

/* ファーストビューに置く「自分の言葉にする」のポイント3点。
   濃紺背景の上なので、白の薄い面と枠で浮かせる。
   h1とリードが主役なので、文字は小さめにして従属させる。 */
.p-speech-header__points {
  /* 720px はツール側の各ブロック（特徴・注意・フォーム）と同じ幅。
     640pxだと3項目が横1行に収まらず折り返していた */
  max-width: 720px;
  margin: 28px auto 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 18px 22px;
  text-align: left;
}
/* 見出しは白にする。--color-green-light（#6a8f60）は濃紺の上だと
   コントラスト比が約3.7:1で、本文サイズの文字としてAA基準4.5:1に届かない。
   緑はチェック印（装飾なので3:1で足りる）だけに使う。 */
.p-speech-header__points-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 10px;
}
.p-speech-header__points-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.p-speech-header__points-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
/* チェック印（特徴カードと同じ描き方） */
.p-speech-header__points-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--color-green-light);
  border-bottom: 2px solid var(--color-green-light);
  transform: rotate(-45deg);
}
.p-speech-header__jump {
  margin-top: 28px;
}
/* 「文例を見る（定型文）」の括弧の中。何をするボタンかを先に読ませたいので、
   括弧側は一段小さく・薄くして従属して見えるようにする。
   非表示にはしない（定型文かオリジナルかの区別がこのページの主な分岐のため）。 */
.p-speech-header__jump-sub {
  font-size: 0.85em;
  opacity: 0.8;
  margin-left: 1px;
}
/* 文例 */
.p-speech {
  background: var(--color-off-white);
  scroll-margin-top: 100px; /* ページ先頭のジャンプリンクから飛んだとき、固定ヘッダーに隠れないように */
}
.p-speech__note,
.p-speech__lead {
  max-width: 760px;
  margin: 0 auto 20px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-speech__note {
  background: var(--color-cream);
  border-left: 4px solid var(--color-green-light);
  padding: 16px 20px;
}
.p-speech__group-title {
  max-width: 760px;
  margin: 48px auto 20px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-dark);
}
.p-speech__item {
  max-width: 760px;
  margin: 0 auto 24px;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(26, 39, 68, 0.06);
  padding: 28px 32px;
}
.p-speech__item-head {
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
  padding-bottom: 14px;
  margin-bottom: 20px;
}
.p-speech__item-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-dark);
}
.p-speech__item-tag {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--color-green);
}
.p-speech__item-body {
  color: var(--color-text-sub);
}
.p-speech__item-body p {
  font-size: var(--fs-base);
  line-height: 2.1;
  margin-bottom: 20px;
}
.p-speech__item-body p:last-child {
  margin-bottom: 0;
}
.p-speech__item-foot {
  margin-top: 24px;
  text-align: right;
}

/* AIへの依頼文を組み立てる */
.p-speech-tool {
  scroll-margin-top: 100px; /* 同上 */
}
.p-speech-tool__lead {
  max-width: 720px;
  margin: 0 auto 24px;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
}
/* ツールの特徴。AIに素で頼んだときとの違いを示す部分 */
.p-speech-tool__features {
  max-width: 720px;
  margin: 0 auto 32px;
}
.p-speech-tool__features-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-dark);
  text-align: center;
  margin-bottom: 24px;
}
.p-speech-tool__feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.p-speech-tool__feature {
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(26, 39, 68, 0.05);
  padding: 20px 22px;
}
.p-speech-tool__feature-name {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-dark);
  margin-bottom: 8px;
}
/* チェック印。SVGを増やさずCSSだけで描く */
.p-speech-tool__feature-name::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(-45deg);
}
.p-speech-tool__feature-desc {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* 浄土真宗の具体例。このツールの一番の売りなので独立した箱にする */
.p-speech-tool__example {
  max-width: 720px;
  margin: 0 auto 40px;
  background: var(--color-green-pale);
  border-radius: 4px;
  padding: 24px 28px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-speech-tool__example p {
  margin-bottom: 12px;
}
.p-speech-tool__example p:last-child {
  margin-bottom: 0;
}
.p-speech-tool__example-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
}
.p-speech-tool__example-quote {
  background: var(--color-white);
  border-left: 3px solid var(--color-green);
  border-radius: 2px;
  padding: 14px 16px;
}

.p-speech-tool__caution {
  max-width: 720px;
  margin: 0 auto 40px;
  background: var(--color-cream);
  border-left: 4px solid var(--color-green);
  padding: 20px 24px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-speech-tool__caution-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}
.p-speech-tool__form {
  max-width: 720px;
  margin: 0 auto;
}
.p-speech-tool__form dl {
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-speech-tool__form dt,
.p-speech-tool__form dd {
  padding: 20px 0;
  border-bottom: 1px solid rgba(26, 39, 68, 0.08);
}
.p-speech-tool__form dt {
  font-size: var(--fs-base);
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: none;
}
.p-speech-tool__form dd {
  padding-top: 0;
}
/* フォント16px以上は必須。iOSは16px未満の入力欄にフォーカスすると自動ズームする */
.p-speech-tool__form select,
.p-speech-tool__form textarea,
.p-speech-tool__form input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: var(--transition);
}
.p-speech-tool__form select:focus,
.p-speech-tool__form textarea:focus,
.p-speech-tool__form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-green);
}
/* 選択肢で「その他」を選んだときに出る補助入力欄。
   display は指定しない（hidden属性で消すため、上書きすると効かなくなる） */
.p-speech-tool__sub {
  margin-top: 12px;
}
.p-speech-tool__sub-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.p-speech-tool__form textarea {
  resize: vertical;
}
.p-speech-tool__hint {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-sub);
}

.p-speech-tool__output {
  max-width: 720px;
  margin: 48px auto 0;
}
.p-speech-tool__output-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 12px;
}
.p-speech-tool__prompt {
  width: 100%;
  font-family: inherit;
  /* --fs-sm はスマホで13pxに下がるためトークンを使わず16pxで固定する。
     readonly でもフォーカスはできるので、16px未満だとiOSが自動ズームして戻らない。 */
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text-sub);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 16px;
  resize: vertical;
}
.p-speech-tool__output .c-btn-row {
  margin-top: 20px;
}
.p-speech-tool__status {
  margin-top: 12px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-green);
  min-height: 1.6em;
}
.p-speech-tool__steps {
  counter-reset: speech-step;
  margin-top: 32px;
}
.p-speech-tool__steps li {
  counter-increment: speech-step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text-sub);
}
.p-speech-tool__steps li::before {
  content: counter(speech-step);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 50%;
}
/* 手順の下に置く、代表的なAIサービスへのリンク */
.p-speech-tool__services {
  margin-top: 28px;
}
.p-speech-tool__services-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 14px;
}
.p-speech-tool__service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.p-speech-tool__service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px; /* タップ領域44px以上を確実に確保する */
  height: 100%;
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.15);
  border-radius: 4px;
  padding: 12px 16px;
  transition: var(--transition);
}
@media (hover: hover) {
  .p-speech-tool__service:hover {
    border-color: var(--color-green);
    transform: translateY(-2px);
  }
}
.p-speech-tool__service-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-green);
}
.p-speech-tool__service-note {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-sub);
}
.p-speech-tool__services-note {
  margin-top: 14px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}

.p-speech-tool__disclaimer {
  margin-top: 28px;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* 関連リンク・CTA */
.p-speech-cta {
  background: var(--color-cream);
}
.p-speech-cta__footer {
  text-align: center;
}
.p-speech-cta__footer-text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text-sub);
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .p-speech__item {
    padding: 24px 20px;
  }
  .p-speech__item-foot {
    text-align: center;
  }
  .p-speech__group-title {
    margin-top: 36px;
  }
  /* 2列だとカード内の説明文が3〜4文字で折り返すため1列にする */
  .p-speech-tool__feature-list {
    grid-template-columns: 1fr;
  }
  /* サービス名＋提供元の2行が3列だと入りきらないため1列にする */
  .p-speech-tool__service-list {
    grid-template-columns: 1fr;
  }
  /* ポイント3点は横並びだと1項目が2〜3行に折り返すため縦積みにする */
  .p-speech-header__points-list {
    display: block;
  }
  .p-speech-header__points-list li + li {
    margin-top: 4px;
  }
  /* ジャンプボタン：文字数の差で幅が191pxと257pxに割れ、中央寄せで
     左右がずれて並ぶ。2つの進み方を選ばせる場所なので、縦積みにして
     幅を揃え、対等な選択肢に見えるようにする */
  .p-speech-header__jump {
    flex-direction: column;
    align-items: stretch;
  }

  /* 誘導バナー：横並びだと本文の幅が足りないので縦積みにし、矢印は右下へ */
  .c-promo-banner {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding: 22px 20px;
  }
  .c-promo-banner__body {
    width: 100%;
  }
  .c-promo-banner__points {
    display: block;
  }
  .c-promo-banner__points li + li {
    margin-top: 2px;
  }
  .p-speech-tool__example {
    padding: 20px 18px;
  }
}

/* ---------- 34. member/：組合員専用ページ（ログイン・資料一覧） ----------
   PHPで出力する保護領域のスタイル。公開ページとは違い、
   ヘッダーはロゴ＋ページ名＋ログアウトだけの簡素な構成にしている
   （一般向けナビを出すと、専用ページなのか公開ページなのか分かりにくい）。
   スマホから見る組合員が多い前提で、リンクは1件44px以上の高さを確保する。 */

/* ①簡素なヘッダー（.l-headerの固定表示・背景はそのまま利用する） */
.p-memberarea-header {
  background: var(--color-white);
  border-bottom: 1px solid rgba(26, 39, 68, 0.1);
}
.p-memberarea-header__label {
  font-family: var(--font-mincho);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.p-memberarea-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.p-memberarea-header__link {
  /* タブレット（768px前後）もタッチ操作なので、高さ44pxを確保する。
     nowrapが無いと横幅の足りない幅で1文字ずつ縦に折り返してしまう */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  transition: var(--transition);
}
.p-memberarea-header__link:hover {
  color: var(--color-green);
}

/* ①-2 一時公開モード（ログインを外しているあいだ）の警告帯。
   _config.php の $member_open_preview を1にすると member/ が誰でも開ける状態になる。
   **戻し忘れると名簿の個人情報が出たままになる**ので、目に付く赤で常時出す。
   0に戻せばPHP側で出力されなくなり、このCSSは使われなくなる。 */
.p-memberarea-preview {
  background: #fdecea;
  border-bottom: 2px solid #c0392b;
  padding: 16px 0;
  margin-top: 71px; /* 固定ヘッダーの高さ */
}
.p-memberarea-preview__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #a93226;
  margin-bottom: 6px;
}
.p-memberarea-preview__text {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-text);
}
/* 帯を出したときは、続くセクションの上余白を詰める */
.p-memberarea-preview ~ .p-memberarea-login,
.p-memberarea-preview ~ .p-memberarea-portal {
  padding-top: clamp(32px, 5vw, 48px);
}

/* ②共通：固定ヘッダーに潜り込まないよう上に余白を取る */
.p-memberarea-login,
.p-memberarea-portal {
  padding: clamp(120px, 15vw, 170px) 0 96px;
  min-height: 70vh;
}
/* 資料の一覧は横に伸ばしても読みにくくなるだけなので、
   公開ページ（1400px）より狭い読み幅にする。スマホ側の92%は変わらない */
.p-memberarea-login .l-container,
.p-memberarea-portal .l-container {
  width: min(960px, 92%);
}

/* ③ログイン画面 */
.p-memberarea-login__box {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: 2px;
  padding: 48px 44px;
  text-align: center;
}
.p-memberarea-login__title {
  font-size: var(--fs-lg);
  margin-bottom: 16px;
}
.p-memberarea-login__lead {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  margin-bottom: 32px;
}
.p-memberarea-login__error {
  font-size: var(--fs-sm);
  color: #a33;
  background: #fdf0f0;
  border: 1px solid #e6c4c4;
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 24px;
  text-align: left;
}
.p-memberarea-login__notice {
  font-size: var(--fs-sm);
  color: var(--color-green);
  background: var(--color-green-pale);
  border-radius: 2px;
  padding: 12px 16px;
  margin-bottom: 24px;
  text-align: left;
}
.p-memberarea-login__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  margin-bottom: 8px;
}
.p-memberarea-login__form input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.2);
  border-radius: 2px;
  padding: 14px;
  letter-spacing: 0.1em;
  transition: var(--transition);
}
.p-memberarea-login__form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-green);
}
.p-memberarea-login__submit {
  margin-top: 24px;
}
.p-memberarea-login__submit .c-btn {
  width: 100%;
}
.p-memberarea-login__help {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  text-align: left;
}
.p-memberarea-login__help p + p {
  margin-top: 12px;
}
.p-memberarea-login__help a {
  color: var(--color-green);
  text-decoration: underline;
}
.p-memberarea-login__caution {
  color: var(--color-charcoal);
  background: var(--color-cream);
  border-radius: 2px;
  padding: 12px 14px;
}

/* ④ポータル（資料一覧） */
.p-memberarea-portal__title {
  font-size: var(--fs-xl);
  margin-bottom: 12px;
}
.p-memberarea-portal__lead {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  margin-bottom: 40px;
}
.p-memberarea-notice {
  background: var(--color-green-pale);
  border-left: 3px solid var(--color-green);
  border-radius: 2px;
  padding: 20px 24px;
  margin-bottom: 48px;
}
.p-memberarea-notice__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-green);
  margin-bottom: 6px;
}
.p-memberarea-notice__text {
  font-size: var(--fs-base);
}

/* ⑤カテゴリー */
.p-memberarea-cat + .p-memberarea-cat {
  margin-top: 56px;
}
.p-memberarea-cat__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-lg);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-dark);
}
.p-memberarea-cat__badge {
  font-family: var(--font-gothic);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-gold);
  border-radius: 2px;
  padding: 3px 10px;
}
.p-memberarea-cat__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: 12px;
}
.p-memberarea-cat__empty {
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  background: var(--color-cream);
  border-radius: 2px;
  padding: 20px 24px;
  margin-top: 20px;
}

/* ⑥資料の一覧 */
.p-memberarea-doclist {
  list-style: none;
  margin-top: 20px;
}
.p-memberarea-doc + .p-memberarea-doc {
  margin-top: 12px;
}
.p-memberarea-doc__link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 64px;
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: 2px;
  padding: 18px 20px;
  transition: var(--transition);
}
a.p-memberarea-doc__link:hover {
  border-color: var(--color-green);
  background: var(--color-green-pale);
}
.p-memberarea-doc__link.is-missing {
  background: var(--color-cream);
  color: var(--color-text-sub);
}
.p-memberarea-doc__type {
  flex-shrink: 0;
  min-width: 76px;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-dark);
  border-radius: 2px;
  padding: 4px 8px;
}
.p-memberarea-doc__link.is-missing .p-memberarea-doc__type {
  background: var(--color-text-sub);
}
.p-memberarea-doc__body {
  display: block;
}
.p-memberarea-doc__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
}
.p-memberarea-doc__note {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: 4px;
}
.p-memberarea-doc__meta {
  display: flex;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-top: 6px;
}

/* ⑥-2 文章で載せる資料（2026年8月19日〜）。
   正式な書面はFAX・郵送で届き、ここは確認用。文字で載せることで
   端末の文字サイズ設定がそのまま効き、拡大操作が要らない。
   開閉は <details>／<summary> の標準機能で、JavaScriptを使っていない。 */
.p-memberarea-text {
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: 2px;
}
.p-memberarea-text[open] {
  border-color: var(--color-green);
}
/* 見出し行。指で押す場所なので上下に余裕を持たせる */
.p-memberarea-text__head {
  display: block;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none; /* 既定の三角を消して、下の擬似要素に差し替える */
}
.p-memberarea-text__head::-webkit-details-marker {
  display: none;
}
.p-memberarea-text__head:hover {
  background: var(--color-green-pale);
}
.p-memberarea-text__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  /* 開閉の目印。閉じているときは「＋」、開いているときは「−」 */
  padding-right: 28px;
  position: relative;
}
.p-memberarea-text__title::after {
  content: '＋';
  position: absolute;
  right: 0;
  top: 0;
  color: var(--color-green);
  font-weight: 700;
}
.p-memberarea-text[open] .p-memberarea-text__title::after {
  content: '−';
}
.p-memberarea-text__note {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: 4px;
}
.p-memberarea-text__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  margin-top: 8px;
}
.p-memberarea-text__open {
  color: var(--color-green);
}
.p-memberarea-text[open] .p-memberarea-text__open {
  display: none; /* 開いたあとは案内が不要 */
}
/* 本文。読み幅を詰めすぎず、行間を広めに取る */
.p-memberarea-text__body {
  padding: 4px 20px 20px;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-memberarea-text__from {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  text-align: right;
  margin: 12px 0 16px;
}
.p-memberarea-text__para {
  font-size: var(--fs-base);
  line-height: 2;
  margin-bottom: 1em;
}
/* 「記」以下の明細。日時・場所など、いちばん見たい情報なので囲って目立たせる */
.p-memberarea-text__detail {
  background: var(--color-cream);
  border-radius: 2px;
  padding: 16px 18px;
  margin: 4px 0 20px;
}
.p-memberarea-text__detail dt {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-green);
}
.p-memberarea-text__detail dd {
  font-size: var(--fs-base);
  line-height: 1.9;
  margin-bottom: 12px;
}
.p-memberarea-text__detail dd:last-child {
  margin-bottom: 0;
}
.p-memberarea-text__origin {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  border-top: 1px solid rgba(26, 39, 68, 0.08);
  padding-top: 14px;
}
.p-memberarea-text__origin a {
  display: inline-block;
  min-height: 44px; /* 指で押せる高さを確保する */
  line-height: 44px;
  color: var(--color-green);
  text-decoration: underline;
}

/* ⑥-3 組合員名簿（member/roster.php）。
   紙の名簿の代わりに読む一覧。**電話番号をタップしてそのままかけられる**のが要点。
   1社ずつ枠で区切り、項目名と中身を上下に積む（スマホで横並びは窮屈なため）。 */
.p-memberarea-roster__count {
  font-family: var(--font-gothic);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-sub);
}
.p-memberarea-roster {
  list-style: none;
  margin-top: 20px;
}
.p-memberarea-roster__item {
  background: var(--color-white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: 2px;
  padding: 18px 20px;
}
.p-memberarea-roster__item + .p-memberarea-roster__item {
  margin-top: 12px;
}
.p-memberarea-roster__name {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}
.p-memberarea-roster__daihyo {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: 4px;
}
.p-memberarea-roster__data {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  /* 行間を10pxにしているのは、下のリンクの当たり判定どうしが
     8px以上離れるようにするため（隣を押してしまうのを防ぐ） */
  gap: 10px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}
.p-memberarea-roster__data dt {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  padding-top: 13px; /* 下のリンクに上下paddingを入れた分、項目名の位置をそろえる */
}
.p-memberarea-roster__data dd {
  font-size: var(--fs-base);
  line-height: 1.7;
  word-break: break-all; /* 長いメールアドレスで枠が広がらないように */
}
/* メール・住所・自社サイトも指で押す場所。
   文字の大きさは変えず、上下のpaddingで高さ44pxを確保する */
.p-memberarea-roster__data a {
  display: inline-block;
  padding: 11px 0;
  color: var(--color-green);
  text-decoration: underline;
}
/* 電話は最も押される場所。大きく、指で押せる高さを確保する */
.p-memberarea-roster__tel {
  padding: 6px 0; /* 下の line-height と合わせて高さ44pxを確保する */
  line-height: 32px;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ⑦ページ下部 */
.p-memberarea-portal__foot {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 39, 68, 0.08);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.p-memberarea-portal__foot a {
  color: var(--color-green);
  text-decoration: underline;
}
.p-memberarea-portal__logout {
  /* スマホでの誤タップを防ぐため、高さ44pxを確保する
     （padding 10px では実測43.4pxでわずかに足りなかった） */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
}

/* ⑧フッター（公開ページのような大きなナビは不要） */
.p-memberarea-footer {
  padding: 32px 0 24px;
}
.p-memberarea-footer .l-footer__bottom {
  justify-content: center;
}

@media (max-width: 1024px) {
  /* タブレット幅ではヘッダーの横幅が足りず、「公式サイトへ」が縦に潰れる。
     ロゴが同じ役割を果たすので、この幅から下では省く */
  .p-memberarea-header__link {
    display: none;
  }
}

@media (max-width: 767px) {
  /* ヘッダーはロゴとログアウトを優先し、ページ名は文字を落とす */
  .p-memberarea-header .l-header__inner {
    gap: 12px;
  }
  .p-memberarea-header__label {
    font-size: var(--fs-sm);
  }
  .p-memberarea-header__actions {
    gap: 12px;
  }
  .p-memberarea-login__box {
    padding: 32px 20px;
  }
  .p-memberarea-doc__link {
    flex-direction: column;
    gap: 10px;
  }
  .p-memberarea-doc__type {
    min-width: 0;
    align-self: flex-start;
    padding: 4px 12px;
  }
  /* 文章の資料はスマホで読むのが主。左右の余白を詰めて本文の幅を稼ぐ */
  .p-memberarea-text__head {
    padding: 16px;
  }
  .p-memberarea-text__body {
    padding: 4px 16px 16px;
  }
  .p-memberarea-text__detail {
    padding: 14px 16px;
  }
}

/* ---------- 一時掲載：お見舞いブロック（令和8年熊本地震／index.html） ----------
   災害時のお見舞い文をヒーロー直下に置くための一時的なブロック。
   復旧が進んだら index.html の <section class="p-sympathy"> と
   ここから下をまとめて削除すれば元に戻る（他へ影響しないよう自己完結させている）。
   PCファースト＋max-widthでスマホ側を上書きする方針は本体CSSと同じ。      */
.p-sympathy {
  background: var(--color-cream);
  border-top: 1px solid rgba(26, 39, 68, 0.12);
  border-bottom: 1px solid rgba(26, 39, 68, 0.12);
  padding: 72px 0;
}
.p-sympathy__inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.p-sympathy__title {
  font-family: var(--font-mincho);
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 32px;
}
/* 見出し下の短い罫線。数字や実績セクションと違い装飾を足さず、
   区切りが分かる最小限にとどめる（弔意を示す文面のため）。 */
.p-sympathy__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-green);
  margin: 20px auto 0;
}
.p-sympathy__text {
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--color-text);
}
.p-sympathy__text + .p-sympathy__text {
  margin-top: 24px;
}
/* 骨つぼ無償提供のお知らせへの導線。
   お見舞い文はクリーム地に文章が続くだけなので、ここだけ白いカードにして
   左端に緑の帯を入れ、面として浮かせる。**弔意を示す文面の中に置くため、
   色数を増やさず既存のトークン（白・モスグリーン）だけで組み立てている。**
   カード全体がリンクで、最小の高さでも44pxを超える。 */
.p-sympathy__notice {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 20px 24px;
  background: var(--color-white);
  border-left: 4px solid var(--color-green);
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(26, 39, 68, 0.08);
  text-align: left;
  transition: var(--transition);
}
.p-sympathy__notice:hover {
  box-shadow: 0 4px 16px rgba(26, 39, 68, 0.14);
  transform: translateY(-2px);
}
.p-sympathy__notice-label {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-green);
  border-radius: 2px;
  padding: 7px 12px;
}
.p-sympathy__notice-main {
  flex: 1;
}
.p-sympathy__notice-title {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-dark);
  margin-bottom: 6px;
}
.p-sympathy__notice-text {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-sub);
}
/* 骨つぼ無償提供の在庫状況。実態と食い違うと困るので、
   在庫が少なくなったら index.html のこの一文を真っ先に直すこと。 */
.p-sympathy__notice-stock {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-sub);
}
.p-sympathy__notice-stock strong {
  color: var(--color-green);
  font-weight: 700;
}

.p-sympathy__notice-more {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-green);
  white-space: nowrap;
}
.p-sympathy__notice-more::after {
  content: '→';
  margin-left: 6px;
}

.p-sympathy__btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.p-sympathy__sign {
  font-family: var(--font-mincho);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: 32px;
}

@media (max-width: 767px) {
  .p-sympathy {
    padding: 48px 0;
  }
  .p-sympathy__inner {
    /* スマホでは中央揃えだと1行ごとの折り返し位置がばらつき読みにくいので
       本文だけ左揃えに戻す。見出し・署名・ボタンは中央のまま。 */
    text-align: left;
  }
  .p-sympathy__title {
    text-align: center;
    margin-bottom: 24px;
  }
  .p-sympathy__text {
    line-height: 1.9;
  }
  /* スマホは横に3つ並べる幅が無い。ラベル→見出し→説明→「くわしく見る」を
     縦に積み、「くわしく見る」は右端に寄せて押せる場所だと分かるようにする。 */
  .p-sympathy__notice {
    display: block;
    gap: 0;
    margin-top: 32px;
    padding: 18px 18px 16px;
  }
  .p-sympathy__notice-label {
    display: inline-block;
    margin-bottom: 12px;
  }
  .p-sympathy__notice-title {
    font-size: var(--fs-base);
    font-weight: 700;
  }
  .p-sympathy__notice-more {
    display: block;
    text-align: right;
    margin-top: 12px;
  }

  .p-sympathy__btns {
    flex-direction: column;
    align-items: stretch;
    margin-top: 28px;
  }
  .p-sympathy__btns .c-btn {
    /* 44px以上のタップ領域を確保する（c-btn--sm は10pxパディングのため） */
    min-height: 48px;
  }
  .p-sympathy__sign {
    text-align: center;
  }
}