/* ==========================================================================
   永代供養ポータル｜記事デザイン
   SWELL子テーマ /assets/article.css

   【設計方針】主読者は60代以上。可読性を最優先する。
     ・最小文字サイズは 0.95rem（16px基準で約15px）。これ以下は使わない
     ・本文コントラストは 7:1 以上（WCAG AAA）を目安にする
     ・文字色は必ず明示する（SWELLの th{color:#fff} などに負けないため）
     ・行間は 1.85 以上を維持する
     ・数字（価格・期間）は大きく太く。読み取りの主役にする

   記事本文にはクラス名しか入っていないため、
   このファイルだけを直せば掲載済みの全記事に反映される（記事の再生成は不要）。
   ========================================================================== */

:root {
  --e-ink: #241f1a;          /* 本文（白地に約15:1） */
  --e-ink-sub: #4f4840;      /* 補助テキスト（白地に約9:1） */
  --e-line: #d8cfc0;
  --e-line-soft: #e7e0d4;
  --e-card: #f6f2ea;         /* カード地：色面でカードを区切る */
  --e-white: #fff;
  --e-accent: #33553f;       /* 主調色：濃いめの緑（白地に約8:1） */
  --e-accent-weak: #e4ecE6;
  --e-accent-line: #b9cbbf;
  --e-warn: #7a4f10;         /* 「要確認」など未確定の情報（白地に約7:1） */
  /* 電話ボタン。LINEの緑と主調色の緑にはさまれると濃緑が沈んでボタンに見えないため、
     緑の反対側に振る。白文字との差は約5.2:1（大きな太字は4.5:1でAAA） */
  --e-tel: #c2410c;
  --e-tel-dark: #8f2f09;     /* 押し込みの影。ホバーで消える */
  --e-radius: 10px;
}

/* --------------------------------------------------------------------------
   施設カード
   全周を太線で囲むと20件並んだとき線が過剰になり、中身の階層が読めなくなる。
   カードは「薄い地色」で区切り、中に白いサブブロックを入れ子にして階層を作る。
   -------------------------------------------------------------------------- */
.facility-card {
  background: var(--e-card);
  border: 1px solid var(--e-line);
  border-radius: var(--e-radius);
  padding: 24px;
  margin: 0 0 52px;
  color: var(--e-ink);
  font-size: 1.05rem;
  line-height: 1.9;
}

/* 施設名（h3） */
.facility-card .f-name {
  margin: 0 0 6px;
  font-size: 1.45rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--e-ink);
  letter-spacing: .01em;
  padding: 0;
  border: none;
  background: none;
}
.facility-card .f-name .f-index {
  display: inline-block;
  background: var(--e-accent);
  color: #fff;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  padding: .16em .55em;
  margin-right: .55em;
  vertical-align: middle;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.facility-card .f-name .f-index small { font-size: .85em; font-weight: 400; opacity: .85; }
.facility-card .f-name .f-area {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--e-ink-sub);
  margin-top: 4px;
  line-height: 1.7;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   判断サマリー（最安価格・納骨タイプ・年間管理費）
   記事本文で「先に決めてください」と伝えている3軸を、表に埋もれさせず数字で出す。
   ここは読み取りの主役なので、思い切り大きくする。
   -------------------------------------------------------------------------- */
.facility-card .f-summary { margin: 18px 0 22px; }
.facility-card .f-summary figure,
.facility-card .f-summary .wp-block-table { margin: 0; overflow: visible; }
.facility-card .f-summary table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  background: var(--e-line);
  border: 1px solid var(--e-line);
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;
}
.facility-card .f-summary th,
.facility-card .f-summary td {
  background: var(--e-white);
  border: none;
  text-align: center;
  padding: 12px 8px;
  line-height: 1.6;
}
.facility-card .f-summary th {
  font-size: 1rem;
  font-weight: 700;
  color: var(--e-ink-sub);   /* 色は必ず明示（SWELLの th 既定に負けない） */
  letter-spacing: .02em;
  padding-bottom: 2px;
}
.facility-card .f-summary td {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--e-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  word-break: break-word;
}

/* 施設写真。
   写真が無い施設ではショートコードが空を返すため、この段落ごと潰して余白を残さない。
   :empty は中身が完全に空のときだけ当たるので、写真がある施設には影響しない */
.facility-card .f-photo { margin: 14px 0 0; line-height: 0; }
.facility-card .f-photo:empty { display: none; }
.facility-card .f-photo-img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--e-white);
}
/* 写真が無い施設は、ストリートビューの外観を同じ大きさで出す（inc/facility-photo.php）。
   写真をメディアにアップすれば自動で入れ替わる。
   Googleの出典表記は枠の中に出るので、こちらで足さない */
.facility-card .f-photo-img.is-streetview,
.facility-card .f-photo-img.is-map {
  height: 240px;
  border: 1px solid var(--e-line);
  object-fit: unset;
  background: #e9e5dc;
}
@media (max-width: 600px) {
  .facility-card .f-photo-img { height: 190px; }
  .facility-card .f-photo-img.is-streetview,
  .facility-card .f-photo-img.is-map { height: 190px; }
}

