/*
Theme Name: 福岡 永代供養・納骨堂ナビ
Theme URI: https://example.com/
Author: 福岡 永代供養・納骨堂ナビ 制作チーム
Author URI: https://example.com/
Description: 福岡県内の墓じまい・永代供養・樹木葬・納骨堂の情報をエリアと条件から探せる、ゼロから制作したオリジナルWordPressテーマです。和紙のような生成り色の背景に、御朱印の朱色と苔むした寺院の庭を思わせる深緑を差し色に使い、明朝体の見出しとゴシック体の本文で、シニア世代にも読みやすいデザインにしています。
Version: 1.3.73
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hjnavi
*/

/* =========================================================
   0. カスタムプロパティ(色・フォント・余白などの基本設定)
   ========================================================= */
:root {
  /* 色 */
  --color-bg: #EDEAE1;          /* 生成り色(和紙) */
  --color-bg-soft: #F6F4EE;     /* カード等の少し明るい生成り */
  --color-bg-strong: #E3DECE;   /* セクションの区切りに使う濃いめの生成り */
  --color-text: #2C2620;        /* 本文色(高コントラストの濃い墨色) */
  --color-text-soft: #55503F;   /* 補足テキスト */
  --color-primary: #A63D2F;     /* 御朱印の朱色 */
  --color-primary-dark: #832F24;
  --color-secondary: #5F7052;   /* 苔むした深緑 */
  --color-secondary-dark: #495A3E;
  --color-border: #D8D2C0;
  --color-white: #FFFFFF;

  /* フォント */
  --font-heading: "Shippori Mincho", serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;

  /* サイズ */
  --container-width: 1140px;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(44, 38, 32, 0.08);
}

/* =========================================================
   1. リセット・ベース
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%; /* 18px相当。文字を大きめに */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}
a:hover { opacity: .75; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 .7em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.4em; }

.container {
  width: 92%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-secondary);
  color: #fff;
  padding: 12px 20px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* =========================================================
   2. 共通パーツ(ボタン・バッジ・タグ・セクション見出し)
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  padding: .8em 1.8em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); opacity: 1; }
.btn-outline {
  background: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary-dark);
}
.btn-outline:hover { background: var(--color-secondary); color: #fff; opacity: 1; }

.badge {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  padding: .3em .9em;
  border-radius: 999px;
  background: var(--color-bg-strong);
  color: var(--color-text-soft);
  margin: 0 .4em .4em 0;
}
.badge-area { background: var(--color-secondary); color: #fff; }
.badge-type { background: var(--color-primary); color: #fff; }
/* 募集状況のラベル。.badge のサイズ・角丸・余白をそのまま継ぎ、背景色だけ変える。
   別定義にすると、将来 .badge を触ったときにここだけ取り残される。
   朱(--color-primary)は「相談する」ボタンなど行動を促す色に使っているため避け、
   それより暗く彩度の低い蘇芳と琥珀にしている(白文字とのコントラストは 8.47:1 / 5.05:1)。 */
.badge-status--closed { background: #8C2A2A; color: #fff; }
.badge-status--few    { background: #8A6A1F; color: #fff; }
.badge-category {
  background: transparent;
  color: var(--color-secondary-dark);
  border: 1px solid var(--color-secondary);
}
.badge-category:hover { background: var(--color-secondary); color: #fff; opacity: 1; }

.post-categories { margin: .6em 0 0; }

.section-heading {
  text-align: center;
  margin-bottom: 2.4rem;
}
.section-heading .en-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .28em;
  color: var(--color-secondary);
  font-weight: 700;
  margin-bottom: .6em;
}
.section-heading h2 {
  margin-bottom: .4em;
}
.section-heading .lead {
  color: var(--color-text-soft);
  font-size: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .section-heading .lead { max-width: 480px; font-size: 1.05rem; }
}
.section-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--color-primary);
  margin: 1.1em auto 0;
}

section.block { padding: 4.6rem 0; }
section.block.bg-soft { background: var(--color-bg-soft); }
section.block.bg-strong { background: var(--color-bg-strong); }

/* =========================================================
   3. ヘッダー
   ========================================================= */
.site-header {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 500;
}
/* ヘッダーの行だけは他セクションより左右の余白を狭くし、
   ロゴ・ナビをそれぞれ画面端に近づけて左寄せの印象を強める。
   width を92%より広げることで、1200px程度の画面幅でも
   実際に余白が縮まるようにしている(max-widthだけでは
   92%が先に効く画面幅では変化しないため)。 */
.site-header .container {
  width: 96%;
  max-width: 1320px;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  padding: 1.1rem 0;
}
.site-branding { display: flex; align-items: center; gap: .8rem; }
.site-branding img { max-height: 52px; width: auto; }

.site-logo-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
}
.site-logo-mark {
  flex-shrink: 0;
  display: flex;
  line-height: 0;
}
.site-logo-text {
  display: flex;
  flex-direction: column;
}
.site-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0;
  color: var(--color-secondary-dark);
  /* 文字間では折り返さず、header.php で入れた <wbr>(「福岡の」の直後)でのみ改行する */
  word-break: keep-all;
  line-break: strict;
}
.site-title-nowrap { white-space: nowrap; }
.site-description {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--color-text-soft);
  margin: .25em 0 0;
}

.menu-toggle {
  display: none;
  background: var(--color-secondary);
  border: none;
  color: #fff;
  width: 48px;
  height: 44px;
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
}

.primary-navigation ul {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}
.primary-navigation a {
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}

/* ==== 2026-08-25: PC表示でヘッダーナビ(トップ/施設を探すなど)の文字が
   個々のリンク内で2行に折り返される不具合を修正。原因はヘッダー全体の
   余白計算上、ナビの実際に必要な幅よりわずかに(数十px)狭い幅しか
   割り当てられず、flexboxのshrinkにより各リンクの表示幅が縮められた結果、
   日本語テキストが(単語区切りがないため)1文字単位で折り返されていたこと。
   .primary-navigation a に white-space: nowrap を指定し、リンクの文字が
   縮んで折り返されることを防いだ(ナビ全体が必要とする幅はheader内の
   余白に収まる範囲だったため、これでコンテナからはみ出すことはない)。
   モバイル版(@media max-width:600px)は元々1カラムのブロック表示なので影響なし。 */
.primary-navigation a:hover,
.primary-navigation .current-menu-item > a { color: var(--color-primary); opacity: 1; }

/* 相談フォームへのCTA。メニューの中ではなく外に置いてあるため、
   管理画面でメニューを登録しても導線は消えない(header.php 参照)。 */
.header-cta {
  flex-shrink: 0;
  font-size: .95rem;
  padding: .6em 1.4em;
  white-space: nowrap;
}

/* 1.3.66 (2026-09-21): ハンバーガーに切り替える幅を 820px → 1279.98px に。
   ヘッダー(ロゴ・ナビ6項目・相談ボタン)は横に約1410px要るのに、821〜1439px ではナビのまま
   並べていたため、1280/1366px のノートPCや iPad 横向きで「相談する」が画面の右外に押し出され、
   ページ全体が横にスクロールしていた(1280pxで128px、1024pxで380pxはみ出し)。
   ヘッダーの相談ボタンは施設ページの「常に見える相談の入口」(1.3.64)なので、見えないのは致命的。
   1279.98px にしているのは、エミュレーター等で幅が小数になっても 1280px 側と隙間ができないようにするため。 */
@media (max-width: 1279.98px) {
  .menu-toggle { display: block; }
  .primary-navigation {
    display: none;
    width: 100%;
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
  }
  .primary-navigation.is-open { display: block; }
  .primary-navigation ul { flex-direction: column; gap: 0; padding: .6rem 0; }
  .primary-navigation li { border-bottom: 1px dashed var(--color-border); }
  .primary-navigation a { display: block; padding: .9rem 0; }
  .site-header-inner { flex-wrap: wrap; gap: .6rem; }

  /* 1行目に「ロゴ / CTA / ハンバーガー」を並べ、開閉するメニューを
     2行目へ送る。CTAはハンバーガーの内側に隠さず、常に見える位置に置く。 */
  .site-branding { order: 1; min-width: 0; flex: 1 1 auto; }
  .header-cta { order: 2; font-size: .82rem; padding: .55em 1em; }
  .menu-toggle { order: 3; }
  .primary-navigation { order: 4; }
}

@media (max-width: 400px) {
  .header-cta { font-size: .78rem; padding: .5em .8em; }
}

/* 1.3.66: 1280〜1439px はナビを横に並べたまま、間隔と文字を少し詰めて相談ボタンまで収める。
   1280px で相談ボタンの右に26pxの余白が残ることを確認した。1440px 以上は従来どおり。 */
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-header-inner { gap: 1rem; }
  .primary-navigation ul { gap: 1rem; }
  .primary-navigation a { font-size: .9rem; }
  .site-title { font-size: 1.2rem; }
}

/* =========================================================
   4. ヒーロー(トップページ)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding: .8rem 0 .7rem;
  text-align: center;
}

/* 背景をゆっくり拡大・微移動させるKen Burns効果。
   2026-08-23: 背景を京都の写真(Unsplash直リンク)から、自前で生成した青海波の
   和柄画像に差し替えた。福岡のサイトに京都の風景が出ていたことと、外部ドメインへの
   直リンクだったことを解消するため。
   2026-08-25: 運営者が用意した、福岡市内を見下ろす墓地の展望テラスの写真に差し替えた。
   画像はメディアライブラリに置いている(media ID 817)。
   2026-09-21 (1.3.65): やーまんが用意した、本堂の縁側から街と海を望む納骨堂と合掌する女性の画像(1920x819、
   media ID 1122、文字なし版)に差し替えた。左半分が空と街並みで明るく、H1 と検索カードがその上に載る。
   animation-direction: alternate で拡大→縮小を往復させることで、
   ループの継ぎ目(瞬間的なリセット)が出ないようにしている。
   transform を使うことで、テキストなど他の要素には影響しない。 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/wp-content/uploads/2026/09/hero_temple_pc.jpg');
  background-size: cover;
  background-position: 50% 50%;
  animation: hjnaviHeroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hjnaviHeroKenBurns {
  0%   { transform: scale(1);     background-position: 50% 50%; }
  100% { transform: scale(1.08);  background-position: 47% 45%; }
}

/* 生成り色の薄いオーバーレイ(常時)。文字が大きくなっても読みやすいコントラストを保つ土台。
   0.75 では上半分が灰色の帯に見えて写真がほとんど分からなかったため 0.55 まで下げた。
   スマホ幅ではさらに 0.45 まで下げる(ファイル末尾の600px以下のブロック)。
   2026-09-21 (1.3.65): 本堂の画像は見出しの裏(左上)が元から淡い空で、0.55 だと右側の本堂と女性まで白く霞んだ。
   0.42 に下げても見出し(深緑)と空のコントラストは保てることを 1280px 幅で確認した。 */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(237, 234, 225, 0.42);
}

