@charset "UTF-8";
/* =========================================================
   fs-body.css — クリーン本文の部品カタログ
     clean-b.js が書き出す構造（.fs-body > section.fs-sec > .fs-sec__in）と、
     そこで使われるクラス・カスタムプロパティを受けるスタイル。
     本番の見た目に寄せた値は案件ごとの実測に合わせて調整する（既定はコンテナ幅1170px）。

   受けるカスタムプロパティ
     --fs-sec-pt / --fs-sec-pb  セクションの上下余白
     --fs-fz / --fs-fz-sp       文字サイズ（PC / SP）
     --fs-lh / --fs-fw          行間 / 太さ
     --fs-hr-w / --fs-hr-h / --fs-hr-c  区切り線の幅・太さ・色
     --fs-mw-img / --fs-mw-txt  画像＋テキストの左右比率
     --fs-fgw / --fs-fgw-sp     画像の表示幅（layout.css が使用）
   ========================================================= */

.fs-body { overflow-x: clip; }

/* ---------- セクション ---------- */
/* 背景画像は疑似要素に敷く。本番は背景レイヤーだけに filter（saturate(15%) など）を掛けており、
   要素そのものに filter を当てると中の文字まで色が変わってしまうため。 */
.fs-sec {
  position: relative;
  padding: var(--fs-sec-pt, 75px) 0 var(--fs-sec-pb, 75px);
}
.fs-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--fs-sec-bgimg, none);
  background-position: var(--fs-sec-bgpos, 50% 50%);
  background-size: cover; background-repeat: no-repeat;
  filter: var(--fs-sec-bgfilter, none);
}
/* 背景色は画像の「上」に重なる（本番は .brz-bg-image の後ろに .brz-bg-color がある）。
   ※ 教訓: 要素の background-color にすると画像の下になり、白被せで淡くする指定が効かない。 */
.fs-sec::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--fs-sec-bg, transparent);
}
.fs-sec > * { position: relative; z-index: 1; }
/* 本番のセクション幅（全幅セクションは none、箱は 1170px×倍率。clean-b が --fs-sec-w で渡す） */
.fs-sec__in { max-width: var(--fs-sec-w, 1170px); margin: 0 auto; padding: 0 var(--fs-gutter); }

/* ---------- テキスト ---------- */
.fs-txt { margin: 0 0 18px; }
.fs-txt:last-child { margin-bottom: 0; }
.fs-txt p,
.fs-txt h2,
.fs-txt h3,
.fs-txt h4,
.fs-txt ul,
.fs-txt ol {
  margin: 0 0 .6em;
  font-size: var(--fs-fz, 15px);
  line-height: var(--fs-lh, 1.9);
  font-weight: var(--fs-fw, 400);
}
.fs-txt > :last-child { margin-bottom: 0; }
.fs-txt h2, .fs-txt h3, .fs-txt h4 { color: inherit; }
.fs-txt ul, .fs-txt ol { padding-left: 1.4em; }
.fs-txt li { font-size: inherit; line-height: inherit; }
.fs-tc { text-align: center; }
.fs-accent { font-style: normal; }
.fs-sp { display: block; height: 1px; }

/* ---------- 区切り線 ---------- */
.fs-hr {
  width: var(--fs-hr-w, 100%); height: 0; margin: 14px auto;
  border: 0; border-top: var(--fs-hr-h, 1px) solid var(--fs-hr-c, var(--fs-line));
}
.fs-hr--under { margin: 6px auto 10px; }

/* ---------- 文字入りの区切り線（線 ― 見出し ― 線）----------
   本番は見出しの左右に罫線が伸びる装飾。線だけにすると見出しの文字が消えるため、
   見出しタグのまま左右の線を疑似要素で描く。
     --fs-fz 文字サイズ ／ --fs-fc 文字色 ／ --fs-ls 字送り ／ --fs-hr-* は区切り線と共通 */