/* 施設カードの特徴タグ。確認できた項目だけを並べる */
.facility-card .f-tags { margin: -6px 0 18px; }
.facility-card .f-taglist { margin: 0; line-height: 2.1; }
/* 施設カードのタグ。
   地と枠はカードの地（#f6f2ea）とほぼ同じ色（1.04:1・1.37:1）だが、**これは意図どおり。**
   白地＋濃い枠（3.4:1）にしたところ、タグらしさが失われるとの判断で戻した。
   文字は 7.47:1 あり、読みやすさの基準は満たしている。
   **同じ理由で「見えにくい」と判断して変えないこと。** */
.facility-card .f-tag {
  display: inline-block;
  font-size: 1rem;
  color: #6b4a12;          /* カード地に 7.47:1 */
  background: #fdf6e8;
  border: 1px solid #e2cfa6;
  border-radius: 4px;
  padding: 4px 11px;
  margin: 0 7px 6px 0;
}

/* --------------------------------------------------------------------------
   カード内の白いサブブロック
   -------------------------------------------------------------------------- */
.facility-card .f-block {
  background: var(--e-white);
  border: 1px solid var(--e-line-soft);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 16px;
}
.facility-card .f-block > h4 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--e-accent);
  letter-spacing: .02em;
  border-bottom: 2px solid var(--e-accent-line);
  padding-bottom: 8px;
  background: none;
  line-height: 1.6;
}
.facility-card .f-block p { margin: 0 0 .8em; font-size: 1.05rem; line-height: 1.95; }
.facility-card .f-block p:last-child { margin-bottom: 0; }
.facility-card .f-block figure,
.facility-card .f-block .wp-block-table { margin: 0; }

/* 基本情報（見出し行なしの2列テーブル） */
.facility-card .f-meta table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.facility-card .f-meta td {
  border: none;
  border-bottom: 1px solid var(--e-line-soft);
  padding: .75em .3em;
  vertical-align: top;
  color: var(--e-ink);
  line-height: 1.8;
}
.facility-card .f-meta tr:last-child td { border-bottom: none; }
.facility-card .f-meta td:first-child {
  width: 8.2em;
  color: var(--e-ink-sub);
  font-weight: 700;
  white-space: nowrap;
}
.facility-card .f-meta p { margin-top: 16px; }