/* 光がふわっと明滅する、控えめなオーバーレイ。
   常時の生成りオーバーレイの上に重なるため、明滅しても文字のコントラストを損なわない。 */
.hero-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%);
  animation: hjnaviHeroLightPulse 10s ease-in-out infinite;
}
@keyframes hjnaviHeroLightPulse {
  0%, 100% { opacity: .08; }
  50%      { opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .hero-light { animation: none; opacity: .12; }
}

.hero > .container {
  position: relative;
  z-index: 3;
}

.hero-content {
  max-width: 920px;
  margin: 0 auto;
}

/* サイト最大のキャッチコピー(2行固定)。
   .hero-line に white-space: nowrap を掛けて、2行がそれぞれ内部で
   自動折り返しされないようにする。あわせて上限フォントサイズを、
   1200px幅のPC画面で2行目(一番長い行)がコンテナ幅(920px)に
   収まる範囲まで抑えつつ、1200x800px程度の画面でも検索フォームの
   送信ボタンまでスクロールなしで見えるよう、縦方向の占有を控えめにしている。
   768px以下ではフォントを十分小さくしたうえで nowrap を解除し、
   画面幅からのはみ出しではなく通常の折り返しでレイアウトを保つ
   (ただしフォントサイズ自体をスマホ幅でも収まる大きさまで下げているため、
   実際には2行のまま表示される)。 */
.hero-heading {
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  line-height: 1.25;
  margin-bottom: .2em;
  /* 折り返すときに各行の長さを揃える。未対応のブラウザでは無視されるだけで、
     従来どおりの折り返しになる(Safariは17.4以降で対応)。 */
  text-wrap: balance;
}
.hero-line {
  display: block;
  white-space: nowrap;
}
/* 2026-08-24: SEO監査でH1が冗長と指摘されたため、PC/SP別文言の二重出力を
   やめ、1本の文言 + レスポンシブbr(600px以下でだけ改行)に統一した。 */
.hero-break { display: none; }
.hero-heading em {
  font-style: normal;
  color: var(--color-primary);
}
.hero .hero-lead {
  font-size: 1rem;
  color: var(--color-text-soft);
  max-width: 640px;
  margin: 0 auto .6em;
  text-wrap: balance;
}
/* 日本語は語の区切りが無いため、既定では「樹木/葬」のように語の途中で
   折り返されてしまう。折り返しの指定を2種類に分けている。

   リード文は「・」「、」「。」が十分にあるので keep-all を使う。
   区切り以外では折らなくなり、Safari(iPhone)を含む全ブラウザで効く。
   ただし区切りの無い長文が来るとはみ出すため(実測で579px超過した)、
   overflow-wrap: anywhere を併せて安全弁にしている。これがあると
   1行に収まらないときだけ通常の折り返しに戻り、はみ出しは起きない。
   カスタマイザーから文言を変えられる項目なので、この保険が要る。 */
.hero .hero-lead {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 見出しは「今のお墓の状況を整理する」のように区切り記号を持たないものが
   多く、keep-all では助けにならない。文節を推定して折る auto-phrase を使う。
   対応は Chrome / Edge 119 以降で、Safari・Firefox は指定を無視するだけ
   (従来どおりの折り返しに戻り、崩れはしない)。 */
.hero-heading,
.flow-step h3,
.post-card-title {
  word-break: auto-phrase;
}

@media (max-width: 768px) {
  .hero-line {
    white-space: normal;
  }
  .hero-heading {
    font-size: clamp(0.7rem, 4.4vw, 1.6rem);
  }
}

/* =========================================================
   5. 検索フィルター(条件から探す)
   ========================================================= */
.search-filter {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .6rem 1.2rem;
  text-align: left;
  max-width: 920px;
  margin: 0 auto;
}
.search-filter .filter-group { margin-bottom: .45rem; }
.search-filter .filter-group:last-of-type { margin-bottom: 0; }
.filter-group legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  padding: 0 0 .25rem;
  color: var(--color-secondary-dark);
}
/* エリアの「福岡市」「福岡市外」の小見出し。legend より一段弱くし、
   グループの区切りだけが分かる程度にとどめる。 */
.tag-group-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text-soft);
  margin: .5rem 0 .3rem;
}
.filter-group .tag-group-label:first-of-type { margin-top: .2rem; }
.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.tag-options input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tag-options label {
  position: relative;
  display: inline-block;
  padding: .35em .85em;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  transition: padding-left .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
/* 選択(チェック)すると、御朱印帳に判を押すイメージの朱色の印を左側に表示 */
.tag-options label::before {
  content: "印";
  position: absolute;
  z-index: 2;
  left: 2.14em;
  top: 50%;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  border-radius: 50%;
  background-color: #A63D2F; /* 朱色(判子マーク)。--color-primary と同じ値を直接指定 */
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--font-heading);
  font-size: .7em;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 1px 4px rgba(44, 38, 32, .45);
  opacity: 0;
  transform: translateY(-50%) scale(0) rotate(-14deg);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease;
  pointer-events: none;
}
.tag-options input[type="checkbox"]:checked + label {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  padding-left: 3.5em;
  padding-right: 1.5em;
}
.tag-options input[type="checkbox"]:checked + label::before {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-14deg);
}
.tag-options input[type="checkbox"]:focus-visible + label {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.search-filter .filter-submit {
  text-align: center;
  margin-top: .45rem;
}
/* 「この条件で探す」ボタン内に表示するリアルタイム該当件数 */
.filter-count {
  margin-left: .15em;
  font-variant-numeric: tabular-nums;
}

.active-filters {
  max-width: 920px;
  margin: 1.4rem auto 0;
  text-align: center;
  color: var(--color-text-soft);
  font-size: .95rem;
}
.active-filters a { font-weight: 700; }

/* =========================================================
   6. お墓の種類 / エリア カード
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* 中央揃えをやめて左揃えにした。日本語の中央揃えは最終行だけが数文字残って
   不格好になり、カードごとに行末の位置も揃わないため。
   align-items も center のままだと子要素が中身の幅に縮んで中央へ寄る。 */
.grave-type-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-soft) 100%);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) + 6px);
  padding: 0;
  box-shadow: var(--shadow);
  text-align: left;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.grave-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(44, 38, 32, 0.14);
}
.grave-type-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  margin-bottom: 1.5em;
}
/* 「今のお墓の状況を整/理する」のように意味の切れ目を無視した位置で折れるのを避ける。
   未対応のブラウザ(Safari 17.4未満など)では無視され、従来の折り返しに戻るだけ。 */
.grave-type-card h3,
.flow-step h3 { text-wrap: balance; }

.grave-type-card h3 {
  margin: 0 1.6rem .7em;
  padding-bottom: .6em;
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}
.grave-type-card p { font-size: .96rem; color: var(--color-text-soft); margin: 0 1.6rem; }
/* 説明文の長さがカードごとに違ってもリンクの高さが揃うよう、下端に固定する。
   本文と同じ左端に揃えたいので、text-align も明示しておく
   (以前はカード全体の中央揃えをそのまま継いでいた)。 */
.grave-type-card .card-more {
  margin-top: auto;
  margin-bottom: 0;
  padding: 1.4em 1.6rem 1.8rem;
  text-align: left;
}
.grave-type-card .card-more a {
  display: inline-block;
  padding: .55em 1.3em;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-size: .9rem;
  transition: background .2s ease, color .2s ease;
}
.grave-type-card .card-more a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* エリアカードのグループ見出し(トップページ・エリア一覧ページ共通) */
.area-group-heading {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin: 1.6rem 0 .7rem;
}
.area-group-heading:first-of-type { margin-top: 0; }
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
@media (max-width: 820px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
.area-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.area-card:hover { border-color: var(--color-secondary); color: var(--color-secondary-dark); opacity: 1; }
.area-card .count {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--color-text-soft);
  font-weight: 400;
  margin-top: .4em;
}

/* =========================================================
   7. 墓じまいの流れ(ステップ)
   ========================================================= */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  counter-reset: step;
}
@media (max-width: 900px) { .flow-steps { grid-template-columns: 1fr; } }

.flow-step {
  background: var(--color-white);
  border-radius: var(--radius);
  border-top: 5px solid var(--color-secondary);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem 1.7rem;
  position: relative;
}
.flow-step .step-number {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: .3em;
  display: block;
}
/* 既定でも左揃えだが、日本語は分かち書きしないため行末が揃って両端揃えに
   見える。意図を明示しておく。 */
.flow-step { text-align: left; }
.flow-step h3 { margin-bottom: .5em; font-size: 1.25rem; }
/* 4枚を横に並べるときだけ、見出しに2行分の高さを確保する。
   見出しが1行のカード(「改葬許可を申請する」)だけ本文が34px高い位置から
   始まり、横に並んだときに本文の頭がそろわないため。
   1列に積む900px以下では、そろえる相手がいないぶん余白が浮くので掛けない。 */
@media (min-width: 901px) {
  .flow-step h3 { min-height: 3em; }   /* line-height 1.5 × 2行 */
}
.flow-step p { font-size: .95rem; color: var(--color-text-soft); margin-bottom: 0; }

