/* sitemap page: hide list markers inside sitemap section */
.section-sitemap ul {
  list-style: none;
  padding-left: 1rem; /* use a small indent in place of bullets */
  margin-left: 0;
}
/* ========================================
   1) 変数（Variables）
   ======================================== */
:root {
  --color-primary: #177224;
  --color-secondary: #D8E8D6;
  --color-primary-dark: #031305;
  --color-bg-light: #f5f5dd;
  --color-bg: #fff;
  --color-bg-copyright: #000000;
  --color-text: #000000;
  --color-text-white: #ffffff;
  --color-hover: #031305;
  --color-text-secondary: #444444;
}

/* ========================================
   2) ベース（Base）
   - フォント定義 / リセット / タイポ / フォーカス / SR専用
   ======================================== */
@font-face {
  font-family: 'Noto Sans JP';
  src: local('Noto Sans JP'), local('NotoSansJP'), local('Noto Sans CJK JP'),
       url('fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MOBO';
  src: local('MOBO Bold'), local('MOBO-Bold'), local('MOBO'),
       url('fonts/MOBO-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   ベース設定・リセット
   ========================= */
html {
  font-size: 62.5%;
}
body {
  font-size: 2.0rem;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 400;
}

/* 見出しフォント */
h1, h2, h3, h4, h5, h6 {
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
}

/* タイポスケール（p=100%→20pxを基準） */
p { font-size: 100%; line-height: 200%; }
h4 { font-size: 120%; line-height: 150%; }
h3 { font-size: 150%; line-height: 150%; }
h2 { font-size: 240%; line-height: 150%; }
/* サブページ：h2→h1, h3→h2, h4→h3 の視覚マッピング */
.subpage h1 { font-size: 240%; line-height: 150%; }
.subpage h2 { font-size: 150%; line-height: 150%; }
.subpage h3 { font-size: 120%; line-height: 150%; }
/* サイト共通：キャプションの文字サイズ/行間 */
figcaption { font-size: 1.6rem; line-height: 1.5; }

/* サブページ：モバイル時の見出しサイズ */
@media (max-width: 767px) {
  .subpage h1 { font-size: 200%; }
  .subpage h2 { font-size: 130%; }
  .subpage h3 { font-size: 110%; }
}

/* トップページ（非サブページ）：モバイル時の見出しサイズ */
@media (max-width: 767px) {
  body:not(.subpage) h2 { font-size: 200%; }
  body:not(.subpage) h3 { font-size: 130%; }
  body:not(.subpage) h4 { font-size: 110%; }
}

/* アクセシビリティ：キーボード操作用アウトライン */
a:focus, button:focus, input:focus, [tabindex="0"]:focus {
  outline: 3px dotted var(--color-primary-dark);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px dotted var(--color-primary-dark);
  outline-offset: 2px;
}
@media (prefers-contrast: more) {
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible {
    outline-width: 5px;
  }
}

/* アクセシビリティ：スクリーンリーダー用隠しテキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 非操作化されたリンクの見た目と操作抑止（準備中リンク等） */
a[aria-disabled="true"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}
.sr-only:focus, .sr-only:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  padding: 0.8rem 1.2rem;
  background: #fff;
  border: 3px solid var(--color-primary-dark);
  border-radius: 4px;
  z-index: 1000;
}

/* ========================================
   3) ユーティリティ（Utilities）
   ======================================== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

/* フォントユーティリティ：MOBOフォントを適用（見出しと同系統の強調用） */
.text-mobo {
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
}


/* ベース：リンク */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:visited {
  color: #0f4d18; /* 訪問済みリンクの色差（AA配慮） */
}
/* （ボタンは 5) コンポーネント 章に移動） */

/* ========================================
   コンテンツエリア（main内）のリンク仕様
   - ヘッダー/フッターは除外（既存仕様維持）
   ======================================== */
.subpage main a {
  color: #177224;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.subpage main a:visited {
  color: #000000;
}
.subpage main a:hover,
.subpage main a:focus {
  text-decoration-thickness: 3px;
}
/* 訪問済みでもホバー/フォーカス時は下線を太く */
.subpage main a:visited:hover,
.subpage main a:visited:focus {
  text-decoration-thickness: 3px;
}

/* 例外：Back to Top ボタンは下線なし（コンテンツエリアのリンク規則から除外） */
.subpage main a.back-to-top,
.subpage main a.back-to-top:visited,
.subpage main a.back-to-top:hover,
.subpage main a.back-to-top:focus {
  text-decoration: none;
  text-decoration-thickness: 0;
}

/* 外部リンクアイコン */
.icon-external {
  width: 2.0rem; /* 20px */
  height: 2.0rem; /* 20px */
  vertical-align: text-bottom;
  margin-left: 0.4rem;
}
/* PDFアイコン（外部リンクアイコンと同サイズ/位置） */
.icon-pdf {
  width: 2.0rem; /* 20px */
  height: 2.0rem; /* 20px */
  vertical-align: text-bottom;
  margin-left: 0.4rem;
}

/* 例外：ギャラリーカードのリンクは下線なし（通常/ホバー/フォーカスとも） */
.subpage main a.gallery-card,
.subpage main a.gallery-card:visited,
.subpage main a.gallery-card:hover,
.subpage main a.gallery-card:focus {
  text-decoration: none;
  text-decoration-thickness: 0;
}

/* 例外：五十音ボタンのリンクは下線なし（通常/ホバー/フォーカスとも） */
.subpage main a.kana-button,
.subpage main a.kana-button:visited,
.subpage main a.kana-button:hover,
.subpage main a.kana-button:focus {
  text-decoration: none;
  text-decoration-thickness: 0;
}
/* かなボタン：訪問済みでも色を変えない（通常時は .kana-button の色を維持） */
.subpage main a.kana-button:visited { color: #177224; }
/* かなボタン：訪問済みのホバー/フォーカスでもホバー配色を維持 */
.subpage main a.kana-button:visited:hover,
.subpage main a.kana-button:visited:focus {
  background: var(--color-primary);
  color: #ffffff;
}
/* fieldguide/index.html のかなボタンにも適用（念のためセクションスコープでも指定） */
.section-fieldguide .kana-button:visited { color: #177224; }
.section-fieldguide .kana-button:visited:hover,
.section-fieldguide .kana-button:visited:focus {
  background: var(--color-primary);
  color: #ffffff;
}

/* パンくずも同様のリンクルールを適用（ヘッダー/フッター除外のため個別指定） */
.breadcrumb a {
  color: #177224;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.breadcrumb a:visited { color: #000000; }
.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:visited:hover,
.breadcrumb a:visited:focus {
  text-decoration-thickness: 3px;
}

/* about内のQ&Aグリッドの訪問済み色をmain仕様で上書き */
.subpage main .nishi-qa-grid figcaption a:visited,
.subpage main .higashi-qa-grid figcaption a:visited {
  color: #000000;
}

/* 汎用：2カラムギャラリー（テキスト幅=64remに収めるテンプレート） */
.figure-two-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem; /* 24px */
  justify-items: stretch;
  align-items: start;
  max-width: 64rem; /* p と同じ幅に収める */
  margin: 0 auto 3.2rem;
}
.figure-two-grid figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.figure-two-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
.figure-two-grid figure > img.learn-content-image { max-width: none; }
.figure-two-grid figcaption {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 767px) {
  .figure-two-grid { grid-template-columns: 1fr; }
}

/* ========================================
   4) レイアウト（Layout）
   ======================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

/* サブページ：メインコンテンツ幅を992px、左右padding 24pxに設定（パンくず等は除外） */
.subpage main .container {
  max-width: 992px;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  box-sizing: border-box;
}

.subpage main .section-fieldguide .container:has(h2){
  padding-left:0;
  padding-right:0;
}

/* コンポーネント：パンくず */
.breadcrumb {
  padding: 1.2rem 0;
}
.breadcrumb .container {
  max-width: 1200px;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0 2.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 画面幅が狭い場合は折り返し */
  gap: 0.8rem;
}
.breadcrumb a {
  font-size: 2.0rem; /* 20px */
  color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumb li[aria-current="page"] span {
  font-size: 2.0rem;
  color: #000;
}
.breadcrumb .chevron {
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: middle;
}

/* 学習テンプレート（bg-template-2）：パンくず幅を本文の992pxに揃える */


/* ページ区切り（ヘッダー直下の水平ライン） */
.divider-header-line1 {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 60px;
  background-image: url('img/common/header-line1.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: 160px 60px;
  margin-bottom: 1.6rem; /* 16px: パンくずとの距離 */
}

/* q1 第二テンプレ用：上部ラインを header-line2 に差し替え */
.bg-template-2 .divider-header-line1 {
  background-image: url('img/common/header-line2.png');
}

/* ページ下部の区切り線（Back to Top の直上） */
.divider-footer-line {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 32px;
  background-image: url('img/common/header-line3.png');
  background-repeat: repeat-x;
  background-position: center;
  background-size: 160px 32px;
}

/* 上下区切り線に挟まれた帯の背景（q1 第二テンプレ） */
.bg-template-2 .section-bg-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: var(--color-bg-light);
}

/* ========================================
   5) コンポーネント（Components）
   - ヘッダー / ナビ / ボタン / ギャラリー / カード / フッター / BackToTop
   ======================================== */
header {
  background-color: var(--color-bg);
  padding: 0rem;
  padding-bottom: 40px;
  border-bottom: 0px 0px;
  margin: 8px 8px 0px 8px;
}
h1 {
  padding: 0px;
  margin: 0px;
}
/* h1の2行表記（span分割） */
.h1-line1,
.h1-line2 {
  display: block;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.site-logo {
  font-size: 2.4rem;
  font-weight: bold;
}

/* ナビゲーション */
.nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-start;
  margin-top: 8px;
}
/* PCデフォルトではモバイル用ナビを非表示 */
.nav-group .nav-mobile { display: none; }
/* ハンバーガー+テキストのセット */
.hamburger-wrap {
  display: none;
  align-items: center;
}
/* ヘッダーメニューのフォントを MOBO に */
header .nav-top,
header .nav-top a,
header .nav-main,
header .nav-main a {
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}
.nav-top {
  font-size: 1.8rem;
}
.nav-top a {
  display: inline-flex;
  align-items: center;
  font-size: 1.8rem;
  color: #000;
}
.nav-top ul {
  gap: 1.6rem;
}
.nav-top a:hover,
.nav-top a:focus {
  color: var(--color-primary);
}
.nav-top a:focus-visible {
  outline: 3px dotted var(--color-primary-dark);
  outline-offset: 4px;
}
.nav-top a .icon-chevron-right {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
.nav-top a .icon-arrow-right-square {
  width: 1.8rem;
  height: 1.8rem;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

/* nav-top と nav-main の縦間隔を8pxに統一 */
.nav-top {
  margin-bottom: 8px;
}
.nav-main {
  margin-bottom: 0;
}

nav ul a {
  font-size: 1.6rem;
}

/* ヘッダーメインナビの文字サイズ（20px相当） */
header .nav-main a {
  font-size: 2.0rem;
}

/* コンポーネント：ボタン */
.button {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem; /* テキストとアイコンの間隔16px */
  height: 8rem; /* 80px */
  padding: 0 8rem; /* 左右端の余白80px */
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 4rem; /* 高さの半分=40pxで半円エンド */
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-size: 2.4rem; /* 24px */
  white-space: nowrap; /* 折返し防止で形状維持 */
}
.button:visited { color: var(--color-text-white); }
.button:hover { background-color: var(--color-primary-dark); }
.button:focus { outline: 3px dotted var(--color-primary-dark); outline-offset: 2px; }
.button::after {
  content: "";
  display: inline-block;
  width: 2.4rem;  /* 24px */
  height: 2.4rem; /* 24px */
  background-color: currentColor;
  -webkit-mask: url('img/common/arrow-right.svg') no-repeat center / contain;
  mask: url('img/common/arrow-right.svg') no-repeat center / contain;
}

/* ハンバーガーメニュー */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/* 旧checkboxトグルは不使用（残骸対応） */
.hamburger::after,
.hamburger[aria-expanded="true"]::after,
.hamburger[aria-expanded="false"]::after {
  content: ""; /* 右側の擬似要素アイコンを無効化 */
}
.hamburger .hamburger-visual {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('img/common/list.svg') no-repeat center / contain;
  mask: url('img/common/list.svg') no-repeat center / contain;
}
.hamburger[aria-expanded="true"] .hamburger-visual {
  -webkit-mask: url('img/common/x-lg.svg') no-repeat center / contain;
  mask: url('img/common/x-lg.svg') no-repeat center / contain;
}
.hamburger-text-close { display: none; }
.hamburger-text {
  display: none;
  margin-left: 0.4rem; /* 4px */
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 2.0rem; /* 20px */
}

/* メインビジュアル（セクション1） */
.section-visual .responsive-image {
  width: 100%;
  height: auto;
  display: block;
}
.section-visual .container {
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
}

/* セクション共通の余白 */
section {
  padding-bottom: 80px;
}
/* 下余白を詰めたいセクション用（例：h1直下の画像と次パネルを密着） */
.section-no-bottom-padding { padding-bottom: 0; }
/* サブページ：フッター直前にバナーを置くページでは下余白をやや詰める */
.subpage .section-about {
  padding-bottom: 4rem; /* 40px */
}

/* 見出しの余白 */
.section-text h2,
.section-about h2,
.section-learn h2,
.section-gallery h2,
.section-fieldguide h2,
.section-school h2,
.section-reference h2,
.card-container h2 {
  margin-top: 0;
  margin-bottom: 4rem;
}
/* トップページのみ h2 を中央寄せ（サブページは除外） */
body:not(.subpage) .section-text h2,
body:not(.subpage) .section-about h2,
body:not(.subpage) .section-learn h2,
body:not(.subpage) .section-gallery h2,
body:not(.subpage) .section-fieldguide h2,
body:not(.subpage) .section-school h2,
body:not(.subpage) .section-reference h2,
body:not(.subpage) .card-container h2 {
  text-align: center;
}

/* サブページの h2 は明示的に左寄せ（親の .text-center を上書き） */
.subpage h2 {
  text-align: left;
}
/* 哺乳類一覧などの見出しは中央揃え */
.subpage #species-list {
  text-align: center;
}
/* サブページ：全体マップ見出しの上余白を80pxに */
.subpage #map-title {
  margin-top: 8rem; /* 80px */
}

/* サブページの h3/h4/h5/h6 も左寄せ */
.subpage h3,
.subpage h4,
.subpage h5,
.subpage h6 {
  text-align: left;
}
/* サブページではh2の背景画像を無効化（トップの装飾を上書き） */
.subpage .section-about h2,
.subpage .section-learn h2,
.subpage .section-fieldguide h2,
.subpage .section-join h2 {
  background: none;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 4rem; /* 見出し下の余白は維持 */
}

/* サブページ：手動で挿入する区切り線（hr） */
hr.sub-divider {
  border: 0;
  border-top: 5px solid #F5F5DD;
  width: 944px;
  max-width: 100%;
  margin: 1.6rem auto 3.2rem; /* 上16px・下32px・中央寄せ */
}
/* サブページ：大きめの区切り線（上下80px） */
hr.sub-divider.sub-divider-lg { margin: 8rem auto; }
/* 区切り線直後のh2は上マージン0で二重余白を防止 */
.subpage hr.sub-divider + h2 { margin-top: 0; }

/* サブページ：h2直後にhrが来る場合のみ、h2下の余白を0にする */
.subpage section .container > h2:has(+ hr.sub-divider),
.subpage .card-container > h2:has(+ hr.sub-divider) {
  margin-bottom: 0;
}

/* =========================
   テキストコンテンツの最大幅（h2/h3と直後の本文）
   - 最大幅: 768px (76.8rem)
   - 左右ガター: .container の padding 24px を利用
   ========================= */
section .container > h2,
section .container > h3,
section .container > p,
section .container > .text-left > p,
.card-container > h2,
.card-container > h3,
.card-container > p,
.card-container > .text-left > p {
  max-width: 76.8rem;
  margin-left: auto;
  margin-right: auto;
}
/* ol も p/h2/h3 と同じ最大幅に揃える */
section .container > ol,
section .container > .text-left > ol,
.card-container > ol,
.card-container > .text-left > ol {
  max-width: 76.8rem;
  margin-left: auto;
  margin-right: auto;
}

/* サブページ：見出しや本文の幅制限を解除（幅いっぱいを使用） */
.subpage section .container > h1,
.subpage section .container > h2,
.subpage section .container > h3,
.subpage section .container > p,
.subpage section .container > .text-left > p,
.subpage .card-container > h1,
.subpage .card-container > h2,
.subpage .card-container > h3,
.subpage .card-container > p,
.subpage .card-container > .text-left > p {
  max-width: none;
}

/* 「大台ヶ原とは」見出し 背景画像 */
.section-about h2 {
  position: relative;
  background-image: url('img/common/title-back2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
  margin-top: 0;
  margin-bottom: -12px; /* テキスト→次要素の実効距離を40pxに補正 */
  padding-top: 2rem;
  padding-bottom: calc(2rem + 32px);
}

/* section-about：本文左右に画像を配置 */
.section-about .about-text-with-sides {
  display: grid;
  grid-template-columns: 1fr minmax(0, 76.8rem) 1fr;
  column-gap: 2.4rem;
  align-items: start;
}
.section-about .about-text-with-sides > p {
  grid-column: 2;
  margin-left: auto;
  margin-right: auto;
}
.section-about .about-side {
  display: none; /* デフォルト非表示 */
  width: auto; /* 原寸表示 */
  max-width: none;
  height: auto;
  align-self: start;
}
.section-about .about-side-left {
  grid-column: 1;
}
.section-about .about-side-right {
  grid-column: 3;
}
@media (min-width: 1200px) {
  .section-about .about-side {
    display: block; /* 画面が最大幅帯のときのみ表示 */
  }
}

/* 6) ページ固有（Page Specific）：見出しの背景画像 */
.section-fieldguide h2 {
  position: relative;
  background-image: url('img/common/title-back2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
  margin-bottom: -12px; /* テキスト→次要素の実効距離を40pxに補正 */
  padding-top: 2rem;
  padding-bottom: calc(2rem + 32px);
}

/* 「知る・学ぶ」見出し 背景画像 */
.section-learn h2 {
  position: relative;
  background-image: url('img/common/title-back.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
  margin-top: 0;
  margin-bottom: -12px; /* テキスト→次要素の実効距離を40pxに補正 */
  padding-top: 2rem;
  padding-bottom: calc(2rem + 32px);
}

/* 「参加する」見出し 背景画像 */
.section-join h2 {
  position: relative;
  background-image: url('img/common/title-back.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto;
  margin-top: 0;
  margin-bottom: -12px; /* テキスト→次要素の実効距離を40pxに補正 */
  padding-top: 2rem;
  padding-bottom: calc(2rem + 32px);
}
/* join-title 直下の本文は左寄せ */
#join-title + p {
  text-align: left;
}
/* 「学校の方へ」「資料室」h2：カード背景上辺から80px相当に統一（カードpadding 3.2remを考慮） */
.section-school .card-container h2,
.section-reference .card-container h2 {
  margin-top: 4.8rem;
}
/* 学校の方へ 見出し左にアイコン配置（128x128、中央水平揃え） */
#school-title::before {
  content: "";
  display: inline-block;
  width: 9.6rem;  /* 96px */
  height: 9.6rem; /* 96px */
  background: url('img/common/school.svg') no-repeat center / contain;
  vertical-align: middle;
  margin-right: 1.6rem; /* テキストとの間隔 16px */
}
/* 資料室 見出し左にアイコン配置（128x128、中央水平揃え） */
#reference-title::before {
  content: "";
  display: inline-block;
  width: 9.6rem;  /* 96px */
  height: 9.6rem; /* 96px */
  background: url('img/common/book.svg') no-repeat center / contain;
  vertical-align: middle;
  margin-right: 1.6rem; /* テキストとの間隔 16px */
}
.section-text h3,
.section-about h3,
.section-learn h3,
.section-gallery h3,
.section-fieldguide h3,
.section-school h3,
.section-reference h3,
.card-container h3 {
  margin-bottom: 3.2rem;
}
/* サブページ h3 の余白を統一：上32px・下16px */
.subpage h3 {
  margin-top: 3.2rem;
  margin-bottom: 1.6rem;
}
/* サブページ：h3直後のpの上余白を0にしてh3→pを実効16pxに */
.subpage h3 + p { margin-top: 0; }
/* サブページ：.text-left内のpも上余白を0に（UAデフォルト無効化） */
.subpage .text-left > p { margin-top: 0; }
/* サブページ：h2 と直前コンテンツの間隔を80pxに */
.subpage section .container > h2,
.subpage .card-container > h2 {
  margin-top: 8rem; /* 80px */
}
/* 例外：h1直後のh2は40pxにする */
.subpage section .container > h1 + h2,
.subpage .card-container > h1 + h2 {
  margin-top: 4rem; /* 40px */
}
/* サブページ：h1直後のpの下余白を32pxに固定 */
.subpage section .container > h1 + p { margin-bottom: 3.2rem; }
/* サブページ：h1直後が.text-leftの場合、その中のpの下余白を32pxに固定 */
.subpage section .container > h1 + .text-left > p { margin-bottom: 3.2rem; }
/* サブページ：p直後の画像は32px上マージン */
.subpage p + img { margin-top: 3.2rem; }
/* サブページ：.text-leftの直後が画像の場合も32px上マージン */
.subpage .text-left + img { margin-top: 3.2rem; }

/* サブページの h1 は中央寄せ（それ以外は左寄せ） */
.subpage h1 {
  text-align: center;
}

/* サブページ：h1の上下余白（上80px・下40px） */
.subpage section .container > h1 {
  margin-top: 8rem;  /* 80px */
  margin-bottom: 4rem; /* 40px */
}
/* サブページ：h2の上下余白（上80px・下40px。直後がhrのときは下0） */
.subpage section .container > h2 { margin-bottom: 4rem; }
.section-text p,
.section-about p,
.section-learn p,
.section-fieldguide p,
.section-school p,
.section-reference p,
.card-container p {
  font-size: 1em;
  margin-bottom: 1.6rem;
}

/* フィールドガイド：pとギャラリー間のピル型h2 */
.h2-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  max-width: 992px;
  height: 6.4rem; /* 64px */
  border-radius: 15px;
  margin: 0 auto 3.2rem; /* 下32pxでギャラリーと間隔 */
  padding: 0 2.4rem; /* 左右24px */
  box-sizing: border-box;
  text-align: center;
}
/* サブページ共通の h2 背景打消しルールを上書きするため特異性を上げる */
.subpage .section-fieldguide .container > h2.h2-pill {
  background-color: #000000;
  color: #ffffff;
  background-image: none;
  margin-top: 3.2rem;   /* 上32px：直前pとの間隔 */
  margin-bottom: 3.2rem;/* 下32px：次のギャラリーとの間隔 */
}

/* フィールドガイド：黒背景のh2（h2-pill）は背景画像を表示しない */
.section-fieldguide h2.h2-pill { background-image: none; }

/* フィールドガイド：五十音見出しは上80px・下32px */
.subpage .section-fieldguide .container > h2.h2-pill.h2-pill-kana {
  margin-top: 8rem;   /* 80px */
  margin-bottom: 3.2rem; /* 32px */
}

/* CTA縦積み配置 */
.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem; /* 16px: 吹き出し画像とボタンの間隔 */
  margin-top: 1.6rem; /* 16px: 誘導テキスト(p)と吹き出し画像の間隔 */
}

/* 誘導テキスト(p)の上側余白を32pxに統一 */
section .container > p:has(+ .cta-stack) {
  margin-top: 3.2rem;
}
/* :has 非対応ブラウザ向けフォールバック（.text-left の直後の p を対象） */
section .container > .text-left + p {
  margin-top: 3.2rem;
}

/* 誘導テキスト(p)の体裁: 20px・MOBO */
section .container > p:has(+ .cta-stack),
section .container > .text-left + p {
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-size: 2.0rem;
}

/* セクション3・5：全幅背景 */
.section-text.section-bg,
.section-learn.section-bg {
  background-color: var(--color-bg-light);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* section-learn 背景色の上に header-line2 を横リピート */
.section-learn.section-bg {
  background-image: url('img/common/header-line2.png'), url('img/common/header-line3.png');
  background-repeat: repeat-x, repeat-x;
  background-position: top center, bottom center;
  background-size: auto, auto;
  padding-top: 8rem; /* 背景上辺からコンテンツまで80pxを確保 */
  padding-bottom: calc(8rem + 32px); /* 下ライン（32px）を考慮し、ライン上端まで実効80pxを確保 */
}

/* section-join(=section-text.section-bg) 背景の上下にラインを配置 */
.section-text.section-bg {
  background-image: url('img/common/header-line2.png'), url('img/common/header-line3.png');
  background-repeat: repeat-x, repeat-x;
  background-position: top center, bottom center;
  background-size: auto, auto;
  padding-top: 8rem; /* 背景上辺からコンテンツまで80pxを確保 */
  padding-bottom: calc(8rem + 32px); /* 下ライン（32px）を考慮し、ライン上端まで実効80pxを確保 */
}

/* =========================
   セクション4：ギャラリー
   ========================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  max-width: 992px; /* ギャラリー全体幅 */
  margin: 0 auto;   /* 中央寄せ */
  padding: 0 2.4rem; /* 両サイドの内側余白 24px */
  box-sizing: border-box; /* 内側余白を含めて総幅992pxを維持 */
  justify-content: center; /* グリッド全体を中央に寄せる */
}

/* サブページ about：3枚並びグリッド */
.about-three-grid,
.figure-three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem; /* 24px */
  justify-items: stretch;
  align-items: start; /* 各カードを上揃えに統一 */
  margin: 0 auto 3.2rem; /* 下に適度な余白32px */
}
.about-three-grid figure,
.figure-three-grid figure {
  margin: 0;
  max-width: 29.6rem; /* 296px */
  width: 100%;
  display: flex;           /* 高さを均一に見せるため縦積み */
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}
.about-three-grid img,
.figure-three-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* 高さ統一 */
  height: auto;        /* aspect-ratio で決定 */
  object-fit: cover;   /* トリミングで揃える */
}
/* about 西大台 Q&A：画像のアスペクト比を統一（3:2でカバー表示） */
.nishi-qa-grid img,
.higashi-qa-grid img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto; /* aspect-ratio により高さが決定 */
  object-fit: cover; /* はみ出し部分はトリミング */
}
/* about 西大台 Q&A：列間24px・行間32px */
.nishi-qa-grid,
.higashi-qa-grid {
  column-gap: 2.4rem; /* 24px */
  row-gap: 3.2rem;    /* 32px */
}
/* 画像の見かけ幅を296pxに固定（モバイルは100%以内に収める） */
.nishi-qa-grid figure,
.higashi-qa-grid figure {
  width: 29.6rem;   /* 296px */
  max-width: 100%;
}
/* ホバー時：画像に3pxの枠 */
.nishi-qa-grid figure:hover img,
.nishi-qa-grid img:hover,
.higashi-qa-grid figure:hover img,
.higashi-qa-grid img:hover {
  outline: 3px solid var(--color-primary);
  outline-offset: 0;
}
.about-three-grid figcaption,
.figure-three-grid figcaption {
  margin-top: 1.6rem; /* 16px */
  font-size: 1.6rem; /* 16px相当 */
  line-height: 1.5;
  text-align: center;
}
/* 画像とキャプションの間隔を16pxに固定 */
.nishi-qa-grid figcaption,
.higashi-qa-grid figcaption { margin-top: 1.6rem; }
/* about 西大台 Q&A グリッド：キャプションリンクの色/サイズ固定（訪問済みも同色） */
.nishi-qa-grid figcaption,
.higashi-qa-grid figcaption { text-align: center; }
.nishi-qa-grid figcaption a,
.nishi-qa-grid figcaption a:visited,
.higashi-qa-grid figcaption a,
.higashi-qa-grid figcaption a:visited {
  color: var(--color-primary); /* #177224 */
  font-size: 1.6rem; /* 16px */
  text-decoration: underline; /* 通常時に下線 */
  text-underline-offset: 0.2em;
}
/* 中央配置しつつ複数行は左寄せに見せるため、aを行内ブロック化 */
.nishi-qa-grid figcaption a,
.higashi-qa-grid figcaption a {
  display: inline-block;
  max-width: 100%;
  text-align: left;
}
/* ホバー時：下線を3pxに強調 */
.nishi-qa-grid figure:hover figcaption a,
.nishi-qa-grid figcaption a:hover,
.higashi-qa-grid figure:hover figcaption a,
.higashi-qa-grid figcaption a:hover {
  text-decoration-thickness: 3px;
}
@media (max-width: 767px) {
  .about-three-grid,
  .figure-three-grid {
    grid-template-columns: 1fr; /* モバイルは1列 */
  }
}

/* サブページ about：地図画像の共通体裁 */
.about-map-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto 3.2rem; /* 下に32px */
}

