/* =============================================================================
   テンプレート「もえぎ」 v0.1（ksjc 用。仕様: cms/docs/仕様_ksjcテンプレート.md）
   緑の線のヘッダー。ベージュの左の列に第 1 階層の縦のメニュー。セクションの下の階層は本文の上にタブ（白い箱）で並ぶ。
   緑の帯の見出し、緑の 2 段のフッター。画像は持たず CSS だけで描く（ロゴ・バナーは設定とデータ）。
   スマホ（760px 以下）は左の列をハンバーガーの中へ。文字サイズ・背景色の切り替えは theme.js（<html> の data-fs・data-bg）。
   ============================================================================= */
:root {
  --c-main: #426f5b;        /* 上の線・左の列の字・切り替えの箱・フッター 1 段目・タブの印 */
  --c-accent: #426f5b;      /* 本文の見出し（h2）の帯 */
  --c-mark: #fceead;        /* 今いる所（タブ・目次） */
  --c-side: #f5eedb;        /* 左の列とタブの帯の地 */
  --c-footer2: #618b79;     /* フッター 2 段目 */
  --c-line: #dee2e0;        /* 縦線・項目の間の線 */
  --c-text: #333333;
  --c-link: #0033cc;
  --c-muted: #666666;
  --c-soft: #f3f5f3;
  --c-bg: #ffffff;
  --c-primary: var(--c-main);  /* 部品の「今いる札」（絞り込み・ページ送り）の色 */
  --c-box: #ffffff;            /* 左の列の項目・タブの箱 */
  --c-box-ink: var(--c-main);  /* 左の列の項目の字 */
  --c-box-line: #cccccc;       /* タブの箱の枠 */
  --c-hd-a: #e4e6e4;           /* ヘッダーのグラデーション（ロゴ画像の地の色に合わせる。元は #ffffff → #f3f5f3） */
  --c-hd-b: #ffffff;
  --c-hover: #efefef;          /* 左の列の今いる所・マウス */
  --c-hover-ink: #555555;
  --c-crumb: #666666;
  --c-sw: var(--c-main);       /* 切り替えの箱・ハンバーガー */
  --c-sw-ink: #ffffff;
  --c-sw-on: #cfe3d8;          /* 切り替えで押したボタン */
  --c-h2-ink: #ffffff;
  --c-mark-ink: #333333;
  --c-foot-ink: #ffffff;
  --font-body: "Noto Sans JP", "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-maru: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Hiragino Sans", sans-serif;
  --page: 1080px;
  --side: 180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 文字の大きさ（theme.js が data-fs を付ける。部品は rem なので全体が大きくなる） */
html[data-fs="s"] { font-size: 85%; }
html[data-fs="l"] { font-size: 115%; }
html[data-fs="xl"] { font-size: 135%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.8; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; color: #000; padding: .5em 1em; }
.page { background: var(--c-bg); min-height: 100vh; }
.nav-toggle, .nav-btn { display: none; }

/* ---- ヘッダー：上に緑の線、淡い地、下に線。左にロゴ、右に切り替えの箱（ヘッダーは画面の端まで） ---- */
.site-header { border-top: 4px solid var(--c-main); background: linear-gradient(var(--c-hd-a), var(--c-hd-b)); border-bottom: 1px solid var(--c-line); }
.header-in { display: flex; flex-wrap: wrap; align-items: center; max-width: var(--page); min-height: 96px; margin-inline: auto; padding: 6px 12px; gap: 6px 12px; }
.brand { text-decoration: none; color: var(--c-text); font-size: 1.3rem; font-weight: 700; }
.brand img { display: block; width: auto; max-width: min(70vw, 460px); height: auto; object-fit: contain; }

/* 切り替えのボタン（base.html では hidden。theme.js が動いたときだけ外す） */
.tool-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-left: auto; padding: 6px 12px; background: var(--c-sw); color: var(--c-sw-ink); border-radius: 8px; font-size: .8rem; }
.tool-switch[hidden] { display: none; }
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-label { margin-right: .3em; white-space: nowrap; }
.tool-switch button { font: inherit; padding: .15em .65em; border: 1px solid #fff; background: #fff; color: #333; border-radius: 3px; cursor: pointer; }
.tool-switch button[aria-pressed="true"] { background: var(--c-sw-on); border-color: var(--c-sw-on); color: #1f3d30; font-weight: 700; }
.tool-switch button:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

/* ---- 骨組み：左の列 180px（ベージュ。下まで続く）＋ 本文の列（左右に縦線）。中身の幅は 1080px ---- */
.frame { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); max-width: var(--page); margin-inline: auto; align-items: stretch; }
.side-col { background: var(--c-side); min-width: 0; border-left: 1px solid var(--c-line); }
.main-col { min-width: 0; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
.main-col > main { padding: 14px 20px 50px; }
.full { max-width: var(--page); margin-inline: auto; padding: 20px 12px 50px; }

/* ---- 左の列：第 1 階層の縦のメニュー（白い地・間に線・左に「›」・字は緑）。今いるセクションは淡い灰色 ---- */
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav a { position: relative; display: block; padding: 14px 22px 14px 24px; background: var(--c-box); color: var(--c-box-ink); text-decoration: none; font-size: 1.05rem; line-height: 1.5; border-bottom: 1px solid var(--c-line); }
.main-nav a::before { content: "›"; position: absolute; left: 10px; top: 50%; translate: 0 -50%; font-weight: 700; font-size: 1.1em; line-height: 1; }
.main-nav a:hover { background: var(--c-hover); }
.main-nav .is-active > a, .main-nav .is-current > a { background: var(--c-hover); color: var(--c-hover-ink); }
.main-nav .is-active > a::after, .main-nav .is-current > a::after { content: "›"; position: absolute; right: 10px; top: 50%; translate: 0 -50%; font-weight: 700; line-height: 1; }
/* ドロップダウンは使わない（上のメニューの設定の「下の階層」は出さない） */
.main-nav .sub, .main-nav .mega, .main-nav .has-sub > a::after { display: none !important; }
.side-area { padding: 0 10px; }
.side-area:not(:empty) { margin-top: 14px; }
.side-area img { max-width: 100%; height: auto; }
.side-col > .side-area:last-child:not(:empty) { margin-bottom: 14px; }

/* ---- パンくず ---- */
.crumbs { font-size: .84rem; color: var(--c-crumb); padding: 8px 20px; border-bottom: 1px solid var(--c-line); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25em; }
.crumbs li + li::before { content: ">"; margin-right: .25em; }
.crumbs li:last-child { font-weight: 700; }
.crumbs a { color: var(--c-crumb); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs:empty { display: none; }

/* ---- 見出し帯：セクション名。太い丸ゴシック・灰色の字に白い縁と淡い影（元は文字の画像） ---- */
.sec-title { padding: 10px 20px 6px; background: var(--c-bg); font-family: var(--font-maru); font-weight: 700; font-size: 2.2rem; line-height: 1.3; letter-spacing: .04em; color: #555;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 2px 2px 3px rgba(0,0,0,.25); overflow-wrap: anywhere; }
.sec-title:empty { display: none; }
/* メインビジュアルがあるページ（トップなど）は、セクション名の帯を出さない */
.has-hero.layout-no-menu .sec-title { display: none; }

/* ---- セクションのタブ：ベージュの帯に白い箱。今いる所（と上の階層）は淡い黄色。2 段目から下は出さない ---- */
.sec-tabs { background: var(--c-side); padding: 6px; }
.sec-tabs:empty { display: none; }
.sec-tabs ul { list-style: none; margin: 0; padding: 0; }
.sec-tabs > ul { display: flex; flex-wrap: wrap; gap: 6px; }
.sec-tabs ul ul { display: none; }
.sec-tabs > ul > li { display: flex; }
.sec-tabs > ul > li > a { position: relative; display: flex; align-items: center; min-width: 140px; min-height: 40px; padding: 4px 10px 4px 24px; background: var(--c-box); border: 1px solid var(--c-box-line); color: var(--c-text); text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.sec-tabs > ul > li > a::before { content: "›"; position: absolute; left: 9px; top: 50%; translate: 0 -50%; color: var(--c-main); font-weight: 700; line-height: 1; }
.sec-tabs > ul > li > a:hover { text-decoration: underline; }
.sec-tabs > ul > li.is-current > a, .sec-tabs > ul > li:has(.is-current) > a { background: var(--c-mark); color: var(--c-mark-ink); }
/* right-menu：タブを本文の右に縦に出す */
.with-tabs { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
.sec-tabs-side { order: 2; padding: 10px; }
.sec-tabs-side > ul { flex-direction: column; }
.sec-tabs-side > ul > li > a { min-width: 0; width: 100%; }

/* ---- トップの画像の上の文（リード）：基本は .95rem。少し大きくする ---- */
.t-moegi .b-hero-lead { font-size: 1.45rem; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
/* 字のまとまりの後ろを、透けた黒で少し暗くする（画像の上でも字が読めるように） */
.t-moegi .b-hero-text { background: rgba(0,0,0,.3); border-radius: 6px; padding: clamp(10px, 2vw, 24px); position: relative; top: 4.5rem; }

/* ---- 本文の見出し・リンク ---- */
.t-moegi .cms-content { line-height: 1.8; --block-gap: 1.4rem; }
.t-moegi [data-block="heading"] h1 { font-size: 1.7rem; font-weight: 700; line-height: 1.4; margin: 6px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--c-line); }
.t-moegi .cms-content h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.4; margin: 14px 0 10px; padding: 8px 10px; border: 0; border-radius: 0; background: var(--c-accent); color: var(--c-h2-ink); }
.t-moegi .cms-content h2 a { color: inherit; }
.t-moegi .cms-content h3 { font-size: 1.25rem; line-height: 1.5; margin: 14px 0 8px; padding: 0; border: 0; background: none; }
/* 一覧（li）の中の旧サイトの文字の大きさ指定（inline の font-size）を打ち消す。リンクの有無で大きさがずれないように */
.t-moegi .cms-content li span[style*="font-size"], .t-moegi .cms-content h4 span[style*="font-size"] { font-size: 1rem !important; }
/* 旧サイトから来た見出しの「白い字」（inline の color）を打ち消す。白地では見えないため。リンクの字は青 */
.t-moegi .cms-content h3 span[style*="color"] { color: inherit !important; }
.t-moegi .cms-content h3 a, .t-moegi .cms-content h3 a span { color: var(--c-link) !important; }
.t-moegi .cms-content h4 { font-size: 1.1rem; line-height: 1.5; margin: 12px 0 6px; padding: 0; border: 0; }
.t-moegi [data-block="steps"] li > h3, .t-moegi [data-block="cards"] .b-card h3 { margin: 0; }
.t-moegi [data-block="snippet"] > h3:first-child { margin-top: 0; }
.t-moegi .cms-content a { text-decoration: none; }
.t-moegi .cms-content a:hover { text-decoration: underline; }
.t-moegi [data-block="cards"] .b-card, .t-moegi [data-block="cards"] .b-card:hover { text-decoration: none; }
.t-moegi .cms-content a:not([class]) { color: var(--c-link); }

/* ---- 前・次の部品：字は小さめ、枠なしで下に点線（並びは blocks.css のまま）／一覧の部品：目次の今の記事を黄色に ---- */
.t-moegi .b-prevnext { padding-bottom: .5rem; border-bottom: 1px dotted #ccc; margin: 1rem 0; }
.t-moegi .b-prevnext a { border: 0; border-radius: 0; padding: .2em .1em; font-size: .85rem; color: var(--c-link); }
.t-moegi .b-prevnext a:hover { text-decoration: underline; }
.t-moegi .b-subpages-siblings a[aria-current="page"] { background: var(--c-mark); color: var(--c-mark-ink); }
.t-moegi .b-subpages-siblings li::before { content: none; }
.t-moegi .b-subpages-siblings a { background: color-mix(in srgb, var(--c-main) 14%, var(--c-bg)); }

/* ---- お知らせ ---- */
.b-news-cat { background: var(--c-main); color: #fff; border-color: var(--c-main); }
.t-moegi [data-block="news"] li > a { font-weight: 700; }
.t-moegi [data-block="news"] time { color: var(--c-muted); }
@media (min-width: 761px) { .t-moegi [data-block="news"] li { align-items: baseline; } }

/* ---- フッター：1 段目は緑（主なページ・中央・縦線で区切る）、2 段目は淡い緑（右寄せ）、その下に住所とコピーライト ---- */
.site-footer { margin-top: 20px; font-size: .9rem; }
.footer-nav, .footer-nav2 { color: var(--c-foot-ink); }
.footer-nav { background: var(--c-main); }
.footer-nav2 { background: var(--c-footer2); }
.footer-nav:not(:has(li)), .footer-nav2:not(:has(li)) { display: none; }
.footer-nav-in { max-width: var(--page); margin-inline: auto; }
.footer-nav ul, .footer-nav2 ul { list-style: none; margin: 0; padding: .55rem 1rem; display: flex; flex-wrap: wrap; }
.footer-nav ul { justify-content: center; }
.footer-nav2 ul { justify-content: flex-end; }
.footer-nav li, .footer-nav2 li { padding: 0 1.1em; line-height: 1.5; }
.footer-nav li + li, .footer-nav2 li + li { border-left: 1px solid rgba(255,255,255,.7); }
.footer-nav a { color: var(--c-foot-ink); text-decoration: none; font-weight: 700; white-space: nowrap; }
.footer-nav2 a { color: var(--c-foot-ink); text-decoration: none; white-space: nowrap; font-size: .93em; }
.footer-nav a:hover, .footer-nav2 a:hover { text-decoration: underline; }
.footer-in { max-width: var(--page); margin-inline: auto; padding: 1rem 1rem .4rem; font-size: .84rem; color: var(--c-text); }
.site-info p { margin: 0; }
.site-info a { color: inherit; }
.footer-name { margin: 0; font-weight: 700; }
.copy { margin-block: 0; padding: .4rem 1rem 1rem; text-align: center; font-size: .78rem; color: var(--c-muted); }

/* ---- スマホ（760px 以下）：左の列は消してハンバーガーの中へ。本文を先に、サイドの部品は本文の下 ---- */
@media (max-width: 760px) {
  .header-in { flex-wrap: nowrap; min-height: 0; padding: 6px 10px; }
  .brand { flex: 1; min-width: 0; }
  .brand img { max-width: calc(100vw - 80px); max-height: 56px; }
  .nav-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex: none; margin-left: 8px; width: 44px; height: 44px; background: var(--c-sw); cursor: pointer; }
  .nav-btn span { display: block; width: 24px; height: 2px; background: var(--c-sw-ink); transition: transform .2s, opacity .2s; }
  .nav-btn b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .nav-toggle:checked ~ .site-header .nav-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .site-header .nav-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .site-header .nav-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible ~ .site-header .nav-btn { outline: 2px solid var(--c-link); }
  /* 切り替えの箱は 2 行に縮めて、ヘッダーの下に出す */
  .site-header { position: relative; }
  .header-in { flex-wrap: wrap; }
  .tool-switch { order: 5; flex: 1 0 100%; margin-left: 0; padding: 4px 8px; gap: 2px 10px; font-size: .74rem; }
  .tool-switch button { padding: .1em .5em; }
  /* 左の列：ふだんは隠し、ハンバーガーで開くと縦の一覧 */
  .frame { display: flex; flex-direction: column; }
  .side-col { display: contents; }
  .main-nav { display: none; order: -1; background: var(--c-side); }
  .nav-toggle:checked ~ .frame .main-nav { display: block; }
  .main-col { order: 1; border: 0; }
  .side-top { order: 2; }
  .side-bottom { order: 3; }
  .side-area { background: var(--c-side); padding: 0 12px; }
  .side-area:not(:empty) { margin-top: 0; padding-block: 12px; }
  .main-col > main { padding: 12px 12px 30px; }
  .crumbs { padding: 6px 12px; }
  /* 見出し帯は小さく */
  .sec-title { padding: 8px 12px 4px; font-size: 1.4rem; }
  /* タブは 2 列の箱で折り返す */
  .sec-tabs > ul { display: grid; grid-template-columns: 1fr 1fr; }
  .sec-tabs > ul > li > a { min-width: 0; width: 100%; font-size: .95rem; }
  .with-tabs { grid-template-columns: 1fr; }
  .t-moegi [data-block="heading"] h1 { font-size: 1.4rem; }
  .t-moegi .cms-content h2 { font-size: 1.2rem; }
  .full { padding: 12px 12px 30px; }
  .footer-nav ul { justify-content: center; }
  .footer-nav2 ul { justify-content: center; }
  .footer-nav li, .footer-nav2 li { padding: .15em .8em; }
}

/* ---- 背景色「黒」「青」（theme.js が data-bg を付ける。色の変数を上書きして作る。左の列・タブの地も合わせる） ---- */
html[data-bg="dark"] { --c-bg: #000000; --c-text: #ffffff; --c-link: #ffcc33; --c-line: #666666; --c-soft: #1c1c1c; --c-muted: #d0d0d0; --c-crumb: #d0d0d0;
  --c-side: #1c1c1c; --c-box: #000000; --c-box-ink: #ffffff; --c-box-line: #888888; --c-hd-a: #1c1c1c; --c-hd-b: #000000; --c-hover: #333333; --c-hover-ink: #ffffff;
  --c-main: #3d6a55; --c-accent: #2f5444; --c-footer2: #2b4a3c; --c-mark: #ffcc33; --c-sw: #1c1c1c; --c-sw-ink: #ffffff; --c-sw-on: #ffcc33; color-scheme: dark; }
html[data-bg="blue"] { --c-bg: #0000cd; --c-text: #ffff00; --c-link: #ff6600; --c-line: #8888ff; --c-soft: #0000a0; --c-muted: #ffff99; --c-crumb: #ffff99;
  --c-side: #0000a0; --c-box: #0000cd; --c-box-ink: #ffff00; --c-box-line: #8888ff; --c-hd-a: #0000a0; --c-hd-b: #0000cd; --c-hover: #000080; --c-hover-ink: #ffff00;
  --c-main: #000080; --c-accent: #000080; --c-h2-ink: #ffff00; --c-footer2: #000066; --c-mark: #ffff00; --c-mark-ink: #000000; --c-sw: #000080; --c-sw-ink: #ffff00; --c-sw-on: #ffff00; color-scheme: dark; }
html[data-bg="dark"] .sec-tabs > ul > li > a::before, html[data-bg="blue"] .sec-tabs > ul > li > a::before,
html[data-bg="dark"] .t-moegi .b-subpages-siblings li::before, html[data-bg="blue"] .t-moegi .b-subpages-siblings li::before { color: var(--c-mark); }
html[data-bg="dark"] .sec-tabs > ul > li.is-current > a, html[data-bg="dark"] .sec-tabs > ul > li:has(.is-current) > a { color: #000; }
html[data-bg="dark"] .sec-tabs > ul > li.is-current > a::before, html[data-bg="dark"] .sec-tabs > ul > li:has(.is-current) > a::before,
html[data-bg="blue"] .sec-tabs > ul > li.is-current > a::before, html[data-bg="blue"] .sec-tabs > ul > li:has(.is-current) > a::before { color: #000; }
html[data-bg="dark"] .t-moegi .b-subpages-siblings a[aria-current="page"] { color: #000; }
html[data-bg="dark"] .sec-title, html[data-bg="blue"] .sec-title { color: var(--c-text); text-shadow: none; }
html[data-bg="dark"] .skip, html[data-bg="blue"] .skip { background: #000; color: #fff; }
html[data-bg="dark"] .brand, html[data-bg="blue"] .brand { color: var(--c-text); }
html[data-bg="dark"] .tool-switch button, html[data-bg="blue"] .tool-switch button { background: var(--c-bg); color: var(--c-text); border-color: var(--c-text); }
html[data-bg="dark"] .tool-switch button[aria-pressed="true"], html[data-bg="blue"] .tool-switch button[aria-pressed="true"] { background: var(--c-sw-on); border-color: var(--c-sw-on); color: #000; }
html[data-bg="dark"] .b-news-cat, html[data-bg="blue"] .b-news-cat { background: var(--c-mark); border-color: var(--c-mark); color: #000; }
html[data-bg="dark"] .main-nav a, html[data-bg="blue"] .main-nav a { color: var(--c-text); }
html[data-bg="dark"] .main-nav a::before, html[data-bg="blue"] .main-nav a::before { color: var(--c-mark); }
html[data-bg="dark"] .t-moegi .cms-content a:not([class]), html[data-bg="blue"] .t-moegi .cms-content a:not([class]) { color: var(--c-link); }