/* =========================================================
   8. 施設カード・一覧
   ========================================================= */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
@media (max-width: 980px) { .facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .facility-grid { grid-template-columns: 1fr; } }

.facility-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.facility-card .thumb {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-strong) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-family: var(--font-heading);
}
.facility-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.facility-card .facility-body { padding: 1.4rem 1.3rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.facility-card h3 { font-size: 1.2rem; margin-bottom: .5em; }
.facility-card h3 a { color: var(--color-text); }
.facility-card .facility-meta {
  font-size: .92rem;
  color: var(--color-text-soft);
  margin: .6em 0 1em;
}
.facility-card .facility-meta li { list-style: none; margin: 0 0 .3em; }
.facility-card .facility-price {
  font-weight: 700;
  color: var(--color-primary);
}
.facility-card .badges { margin-bottom: .3em; }
.facility-card .card-actions {
  margin-top: auto;
  padding-top: .9em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em .9em;
}
.facility-card .more-link { font-weight: 700; }

/* 施設単体ページの「公式サイトを見る」ボタン */
.facility-website { margin: 1.6rem 0 .5rem; }
/* 施設ページ上段の相談ボタン(1.3.64)。下段 .facility-contact-cta と同じ導線を、費用表の直下にも置く */
.facility-contact-top { margin: 1rem 0 .5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.facility-contact-top-note { font-size: .85rem; color: var(--color-secondary-dark); }
.facility-website-link { display: inline-flex; align-items: baseline; gap: .5em; }
.facility-website-link::after {
  content: "↗";
  font-size: .9em;
}
.facility-website-note {
  font-size: .78rem;
  font-weight: 400;
  opacity: .85;
}

/* 施設詳細ページ */
.facility-single .facility-header { margin-bottom: 2.2rem; }
.facility-single .facility-thumb {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-strong);
}
.facility-single .facility-thumb img { width: 100%; height: 100%; object-fit: cover; }

.facility-detail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2rem 0;
}
.facility-detail-table th,
.facility-detail-table td {
  text-align: left;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
}
.facility-detail-table tr:last-child th,
.facility-detail-table tr:last-child td { border-bottom: none; }
.facility-detail-table th {
  width: 34%;
  background: var(--color-bg-soft);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-secondary-dark);
}
.facility-features { margin: 1.6rem 0; }
.facility-content { font-size: 1.05rem; }

.back-link { display: inline-block; margin-top: 1rem; font-weight: 700; }

/* =========================================================
   9. ページ共通・記事
   ========================================================= */
.page-header {
  text-align: center;
  padding: 3.4rem 0 1rem;
}
.page-header h1 { margin-bottom: .3em; }
.page-header .lead { color: var(--color-text-soft); }
.breadcrumb {
  display: block;
  font-size: .85rem;
  color: var(--color-text-soft);
  margin-bottom: 1rem;
}
.breadcrumb a { color: var(--color-text-soft); text-decoration: underline; }

/* 記事本文の見出し(和風テイスト。文章の区切りを分かりやすくする) */
.entry-content h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-secondary-dark);
  margin-top: 2.2em;
  margin-bottom: .8em;
  padding: .55em .8em;
  background: var(--color-bg-soft);
  border-left: 5px solid var(--color-secondary);
  border-radius: 0 6px 6px 0;
  scroll-margin-top: 90px; /* 追従ヘッダー分だけアンカー位置を下げる */
}
.entry-content h3 {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  color: var(--color-secondary-dark);
  margin-top: 1.8em;
  margin-bottom: .6em;
  padding-bottom: .25em;
  border-bottom: 2px dotted var(--color-border);
  scroll-margin-top: 90px;
}
.entry-content img { border-radius: var(--radius); margin: 1.2em 0; }
.entry-content ul, .entry-content ol { margin-bottom: 1.4em; }

/* --- 記事(投稿)単体ページ --- */
.container-narrow { max-width: 760px; }
.post-single-header { margin-bottom: .6rem; }
/* タイトル:生成り背景 + 朱色の縦帯で見出しらしく装飾 */
.post-single-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-secondary-dark);
  background: var(--color-bg-soft);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .7em .8em;
  margin: 0;
}
.post-single-header .post-meta {
  color: var(--color-text-soft);
  font-size: .9rem;
  margin: .9em 0 0;
}
.post-single-thumb {
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.6rem 0 2rem;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-strong);
}
.post-single-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- 目次(もくじ)ブロック --- */
.hjnavi-toc {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 1.1em 1.5em 1.2em;
  margin: 1.8em 0 2.2em;
}
.hjnavi-toc-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-secondary-dark);
  margin: 0 0 .5em;
}
.hjnavi-toc ol {
  margin: 0;
  padding-left: 1.4em;
}
.hjnavi-toc li { margin: .35em 0; line-height: 1.7; }
.hjnavi-toc a {
  color: var(--color-text);
  border-bottom: 1px solid transparent;
}
.hjnavi-toc a:hover {
  color: var(--color-primary);
  opacity: 1;
  border-bottom-color: currentColor;
}

.post-list-item {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--color-border);
}
.post-list-item h2 { font-size: 1.35rem; margin-bottom: .3em; }
.post-list-item .post-meta { font-size: .88rem; color: var(--color-text-soft); margin-bottom: .5em; }

/* --- 記事一覧(ブログ)のカードグリッド --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* カード全体が押せる。上部にはアイキャッチ、無ければカテゴリ色の帯が入る。
   以前あった border-top の苔緑のラインは、帯の色とぶつかるため外した。 */
.post-card {
  position: relative;               /* タイトルのリンクをカード全面へ広げる土台 */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* <article> を <a> で包むとカード内のリンクが入れ子になり不正なマークアップに
   なるため、タイトルのリンクを擬似要素でカード全面に広げてクリック領域にする。 */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* ホバーの表現は、実際にホバーできる環境に限る。スマホ・タブレットでは
   タップ後に :hover が残ることがあり、押していないカードのタイトルだけが
   朱色のまま表示される(初期表示から色が付いて見える)ため。 */
@media (hover: hover) {
  .post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(44, 38, 32, .16);
  }
  .post-card:hover .post-card-title a { color: var(--color-primary); }
}
/* キーボード操作でカード内のリンクに移ったときも、浮き上がりで位置が分かるようにする。 */
.post-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(44, 38, 32, .16);
}

.post-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-strong);
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* アイキャッチが無い記事の代わりに出すカテゴリ色の帯。
   現状は全記事がアイキャッチ未設定だが、あとから写真を入れれば
   自動的に画像へ切り替わる(template-parts/content.php 参照)。

   ベタ塗りの濃い色を100pxの高さで並べると一覧全体が重くなるため、
   薄い地に濃い文字を置く形にし、高さも44pxに抑えている。
   ラベルの左端はカード本文の左端(padding 1.3rem)に揃えている。 */
.post-card-band {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 1.3rem;
  background: var(--color-bg-strong);
}
.post-card-band-label {
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: inherit;
}
/* カテゴリごとの色。地は薄い版、文字は濃い版。
   朱系(--color-primary / --color-primary-dark)は「相談する」ボタンなど
   行動を促す色に使っているため、記事カードでは使わない。広い面積で
   同じ色を使うと押しどころがぼやけるため。

   緑は「墓じまい」の1色だけにした。深緑と苔緑を並べると区別が付かないため、
   「永代供養・納骨堂」を古代紫へ移している。
   数値は文字色の白背景基準のコントラスト。括弧内は実際の帯の上での値。
   いずれもWCAG AA(4.5:1)以上。 */
.post-card-band--hakajimai { background: #DDEBD6; color: #44573A; } /* 墓じまい:深緑 7.86:1 (6.34:1) */
.post-card-band--eitaikuyo { background: #DFD6EB; color: #5A4A6E; } /* 永代供養・納骨堂:古代紫 7.96:1 (5.67:1) */
.post-card-band--erabikata { background: #D0EEF1; color: #2F5A5E; } /* 施設の選び方:納戸 7.65:1 (6.26:1) */
.post-card-band--hiyou     { background: #F1D9D0; color: #6E4636; } /* 費用:蘇芳茶 8.10:1 (6.01:1) */
.post-card-band--area      { background: #F1E8D0; color: #7A6224; } /* エリア別:黄土 5.83:1 (4.78:1) */
.post-card-band--tetsuzuki { background: #DBE0E6; color: #52565A; } /* 手続き・書類:青鼠 7.40:1 (5.57:1) */
.post-card-band--default   { background: var(--color-bg-strong); color: var(--color-secondary-dark); }

.post-card-body {
  padding: 1.3rem 1.3rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* タイトルと抜粋は2行で固定する。1行で収まる記事が混ざっても高さが揃うよう、
   min-height に2行分を確保しておく。 */
.post-card-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .55em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}
.post-card-title a { color: var(--color-text); }
@media (hover: hover) {
  .post-card-title a:hover { color: var(--color-primary); opacity: 1; }
}
.post-card .entry-summary {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 0 0 1.1em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.8em * 2);
}
/* カード全体がリンクなので <span> で出している(入れ子リンクを避けるため)。
   見た目は従来のリンクと同じにして、押せることの手掛かりを残す。 */
.post-card .more-link {
  margin-top: auto;
  font-weight: 700;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .post-card { transition: none; }
  .post-card:hover,
  .post-card:focus-within { transform: none; }
}


/* --- 記事個別ページ下部の「同じカテゴリの記事」 --- */
.related-posts {
  margin: 3rem 0 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-border);
}
.related-posts-heading {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0 0 1.4rem;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 2.6rem 0 0;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-block;
  padding: .6em 1em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-white);
}
.pagination .current { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

/* =========================================================
   10. フッター
   ========================================================= */
.site-footer {
  background: var(--color-bg-strong);
  border-top: 1px solid var(--color-border);
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}
/* フッターは全体を左詰めにしている。中央揃えだと、箇条書きのウィジェットは
   行頭の点だけが左に残って文字が中央に寄り、他の要素とも軸がずれる。
   画面が狭いほどそのちぐはぐさが目立つため、スマホ幅でも左揃えのままにする
   (フッターの指定はメディアクエリの外にあり、全幅で同じ挙動になる)。 */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  font-size: .92rem;
}
/* 揃え方は .footer-inner から継ぐ。幅だけは中身に縮まないよう広げておく
   (見出しの下線など、あとで幅のある装飾を足したときに崩れないため)。 */
.footer-widgets {
  align-self: stretch;
}
.footer-widgets ul {
  padding-left: 1.2em;
  margin: .2em 0 0;
}
.footer-widgets li { margin: .25em 0; }
.footer-copyright {
  font-size: .85rem;
  color: var(--color-text-soft);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .8rem 1.6rem;
  margin: 0;
}
.footer-contact-link {
  font-size: .85rem;
  color: var(--color-text-soft);
  border-bottom: 1px dotted var(--color-text-soft);
}
.footer-contact-link:hover { color: var(--color-primary); }


/* --- フッターの「条件から探す」「お墓のタイプから探す」 --- */
/* 2026-08-23 追加。条件アーカイブ(/feature/*)への導線が
   サイト内に1本も無かったため、全ページの足元から張る。
   フッターの他の要素と同じく左揃え。件数はリンクの内側に置き、
   数字だけが折り返して迷子にならないようにしている。 */
.footer-taxonomy {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 3rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-border);
}
.footer-taxonomy-group { min-width: min(100%, 16rem); }
.footer-taxonomy-title {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text-soft);
  margin: 0 0 .6em;
}
.footer-taxonomy-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 0;
  padding: 0;
}
.footer-taxonomy-list a {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-size: .88rem;
  color: var(--color-text-soft);
  border-bottom: 1px dotted var(--color-text-soft);
}
.footer-taxonomy-list a:hover { color: var(--color-primary); }
.footer-taxonomy-count {
  font-size: .78rem;
  color: var(--color-text-soft);
  opacity: .75;
}
.footer-taxonomy-count::before { content: "("; }
.footer-taxonomy-count::after  { content: ")"; }