/* サブページ：単発のキャプション付き画像の余白統一（グリッド系は除外） */
.subpage :not(.gallery-grid):not(.about-three-grid):not(.figure-two-grid):not(.nishi-qa-grid):not(.higashi-qa-grid):not(.species-grid) > figure > figcaption {
  margin-top: 1.6rem; /* 16px：画像とキャプションの間 */
}
.subpage :not(.gallery-grid):not(.about-three-grid):not(.figure-two-grid):not(.nishi-qa-grid):not(.higashi-qa-grid):not(.species-grid) > figure + figure {
  margin-top: 3.2rem; /* 32px：キャプションから次の画像（次のfigure）まで */
}
/* サブページ：単発figure自体の下余白を32pxに（グリッドは除外） */
.subpage :not(.gallery-grid):not(.about-three-grid):not(.figure-two-grid):not(.nishi-qa-grid):not(.higashi-qa-grid):not(.species-grid) > figure {
  margin: 0 0 3.2rem 0;
}
/* サブページ：テキスト直後の単発figureの上余白を32pxに統一 */
.subpage p + figure { margin-top: 3.2rem; }
.subpage .text-left + figure { margin-top: 3.2rem; }
/* グリッド等を除いた通常figureに対しても、p直後のfigureは32px上余白を強制 */
.subpage :not(.gallery-grid):not(.about-three-grid):not(.nishi-qa-grid):not(.higashi-qa-grid) > p + figure {
  margin-top: 3.2rem;
}

