/* テーマ shushin（終身サポート案内・2026-09-21）：じまい案内3サイトと同じタッチ（style.css の .themed）に、藤色と藤棚の挿絵（静的/support.svg）。
   サイト設定に「テーマ: shushin」と書くと base.html が body に class="themed theme-shushin" を付け、このファイルを style.css の後ろに読み込む
   （gen/render.py の theme_css。静的/theme-<テーマ>.css があるテーマだけ）。
   style.css に足さず別ファイルにしているのは、style.css を書き換えると庭じまい案内・家じまい案内の全ページの ?v= が変わるため。
   基調色（--main・--main-dark・--main-light）はサイト設定の 配色 から base.html が出す。ここでは地の色・文字・線・影・ヒーローの下地だけを決める。
   文字と地のコントラストはすべて 4.5:1 以上（--muted と --bg で 6.1:1、--garden-ink-soft とヒーローの空で 6.3:1）。 */
.theme-shushin {
  --bg: #f7f3fb;                        /* support.svg の下端のぼかし（fade）と同じ色。変えるときは svg 側も合わせる */
  --paper: #ffffff;
  --ink: #2b2636;
  --muted: #5f5870;
  --line: #e1d8ee;
  --garden-ink: #3b2a59;
  --garden-ink-soft: #55427a;
  --shadow: 0 6px 22px rgba(59, 42, 89, .13);
  --shadow-sm: 0 3px 12px rgba(59, 42, 89, .09);
  --hero-sky: #e4d9f2;
  --band-a: rgba(247, 243, 251, .30);
  --band-b: rgba(247, 243, 251, .62);
  --band-c: rgb(247, 243, 251);
}
/* 見出しの折り返し：1文字だけ次の行に落ちないよう行の長さをそろえ、対応しているブラウザーでは文節で折る（未対応のブラウザーは今までどおり） */
.theme-shushin h1, .theme-shushin h2, .theme-shushin h3 { text-wrap: balance; word-break: auto-phrase; }
/* 見出しの後ろを雲が流れるので、家じまい案内と同じ白い光で縁取って読みやすくする */
.theme-shushin .hero-garden h1 { text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.95), 0 0 32px rgba(255,255,255,.8); }
.theme-shushin .hero-garden .hero__lead, .theme-shushin .hero-garden .hero__stats { text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.95), 0 0 24px rgba(255,255,255,.85); }
.theme-shushin .pref-list li a, .theme-shushin .city-list li a { box-shadow: 0 1px 3px rgba(59, 42, 89, .06); }
/* 相談先の種類が1つ（終身サポート事業者）だけなので、ボタンの最小幅を広げる（140px だと9文字が入りきらず欠ける） */
.theme-shushin .cat-nav__list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* 事業者カード（テンプレート/_parts.html の card）：追加項目が多いので見出しの幅を広げ、狭い画面では見出しと値を縦に積む */
/* 同じ行に並んだカードで、確認の枠と相談ボタンの高さをそろえる（2026-09-21 佐藤さんの指摘）。
   カードの高さは .cards のグリッドがそろえているが、中身は上詰めなので、項目の数や名称の折り返しで
   確認の枠とボタンの位置が行内でずれていた。項目の欄（.card__meta）を伸ばして、下の2つを底に押し付ける。 */
/* min-width:0 … グリッドの項目は既定で min-content より縮まないため、スマホ幅でカードが列より 18px はみ出していた
   （画面全体が 2px 横スクロールしていた。2026-09-21 に気づいた。共通の .cards は触らず、このサイトだけで直す） */
.theme-shushin .card { display: flex; flex-direction: column; min-width: 0; }
.theme-shushin .card__meta { flex: 1 1 auto; }
.theme-shushin .card__meta div { padding: 3px 0; }
.theme-shushin .card__meta dt { min-width: 11em; flex: 0 0 11em; }   /* いちばん長い見出し「重要事項説明書の交付」が1行に入る幅 */
.theme-shushin .card__meta dd { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .theme-shushin .card__meta div { flex-direction: column; gap: 0; padding: 4px 0; }
  .theme-shushin .card__meta dt { min-width: 0; flex: none; font-size: .8rem; }
}
/* 「提携」バッジのすぐそばの説明（紹介料を受け取ることの表示。サイト設定の 広告表示.提携バッジ） */
.theme-shushin .card__partner-note { margin: -2px 0 10px; padding: 8px 10px; font-size: .9rem; line-height: 1.7;   /* 周りの文字（.9rem）より小さくしない */ color: var(--ink); background: var(--main-light); border-radius: 8px; }
/* 確認項目：「〇項目で記載を確認」と、折りたたみの中の内訳。順位や点数に見える飾り（星・色分けの丸・棒）は付けない */
.theme-shushin .card__kakunin { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fcfbfe; }
.theme-shushin .card__kakunin-sum { margin: 0; font-size: .92rem; font-weight: 700; color: var(--garden-ink); }
.theme-shushin .card__kakunin details { margin-top: 6px; }
.theme-shushin .card__kakunin summary { cursor: pointer; font-size: .88rem; color: var(--main-dark); padding: 6px 0; min-height: 32px; }
.theme-shushin .card__kakunin summary:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; border-radius: 4px; }
.theme-shushin .card__kakunin-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: .86rem; }
.theme-shushin .card__kakunin-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.theme-shushin .card__kakunin-list li strong { flex: 0 0 auto; font-weight: 700; color: var(--ink); }
.theme-shushin .card__kakunin .note { font-size: .86rem; margin: 6px 0 0; }   /* 内訳と同じ大きさ（注記を内訳より小さくしない） */

/* パソコンのヘッダー：メニューが8項目（追加メニュー3つ）あり、題字の下の段に並ぶ。段の間を詰め、
   固定ヘッダーが高くなる分、地図の凡例から飛んだ先の地方の見出しが隠れないよう、止まる位置を下げる
   （style.css の .region__name は1段のヘッダー＝72px が前提。720〜927px ではメニューが2段に割れて約127px になる） */
@media (min-width: 720px) {
  .theme-shushin .site-header__inner { padding-top: 6px; padding-bottom: 8px; row-gap: 2px; }
  .theme-shushin .nav-pc { gap: 4px 14px; }
  .theme-shushin .region__name { scroll-margin-top: 150px; }
}

/* 印刷：ガイド「契約前のチェックリスト」は「印刷して持っていけます」と案内している。
   A4 の内幅はスマホ用のレイアウトになるので、画面下の固定バー（全ページの下端に重なる）・メニュー・背景の帯を消し、
   本文のあとの相談カード・問い合わせ枠のボタン・姉妹サイトのバナーも紙には出さない（紹介料の表示の一文は紙にも残す） */
@media print {
  .theme-shushin .bottom-bar, .theme-shushin .nav-toggle, .theme-shushin .site-nav, .theme-shushin .page-band,
  .theme-shushin .cat-nav, .theme-shushin .cta, .theme-shushin .consult__card, .theme-shushin .sister, .theme-shushin .site-footer { display: none !important; }
  .theme-shushin .consult { background: none; border: 0; padding: 0 16px; margin-top: 16px; }
  .theme-shushin .site-header { position: static; border-bottom: 0; }
  body.theme-shushin { padding-bottom: 0; background: #fff; }
}