/* 費用テーブル（列が多いので横スクロール） */
.facility-card .f-price figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.facility-card .f-price table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.facility-card .f-price th,
.facility-card .f-price td {
  border: 1px solid var(--e-line);
  padding: .7em .8em;
  text-align: left;
  white-space: nowrap;
  line-height: 1.7;
}
/* SWELL は th を「濃い背景＋白文字」で描くため、背景と文字色を必ずセットで指定する */
.facility-card .f-price thead th {
  background: var(--e-accent);
  color: #fff;
  font-weight: 700;
}
.facility-card .f-price tbody td { background: var(--e-white); color: var(--e-ink); }
.facility-card .f-price tbody tr:nth-child(even) td { background: #faf8f4; }

/* 特徴リスト */
.facility-card .f-points ul { margin: 0; padding-left: 1.3em; font-size: 1.05rem; }
.facility-card .f-points li { margin: .45em 0; line-height: 1.85; }

/* 表の注記。免責にあたる内容なので小さくしすぎない */
.facility-card figcaption,
.facility-compare figcaption {
  font-size: .97rem;
  color: var(--e-ink-sub);
  margin-top: .8em;
  line-height: 1.8;
  text-align: left;
}

/* --------------------------------------------------------------------------
   編集部コメント
   -------------------------------------------------------------------------- */
.editor-comment {
  background: #eef2ef;
  border-left: 5px solid var(--e-accent-line);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--e-ink);
}
.editor-comment p { margin: 0; }
.editor-comment p:first-child {
  font-weight: 700;
  color: var(--e-accent);
  font-size: 1rem;
  margin-bottom: 6px;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   CTA（特典告知 → マイクロコピー → ボタン）
   カード末尾に置くことで「この施設の説明の終わり」を示す終端マーカーになる。
   -------------------------------------------------------------------------- */
.f-cta {
  background: var(--e-white);
  border: 2px solid var(--e-accent-line);
  border-radius: 8px;
  padding: 18px 20px;
}
.f-cta > p:first-child {
  font-size: 1.02rem;
  margin: 0 0 12px;
  line-height: 1.85;
  color: var(--e-ink);
}

.f-cta .wp-block-buttons { margin: 0; }
.f-cta .wp-block-button { width: 100%; }
.f-cta .wp-block-button__link {
  display: block;
  width: 100%;
  background: var(--e-accent);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1.18rem;      /* 押しやすさ優先。指でも目でも迷わない大きさ */
  padding: 1em 1em;
  border-radius: 8px;
  letter-spacing: .02em;
  line-height: 1.6;
  min-height: 56px;        /* タップ領域を確保 */
}

/* --------------------------------------------------------------------------
   上部の比較表（施設を列に置いた横スクロール表。各列から施設カードへ飛ぶ）
   縦長の表では記事幅に5列が限界で、全行が2行に折り返していた。
   転置すると項目を増やしても高さが増えない。
   先頭行の「この目的なら」で、条件のよい施設がスクロール中に目に留まるようにする。
   -------------------------------------------------------------------------- */
.facility-compare { margin: 10px 0 40px; }
.cx-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--e-line);
  border-radius: 8px;
  margin-bottom: 9px;
}
.cx-table {
  border-collapse: collapse;
  background: var(--e-white);
  font-size: 1.02rem;
  /* 列幅を宣言どおりに固定する。
     自動レイアウトだと、施設写真の width 属性（medium=300px）に引きずられて
     その列だけ広がってしまう。固定にすれば写真は列幅に合わせて縮む */
  table-layout: fixed;
}
.cx-table th,
.cx-table td {
  border-right: 1px solid var(--e-line-soft);
  border-bottom: 1px solid var(--e-line-soft);
  /* 上下は詰める。9行あるので1行あたり4pxでも表全体では大きく効く。
     左右は詰めない（文字が枠線に近づくと読みにくくなる） */
  padding: 8px 14px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
  color: var(--e-ink);        /* テーマ側の th 色指定に負けないよう必ず明示する */
}
.cx-table th {
  position: sticky;           /* 横スクロール中も項目名を残す */
  left: 0;
  z-index: 2;
  width: 112px;
  min-width: 112px;
  background: var(--e-card);
  font-size: .98rem;
  font-weight: 700;
  border-right: 1px solid var(--e-line);
}
.cx-table td { width: 220px; min-width: 220px; }
.cx-table tr:nth-child(even) td { background: #faf8f4; }
.cx-table tr:last-child th,
.cx-table tr:last-child td { border-bottom: none; }
/* 写真・施設名・目的バッジの行は上揃え。他は1行の項目が多いので中央揃えのまま */
.cx-table .cx-r-top td { vertical-align: top; }

/* この目的なら：どういう人に向くかを1行で示す見出し。全施設に1つずつ付く。
   母集団（掲載のなかでの比較であること）は表の下の .cx-note に1回だけ書く */
.cx-purpose {
  display: block;
  background: var(--e-accent);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.45;
}

.cx-photo {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--e-card);
  margin-top: 10px;   /* 施設名の下に置く。写真の無い施設と名前の位置をそろえるため */
}
.cx-yomi {
  /* 2行まで。3行のヨミは1件だけなのに、その1件に合わせて全列の写真が下がる。
     全文は施設カードの .f-yomi に出るので、表では切っても情報は落ちない */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* ruby は使わない。名前の上に独立した行として置く。
     本文の最小は .95rem だが、ヨミは読み仮名の補助なので一段小さくしている。
     字間も詰めて、長い寺号でも折り返しを減らす */
  font-size: .85rem;
  color: var(--e-ink-sub);
  letter-spacing: .02em;
  line-height: 1.5;
}
/* 「霊園概要」の写真をセルの下端にそろえる。
   施設名とヨミの行数が施設ごとに1〜3行と違うため、写真の開始位置がばらついていた。
   同じ行のセルは高さが等しいので、下端に貼れば横一列にそろう。
   写真の無い施設では余白だけが残らないよう :has() で写真のある列にだけ当てる
   （:has() が効かないブラウザではこれまでどおりの並びになる）。 */
.cx-table .cx-r-top td:has(.cx-photo) {
  position: relative;
  padding-bottom: 92px;        /* 写真80px ＋ 名前との間4px ＋ セル下の余白8px */
}
.cx-table .cx-r-top td:has(.cx-photo) .cx-photo {
  position: absolute;
  left: 14px;                  /* セルの左右パディングと同じ */
  right: 14px;
  bottom: 8px;
  width: auto;
  height: 80px;                /* 16:9より横長に切る。表の高さを抑えるため */
  margin-top: 0;
}
@media (max-width: 600px) {
  .cx-table .cx-r-top td:has(.cx-photo) { padding-bottom: 92px; }
}

.cx-name {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--e-accent);
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cx-tag {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--e-accent);
  background: var(--e-accent-weak);
  border: 1px solid var(--e-accent-line);
  border-radius: 4px;
  padding: 2px 9px;
  margin: 0 5px 3px 0;
  white-space: nowrap;
}
.cx-tag-sub { color: var(--e-ink-sub); background: var(--e-white); border-color: var(--e-line); }
/* 特徴タグ。納骨タイプ（緑）と区別がつくよう、地の色を変えて枠付きにする。
   「確認できたものだけ」を出すので、無いことを示すグレーのタグは作らない */
/* 特徴タグ。全施設に同じ8項目を同じ順で出し、該当しないものは cx-tag-off にする。
   列幅216pxに2つ並ぶよう余白を詰めてある（詰めないと8項目で8行になる） */