/* --- エリア一覧の冒頭に置く「このエリアのまとめ記事」への導線(1.3.49) --- */
/* 見出しと説明文のすぐ下。一覧(カード)の前に1行だけ置き、主役のカードを押し下げすぎない。 */
.area-guide {
  margin-top: 1.4rem;
  text-align: left;
}
.area-guide h2 {
  font-size: 1rem;
  margin: 0 0 .5em;
}
.area-guide .facility-related-articles { margin-bottom: 0; }

/* --- 記事下部の「条件から施設を探す」(1.3.55) --- */
.post-archive-links {
  margin: 2.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
.post-archive-links h2 {
  font-size: 1.05rem;
  margin: 0 0 .7em;
}

/* --- 一覧ページ下部の「選ぶときの目安」(1.3.53) --- */
/* カードの下に置く。件数はテンプレート側でその場で数えているので古くならない。 */
.term-summary {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.term-summary h2 {
  font-size: 1.05rem;
  margin: 0 0 .7em;
}
.term-summary-counts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: .6rem 0 0;
  padding: 0;
}
.term-summary-counts li {
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  padding: .35rem .8rem;
  font-size: .95rem;
}
.term-summary-note {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--color-text-soft);
}

/* --- 施設ページ下部の関連記事・同条件の施設 --- */
/* 相談CTAより下に置く。CTAが主目的なので、その上に回遊リンクを挟まない。 */
.facility-related {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
.facility-related h2 {
  font-size: 1.05rem;
  margin: 0 0 .7em;
}
.facility-related h2 + * { margin-top: 0; }
.facility-related-articles {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}
.facility-related-articles li { margin: 0 0 .55em; }
.facility-related-articles a {
  color: var(--color-secondary-dark);
  border-bottom: 1px solid var(--color-border);
}
.facility-related-articles a::before {
  content: "\203A";
  margin-right: .5em;
  color: var(--color-primary);
}
.facility-related-articles a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.facility-related-terms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
/* .badge の見た目を継いだリンク版。文字色と枠だけ変えている。 */
.badge-link {
  background: transparent;
  color: var(--color-secondary-dark);
  border: 1px solid var(--color-border);
}
.badge-link:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
  opacity: 1;
}

/* =========================================================
   11. 問い合わせ導線・フォーム
   ========================================================= */

/* --- 施設詳細ページ下部のCTA --- */
/* ボタンの文言には「無料」を入れず、説明文の側で伝える。
   高齢の利用者が多いため、広告的な見せ方より落ち着いた案内を優先する。 */
.facility-contact-cta {
  margin-top: 3rem;
  padding: 1.8rem 1.4rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: center;
}
.facility-contact-cta h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-secondary-dark);
  margin: 0 0 .7em;
}
.facility-contact-cta p { margin: 0 0 1.2em; }
.facility-contact-cta p:last-child { margin-bottom: 0; }
.contact-free { color: var(--color-secondary-dark); }

/* --- 相談フォームの「お問い合わせ対象の施設」 --- */
.contact-target {
  margin-bottom: 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
}
.contact-target p { margin: 0; }
.contact-target-label {
  font-size: .82rem;
  color: var(--color-text-soft);
  letter-spacing: .04em;
}
.contact-target .contact-target-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin-top: .2em;
}
.contact-target .contact-target-link {
  margin-top: .4em;
  font-size: .85rem;
}

/* --- プライバシーポリシーへの断り書き --- */
.contact-privacy-note {
  margin-top: 2rem;
  font-size: .88rem;
  color: var(--color-text-soft);
  text-align: center;
}

/* --- 送信完了ページ --- */
.contact-complete {
  padding: 2rem 1.4rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: center;
}
.contact-complete-lead {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-secondary-dark);
  margin-bottom: .8em;
}
.contact-complete-target {
  margin-top: 1.2em;
  font-size: .9rem;
  color: var(--color-text-soft);
}

/* --- 施設掲載のご案内ページの連絡先 --- */
.listing-contact {
  margin-top: 3rem;
  padding: 1.8rem 1.6rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.listing-contact h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-secondary-dark);
  margin: 0 0 1em;
}
.listing-contact-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem 1.4rem;
  margin: 0;
}
.listing-contact-list dt {
  font-weight: 700;
  color: var(--color-text-soft);
  font-size: .9rem;
}
.listing-contact-list dd { margin: 0; }
/* メールアドレスはリンクにしていないため、選択してコピーしやすくする */
.listing-contact-email { user-select: all; word-break: break-all; }

/* --- プライバシーポリシーの最終更新日 --- */
.policy-updated {
  margin-top: 2.4rem;
  font-size: .85rem;
  color: var(--color-text-soft);
  text-align: right;
}

@media (max-width: 600px) {
  .listing-contact-list { grid-template-columns: 1fr; gap: .2rem; }
  .listing-contact-list dd { margin-bottom: .8rem; }
}

/* =========================================================
   12. 404・検索結果なし
   ========================================================= */
.no-results {
  text-align: center;
  padding: 3rem 0;
}

/* 0件時の代替提案:「"○○"を外すとN件あります」のリンク一覧 */
.zero-result-suggestions {
  list-style: none;
  margin: 1.6rem auto 0;
  padding: 0;
  max-width: 480px;
}
.zero-result-suggestions li + li { margin-top: .6rem; }
.zero-result-suggestions a {
  display: block;
  padding: .8rem 1.2rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-weight: 700;
}
.zero-result-suggestions a:hover { border-color: var(--color-secondary); color: var(--color-secondary-dark); }

/* =========================================================
   13. ユーティリティ
   ========================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* =========================================================
   14. スマホ幅の最適化(〜600px / 〜400px)
   iPhone(375px前後)での可読性とレイアウトのバランスを整える。
   ファイル末尾に置き、これまでの指定を上書きする。
   ========================================================= */

/* 全体の文字サイズを段階的に少し小さく(基準 18px → 17px → 16px)。
   rem 基準の文字・余白がまとめて縮み、スマホでの「文字が大きすぎる」印象を解消する。 */
@media (max-width: 600px) {
  html { font-size: 106.25%; } /* 17px */
  section.block { padding: 3.2rem 0; }
}
@media (max-width: 400px) {
  html { font-size: 100%; }    /* 16px */
}