/* learn: セクション内コンテンツ画像（最大幅640px、3:2、cover） */
.subpage-content-image,
.learn-content-image,
.school-content-image {
  display: block;
  width: 100%;
  max-width: 64rem; /* 640px */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  margin: 0 auto 3.2rem; /* 下に32px */
}
/* 特定画像をトリミングなしで全体表示するための修飾クラス（learn/school共通） */
.subpage-content-image--contain,
.learn-content-image--contain,
.school-content-image--contain {
  aspect-ratio: auto;
  object-fit: contain;
}
/* figure内にある場合は、写真→キャプションを16pxにするため下余白を0に（learn/school共通） */
.subpage figure > .subpage-content-image,
.subpage figure > .learn-content-image,
.subpage figure > .school-content-image { margin-bottom: 0; }
/* グリッド内（2/3列）のfigureは画像幅をカラムいっぱいに広げる */
.about-three-grid .learn-content-image,
.figure-three-grid .learn-content-image,
.figure-two-grid .learn-content-image {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* species: 詳細ページ画像（最大幅640px、5:4、cover、中央寄せ） */
.species-detail-image {
  display: block;
  width: 100%;
  max-width: 64rem; /* 640px */
  aspect-ratio: 5 / 4; /* 640 x 512 */
  height: auto;
  object-fit: cover;
  margin: 0 auto; /* 中央 */
}

.species-detail-image:nth-child(n+1) {
  margin-top:32px;
}

/* ページヘッダー直下キャラクター（q1 第二テンプレ） */
.page-chara {
  display: block;
  width: 12.8rem;  /* 128px */
  height: 12.8rem; /* 128px */
  margin: 0 auto 0; /* 中央揃え・下余白0 */
}

/* 白背景のコンテンツパネル（幅992px / 左右24px / 上下80px） */
.content-panel {
  background-color: #fff;
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding: 8rem 2.4rem; /* 上下80px 左右24px */
  box-sizing: border-box;
  border-radius: 30px;
}

/* 白背景パネル内の見出し/本文幅を640pxにし中央寄せ */
.content-panel h2,
.content-panel h3,
.content-panel p {
  max-width: 64rem; /* 640px */
  margin-left: auto;
  margin-right: auto;
}
/* content-panel 内の ol も p と同じ幅に中央寄せし、段落と同じタイポに揃える */
.content-panel ol {
  max-width: 64rem; /* 640px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.4rem; /* マーカーのためのインデント */
  margin-top: 0;
  margin-bottom: 0;
}
.content-panel ol li {
  line-height: 2;        /* p と同一の行間（200%） */
  letter-spacing: normal;/* p と同一の字間 */
  font-size: 1em;        /* p と同一の文字サイズ基準 */
}
.content-panel ol li + li { margin-top: 1.6rem; } /* p と同等の段落間隔 */

/* 一般セクション内の ol のタイポも p に合わせる */
section .container > ol li,
.card-container > ol li {
  line-height: 2;
  letter-spacing: normal;
}
/* h2デフォルトは左。詳細ページでは上書きで中央に */
.content-panel h2 { text-align: left; margin-bottom: 3.2rem; }
/* species詳細ページ：h2/h3を中央揃え、pは既に幅640px中央寄せ */
.species-detail-panel h2,
.species-detail-panel h3 {
  text-align: center;
}
/* species詳細ページ：パネル上端→h2 を80px(8rem)に固定するため、上マージンを0に */
.subpage .content-panel.species-detail-panel .container > h2 { margin-top: 0; }
/* species詳細ページ：h2→h3の間隔32px、h3→画像(figure)の間隔32px */
.subpage .content-panel.species-detail-panel .container > h2 { margin-bottom: 3.2rem; padding-bottom: 0; }
.subpage .content-panel.species-detail-panel .container > h3 { margin-bottom: 3.2rem; }
/* species詳細ページ：pも確実に640px幅で中央寄せ */
.species-detail-panel p {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* subpageの汎用ルール(.subpage section .container > p { max-width: none; })を上書き */
.subpage .content-panel.species-detail-panel .container > p {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* ユーティリティ：下余白32pxのh2（セクション固有の40pxを上書き） */
.section-learn .container > h2.h2-compact { margin-bottom: 3.2rem; }

/* 白背景パネル内の単体画像キャプションは中央揃え */
.content-panel figure > figcaption { text-align: center; }
/* 汎用：任意のfigcaptionを中央揃えにする補助クラス */
.figcaption-center { text-align: center; }
/* キャプション内の注記だけ小さく（汎用） */
.caption-note { font-size: 1.6rem; }
.content-panel figure > figcaption .caption-note {
  display: block;        /* 改行相当 */
  margin-top: 0.4rem;    /* 見た目の間隔 */
}
/* 汎用テーブル（サブページ本文のテーブル想定） */
.table-basic {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 4rem;
}
.table-basic th,
.table-basic td {
  border: 1px solid #000;
  padding: 0.8rem;
}
.table-basic th[scope="row"] {
  text-align: left;
  width: 20%;
}

/* ユーティリティ：リストをフル幅にして中央寄せを解除（ULと左位置を揃える） */
.container > ol.list-full {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 白背景パネル内：h2の直後がpのときだけ下余白を32pxに強制（特異性を上げて上書き） */
.subpage .section-learn .content-panel h2:has(+ p) { margin-bottom: 3.2rem; }

/* 白背景パネル内：p直後のh2は上余白40pxにする（p→h2間） */
.content-panel p + h2 { margin-top: 4rem; }

/* 白背景パネル内のリストマーク色を #177224 に統一 */
.content-panel ul li::marker { color: #177224; }
/* 白背景パネル内のリスト行間を150%に */
.content-panel ul li { line-height: 2.5; }
/* 白背景パネル内のulの上下余白を除去 */
.content-panel ul { margin-top: 0; margin-bottom: 0; }

/* content-panel 内：分類グリッド（草本） */
.content-panel .species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px); /* 横幅に合わせて 4→3→2→1 列に可変 */
  row-gap: 3.2rem; /* 32px：キャプション→次段画像 */
  column-gap: 1.6rem; /* 16px：左右間隔 */
  justify-content: center; /* パネル中央に配置 */
  align-items: start; /* 行内の各カードを上揃えに統一 */
  align-content: start; /* グリッド全体も上詰めで揃える */
  margin: 0 auto;
}
.content-panel .species-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem; /* 16px：画像→キャプション */
}
.content-panel .species-grid img,
.content-panel .species-grid .species-placeholder {
  width: 200px;
  height: 200px;
  display: block;
}
.content-panel .species-grid img {
  object-fit: cover; /* 200x200にトリミング */
}
.content-panel .species-grid a.species-image-link img:hover,
.content-panel .species-grid a.species-image-link:focus img,
.content-panel .species-grid figure:hover a.species-image-link img {
  outline: 3px solid var(--color-primary); /* #177224 */
}
/* 画像ホバー/フォーカス時もキャプションの下線を太くする */
.content-panel .species-grid a.species-image-link:hover + figcaption a,
.content-panel .species-grid a.species-image-link:focus + figcaption a,
.content-panel .species-grid figure:hover > figcaption a {
  text-decoration-thickness: 3px;
}
.content-panel .species-grid .species-placeholder {
  background: #eee; /* no photo 用のグレー */
}
/* 高特異性で figcaption の余白を固定（グローバルな figure>figcaption ルールを上書き） */
.subpage .content-panel.content-panel .species-grid.species-grid > figure > figcaption {
  margin: 0; /* 余白は figure の gap で管理 */
}
.content-panel .species-grid figcaption {
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  text-align: center;
}
/* 余白競合対策：figcaption 上マージンを確実に0に固定 */
.content-panel .species-grid > figure > figcaption { margin-top: 0 !important; }

/* フィールドガイド：目次（ページ内リンク） */
.species-toc {
  margin: 3.2rem auto;
  max-width: 992px;
  text-align: left;
}

/* グループナビゲーション（五十音グループへのジャンプリンク） */
.species-toc-group-nav {
  margin: 2.4rem auto;
  max-width: 992px;
}
.species-toc-group-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  justify-content: center;
}
.species-toc-group-list li {
  margin: 0;
}
.species-toc-group-list a {
  color: var(--color-primary);
  text-decoration: underline;
  font-size: 1.8rem;
  font-weight: bold;
}
.species-toc-group-list a:hover,
.species-toc-group-list a:focus {
  text-decoration-thickness: 3px;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 各グループセクション */
.species-toc-group {
  margin: 3.2rem 0;
  scroll-margin-top: 2rem; /* スクロール時の位置調整 */
}
.species-toc-group h3 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 1.6rem 0;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.8rem;
}
.species-toc-group h3:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.species-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  justify-content: flex-start;
}
.species-toc-list li {
  margin: 0;
}
.species-toc-list a {
  color: var(--color-primary);
  text-decoration: underline;
  font-size: 1.6rem;
}
.species-toc-list a:hover,
.species-toc-list a:focus {
  text-decoration-thickness: 3px;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* フィールドガイド：グループセクション */
.species-group-section {
  scroll-margin-top: 2rem; /* スクロール時の位置調整 */
  margin: 4.8rem 0 3.2rem 0;
  padding-bottom: 0rem;
}
.species-group-section:first-child {
  margin-top: 0;
}
.content-panel .species-group-heading,
.species-group-heading {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 auto 2.4rem auto !important;
  color: var(--color-text);
  padding-bottom: 0.8rem;
  text-align: center;
  width: calc(200px * 4 + 1.6rem * 3); /* 画像4列分の幅（200px × 4 + 1.6rem × 3） */
  max-width: 100%; /* レスポンシブ対応：画面幅が狭い場合は100%に */
  box-sizing: border-box;
  position: relative;
  display: block;
}
.species-group-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background-color: #000;
}
.species-group-heading:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* フィールドガイド：各動物項目 */
.species-item {
  scroll-margin-top: 2rem; /* スクロール時の位置調整 */
}
.species-item h4 {
  /* 視覚的には非表示だが、スクリーンリーダーでは読み上げられるようにsr-onlyクラスを使用 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.species-item h4:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* learn: Q&A リスト（h3配下） */
.qa-list {
  list-style: none;
  margin: 0 0 3.2rem 0;
  padding: 0;
  text-align: left;
}
.subpage h3 + .qa-list { margin-top: 2.4rem; } /* h3→リストの間隔 24px */
.qa-list li + li { margin-top: 1.6rem; } /* 16px */
/* キーワードリストはテキスト化したため不要（残置しても他へ影響しない） */

/* セクション共通：h3直後の素のulにも24px余白を付与 */
.section-learn .container > h3 + ul { margin-top: 2.4rem; }
.qa-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem; /* 8px: アイコンとテキストの間 */
  font-size: 2.0rem; /* 20px */
  color: #177224;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.qa-list a:visited { color: #000; }
.qa-list a:hover,
.qa-list a:focus { text-decoration-thickness: 3px; }
.qa-list a::before {
  content: "";
  display: inline-block;
  width: 2.0rem; /* 20px */
  height: 2.0rem; /* 20px */
  background-color: #000;
  -webkit-mask: url('img/common/quora.svg') no-repeat center / contain;
  mask: url('img/common/quora.svg') no-repeat center / contain;
}

/* 入れ子のQAリスト（下層）：
   - 上位と同じ行間・文字サイズを継承
   - Qアイコンも表示
   - リストマーカーは不要
   - 2段階目のインデントで階層を明確に視覚化
*/
.qa-list li ul {
  list-style: none;
  margin: 1.6rem 0 0 0; /* 上位項目との間隔をli + liと同等に */
  padding: 0 0 0 4.8rem; /* 2段階目のインデント（48px）で階層を明確に視覚化 */
}
.qa-list li ul li + li { margin-top: 1.6rem; }
.qa-list li ul a {
  font-size: 2.0rem; /* 上位と同じ */
  line-height: 2;    /* p と同等の行間感（見た目維持） */
}
/* ネストされたリストにもアイコンを表示 */
.qa-list li ul a::before {
  content: "";
  display: inline-block;
  width: 2.0rem; /* 20px */
  height: 2.0rem; /* 20px */
  background-color: #000;
  -webkit-mask: url('img/common/quora.svg') no-repeat center / contain;
  mask: url('img/common/quora.svg') no-repeat center / contain;
}

/* =========================
   セクション2：learn 画像グリッド
   ========================= */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem; /* 16px */
  max-width: 992px; /* PCの表示領域（2列分） */
  margin: 3.2rem auto; /* 前後のテキストと適度な間隔 */
}
.section-learn .learn-grid + p {
  margin-top: 3.2rem; /* 下のpとの余白を32pxで固定 */
}
.learn-grid img {
  width: auto;            /* 元画像サイズを超えて拡大しない */
  max-width: 100%;        /* コンテナより大きい場合のみ縮小 */
  height: auto;
  display: block;
  justify-self: center;   /* カラム内で中央揃え */
}
@media (min-width: 768px) {
  /* PC時の各画像の配置指定 */
  .learn-grid img:nth-child(1) { /* 上段左：左寄せ・上寄せ */
    justify-self: start;
    align-self: start;
  }
  .learn-grid img:nth-child(2) { /* 上段右：左寄せ・下寄せ */
    justify-self: start;
    align-self: end;
  }
  .learn-grid img:nth-child(3) { /* 下段左：右寄せ・下寄せ */
    justify-self: end;
    align-self: end;
  }
  .learn-grid img:nth-child(4) { /* 下段右：中央寄せ */
    justify-self: center;
    align-self: center;
  }
}
@media (max-width: 767px) {
  .learn-grid {
    grid-template-columns: 1fr; /* モバイルは1列 */
  }
}
.gallery-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column; /* 画像とキャプションを縦積み */
  align-items: center;     /* カードを中央に */
  justify-content: flex-start;
}
.section-fieldguide .gallery-grid + .button {
  margin-top: 3.2rem; /* ギャラリーとボタンの間隔を32pxに固定 */
}
/* フィールドガイド：かなボタン → 白背景パネルの間隔 32px */
.section-fieldguide .kana-buttons + .content-panel { margin-top: 3.2rem; }
/* 上記は隣接関係にならないため、ボタンブロック自体に下余白を付与 */
.section-fieldguide .kana-buttons { margin: 0 0 3.2rem; }
/* フィールドガイド：白背景パネル → CTAボタン の間隔 80px */
.section-fieldguide .content-panel + .container .button-cta,
.section-fieldguide .content-panel + .container .back-home { margin-top: 8rem; }
.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-grid figcaption {
  margin-top: 0.4rem;
  font-size: 1.6rem;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ギャラリー：カード（画像+テキストをリンク化） */
.gallery-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 236px;                 /* 指定の幅 */
  margin-top: 1.6rem;;
  padding: 0.8rem 0 0.8rem 0;            /* 画像間の余白はgrid-gapで担保。水平パディングは0 */
  border-radius: 12px;          /* 角丸 */
  border: 3px solid transparent;/* ホバー時 3px を表示 */
  box-sizing: border-box;       /* 枠線込みで236pxを維持 */
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s, border-color 0.2s;
}
.gallery-card img {
  width: 220px;  /* 画像表示サイズ */
  height: auto;
  display: block;
}
.gallery-card figcaption {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  color: var(--color-text);
  text-align: center;
}
.gallery-card:hover,
.gallery-card:focus {
  background-color: var(--color-secondary); /* #D8E8D6 */
  border-color: var(--color-primary);       /* #177224 */
}
/* figure内どこをホバーしてもカードのホバー効果を適用 */
.gallery-grid figure:hover > a.gallery-card {
  background-color: var(--color-secondary);
  border-color: var(--color-primary);
}
/* キャプション内リンクの体裁（下線なし・色継承） */
.section-fieldguide .gallery-grid figcaption a {
  color: inherit;
  text-decoration: none;
}