.cx-tag-feat,
.cx-tag-off,
.cx-tag-cap {
  font-weight: 400;
  white-space: nowrap;       /* 折り返すと列ごとに行数がずれ、位置が合わなくなる */
  padding: 2px 4px;          /* ここを広げると2つ並ばなくなり、8項目が8行になる */
  margin: 0 3px 3px 0;
  line-height: 1.45;
}
.cx-tag-feat { color: #6b4a12; background: #fdf6e8; border-color: #e2cfa6; }
/* 該当しない項目。「無い」ではなく「確認できていない」という意味なので、
   読めなくなるほど薄くしない（#575757 は白地でコントラスト7.2:1） */
.cx-tag-off {
  color: #575757;
  background: var(--e-white);
  border-style: dashed;
  border-color: #ccc7bd;
}
/* 納骨人数。共通項目とは別の情報なので色を分ける */
.cx-tag-cap {
  color: var(--e-accent);
  background: var(--e-white);
  border-color: var(--e-accent-line);
  font-weight: 700;
}
/* --------------------------------------------------------------------------
   LINEのCTAボタン
   中身はSWELLの「ブログパーツ」（本文にはショートコードしか入らないため、
   WP管理画面でパーツを1回直せば掲載済みの全記事に反映される。記事の再生成は不要）。
   ブログパーツ側では文言・リンク先・ボタン形状（立体）を設定し、
   **色だけをここで当てる。**SWELLのボタン色はプリセットのみで、LINEの緑を選べないため。
   テーマが後から読み込む色指定に負けないよう !important が要る。
   -------------------------------------------------------------------------- */
/* LINEのブログパーツ。**ID指定で直接当てる。**
   生成器は .line-cta で包むが、エディタで手作業で挿入した場合は包みが無く、
   .line-cta だけを頼りにすると色が当たらない（実際に文字が白くならなかった）。
   パーツ自体を指定しておけば、どこに置いても同じ見た目になる。
   ID: 5039=LINEで資料請求 / 5044=このお寺の資料請求 / 5084=LINEで無料相談
   **電話＋LINEの段（.cta-row）の中のSWELLボタンにも当てる（v2.124.13）。**
   コラム記事に手で入れたブログCTA（ID 11536）は包みも無く、上のIDにも無かったため、
   文字が本文リンクの緑灰色のまま・ボタンが左に寄っていた。.cta-row で指定しておけば、
   新しくブログパーツを作ってもIDを足さずに同じ見た目になる */
.line-cta .p-blogParts,
.line-cta .swell-block-button,
.p-blogParts[data-partsID="5039"] .swell-block-button,
.p-blogParts[data-partsID="5044"] .swell-block-button,
.p-blogParts[data-partsID="5084"] .swell-block-button { margin: 0 !important; }
.line-cta .swell-block-button__link,
.p-blogParts[data-partsID="5039"] .swell-block-button__link,
.p-blogParts[data-partsID="5044"] .swell-block-button__link,
.p-blogParts[data-partsID="5084"] .swell-block-button__link,
.cta-row .swell-block-button__link,
.cx-line-btn,
.f-cta .wp-block-button__link {   /* 施設カード末尾のLINE資料請求ボタンも同じ見た目にそろえる */
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #06c755 !important;        /* LINEブランドカラー */
  color: #fff !important;
  border: none !important;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 11px 8px !important;
  text-align: center;
  text-decoration: none;
  /* 立体ボタンの影。SWELLの既定色ではなくLINEの濃い緑にそろえる */
  box-shadow: 0 4px 0 #04a044 !important;
}
/* 押したときは影が消えて沈む（SWELLの立体ボタンの挙動に合わせる） */
.line-cta .is-style-btn_solid a:hover,
.p-blogParts[data-partsID="5039"] .is-style-btn_solid a:hover,
.p-blogParts[data-partsID="5044"] .is-style-btn_solid a:hover,
.p-blogParts[data-partsID="5084"] .is-style-btn_solid a:hover,
.cta-row .is-style-btn_solid a:hover,
.cx-line-btn:hover,
.f-cta .wp-block-button__link:hover {
  background: #05b44c !important;
  box-shadow: 0 0 0 transparent !important;
  transform: translate3d(0, 4px, 0);
}
.line-cta .swell-block-button__link::after,
.line-cta .swell-block-button__link::before,
.cta-row .swell-block-button__link::after,
.cta-row .swell-block-button__link::before { content: none !important; }

.cx-price { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-more {
  display: block;
  text-align: center;
  font-size: .98rem;
  font-weight: 700;
  color: var(--e-accent);
  background: var(--e-white);
  border: 2px solid var(--e-accent-line);
  border-radius: 6px;
  padding: 8px 11px;
  text-decoration: none;
  white-space: nowrap;
}
.cx-note { font-size: .97rem; color: var(--e-ink-sub); line-height: 1.8; margin: 0 0 4px; }

@media (max-width: 600px) {
  /* 文字は縮めない。列幅だけを詰める。
     ただし216pxより狭くすると特徴タグが1行に1つしか入らず、行が8行に伸びる */
  .cx-table th { width: 98px; min-width: 98px; }
  .cx-table td { width: 220px; min-width: 220px; }
}

/* --------------------------------------------------------------------------
   注意書き・補足コラム（記事全体で使用）
   -------------------------------------------------------------------------- */
.callout {
  background: #fdf7ea;
  border: 2px solid #dfcda2;
  border-radius: 8px;
  padding: 6px 22px 18px;
  margin: 26px 0;
  color: var(--e-ink);
}
.callout > h4 {
  font-size: 1.15rem;
  color: var(--e-warn);
  margin: 18px 0 10px;
  background: none;
  border: none;
  padding: 0;
  line-height: 1.6;
}
.callout p { margin: 0 0 .8em; font-size: 1.05rem; line-height: 1.95; }
.callout p:last-child { margin-bottom: 0; }
.callout ul { margin: .5em 0 0; font-size: 1.05rem; }
.callout li { margin: .4em 0; line-height: 1.85; }

/* アンカーでジャンプした際に見出しがヘッダーへ潜らないようにする */
.facility-card .f-name { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   モバイル
   文字は縮めない。余白とレイアウトだけを詰める。
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .facility-card { padding: 16px; border-radius: 8px; margin-bottom: 38px; }
  .facility-card .f-name { font-size: 1.25rem; }
  .facility-card .f-block { padding: 14px 15px; }

  /* サマリーは3列だと数字が潰れるので縦積みにする */
  .facility-card .f-summary table,
  .facility-card .f-summary thead,
  .facility-card .f-summary tbody,
  .facility-card .f-summary tr { display: block; width: 100%; }
  .facility-card .f-summary thead { display: none; }
  .facility-card .f-summary td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    text-align: right;
    font-size: 1.2rem;
    padding: 11px 14px;
    border-bottom: 1px solid var(--e-line-soft);
  }
  .facility-card .f-summary td:last-child { border-bottom: none; }
  /* 縦積み時のラベルをCSSで補う（thead を隠すため） */
  .facility-card .f-summary td::before {
    content: attr(data-label);
    font-size: 1rem;
    font-weight: 700;
    color: var(--e-ink-sub);
    text-align: left;
    flex: none;
  }
  /* ここの文字列は render.js の f-summary の見出しと必ずそろえること。
     ずれると、モバイルだけ別の項目名が表示される */
  .facility-card .f-summary td:nth-child(1)::before { content: "最安価格"; }
  .facility-card .f-summary td:nth-child(2)::before { content: "納骨タイプ"; }
  .facility-card .f-summary td:nth-child(3)::before { content: "年間管理費"; }

  /* 基本情報は th/td を縦積みにする */
  .facility-card .f-meta table,
  .facility-card .f-meta tbody,
  .facility-card .f-meta tr,
  .facility-card .f-meta td { display: block; width: auto; }
  .facility-card .f-meta tr {
    border-bottom: 1px solid var(--e-line-soft);
    padding: .5em 0;
  }
  .facility-card .f-meta tr:last-child { border-bottom: none; }
  .facility-card .f-meta td { border-bottom: none; padding: .15em 0; }
  .facility-card .f-meta td:first-child {
    width: auto;
    color: var(--e-accent);
    font-size: .98rem;
    white-space: normal;
  }

  .f-cta { padding: 15px 16px; }
  .f-cta .wp-block-button__link { font-size: 1.12rem; }
  .callout { padding: 4px 16px 15px; }
}

/* --------------------------------------------------------------------------
   施設名のヨミ（ふりがな）
   ruby/rt は文字が半分以下に縮むため、60代以上の読者には読めない。
   名前の上に独立した行として、本文と同等のサイズで置く。
   -------------------------------------------------------------------------- */
.facility-card .f-name .f-yomi {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--e-ink-sub);
  letter-spacing: .08em;
  line-height: 1.7;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .facility-card .f-name .f-yomi { font-size: .98rem; letter-spacing: .04em; }
}

