/*
Theme Name: 福岡の外壁塗装ナビ
Theme URI: https://example.com/
Author: 山下 駿佑
Author URI: https://example.com/
Description: 福岡都市圏の外壁塗装・屋根塗装業者を、建設業許可の番号つき・実名で掲載する情報サイト用テーマ。
Version: 1.6.11
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 7.1
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: #FBF8F1;          /* 生成り色(和紙) */
  --color-bg-soft: #FFFFFF;     /* カード等の少し明るい生成り */
  --color-bg-strong: #F1ECE1;   /* セクションの区切りに使う濃いめの生成り */
  --color-text: #332F29;        /* 本文色(高コントラストの濃い墨色) */
  --color-text-soft: #75695A;   /* 補足テキスト */
  --color-primary: #EE7B2E;     /* 御朱印の朱色 */
  --color-primary-dark: #D96218;
  --color-secondary: #1B4F82;   /* 苔むした深緑 */
  --color-secondary-dark: #123A62;
  --color-border: #E2D9C8;
  --color-white: #FFFFFF;

  /* フォント */
  --font-heading: "M PLUS Rounded 1c", serif;
  --font-body: "M PLUS Rounded 1c", sans-serif;

  /* サイズ */
  --container-width: 1140px;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(51, 47, 41, 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.2rem;
  padding: 1.1rem 0;
  flex-wrap: wrap;
  row-gap: .5rem;
}
.site-branding { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
/* 2026-09-04: ロゴ画像(家アイコン+文字)をまるごと1枚の画像にしていたのをやめ、
   アイコン部分だけを画像(元のロゴ画像から切り出し)にして、文字は実テキストとして
   出す方式に変更(やーまんの提案)。文字はフォントサイズで自由に大きくでき、
   拡大してもぼやけない。画像はアイコン部分(正方形)だけになったので、
   幅広ロゴ用だった max-height 指定はやめ、アイコン用の正方形サイズを直接指定する。 */
.site-logo-mark img { display: block; width: 44px; height: 44px; }

.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-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;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--color-secondary);
  border: none;
  color: #fff;
  width: 52px;
  min-height: 46px;
  padding: .3em 0;
  border-radius: 8px;
  cursor: pointer;
}
.menu-toggle-bars { font-size: 1.3rem; line-height: 1; }
.menu-toggle-label { font-size: .6rem; font-weight: 700; line-height: 1; }

.primary-navigation ul {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  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: .55em 1.15em;
  white-space: nowrap;
}

/* 2026-08-30: 外壁塗装ナビのナビ項目は墓じまいナビより長く、
   820px の指定では 900px 幅で横にはみ出していた。実測に合わせて 1080px に上げた。 */
@media (max-width: 1080px) {
  .menu-toggle { display: flex; }
  .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; }
}

/* =========================================================
   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)。
   animation-direction: alternate で拡大→縮小を往復させることで、
   ループの継ぎ目(瞬間的なリセット)が出ないようにしている。
   transform を使うことで、テキストなど他の要素には影響しない。 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/wp-content/uploads/2026/08/hero_background_terrace.png');
  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以下のブロック)。 */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(237, 234, 225, 0.55);
}

/* 光がふわっと明滅する、控えめなオーバーレイ。
   常時の生成りオーバーレイの上に重なるため、明滅しても文字のコントラストを損なわない。 */
.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: #EE7B2E; /* 朱色(判子マーク)。--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(51, 47, 41, .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(51, 47, 41, 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; }
.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;
}

/* 業者詳細ページ */
/* 業者詳細ページの見出し:バッジを上の行に、社名はその下に全幅で。
   以前は flex 横並びで社名が細い列に押し込まれ「（有）ワール／ド塗装工業」のように途中改行していた。 */
.facility-single .facility-header { display: block; margin-bottom: 2rem; }
.facility-single .facility-header .badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.facility-single .facility-header h1 {
  font-size: clamp(1.5rem, 5.2vw, 2rem);
  line-height: 1.4;
  margin: 0;
  color: var(--navy);
  font-weight: 900;
  word-break: normal;
  overflow-wrap: anywhere;
}
.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;
}
/* 2026-09-04: 固定ページの見出し(例:「なぜ2,444社を全部載せないのか」)が
   スマホ幅で「全部載」「せないのか」のように単語の途中で折り返される問題の修正。
   句読点の無い見出しには .hero-heading と同じ word-break: auto-phrase を使う
   (Chrome/Edgeが文節を推定して折り返す。非対応ブラウザは従来通りの折り返しに戻るだけ)。 */
.entry-content h2,
.entry-content h3 {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
.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(51, 47, 41, .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(51, 47, 41, .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: ")"; }


/* --- 業者ページ下部の関連記事・同条件の業者 --- */
/* 相談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-note {
  font-size: .88rem;
  color: var(--color-text-soft);
  margin-top: .5em;
  line-height: 1.6;
}
/* 2026-09-06: 業者ページの見積もり依頼CTA(電話CTAから差し替え) */
.facility-quote-cta h2 { line-height: 1.45; text-wrap: balance; }
.facility-quote-cta .btn-cta { white-space: nowrap; }
@media (max-width: 600px) {
  .facility-quote-cta h2 { font-size: 1.12rem; }
  .facility-quote-cta .btn-cta { font-size: 1.02rem; padding: .95em 1.6em; }
}
.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行に収める ---
     2026-09-04: 一度「ロゴを1段目に独立させる2段組み」(1.5.80)を試したが、
     実機確認の結果、ヘッダー全体の高さが約225px(画面の26%)まで膨らみ、
     「これはだめだ」との明確な差し戻し指摘を受けた。ロゴ単体は大きくなっても、
     開いた瞬間に見える本文(ヒーロー・見積もりフォーム)がその分下に押しやられ、
     結果的に使い勝手を悪化させていた。そのため1行レイアウトに戻す(1.5.81)。
     さらに、やーまんの提案で「アイコンだけ画像・文字は実テキスト」方式に変更(1.5.82)。
     幅広の1枚絵ロゴ(1707×569)は、1行に収めようとすると必ずCTA・メニューと
     幅を奪い合って頭打ちになっていたが、実テキストならフォントサイズで拡大でき、
     しかも拡大してもぼやけない。アイコン48px+文字1.05remで、CTA・メニューが
     最小サイズの360px幅でも余白約3px確保できることを実測(canvas計測)して選定。 */
  .site-header-inner { padding: .55rem 0; gap: .45rem; flex-wrap: nowrap; }
  .site-branding { gap: .55rem; }
  .site-logo-link { gap: .5rem; }
  .site-logo-mark img { width: 48px; height: 48px; }
  /* サイト名。改行時は <wbr> の位置(「・」)でのみ折り返す */
  .site-title {
    font-size: 1.05rem;
    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 でもまだ灰色の面に見えるため一段下げる。 */
  .hero-overlay { background: rgba(237, 234, 225, 0.45); }

  /* --- 検索フィルターのボタン(エリア等)を中央寄せで整える --- */
  /* 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;
}


/* 語のまとまりで折り返すための nowrap 単位
   word-break:auto-phrase は Chrome にしかないため、
   見出しの折れ位置は span で明示する */
.nb{white-space:nowrap;}


/* 業者詳細の表:狭い画面では見出しを上に積む
   「建設業許可番号」のような長いラベルが
   34%幅の列で「建設業許 / 可番号」と割れるのを避ける */
@media (max-width: 560px) {
  .facility-detail-table th,
  .facility-detail-table td { display: block; width: auto; }
  .facility-detail-table th {
    background: transparent;
    border-bottom: none;
    padding: 1rem 1.3rem 0;
    font-size: .92rem;
    color: var(--color-text-soft);
  }
  .facility-detail-table td { padding: .2rem 1.3rem 1rem; font-weight: 700; }
}


/* ==== 2026-08-31: スマホ表示の改行・メニュー崩れの修正 ==== */

/* 1) 600px以下でメニューを開くと、ヘッダーが flex-wrap: nowrap のため
   開いたナビが同じ行に割り込み、サイト名が縦に折れてハンバーガーと
   重なっていた(1080px以下の wrap 前提のレイアウトと矛盾)。
   開いたメニューはヘッダーの下に重ねて表示する方式に変更。 */
@media (max-width: 600px) {
  .primary-navigation.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 14px 28px rgba(51, 47, 41, 0.12);
    padding: 0 1.1rem;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
}

/* 2) 中央揃えの見出し・リード文で「〜していま/す。」のように行末1〜2文字だけ
   次の行に落ちる不自然な折り返しが出ていた。行の長さのバランスを取って防ぐ。
   (非対応ブラウザでは従来どおりの折り返しになるだけで害はない) */
h1, h2, h3,
.hero-lead,
.lead,
.section-heading .lead {
  text-wrap: balance;
}

/* =========================================================
   R. 2026-09-01 リニューアル(屋根修理Navi型)
   ---------------------------------------------------------
   参照: claude/2026-09-01_屋根修理Navi_デザイン採取.md
   方針: 既存の変数名に新しい配色を流し込み、サイト全体の色を一度に切り替える。
         新しい部品(ヒーロー分割・3ステップ・6つの理由・ピル・CTA帯・紺フッター)は
         ここにまとめて定義する。以前の部品への上書きも、この節の中だけで行う。
   ========================================================= */
:root {
  --orange: #EA5414;
  --orange-dark: #D2470C;
  --orange-soft: #FCEDE3;
  --navy: #14315F;
  --navy-deep: #0E2A52;
  --ink: #27313F;
  --muted: #6B7785;
  --line: #D8DFE8;
  --gray: #EEF1F5;
  --gray-2: #F6F8FB;
  --peach: #FBE6D4;
  --peach-2: #FDF1E6;
  --shadow-card: 0 2px 10px rgba(18, 40, 76, .06);

  /* 既存の変数名に流し込む */
  --color-bg: #FFFFFF;
  --color-bg-soft: #FFFFFF;
  --color-bg-strong: var(--gray);
  --color-text: var(--ink);
  --color-text-soft: var(--muted);
  --color-primary: var(--orange);
  --color-primary-dark: var(--orange-dark);
  --color-secondary: var(--navy);
  --color-secondary-dark: var(--navy-deep);
  --color-border: var(--line);
  --font-heading: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --container-width: 1080px;
  --radius: 10px;
  --shadow: 0 6px 22px rgba(18, 40, 76, .08);
}
html { font-size: 106.25%; } /* 17px。参照サイトは15pxだが、高齢の読者向けにひと回り大きく */
body { line-height: 1.75; letter-spacing: 0; }
h1, h2, h3, h4 { color: var(--navy); }
a { color: var(--navy); }
.block { padding: 3.4rem 0; }
.bg-gray, .bg-soft { background: var(--gray); }
.section-eyebrow {
  text-align: center;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
}
.section-eyebrow::before { content: "＼ "; }
.section-eyebrow::after { content: " ／"; }
#steps .section-title { margin-bottom: 1.4rem; }
#steps .section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: .55rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), #3B7DD8);
}
.section-title {
  text-align: center;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1.6rem;
  letter-spacing: .01em;
}
.section-title em { font-style: normal; color: var(--orange); font-size: 1.25em; margin: 0 .05em; }
.section-more { margin-top: 1.8rem; }
.text-center { text-align: center; }

/* --- ボタン --- */
.btn { border-radius: 8px; font-weight: 800; padding: .85em 1.6em; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(234, 84, 20, .25); }
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy); opacity: 1; }
.btn-cta {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-size: 1.15rem;
  padding: 1em 2.6em;
  box-shadow: 0 8px 24px rgba(234, 84, 20, .28);
}
.btn-cta:hover { background: var(--orange-dark); opacity: 1; }