@media (max-width: 600px) {
  /* --- ヘッダー:ロゴ・CTA・ハンバーガーを1行に収める ---
     820px以下は flex-wrap: wrap のためCTA以降が2行目へ落ち、430px幅では
     ヘッダーだけで134pxを使っていた。サブタイトルを落とし、各要素を
     一回り小さくして1段に収める。 */
  .site-header-inner { padding: .55rem 0; gap: .45rem; flex-wrap: nowrap; }
  .site-branding { gap: .55rem; }
  .site-branding img { max-height: 36px; }
  .site-logo-link { gap: .5rem; }
  /* ロゴアイコンを少し小さく */
  .site-logo-mark svg { width: 32px; height: 32px; }
  /* サイト名を一段小さく。改行時は <wbr> の位置(「・」)でのみ折り返す */
  .site-title {
    font-size: 1.02rem;
    letter-spacing: .02em;
    line-height: 1.3;
  }
  /* サブタイトルはスマホでは出さない。ヘッダーの縦幅を一番食っており、
     同じ内容は title タグとトップページのリード文で伝わる。 */
  .site-description { display: none; }
  .header-cta { font-size: .78rem; padding: .45em .85em; }
  .menu-toggle { width: 42px; height: 38px; font-size: 1.15rem; }

  /* --- ヒーロー:キャッチコピーを小さめ&行間ゆったり --- */
  .hero { padding: 1.4rem 0 1.2rem; }
  .hero-heading {
    font-size: clamp(1.05rem, 4.9vw, 1.35rem);
    line-height: 1.55;
    margin-bottom: .35em;
  }
  /* 2行目の改行位置だけスマホ幅で調整する(文言はPC/SP共通) */
  .hero-break { display: inline; }
  .hero .hero-lead {
    font-size: .92rem;
    line-height: 1.85;
    /* 中央揃えだと3行の行末が不揃いで読みにくいため、リード文だけ左揃えにする。
       見出しは中央のまま。 */
    text-align: left;
  }
  /* 写真をもう少し見せる。スマホは画面に占める帯の面積が大きく、
     0.55 でもまだ灰色の面に見えるため一段下げる。 */
  /* 上22%(見出しの裏)は膜を濃く、墓石が見える帯(38%以降)は薄く。見出しの読みやすさと写真の両立。 */
  .hero-overlay { background: linear-gradient(to bottom, rgba(237, 234, 225, 0.62) 0, rgba(237, 234, 225, 0.62) 22%, rgba(237, 234, 225, 0.30) 38%, rgba(237, 234, 225, 0.30) 100%); }
  /* 2026-09-21 (1.3.65): PC と同じ画像から 386x514 と同じ比率(615x819)で切り出した hero_temple_mobile2.jpg
     (元画像の x300-915: 桜・街並みと海・納骨堂の列。media ID 1124)に差し替え。女性を主役にした切り出し(media ID 1123、
     x1213-1828)も試したが、実機では顔が検索カードの縁で切れ、見出しの裏に頭が来て読みにくかった。
     この切り出しなら見出しは空の上、カードは街並みの上に載り、カードの下に納骨堂と花が見える。膜と位置合わせは 1.3.44 のまま。
     2026-09-13 (1.3.44): スマホのヒーロー実寸は 375x約480 で、縦長(386x914)の切り出しは幅合わせで縮み、
     墓石(画像の35%付近)が検索カード(45%以降)の裏に落ちた。ヒーローと同じ比率(386x514, 元画像の右下 1150,510-1536,1024)で
     切り出せば拡縮しても位置がずれず、墓石の列が見出しの真下〜カードの上に収まる。生成りの膜は上22%を濃く、以降0.30
     (白い光は元々 opacity .08〜.22 なので触らない)。ケンバーンズは位置が動いて主役が外れるので止める。 */
  .hero-bg {
    background-image: url('/wp-content/uploads/2026/09/hero_temple_mobile2.jpg');
    background-position: 50% 0%;
    animation: none;
  }

  /* 施設詳細の表(1.3.48): 見出し列が幅34%固定で、スマホでは「費用の目／安」「管理費の／有無」と語の途中で折れていた。
     見出しは最長でも「檀家義務の有無」の7文字なので折り返さず、余白を詰めて値の列に幅を渡す。 */
  .facility-detail-table th,
  .facility-detail-table td { padding: .9rem .8rem; }
  .facility-detail-table th { width: auto; white-space: nowrap; }

  /* --- 検索フィルターのボタン(エリア等)を中央寄せで整える --- */
  /* 7個のエリアボタンなどで最後の1個が左端に孤立して見えないよう、
     各行を中央寄せにして「余り」を目立たせない。あわせて少し詰める。 */
  .search-filter { padding: .8rem 1rem; }
  .search-filter .tag-options { justify-content: center; gap: .4rem; }
  .tag-options label {
    font-size: .8rem;
    padding: .32em .75em;
  }
  .tag-options input[type="checkbox"]:checked + label { padding-left: 2.3em; }
  .filter-group legend { font-size: .9rem; }
}

/* --- エリアから探すカード:狭い画面でも3列で均等に、余りは中央寄せ --- */
/* 「エリアで選ぶ」チップと同じ7エリアが、2列だと最後の1枚(西区)だけ
   左端に孤立して寂しく見える。スマホでは3列相当のフレックスにして、
   端数の1枚が中央に収まるよう justify-content: center で配置する。 */
@media (max-width: 600px) {
  .area-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
  }
  .area-card {
    flex: 0 1 calc((100% - 1.5rem) / 3); /* 3列 + 端数は中央寄せ */
    padding: .9rem .4rem;
    font-size: .9rem;
  }
  .area-card .count { font-size: .72rem; }
}

/* =========================================================
   15. 解説ページ(お墓の種類 / 墓じまいの流れ / エリアから探す)
   3つの固定ページテンプレートに直書きした解説文のためのスタイル。
   14章(スマホ最適化)より後ろに置いているため、この章のスマホ指定は
   章内で完結させる。以降に指定を足すときも同じ扱いにすること。
   既存セレクタは一切変更していない。ここに追加したクラスは
   解説ページ以外では使われないため、他ページへの波及がない。
   ========================================================= */

/* 解説本文の親。カード類は .container(1140px)の幅いっぱいに広げるが、
   読ませる文章は1行が長すぎると目が戻れなくなるため幅を絞る。 */
.guide {
  max-width: 760px;
  margin: 3.4rem auto 0;
  padding-top: 3rem;
  border-top: 1px solid var(--color-border); /* カード群との境目を示す */
}
.guide > *:first-child { margin-top: 0; }

.guide-lead {
  font-size: 1.05rem;
  color: var(--color-text-soft);
  margin-bottom: 2rem;
}

/* 見出しは .entry-content と同じ和風テイストに揃える。
   .entry-content 側を共用しないのは、固定ページ本文欄(the_content)の
   スタイルに手を入れると記事ページまで巻き添えになるため。 */
.guide h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-secondary-dark);
  margin-top: 2.6em;
  margin-bottom: .8em;
  padding: .55em .8em;
  background: var(--color-bg-soft);
  border-left: 5px solid var(--color-secondary);
  border-radius: 0 6px 6px 0;
  scroll-margin-top: 90px; /* 追従ヘッダー分だけアンカー位置を下げる */
}
.guide h3 {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  color: var(--color-secondary-dark);
  margin-top: 2em;
  margin-bottom: .6em;
  padding-bottom: .25em;
  border-bottom: 2px dotted var(--color-border);
  scroll-margin-top: 90px;
}
.guide p { margin: 0 0 1.4em; }

/* --- 費用などの表 --- */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.6rem 0 .9rem;
}
.cost-table th,
.cost-table td {
  text-align: left;
  padding: .95rem 1.2rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
  vertical-align: top;
}
.cost-table tbody tr:last-child th,
.cost-table tbody tr:last-child td { border-bottom: none; }
/* 列見出し(thead)は深緑地。行見出し(tbody th)は生成り地。
   同じ th でも役割が違うことを、色の濃さで区別する。 */
.cost-table thead th {
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
}
.cost-table tbody th {
  background: var(--color-bg-soft);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-secondary-dark);
  white-space: nowrap;
}
.cost-table td .amount {
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.cost-table .col-note { color: var(--color-text-soft); font-size: .92rem; }

/* 出典・前提の注記。表の直下に置き、数字の性格を必ず添える。 */
.guide-note {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--color-text-soft);
  margin: 0 0 2em;
}

/* --- 「ここが大事」の囲み枠 --- */
/* h2 が生成り地 + 深緑の左罫なので、囲み枠は白地 + 朱色の左罫にして
   見出しと見分けがつくようにする。影で一段持ち上げて視線を集める。 */
.guide-callout {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem .4rem;
  margin: 2.6rem 0;
}
.guide-callout-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 .9em;
  line-height: 1.6;
}
.guide-callout p:last-child { margin-bottom: 1.2em; }

/* 囲み枠の中で手順を示すための縦並びリスト。
   矢印で横につなぐと、スマホで折り返して順序が読み取れなくなるため
   最初から縦に積む。 */
.guide-order {
  list-style: none;
  counter-reset: guide-order;
  margin: 0 0 1.4em;
  padding: 0;
}
.guide-order li {
  counter-increment: guide-order;
  position: relative;
  padding: .45em 0 .45em 2.6em;
  font-weight: 700;
}
.guide-order li::before {
  content: counter(guide-order);
  position: absolute;
  left: 0;
  top: .5em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: .82rem;
}
/* 2番目以降の項目に、上の項目から続いていることを示す縦線を引く */
.guide-order li:not(:first-child)::after {
  content: "";
  position: absolute;
  left: .82em;
  top: -.35em;
  width: 2px;
  height: .85em;
  background: var(--color-border);
}

/* --- 番号付きの確認項目(h3 の脇に置く連番) --- */
.guide-count {
  display: inline-block;
  min-width: 1.9em;
  margin-right: .5em;
  padding: .05em .4em;
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  vertical-align: .18em;
}

/* --- 解説末尾の問い合わせ導線 --- */
.guide-cta {
  background: var(--color-bg-strong);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  margin: 2.8rem 0 0;
}
/* 本文は左揃えのまま。長い文章を中央揃えにすると行頭が揃わず、
   高齢の読み手ほど次の行を追いにくくなる。中央に置くのはボタンだけ。 */
.guide-cta p { margin: 0 0 1.2em; }
.guide-cta p:last-child {
  margin-bottom: 0;
  text-align: center;
}
.guide-cta .btn { margin: 0; }

/* --- 行見出しの中のリンク(エリア表で区名をアーカイブへ繋ぐ) --- */
.cost-table th a { color: var(--color-secondary-dark); text-decoration: underline; }

/* --- スマホ幅(〜600px) --- */
@media (max-width: 600px) {
  .guide {
    margin-top: 2.6rem;
    padding-top: 2.2rem;
  }
  .guide h2 { font-size: 1.22rem; padding: .5em .7em; }
  .guide h3 { font-size: 1.08rem; }
  .guide-lead { font-size: 1rem; }
  .guide-callout { padding: 1.3rem 1.2rem .4rem; }
  .guide-callout-title { font-size: 1.08rem; }

  /* 表は横スクロールにせず、1行を1枚のカードとして縦に積む。
     利用者は高齢層が中心で、画面外に隠れた列は気づかれないため。
     列見出しは各セルの ::before に data-label として持たせる。 */
  .cost-table,
  .cost-table tbody,
  .cost-table tr,
  .cost-table th,
  .cost-table td {
    display: block;
    width: auto;
  }
  .cost-table thead {
    /* 読み上げには残したいので display:none にはしない */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cost-table {
    border: none;
    background: transparent;
    overflow: visible;
  }
  .cost-table tbody tr {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
  }
  .cost-table tbody tr:last-child { margin-bottom: 0; }
  .cost-table tbody th {
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
    padding: .75rem 1rem;
    font-size: 1.02rem;
  }
  .cost-table tbody td {
    border-bottom: none;
    padding: .7rem 1rem;
    font-size: .96rem;
  }
  .cost-table tbody td + td { padding-top: 0; }
  /* 列見出しをセルの上に小さく出す。3列表でも意味が失われない。 */
  .cost-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text-soft);
    margin-bottom: .15em;
  }
  .guide-order li { padding-left: 2.4em; }
  .guide-cta { padding: 1.5rem 1.1rem; }
  .guide-cta .btn { width: 100%; }
}


