@charset "UTF-8";
/* =============================================================
   base.css — デザイントークン / リセット / 共通ユーティリティ
   色・フォントは :root の変数に集約し、各CSSは変数だけを参照する（値の直書き禁止）。
   値は new-theme.js が project.json の brand.colors / brand.fonts から置換する。
   ============================================================= */
:root {
  /* ---- 色（案件の brand.colors） ---- */
  --fs-primary: #22ac38;   /* メインカラー：ナビ・見出しバー・ボタン */
  --fs-accent:  #bdd873;    /* アクセント：CTA・ライン・アイコン */
  --fs-text:    #383838;      /* 本文 */
  --fs-heading: #401f00;   /* 見出し */

  /* ---- 読みやすさ（コントラスト比 4.5:1 以上）のための色 ----
     ブランドの緑 #22ac38 は白地で 3.0:1、黄緑 #bdd873 に白文字は 1.6:1 しかなく、文字には使えない。
     緑・黄緑そのものは線・アイコン・塗りに残し、「文字」と「白文字を載せる塗り」だけ下の色を使う。 */
  --fs-primary-text: #157a26;  /* 緑の文字（白地 5.4:1、淡いベージュ・黄緑の地でも 4.5:1 以上） */
  --fs-primary-fill: #157a26;  /* 白文字を載せる緑の塗り（ボタン） */
  --fs-on-accent:    #401f00;  /* 黄緑(--fs-accent)の塗りに載せる文字（9.3:1） */
  --fs-accent-text:  #5f7a12;  /* 黄緑の文字（白地 4.9:1。--fs-accent #bdd873 は白地で 1.6:1） */
  --fs-sub:          #7a6d4f;  /* ナビの英字・ホバーの塗り（旧 #9b8c6c は 3.3:1） */

  /* ---- 派生色（自動。手で足すのは可） ---- */
  --fs-primary-soft: #f3f6f9;                                        /* color-mix 非対応ブラウザ用フォールバック */
  --fs-primary-soft: color-mix(in srgb, var(--fs-primary) 8%, #fff); /* 淡い背景（帯・表ヘッダー） */
  --fs-accent-soft:  #f7f3f0;
  --fs-accent-soft:  color-mix(in srgb, var(--fs-accent) 12%, #fff);
  --fs-muted:  #5f6b75;   /* 補足・日付（白地 5.5:1。雛形の #7a8792 は 3.7:1） */
  --fs-line:   #dbe2e9;   /* 罫線 */
  --fs-line-2: #eef2f6;   /* 薄い罫線・背景 */
  --fs-white:  #fff;
  --fs-line-color: #06c755; /* LINE ボタン（ブランド指定色） */

  /* ---- フォント（案件の brand.fonts）。個別要素で font-family を指定せず、ここからの継承を基本にする ---- */
  --fs-font-base:  'Noto Sans JP', sans-serif;   /* 本文 */
  --fs-font-serif: 'Kaisei Opti', serif;  /* 見出し（明朝など） */
  --fs-font-en:    'Lato', sans-serif;     /* 欧文ラベル・数字 */

  /* ---- レイアウト ---- */
  --fs-wrap:        1120px;  /* コンテンツ最大幅 */
  --fs-wrap-narrow: 960px;
  --fs-gutter:      20px;
  --fs-header-h:    72px;    /* sticky ヘッダーの高さ（アンカー位置の補正に使う） */
}

/* ---------- 最小リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--fs-header-h); }
body {
  margin: 0;
  font-family: var(--fs-font-base);
  color: var(--fs-text);
  background: var(--fs-white);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* 横はみ出し対策は overflow-x: hidden ではなく clip を使う。
     hidden は body/html をスクロールコンテナにしてしまい、position: sticky のヘッダーが効かなくなる。
     clip はスクロールコンテナを作らないので sticky と両立する。 */
  overflow-x: clip;
}
img, picture, video, svg { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--fs-font-serif); color: var(--fs-heading); font-weight: 700; line-height: 1.5; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
i[class*="fa-"] { font-style: normal; } /* FontAwesome の <i> は font-family をアイコンフォントに保つ（親から継承させない） */

/* ---------- 共通ユーティリティ ---------- */
.wrap        { max-width: var(--fs-wrap); margin-inline: auto; padding-inline: var(--fs-gutter); }
.wrap-narrow { max-width: var(--fs-wrap-narrow); margin-inline: auto; padding-inline: var(--fs-gutter); }
.section     { padding-block: 60px; }
.fs-center   { text-align: center; margin-top: 34px; }
.fs-empty    { text-align: center; color: var(--fs-muted); padding: 40px 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 汎用ボタン（一覧へ戻る・もっと見る） */
.btn-more {
  display: inline-block; min-width: 240px; padding: 14px 32px;
  background: var(--fs-primary-fill); color: var(--fs-white); font-weight: 600; text-align: center;
  transition: filter .2s, transform .2s;
}
.btn-more:hover { filter: brightness(1.1); transform: translateY(-2px); }
@media (max-width: 767px) {
  .section { padding-block: 40px; }
  .btn-more { min-width: 80%; }
}