/* --------------------------------------------------------------------------
   あなたにピッタリの永代供養診断（[eitai_shindan] ／ 子テーマの inc/shindan.php）

   ブログパーツの中に入るため、SWELLのボタン・見出しの既定値に負けないよう
   色と字送りをすべて明示する。主読者が60代以上なので、選択肢は
   「指1本で確実に押せる大きさ」を優先し、1行あたりの文字を短く保つ。

   結果は「あなたは○○です」と1つに決めない。
   候補を並べ、確認することを渡すところまでが診断の役目なので、
   見出しより **候補のリストと確認リスト** が読まれる作りにしてある。
   -------------------------------------------------------------------------- */
/* **hidden が効かないのを直す。**
   SWELLは .post_content の button と a に display を当てているため、
   hidden 属性（UA側の [hidden]{display:none}）に勝ってしまう。
   その結果「前の質問に戻る」「最初からやり直す」などが
   隠れているはずの場面でも出ていた。div・p・section は影響を受けない。 */
.eitai-shindan [hidden] { display: none !important; }

.eitai-shindan {
  background: var(--e-accent-weak);
  border: 2px solid var(--e-accent-line);
  border-radius: var(--e-radius);
  padding: 24px;
  margin: 0 0 40px;
  color: var(--e-ink);
}

/* ── 入口 ── */
.eitai-shindan .es-intro { text-align: center; }
.eitai-shindan .es-title {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--e-ink);
  margin: 0 0 10px;
  padding: 0;
  border: none;          /* SWELLのh3装飾を消す */
  background: none;
}
.eitai-shindan .es-title::before,
.eitai-shindan .es-title::after { content: none !important; }
.eitai-shindan .es-title:focus { outline: none; }
.eitai-shindan .es-note {
  font-size: 1rem;
  color: var(--e-ink-sub);
  margin: 0 0 18px;
  line-height: 1.8;
  text-align: left;
}
.eitai-shindan .es-startwrap { text-align: center; }
.eitai-shindan .es-start {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  background: var(--e-accent);
  color: var(--e-white);
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 0 #24402e;
}
.eitai-shindan .es-start:hover {
  background: #2b4835;
  box-shadow: 0 0 0 transparent;
  transform: translate3d(0, 4px, 0);
}