.fs-linehead {
  display: flex; align-items: center; gap: 20px;
  width: var(--fs-hr-w, 100%); margin: 14px auto 20px;
  font-size: var(--fs-fz, 24px); font-weight: 400; line-height: 1.4;
  letter-spacing: var(--fs-ls, normal); color: var(--fs-fc, var(--fs-text));
  white-space: nowrap;
}
.fs-linehead::before,
.fs-linehead::after {
  content: ""; flex: 1 1 0; min-width: 20px; height: 0;
  border-top: var(--fs-hr-h, 2px) solid var(--fs-hr-c, var(--fs-line));
}
@media screen and (max-width: 767px) {
  .fs-linehead { gap: 12px; font-size: min(var(--fs-fz, 24px), 20px); }
}

/* ---------- 画像＋テキストの横並び ---------- */
/* DOM順は常に テキスト → 画像。既定は左テキスト／右画像、--imgleft は左右を入れ替える
   列幅は合計100%で渡ってくるので、そのまま指定すると gap のぶん（30px）だけ右へはみ出す。
   各列から gap の半分を引いて、合計がちょうど100%に収まるようにする。 */
.fs-media {
  display: grid; gap: var(--fs-media-gap, 30px); align-items: center;
  grid-template-columns:
    calc(var(--fs-mw-txt, 50%) - var(--fs-media-gap, 30px) / 2)
    calc(var(--fs-mw-img, 50%) - var(--fs-media-gap, 30px) / 2);
}
.fs-media--imgleft {
  grid-template-columns:
    calc(var(--fs-mw-img, 50%) - var(--fs-media-gap, 30px) / 2)
    calc(var(--fs-mw-txt, 50%) - var(--fs-media-gap, 30px) / 2);
}
.fs-media--imgleft > .fs-media__img { order: -1; }
.fs-media__img, .fs-media__txt { min-width: 0; }

/* ---------- ボタン ---------- */
.fs-btnwrap { margin: 18px 0 0; text-align: center; }

/* ---------- 表 ---------- */
.fs-table-wrap { overflow-x: auto; margin: 18px 0; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.9; }
.fs-table th, .fs-table td { border: 1px solid var(--fs-line); padding: 12px 14px; text-align: left; vertical-align: top; }
.fs-table th { background: var(--fs-primary-soft); font-weight: 400; white-space: nowrap; }
.fs-table--kv th { width: 12em; }

/* ---------- SP ---------- */
@media screen and (max-width: 767px) {
  /* 本番のSPは本文まわりの余白がもう少し広い。詰まり過ぎないよう .6→.8 にする */
  .fs-sec { padding: calc(var(--fs-sec-pt, 75px) * .8) 0 calc(var(--fs-sec-pb, 75px) * .8); }
  /* スマホは画面が狭いので左右の余白を取らない（箱を持つブロックは各自で余白を持つ） */
  .fs-sec__in { padding: 0; }
  /* 本番（Brizy）は本文のモバイル指定が 15px/1.6。変換後のHTMLにSP値が無い場合はPC値がそのまま出て
     文字が大きくなりページが伸びるため、上限を決めて本番に合わせる。 */
  .fs-txt p, .fs-txt ul, .fs-txt ol, .fs-txt li { font-size: var(--fs-fz-sp, min(var(--fs-fz, 15px), 15px)); line-height: var(--fs-lh-sp, 1.6); }
  .fs-txt h2 { font-size: var(--fs-fz-sp, min(var(--fs-fz, 20px), 22px)); line-height: 1.4; }
  .fs-txt h3, .fs-txt h4 { font-size: var(--fs-fz-sp, min(var(--fs-fz, 17px), 18px)); line-height: 1.5; }
  .fs-media, .fs-media--imgleft { grid-template-columns: 1fr; gap: 18px; }
  .fs-table th, .fs-table td { padding: 10px; }
  .fs-table--kv th { width: auto; }
}

