/* 令和8年9月台風第25号に関する情報(随時更新) 記事専用スタイル
   対象: docs/2026093000046/index.html
   読み込み: 記事本文の Font Awesome の <link> の後で読み込むこと
---------------------- */

/* section-band: アイコン付き帯状見出し
   (class="section-band" を付けた h2 のみに適用。汎用の .body h2 には影響しない)
   - 共通デザインは濃い青ベース(左帯は水色)
   - id="hisai-shien"(被災された皆様へ・支援情報)は色のみ赤系(左帯は黄色)に上書きして区別する
---------------------- */

/* 共通: 濃い青ベースの帯
   (site.css の汎用 .body h2 に詳細度で勝ち、かつ Font Awesome の .fas / .fa-solid
    との読み込み順に依存しないよう .body h2.section-band で指定する) */
.body h2.section-band {
  /* .fas が付与する display:inline-block / line-height:1 を打ち消し、横幅いっぱいの帯にする */
  display: flex;
  align-items: center;
  gap: 0.2em;
  /* 上の余白は site.css の .body ul+h2 等(1.5rem)より広く取る。
     em は見出し自身の文字サイズ(1.25rem)基準のため 2em ≒ 2.5rem */
  margin: 2em 0 1em;
  padding: 0.3em 0.9em 0.3em 0.7em;
  /* 汎用 .body h2 の下線を消し、左に水色の帯を付ける
     (#hisai-shien の黄色と同じ「背景より明るい帯」だが、寒色にして警告色とは区別する) */
  border: none;
  border-left: 0.35em solid #8ab4f8;
  border-radius: 0.3em;
  /* 背景はサイトのベースカラー(--main-color-1: #214098)を中心とした濃い青のグラデーション
     (#172e6c は --btn-hover-color) */
  background: linear-gradient(160deg, #3a5fc0 0%, #214098 60%, #172e6c 100%);
  color: #fff;
  /* .fas により見出し全体が Font Awesome 指定になるため、本文は和文ゴシックに戻す */
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  /* 文字サイズは汎用 .body h2 (1.25rem) と同じ */
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.25);
}

.body h2.section-band::before {
  /* アイコン(fa-xxx の content)は Font Awesome 書体のまま白で表示 */
  flex-shrink: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.1em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* 被災された皆様へ・支援情報: 色のみ上書き(大きさ・余白・影は共通デザインに従う) */
#hisai-shien {
  /* 左に黄色の警告帯、背景は .inline-badge--cancel と同系統の赤グラデーション */
  border-left-color: #ffd400;
  background: linear-gradient(160deg, #e8383f 0%, #d61f2c 60%, #a50f1c 100%);
  color: #fff;
}

#hisai-shien::before {
  /* 警告アイコン(fa-triangle-exclamation)は黄色で表示 */
  color: #ffd400;
}

/* shien-box: 被災された皆様へ・支援情報ボックス
   (div.shien-box で h2#hisai-shien と div.shien-group を囲む)
   - ボックス全体: 赤枠 + 温かみのあるクリーム色の背景
   - 見出し: ボックス上部のヘッダーとして配置し、右端に支援のクリップアートを表示
   - ブロック(div.shien-group): 内容ごとにリンクを分け、色を変えた枠で囲む
       - shien-group--soudan: 相談・手続き・生活支援(オレンジ系 = --main-color-2 系)
       - shien-group--genmen: 保険料等の減免(空色系。医療・保険を連想させ、サイトの青とも調和する)
       - shien-group--kyufu : 支援金・見舞金・貸付(緑系 = --main-color-3 系)
     色は下記の CSS 変数で切り替え、小見出し・カードのアイコン丸・矢印・ホバー枠も揃える
       --shien-accent / --shien-accent-light / --shien-accent-dark : アクセント色(明 / 中 / 暗)
       --shien-text        : 小見出しの文字色(背景とのコントラスト確保のため暗めの色)
       --shien-bg          : ブロックの背景色
       --shien-border      : ブロックの枠線色
       --shien-card-border : カードの枠線色
   - リンク一覧: アイコン付きの白いカードを画面幅に応じた列数で並べる
       (PC の広い画面では 3 列程度、狭い画面では 1 列)
   - リンクが今後増えても縦に間延びしないよう、カード・見出し・ブロックの余白は小さめにする
---------------------- */

.body .shien-box {
  /* 色変数の既定値(オレンジ系)。ブロックごとに .shien-group--xxx で上書きする */
  --shien-accent-light: #f7883f;
  --shien-accent: #f16622;
  --shien-accent-dark: #d24f12;
  --shien-text: #b4420d;
  --shien-bg: #fff1e3;
  --shien-border: #f6c9a4;
  --shien-card-border: #f2d2b6;
  margin: 2.5rem 0 2rem;
  border: 3px solid #d61f2c;
  border-radius: 0.6em;
  background: #fff7e8;
  /* 見出しの角をボックスの角丸に合わせて切り落とす */
  overflow: hidden;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.15);
}

/* ボックス内の見出し: 帯をボックスのヘッダーにする(背景色は #hisai-shien のまま)
   ボックスの赤枠で囲むため、左の帯(#hisai-shien の黄色)は表示しない */
.body .shien-box > h2.section-band {
  margin: 0;
  /* 縦幅を抑えるため上下の余白は小さめにする */
  padding: 0.35em 0.9em;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
}

.body .shien-box > h2.section-band::after {
  /* 右端に支援のクリップアート(fa-hand-holding-heart)を薄く大きめに表示 */
  content: "\f4be";
  flex-shrink: 0;
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.25em;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: none;
}