/* ==== 2026-08-24: 記事の読みやすさ改善（マナブロ参考、リンク色を青に・段落と見出しの余白を拡大） ==== */
.entry-content a {
	color: #2b6cb0;
	font-weight: 600;
}
.entry-content a:hover {
	opacity: 0.75;
}
.entry-content p {
	margin-bottom: 2em;
}
.entry-content ul,
.entry-content ol {
	margin-bottom: 2em;
}
.entry-content table {
	margin-bottom: 2em;
}
.entry-content h2 {
	margin-top: 3em;
	margin-bottom: 1.4em;
}
.entry-content h3 {
	margin-top: 2.4em;
	margin-bottom: 1.2em;
}


/* ==== 2026-08-24-2: 山下さんフィードバック「文字を詰めすぎ、もっと空白を」を受けて余白をさらに拡大 ==== */
.entry-content p {
	margin-bottom: 3.4em;
}
.entry-content ul,
.entry-content ol {
	margin-bottom: 3.4em;
}
.entry-content table {
	margin-bottom: 3.4em;
}
.entry-content h2 {
	margin-top: 3.6em;
}
.entry-content h3 {
	margin-top: 3em;
}


/* ==== 2026-08-24-3: 条件ボタンをチェックすると幅が変わり周りのボタンが動く問題を解消 ====
   .tag-options label の padding-left を常に2.5emにして、印バッジ用のスペースを
   チェック前から確保しておく。印自体は既存の opacity/transform で表示が切り替わる
   だけなので、ボタンの外形サイズは常に一定になりreflowが起きなくなる。 */
.tag-options label {
	padding-left: 2.5em;
	padding-right: 2.5em;
}
.tag-options input[type="checkbox"]:checked + label {
	padding-left: 3.5em;
	padding-right: 1.5em;
}


/* ==== 2026-08-24-4: 山下さんフィードバック「選択が右詰めになっていて、あまりデザインよくない」を受けて左揃えに変更 ====
   .search-filter .tag-options の justify-content を center から flex-start に戻した。
   理由: 行ごとに中央寄せすると、行に入るボタンの個数・合計幅が違うたびに左右の余白が
   バラバラになり、行ごとの見た目が不揃いになる(これが「右詰めに見える」の正体と推測)。
   上の 2026年頃の元コメントは「端数の1個が孤立して見えないよう中央寄せにした」という
   狙いだったが、タグ・チップ型UIでは端数が単独で左端に来るのは一般的な見え方であり、
   むしろ全行を左揃えに統一する方が一貫性があって見やすい。 */


/* ==== 2026-08-24-5: 左揃えにしても「直ってない」との指摘。行の合計幅がボタンの文字数で
   バラバラなままだと、左揃えでも右端がガタつき不揃いに見えるため、そもそも「行」という
   概念をやめて2列グリッドに変更。ボタンの文字数によらず全ボタンが同じ幅のセルに収まり、
   端数(奇数個目)は単に2列目が空くだけになる。これで見た目のズレ・不揃いの余地がなくなる。 */


/* ==== 2026-08-24-6: 山下さんから「全然ダメ、修正前に戻して」と明確な指示があったため、
   2026-08-24-4/5で試した左揃え・2列グリッド化を全て撤回し、元の中央寄せ(justify-content: center)
   に戻した。この行の履歴的経緯は上のコメント群(2026-08-24-4, 2026-08-24-5)を参照。
   教訓: 「デザインが良くない」への対応で複数回リリースを重ねる場合、早い段階で
   一度ユーザーに複数案を見せて選んでもらう方が、手戻りが少なかった可能性がある。 */


/* ============================================
   2026-08-25: 記事本文デザイン改善(トライアル導入)
   「こんなお悩みの方におすすめ」吹き出しボックスと、
   蛍光ペン風アンダーライン強調のスタイル。
   まずは1記事(投稿ID 576)のみに試験的に適用する。
   参考: Xserverブログ / manablog.org のデザイン。
   ============================================ */
.worry-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-soft);
    border: 2px solid var(--color-secondary);
    border-radius: 12px;
}

.worry-callout__avatar {
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border);
}

.worry-callout__avatar svg,
.worry-callout__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worry-callout__body {
    position: relative;
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.worry-callout__body::before,
.worry-callout__body::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
}

.worry-callout__body::before {
    left: -10px;
    top: 36px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid var(--color-border);
}

.worry-callout__body::after {
    left: -8.5px;
    top: 36px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #fff;
}

.worry-callout__title {
    display: block;
    margin-bottom: .5rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
}

.worry-callout__body ul {
    margin: 0;
    padding-left: 1.2em;
}

.worry-callout__body li {
    margin-bottom: .3em;
}

.worry-callout__body li:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .worry-callout {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .worry-callout__body {
        width: 100%;
    }

    .worry-callout__body::before,
    .worry-callout__body::after {
        left: 24px;
        border-right-color: transparent;
        border-left: 9px solid transparent;
    }

    .worry-callout__body::before {
        top: -9px;
        border-bottom: 9px solid var(--color-border);
        border-top: none;
    }

    .worry-callout__body::after {
        top: -7.5px;
        left: 25.5px;
        border-bottom: 7.5px solid #fff;
        border-top: none;
    }
}

/* 蛍光ペン風アンダーライン強調(本文中の重要ポイント用) */
.entry-content mark {
    background: linear-gradient(to bottom, transparent 58%, rgba(242, 199, 68, 0.6) 58%, rgba(242, 199, 68, 0.6) 92%, transparent 92%);
    color: inherit;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   PRバッジ（予約コンポーネント）
   ----------------------------------------------------------------------
   2026-08-24 追加。有料掲載プランは現時点でサイトに未公開（プロジェクト
   ナレッジ参照）のため、まだどのテンプレートからも呼び出していない。
   将来、有料掲載枠を公開して施設カード等に「おすすめ」表示を出すとき、
   景品表示法のステマ規制に対応するため対象カードに .pr-badge を付与する。
   使い方の例: <span class="pr-badge">PR</span>
   ========================================================================== */
.pr-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.6em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-white);
    background: var(--color-secondary);
    border-radius: 4px;
    line-height: 1.6;
}

/* =========================================================
   いいお墓を参考にした施設カード拡張(2026-08-29追加)
   ・カードの一言紹介文
   ・こだわり条件バッジ(.badge-category を流用)
   ・カード内の小さめボタン(.btn の縮小版)
   ・価格の複数行表示(単一施設ページ)
   ========================================================= */
.facility-card .facility-teaser {
	font-size: .92rem;
	color: var(--color-text-soft);
	margin: 0 0 .9em;
}
.facility-card .facility-card-features { margin: .1em 0 .7em; }
.btn-sm {
	padding: .5em 1.2em;
	font-size: .88rem;
}
.facility-price-list {
	margin: 0;
	padding-left: 1.1em;
}
.facility-price-list li {
	margin: 0 0 .3em;
}
.facility-price-list li:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   2026-09-06 トップページ・無料相談ページの刷新
   姉妹サイト「福岡の外壁塗装ナビ」のタブ式検索窓・3ステップ・写真つきエリア
   カード・選ばれる理由・相談CTA・相談ページ(バッジ/比較表/流れ/理由/FAQ)を
   当サイトの配色(朱色・深緑・生成り)に置き換えて移植したもの。
   ========================================================================== */