/* ---------- 地図（Googleマップ埋め込み） ---------- */
.fs-map { position: relative; width: 100%; aspect-ratio: 16 / 11; }
.fs-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- お問い合わせフォーム（CF7） ---------- */
.fs-form { max-width: 820px; margin: 0 auto; }

/* ---------- 空のとき ---------- */
.fs-empty { text-align: center; color: var(--fs-text); padding: 40px 0; }

/* ---------- 本文中のボタン（色は base.css の --fs-btn。無ければ --fs-accent） ----------
   雛形の .fs-btn2 は min-width:220px のため、2カラムの中に入ると相手の列を潰してしまう。
   本文内では幅の制約を外し、本番の見た目に合わせる（色はテーマ変数に従う）。 */
.fs-grid__col, .fs-media__txt, .fs-media__img { min-width: 0; }
.fs-body .fs-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; max-width: 100%; min-height: 36px; padding: 6px 24px;
  border: 1px solid var(--fs-btn, var(--fs-accent)); border-radius: 27px;
  background: var(--fs-btn, var(--fs-accent)); color: var(--fs-white);
  font-family: var(--fs-font-serif); font-size: 15px; line-height: 1.5; text-decoration: none;
  transition: filter .2s;
}
.fs-body .fs-btn2::after { content: "→"; }
.fs-body .fs-btn2:hover { filter: brightness(1.08); }
/* 白地＋枠線のボタン（本番は一部のリンクがこの形） */
.fs-body .fs-btn2.is-outline { background: var(--fs-white); color: var(--fs-btn, var(--fs-accent)); }
@media screen and (max-width: 767px) {
  .fs-body .fs-btn2 { padding: 6px 18px; font-size: 14px; }
}

/* ---------- 番号付きリスト ----------
   テーマの初期化（base.css の `ul, ol { list-style: none }`）で番号が消えるが、
   本番の <ol> は番号付きで表示されている。本文の中だけ既定へ戻す。
   <ul> は本番側も list-style: none のためそのまま。 */
.fs-body ol { list-style: decimal; padding-left: 2em; margin: 1em 0; }
.fs-body ol li { list-style: inherit; }


/* ---------- 行の背景（clean-b の .fs-rowbg） ----------
   Brizy は帯の背景色・水彩画像をセクションではなく「行」や「列」に敷くことがある。
   ※ クラス名を .fs-row にすると layout.css の「横並びの行」と衝突して中身が flex で並ぶ。 */
/* 行そのものに最大幅がある場合（本番の max-width:70% など）は中央に置く */
.fs-rowbg[style*="--fs-roww"] { max-width: var(--fs-roww); margin-inline: auto; }
.fs-rowbg { position: relative; }
.fs-rowbg::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--fs-rowbgw, 100%); z-index: 0; pointer-events: none;
  background-image: var(--fs-rowbgimg, none);
  background-position: var(--fs-rowbgpos, 50% 50%);
  background-size: cover; background-repeat: no-repeat;
  filter: var(--fs-rowbgfilter, none);
}
/* 背景色は画像の上に重なる。本番は行の padding ぶん（--fs-rowbgpad）だけ画像が額縁のように残る */
.fs-rowbg::after {
  content: ""; position: absolute;
  top: var(--fs-rowbgpad, 0px); bottom: var(--fs-rowbgpad, 0px);
  left: 50%; transform: translateX(-50%);
  width: calc(var(--fs-rowbgw, 100%) - 2 * var(--fs-rowbgpad, 0px));
  z-index: 0; pointer-events: none;
  background-color: var(--fs-rowbg, transparent);
}
.fs-rowbg > * { position: relative; z-index: 1; }