/* ── 進み具合 ── */
.eitai-shindan .es-bar {
  height: 6px;
  background: var(--e-accent-weak);
  border: 1px solid var(--e-accent-line);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 12px;
}
.eitai-shindan .es-bar-in { display: block; height: 100%; background: var(--e-accent); }

/* ── 質問 ── */
.eitai-shindan .es-panel { background: var(--e-white); border-radius: var(--e-radius); padding: 22px 20px; }
.eitai-shindan .es-qnum {
  display: inline-block;
  background: var(--e-accent);
  color: var(--e-white);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 13px;
  margin: 0 0 10px;
}
.eitai-shindan .es-qtext {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 8px;
  color: var(--e-ink);
}
.eitai-shindan .es-qtext:focus { outline: none; }
/* 質問のすぐ下に置く補助の一文。答え方の迷いはここで消す */
.eitai-shindan .es-qhelp {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--e-ink-sub);
  margin: 0 0 14px;
}
.eitai-shindan .es-opts { display: grid; gap: 12px; }
.eitai-shindan .es-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--e-white);
  border: 2px solid var(--e-accent-line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--e-ink);
  line-height: 1.6;
}
.eitai-shindan .es-opt:hover,
.eitai-shindan .es-opt:focus-visible {
  background: var(--e-accent-weak);
  border-color: var(--e-accent);
}
/* 複数選べる質問は、押した選択が残る。チェックの有無で分かるようにする */
.eitai-shindan .es-opt[aria-pressed="true"] {
  background: var(--e-accent-weak);
  border-color: var(--e-accent);
}
.eitai-shindan .es-opt[aria-pressed="true"] .es-opt-main::before {
  content: "\2714\FE0E\3000";
  color: var(--e-accent);
}
.eitai-shindan .es-opt-main {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--e-ink);
}
.eitai-shindan .es-opt-sub {
  display: block;
  font-size: .98rem;
  color: var(--e-ink-sub);
  margin-top: 2px;
  line-height: 1.6;
}
/* 質問の下に置く注記（合祀の説明など） */
.eitai-shindan .es-qnote {
  font-size: .98rem;
  line-height: 1.75;
  color: var(--e-ink-sub);
  margin: 14px 0 0;
  padding-left: 1em;
  text-indent: -1em;
}
.eitai-shindan .es-nextwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}
.eitai-shindan .es-next {
  flex: 1 1 240px;
  background: var(--e-accent);
  color: var(--e-white);
  border: none;
  border-radius: 8px;
  padding: 13px 20px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.eitai-shindan .es-next:disabled {
  background: #cfc9bd;
  color: #fff;
  cursor: default;
}
/* 「まだ選べない」まま進めるようにする。選ばせるために止めない */
.eitai-shindan .es-skip {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 1rem;
  color: var(--e-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* ── 結果 ── */
.eitai-shindan .es-r { border-top: 5px solid var(--e-accent); }
.eitai-shindan .es-rlabel {
  display: inline-block;
  background: var(--e-accent);
  color: var(--e-white);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 2px 13px;
  margin: 0 0 10px;
}
.eitai-shindan .es-rhead {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--e-ink);
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
}
.eitai-shindan .es-rhead::before,
.eitai-shindan .es-rhead::after { content: none !important; }
.eitai-shindan .es-rhead:focus { outline: none; }
.eitai-shindan .es-rlead { font-size: 1.05rem; line-height: 1.85; margin: 0 0 18px; color: var(--e-ink); }
/* 市内に候補が無かったときだけ出す。近隣を黙って混ぜない代わりの案内 */
.eitai-shindan .es-rwiden {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--e-warn);
  background: #fdf6e8;
  border: 1px solid #e6d3ad;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
}
.eitai-shindan .es-rsec { margin: 0 0 18px; }
.eitai-shindan .es-rsec-t {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--e-accent);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--e-accent-line);
}
.eitai-shindan .es-cands,
.eitai-shindan .es-checks { margin: 0; padding-left: 1.3em; }
.eitai-shindan .es-cands li { margin: .6em 0; line-height: 1.7; }
.eitai-shindan .es-checks li { margin: .5em 0; line-height: 1.8; font-size: 1.03rem; }
.eitai-shindan .es-cand-name { display: block; font-size: 1.08rem; font-weight: 700; color: var(--e-ink); }
/* 掲載件数は候補名の下に小さく。件数が無い記事では出さない */
.eitai-shindan .es-cand-count {
  display: block;
  font-size: .96rem;
  color: var(--e-ink-sub);
  line-height: 1.6;
  margin-top: 2px;
}
.eitai-shindan .es-rnote br { content: ""; display: block; height: .5em; }
.eitai-shindan .es-rnote {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--e-ink);
  background: var(--e-card);
  border: 1px solid var(--e-line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.eitai-shindan .es-rclose { font-size: 1.05rem; line-height: 1.8; margin: 0; color: var(--e-ink); }

/* ── 結果のうしろ（掲載施設へ ＋ 相談） ── */
.eitai-shindan .es-ract { display: grid; gap: 10px; margin-top: 18px; }
/* 「掲載施設を比較する」が結果からの本線。LINEの緑とは役割が違うので白地＋緑枠にする */
.eitai-shindan .es-jump {
  display: block;
  text-align: center;
  background: var(--e-white);
  color: var(--e-accent) !important;
  border: 2px solid var(--e-accent);
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none !important;
}
.eitai-shindan .es-jump:hover { background: var(--e-accent-weak); }
.eitai-shindan .es-ract-lead {
  font-size: 1rem;
  color: var(--e-ink-sub);
  text-align: center;
  margin: 8px 0 0;
}
.eitai-shindan .es-line-slot { margin: 0 0 2px; }
.eitai-shindan .es-line-slot .swell-block-button { margin: 0 !important; }
/* ボタンの下の一言（ブログパーツ5151の中の段落）。
   施設カードのCTAの「年中無休・9〜20時」と同じ扱いにする。
   段落のままだと本文の大きさで左に付き、ボタンと繋がって見えない */
.eitai-shindan .es-line-slot .cta-sub {
  margin: 6px 0 0;
  text-align: center;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--e-ink-sub);
}
.eitai-shindan .es-line { padding-top: 9px !important; padding-bottom: 10px !important; }
.eitai-shindan .es-line-main { display: block; font-size: 1.12rem; line-height: 1.5; }
.eitai-shindan .es-line-msg { font-weight: 700; color: var(--e-ink); }
.eitai-shindan .es-line-note {
  font-size: .96rem;
  line-height: 1.7;
  color: var(--e-ink-sub);
  margin: 0;
}
.eitai-shindan .es-caution {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--e-ink-sub);
  margin: 16px 0 0;
}
.eitai-shindan .es-caution-last { margin-top: 6px; }
.eitai-shindan .es-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.eitai-shindan .es-back,
.eitai-shindan .es-reset {
  background: none;
  border: none;
  padding: 6px 2px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--e-accent);
  text-decoration: underline;
  cursor: pointer;
}
.eitai-shindan .es-noscript { font-size: 1rem; color: var(--e-ink); margin: 14px 0 0; }