/* --- ヘッダー --- */
/* PR開示バー(景表法・ステマ規制対応。レノボ君サイトを参考に最上部へ) */
.site-pr-note { background: #EEF1F5; }
.site-pr-note .container { max-width: 1180px; padding-top: .28rem; padding-bottom: .28rem; text-align: right; }
.site-pr-note span { font-size: .72rem; color: #8A94A2; letter-spacing: .01em; }
@media (max-width: 600px) { .site-pr-note span { font-size: .66rem; } }

.site-header { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(18,40,76,.04); }
.site-header .container { max-width: 1180px; }
.site-header-inner { padding: .7rem 0; }
.site-title { color: var(--navy); font-size: 1.25rem; font-weight: 800; }
.site-description { display: none; }
.primary-navigation a { color: var(--ink); font-size: .92rem; font-weight: 700; }
.primary-navigation a:hover { color: var(--orange); opacity: 1; }
.header-cta { display: inline-flex; align-items: center; gap: .4em; border-radius: 8px; padding: .6em 1.2em; font-size: .92rem; }
.header-cta-icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }
.menu-toggle { background: var(--navy); }

/* --- ヒーロー(左:文字＋検索、右:写真) --- */
.hero.hero-split {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 0;
  text-align: left;
  /*
   * 2026-09-03: 家の写真とテキストの隙間が広すぎる問題(PC・大画面)の修正。
   * 以前は写真の左端を「画面幅の48%」(width:52%)で決めていたため、
   * テキスト側は .container(max-width:1080px)で頭打ちになるのに写真側だけ
   * 画面幅に比例して右へ伸び続け、ワイドモニタほど間の白い隙間が広がっていた。
   * → 写真の左端を「テキスト欄の実際の右端 + 24px」に直接連動させる。
   */
  --hero-content-w: clamp(420px, 46vw, 640px);
  --hero-gutter: max(4vw, calc((100vw - var(--container-width)) / 2));
}
.hero-split .hero-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  /* 2026-09-05: さらに接近の要望。文字列の下(写真の空の部分)に文字を
     重ねるレイアウトに変更。写真をフルブリードにして、上のグラデーションで
     見出し部分だけ読みやすさを確保する。 */
  left: 0;
  width: auto;
  z-index: 0;
}
.hero-split .hero-photo img,
.hero-split .hero-photo-dummy { width: 100%; height: 100%; object-fit: cover; }
.hero-split .hero-photo-dummy { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #E9EEF5, #F6F8FB); }
.hero-split .hero-photo-dummy svg { width: 70%; max-width: 520px; height: auto; }
.hero-split .hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 2026-09-05: 写真をフルブリードにしたため、見出し・バッジの帯を読みやすく
     保つ範囲だけ白を残し、検索カードのあたりからは空を見せる。 */
  background: linear-gradient(90deg, #fff 0, rgba(255,255,255,.88) 320px, rgba(255,255,255,.45) 520px, rgba(255,255,255,0) 720px);
}

.hero-split-inner { position: relative; z-index: 1; padding: 3.2rem 0 2.6rem; }
.hero-split .hero-content { max-width: var(--hero-content-w); 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: .9rem;
  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);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero-badge-icon { width: 1.35em; height: 1.35em; fill: #fff; flex: 0 0 auto; }
.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.5rem);
  line-height: 1.45;
  color: var(--navy);
  font-weight: 900;
  margin: 0 0 .6rem;
  text-wrap: balance;
}
.hero-split .hero-line { white-space: normal; }
.hero-split .hero-line + .hero-line { margin-top: .3em; }
.hero-split .hero-heading em {
  font-style: normal;
  color: var(--orange);
  font-size: 1.28em;
  line-height: 1;
}
.hero-split .hero-lead { color: var(--ink); font-size: 1rem; margin: 0 0 1.3rem; }
.hero-search {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.1rem;
}
.hero-search-title {
  font-size: .9rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 .5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
}
.hero-search .search-filter { border: 0; box-shadow: none; padding: 0; max-width: none; }
.hero-search .filter-group legend { display: none; }
.hero-search .tag-group-label { margin: .4rem 0 .25rem; font-size: .78rem; }
.hero-trust-wrap { position: relative; margin: .2rem 0 1.1rem; }
.hero-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: .95rem;
  color: var(--navy);
  font-weight: 700;
}
.hero-trust li { display: flex; align-items: center; gap: .7em; }
.hero-trust-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(18,40,76,.12);
}
.hero-trust-icon svg { width: 22px; height: 22px; fill: #1F3B6E; }
.hero-photo-badge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  background: #fff;
  color: var(--orange);
  border: 2px solid #FCE3D3;
  box-shadow: 0 8px 22px rgba(18,40,76,.16);
  line-height: 1.15;
}
.hero-photo-badge::before,
.hero-photo-badge::after {
  content: "\2726";
  position: absolute;
  color: var(--orange);
  font-size: .7rem;
  opacity: .9;
}
.hero-photo-badge::before { top: 16px; left: 20px; }
.hero-photo-badge::after { top: 14px; right: 18px; font-size: .55rem; }
.hero-photo-badge small { font-size: .72rem; font-weight: 800; color: var(--orange); }
.hero-photo-badge strong { font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; color: var(--orange); }

