/* =====================================================================
   自治会HP テンプレート — 追加レイアウト（トップページ構図バリエーション）
   ---------------------------------------------------------------------
   ・index.html 〜 index-g.html（案A〜G・7構図）の FV 固有クラスをここに置く。
     ⚠️ 案H「連合会の入り口」型は 2026-08-07 に商品から削除（回覧板連携が1会単位のため）。
        専用クラス（.rengo-hero / .town-* / .doc-list）も同時に除去済み。
   ・template/assets/style.css は変更しない。読み込み順は style.css の後。
   ・トークン（--radius / --tap / --color-* / --fs-*）は既存のものだけを再利用する
     （16進数・white・black の直書き、生の rem 直書きはしない）。
   ・全案共通の制約: 本文18px・最小タップ48px・見出し明朝・WCAG AA・
     prefers-reduced-motion は style.css 側の全体指定を継承する。
   ・由来: showcase/assets/showcase.css（8案の作例）から、納品テンプレに
     必要な構図クラスのみを移植。showcase 側の比較ページ専用クラス
     （.showcase-bar / .compare-*）はここには含めない。
   ===================================================================== */

/* ---------- 共通: 極小幅（〜380px）でヘッダーがはみ出さないよう圧縮 ----------
   （既存 template の header は 320px でロゴ＋メニューぶんが数px あふれるケースがあるため、
     ここで詰める。style.css 本体は変更しない） ---------- */
@media (max-width: 380px) {
  .site-header .container { gap: .5rem; padding: 0 .8rem; }
  .brand { gap: .5rem; }
  .brand__mark { width: 40px; height: 40px; font-size: 1.2rem; }
  .brand__name { font-size: 1.1rem; }
  .nav-toggle { padding: 0 .55rem; }
}

/* ---------- 共通: 団体名が長い案でもナビトグルを押しつぶさない ----------
   word-break: auto-phrase は長い固有名詞（例:「ゆりのき台団地自治会」）を
   1行のまま伸ばすことがあり、隣の .nav-toggle ボタンが最小幅を割り込んで
   文書全体がわずかに横スクロールするケースを実測で確認した（390px幅）。
   ブランド名側を折り返し優先にして防ぐ。 ---------- */
.brand { min-width: 0; }
.brand__name { overflow-wrap: anywhere; }

/* ---------- 共通: 写真プレースホルダ ----------
   顧客写真は納品時まで存在しない（template/assets/photos/ は空）。
   <img> の代わりにこの <div class="photo-ph"> を置いておき、
   顧客写真が届いたら <img src="assets/photos/xxx.jpg" alt="..."> に
   置き換える（README「顧客ごとのリブランド手順」参照）。
   画像0バイトでも壊れた画像アイコンが出ない・レイアウトも崩れない。 ---------- */
/* .photo-ph（写真プレースホルダ）の定義は style.css へ移動した。
   about ページのギャラリーなど、構図バリエーション以外でも使うため。 */

/* =====================================================================
   案A「用事直行」型／案G のFV骨格でも共用（テキスト55 : 写真45）
   ===================================================================== */
.duty-hero { padding: clamp(1.5rem, 3.5vw, 3rem) 0; background: var(--color-primary-tint); }
.duty-hero .container {
  display: grid; grid-template-columns: 55fr 45fr;
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
}
.duty-hero h1 {
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.5; margin: 0 0 .6rem; letter-spacing: .01em;
}
.duty-hero__lead { margin: 0; color: var(--color-text-muted); font-size: var(--fs-base); }
.duty-photo { margin: 0; }
.duty-photo img, .duty-photo .photo-ph {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* 用事ボタン（2×2）。--tap を大きく超える 64px 級 */
.duty-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .8rem; margin-top: 1.4rem;
}
.duty-btn {
  display: flex; align-items: center; gap: .85rem;
  min-height: 68px; padding: .8rem 1rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--color-heading);
  font-weight: 700; line-height: 1.35;
  transition: background .15s ease, border-color .15s ease;
}
.duty-btn:hover { background: var(--color-primary-tint); border-color: var(--color-primary); color: var(--color-primary-dark); }
.duty-btn__icon {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary-dark);
  display: grid; place-items: center;
}
.duty-btn__icon svg { width: 26px; height: 26px; }
.duty-btn__sub {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-muted); margin-top: .1rem;
}
/* 案G: 用事ボタンのうち1つだけピクトグラムを一回り大きくする（ごみの出し方=最優先） */
.duty-btn--lg-icon .duty-btn__icon { width: 60px; height: 60px; }
.duty-btn--lg-icon .duty-btn__icon svg { width: 34px; height: 34px; }