:root {
	--hj-accent: var(--color-primary);          /* 朱色: CTA・強調 */
	--hj-accent-dark: var(--color-primary-dark);
	--hj-accent-soft: #F8ECE7;                   /* 朱色の薄い地(アイコンの丸など) */
	--hj-navy: var(--color-secondary-dark);      /* 深緑: 見出し・タブ文字 */
	--hj-navy-soft: #E4EADF;                     /* 深緑の薄い地 */
	--hj-line: var(--color-border);
	--hj-muted: var(--color-text-soft);
	--hj-ink: var(--color-text);
	--hj-shadow-card: 0 2px 10px rgba(44, 38, 32, .06);
	--hj-gold: #C79A3E;
}
.nb { white-space: nowrap; }
.section-eyebrow {
	text-align: center;
	color: var(--hj-navy);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin: 0 0 .3rem;
}
.section-eyebrow::before { content: "＼ "; }
.section-eyebrow::after { content: " ／"; }
.section-title {
	text-align: center;
	font-family: var(--font-heading);
	color: var(--hj-navy);
	font-size: clamp(1.4rem, 2.8vw, 1.9rem);
	margin: 0 0 1.8rem;
	text-wrap: balance;
}
.section-title em { font-style: normal; color: var(--hj-accent); font-size: 1.25em; padding: 0 .08em; }
.section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--hj-accent);
	margin: .7em auto 0;
}
.section-more { margin-top: 2rem; }
.btn-cta {
	background: var(--hj-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 1.15rem;
	padding: 1em 2.6em;
	box-shadow: 0 8px 24px rgba(166, 61, 47, .28);
}
.btn-cta:hover { background: var(--hj-accent-dark); color: #fff; opacity: 1; }

/* ヒーロー(タブ式検索) ---------------------------------------------------- */
.hero.hero-split {
	text-align: left;
	padding: 0;
}
.hero-split-inner { position: relative; z-index: 3; padding: 2.6rem 0 2.2rem; }
.hero-split .hero-content { max-width: 620px; margin: 0; }
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	background:
		linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%),
		linear-gradient(180deg, rgba(243,214,120,.88) 0%, rgba(214,171,60,.82) 52%, rgba(190,145,42,.86) 100%);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .4em 1.15em .4em .95em;
	font-size: .88rem;
	font-weight: 800;
	margin: 0 0 .9rem;
	text-shadow: 0 1px 2px rgba(120,88,12,.4);
	box-shadow: 0 4px 14px rgba(184,145,42,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.hero-badge strong { font-size: 1.35em; font-weight: 900; letter-spacing: .02em; }
.hero-split .hero-heading {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	line-height: 1.45;
	color: var(--hj-navy);
	margin: 0 0 .5rem;
	text-wrap: balance;
}
.hero-split .hero-line { white-space: normal; }
.hero-split .hero-line + .hero-line { margin-top: .2em; }
/* 1.3.66: 見出し1行目の組み方(front-page.php 参照)。スマホでは1行に収まるので「福岡の」は分けない */
.hero-nowrap { white-space: nowrap; }
@media (min-width: 601px) {
	.hero-split .hero-line-pre { display: block; }
}
.hero-split .hero-heading em { font-style: normal; color: var(--hj-accent); font-size: 1.22em; line-height: 1; }
.hero-split .hero-lead {
	color: var(--hj-ink);
	font-size: .98rem;
	margin: 0 0 1.2rem;
	max-width: none;
	text-align: left;
}
.hero-search--tabs {
	background: #fff;
	padding: 0;
	overflow: hidden;
	border-radius: 18px;
	border: 0;
	box-shadow: 0 10px 30px rgba(44,38,32,.16);
}
.hero-search-tabbar { display: flex; }
.hero-search-tab {
	flex: 1 1 50%;
	border: 0;
	background: #EFECE3;
	color: var(--hj-muted);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: .9rem;
	padding: .75rem .5rem;
	cursor: pointer;
}
.hero-search-tab.is-active { background: #fff; color: var(--hj-navy); box-shadow: inset 0 -3px 0 var(--hj-accent); }
.hero-search-panel { padding: .85rem .9rem .95rem; }
.hero-search-panel[hidden] { display: none; }
.hero-search-field {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	border: 1.5px solid var(--hj-line);
	border-radius: 10px;
	padding: 0 .85rem;
	margin-bottom: .65rem;
}
.hero-search-field-chevron { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--hj-navy); pointer-events: none; }
.hero-search-field-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--hj-accent); }
.hero-search-field-icon svg { width: 100%; height: 100%; fill: currentColor; }
.hero-search-field select {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: .75rem 0;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--hj-navy);
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
}
.hero-search-field select:focus { outline: none; }
.hero-search-submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	width: 100%;
	text-align: center;
	border: 0;
	cursor: pointer;
	font-size: 1.02rem;
	padding: .85em 2em;
}
.hero-search-submit-icon { flex: 0 0 auto; width: 22px; height: 22px; }
.hero-search-submit-icon svg { width: 100%; height: 100%; fill: currentColor; }
.hero-search-submit-arrow { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: currentColor; }
.hero-search-note { margin: .8rem 0 0; font-size: .86rem; font-weight: 700; }
.hero-search-note a { color: var(--hj-navy); text-decoration: underline; text-underline-offset: .2em; }

/* 3つの簡単ステップ ------------------------------------------------------- */
.steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
}
.step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #fff;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(44,38,32,.07);
	padding: 1.2rem 1.2rem;
}
.step + .step::before {
	content: "›";
	position: absolute;
	left: -.95rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hj-muted);
	font-size: 1.4rem;
	font-weight: 700;
}
.step-icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--hj-accent-soft);
}
.step-icon svg { width: 30px; height: 30px; fill: var(--hj-accent); }
.step-text { display: flex; flex-direction: column; gap: .2em; line-height: 1.45; }
.step-text b { color: var(--hj-navy); font-size: 1.05rem; font-weight: 800; display: flex; align-items: baseline; gap: .45em; }
.step-text-num { color: var(--hj-accent); font-size: 1.05em; font-weight: 900; letter-spacing: .03em; }
.step-text small { color: var(--hj-muted); font-size: .9rem; }

/* 写真つきエリアカード --------------------------------------------------- */
.area-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem;
}
.area-photo-card {
	display: block;
	background: #fff;
	border: 1px solid var(--hj-line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--hj-shadow-card);
	color: var(--hj-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}
.area-photo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); opacity: 1; }
.area-photo-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #495A3E, #5F7052);
	background-size: cover;
	background-position: center;
	color: rgba(255,255,255,.9);
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: .05em;
}
.area-photo-name { display: block; padding: .7rem .9rem .1rem; }
.area-photo-name strong { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--hj-navy); font-size: 1.1rem; line-height: 1.3; }
.area-photo-name small { display: block; font-weight: 700; color: var(--hj-muted); font-size: .76rem; margin-top: .1rem; }
.area-photo-count { display: block; padding: 0 .9rem .8rem; color: var(--hj-muted); font-size: .82rem; }