/* --- 検索フォーム(共通。ピルとオレンジの送信ボタン) --- */
.search-filter { border: 1px solid var(--line); box-shadow: var(--shadow-card); background: #fff; }
.tag-options { gap: .4rem; }
.tag-options label {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  padding: .38em .95em;
  border-radius: 999px;
}
.tag-options label::before { display: none; }
.tag-options input[type="checkbox"]:checked + label {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  padding-left: .95em;
  padding-right: .95em;
}
.filter-submit { margin-top: .9rem; text-align: center; }
.filter-submit .btn {
  width: 100%;
  max-width: 460px;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 900;
  padding: .95em 1em;
  box-shadow: 0 4px 14px rgba(234, 84, 20, .25);
}
.filter-submit .btn:hover { background: var(--orange-dark); opacity: 1; }
.filter-count { font-weight: 700; margin-left: .3em; }

/* --- 3つの簡単ステップ --- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  counter-reset: step;
}
.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(18,40,76,.07);
  padding: 1.2rem 1.2rem;
}
.step + .step::before {
  content: "›";
  position: absolute;
  left: -.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--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: #FDECE2;
}
.step-icon svg { width: 30px; height: 30px; fill: var(--orange); }
.step-text { display: flex; flex-direction: column; gap: .2em; line-height: 1.45; }
.step-text b { color: var(--navy); font-size: 1.05rem; font-weight: 800; display: flex; align-items: baseline; gap: .45em; }
.step-text-num { color: var(--orange); font-size: 1.05em; font-weight: 900; letter-spacing: .03em; }
.step-text small { color: #5B6470; 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(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: var(--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, #14315F, #3A5C8F);
  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-weight: 800; color: var(--navy); font-size: 1.02rem; line-height: 1.3; }
.area-photo-name small { display: block; font-weight: 700; color: var(--muted); font-size: .76rem; margin-top: .1rem; }
.area-photo-count { display: block; padding: 0 .9rem .8rem; color: var(--muted); font-size: .82rem; }

/* --- 区・市町のピル --- */
.pill-group-label { font-size: .85rem; font-weight: 800; color: var(--muted); margin: 1rem 0 .5rem; }
.pill-group-label:first-of-type { margin-top: 0; }
.pill-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
}
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: .8em .6em;
  color: var(--navy);
  font-weight: 800;
  font-size: .95rem;
  transition: border-color .15s ease, transform .15s ease;
}
.pill:hover { border-color: var(--navy); transform: translateY(-1px); opacity: 1; }
.pill-count { color: var(--muted); font-size: .78rem; font-weight: 700; }

/* --- 6つの理由 --- */
.reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.reason {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--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(--orange); }
.reason > span:last-child { display: flex; flex-direction: column; gap: .1em; line-height: 1.4; }
.reason b { color: var(--navy); font-size: .98rem; font-weight: 800; display: block; text-wrap: balance; }
.reason small { color: var(--muted); font-size: .8rem; }

/* --- 相談CTA帯 --- */
.cta-band { background: var(--peach); padding: 3rem 0; text-align: center; }
.cta-band-title { color: var(--navy); font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 900; margin: 0 0 .5rem; }
.cta-band-lead { color: var(--ink); margin: 0 0 1.4rem; text-wrap: balance; }
.cta-band-lead-line { display: inline; }
/* 2026-09-16: 共通化した誘導帯(template-parts/cta-estimate.php)の注記。 */
.cta-band-note { margin: 1rem 0 0; font-size: .86rem; color: #3B4657; }
@media (max-width: 600px) {
  .cta-band-lead-line { display: block; }
}

/* --- 声の募集 --- */
.voice-invite p { text-align: center; color: var(--ink); max-width: 640px; margin: 0 auto 1.4rem; }
.container-narrow { max-width: 760px; }

/* --- 記事カード --- */
.post-card, .post-grid article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* --- 業者カード --- */
.facility-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.facility-card h3 a { color: var(--navy); }
.badge-area { background: var(--navy); color: #fff; }
.badge-category, .badge-type { background: var(--gray); color: var(--navy); border-color: var(--line); }
.facility-card .more-link { color: var(--orange); font-weight: 800; }

/* --- ページ見出し(下層ページ) --- */
.page-header h1 { color: var(--navy); }

/* --- フッター(紺) --- */
.site-footer { background: var(--navy-deep); color: #fff; padding: 3rem 0 1.4rem; margin-top: 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--peach); opacity: 1; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* 2026-09-04: やーまんから参考デザイン(スクショ)をもらい、フッターのブランド部分を
   刷新。以前は完成形ロゴ画像(アイコン+文字が1枚)を白い角丸カードに乗せていたが、
   ヘッダーと同じ「アイコン画像+実テキスト」方式に統一し、2行に積んで大きく見せる。
   あわせて、背景に薄い線画(スカイライン・鳥居)を飾りとして置き、参考デザインの
   「イラストが効いた紺のフッター」の雰囲気に近づけた。 */
.footer-brand { position: relative; }
.footer-brand > * { position: relative; z-index: 1; }
.footer-brand-deco { position: absolute; inset: -1rem -1rem auto auto; overflow: hidden; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.footer-brand-deco svg { position: absolute; opacity: .1; }
.footer-brand-deco .deco-skyline { top: -6px; right: 0; width: 170px; height: auto; }
.footer-brand-deco .deco-torii { bottom: -30px; right: 30px; width: 110px; height: auto; }

.footer-logo--icon-text { display: inline-flex; align-items: center; gap: .9rem; }
.footer-logo-mark img { display: block; width: 56px; height: 56px; }
.footer-logo-text { display: flex; flex-direction: column; font-family: var(--font-heading); font-weight: 900; line-height: 1.22; }
.footer-logo-line { font-size: 1.5rem; color: #fff; }
.footer-logo-line .is-accent { color: var(--orange); }
.footer-logo-divider { display: flex; gap: .45rem; margin: 1.1rem 0 1.05rem; }
.footer-logo-divider i { display: block; width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.footer-logo-divider i:first-child { background: var(--orange); }
.footer-tagline { color: rgba(255,255,255,.72); font-size: .85rem; margin: 0; max-width: 34em; }

.footer-col-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--orange);
}
.footer-col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50%;
}
.footer-col-icon svg { width: 14px; height: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.footer-col li:last-child { border-bottom: 0; }
.footer-col a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; color: rgba(255,255,255,.85); }
.footer-col a::after { content: "\203A"; opacity: .55; font-weight: 700; }
.footer-bottom { padding-top: 1.2rem; text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.6em; margin: 0 0 .6rem; font-size: .85rem; }
.footer-copyright { color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; }

/* --- レスポンシブ --- */
@media (max-width: 960px) {
  .pill-grid { grid-template-columns: repeat(4, 1fr); }
  .area-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hero-split { position: relative; background: #fff; }
  /* モバイル:写真は上のバナー(そのまま=家は右・空は左)。見出し等はその空の上に重ねる。検索は下(白背景)。 */
  .hero-split .hero-photo {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto;
    height: 66vw;          /* 横長のバナー。画像(3:2)をほぼそのまま表示 */
    max-height: 300px;
    z-index: 0;
  }
  .hero-split .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 38%; display: block; }
  .hero-split .hero-photo::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    /* 左を白くして左の文字を読みやすく。右の家はそのまま見せる。 */
    background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 30%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 74%);
    z-index: 1;
  }
  .hero-split-inner { position: relative; z-index: 2; padding: 1.1rem 0 1.4rem; }
  .hero-split .hero-content { max-width: none; }
  .hero-split .hero-heading { font-size: 1.7rem; line-height: 1.5; margin-bottom: .9rem; }
  .hero-heading { text-shadow: none; }
  .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 #C9D0DA;
  }
  .reasons { grid-template-columns: 1fr; gap: .7rem; }
  .pill-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  html { font-size: 100%; }
  .pill-grid { grid-template-columns: repeat(2, 1fr); }
  .area-photo-grid { gap: .7rem; }
  .area-photo-thumb { font-size: 1.2rem; }
  .footer-top { grid-template-columns: 1fr; gap: 1.2rem; }
  /* 2026-09-04: エリア一覧(福岡市7件・福岡市外9件)を1列で並べると縦にとても長くなるため、
     スマホ幅では2段組みにして高さを半分近くまで縮めた。読む順は上→下→次の列で問題ない並びのため
     (地名の羅列で意味的な順序性が薄い)、multi-column を使うのが最短で自然。 */
  .footer-col ul { columns: 2; column-gap: 1.2rem; }
  .footer-col li { break-inside: avoid; }
  .footer-logo-mark img { width: 48px; height: 48px; }
  .footer-logo-line { font-size: 1.3rem; }
  .footer-brand-deco .deco-skyline { width: 130px; opacity: .08; }
  .footer-brand-deco .deco-torii { width: 90px; opacity: .08; }
  .btn-cta { width: 100%; }
}
.hero-search .filter-group { border: 0; padding: 0; margin: 0 0 .2rem; }
.hero-search .filter-group .tag-options { padding: 0; }