@media (max-width: 860px) {
  .duty-hero .container { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .duty-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   案B「一枚の写真と季節」型（フル幅写真＋白帯h1＋四季パネル）
   ===================================================================== */
.season-hero { padding: 0; }
.season-hero__img, .season-hero__ph {
  display: block; width: 100%;
  height: clamp(300px, 48vh, 540px);
  object-fit: cover;
}
/* 写真の下端に重なる白帯 */
.season-hero__band {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: min(calc(100% - 2.5rem), 56rem);
  margin: clamp(-3.4rem, -6vw, -2.4rem) auto 0;
  padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1.2rem, 4vw, 2.4rem);
  text-align: center;
}
.season-hero__band h1 {
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  line-height: 1.55; margin: 0;
}

/* 写真直下の用事リンク1行 */
.duty-strip {
  list-style: none; margin: 1rem auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 .2rem;
}
.duty-strip li { display: flex; align-items: center; }
.duty-strip li + li::before {
  content: "｜"; color: var(--color-border); margin: 0 .1rem;
}
.duty-strip a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 .8rem;
  font-weight: 700; color: var(--color-primary-dark);
  text-decoration: underline; text-underline-offset: 4px;
  border-radius: 8px;
}
.duty-strip a:hover { background: var(--color-primary-tint); }
/* 狭い画面では1行に収まらず縦積みになり、区切りの「｜」が行頭に孤立するので消す。
   代わりに項目間へ薄い区切り線を敷いて、リンクの切れ目を保つ。 */
@media (max-width: 600px) {
  .duty-strip { flex-direction: column; gap: 0; }
  .duty-strip li { justify-content: center; }
  .duty-strip li + li::before { content: none; }
  .duty-strip li + li { border-top: 1px solid var(--color-line); }
  .duty-strip a { width: 100%; justify-content: center; }
}

