@charset "UTF-8";
/* =============================================================
   lower-base.css — 下層ページで使う基本スタイル
   移行キットの雛形（base.css / fs-cta.css / fs-theme.css / layout.css）のうち、下層ページで実際に使っているルールだけを元の記述のまま抜き出したもの。
   ============================================================= */

/* ---------- base.css より（9 / 22 ルール） ---------- */
:root {
  /* ---- 色（案件の brand.colors） ---- */
  --fs-primary: #015DB2;   /* メインカラー：ナビ・見出しバー・ボタン */
  --fs-accent:  #7FD5E7;    /* アクセント：CTA・ライン・アイコン */
  --fs-text:    #333333;      /* 本文 */
  --fs-heading: #2e2e2e;   /* 見出し */

  /* ---- 派生色（自動。手で足すのは可） ---- */
  --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:  #7a8792;   /* 補足・日付 */
  --fs-line:   #dbe2e9;   /* 罫線 */
  --fs-line-2: #eef2f6;   /* 薄い罫線・背景 */
  --fs-white:  #fff;
  --fs-line-color: #06c755; /* LINE ボタン（ブランド指定色） */

  /* ---- フォント（案件の brand.fonts）。個別要素で font-family を指定せず、ここからの継承を基本にする ---- */
  --fs-font-base:  'Noto Serif JP', serif;   /* 本文 */
  --fs-font-serif: 'Zen Old Mincho', 'Noto Serif JP', 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: 600; line-height: 1.5; }

/* ---------- fs-cta.css より（1 / 14 ルール） ---------- */
@media screen and (max-width: 768px) {
  body { padding-bottom: 56px; }
}

/* ---------- fs-theme.css より（9 / 125 ルール） ---------- */
.fs-page * { box-sizing: border-box; }
.fs-page img { max-width: 100%; height: auto; }
.fs-main { display: block; }
.fs-crumb__inner { max-width: var(--fs-wrap-narrow); margin: 0 auto; padding: 20px var(--fs-gutter); font-size: 13px; color: var(--fs-muted); }
.fs-crumb a { color: var(--fs-primary); }
.fs-crumb span { margin: 0 8px; color: var(--fs-line); }
.fs-crumb em { font-style: normal; color: var(--fs-muted); }
.fs-btn2 { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 14px 24px; border: 1px solid var(--fs-primary); color: var(--fs-primary); background: var(--fs-white); font-size: 15px; transition: .2s; }
.fs-btn2:hover { background: var(--fs-primary); color: var(--fs-white); }

/* ---------- layout.css より（10 / 32 ルール） ---------- */
.fs-grid { display: grid; gap: 28px; }
.fs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fs-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.fs-fig { margin: 20px 0; }
.fs-fig img { display: block; width: 100%; height: auto; }
.fs-fig--box { max-width: 720px; margin-inline: auto; }
@media (max-width: 900px) {
  .fs-grid--3, .fs-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .fs-grid { gap: 18px; }
  .fs-grid--2, .fs-grid--3, .fs-grid--4 { grid-template-columns: 1fr; }
}