@media (max-width: 600px) {
  .eitai-shindan { padding: 18px 14px; }
  .eitai-shindan .es-panel { padding: 18px 14px; }
  .eitai-shindan .es-title { font-size: 1.3rem; }
  .eitai-shindan .es-qtext { font-size: 1.15rem; }
  .eitai-shindan .es-rhead { font-size: 1.2rem; }
  .eitai-shindan .es-next { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   記事内のナビゲーションボタン（近隣エリア・県一覧・タイプ別へのリンク）
   クラスを付けないとSWELLの既定色（ほぼ黒）で出る。
   LINEの緑は「問い合わせる」ためのもの。ここは「別のページへ行く」ためのボタンなので、
   白地＋緑の枠にして役割を分ける。
   -------------------------------------------------------------------------- */
.eitai-btns { gap: 10px; }
/* 1つしかないときは中央に。左端に1つだけ残ると、押し忘れのように見える */
.eitai-btns:has(.wp-block-button:only-child) { justify-content: center; }
.eitai-btns .wp-block-button__link {
  background: var(--e-white) !important;
  color: var(--e-accent) !important;
  border: 2px solid var(--e-accent-line) !important;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 9px 18px;
  text-decoration: none;
  box-shadow: none !important;
}
.eitai-btns .wp-block-button__link:hover {
  background: var(--e-accent-weak) !important;
  border-color: var(--e-accent) !important;
}

/* --------------------------------------------------------------------------
   CTA（電話＋LINE。ブログパーツの中身）

   ボタンの中は**1行だけ**にする。アイコンと、電話番号／文言のみ。
   受付時間はボタンの外（下）に小さく出す。
   ボタンに3行入れていたときは1組86〜101pxあり、記事に15箇所あるため嵩んでいた。

   主読者は60代以上で、LINEより電話のほうが確実な方が一定数いる。
   どちらか一方を選ばせず、同じ大きさで横に並べる。
   -------------------------------------------------------------------------- */
.cta-row,
.cta-row > .wp-block-group__inner-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin: 0;
}
.cta-row > *,
.cta-row > .wp-block-group__inner-container > * { flex: 1 1 240px; margin: 0 !important; }

/* 1列＝ボタン＋そのボタンの受付時間。
   受付時間を2つまとめて下に置くと、縦に積んだときに
   電話の受付時間がLINEボタンの下に出てしまう */
.cta-col,
.cta-col > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  /* wrap が残っていると、高さの決まった場所（比較表のセル）で
     ボタンと受付時間が横に折り返してしまう */
  flex-wrap: nowrap;
  margin: 0 !important;
}
.cta-col .swell-block-button { flex: none; }
.cta-row .swell-block-button { margin: 0 !important; display: flex; }