/* 四季パネル（4枚固定スロット） */
.seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.season-card {
  margin: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.season-card img, .season-card .photo-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.season-card figcaption { padding: .85rem 1rem 1rem; }
.season-card .season-name {
  display: block; font-family: var(--font-serif); font-weight: 700;
  font-size: var(--fs-lg); color: var(--color-heading); line-height: 1.3;
  margin-bottom: .15rem;
}
.season-card .season-desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 860px) {
  .seasons { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   案C「顔の見える下町」型（テキスト45 : コラージュ55）
   ===================================================================== */
.machi-hero { padding: clamp(1.5rem, 3.5vw, 3rem) 0; background: var(--color-primary-tint); }
.machi-hero .container {
  display: grid; grid-template-columns: 45fr 55fr;
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
}
.machi-hero h1 {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  line-height: 1.55; margin: 0 0 .8rem;
}
.machi-hero__lead { margin: 0; color: var(--color-text-muted); }

/* 固有数値の帯（ピル型） */
.fact-strip {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: .55rem .55rem; margin: 1.1rem 0 0; padding: 0;
}
.fact-strip li {
  background: var(--color-primary-soft); color: var(--color-primary-dark);
  font-weight: 700; font-size: var(--fs-sm);
  padding: .4rem 1rem; border-radius: 999px; line-height: 1.5;
}

/* 写真コラージュ（CSS grid 3スロット固定: 小2枚＋横長1枚） */
.collage {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .9rem; margin: 0;
}
.collage figure { margin: 0; }
.collage img, .collage .photo-ph {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.collage__small img, .collage__small .photo-ph { aspect-ratio: 1 / 1; }
.collage__wide { grid-column: 1 / -1; }
.collage__wide img, .collage__wide .photo-ph { aspect-ratio: 16 / 7; }

/* 「〜のこと」4カード（.feature の見た目を流用したリンクカード） */
.cards-koto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
a.feature {
  display: block; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
a.feature:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
a.feature .koto-more {
  display: inline-block; margin-top: .6rem;
  font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary-dark);
}
@media (max-width: 980px) {
  .machi-hero .container { grid-template-columns: 1fr; }
  .cards-koto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards-koto { grid-template-columns: 1fr; }
}

/* =====================================================================
   案D「団地の掲示板」型（テキスト40 : 掲示板パネル60）
   ===================================================================== */
.danchi-hero { padding: clamp(1.5rem, 3.5vw, 3rem) 0; background: var(--color-primary-tint); }
.danchi-hero .container {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start;
}
.danchi-hero h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.5; margin: 0 0 .6rem;
}
.danchi-hero__lead { margin: 0 0 .2rem; color: var(--color-text-muted); }
/* 案Dの用事ボタンは2つだけ。40fr の狭いカラムでさらに2列に割ると
   1つ193px程度になり、補足テキストが4行に折れて読みにくい。縦積みにする。 */
.danchi-hero .duty-grid { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .danchi-hero .container { grid-template-columns: 1fr; }
}

/* 掲示板パネル（FVの主役。写真無しでも成立させるため surface + border のみで構成） */
.board-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.board-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap;
}
.board-panel__head h2 { margin: 0; font-size: var(--fs-xl); }
.board-panel .news-list { margin-top: .2rem; }

/* 掲示板タグ（回覧/行事/防災の既存タグに団地固有の2種を追加） */
.tag--kouji  { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.tag--dansui { background: color-mix(in srgb, var(--color-emergency) 12%, var(--color-surface)); color: var(--color-emergency); }

/* =====================================================================
   案E「海と避難」型（フル幅写真＋白帯h1＋常設の避難帯）
   ===================================================================== */
.sea-hero { padding: 0; }
.sea-hero__img, .sea-hero__ph {
  display: block; width: 100%;
  height: clamp(260px, 38vh, 480px);
  object-fit: cover;
}
/* スマホでは写真を一段低くして、この構図の主題である「いざという時の帯」の頭を
   最初の1画面に入れる。写真だけだと案B（フル幅写真＋白帯）と見分けがつかず、
   構図を分けている意味が消えるため（2026-08-07 実機検証で確認）。 */
@media (max-width: 600px) {
  .sea-hero__img, .sea-hero__ph { height: clamp(200px, 26vh, 300px); }
}

/* 常設の「いざという時の帯」。緊急色ではない var(--color-primary-soft) を使う */
.tsunami-band { background: var(--color-primary-soft); padding: clamp(1.6rem, 3.5vw, 2.5rem) 0; }
.tsunami-band__lead {
  font-family: var(--font-serif); font-size: var(--fs-xl); text-align: center;
  margin: 0 0 1.2rem; color: var(--color-heading);
}

/* =====================================================================
   案F「大きな字の集落だより」型（1カラム中央寄せ・特大文字）
   ===================================================================== */
/* 文字拡大はこのスコープ付きクラスでのみ行う（:root・グローバルセレクタは触らない）。
   カスタムプロパティは継承するので、var(--fs-sm) 等を参照する共通部品も自動で追随する。 */
.plan-f-body {
  --fs-sm:   1.125rem;  /* 16 → 18px */
  --fs-base: 1.25rem;   /* 18 → 20px */
  --fs-lg:   1.5rem;    /* 22 → 24px */
  font-size: var(--fs-base);
}
.plan-f-body h1 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.5; }

.satoyori-hero { padding: clamp(2rem, 4vw, 3rem) 0; text-align: center; }
.satoyori-hero .container { max-width: 640px; }
.satoyori-photo { margin: 1.6rem auto 0; max-width: 720px; }
.satoyori-photo img, .satoyori-photo .photo-ph {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
}
.satoyori-photo figcaption { margin-top: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.satoyori-news { margin: 1.6rem 0 0; text-align: left; line-height: 1.9; }
.satoyori-news h2 { font-size: var(--fs-lg); margin: 0 0 .6rem; }

/* 電話ボタン（.btn .btn--primary を土台に、番号を大きく2段組みにする） */
.tel-btn { flex-direction: column; gap: .15rem; min-height: 64px; padding: .9rem 1.6rem; margin-top: 1.8rem; }
.tel-btn__number { font-size: 1.6rem; font-family: var(--font-serif); }
.tel-btn__note { font-size: var(--fs-sm); font-weight: 500; opacity: .92; }

/* 用事リンク（縦積み大ボタン4つ。既存 .duty-btn を1カラムで並べる） */
.satoyori-links {
  display: grid; grid-template-columns: 1fr; gap: .9rem;
  margin: 1.8rem auto 0; max-width: 480px;
}

/* =====================================================================
   案G「やさしい日本語」型（ruby併記・第1位ボタン拡大は .duty-btn--lg-icon で対応済み）
   ===================================================================== */
/* やさしい日本語の一文（h1直下）。ruby の rt は少し小さく */
.easy-japanese {
  font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 2.1;
  margin: .7rem 0 0; color: var(--color-heading);
}
.easy-japanese rt { font-size: .55em; }

/* やさしい日本語 併記ブロック（ごみ・防災など特定テーマの補足に使う） */
.easy-callout {
  background: var(--color-primary-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 1rem 1.3rem; margin: 1.3rem 0 0;
}
.easy-callout__label {
  display: inline-block; font-size: var(--fs-sm); font-weight: 700;
  color: var(--color-primary-dark); margin-bottom: .5rem;
}
.easy-callout p { margin: 0; font-size: 1.15rem; line-height: 2.1; }
.easy-callout rt { font-size: .55em; }