/* フィールドガイド：五十音ボタン */
.kana-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8rem;  /* 80px */
  height: 8rem; /* 80px */
  background: #ffffff;
  color: #177224;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 3.0rem; /* 30px */
}
.kana-current {
  color: #000000;           /* テキスト黒 */
  background: #ffffff;      /* 白背景のまま */
  border: none;             /* 枠なし */
}
/* 現在位置（非リンク）のホバー/フォーカスでも色を変えない */
.kana-button.kana-current,
.kana-button.kana-current:hover,
.kana-button.kana-current:focus {
  background: #ffffff;
  color: #000000;
  cursor: default;
}

/* grasses のカテゴリーメニュー専用：現在ページは黒地に白文字 */
.category-buttons .kana-button.kana-current,
.category-buttons .kana-button.kana-current:hover,
.category-buttons .kana-button.kana-current:focus {
  background: #000000;
  color: #ffffff;
}

/* aiueo（かなナビ）でも現在ページは黒地・白文字にする */
.section-fieldguide .kana-buttons .kana-button.kana-current,
.section-fieldguide .kana-buttons .kana-button.kana-current:hover,
.section-fieldguide .kana-buttons .kana-button.kana-current:focus {
  background: #000000;
  color: #ffffff;
}
.kana-button:visited { color: #177224; }
.kana-button:hover,
.kana-button:focus {
  background: var(--color-primary); /* #177224 */
  color: #ffffff;
  border: none;
}

.kana-buttons {
  display: flex;
  gap: 1.6rem; /* 16px */
  flex-wrap: wrap; /* 横に入らない場合は折り返し */
  justify-content: flex-start; /* 折り返し時も左寄せ */
  margin: 1.6rem 0 0; /* 上に16pxの余白を足す */
}
/* nav化に伴い、ul/liのデフォルトをリセット */
.kana-buttons ul { list-style: none; margin: 0; padding: 0; display: contents; }
.kana-buttons li { display: contents; }

/* grasses カテゴリー専用：カテゴリーボタンのサイズ/文字/間隔を調整 */
.section-fieldguide .category-buttons .kana-button,
.category-buttons .kana-button {
  width: 10.4rem;  /* 104px */
  height: 10.4rem; /* 104px */
  font-size: 1.6rem; /* 16px */
  line-height: 1.4;
  text-align: center;
  padding: 0.8rem; /* 複数行でも余裕を確保 */
  box-sizing: border-box;
}
.section-fieldguide .category-buttons,
.category-buttons {
  gap: 0.8rem; /* 8px */
}

/* 汎用：コンテンツエリア内のCTAボタン（リンク）は下線を表示しない・白字固定 */
.subpage main a.button.button-cta,
.subpage main a.button.button-cta:visited,
.subpage main a.button.button-cta:hover,
.subpage main a.button.button-cta:focus {
  color: #ffffff; /* 常に白字 */
  text-decoration: none; /* 下線なし */
  text-decoration-thickness: 0;
}
/* 後方互換：フィールドガイドの旧 .back-home も同様に維持 */
.subpage .section-fieldguide a.button.back-home,
.subpage .section-fieldguide a.button.back-home:visited,
.subpage .section-fieldguide a.button.back-home:hover,
.subpage .section-fieldguide a.button.back-home:focus {
  color: #ffffff;
  text-decoration: none;
  text-decoration-thickness: 0;
}
/* かなボタン群との余白 80px */
.section-fieldguide .kana-buttons + a.button.button-cta,
.section-fieldguide .kana-buttons + a.button.back-home { margin-top: 8rem; }
@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================
   セクション5：3つ横並びカード
   ========================= */
.join-cards {
  display: flex;
  gap: 2.4rem; /* カード間隔 24px */
  justify-content: center;
  margin: 3.2rem auto; /* 中央寄せ */
  flex-wrap: wrap;
  max-width: 992px; /* PC版の最大幅 */
}
.join-card {
  background: var(--color-text-white, #fff);
  border-radius: 30px;
  border: 3px solid transparent; /* ホバー時の3pxボーダーに備えてレイアウトを安定 */
  width: 296px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.2s, border-color 0.2s;
}
.join-card:focus {
  background-color: var(--color-secondary); /* #D8E8D6 */
  border-color: var(--color-primary);       /* #177224 */
}
.join-card:hover {
  background-color: var(--color-secondary); /* #D8E8D6 */
  border-color: var(--color-primary);       /* #177224 */
}


.join-card h3 {
  font-size: inherit;
  margin-top: 6.4rem; /* 64px */
  margin-bottom: 1.6rem;
  color: #000;
}
.join-card-img {
  width: 256px;
  height: 256px;
  object-fit: cover;
  border-radius: 200px;
  margin: 2.4rem 0; /* 上下24px */
  background: #eee;
}
.join-card p {
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 6.4rem; /* 64px */
  padding: 0 2rem; /* 左右20px */
  max-width: 39.6rem; /* 最大幅396px（padding込み） */
  box-sizing: border-box;
  text-align: left; /* 左寄せ */
}

/* =========================
   セクション6・7：カードボックス
   ========================= */
.section-card {
  padding: 2rem 1rem 8rem;
  display: flex;
  justify-content: center;
}
.section-school {
  padding-top: 8rem; /* 背景色エリア上端→上の区切り画像まで80px */
}
/* サブページの学校ページはパンくず直後の余白をsection-learnと同等にするため上余白を無効化 */
.subpage .section-school { padding-top: 0; }
/* 学校の方へ：h2→pは40px、p→ボタンは32px */
.section-school .card-container h2 {
  margin-bottom: 4rem; /* 40px */
}
.section-school .card-container .text-left p {
  margin-bottom: 0;
}
.section-school .card-container .text-left + .button {
  margin-top: 3.2rem; /* 32px */
}
.card-container {
  background-color: var(--color-text-white, #fff);
  border-radius: 1.2rem;
  padding: 3.2rem 3.2rem 8rem; /* ボタン下端→カード底まで80pxを確保 */
  max-width: 980px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.card-container.banner-horizontal {
  display: flex;
  align-items: center;
  gap: 2.4rem; /* 24px */
}
.banner-horizontal .banner-text { flex: 1 1 auto; }
.banner-horizontal .banner-figure { flex: 0 0 auto; margin: 0; }
.banner-horizontal .banner-figure img {
  width: 100%;
  max-width: 24rem; /* テキスト高さ程度に抑制（約240px） */
  height: auto;
}
@media (max-width: 767px) {
  .card-container.banner-horizontal { flex-direction: column; align-items: stretch; }
  .banner-horizontal .banner-figure img { max-width: 100%; }
}
.bg-box {
  background-color: var(--color-bg-light);
}

/* 5) コンポーネント：フッター */
footer {
  padding: 2.4rem 1.6rem;
  position: relative;
}
/* フッター直前の導線バナー */
.footer-banner { text-align: center; margin: 4rem 0 8rem; }
.footer-link-banner { display: inline-block; line-height: 0; }
.footer-link-banner .banner-img { display: block; max-width: 100%; height: auto; }
.footer-link-banner .banner-img-hover { display: none; }
.footer-link-banner:hover .banner-img-normal,
.footer-link-banner:focus-visible .banner-img-normal { display: none; }
.footer-link-banner:hover .banner-img-hover,
.footer-link-banner:focus-visible .banner-img-hover { display: block; }
.footer-container,
footer,
footer a {
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
}
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0.8rem; /* 両側8pxの内側余白 */
  box-sizing: border-box;
}
.footer-col.logo-col .logo-image {
  width: 150px;
  height: auto;
  display: block;
}
.footer-col.logo-col .site-brand {
  margin: 0.5rem 0 0;
  font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
  font-weight: 700;
}
.footer-col.logo-col .site-brand a {
  display: inline-block;
  width: 150px;
  color: #000;
  text-align: center;
}
.footer-col.logo-col .brand-line1,
.footer-col.logo-col .brand-line2 {
  display: block;
  color: #000;
}
.footer-col.logo-col .brand-line1 {
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.footer-col.logo-col .brand-line2 {
  font-size: 3.2rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.footer-col {
  flex: 1;
  min-width: 200px;
}
.footer-col.nav-col ul {
  display: block;
}
.footer-col.nav-col li {
  margin-bottom: 0.5rem;
}
/* フッター中央のリンク：16px/150% */
.footer-col.nav-col,
.footer-col.nav-col a,
.footer-col.nav-col li {
  font-size: 1.8rem;
  line-height: 1.5;
  color: #000000;
  text-decoration: underline;
}
.footer-col.nav-col a:hover {
  color: #177224;
}
address {
  font-style: normal;
}
/* フッター右カラム（住所）：16px/150% */
.footer-col.address-col,
.footer-col.address-col address,
.footer-col.address-col p {
  font-size: 1.6rem;
  line-height: 1.5;
  padding-left: 0.5rem;
}
.footer-env {
  display: block;
  max-width: 28rem; /* 280px */
  max-height: 12rem; /* 120px */
  width: auto;
  height: auto;
  margin: 1.6rem 0; /* 上下16px */
}
.copyright {
  text-align: center;
  color: var(--color-text-white);
  padding: 1.6rem;
  font-size: 1.4rem;
  background-color: var(--color-bg-copyright);
}

/* モバイル時のフッター: 1カラム化、配置指定 */
@media (max-width: 767px) {
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }
  .footer-col {
    min-width: 0;
    width: 100%;
  }
  /* ロゴは中央揃え */
  .footer-col.logo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-col.logo-col .logo-image {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-col.logo-col .site-brand,
  .footer-col.logo-col .site-brand a {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  /* リンクやアドレスなどのテキストは左寄せ */
  .footer-col.nav-col,
  .footer-col.nav-col *,
  .footer-col.address-col,
  .footer-col.address-col * {
    text-align: left;
  }
  /* env.png は中央配置 */
  .footer-env {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 5) コンポーネント：Back to Top（container右端から24px余白で右寄せ） */
.section7-btt-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: calc(8rem + 3.2rem); /* ボタン高さ8rem + フッター上32px */
}
.back-to-top {
  position: absolute;
  top: 0; /* 上余白は直前セクションのpadding-bottom(8rem)で確保 */
  right: 2.4rem;
  width: 8rem;
  height: 8rem;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  color: #000;
  font-size: 2.5rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s, border 0.2s;
  z-index: 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top span {
  display: block;
  font-size: 2.0rem;
  color: #000;
  line-height: 1;
  font-weight: bold;
  transition: color 0.2s;
}
.back-to-top:focus,
.back-to-top:hover {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: #fff;
}
.back-to-top:focus span,
.back-to-top:hover span {
  color: #fff;
}
@media (max-width: 1270px) {
  .back-to-top {
    right: 2.4rem;
  }
}
@media (max-width: 600px) {
  .back-to-top {
    width: 5.6rem;
    height: 5.6rem;
    font-size: 1.5rem;
    right: 2.4rem;
  }
  .back-to-top span {
    font-size: 1.2rem;
  }
  .section7-btt-container {
    height: calc(5.6rem + 3.2rem); /* ボタン高さ5.6rem + フッター上32px */
  }
}

/* ========================================
   7) レスポンシブ（Responsive）
   ======================================== */
@media (max-width: 992px) {
  .join-cards {
    flex-direction: column;
    align-items: stretch; /* 横幅いっぱいに */
    gap: 2.4rem; /* 24px */
  }
  .join-card {
    width: 100%;
    max-width: none;
  }
  /* フィールドガイド：目次（モバイル対応） */
  .species-toc-group-nav {
    padding: 0 2.4rem;
  }
  .species-toc-group-list {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }
  .species-toc-group-list a {
    display: block;
    padding: 0.4rem 0;
  }
  .species-toc {
    padding: 0 2.4rem;
  }
  .species-toc-group {
    margin: 2.4rem 0;
  }
  .species-toc-group h3 {
    font-size: 1.8rem;
  }
  .species-toc-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 0;
  }
  .species-toc-list a {
    display: block;
    padding: 0.4rem 0;
  }
  /* フィールドガイド：グループセクション（モバイル対応） */
  .species-group-section {
    margin: 3.2rem 0 2.4rem 0;
  }
  .species-group-heading {
    font-size: 1.8rem;
    margin: 0 auto 1.6rem auto !important;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 992px) {
  /* 全幅メニューのため、ヘッダー左右マージンを除去 */
  header { margin-left: 0; margin-right: 0; }
  .header-inner { padding: 0 24px; box-sizing: border-box; }
  /* モバイルではPC専用改行を無効化 */
  br.pc-only-break { display: none; }
  .hamburger-wrap { display: none; }
  .hamburger { display: inline-flex; align-items: center; line-height: 1; padding: 1.6rem 16px; margin-left: auto; order: 2; margin-right: 0; box-sizing: border-box; max-width: calc(100vw - 48px); white-space: nowrap; }
  .hamburger-text { display: inline-block; }
  .hamburger-text-close { display: none; }
  .site-logo { display: flex; align-items: center; }
  .nav-group nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--color-bg-light);
    padding: 0.5rem 0;
    width: 100%;
  }
  /* PC用ナビはモバイルで常に非表示 */
  .nav-group .nav-top,
  .nav-group .nav-main { display: none; }
  /* モバイル専用ナビの体裁 */
  .nav-group .nav-mobile { background-color: #fff; width: 100%; position: static; margin: 0; padding-bottom: 0; }
  .nav-group .nav-mobile ul { flex-direction: column; gap: 0; padding-left: 24px; padding-right: 24px; margin: 0; }
  .nav-group .nav-mobile li { width: 100%; background: #fff; }
  .nav-group .nav-mobile li + li { border-top: 1px solid #000; }
  .nav-group .nav-mobile li:first-child { border-top: 1px solid #000; }
  .nav-group .nav-mobile li:last-child { border-bottom: 1px solid #000; }
  .nav-group .nav-mobile a {
    display: block;
    width: 100%;
    padding: 1.6rem 24px 1.6rem 16px;
    background: #fff;
    color: #000;
    font-family: 'MOBO', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
    font-weight: 700;
    font-size: 2.0rem;
    box-sizing: border-box;
  }
  .nav-group .nav-mobile a:hover,
  .nav-group .nav-mobile a:focus {
    background: var(--color-primary);
    color: #fff;
  }
  /* モバイルメニューのフォーカスリングが区切り線を消さないように内側に描く */
  .nav-group .nav-mobile a:focus,
  .nav-group .nav-mobile a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-primary-dark);
  }
  /* 右上トグル：ロールオーバー（閉／開 状態に応じた白アイコン） */
  .hamburger:hover,
  .hamburger:focus { background: var(--color-primary); color: #fff; }
  .hamburger:hover .hamburger-visual,
  .hamburger:focus .hamburger-visual {
    -webkit-mask: url('img/common/list-white.svg') no-repeat center / contain;
    mask: url('img/common/list-white.svg') no-repeat center / contain;
    background-color: #fff;
  }
  .hamburger[aria-expanded="true"]:hover .hamburger-visual,
  .hamburger[aria-expanded="true"]:focus .hamburger-visual {
    -webkit-mask: url('img/common/x-lg-white.svg') no-repeat center / contain;
    mask: url('img/common/x-lg-white.svg') no-repeat center / contain;
    background-color: #fff;
  }
  /* 下部クローズボタン（右上と同デザイン・中央揃え） */
  .hamburger-bottom-wrap { display: none; justify-content: center; padding: 0 24px 2.4rem; width: 100%; position: static; margin: 0; box-sizing: border-box; text-align: center; }
  .hamburger-bottom-wrap .hamburger-bottom { margin-left: auto; margin-right: auto; }
  .hamburger-bottom { display: inline-flex; align-items: center; line-height: 1; padding: 1.6rem 16px; cursor: pointer; max-width: calc(100vw - 48px); white-space: nowrap; }
  /* メニューが開いているときだけ下部ボタンを表示（nav-group 配下の要素を対象） */
  .hamburger[aria-expanded="true"] ~ .nav-group .hamburger-bottom-wrap { display: flex; }
  .hamburger[aria-expanded="true"] ~ .nav-group .hamburger-bottom-wrap .hamburger-visual { -webkit-mask: url('img/common/x-lg.svg') no-repeat center / contain; mask: url('img/common/x-lg.svg') no-repeat center / contain; }
  .hamburger[aria-expanded="true"] ~ .nav-group .hamburger-bottom-wrap .hamburger-text-open { display: none; }
  .hamburger[aria-expanded="true"] ~ .nav-group .hamburger-bottom-wrap .hamburger-text-close { display: inline-block; }
  .hamburger-bottom:hover,
  .hamburger-bottom:focus {
    background: var(--color-primary);
    color: #fff;
  }
  .hamburger-bottom:hover .hamburger-visual,
  .hamburger-bottom:focus .hamburger-visual {
    -webkit-mask: url('img/common/x-lg-white.svg') no-repeat center / contain;
    mask: url('img/common/x-lg-white.svg') no-repeat center / contain;
    background-color: #fff;
  }
  /* メニュー開時にナビ表示 */
  .hamburger[aria-expanded="true"] ~ .nav-group .nav-mobile {
    display: block;
  }
  .nav-group {
    width: 100%;
    align-items: flex-start;
    order: 3;
  }
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1rem;
  }
}
@media (min-width: 768px) {
  body {
    font-size: 2.0rem;
  }
  .nav-main ul li {
    position: relative;
    padding: 8px 20px;
    margin-right: -16px;
    border-radius: 0;
    transition: background 0.2s;
    cursor: pointer;
  }
  .nav-main ul li:last-child {
    margin-right: 0;
  }
  .nav-main ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #000;
    display: block;
  }
  .nav-main ul li:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #000;
    display: block;
  }
  .nav-main ul li:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #000;
    display: block;
  }
  .nav-main ul li:hover,
  .nav-main ul li:focus-within {
    background: #177224;
  }
  .nav-main ul li a {
    color: #000;
    background: none;
    border-radius: 0;
    padding: 0;
    transition: color 0.2s;
    display: block;
  }
  .nav-main ul li a:focus-visible {
    outline: 3px dotted var(--color-primary-dark);
    outline-offset: 4px;
  }
  .nav-main ul li:hover a,
  .nav-main ul li:focus-within a {
    color: #fff;
  }
}
@media (min-width: 1024px) {
  body {
    font-size: 2.0rem;
  }
}

/* 動きの軽減（OS設定に追従） */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ========================================
   reference: li 内の dt/dd を横並び表示
   ======================================== */
.section-reference li dt,
.section-reference li dd {
  display: inline;
}
.section-reference li dt {
  margin-right: 0.8rem;
}
.section-reference li dd {
  margin-left: 0;
  margin-right: 0;
}
.section-reference li dd::after {
  content: "";
  display: block; /* dt+dd のセットごとに改行 */
}

/* reference: 見出しh3と直後のulの間隔を詰める */
.section-reference .text-left h3 + ul { margin-top: 0; }
.section-reference .text-left h3:has(+ ul) { margin-bottom: 0.8rem; }

/* reference: 各リスト内の本文(p)と定義リスト(dl)は16pxに固定 */
.section-reference ul li p,
.section-reference ul li dl {
  font-size: 1.8rem;
}
/* reference: リスト内の h4 と p/dl の間隔を 1.2rem に統一 */
.section-reference ul li h4 { margin-bottom: 0; }
.section-reference ul li h4 + p,
.section-reference ul li h4 + dl { margin-top: 1.2rem; }
/* reference: リスト内の h3 と p/dl の間隔も 1.2rem に統一（.subpage h3 を上書き） */
.section-reference ul li h3 { margin-bottom: 0; }
.section-reference ul li h3 + p,
.section-reference ul li h3 + dl { margin-top: 1.2rem; }