/* 選ばれる5つの理由 ------------------------------------------------------- */
.reasons {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	/* 1.3.66: 1fr のままだとカードが中身の幅より縮めず、769〜830px で右に約20pxはみ出していた */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.reason {
	display: flex;
	align-items: center;
	gap: .9rem;
	background: #fff;
	border: 1px solid var(--hj-line);
	border-radius: var(--radius);
	box-shadow: var(--hj-shadow-card);
	padding: 1.05rem 1.1rem;
}
.reason-icon { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.reason-icon svg { width: 28px; height: 28px; fill: var(--hj-accent); }
.reason > span:last-child { display: flex; flex-direction: column; gap: .1em; line-height: 1.4; }
.reason b { color: var(--hj-navy); font-size: .98rem; font-weight: 800; display: block; text-wrap: balance; }

/* 相談CTA帯 --------------------------------------------------------------- */
.cta-band { background: var(--hj-accent-soft); padding: 3rem 0; text-align: center; }
.cta-band-title { font-family: var(--font-heading); color: var(--hj-navy); font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0 0 .5rem; text-wrap: balance; }
.cta-band-lead { color: var(--hj-ink); margin: 0 0 1.4rem; text-wrap: balance; }
.cta-band-lead-line { display: inline; }

/* 無料相談ページ: 冒頭 ---------------------------------------------------- */
.estimate-hero {
	background: linear-gradient(180deg, #E9EFE5 0%, #F3F6F0 60%, var(--color-bg) 100%);
	padding: 2.4rem 0 1.6rem;
}
.estimate-hero-inner { text-align: left; }
.estimate-hero-title { font-family: var(--font-heading); font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.32; color: var(--hj-navy); margin: 0 0 .8rem; }
.estimate-hero-line { display: block; }
.estimate-hero-title em { font-style: normal; color: var(--hj-accent); }
.estimate-hero-title strong { font-weight: 700; font-size: 1.15em; }
.estimate-hero-checks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.estimate-hero-checks li { display: flex; align-items: center; gap: .7em; font-weight: 800; color: var(--hj-navy); font-size: 1.02rem; }
.estimate-check-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--hj-accent); display: inline-flex; align-items: center; justify-content: center; }
.estimate-check-icon svg { width: 18px; height: 18px; fill: #fff; }
.estimate-hero-eyebrow { text-align: center; color: var(--hj-accent); font-weight: 800; font-size: .92rem; margin: .4rem 0 1rem; display: flex; align-items: center; justify-content: center; gap: .8rem; }
.estimate-hero-eyebrow::before, .estimate-hero-eyebrow::after { content: ""; width: 26px; height: 1.4px; background: var(--hj-gold); transform: rotate(60deg); }
.estimate-hero-eyebrow::after { transform: rotate(-60deg); }
.estimate-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.6rem 1.2rem; margin: 0; padding: 0; }
.estimate-badge { display: flex; align-items: center; justify-content: center; gap: .45rem; text-align: center; }
.estimate-badge-laurel { flex: 0 0 auto; width: 16px; height: 38px; color: var(--hj-gold); }
.estimate-badge-laurel svg { display: block; width: 100%; height: 100%; }
.estimate-badge-laurel--r { transform: scaleX(-1); }
.estimate-badge-text { display: flex; flex-direction: column; line-height: 1.28; }
.estimate-badge-strong { display: block; font-weight: 900; color: var(--hj-navy); font-size: 1rem; white-space: nowrap; }
.estimate-badge-small { display: block; font-size: .8rem; color: #A6791F; font-weight: 800; white-space: nowrap; }

/* 無料相談ページ: フォームの枠(中身は Snow Monkey Forms) ------------------ */
.estimate-block { padding-top: 1.4rem; }
.estimate-card { background: #fff; border: 1px solid var(--hj-line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.estimate-card-head { background: var(--hj-navy-soft); padding: 1.1rem 1.2rem; text-align: center; }
.estimate-card-title { margin: 0; font-family: var(--font-heading); font-size: 1.35rem; color: var(--hj-navy); }
.estimate-card-sub { margin: .35rem 0 0; font-size: .86rem; color: var(--hj-muted); }
.estimate-form { padding: 1.3rem 1.2rem 1.5rem; }
.estimate-form .entry-content { margin: 0; }
.estimate-form .contact-target { margin-bottom: 1.2rem; }
.contact-target--area { border-left-color: var(--color-secondary); }
.estimate-form .contact-privacy-note { margin-top: 1rem; }
.estimate-form .smf-form { max-width: none; }
.estimate-form .smf-item { margin-bottom: 1.15rem; }
.estimate-form .smf-item__label { font-weight: 800; color: var(--hj-navy); font-size: .96rem; }
.estimate-form .smf-text-control__control,
.estimate-form .smf-email-control__control,
.estimate-form .smf-tel-control__control,
.estimate-form .smf-textarea-control__control,
.estimate-form .smf-select-control__control {
	border: 1.5px solid var(--hj-line);
	border-radius: 10px;
	font-size: 1rem;
	padding: .8em .9em;
	background: #fff;
}
.estimate-form .smf-text-control__control:focus,
.estimate-form .smf-email-control__control:focus,
.estimate-form .smf-tel-control__control:focus,
.estimate-form .smf-textarea-control__control:focus { outline: none; border-color: var(--hj-accent); box-shadow: 0 0 0 3px rgba(166,61,47,.12); }
.estimate-form .smf-button-control__control,
.estimate-form .smf-action .smf-button-control__control {
	background: var(--hj-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1.1rem;
	padding: 1em 2.4em;
	width: 100%;
	box-shadow: 0 8px 24px rgba(166, 61, 47, .28);
	cursor: pointer;
}
.estimate-form .smf-button-control__control:hover { background: var(--hj-accent-dark); }
.estimate-form .smf-button-control__control[data-action="back"] { background: transparent; color: var(--hj-navy); box-shadow: none; border: 2px solid var(--hj-line); }

/* 無料相談ページ: 比較表・流れ・理由・FAQ・締めCTA -------------------------- */
.soudan-block { padding: 3.6rem 0; }
.soudan-tint { background: var(--color-bg-soft); }
.soudan-head { margin-bottom: 2rem; }
.soudan-head h2 { color: var(--hj-navy); font-size: clamp(1.4rem, 2.6vw, 1.85rem); text-wrap: balance; word-break: auto-phrase; }
.soudan-head .lead { max-width: 720px; text-wrap: balance; }
.cmp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
	max-width: 980px;
	margin: 0 auto;
}
.cmp-card {
	position: relative;
	background: #fff;
	border: 1.5px solid var(--hj-line);
	border-radius: 14px;
	padding: 1.4rem 1.5rem 1.1rem;
	box-shadow: var(--hj-shadow-card);
}
.cmp-card--ours { border: 2px solid var(--hj-accent); box-shadow: 0 8px 26px rgba(166, 61, 47, .12); }
.cmp-tag {
	position: absolute;
	top: -.85em;
	left: 1.2rem;
	background: var(--hj-accent);
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	padding: .28em .9em;
	border-radius: 999px;
	letter-spacing: .02em;
	white-space: nowrap;
}
.cmp-card-head {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: #6B6455;
	padding-bottom: .9rem;
	border-bottom: 1.5px solid var(--hj-line);
	margin-bottom: .4rem;
}
.cmp-card--ours .cmp-card-head { color: var(--hj-navy); }
.cmp-card-mark {
	flex: 0 0 30px;
	width: 30px; height: 30px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #ECE8DD;
	color: #7A7566;
	font-size: 1rem;
	font-weight: 900;
}
.cmp-card-mark--ok { background: var(--hj-accent); color: #fff; }
.cmp-rows { margin: 0; }
.cmp-row { padding: .95rem 0; border-bottom: 1px dashed var(--hj-line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row dt { font-size: .78rem; font-weight: 700; color: var(--hj-muted); margin: 0 0 .25em; }
.cmp-row dd { margin: 0; }
.cmp-row dd b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.55; color: #4B453A; }
.cmp-card--ours .cmp-row dd b { color: var(--hj-navy); }
.cmp-row dd small { display: block; font-size: .82rem; color: var(--hj-muted); margin-top: .2em; line-height: 1.6; }
.cmp-card--ours mark { background: linear-gradient(transparent 55%, rgba(242, 199, 68, .6) 55%); color: inherit; padding: 0 .1em; }
.cmp-note { text-align: center; color: var(--hj-navy); font-weight: 700; margin: 1.6rem auto 0; max-width: 720px; text-wrap: balance; }
.flow-list {
	list-style: none;
	counter-reset: flow;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
	display: grid;
	gap: .6rem;
}
.flow-list li {
	counter-increment: flow;
	position: relative;
	padding: .85rem 1rem .85rem 3.2rem;
	background: #fff;
	border: 1.5px solid var(--hj-line);
	border-radius: 12px;
}
.flow-list li::before {
	content: counter(flow);
	position: absolute;
	left: .9rem; top: 50%;
	transform: translateY(-50%);
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--hj-navy);
	color: #fff;
	font-weight: 900;
	font-size: .95rem;
	display: flex; align-items: center; justify-content: center;
}
.flow-list b { display: block; color: var(--hj-navy); font-weight: 800; }
.flow-list span { display: block; font-size: .9rem; color: var(--hj-muted); margin-top: .15em; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.why-card { background: #fff; border: 1.5px solid var(--hj-line); border-radius: 14px; padding: 1.5rem 1.2rem 1.4rem; text-align: center; box-shadow: var(--hj-shadow-card); }
.why-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--hj-accent-soft); margin-bottom: .8rem; }
.why-icon svg { width: 28px; height: 28px; fill: var(--hj-accent); }
.why-card h3 { font-size: 1.05rem; color: var(--hj-navy); margin: 0 0 .45em; font-weight: 800; word-break: auto-phrase; }
.why-card p { margin: 0; font-size: .9rem; color: var(--hj-muted); line-height: 1.75; text-align: left; }
.faq-list { margin: 0; }
.faq-item { background: #fff; border: 1.5px solid var(--hj-line); border-radius: 12px; padding: 1.05rem 1.2rem; box-shadow: var(--hj-shadow-card); }
.faq-item + .faq-item { margin-top: .8rem; }
.faq-item dt, .faq-item dd { position: relative; margin: 0; padding-left: 2.4rem; line-height: 1.75; }
.faq-item dt { font-weight: 800; color: var(--hj-navy); }
.faq-item dd { margin-top: .6rem; color: #4B453A; }
.faq-q, .faq-a { position: absolute; left: 0; top: .1em; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .9rem; }
.faq-q { background: var(--hj-navy); color: #fff; }
.faq-a { background: var(--hj-accent); color: #fff; }
.soudan-cta { background: linear-gradient(135deg, #495A3E 0%, #5F7052 100%); color: #fff; text-align: center; padding: 3.2rem 0 3rem; }
.soudan-cta-title { font-family: var(--font-heading); color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 0 0 .5rem; text-wrap: balance; word-break: auto-phrase; }
.soudan-cta-lead { color: #E4EADF; margin: 0 0 1.4rem; text-wrap: balance; }
.soudan-cta-btn { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.soudan-cta-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: 0 0 auto; }
.soudan-cta-note { color: #C9D3C2; font-size: .82rem; margin: .9rem 0 0; }

/* レスポンシブ ----------------------------------------------------------- */
@media (max-width: 960px) {
	.area-photo-grid { grid-template-columns: repeat(2, 1fr); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.hero-split-inner { padding: 1.4rem 0 1.5rem; }
	.hero-split .hero-content { max-width: none; }
	.hero-split .hero-heading { font-size: 1.55rem; line-height: 1.5; margin-bottom: .6rem; }
	.hero-split .hero-lead { font-size: .92rem; line-height: 1.8; }
	.steps { grid-template-columns: 1fr; gap: 1.3rem; }
	.step { padding: 1.15rem 1.1rem; gap: .9rem; }
	.step-icon { flex-basis: 58px; width: 58px; height: 58px; }
	.step-icon svg { width: 28px; height: 28px; }
	.step-text b { font-size: 1.02rem; }
	.step-text small { font-size: .86rem; }
	.step + .step::before {
		content: "";
		left: calc(1.1rem + 28px);
		top: -1.3rem;
		height: 1.3rem;
		width: 0;
		transform: none;
		border-left: 3px dotted #C9CFC2;
	}
	.reasons { grid-template-columns: 1fr; gap: .7rem; }
	.soudan-block { padding: 2.6rem 0; }
	.cmp-grid { grid-template-columns: 1fr; gap: 1.6rem; }
	.cmp-card { padding: 1.2rem 1.1rem .9rem; }
	.why-grid { grid-template-columns: 1fr; gap: .8rem; }
	.why-card { display: grid; grid-template-columns: 48px 1fr; column-gap: .9rem; text-align: left; padding: 1rem 1.1rem; }
	.why-icon { width: 48px; height: 48px; margin: 0; grid-row: 1 / span 2; }
	.why-icon svg { width: 24px; height: 24px; }
	.why-card h3 { grid-column: 2; margin: 0 0 .25em; }
	.why-card p { grid-column: 2; }
	.flow-list li { padding-left: 3rem; }
	.soudan-cta-btn { font-size: 1rem; padding: .95em 1.5em; }
}
@media (max-width: 600px) {
	.area-photo-grid { gap: .7rem; }
	.area-photo-thumb { font-size: 1.2rem; }
	.btn-cta { width: 100%; }
	.cta-band-lead-line { display: block; }
	.hero-split .hero-heading { font-size: clamp(1.25rem, 5.4vw, 1.5rem); }
}
@media (max-width: 480px) {
	.estimate-badges { gap: 1.1rem .8rem; }
	.estimate-badge-laurel { width: 13px; height: 32px; }
	.estimate-badge-strong { font-size: .9rem; }
	.estimate-badge-small { font-size: .74rem; }
}
@media (max-width: 400px) {
	.hero-search-submit { padding: .9em 1.3em; font-size: 1.02rem; gap: .4em; }
	.hero-search-submit-icon { width: 20px; height: 20px; }
	.hero-search-submit-arrow { right: .8rem; width: 18px; height: 18px; }
}

/* 2026-09-06 微調整: 理由カードの不自然な折り返し、相談フォーム(Snow Monkey Forms)の入力欄幅 */
.reason b { text-wrap: initial; }
.estimate-form .smf-text-control,
.estimate-form .smf-textarea-control,
.estimate-form .smf-text-control__control,
.estimate-form .smf-textarea-control__control { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
.estimate-form .smf-item { margin-bottom: 1.2rem; }
.estimate-form .smf-item__col--label { margin-bottom: .35rem; }
.estimate-form .smf-checkbox-control { display: inline-flex; align-items: center; gap: .4em; margin: .2em 1em .2em 0; }
.estimate-form .smf-checkbox-control__control { width: 20px; height: 20px; accent-color: var(--hj-accent); }
.estimate-form .smf-action { margin-top: .6rem; }
@media (max-width: 600px) {
	.estimate-hero-title { font-size: clamp(1.55rem, 7vw, 1.9rem); }
}