/* 2つのボタンの中身を同じ形にそろえる（アイコン＋文字、横並び、中央） */
.cta-btn,
.cta-row .swell-block-button__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px 12px !important;
  border-radius: 6px;
  text-decoration: none !important;
  line-height: 1.3;
}
.cta-row .swell-block-button__link > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* 文字の大きさはリンク側にも置く。ブロックエディタで作り直して
   cta-btn-txt の span が消えても、電話番号と同じ大きさのままになる */
.cta-row .swell-block-button__link {
  font-size: 1.3rem;
  font-weight: 700;
}
/* 電話番号とLINEの文言は同じ大きさ。番号を下げると読みにくくなるためLINE側を上げている */
.cta-btn-txt {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 編集画面でボタンの文字を打ち直すと、エディタがそのときの背景色や文字の大きさを
   span に書き写して残すことがある（文字の一部だけ紺色になる等）。
   cta-btn-txt の中の span はこちらで書いたものではないので、まとめて打ち消す */
.cta-btn-txt span {
  background: none !important;
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}
/* 電話のアイコンはLINEアイコンと同じ大きさにする。
   SWELLはアイコンの大きさ（ボタン設定の1.3em）を font-size と 幅の両方に掛けるので、
   こちらも同じように二重に掛ける。1.3rem だと約21pxで、LINE側の約29pxには届かない */
.cta-ico {
  font-size: 1.3em;
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: currentColor;
}
/* SWELLのアイコン（icon-line など）に差し替えても、電話側のアイコンと大きさがそろうようにする。
   SWELLのボタンは data-has-icon のとき自前で gap を持つので、そこは邪魔しない */
.cta-row .swell-block-button__link [class^="icon-"],
.cta-row .swell-block-button__link [class*=" icon-"] {
  font-size: 1.15em;
  line-height: 1;
  flex: none;
}

/* 電話はLINEの緑と区別するため主調色にする */
/* 電話はLINEの緑と区別する。
   以前は主調色の濃緑にしていたが、隣がLINEの鮮やかな緑、地が薄緑のカードなので
   沈んで「押せるもの」に見えなかった。緑の反対側の色にして、ボタンとして立たせる。
   色を変えるときは :root の --e-tel と --e-tel-dark だけ直せば済む */
.cta-tel {
  background: var(--e-tel);
  color: #fff !important;
  box-shadow: 0 4px 0 var(--e-tel-dark);
}
.cta-tel:hover {
  background: var(--e-tel-dark);
  box-shadow: 0 0 0 transparent;
  transform: translate3d(0, 4px, 0);
}

/* 受付時間はボタンの外。それぞれのボタンの真下に来るよう、同じ幅の配分にする */
/* CTAの上に置く1行。何のための窓口かを示す（相談ボタンと見た目が同じため）。
   本文ではなくボタンの添え書きなので、他の記事の同じ位置と同じ大きさにそろえる。
   段落の下余白は必ず0にする。空くとボタンから離れて、別の文に見える */
.cta-lead {
  text-align: center;
  font-size: .9rem;       /* 既存記事と同じ14.4px。rootは16pxなので .9rem */
  line-height: 2.22;      /* 既存記事と同じ32px相当 */
  margin: 0 !important;
}
.cta-note {
  margin: 5px 0 0 !important;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--e-ink-sub);
}

/* 比較表のセルは220px。横に並べると溢れるので、表の中だけは縦に積む */
.cx-table .cta-row > *,
.cx-table .cta-row > .wp-block-group__inner-container > * { flex: 1 1 100%; }
.cx-table .cta-btn-txt { font-size: 1.15rem; }
/* --------------------------------------------------------------------------
   比較表のセルからはみ出さないようにする
   SWELL は本文の表に table-layout: fixed を当てるため、列幅220pxが固定される。
   中身が縮まないとセルの外へ出る（隣の列に重なる）。原因は2つだった。
   -------------------------------------------------------------------------- */
/* ① タグ。nowrap のままだと長い説明が1行で伸びきる。
      電話番号と違い途中で折り返して困る値ではないので、折り返しを許す */
.cx-table .cx-tag { white-space: normal; }

/* ② 資料請求のボタン。flex の既定（min-width:auto）では中身より小さくなれない */
.cx-table .cta-row,
.cx-table .cta-row > *,
.cx-table .cta-row > .wp-block-group__inner-container,
.cx-table .cta-row > .wp-block-group__inner-container > *,
.cx-table .cta-col,
.cx-table .cta-col > .wp-block-group__inner-container { min-width: 0; }

/* 220pxのセルに収まるよう、左右の余白とアイコンとの間隔だけ詰める。
   文字は 0.95rem を下回らせない（主読者が60代以上のため） */
.cx-table .cta-btn,
.cx-table .cta-row .swell-block-button__link {
  padding-left: 6px !important;
  padding-right: 6px !important;
  gap: 5px;
}
.cx-table .cta-btn-txt { font-size: 1.05rem; }


@media (max-width: 600px) {
  /* 横に2つ並べると1つあたりが狭くなり、番号が読めなくなる。縦に積む */
  .cta-row > *,
  .cta-row > .wp-block-group__inner-container > * { flex: 1 1 100%; }
  /* 縦に積んだぶん幅に余裕ができるので、番号と文言を少し大きくする */
  .cta-btn-txt { font-size: 1.4rem; }
}