/* ブロック: 色付きの背景と枠で囲み、ボックス内で区切る */
.body .shien-box .shien-group {
  margin: 0.7em 0.8em;
  padding: 0.6em 0.8em 0.8em;
  border: 1px solid var(--shien-border);
  border-top: 0.25em solid var(--shien-accent);
  border-radius: 0.5em;
  background: var(--shien-bg);
}

/* 相談・手続き・生活支援: オレンジ系(既定値と同じだが明示しておく) */
.body .shien-box .shien-group--soudan {
  --shien-accent-light: #f7883f;
  --shien-accent: #f16622;
  --shien-accent-dark: #d24f12;
  --shien-text: #b4420d;
  --shien-bg: #fff1e3;
  --shien-border: #f6c9a4;
  --shien-card-border: #f2d2b6;
}

/* 保険料等の減免: 空色系
   (赤・オレンジ・緑と区別でき、ネガティブな印象を与えない青系。
    下に続く紺色の帯見出し(section-band)と紛れないよう明るめの空色にする) */
.body .shien-box .shien-group--genmen {
  --shien-accent-light: #4aaee8;
  --shien-accent: #1a87d0;
  --shien-accent-dark: #126aa6;
  --shien-text: #0b5a91;
  --shien-bg: #eaf5fd;
  --shien-border: #a9d3f0;
  --shien-card-border: #c4e1f5;
}

/* 支援金・見舞金・貸付: 緑系(サイトのアクセントカラー --main-color-3: #019f49 を中心に) */
.body .shien-box .shien-group--kyufu {
  --shien-accent-light: #2fbf6a;
  --shien-accent: #019f49;
  --shien-accent-dark: #017a38;
  --shien-text: #016630;
  --shien-bg: #eaf7ee;
  --shien-border: #a9dcbc;
  --shien-card-border: #bfe5cc;
}

/* 2 つ目以降のブロックは上のブロックとの間を詰める */
.body .shien-box .shien-group + .shien-group {
  margin-top: 0;
}

/* ブロックの小見出し
   (site.css の汎用 .body h3 の左の太い帯・字下げ・青文字・余白と、
    .fas による inline-block / Font Awesome 書体 / line-height:1 を打ち消す) */
.body .shien-box h3.shien-group-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.5em;
  padding: 0 0 0.25em;
  text-indent: 0;
  border: none;
  border-left: none;
  border-bottom: 2px solid var(--shien-accent);
  background: none;
  color: var(--shien-text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* 小見出しのアイコン(h3 の fa-xxx の content)はアクセント色で表示 */
.body .shien-box h3.shien-group-title::before {
  flex-shrink: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--shien-accent);
}

/* リンク一覧: site.css の .body ul の余白・行頭記号を打ち消してカードのグリッドにする
   列数は固定せず、1 列の最小幅(18em)が確保できるだけ並べる(PC の広い画面では 3 列程度)
   min(100%, 18em) により、ボックスが 18em より狭いときも横にはみ出さず 1 列になる */
.body .shien-box ul.shien-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18em), 1fr));
  gap: 0.4em 0.5em;
  margin: 0;
  /* 外側の余白はブロック(.shien-group)側で取る */
  padding: 0;
  list-style: none;
}

/* カード
   (li に付けた .fas による inline-block / Font Awesome 書体 / 太字 / line-height:1 と、
    site.css の .body ul>li の行頭画像を打ち消す) */
.body .shien-box ul.shien-list > li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  /* site.css の .contentGpArticleDoc li の上下 margin(10px)がグリッドの隙間に加算されるため打ち消す */
  margin: 0;
  /* 縦幅を抑えるため上下の余白は小さめにする */
  padding: 0.45em 0.7em;
  border: 1px solid var(--shien-card-border);
  border-radius: 0.5em;
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.body .shien-box ul.shien-list > li:hover {
  border-color: var(--shien-accent);
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* カード左のアイコン(li の fa-xxx の content)をブロックのアクセント色の丸の中に白で表示 */
.body .shien-box ul.shien-list > li::before {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--shien-accent-light) 0%, var(--shien-accent) 60%, var(--shien-accent-dark) 100%);
  color: #fff;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1em;
}

/* カード右の矢印(fa-chevron-right) */
.body .shien-box ul.shien-list > li::after {
  content: "\f054";
  flex-shrink: 0;
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--shien-accent-dark);
}

.body .shien-box ul.shien-list > li > a,
.body .shien-box ul.shien-list > li > a:visited {
  color: var(--mono-color-1);
  font-weight: 700;
  text-decoration: none;
}

.body .shien-box ul.shien-list > li > a:hover {
  color: var(--a-hover-color);
  text-decoration: underline;
}

/* カード全体をクリック可能にする(リンクの当たり判定をカード全面に広げる) */
.body .shien-box ul.shien-list > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* PC / スマホでの表示切り替え
   - sp-only: スマホ(600px 以下)のみ表示(例: 見出し途中の改行 <br class="sp-only" />)
   - pc-only: PC のみ表示(例: 改行位置の「・」)
---------------------- */

.body .sp-only {
  display: none;
}

@media screen and (max-width:960px) {
  .body h2.section-band {
    font-size: 1.15rem;
  }
}

@media screen and (max-width:600px) {
  .body .shien-box ul.shien-list {
    grid-template-columns: 1fr;
    gap: 0.3em;
  }

  .body .shien-box ul.shien-list > li {
    padding: 0.4em 0.6em;
  }

  .body .shien-box .shien-group {
    margin: 0.5em;
    padding: 0.5em 0.6em 0.6em;
  }

  .body .sp-only {
    display: inline;
  }

  .body .pc-only {
    display: none;
  }
}