/* --- 業者カード(1.5.1): 参照サイトのカード構造に寄せる --- */
.facility-grid { gap: 1.2rem; }
.facility-card .facility-body { padding: 1.1rem 1.15rem 1.2rem; }
.facility-card h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.4; }
.facility-card .facility-teaser { font-size: .88rem; color: var(--muted); }
.facility-card .facility-meta {
  font-size: .86rem;
  color: var(--ink);
  background: var(--gray-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem .85rem;
  margin: .5em 0 .8em;
}
.facility-card .facility-meta li { margin: 0 0 .25em; }
.facility-card .facility-meta li:last-child { margin-bottom: 0; }
.facility-card .more-link {
  display: inline-block;
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  padding: .45em 1.1em;
  color: var(--orange);
  font-size: .9rem;
  transition: background .15s ease, color .15s ease;
}
.facility-card .more-link:hover { background: var(--orange); color: #fff; opacity: 1; }
.badge { border-radius: 6px; font-weight: 700; }
.page-header { padding-top: 1.4rem; }
.page-header .lead { color: var(--muted); }

/* --- Snow Monkey Forms(無料相談・声) --- */
.smf-item__label__text { font-weight: 800; color: var(--navy); }
.smf-item__description { color: var(--muted); font-size: .85rem; }
.smf-button-control__control,
.smf-button-control__control[data-action="confirm"],
.smf-button-control__control[data-action="complete"] {
  background: var(--orange); color: #fff; border: 0; border-radius: 8px;
  font-weight: 800; font-size: 1.05rem; padding: .9em 2.2em; box-shadow: 0 4px 14px rgba(234,84,20,.25);
}
.smf-button-control__control[data-action="back"] { background: #fff; color: var(--navy); border: 1.5px solid var(--line); box-shadow: none; }
.smf-item:has(input[name="facility_id"]) { display: none; }
.smf-text-control__control, .smf-tel-control__control, .smf-email-control__control, .smf-textarea-control__control, .smf-select-control__control {
  border: 1.5px solid var(--line); border-radius: 8px; font-size: 1rem; padding: .6em .8em;
}

/* --- 見積もりフォームページ(テーマ内蔵) --- */
.estimate-hero {
  background: linear-gradient(180deg, #EAF3FB 0%, #F4F9FD 60%, #fff 100%);
  padding: 2.4rem 0 1.6rem;
}
.estimate-hero-inner { text-align: left; }
.estimate-hero-title { font-size: clamp(1.8rem, 6.4vw, 2.6rem); line-height: 1.28; font-weight: 900; color: var(--navy); margin: 0 0 .7rem; }
.estimate-hero-line { display: block; }
.estimate-hero-title em { font-style: normal; color: var(--orange); }
.estimate-hero-title strong { font-weight: 900; }
.estimate-hero-lead { color: var(--ink); font-size: 1rem; line-height: 1.8; margin: 0 0 1.2rem; }
.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(--navy); font-size: 1.02rem; }
.estimate-check-icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); 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: #C0392B; 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: #D8A24A; transform: rotate(60deg); }
.estimate-hero-eyebrow::after { transform: rotate(-60deg); }
/* 2026-09-04: 参考サイト(近くの屋根修理Navi)にならい、黄色い枠のボックスから
   月桂樹(ローレル)で文字を挟む形に変更(内容も estimate-hero-checks と被らないものに)。 */
.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: #C79A3E; }
.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(--navy); font-size: 1rem; white-space: nowrap; }
.estimate-badge-small { display: block; font-size: .8rem; color: #A6791F; font-weight: 800; white-space: nowrap; }

.estimate-block { padding-top: 1.4rem; }
.estimate-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.estimate-card-head { background: #DCEBF6; padding: 1.1rem 1.2rem; text-align: center; }
.estimate-card-title { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--navy); }
.estimate-card-sub { margin: .35rem 0 0; font-size: .86rem; color: var(--muted); }

.estimate-form { padding: 1.3rem 1.2rem 1.5rem; }
.estimate-field { margin: 0 0 1.15rem; }
.estimate-label { display: flex; align-items: center; gap: .5em; font-weight: 800; color: var(--navy); font-size: .96rem; margin: 0 0 .4rem; }
.estimate-req { background: var(--orange); color: #fff; font-size: .68rem; font-weight: 800; border-radius: 5px; padding: .18em .55em; }
.estimate-hint { color: #6b7280; font-size: .78rem; font-weight: 600; }
.estimate-any { background: var(--gray-2); color: var(--muted); font-size: .68rem; font-weight: 800; border-radius: 5px; padding: .18em .55em; border: 1px solid var(--line); }
.estimate-form input[type="text"],
.estimate-form input[type="email"],
.estimate-form input[type="tel"],
.estimate-form textarea,
.estimate-form select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; font-size: 1rem;
  padding: .8em .9em; color: var(--ink); background: #fff; box-sizing: border-box;
  font-family: inherit;
}
.estimate-form input:focus, .estimate-form textarea:focus, .estimate-form select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(234,84,20,.12); }
.estimate-form textarea { resize: vertical; }
.estimate-select-wrap { position: relative; }
.estimate-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 2.4em; }
.estimate-select-chevron { position: absolute; right: .8em; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--navy); pointer-events: none; }
.estimate-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.estimate-check-opt { display: flex; align-items: center; gap: .55em; border: 1.5px solid var(--line); border-radius: 10px; padding: .7em .8em; font-size: .96rem; color: var(--ink); cursor: pointer; }
.estimate-check-opt input { width: 20px; height: 20px; accent-color: var(--orange); flex: 0 0 auto; }
.estimate-check-opt:has(input:checked) { border-color: var(--orange); background: #FFF6F1; font-weight: 700; }
.estimate-error { display: block; color: #C0392B; font-size: .84rem; font-weight: 700; margin: .35rem 0 0; }
.estimate-form-error-top { background: #FDECEA; border: 1px solid #F5C6C0; color: #B23A2E; border-radius: 10px; padding: .8em 1em; margin: 0 1.2rem; font-weight: 700; }
.estimate-privacy-note { font-size: .82rem; color: var(--muted); margin: 0 0 1rem; }
.estimate-privacy-note a { color: var(--navy); text-decoration: underline; }
.estimate-submit { width: 100%; justify-content: center; font-size: 1.1rem; padding: 1em; display: inline-flex; align-items: center; gap: .5em; }
.estimate-submit svg { width: 20px; height: 20px; fill: #fff; }
.estimate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.estimate-thanks { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 2.4rem 1.4rem; }
.estimate-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: #E6F4EA; margin: 0 0 1rem; }
.estimate-thanks-icon svg { width: 34px; height: 34px; fill: #1B6B3A; }
.estimate-thanks h2 { margin: 0 0 .7rem; color: var(--navy); font-size: 1.5rem; }
.estimate-thanks p { color: var(--ink); line-height: 1.8; margin: 0 auto .8rem; max-width: 30em; }
.estimate-thanks-note { font-size: .86rem; color: var(--muted); }
.estimate-thanks .btn { margin-top: .6rem; }

@media (max-width: 480px) {
  .estimate-checks { grid-template-columns: 1fr; }
  .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; }
}

.badge-verified { background: #E6F4EA; color: #1B6B3A; border: 1px solid #BFE3CB; }
/* 2026-09-04: 「自社施工(下請けを使わず自社の職人が塗る)」の業者に付けるタグ。
   確認済み(緑)と紛れないよう、青系の色にした。 */
.badge-selfbuilt { background: #E7F0FB; color: #1D4E89; border: 1px solid #C6DBF3; }
.fact-link { margin-left: .5em; font-size: .88em; white-space: nowrap; }
/* 2026-09-04: Googleの口コミなど、値自体がリンクになっている項目。
   下線+外部リンクアイコンで「押せる」ことをはっきり示す。 */
.fact-value-link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--orange);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.fact-value-link:hover { opacity: .85; }
.fact-value-link-icon { width: .8em; height: .8em; fill: currentColor; flex: 0 0 auto; }
.facility-thumb-note { font-size: .78rem; color: var(--muted); margin: .4rem 0 0; text-align: right; }
.facility-single .facility-thumb { aspect-ratio: auto; background: transparent; }
.facility-card .thumb { aspect-ratio: 3 / 2; border-bottom: 1px solid var(--line); }
.facility-card { position: relative; }
.facility-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.facility-header-title { margin: 0; }
.card-rank {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  flex: 0 0 auto;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  padding: .35em .6em .3em;
  border-radius: 8px;
}
.card-rank small { font-size: .7em; font-weight: 700; margin-left: .1em; }
.card-rank--gold { background: #D7AA3B; color: #fff; border-color: #D7AA3B; }
.card-rank--silver { background: #A7ADB4; color: #fff; border-color: #A7ADB4; }
.card-rank--bronze { background: #B2703B; color: #fff; border-color: #B2703B; }
.facility-card .facility-body { padding-top: 1.1rem; }
.facility-card .thumb + .facility-body { padding-top: 1.1rem; }
.badge-pr { background: var(--orange); color: #fff; border-color: var(--orange); }
.order-note { font-size: .82rem; color: var(--muted); margin: .2rem 0 0; }


/* --- ヒーロー検索:タブ切り替え(2026-09-02、レノボ君のUIに合わせる) --- */
.hero-search--tabs { padding: 0; overflow: hidden; border-radius: 18px; border: 0; box-shadow: 0 10px 30px rgba(18,40,76,.14); }
.hero-search-tabbar { display: flex; }
.hero-search-tab {
  flex: 1 1 50%;
  border: 0;
  background: #EEF1F5;
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
  padding: .7rem .5rem;
  cursor: pointer;
}
.hero-search-tab.is-active { background: #fff; color: var(--navy); box-shadow: inset 0 -3px 0 var(--orange); }
.hero-search-panel { padding: .8rem .85rem .9rem; }
.hero-search-panel[hidden] { display: none; }
.hero-search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1.5px solid #D8DFE8;
  border-radius: 10px;
  padding: 0 .85rem;
  margin-bottom: .65rem;
}
.hero-search-field-chevron { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--navy); pointer-events: none; }
.hero-search-field-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--orange); }
.hero-search-field-icon svg { width: 100%; height: 100%; fill: currentColor; }
.hero-search-field select,
.hero-search-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: .7rem 0;
  font-size: .92rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  width: 100%;
  appearance: none;
}
.hero-search-field select:focus,
.hero-search-field input[type="text"]: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: .8em 2em;
}
.hero-search-submit-icon { flex: 0 0 auto; width: 24px; height: 24px; fill: currentColor; }
.hero-search-submit-arrow { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: currentColor; }
/* 2026-09-04: スマホ幅だと「この塗装屋さんを見る」等が入りきらず、末尾の1文字だけ
   次の行に落ちる不格好な折り返しになっていた。パディング・文字サイズを詰めて1行に収める。
   2026-09-16: エリア側のボタンを「このエリアの塗装屋さんを探す」(14文字)に変えたので、
   さらに文字を小さくして余白も詰めた。11文字の企業名側も同じ指定で問題なく収まる。 */
@media (max-width: 400px) {
  .hero-search-submit { padding: .9em 1.1em; font-size: .95rem; gap: .35em; }
  .hero-search-submit-icon { width: 20px; height: 20px; }
  .hero-search-submit-arrow { right: .8rem; width: 18px; height: 18px; }
}
.hero-search-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  margin: .8rem 0 0;
  font-size: .82rem;
  color: #3B4657;
  font-weight: 700;
}
.hero-search-note-icon { flex: 0 0 auto; width: 17px; height: 17px; }
.hero-search-note-icon svg { width: 100%; height: 100%; fill: #2E9E52; }


/* --- ヘッダーのキャッチ(2026-09-02、参考デザインに合わせて表示) --- */
.site-logo-text { display: flex; flex-direction: column; }
.site-description { display: none; font-size: .72rem; color: var(--muted); font-weight: 600; margin-top: .05rem; letter-spacing: .01em; }
@media (max-width: 600px) {
  .site-description { font-size: .66rem; }
}
@media (max-width: 600px) {
  .site-title { font-size: 1.05rem; white-space: nowrap; }
}

/* =========================================================
   業者カード:参考サイト(近くの屋根修理Navi)型の詳細カード
   2026-09-02。archive-shisetsu / taxonomy-area の一覧で使う。
   ========================================================= */
.facility-grid:has(.facility-card--rich) {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  gap: 1.5rem;
}
.facility-card--rich {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(18,40,76,.07);
  padding: 1.4rem 1.4rem 1.5rem;
  overflow: hidden;
}
/* 有料掲載(PR)のカードは黄色い枠で強調(レノボ君と同じ)。金銀銅の順位色は廃止。 */
.facility-card--rich.is-pr {
  border: 2.5px solid #E8B84B;
  background: linear-gradient(180deg, #FFFBEF, #fff 140px);
}

/* 見出し(バッジ+社名) */
.facility-card--rich .rich-head { display: flex; align-items: flex-start; gap: .9rem; }
.facility-card--rich .card-rank {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  min-height: 72px;
  padding: .5rem .3rem;
  border-radius: 12px;
  background: #EDF1F7;
  color: var(--navy);
  border: 1px solid #DCE4EF;
  text-align: center;
  line-height: 1.1;
}
.facility-card--rich .card-rank-area { font-size: .72rem; font-weight: 700; color: #7C8AA0; }
.facility-card--rich .card-rank-num { font-size: 1.5rem; font-weight: 900; }
.facility-card--rich .card-rank-num small { font-size: .6em; font-weight: 700; margin-left: .05em; }
.facility-card--rich .card-rank--gold   { background: #D7AA3B; }
.facility-card--rich .card-rank--silver { background: #9AA1A9; }
.facility-card--rich .card-rank--bronze { background: #B2703B; }
.facility-card--rich .rich-head-title { flex: 1 1 auto; min-width: 0; padding-top: .1rem; }
.facility-card--rich .rich-head-title h3 { margin: 0; font-size: 1.35rem; font-weight: 900; line-height: 1.3; }
.facility-card--rich .rich-head-title h3 a { color: var(--navy); }
.facility-card--rich .rich-sub { margin: .2rem 0 0; font-size: .9rem; color: var(--muted); font-weight: 700; }

/* PR・確認済みバッジ */
.facility-card--rich .rich-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.facility-card--rich .rich-badges .badge { border-radius: 6px; font-weight: 800; font-size: .78rem; padding: .3em .7em; }

/* サイト画像 */
.facility-card--rich .rich-thumb { display: block; margin: 1rem 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.facility-card--rich .rich-thumb img { display: block; width: 100%; height: auto; }

/* キャッチ */
.facility-card--rich .rich-catch {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--navy);
}

/* スペック表 */
.facility-card--rich .rich-specs { margin: 1rem 0 0; border-top: 1px solid var(--line); }
.facility-card--rich .rich-spec-row {
  display: flex;
  gap: .8rem;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
}
.facility-card--rich .rich-spec-row dt {
  flex: 0 0 6.5em;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
  padding-top: .05em;
}
.facility-card--rich .rich-spec-row dd { flex: 1 1 auto; margin: 0; color: var(--ink); font-size: .95rem; font-weight: 600; word-break: break-word; }
.facility-card--rich .rich-spec-price { color: var(--orange); font-weight: 900; }
/* 2026-09-04: 一覧カードにGoogleの口コミを追加。星ありのときは価格と同じ強調色にする。 */
.facility-card--rich .rich-spec-google { color: var(--orange); font-weight: 900; }
/* 2026-09-04: 詳細ページと同じく、リンクだとわかるよう下線+外部リンクアイコンを付けた
   (以前は色と太字だけでリンクに見えないとの指摘)。 */
.facility-card--rich .rich-spec-google a { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.facility-card--rich .rich-spec-google a:hover { opacity: .85; }
.facility-card--rich .rich-spec-google .fact-value-link-icon { width: .78em; height: .78em; }

/* サービスのタグ */
.facility-card--rich .rich-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.facility-card--rich .rich-tag {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--orange);
  background: #FFF3EC;
  border: 1px solid #F6C9AE;
  border-radius: 8px;
  padding: .35em .8em;
}

/* アクション */
.facility-card--rich .rich-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.3rem 0 0; }
.facility-card--rich .btn-sm { font-size: .95rem; padding: .8em 1.4em; border-radius: 10px; }
.facility-card--rich .rich-more { flex: 1 1 auto; text-align: center; }
.facility-card--rich .rich-tel { flex: 1 1 auto; text-align: center; }
.facility-card--rich .rich-quote { flex: 1 1 auto; text-align: center; }

@media (max-width: 600px) {
  .facility-card--rich { padding: 1.2rem 1.1rem 1.3rem; }
  .facility-card--rich .rich-head-title h3 { font-size: 1.2rem; }
  .facility-card--rich .card-rank { width: 64px; min-height: 64px; }
  .facility-card--rich .card-rank-num { font-size: 1.35rem; }
  .facility-card--rich .rich-actions { flex-direction: column; }
}

/* --- スマホのヘッダー折り返し対策(2026-09-02):キャッチを1行に収める --- */
@media (max-width: 600px) {
  .site-header-inner { gap: .4rem; }
  .site-title { font-size: 1.05rem; white-space: nowrap; }
  .site-description { display: block; white-space: nowrap; font-size: .6rem; margin-top: .05rem; }
  /* 2026-09-04: 「無料相談」がフォント.72rem・パディング.42em .8emで高さ約27pxしか無く、
     隣の「メニュー」ボタン(44×42px)と大きさがバラバラでバランスが悪いとの指摘。
     文字を少し大きくしつつ、両方とも min-height を44pxに揃えて高さを一致させた
     (タップ領域としても44pxはスマホの推奨サイズに合う)。 */
  .header-cta { font-size: .78rem; padding: .6em .95em; gap: .3em; min-height: 44px; box-sizing: border-box; }
  /* 2026-09-04: ロゴをさらに大きくする余白を作るため、幅を食っていたCTAのアイコンを
     スマホ幅だけ非表示に(文字だけの「無料相談」ボタンにする)。これで浮いた幅ぶん、
     ロゴを56px→60pxまで再び引き上げられた。 */
  .header-cta-icon { display: none; }
  .menu-toggle { width: 44px; min-height: 44px; }
  .menu-toggle-bars { font-size: 1.15rem; }
  .menu-toggle-label { font-size: .55rem; }
}
@media (max-width: 380px) {
  .site-description { font-size: .56rem; }
  .header-cta { font-size: .72rem; padding: .55em .75em; min-height: 44px; }
}
/* 2026-09-04: アイコン48px+文字1.05remは360px幅以上を前提(canvas計測)。
   360px未満のごく少数の旧型・小型端末だけ、アイコン・文字ともう一段小さくして
   1行に収める(320px幅でも余白確保。CTAは上の@media(max-width:380px)で
   既に.72remまで縮小済みなのでそのまま流用)。 */
@media (max-width: 359px) {
  .site-logo-mark img { width: 38px; height: 38px; }
  .site-title { font-size: .92rem; }
}

/* ==== 2026-09-03: 記事本文のブロック(表・引用・末尾CTA)。記事12本の下書き投入に合わせて追加 ==== */
.entry-content .wp-block-table { margin: 0 0 3em; overflow-x: auto; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--color-border); font-size: .97rem; }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); text-align: left; vertical-align: top; line-height: 1.6; }
.entry-content .wp-block-table th:last-child,
.entry-content .wp-block-table td:last-child { border-right: none; }
.entry-content .wp-block-table thead th { background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap; }
.entry-content .wp-block-table tbody tr:last-child td { border-bottom: none; }
.entry-content .wp-block-quote { margin: 0 0 3em; padding: 1rem 1.2rem; border-left: 4px solid var(--orange); background: #FFF7F0; border-radius: 0 var(--radius) var(--radius) 0; }
.entry-content .wp-block-quote p { margin: 0 0 .6em; }
.entry-content .wp-block-quote p:last-child { margin: 0; }
.entry-content .article-cta { margin: 3em 0 1em; padding: 1.4rem 1.2rem; background: #EDF1F7; border-radius: var(--radius); text-align: center; }
.entry-content .article-cta p { margin: 0 0 1rem; }
.entry-content .article-cta .wp-block-button__link { display: inline-block; background: var(--orange); color: #fff; font-weight: 800; padding: .9rem 1.6rem; border-radius: 999px; text-decoration: none; }
.entry-content .article-cta .wp-block-button__link:hover { opacity: .9; }


/* ==== 2026-09-03: 料金シミュレーター(/simulator/)。プロトタイプを .sim にスコープして取り込み ==== */
.sim{
    --paper:var(--gray-2); --sub:var(--muted);
    --ai:var(--navy); --ai-deep:var(--navy-deep);
    --kaki:var(--orange); --kaki-deep:var(--orange-dark); --kaki-pale:var(--peach);
    --sky:#DFF0FC; --card:#FFFFFF;
    font-size:1.1875rem; line-height:1.8; color:var(--ink);
  }
.sim .wrap{max-width:620px; margin:0 auto;}

  
  .sim .hero{
    background:linear-gradient(180deg,#FDFBF6 0%, var(--paper) 100%);
    border-radius:22px; text-align:center; padding:10px 18px 6px; margin-bottom:26px;
  }
  .sim .hero .scene{width:min(360px,100%); height:auto; display:block; margin:0 auto -10px;}
  .sim h1{
    font-weight:800; font-size:1.8406rem; color:var(--ai);
    line-height:1.55; text-wrap:balance; margin-top:2px;
  }
  .sim h1 mark{
    background:linear-gradient(transparent 60%, #FCD9AF 60%);
    color:var(--kaki-deep); padding:0 2px;
    display:inline-block; white-space:nowrap;
  }
  .sim .lead{font-size:1.1281rem; color:var(--sub); margin:8px 0 14px;}
  .sim .lead b{color:var(--ink);}
  .sim .yah{
    font-weight:800; font-size:1.1875rem; color:var(--kaki-deep); letter-spacing:.06em;
    margin-bottom:2px;
  }
  .sim .badges{display:flex; justify-content:center; gap:12px; padding-bottom:20px;}
  .sim .badges span{
    width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
    font-weight:800; font-size:1.045rem; line-height:1.35; color:#fff; text-align:center;
    box-shadow:0 3px 0 rgba(51,47,41,.15);
  }
  .sim .badges span:nth-child(1){background:var(--kaki);}
  .sim .badges span:nth-child(2){background:var(--ai);}
  .sim .badges span:nth-child(3){background:var(--kaki);}

  
  .sim .talk{display:flex; align-items:flex-end; gap:12px; margin:26px 0 12px;}
  .sim .talk .face{flex-shrink:0; width:92px; height:auto; border-radius:50%;}
  .sim .nb{white-space:nowrap;}
  .sim .bubble{
    position:relative; background:#fff; border:3px solid var(--ink); border-radius:16px;
    padding:10px 16px; font-weight:800; font-size:1.2112rem; line-height:1.6;
  }
  .sim .bubble::before{
    content:""; position:absolute; left:-14px; bottom:16px;
    border:8px solid transparent; border-right:10px solid var(--ink);
  }
  .sim .bubble::after{
    content:""; position:absolute; left:-9px; bottom:18px;
    border:6px solid transparent; border-right:8px solid #fff;
  }
  .sim .bubble mark{background:none; color:var(--kaki-deep);}

  
  /* 2026-09-04: サイト全体にある無関係の .step { display:flex; align-items:center; }
     (トップページの「3ステップ」用)と class名が衝突し、このシミュレーターの質問カードも
     横並びのflexにされてしまっていた(見出しが左、選択肢が右に押し込まれ、幅が足りず
     カードの文字が縦に1文字ずつ折り返る/ページ全体が横スクロールする不具合の原因)。
     .sim .step は display を指定していなかったため負けていた。明示的に上書きする。 */
  .sim .step{
    display:block;
    background:var(--card); border:1.5px solid var(--line); border-radius:18px;
    padding:20px 16px 18px; margin-bottom:20px;
    box-shadow:0 2px 0 rgba(51,47,41,.05);
  }
  .sim .step-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .sim .step-num{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:var(--kaki); color:#fff; display:grid; place-items:center;
    font-weight:800; font-size:1.3656rem;
  }
  .sim .step-title{font-weight:800; font-size:1.33rem;}

  .sim .opts{display:grid; gap:10px;}
  .sim .opts.g2{grid-template-columns:1fr 1fr;}

  .sim .opt{
    position:relative; display:flex; flex-direction:column; align-items:center;
    cursor:pointer; user-select:none; overflow:hidden;
    background:#FDFBF7; border:3px solid var(--line); border-radius:14px;
    padding:14px 10px 12px; text-align:center;
    transition:border-color .12s, background .12s;
  }
  .sim .opt input{position:absolute; opacity:0;}
  .sim .opt .art{display:block; margin-bottom:6px;}
  .sim .opt .name{display:block; font-weight:800; font-size:1.2825rem; line-height:1.4;}
  .sim .opt .desc{display:block; font-size:0.95rem; color:var(--sub); line-height:1.5; margin-top:1px;}
  .sim .opt:hover{border-color:#C9BBA0;}
  .sim .opt:has(input:checked){border-color:var(--kaki); background:#FFF4E8;}
  .sim .opt:has(input:checked) .name{color:var(--kaki-deep);}
  .sim .badge{
    position:absolute; top:0; right:0; opacity:0; margin:0; display:block;
    background:var(--kaki); color:#fff; border-radius:0 0 0 10px;
    font-size:0.855rem; font-weight:800; padding:3px 10px; transition:opacity .15s;
  }
  .sim .opt:has(input:checked) .badge{opacity:1;}
  .sim .opt:focus-within{outline:4px solid #9CC3E8; outline-offset:2px;}

  
  .sim .opt.paint{flex-direction:row; align-items:center; gap:12px; text-align:left; padding:12px 14px;}
  .sim .opt.paint .badge{right:auto; left:0; border-radius:0 0 10px 0;}
  .sim .opt.paint .art{margin:0; flex-shrink:0;}
  .sim .opt.paint .txt{flex:1; min-width:0;}
  .sim .yrs{display:flex; align-items:center; gap:8px; margin-top:4px;}
  .sim .yrs .bar{flex:1; height:12px; border-radius:999px; background:#EFE7D8; overflow:hidden;}
  .sim .yrs .bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--kaki),#F7A25C);}
  .sim .yrs .num{font-size:0.95rem; font-weight:800; color:var(--kaki-deep); white-space:nowrap;}

  
  .sim .result{
    background:linear-gradient(165deg,var(--ai),var(--ai-deep));
    border-radius:20px; color:#fff; text-align:center;
    padding:26px 20px 22px; margin:2px 0 26px;
    box-shadow:0 5px 0 rgba(18,58,98,.22);
  }
  .sim .result .label{
    display:inline-block; font-size:1.0688rem; background:rgba(255,255,255,.15);
    border-radius:999px; padding:3px 18px; margin-bottom:8px; color:#DCEBF8;
  }
  .sim .result .price{
    font-weight:800; font-size:3.4438rem; line-height:1.3; letter-spacing:.01em;
    font-variant-numeric:tabular-nums; color:#FFE8B0; transition:transform .15s;
  }
  .sim .result .price small{font-size:1.6031rem; color:#fff;}
  .sim .result .price .tilde{color:#fff; font-size:2.1375rem; margin:0 2px;}
  .sim .result .price.pop{transform:scale(1.05);}
  .sim .result .note{font-size:0.9737rem; color:#A9C6E0; margin-top:4px;}
  .sim .yearly{
    margin:14px auto 0; max-width:440px; background:rgba(255,255,255,.12);
    border-radius:12px; padding:10px 16px; font-size:1.0925rem; line-height:1.7;
  }
  .sim .yearly b{color:#FFE8B0; font-size:1.3063rem;}

  
  .sim h2{
    font-weight:800; font-size:1.3656rem; color:var(--ink);
    margin-bottom:10px; display:flex; align-items:center; gap:9px;
  }
  .sim h2::before{content:""; width:10px; height:26px; border-radius:5px; background:var(--kaki);}
  .sim .receipt{
    background:var(--card); border:1.5px solid var(--line); border-radius:16px;
    padding:6px 18px; margin-bottom:26px; box-shadow:0 2px 0 rgba(51,47,41,.05);
  }
  .sim .receipt table{width:100%; border-collapse:collapse;}
  .sim .receipt th, .sim .receipt td{
    padding:11px 2px; border-bottom:2px dashed #ECE3D2; text-align:left;
    font-weight:500; font-size:1.0925rem; line-height:1.5;
  }
  .sim .receipt td{text-align:right; white-space:nowrap; font-weight:800; font-variant-numeric:tabular-nums;}
  .sim .receipt tr:last-child th, .sim .receipt tr:last-child td{border-bottom:none;}
  .sim .receipt tr.total th, .sim .receipt tr.total td{
    border-top:3px solid var(--ink); border-bottom:none;
    font-weight:800; font-size:1.3063rem; color:var(--kaki-deep);
  }

  
  .sim .warn{
    display:flex; gap:12px; align-items:flex-start;
    background:#FFF6EA; border:3px solid var(--kaki); border-radius:16px;
    padding:16px; font-size:1.0925rem; color:#69430F; margin-bottom:20px;
  }
  .sim .warn svg{flex-shrink:0; margin-top:4px;}
  .sim .warn b{display:block; font-size:1.2112rem; color:var(--kaki-deep); margin-bottom:3px;}
  .sim .src{font-size:0.8788rem; color:var(--sub); line-height:1.8;}

  @media (max-width:400px){
    .sim{font-size:1.0625rem;}
    .sim .result .price{font-size:3.0813rem;}
    .sim .opts.g2{grid-template-columns:1fr 1fr;}
  }
  @media (prefers-reduced-motion: reduce){ .sim *{transition:none !important;} }
  .sim{ max-width:620px; margin:0 auto; }
  .sim-cta{ margin-top:2rem; padding:1.4rem 1.2rem; background:var(--gray); border-radius:var(--radius); text-align:center; }
  .sim-cta p{ margin:0 0 1rem; font-weight:700; color:var(--navy); }
  .sim-cta-btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
  .sim-cta-note{ margin:1rem 0 0 !important; font-weight:400 !important; font-size:.85rem; color:var(--muted) !important; }

/* 記事本文からシミュレーターへ誘導するボタン(2026-09-03) */
.entry-content .sim-inline{ margin: 0 0 3em; padding: 1.2rem; background: var(--peach-2); border: 1px solid var(--peach); border-radius: var(--radius); text-align: center; }
.entry-content .sim-inline p{ margin: 0 0 .9rem; color: var(--navy); }
.entry-content .wp-block-buttons{ display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.entry-content .wp-block-button__link{ display: inline-block; background: var(--orange); color: #fff; font-weight: 800; padding: .9rem 1.6rem; border-radius: 999px; text-decoration: none; }
.entry-content .wp-block-button__link:hover{ opacity: .9; color: #fff; }


/* ==== 2026-09-03: 改行と余白の整え(PCで確認して修正) ====================
   指摘:「ホーム画面から記事まで改行や空白の使い方がきれいじゃない」
   実測して直した点は4つ。
   1) ヘッダーのサイト名が2行に割れ、キャッチも「き/っと」で語中改行していた
      (.site-logo-text が flex で 155px まで潰されていた)
   2) 本文・見出しの最終行が1〜2文字だけ残る(泣き別れ)。text-wrap で解消
   3) 記事中の表が has-fixed-layout で全列等幅 → 短い列で語中改行していた
   4) 段落の下余白 3.4em が空きすぎで、段落どうしが繋がって見えない
   ------------------------------------------------------------------- */

/* 1) ヘッダーのブランド部分は縮めない・折り返さない */
.site-logo-text { flex: 0 0 auto; }
.site-title { white-space: nowrap; }
.site-description { white-space: nowrap; }
@media (max-width: 1180px) {
  /* 幅が足りなくなったらキャッチを引っ込める(サイト名は必ず1行で残す) */
  .site-description { display: none; }
}

/* 2) 泣き別れ対策。見出しは行の長さを揃え、本文は最終行が極端に短くならないようにする。
      未対応ブラウザでは無視されるだけで、悪くはならない。 */
h1, h2, h3, h4,
.lead, .section-title, .step-title, .post-card-title,
.rich-head-title h3, .facility-header h1, .page-header h1 {
  text-wrap: balance;
}
/* 長い本文は pretty(最終行が短くなりすぎるのを避ける) */
.entry-content p, .guide p, .guide-lead, .facility-thumb-note {
  text-wrap: pretty;
}
/* 数行で終わる短いかたまりは balance(行の長さを揃える)。
   pretty では2〜4行のときに最終行が2〜3文字だけ残ることがあったため。 */
.entry-content li, .entry-summary, .order-note,
.step .desc, .rich-catch, .rich-sub, .area-card, .sim-cta p {
  text-wrap: balance;
}

/* 3) 記事中の表は内容に合わせて列幅を決める(等幅固定をやめる) */
.entry-content .wp-block-table table.has-fixed-layout { table-layout: auto; }
.entry-content .wp-block-table th { white-space: nowrap; }
.entry-content .wp-block-table td:first-child { word-break: keep-all; }

/* 4) 段落の余白を締める。3.4em は1行の高さの約2倍で、空きすぎだった。
      行間(1.75)は変えていないので窮屈にはならない。 */
.entry-content p { margin-bottom: 2.2em; }
.entry-content ul,
.entry-content ol { margin-bottom: 2.2em; }
.entry-content table { margin-bottom: 2.4em; }
.entry-content h2 { margin-top: 2.8em; margin-bottom: 1em; }
.entry-content h3 { margin-top: 2.2em; margin-bottom: .8em; }

/* エリアページの解説(2026-09-03)。一覧の下に置く読み物パート。 */
.area-guide { margin-top: 3rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.area-guide-title { font-size: 1.35rem; color: var(--navy); margin: 0 0 1.6rem; padding-bottom: .7rem; border-bottom: 2px solid var(--line); text-wrap: balance; }
.area-guide h3 { font-size: 1.08rem; color: var(--navy); margin: 2rem 0 .7rem; text-wrap: balance; }
.area-guide h3::before { content: ""; display: inline-block; width: 6px; height: 1em; background: var(--orange); border-radius: 3px; margin-right: .55em; vertical-align: -.12em; }
.area-guide p { margin: 0 0 1.1em; line-height: 1.9; text-wrap: pretty; }
.area-guide strong { color: var(--navy); }
.area-guide .guide-note { margin-top: 1.8rem; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------------
   業者ページ:順番の根拠になっている数字(2026-09-03 / 1.5.56)
   採点に使った公開情報を、詳細表にそのまま出す。点数は出さない。
   ------------------------------------------------------------------ */
.facility-detail-table .fact-sub {
  font-weight: 400;
  font-size: .88em;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.facility-source-note {
  margin: .9rem 0 2rem;
  font-size: .82rem;
  line-height: 1.9;
  color: var(--muted, #6b7280);
  text-wrap: pretty;
}
.facility-source-note a { color: inherit; text-decoration: underline; }

/* ==========================================================
   S. 無料見積もりページ(/soudan/) 下部セクション 2026-09-06
   レノボ君(近くの屋根修理Navi /mitsumori/)を参考に追加。
   違い(比較) / ご利用の流れ(4コマ画像) / 選ばれる理由 / よくある質問 / CTA帯
   ========================================================== */
.soudan-block { padding: 3.6rem 0; }
.soudan-tint { background: #F3F6FA; }
.soudan-head { margin-bottom: 2rem; }
.soudan-head h2 { color: var(--navy); font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 900; text-wrap: balance; }
.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(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.1rem;
  box-shadow: var(--shadow-card);
}
.cmp-card--ours {
  border: 2px solid var(--orange);
  box-shadow: 0 8px 26px rgba(234, 84, 20, .12);
}
.cmp-tag {
  position: absolute;
  top: -.85em;
  left: 1.2rem;
  background: var(--orange);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  padding: .28em .9em;
  border-radius: 999px;
  letter-spacing: .02em;
}
.cmp-card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.08rem;
  font-weight: 800;
  color: #5A6B7E;
  padding-bottom: .9rem;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: .4rem;
}
.cmp-card--ours .cmp-card-head { color: var(--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: #E9EDF2;
  color: #7A8796;
  font-size: 1rem;
  font-weight: 900;
}
.cmp-card-mark--ok { background: var(--orange); color: #fff; }
.cmp-rows { margin: 0; }
.cmp-row { padding: .95rem 0; border-bottom: 1px dashed var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row dt { font-size: .78rem; font-weight: 700; color: var(--color-text-soft); 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: #3B4652; }
.cmp-card--ours .cmp-row dd b { color: var(--navy); }
.cmp-row dd small { display: block; font-size: .82rem; color: var(--color-text-soft); 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(--navy);
  font-weight: 700;
  margin: 1.6rem auto 0;
  max-width: 720px;
  text-wrap: balance;
}

/* --- ご利用の流れ(4コマ画像) --- */
.flow-manga {
  display: block;
  max-width: 720px;
  margin: 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #fff;
}
.flow-manga img { display: block; width: 100%; height: auto; }
.flow-list {
  list-style: none;
  counter-reset: flow;
  margin: 1.8rem auto 0;
  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(--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(--navy);
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-list b { display: block; color: var(--navy); font-weight: 800; }
.flow-list span { display: block; font-size: .9rem; color: var(--color-text-soft); 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(--line);
  border-radius: 14px;
  padding: 1.5rem 1.2rem 1.4rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #FDEBE1;
  margin-bottom: .8rem;
}
.why-icon svg { width: 28px; height: 28px; fill: var(--orange); }
.why-card h3 { font-size: 1.05rem; color: var(--navy); margin: 0 0 .45em; font-weight: 800; }
.why-card p { margin: 0; font-size: .9rem; color: var(--color-text-soft); line-height: 1.75; text-align: left; }

/* --- よくある質問 --- */
.faq-list { margin: 0; }
.faq-item {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 1.05rem 1.2rem;
  box-shadow: var(--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(--navy); }
.faq-item dd { margin-top: .6rem; color: #3B4652; }
.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(--navy); color: #fff; }
.faq-a { background: var(--orange); color: #fff; }

/* --- CTA帯 --- */
.soudan-cta {
  background: linear-gradient(135deg, #14315F 0%, #1B4F82 100%);
  color: #fff;
  text-align: center;
  padding: 3.2rem 0 3rem;
}
.soudan-cta-title { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 900; margin: 0 0 .5rem; text-wrap: balance; }
.soudan-cta-lead { color: #DCE6F2; margin: 0 0 1.4rem; text-wrap: balance; }
.soudan-cta-btn { display: inline-flex; align-items: center; gap: .5em; }
.soudan-cta-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.soudan-cta-note { color: #B9C8DB; font-size: .82rem; margin: .9rem 0 0; }

@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .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; }
}
/* 2026-09-06 追記: CTAボタンの折り返し防止、見出しの文節改行 */
.soudan-head h2, .soudan-cta-title, .why-card h3 { word-break: auto-phrase; }
.soudan-cta-btn { white-space: nowrap; }
@media (max-width: 768px) {
  .soudan-cta-btn { font-size: 1rem; padding: .95em 1.5em; }
  .soudan-cta-btn svg { flex: 0 0 auto; }
}
/* ============================================================
   編集者から一言 (2026-09-13)
   業者ページの見出し直下と、一覧カードのキャッチ直下に出す。
   吹き出しにせず、左に色の帯を付けた引用風にして「サイト側の言葉」だと分かるようにする。
   ============================================================ */
.editor-note {
  position: relative;
  margin: 0 0 1.5rem;
  padding: .9rem 1rem .9rem 1.1rem;
  background: #FFF8EC;
  border-left: 4px solid var(--accent, #E8672B);
  border-radius: 0 10px 10px 0;
}
.editor-note-label {
  display: inline-block;
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent, #E8672B);
}
.editor-note-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy);
}
.facility-card--rich .editor-note--card {
  margin: .8rem 0 0;
  padding: .7rem .85rem .7rem .95rem;
}
.facility-card--rich .editor-note--card .editor-note-text {
  font-size: .93rem;
  line-height: 1.6;
  font-weight: 500;
}