/* ---------- 列幅（clean-b が本番の％を --fs-gc で渡してくる行） ----------
   本番の列は合計100%なので、％で指定する行だけ横の間隔を取らない（取ると右へはみ出す）。
   ※ このファイルは layout.css より後に読まれる。ここで @media の外に書くと
     layout.css のSP用「1列に戻す」指定を打ち消してしまうので、SP指定もこの下に置く。 */
.fs-grid--2 { grid-template-columns: var(--fs-gc, repeat(2, 1fr)); }
.fs-grid--3 { grid-template-columns: var(--fs-gc, repeat(3, 1fr)); }
.fs-grid--4 { grid-template-columns: var(--fs-gc, repeat(4, 1fr)); }
.fs-grid[style*="--fs-gc"] { column-gap: 0; justify-content: center; }  /* 合計が100%未満の行（中央寄せ）にも対応 */
@media screen and (max-width: 767px) {
  /* スマホは本番と同じく1列に積む */
  .fs-grid--2, .fs-grid--3, .fs-grid--4 { grid-template-columns: 1fr; }
  /* 極端に細い列（アイコン・飾り罫）がある行だけは本番と同じく横並びのまま */
  .fs-grid--keep { grid-template-columns: var(--fs-gc, repeat(2, 1fr)); }
}

/* ---------- 列の内側余白 ----------
   Brizy の列（.brz-column__items）は既定で padding:5px 15px。これが無いと中の画像や文章が
   列いっぱいに広がり、本番より一回り大きくなる（本番116列中97列がこの値）。 */
.fs-grid__col, .fs-media__txt, .fs-media__img { padding: 5px 15px; }
@media screen and (max-width: 767px) {
  .fs-grid__col, .fs-media__txt, .fs-media__img { padding: 5px 8px; }
}

/* ---------- 書体 ----------
   本番は段落・見出しごとに font-family をクラスで持っている（brz-ff-noto_serif_jp など）。
   clean-b が --fs-ff で渡すので、テキスト部品で受ける。
   ※ 教訓: 拾わないと本番で明朝の本文が全部テーマ既定のゴシックになる。 */
.fs-txt p,
.fs-txt h2,
.fs-txt h3,
.fs-txt h4,
.fs-txt ul,
.fs-txt ol,
.fs-txt li { font-family: var(--fs-ff, inherit); }
.fs-linehead { font-family: var(--fs-ff, inherit); }

/* =========================================================
   本番のグローバル文字設定（Brizy の Typography / Global Colors を移植）
     本文・見出しとも書体は明朝。本番は 'Noto Serif' 指定で、日本語グリフを持たないため
     端末の明朝（游明朝・ヒラギノ明朝）にフォールバックしていた。
     どの端末でも同じ見え方になるよう Noto Serif JP を読み込んで固定する。
     サイズはページごとに clean-b が --fs-fz などで上書きする。ここは既定値。
   ========================================================= */
.fs-body { font-family: var(--fs-font-serif); color: #1c1c1c; }
.fs-body .fs-txt h1,
.fs-body .fs-txt h2,
.fs-body .fs-txt h3,
.fs-body .fs-txt h4 { font-family: var(--fs-font-serif); color: #666; }

.fs-body .fs-txt p,
.fs-body .fs-txt ul,
.fs-body .fs-txt ol,
.fs-body .fs-txt li { font-size: var(--fs-fz, 16px); line-height: var(--fs-lh, 1.9); letter-spacing: var(--fs-ls, 0); font-weight: var(--fs-fw, 400); }
.fs-body .fs-txt h1 { font-size: var(--fs-fz, 45px); line-height: var(--fs-lh, 1.3); letter-spacing: var(--fs-ls, -1.5px); font-weight: var(--fs-fw, 400); }
.fs-body .fs-txt h2 { font-size: var(--fs-fz, 30px); line-height: var(--fs-lh, 1.3); letter-spacing: var(--fs-ls, -1.5px); font-weight: var(--fs-fw, 400); }
.fs-body .fs-txt h3 { font-size: var(--fs-fz, 25px); line-height: var(--fs-lh, 1.4); letter-spacing: var(--fs-ls, -1.5px); font-weight: var(--fs-fw, 400); }
.fs-body .fs-txt h4 { font-size: var(--fs-fz, 20px); line-height: var(--fs-lh, 1.5); letter-spacing: var(--fs-ls, -0.5px); font-weight: var(--fs-fw, 400); }

@media screen and (max-width: 1024px) {
  .fs-body .fs-txt p,
  .fs-body .fs-txt ul,
  .fs-body .fs-txt ol,
  .fs-body .fs-txt li { font-size: var(--fs-fz-sp, 15px); line-height: var(--fs-lh-sp, 1.6); }
  .fs-body .fs-txt h1 { font-size: var(--fs-fz-sp, 35px); line-height: 1.2; letter-spacing: -1px; }
  .fs-body .fs-txt h2 { font-size: var(--fs-fz-sp, 25px); line-height: 1.2; letter-spacing: -1px; font-weight: 700; }
  .fs-body .fs-txt h3 { font-size: var(--fs-fz-sp, 23px); line-height: 1.3; letter-spacing: -1px; }
  .fs-body .fs-txt h4 { font-size: var(--fs-fz-sp, 19px); line-height: 1.4; letter-spacing: -0.5px; }
}
@media screen and (max-width: 767px) {
  .fs-body .fs-txt h1 { font-size: var(--fs-fz-sp, 30px); line-height: 1.3; }
  .fs-body .fs-txt h2 { font-size: var(--fs-fz-sp, 22px); line-height: 1.3; }
  .fs-body .fs-txt h3 { font-size: var(--fs-fz-sp, 19px); line-height: 1.3; letter-spacing: -0.5px; }
  .fs-body .fs-txt h4 { font-size: var(--fs-fz-sp, 18px); line-height: 1.4; letter-spacing: 0; }
}

/* ---------- アイコン付きのテキスト（.fs-chip） ----------
   本番の Brizy には「背景が透明・枠なし・リンク先なし」のボタンがあり、
   実体はチェック（✔）や矢印（→）付きの文字列だった。塗りつぶしボタンにせず、
   リンクでもない（<span>）ので、見た目も意味も本番どおりになる。 */
.fs-body .fs-chip { display: inline-flex; align-items: flex-start; gap: 10px; color: #666; font-size: var(--fs-fz, 15px); line-height: var(--fs-lh, 1.9); }
.fs-body .fs-chip::before { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 13px; line-height: inherit; flex: 0 0 auto; }
.fs-body .fs-chip--check::before { content: "\f00c"; }
.fs-body .fs-chip--arrow::before { content: "\f061"; }
.fs-body .fs-chip svg { display: none; }  /* 本番のインラインSVGは ::before に置き換えている */

/* ✔付きテキストは本番では左寄せ（Brizyの中央寄せ指定が効いていない） */
.fs-body .fs-txt p:has(.fs-chip) { text-align: left; }

/* ---------- 見出しの帯（.fs-rowbg）の中の余白 ----------
   本番の実測: 帯 1170x69 に対して文字 1140x39＝上下左右に15pxの余白。
   余白が無いと文字が帯の縁に貼り付いて窮屈に見えるため、本番と同じ15pxを入れる。
   横は、帯だけコンテンツ幅の外側（ガター分）まで広げて本番と同じ見え方にする。 */
.fs-body .fs-rowbg { padding: 15px var(--fs-gutter); }
@media screen and (min-width: 768px) {
  .fs-body .fs-rowbg { margin-inline: calc(var(--fs-gutter) * -1); }
}

@media screen and (max-width: 767px) {
  /* SPの本文ブロックの間隔（本番は段落と写真の間がもう少し空いている） */
  .fs-body .fs-txt { margin-bottom: 26px; }
  .fs-body .fs-rowbg { padding: 15px var(--fs-gutter); }
}