@charset "utf-8";
/*
Theme Name: 佐渡自然塾
Theme URI: https://sado-shizen.com/
Description: 一般社団法人 佐渡自然塾のためのオリジナルテーマ。「3億年の歴史が作った日本の縮図・佐渡」という核を、日本海の藍・岩肌のグレージュ・苔の緑で表現する。島を4つのエリアに分けて歩く横アコーディオン、3つの学び方のタブ、開催予定を主役に据えた構成。株式会社サドテック制作。
Author: 株式会社サドテック
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sado-shizen
Tags: custom-menu, featured-images, translation-ready, custom-colors
*/

/* ==========================================================================
   0. 変数
   配色 : 日本海の藍 / 岩肌のグレージュ / 苔の緑（唯一のアクセント）/ 墨
   書体 : 見出しは明朝（3億年の重み）、本文はゴシック（可読性）
   フォントはOS標準のみ。外部への通信は一切発生させない。
   ========================================================================== */

:root {
  /* 藍（日本海） */
  --ai:            #0f3550;
  --ai-deep:       #071c2b;
  --ai-mid:        #1c5a7d;
  --ai-pale:       #4a7f9e;
  --ai-wash:       #e6edf2;

  /* 岩肌 */
  --iwa:           #c8c0b2;
  --iwa-mid:       #a8a091;
  --iwa-pale:      #ece8e0;
  --iwa-wash:      #f6f4ef;

  /* 苔（アクセント） */
  --koke:          #5c7a44;
  --koke-bright:   #7a9c58;
  --koke-deep:     #3c5230;
  --koke-wash:     #eef2e7;

  /* 土（ワークショップ用の第3アクセント） */
  --tsuchi:        #96693a;
  --tsuchi-deep:   #6d4b28;

  /* 墨・和紙 */
  --sumi:          #1a1e21;
  --sumi-soft:     #454b50;
  --sumi-faint:    #7b8288;
  --washi:         #fbfaf7;
  --washi-pure:    #ffffff;

  /* 罫 */
  --rule:          #ddd8ce;
  --rule-soft:     #ebe7df;
  --rule-dark:     rgba(251, 250, 247, .18);
  --rule-darker:   rgba(251, 250, 247, .08);

  /* 影 */
  --shadow-sm:     0 1px 2px rgba(7, 28, 43, .06), 0 2px 8px rgba(7, 28, 43, .05);
  --shadow-md:     0 4px 12px rgba(7, 28, 43, .08), 0 12px 32px rgba(7, 28, 43, .07);
  --shadow-lg:     0 12px 28px rgba(7, 28, 43, .12), 0 32px 64px rgba(7, 28, 43, .10);

  /* 書体 */
  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
            "HGS明朝E", "MS PMincho", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
            "YuGothic", "Meiryo", "Helvetica Neue", Arial, sans-serif;
  --latin:  "Helvetica Neue", "Arial", "Segoe UI", sans-serif;

  /* 字送り */
  --ls-wide:       .22em;
  --ls-mid:        .1em;
  --ls-tight:      .02em;

  /* 寸法 */
  --measure:       1180px;
  --measure-wide:  1440px;
  --measure-narrow: 860px;
  --gutter:        24px;
  --header-h:      88px;
  --header-h-sm:   64px;

  /* 余白のリズム（1セクション＝1つの伝えたいこと。詰め込まない） */
  --space-2xs:     4px;
  --space-xs:      8px;
  --space-sm:      16px;
  --space-md:      28px;
  --space-lg:      36px;
  --space-xl:      52px;
  --space-2xl:     72px;
  --space-3xl:     88px;

  /* 動き */
  --ease:          cubic-bezier(.22, .61, .36, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-inout:    cubic-bezier(.65, .05, .36, 1);
  --dur-fast:      .22s;
  --dur:           .45s;
  --dur-slow:      .8s;
  --dur-xslow:     1.4s;

  /* 重なり順（親同士の順序で解決する。子のz-indexで親は超えられない） */
  --z-hero:        1;
  --z-sticky:      120;
  --z-totop:       200;
  --z-drawer:      300;
  --z-header:      400;
  --z-search:      500;
  --z-loader:      900;
}

/* ==========================================================================
   1. リセットとベース
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--gothic);
  font-size: 1.6rem;
  line-height: 2;
  color: var(--sumi);
  background: var(--washi);
  letter-spacing: var(--ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.5; }
p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--koke-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--koke-wash); color: var(--koke-deep); }

.c-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ai);
  color: var(--washi);
  font-size: 1.4rem;
}
.c-skiplink:focus { left: 8px; top: 8px; }

/* ==========================================================================
   2. レイアウト
   ========================================================================== */

.l-main { display: block; }

.l-container {
  width: min(100% - (var(--gutter) * 2), var(--measure));
  margin-inline: auto;
}
.l-container--wide   { width: min(100% - (var(--gutter) * 2), var(--measure-wide)); }
.l-container--narrow { width: min(100% - (var(--gutter) * 2), var(--measure-narrow)); }

/* ==========================================================================
   3. 共通コンポーネント
   ========================================================================== */

/* 3-1. 見出し（英字＋和文の二段組み。階層を色でなく組み方で表す） */
.c-sectionhead { margin-bottom: var(--space-lg); }

.c-sectionhead__en {
  display: block;
  font-family: var(--latin);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke);
  margin-bottom: var(--space-sm);
  position: relative;
  padding-left: 42px;
}
.c-sectionhead__en::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out) .1s;
}
.is-inview .c-sectionhead__en::before,
[data-inview].is-inview .c-sectionhead__en::before { transform: scaleX(1); }
.c-sectionhead.is-inview .c-sectionhead__en::before { transform: scaleX(1); }

.c-sectionhead__ja {
  font-family: var(--mincho);
  font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  color: var(--ai-deep);
}

.c-sectionhead--center { text-align: center; }
.c-sectionhead--center .c-sectionhead__en { padding-left: 0; }
.c-sectionhead--center .c-sectionhead__en::before { display: none; }
.c-sectionhead--light .c-sectionhead__ja { color: var(--washi); }
.c-sectionhead--light .c-sectionhead__en { color: var(--koke-bright); }

/* 3-2. ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 30px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: var(--ls-mid);
  color: var(--washi);
  background: var(--ai);
  border: 1px solid var(--ai);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--koke);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-out);
  z-index: -1;
}
.c-btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.c-btn:hover { border-color: var(--koke); }
.c-btn .c-icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.c-btn:hover .c-icon { transform: translateX(5px); }

.c-btn--ghost {
  color: var(--washi);
  background: transparent;
  border-color: rgba(251, 250, 247, .55);
  backdrop-filter: blur(3px);
}
.c-btn--ghost::before { background: var(--washi); }
.c-btn--ghost:hover { color: var(--ai-deep); border-color: var(--washi); }

.c-btn--sm { min-height: 44px; padding: 0 20px; font-size: 1.3rem; }

/* 主ボタンの隣に置く副ボタン */
.c-btn--line {
  color: var(--ai-deep);
  background: transparent;
  border-color: var(--rule);
}
.c-btn--line::before { background: var(--ai-deep); }
.c-btn--line:hover { color: var(--washi); border-color: var(--ai-deep); }

/* 3-3. アイコン */
.c-icon { width: 22px; height: 22px; flex: none; }
.c-icon--sm { width: 16px; height: 16px; }

/* 3-4. スクロールインビュー（一斉に出さず、時間差で視線を誘導する） */
[data-inview] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--inview-delay, 0) * .12s);
  will-change: opacity, transform;
}
[data-inview].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-inview-delay="1"] { --inview-delay: 1; }
[data-inview-delay="2"] { --inview-delay: 2; }
[data-inview-delay="3"] { --inview-delay: 3; }
[data-inview-delay="4"] { --inview-delay: 4; }

/* ==========================================================================
   4. プリローダー
   ========================================================================== */

.p-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--ai-deep);
  color: var(--washi);
  transition: opacity .6s var(--ease) .35s, visibility .6s var(--ease) .35s;
}
.p-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.p-loader__inner { text-align: center; position: relative; z-index: 2; }

.p-loader__mark {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-md);
  color: var(--koke-bright);
}
.p-loader__ring {
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  animation: loaderRing 2.2s var(--ease-inout) infinite;
  transform-origin: center;
}
.p-loader__wave {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: loaderWave 2.2s var(--ease-inout) .3s infinite;
}

.p-loader__name {
  font-family: var(--mincho);
  font-size: 2.4rem;
  letter-spacing: .4em;
  text-indent: .4em;
  margin-bottom: var(--space-xs);
}
.p-loader__name span {
  display: inline-block;
  opacity: 0;
  animation: loaderChar .7s var(--ease-out) forwards;
}
.p-loader__name span:nth-child(1) { animation-delay: .10s; }
.p-loader__name span:nth-child(2) { animation-delay: .20s; }
.p-loader__name span:nth-child(3) { animation-delay: .30s; }
.p-loader__name span:nth-child(4) { animation-delay: .40s; }
.p-loader__name span:nth-child(5) { animation-delay: .50s; }

.p-loader__en {
  font-family: var(--latin);
  font-size: 1rem;
  letter-spacing: var(--ls-wide);
  color: var(--ai-pale);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: loaderChar .8s var(--ease-out) .7s forwards;
}

.p-loader__dots { display: flex; gap: 7px; justify-content: center; }
.p-loader__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--koke-bright);
  animation: loaderDot 1.3s var(--ease-inout) infinite;
}
.p-loader__dots i:nth-child(2) { animation-delay: .16s; }
.p-loader__dots i:nth-child(3) { animation-delay: .32s; }

.p-loader__curtain {
  position: absolute;
  inset: 0;
  background: var(--washi);
  transform: scaleY(0);
  transform-origin: bottom center;
  z-index: 1;
}
.p-loader.is-done .p-loader__curtain {
  animation: loaderCurtain .75s var(--ease-inout) forwards;
}

/* ==========================================================================
   5. ヘッダー
   ========================================================================== */

.p-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);       /* ドロワーより上に置く */
  height: var(--header-h);
  background: transparent;
  transition:
    height var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.p-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 28, 43, .55), rgba(7, 28, 43, 0));
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.p-header.is-solid {
  height: 68px;
  background: rgba(251, 250, 247, .94);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}
.p-header.is-solid::after { opacity: 0; }
.p-header.is-hidden { transform: translateY(-100%); }
.p-header { transition-property: height, background-color, box-shadow, transform; }

body.is-drawer-open .p-header { background: transparent; backdrop-filter: none; box-shadow: none; }
body.is-drawer-open .p-header::after { opacity: 0; }

.p-header__inner {
  height: 100%;
  width: min(100% - 40px, var(--measure-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  position: relative;
  z-index: 2;
}

.p-header__brand { flex: none; }

.p-header__logo { display: block; line-height: 1.2; }
.p-header__logo-ja {
  display: block;
  font-family: var(--mincho);
  font-size: 2rem;
  letter-spacing: .18em;
  color: var(--washi);
  transition: color var(--dur) var(--ease);
}
.p-header__logo-en {
  display: block;
  font-family: var(--latin);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(251, 250, 247, .6);
  margin-top: 3px;
  transition: color var(--dur) var(--ease);
}
.p-header.is-solid .p-header__logo-ja { color: var(--ai-deep); }
.p-header.is-solid .p-header__logo-en { color: var(--koke); }
body.is-drawer-open .p-header__logo-ja { color: var(--washi); }
body.is-drawer-open .p-header__logo-en { color: rgba(251, 250, 247, .6); }

.p-header__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.p-header__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--washi);
  border-radius: 50%;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.p-header__btn:hover { background: rgba(251, 250, 247, .14); }
.p-header.is-solid .p-header__btn { color: var(--ai-deep); }
.p-header.is-solid .p-header__btn:hover { background: var(--iwa-pale); }

/* スクロール進捗バー */
.p-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  overflow: hidden;
}
.p-header__progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--koke-bright);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ==========================================================================
   6. グローバルナビ／メガメニュー
   ========================================================================== */

.p-gnav { display: none; }

.p-gnav__list { display: flex; align-items: center; gap: 4px; }

.p-gnav__item { position: static; }

.p-gnav__link {
  display: block;
  padding: 10px 14px;
  text-align: center;
  position: relative;
}
.p-gnav__ja {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--washi);
  transition: color var(--dur-fast) var(--ease);
}
.p-gnav__en {
  display: block;
  font-family: var(--latin);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(251, 250, 247, .5);
  margin-top: 3px;
  transition: color var(--dur-fast) var(--ease);
}
.p-header.is-solid .p-gnav__ja { color: var(--ai-deep); }
.p-header.is-solid .p-gnav__en { color: var(--iwa-mid); }

.p-gnav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--koke-bright);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-out);
}
.p-gnav__item:hover .p-gnav__link::after,
.p-gnav__item.is-open .p-gnav__link::after { transform: scaleX(1); transform-origin: left center; }
.p-gnav__item:hover .p-gnav__ja { color: var(--koke-bright); }
.p-header.is-solid .p-gnav__item:hover .p-gnav__ja { color: var(--koke); }

/* メガメニュー共通 */
.p-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--washi);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    transform var(--dur) var(--ease-out);
  border-top: 1px solid var(--rule-soft);
}
.p-gnav__item.is-open > .p-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.p-mega__inner {
  width: min(100% - 40px, var(--measure-wide));
  margin-inline: auto;
  padding: var(--space-lg) 0;
}

/* 文字だけの2列ドロップダウン */
.p-mega--list .p-mega__inner { padding: var(--space-md) 0; }
.p-mega__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 40px;
  max-width: 640px;
}
.p-mega__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 8px;
  font-size: 1.45rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ai-deep);
}
.p-mega__links a .c-icon { color: var(--koke); transition: transform var(--dur) var(--ease-out); }
.p-mega__links a:hover { color: var(--koke); }
.p-mega__links a:hover .c-icon { transform: translateX(4px); }

/* 画像が切り替わるメガメニュー */
.p-mega--image .p-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-xl);
  align-items: start;
}

.p-mega__items { display: grid; gap: 1px; }
/* 英字を横に置くと「FIELD WORK」「OUTREACH」が和文と衝突するため、上に積む */
.p-mega__item a {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.p-mega__item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--koke);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur) var(--ease-out);
}
.p-mega__item.is-active a::before { transform: scaleY(1); }

.p-mega__no {
  font-family: var(--latin);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--koke);
  white-space: nowrap;
}
.p-mega__label {
  font-family: var(--mincho);
  font-size: 1.8rem;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ai-deep);
  transition: color var(--dur-fast) var(--ease);
}
.p-mega__desc {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--sumi-faint);
}
.p-mega__item.is-active .p-mega__label { color: var(--koke); }

.p-mega__figures {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--iwa-pale);
}
.p-mega__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-xslow) var(--ease-out);
}
.p-mega__figure.is-active { opacity: 1; transform: scale(1); }
.p-mega__figure img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   7. 検索オーバーレイ
   ========================================================================== */

.p-search {
  position: fixed;
  inset: 0;
  z-index: var(--z-search);
  background: rgba(7, 28, 43, .97);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.p-search.is-open { opacity: 1; visibility: visible; }

.p-search__inner {
  width: min(100% - 48px, 720px);
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out) .1s, opacity var(--dur-slow) var(--ease) .1s;
}
.p-search.is-open .p-search__inner { transform: translateY(0); opacity: 1; }

.p-search__label {
  font-family: var(--latin);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke-bright);
  margin-bottom: var(--space-md);
}

.p-search__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--washi);
  border: 1px solid var(--rule-dark);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.p-search__close:hover { background: rgba(251, 250, 247, .12); transform: rotate(90deg); }

.c-searchform { display: flex; gap: 0; border-bottom: 1px solid var(--rule-dark); }
.c-searchform__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 16px 4px;
  font-family: var(--mincho);
  font-size: 2.2rem;
  color: var(--washi);
  letter-spacing: .06em;
}
.c-searchform__input::placeholder { color: rgba(251, 250, 247, .35); }
.c-searchform__input:focus { outline: none; }
.c-searchform__submit {
  width: 56px;
  display: grid;
  place-items: center;
  color: var(--koke-bright);
  transition: transform var(--dur) var(--ease-out);
}
.c-searchform__submit:hover { transform: scale(1.15); }

/* ==========================================================================
   8. モバイルドロワー
   ========================================================================== */

.p-drawer__toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.p-drawer__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--washi);
  transition: transform var(--dur) var(--ease-inout), opacity var(--dur-fast) var(--ease), background-color var(--dur) var(--ease);
}
.p-header.is-solid .p-drawer__bar { background: var(--ai-deep); }
body.is-drawer-open .p-drawer__bar { background: var(--washi); }
body.is-drawer-open .p-drawer__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.is-drawer-open .p-drawer__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.is-drawer-open .p-drawer__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.p-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--ai-deep);
  overflow-y: auto;                 /* スクロールは外側が担当する */
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  -webkit-overflow-scrolling: touch;
}
.p-drawer.is-open { opacity: 1; visibility: visible; }

.p-drawer__inner {
  min-height: 100%;                 /* height:100% にしない。内容が増えても切れない */
  display: grid;
  align-content: center;
  align-content: safe center;       /* はみ出す場合は先頭揃えへ自動で切り替わる */
  gap: var(--space-xl);
  padding: calc(var(--header-h-sm) + var(--space-xl)) var(--gutter) var(--space-xl);
  width: min(100%, 640px);
  margin-inline: auto;
}

.p-drawer__item { border-bottom: 1px solid var(--rule-darker); }
.p-drawer__row { display: flex; align-items: stretch; }

.p-drawer__link {
  flex: 1;
  display: grid;
  gap: 2px;
  padding: 20px 4px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.p-drawer.is-open .p-drawer__link { opacity: 1; transform: translateY(0); }
.p-drawer.is-open .p-drawer__item:nth-child(1) .p-drawer__link { transition-delay: .08s; }
.p-drawer.is-open .p-drawer__item:nth-child(2) .p-drawer__link { transition-delay: .14s; }
.p-drawer.is-open .p-drawer__item:nth-child(3) .p-drawer__link { transition-delay: .20s; }
.p-drawer.is-open .p-drawer__item:nth-child(4) .p-drawer__link { transition-delay: .26s; }
.p-drawer.is-open .p-drawer__item:nth-child(5) .p-drawer__link { transition-delay: .32s; }
.p-drawer.is-open .p-drawer__item:nth-child(6) .p-drawer__link { transition-delay: .38s; }
.p-drawer.is-open .p-drawer__item:nth-child(7) .p-drawer__link { transition-delay: .44s; }
.p-drawer.is-open .p-drawer__item:nth-child(8) .p-drawer__link { transition-delay: .50s; }

.p-drawer__en {
  font-family: var(--latin);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke-bright);
}
.p-drawer__ja {
  font-family: var(--mincho);
  font-size: 2.2rem;
  letter-spacing: .1em;
  color: var(--washi);
}

.p-drawer__expand {
  width: 56px;
  display: grid;
  place-items: center;
  color: var(--ai-pale);
  transition: color var(--dur-fast) var(--ease);
}
.p-drawer__expand .c-icon { transition: transform var(--dur) var(--ease-inout); }
.p-drawer__expand[aria-expanded="true"] { color: var(--koke-bright); }
.p-drawer__expand[aria-expanded="true"] .c-icon { transform: rotate(135deg); }

.p-drawer__child {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease-inout);
}
.p-drawer__child li a {
  display: block;
  padding: 11px 4px 11px 20px;
  font-size: 1.45rem;
  color: rgba(251, 250, 247, .72);
  border-left: 1px solid var(--rule-darker);
  margin-left: 4px;
}
.p-drawer__child li a:hover { color: var(--koke-bright); }
.p-drawer__child li:last-child a { padding-bottom: 20px; }

.p-drawer__foot { display: grid; gap: var(--space-sm); }
.p-drawer__contact,
.p-drawer__sns {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.45rem;
  color: rgba(251, 250, 247, .8);
}
.p-drawer__contact .c-icon,
.p-drawer__sns .c-icon { color: var(--koke-bright); }
.p-drawer__contact:hover, .p-drawer__sns:hover { color: var(--washi); }

/* ==========================================================================
   9. ファーストビュー
   ========================================================================== */

.p-hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 1000px;
  overflow: hidden;
  background: var(--ai-deep);
  z-index: var(--z-hero);
}

.p-hero__stage { position: absolute; inset: 0; }

.p-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.p-hero__slide.is-active { opacity: 1; }

.p-hero__media { position: absolute; inset: 0; overflow: hidden; }
.p-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
/* Ken Burns：表示中のスライドだけゆっくり寄る */
.p-hero__slide.is-active .p-hero__media img {
  animation: kenburns 9s var(--ease-out) forwards;
}

.p-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(7, 28, 43, .5) 0%, rgba(7, 28, 43, .12) 38%, rgba(7, 28, 43, .72) 100%),
    linear-gradient(to right, rgba(7, 28, 43, .45) 0%, rgba(7, 28, 43, 0) 55%);
}

.p-hero__body {
  position: relative;
  z-index: 2;
  height: 100%;
  width: min(100% - 40px, var(--measure-wide));
  margin-inline: auto;
  display: grid;
  align-content: center;
  padding-top: var(--header-h);
}

.p-hero__copy { max-width: 780px; }

.p-hero__text { display: none; }
.p-hero__text.is-active { display: block; }

.p-hero__catch {
  font-family: var(--mincho);
  font-size: clamp(3.2rem, 1.4rem + 5.2vw, 7.2rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: .07em;
  color: var(--washi);
  text-shadow: 0 2px 24px rgba(7, 28, 43, .4);
  margin-bottom: var(--space-md);
}
.p-hero__line { display: block; overflow: hidden; }
.p-hero__line > span {
  display: inline-block;
  transform: translateY(105%);
  animation: heroLine 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * .13s + .2s);
}

.p-hero__sub {
  font-size: clamp(1.4rem, 1.2rem + .4vw, 1.7rem);
  letter-spacing: .1em;
  color: rgba(251, 250, 247, .88);
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) .62s forwards;
}

.p-hero__cta {
  margin-top: var(--space-lg);
  opacity: 0;
  animation: fadeUp .9s var(--ease-out) .8s forwards;
}

.p-hero__controls {
  position: absolute;
  right: 0;
  bottom: 96px;
}
.p-hero__dots { display: grid; gap: 18px; }
.p-hero__dots button {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(251, 250, 247, .55);
  transition: color var(--dur) var(--ease);
}
.p-hero__dots button[aria-selected="true"] { color: var(--washi); }
.p-hero__dotbar {
  display: block;
  width: 54px;
  height: 1px;
  background: rgba(251, 250, 247, .3);
  position: relative;
  overflow: hidden;
}
.p-hero__dotbar i {
  position: absolute;
  inset: 0;
  background: var(--koke-bright);
  transform: scaleX(0);
  transform-origin: left center;
}
.p-hero__dots button[aria-selected="true"] .p-hero__dotbar i {
  animation: heroProgress 6.4s linear forwards;
}
.p-hero__dotnum {
  font-family: var(--latin);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.p-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  z-index: 2;
}
.p-hero__scroll-label {
  font-family: var(--latin);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: rgba(251, 250, 247, .7);
  writing-mode: vertical-rl;
}
.p-hero__scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(251, 250, 247, .25);
  position: relative;
  overflow: hidden;
}
.p-hero__scroll-line i {
  position: absolute;
  left: 0;
  width: 1px;
  height: 24px;
  background: var(--koke-bright);
  animation: scrollDrop 2.1s var(--ease-inout) infinite;
}

/* ==========================================================================
   10. お知らせティッカー
   ========================================================================== */

.p-ticker {
  background: var(--ai-deep);
  color: var(--washi);
  border-top: 1px solid var(--rule-darker);
}
/* 狭い画面では見出しラベルと「一覧」を隠し、本文に幅を回す。
   3列のままだと本文の列が数十pxまで潰れる。 */
.p-ticker__inner {
  width: min(100% - 40px, var(--measure-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 62px;
}

.p-ticker__head {
  display: none;
  align-items: center;
  gap: 9px;
  padding-right: var(--space-md);
  border-right: 1px solid var(--rule-darker);
  color: var(--koke-bright);
}
.p-ticker__head-en {
  font-family: var(--latin);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
}

.p-ticker__viewport { height: 62px; overflow: hidden; position: relative; }
.p-ticker__list { position: relative; height: 100%; }
.p-ticker__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.p-ticker__item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.p-ticker__item.is-leaving { opacity: 0; transform: translateY(-100%); }

.p-ticker__item a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.p-ticker__date {
  font-family: var(--latin);
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--ai-pale);
  flex: none;
}
.p-ticker__cat {
  display: none;          /* 狭い画面では日付とタイトルだけにする */
  flex: none;
  font-size: 1.1rem;
  letter-spacing: .06em;
  padding: 3px 12px;
  border: 1px solid var(--rule-dark);
  color: rgba(251, 250, 247, .85);
}
.p-ticker__title {
  font-size: 1.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.p-ticker__item a:hover .p-ticker__title { color: var(--koke-bright); }

.p-ticker__nav { display: flex; align-items: center; gap: 4px; }
.p-ticker__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-darker);
  color: rgba(251, 250, 247, .7);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.p-ticker__btn:hover { background: rgba(251, 250, 247, .1); color: var(--washi); }
.p-ticker__btn[data-ticker-prev] .c-icon { transform: rotate(-90deg); }
.p-ticker__btn[data-ticker-next] .c-icon { transform: rotate(90deg); }
.p-ticker__more {
  display: none;
  margin-left: 8px;
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: var(--ai-pale);
}
.p-ticker__more:hover { color: var(--koke-bright); }

/* ==========================================================================
   11. イントロ
   ========================================================================== */

.p-intro {
  position: relative;
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: var(--washi);
  overflow: hidden;
}

/* 地層のように水平の罫を重ねる */
.p-intro__strata {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  align-content: start;
  gap: 118px;
  padding-top: 90px;
}
.p-intro__strata span {
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-soft) 12%, var(--rule-soft) 88%, transparent);
}

.p-intro__grid {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.p-intro__lead { margin-bottom: var(--space-lg); }
.p-intro__lead p {
  font-size: 1.6rem;
  line-height: 2.15;
  color: var(--sumi-soft);
}
.p-intro__lead p + p { margin-top: 1.4em; }

.p-intro__facts {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-lg);
}
.p-intro__fact { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.p-intro__fact-num {
  font-family: var(--mincho);
  font-size: 3rem;
  line-height: 1;
  color: var(--ai);
  letter-spacing: .02em;
  flex: none;
  min-width: 104px;
  white-space: nowrap;
}
.p-intro__fact-num small {
  font-family: var(--gothic);
  font-size: 1.3rem;
  margin-left: 5px;
  color: var(--koke);
  letter-spacing: .08em;
}
.p-intro__fact-label { font-size: 1.4rem; color: var(--sumi-faint); letter-spacing: .06em; }

.p-intro__more { display: flex; flex-wrap: wrap; gap: 12px; }

.p-intro__figure { position: relative; margin: 0; }
.p-intro__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.p-intro__caption {
  position: absolute;
  left: 0;
  bottom: -1px;
  background: var(--washi);
  padding: var(--space-sm) var(--space-md) 0 0;
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: var(--sumi-soft);
  max-width: 74%;
}
.p-intro__caption-en {
  display: block;
  font-family: var(--latin);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke);
  margin-bottom: 4px;
}

/* ==========================================================================
   12. 塾長メッセージ
   ========================================================================== */

.p-message {
  position: relative;
  padding: var(--space-3xl) 0;
  color: var(--washi);
  overflow: hidden;
  isolation: isolate;
}
.p-message__bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}
.p-message__bg img { width: 100%; height: 100%; object-fit: cover; }
.p-message__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 背景が明るい写真でも本文の可読性を確保する */
  background:
    linear-gradient(to right, rgba(7, 28, 43, .96) 0%, rgba(7, 28, 43, .88) 48%, rgba(7, 28, 43, .68) 100%),
    linear-gradient(to bottom, rgba(7, 28, 43, .3), rgba(7, 28, 43, .45));
}

.p-message__inner { max-width: 780px; }

.p-message__body p {
  font-size: 1.55rem;
  line-height: 2.2;
  color: rgba(251, 250, 247, .88);
}
.p-message__body p + p { margin-top: 1.3em; }

.p-message__sign {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.p-message__role { font-size: 1.25rem; letter-spacing: .12em; color: var(--ai-pale); }
.p-message__name {
  font-family: var(--mincho);
  font-size: 2.4rem;
  letter-spacing: .16em;
}

.p-message__more { margin-top: var(--space-lg); }

.p-message__lecturers {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.p-message__lecturers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-darker);
}
.p-message__lec-role {
  justify-self: start;
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--koke-bright);
  border: 1px solid rgba(122, 156, 88, .5);
  padding: 3px 14px;
  text-align: center;
  white-space: nowrap;
}
.p-message__lec-name { font-family: var(--mincho); font-size: 1.8rem; letter-spacing: .12em; }
.p-message__lec-field { font-size: 1.3rem; color: rgba(251, 250, 247, .6); }

/* ==========================================================================
   13. 3つの学び方（タブ）
   ========================================================================== */

.p-program { padding: var(--space-3xl) 0; background: var(--iwa-wash); }

.p-program__tablist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule);
  background: var(--washi);
  margin-bottom: var(--space-xl);
}
.p-program__tab {
  width: 100%;
  padding: 16px 6px;
  display: grid;
  gap: 4px;
  position: relative;
  transition: background-color var(--dur) var(--ease);
}
.p-program__tablist li + li .p-program__tab { border-left: 1px solid var(--rule); }
.p-program__tab::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 3px;
  background: var(--koke);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.p-program__tab.is-active::after { transform: scaleX(1); }
.p-program__tab:hover { background: var(--koke-wash); }
.p-program__tab.is-active { background: var(--washi); }

.p-program__tab-en {
  font-family: var(--latin);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--iwa-mid);
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 狭い画面でも「野外観察会」「出張講座・ガイド」が1行に収まる大きさから始める */
.p-program__tab-ja {
  font-family: var(--mincho);
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--ai-deep);
  white-space: nowrap;
}
.p-program__tab.is-active .p-program__tab-en { color: var(--koke); }

.p-program__panel {
  display: grid;
  gap: var(--space-lg);
  animation: panelIn .7s var(--ease-out);
}
.p-program__panel[hidden] { display: none; }

.p-program__lead {
  font-family: var(--mincho);
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem);
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--ai-deep);
  margin-bottom: var(--space-md);
}
.p-program__body p { font-size: 1.5rem; line-height: 2.15; color: var(--sumi-soft); }
.p-program__body p + p { margin-top: 1.2em; }

.p-program__meta {
  margin: var(--space-lg) 0;
  border-top: 1px solid var(--rule);
}
/* 狭い画面では項目名と内容を上下に積む（横並びのままだと内容側が潰れる） */
.p-program__metarow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
}
.p-program__metarow dt {
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: var(--koke);
  font-weight: 600;
}
.p-program__metarow dd { font-size: 1.45rem; color: var(--sumi); }

/* 内部スライダー */
.p-slider { position: relative; overflow: hidden; background: var(--iwa-pale); }
.p-slider__track { position: relative; aspect-ratio: 4 / 3; }
.p-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-xslow) var(--ease-out);
}
.p-slider__slide.is-active { opacity: 1; transform: scale(1); }
.p-slider__slide img { width: 100%; height: 100%; object-fit: cover; }

.p-slider__arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(251, 250, 247, .88);
  color: var(--ai-deep);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.p-slider:hover .p-slider__arrow { opacity: 1; }
.p-slider__arrow:hover { background: var(--washi); }
.p-slider__arrow--prev { left: 0; }
.p-slider__arrow--prev .c-icon { transform: rotate(180deg); }
.p-slider__arrow--next { right: 0; }

.p-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.p-slider__dots button {
  width: 26px;
  height: 3px;
  background: rgba(251, 250, 247, .5);
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease-out);
}
.p-slider__dots button.is-active { background: var(--koke-bright); width: 40px; }

/* ==========================================================================
   14. 佐渡4エリア（横アコーディオン）
   ========================================================================== */

.p-area { padding: var(--space-3xl) 0 0; background: var(--washi); }
.p-area__head { margin-bottom: var(--space-xl); }
.p-area__lead {
  font-size: 1.5rem;
  line-height: 2.1;
  color: var(--sumi-soft);
  max-width: 640px;
}

.p-area__accordion {
  display: grid;
  grid-auto-flow: row;
  height: auto;
  border-top: 1px solid var(--rule);
}

.p-area__panel { position: relative; overflow: hidden; }

.p-area__link {
  position: relative;
  display: block;
  height: 100%;
  min-height: 190px;
  padding: var(--space-md) var(--gutter);
  color: var(--washi);
  overflow: hidden;
}

.p-area__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out);
}
.p-area__panel.is-open .p-area__bg,
.p-area__link:hover .p-area__bg { transform: scale(1); }

.p-area__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 28, 43, .88) 0%, rgba(7, 28, 43, .42) 55%, rgba(7, 28, 43, .3) 100%);
  transition: background var(--dur-slow) var(--ease);
}
.p-area__panel.is-open .p-area__veil {
  background: linear-gradient(to top, rgba(7, 28, 43, .9) 0%, rgba(7, 28, 43, .5) 60%, rgba(7, 28, 43, .28) 100%);
}

.p-area__label { position: relative; display: block; }
.p-area__en {
  display: block;
  font-family: var(--latin);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke-bright);
  margin-bottom: 6px;
}
.p-area__ja {
  display: block;
  font-family: var(--mincho);
  font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3rem);
  letter-spacing: .12em;
  line-height: 1.3;
}

.p-area__detail {
  position: relative;
  display: block;
  margin-top: var(--space-sm);
  max-width: 420px;
}
.p-area__sub {
  display: block;
  font-size: 1.35rem;
  letter-spacing: .1em;
  color: var(--koke-bright);
  margin-bottom: 8px;
}
.p-area__body {
  display: block;
  font-size: 1.35rem;
  line-height: 1.95;
  color: rgba(251, 250, 247, .82);
}
.p-area__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-sm);
  font-size: 1.25rem;
  letter-spacing: .12em;
  color: var(--washi);
}
.p-area__more .c-icon { width: 18px; height: 18px; color: var(--koke-bright); transition: transform var(--dur) var(--ease-out); }
.p-area__link:hover .p-area__more .c-icon { transform: translateX(5px); }

.p-area__index {
  position: absolute;
  top: var(--space-md);
  right: var(--gutter);
  font-family: var(--latin);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(251, 250, 247, .45);
}

/* ==========================================================================
   15. お知らせ・開催予定
   ========================================================================== */

.p-news { padding: var(--space-3xl) 0; background: var(--iwa-wash); }

.p-news__head { margin-bottom: var(--space-lg); }

.p-news__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.p-news__tab {
  padding: 10px 18px;
  font-size: 1.3rem;
  letter-spacing: .06em;
  white-space: nowrap;
  border: 1px solid var(--rule);
  background: var(--washi);
  color: var(--sumi-soft);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.p-news__tab:hover { border-color: var(--koke); color: var(--koke); }
.p-news__tab.is-active { background: var(--ai); border-color: var(--ai); color: var(--washi); }

.p-news__notice {
  margin-bottom: var(--space-sm);
  padding: 12px 16px;
  font-size: 1.25rem;
  color: var(--koke-deep);
  background: var(--koke-wash);
  border-left: 3px solid var(--koke);
}

.p-news__list { background: var(--washi); border: 1px solid var(--rule); }

.p-news__item {
  border-bottom: 1px solid var(--rule-soft);
  animation: newsRow .55s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * .06s);
}
.p-news__item:last-child { border-bottom: 0; }
.p-news__item.is-hidden { display: none; }

/* 狭い画面では、日付・種別・矢印を1段目に、本文を2段目に置く。
   横一列のままだと本文の列が数pxまで潰れ、1文字ずつ折り返されてしまう。 */
.p-news__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "date  badge arrow"
    "text  text  text";
  align-items: center;
  gap: 12px var(--space-sm);
  padding: 20px var(--space-sm);
  transition: background-color var(--dur-fast) var(--ease);
}
.p-news__row:hover { background: var(--koke-wash); }
.p-news__row > .p-news__date  { grid-area: date; }
.p-news__row > .p-news__badge { grid-area: badge; }
.p-news__row > .p-news__text  { grid-area: text; }
.p-news__row > .p-news__arrow { grid-area: arrow; }

.p-news__date {
  font-family: var(--latin);
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: var(--iwa-mid);
  flex: none;
}
.p-news__badge {
  justify-self: start;
  font-size: 1.15rem;
  letter-spacing: .08em;
  padding: 4px 14px;
  color: var(--washi);
  background: var(--ai-mid);
  white-space: nowrap;
  animation: badgeIn .4s var(--ease-out) backwards;
}
.p-news__badge--yagai     { background: var(--koke); }
.p-news__badge--workshop  { background: var(--tsuchi); }

.p-news__text { min-width: 0; display: grid; gap: 3px; }
.p-news__title {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ai-deep);
  letter-spacing: .04em;
}
.p-news__excerpt { font-size: 1.3rem; color: var(--sumi-faint); }
.p-news__arrow { color: var(--iwa-mid); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.p-news__row:hover .p-news__arrow { transform: translateX(6px); color: var(--koke); }

.p-news__empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--sumi-faint);
  background: var(--washi);
  border: 1px solid var(--rule);
  border-top: 0;
}

.p-news__more {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ==========================================================================
   16. 野外体験メニュー（カードグリッド）
   ========================================================================== */

.p-taiken { padding: var(--space-3xl) 0; background: var(--washi); }
.p-taiken__head { margin-bottom: var(--space-xl); }
.p-taiken__lead { font-size: 1.5rem; line-height: 2.1; color: var(--sumi-soft); }

.p-taiken__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}

.p-taiken__article { height: 100%; }
.p-card { display: block; position: relative; height: 100%; }

.p-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--iwa-pale);
}
.p-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out), filter var(--dur-slow) var(--ease);
}
.p-card:hover .p-card__media img { transform: scale(1.07); filter: saturate(1.08); }

.p-card__no {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 14px;
  font-family: var(--latin);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--washi);
  background: rgba(7, 28, 43, .78);
}

.p-card__body { display: block; padding: var(--space-sm) 0 0; }
.p-card__title {
  display: block;
  font-family: var(--mincho);
  font-size: 2rem;
  letter-spacing: .1em;
  color: var(--ai-deep);
  margin-bottom: 8px;
  transition: color var(--dur-fast) var(--ease);
}
.p-card:hover .p-card__title { color: var(--koke); }
.p-card__text {
  display: block;
  font-size: 1.35rem;
  line-height: 1.9;
  color: var(--sumi-faint);
}
.p-card__rule {
  display: block;
  height: 1px;
  margin-top: var(--space-sm);
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.p-card__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--koke);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.p-card:hover .p-card__rule::after { transform: scaleX(1); }

.p-taiken__note {
  margin-top: var(--space-lg);
  font-size: 1.3rem;
  color: var(--sumi-faint);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule-soft);
}

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.p-faq { padding: var(--space-2xl) 0; background: var(--iwa-wash); }

.p-faq__list { border-top: 1px solid var(--rule); }
.p-faq__item { border-bottom: 1px solid var(--rule); }
.p-faq__qhead { margin: 0; }

.p-faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--space-sm);
  padding: 24px 4px;
  text-align: left;
  transition: color var(--dur-fast) var(--ease);
}
.p-faq__q:hover { color: var(--koke); }

.p-faq__mark {
  font-family: var(--latin);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--koke);
  line-height: 1;
}
.p-faq__mark--a { color: var(--ai-mid); }

.p-faq__qtext {
  font-family: var(--mincho);
  font-size: clamp(1.6rem, 1.4rem + .5vw, 1.9rem);
  letter-spacing: .06em;
  color: var(--ai-deep);
}
.p-faq__q:hover .p-faq__qtext { color: inherit; }

.p-faq__toggle { position: relative; width: 18px; height: 18px; justify-self: end; }
.p-faq__toggle i {
  position: absolute;
  background: var(--koke);
  transition: transform var(--dur) var(--ease-inout), opacity var(--dur-fast) var(--ease);
}
.p-faq__toggle i:nth-child(1) { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; }
.p-faq__toggle i:nth-child(2) { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px; }
.p-faq__q[aria-expanded="true"] .p-faq__toggle i:nth-child(2) { transform: scaleY(0); opacity: 0; }
.p-faq__q[aria-expanded="true"] .p-faq__toggle i:nth-child(1) { transform: rotate(180deg); }

.p-faq__a { overflow: hidden; height: 0; transition: height var(--dur) var(--ease-inout); }
.p-faq__a[hidden] { display: block; }        /* height で制御するため display は保つ */
.p-faq__ainner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: 0 4px 26px;
}
.p-faq__ainner p { font-size: 1.45rem; line-height: 2.1; color: var(--sumi-soft); }

/* ==========================================================================
   18. お問い合わせ
   ========================================================================== */

.p-contact {
  position: relative;
  padding: var(--space-3xl) 0;
  color: var(--washi);
  overflow: hidden;
  isolation: isolate;
}
.p-contact__bg { position: absolute; inset: -12% 0; z-index: -2; }
.p-contact__bg img { width: 100%; height: 100%; object-fit: cover; }
.p-contact__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 写真の気配は残しつつ、白文字が読める濃さに留める */
  background: linear-gradient(to bottom, rgba(7, 28, 43, .78), rgba(7, 28, 43, .9) 55%, rgba(7, 28, 43, .94));
}

.p-contact__inner { text-align: center; max-width: 900px; margin-inline: auto; }
.p-contact__inner .c-sectionhead { text-align: center; }
.p-contact__inner .c-sectionhead__en { padding-left: 0; color: var(--koke-bright); }
.p-contact__inner .c-sectionhead__en::before { display: none; }
.p-contact__inner .c-sectionhead__ja { color: var(--washi); }

.p-contact__lead {
  font-size: 1.5rem;
  line-height: 2.1;
  color: rgba(251, 250, 247, .82);
  margin-bottom: var(--space-xl);
}

.p-contact__actions {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.p-contact__action {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--space-md) var(--space-sm);
  border: 1px solid var(--rule-dark);
  background: rgba(251, 250, 247, .04);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.p-contact__action:hover {
  background: rgba(251, 250, 247, .1);
  border-color: var(--koke-bright);
  transform: translateY(-3px);
}
.p-contact__action .c-icon { width: 28px; height: 28px; color: var(--koke-bright); }
.p-contact__action-label { font-size: 1.7rem; letter-spacing: .08em; }
.p-contact__action-sub { font-size: 1.2rem; color: rgba(251, 250, 247, .55); letter-spacing: .06em; }
.p-contact__action--primary { background: var(--koke); border-color: var(--koke); }
.p-contact__action--primary .c-icon { color: var(--washi); }
.p-contact__action--primary:hover { background: var(--koke-bright); border-color: var(--koke-bright); }

.p-contact__fees {
  display: grid;
  gap: 1px;
  background: var(--rule-darker);
  border: 1px solid var(--rule-darker);
  text-align: left;
  margin-bottom: var(--space-lg);
}
/* 列が狭くなっても項目名が縦に潰れないよう、常に上下へ積む */
.p-contact__fee {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 20px var(--space-sm);
  background: rgba(7, 28, 43, .55);
  text-align: center;
}
.p-contact__fee dt {
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: var(--koke-bright);
  white-space: nowrap;
}
.p-contact__fee dd {
  font-family: var(--mincho);
  font-size: 2rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
.p-contact__fee dd span {
  display: block;
  font-family: var(--gothic);
  font-size: 1.15rem;
  color: var(--ai-pale);
  letter-spacing: .04em;
  margin-top: 2px;
}

.p-contact__more { margin-bottom: var(--space-lg); }

.p-contact__address {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: rgba(251, 250, 247, .65);
}
.p-contact__address .c-icon { color: var(--koke-bright); }

/* ==========================================================================
   19. フッター
   ========================================================================== */

.p-footer { background: var(--ai-deep); color: var(--washi); position: relative; }

.p-footer__top { padding: var(--space-2xl) 0 var(--space-xl); }

.p-footer__brand {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule-darker);
  margin-bottom: var(--space-xl);
}
.p-footer__logo-ja {
  display: block;
  font-family: var(--mincho);
  font-size: 2.8rem;
  letter-spacing: .24em;
  text-indent: .24em;
}
.p-footer__logo-en {
  display: block;
  font-family: var(--latin);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--ai-pale);
  margin-top: 8px;
}

.p-footer__sns { display: flex; gap: 10px; }
.p-footer__sns a {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-darker);
  border-radius: 50%;
  color: rgba(251, 250, 247, .75);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.p-footer__sns a:hover { background: var(--koke); border-color: var(--koke); color: var(--washi); transform: translateY(-3px); }

.p-footer__cols {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.p-footer__coltitle {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--koke-bright);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule-darker);
}
.p-footer__list { display: grid; gap: 2px; }
.p-footer__list a {
  display: block;
  padding: 7px 0;
  font-size: 1.35rem;
  color: rgba(251, 250, 247, .72);
  position: relative;
  padding-left: 14px;
}
.p-footer__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--ai-pale);
  transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease);
}
.p-footer__list a:hover { color: var(--washi); }
.p-footer__list a:hover::before { width: 10px; background: var(--koke-bright); }

.p-footer__info {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule-darker);
}
.p-footer__corp {
  font-family: var(--mincho);
  font-size: 1.7rem;
  letter-spacing: .08em;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
/* 狭い画面では併記を次の行へ落とす（「郎」だけが残るような折り返しを防ぐ） */
.p-footer__corp-sub {
  display: block;
  font-size: 1.3rem;
  color: var(--ai-pale);
  letter-spacing: .06em;
}
.p-footer__contacts { display: grid; gap: 10px; }
.p-footer__contacts li { display: flex; align-items: center; gap: 11px; font-size: 1.35rem; color: rgba(251, 250, 247, .78); }
.p-footer__contacts .c-icon { color: var(--koke-bright); flex: none; }
.p-footer__contacts a:hover { color: var(--koke-bright); }

/* フッター大判バナー */
/* 帯の高さを固定すると、写真の縦が切り落とされて中途半端に見える。
   素材が4:3中心なので、器も比率で持たせて切り抜きを最小にする。 */
.p-footer__banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-fbanner {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 1 / 1;          /* 狭い画面は2列の正方形 */
  padding: var(--space-sm);
  overflow: hidden;
  isolation: isolate;
}
.p-fbanner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out);
}
.p-fbanner:hover .p-fbanner__bg { transform: scale(1.12); }
/* 覆いは文字の足元だけを濃くする。全体を均一に暗くすると、
   写真の下半分（人物が写っていることが多い）が潰れて「切れている」ように見える。 */
.p-fbanner__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(7, 28, 43, .86) 0%,
    rgba(7, 28, 43, .60) 24%,
    rgba(7, 28, 43, .20) 55%,
    rgba(7, 28, 43, .08) 100%);
  transition: background var(--dur-slow) var(--ease);
}
.p-fbanner:hover .p-fbanner__veil {
  background: linear-gradient(to top,
    rgba(60, 82, 48, .84) 0%,
    rgba(60, 82, 48, .56) 24%,
    rgba(7, 28, 43, .18) 55%,
    rgba(7, 28, 43, .06) 100%);
}
.p-fbanner__text { display: grid; gap: 4px; }
.p-fbanner__text { text-shadow: 0 1px 12px rgba(7, 28, 43, .55); }
.p-fbanner__en {
  font-family: var(--latin);
  font-size: clamp(2rem, 1.4rem + 1.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .12em;
}
.p-fbanner__ja { font-size: 1.25rem; letter-spacing: .12em; color: rgba(251, 250, 247, .75); }
.p-fbanner__arrow {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  color: var(--koke-bright);
  transition: transform var(--dur) var(--ease-out);
}
.p-fbanner:hover .p-fbanner__arrow { transform: translateX(6px); }

.p-footer__bottom { padding: var(--space-md) 0; border-top: 1px solid var(--rule-darker); }
.p-footer__bottom .l-container {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
.p-footer__copy, .p-footer__credit { font-size: 1.2rem; letter-spacing: .08em; color: rgba(251, 250, 247, .5); }

/* トップへ戻る */
.p-totop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--z-totop);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--ai);
  color: var(--washi);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease);
}
.p-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.p-totop:hover { background: var(--koke); }

/* ==========================================================================
   20. 下層ページ（最小限。トップ以外も破綻させないため）
   ========================================================================== */

.l-page { padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-2xl); }
.l-page__head { margin-bottom: var(--space-xl); }
.l-page__title {
  font-family: var(--mincho);
  font-size: clamp(2.6rem, 1.8rem + 2vw, 4rem);
  letter-spacing: .08em;
  color: var(--ai-deep);
}
.l-entry p { margin-bottom: 1.4em; }
.l-entry h2 {
  font-family: var(--mincho);
  font-size: 2.4rem;
  letter-spacing: .06em;
  margin: 2em 0 .8em;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--rule);
}
.l-entry h3 { font-size: 1.9rem; margin: 1.8em 0 .6em; color: var(--ai); }
.l-entry img { margin: 1.6em 0; }
/* 本文に入れる写真。縦長でも高さを抑えて、文章の流れを妨げないようにする */
.l-entry figure { margin: 1.8em 0; text-align: center; }
.l-entry figure img { margin: 0 auto; max-width: 100%; max-height: 620px; width: auto; }
.l-entry figcaption {
  margin-top: 10px;
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--sumi-faint);
}
.l-entry a { color: var(--koke); text-decoration: underline; text-underline-offset: 3px; }

.c-archive { display: grid; gap: var(--space-lg); }
.c-archive__item { border-bottom: 1px solid var(--rule); padding-bottom: var(--space-md); }
.c-archive__title { font-family: var(--mincho); font-size: 2rem; letter-spacing: .06em; }
.c-archive__meta { font-size: 1.25rem; color: var(--sumi-faint); margin-bottom: 6px; }

.c-pager { display: flex; gap: 8px; justify-content: center; margin-top: var(--space-xl); flex-wrap: wrap; }
.c-pager .page-numbers {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--rule);
  font-size: 1.35rem;
}
.c-pager .page-numbers.current { background: var(--ai); color: var(--washi); border-color: var(--ai); }

.c-notfound { text-align: center; padding: var(--space-2xl) 0; }

/* ==========================================================================
   20-B. 下層ページ
   トップと同じ部品（カード・タブ・FAQ）は使い回し、ここでは下層固有のものだけ定義する。
   ========================================================================== */

/* 20-B-1. セクションの器 */
.l-section { padding: var(--space-2xl) 0; }
.l-section--tint { background: var(--iwa-wash); }
.l-section + .l-section { padding-top: 0; }
.l-section--tint + .l-section,
.l-section + .l-section--tint { padding-top: var(--space-2xl); }

/* 20-B-2. 見出し帯 */
.p-pagehead {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 320px;
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
  color: var(--washi);
  overflow: hidden;
  isolation: isolate;
  background: var(--ai-deep);
}
.p-pagehead__bg { position: absolute; inset: -10% 0; z-index: -2; }
.p-pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.p-pagehead__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(7, 28, 43, .72) 0%, rgba(7, 28, 43, .5) 45%, rgba(7, 28, 43, .86) 100%);
}
.p-pagehead__inner { max-width: 880px; }
.p-pagehead__en {
  display: block;
  font-family: var(--latin);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke-bright);
  margin-bottom: var(--space-sm);
  animation: fadeUp .8s var(--ease-out) .1s backwards;
}
.p-pagehead__ja {
  font-family: var(--mincho);
  font-size: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .07em;
  animation: fadeUp .9s var(--ease-out) .2s backwards;
}
.p-pagehead__lead {
  margin-top: var(--space-sm);
  font-size: 1.4rem;
  line-height: 1.95;
  color: rgba(251, 250, 247, .82);
  animation: fadeUp .9s var(--ease-out) .32s backwards;
}

/* 20-B-3. パンくず */
.c-breadcrumb { padding: 16px 0 0; }
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 1.2rem;
  color: var(--sumi-faint);
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "/";
  margin-right: 6px;
  color: var(--iwa);
}
.c-breadcrumb__item a:hover { color: var(--koke); }
.c-breadcrumb__item [aria-current] { color: var(--ai-deep); }

/* 20-B-4. 詳細ページの2カラム */
.l-detail { display: grid; gap: var(--space-xl); align-items: start; }
.l-detail__figure { margin: 0 0 var(--space-lg); }
.l-detail__figure img { width: 100%; }

.c-sidebox {
  background: var(--washi);
  border: 1px solid var(--rule);
  padding: var(--space-md);
}
.c-sidebox + .c-sidebox { margin-top: var(--space-sm); }
.c-sidebox__title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--koke);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.c-sidebox__links { display: grid; gap: 2px; }
.c-sidebox__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 1.35rem;
  border-bottom: 1px solid var(--rule-soft);
}
.c-sidebox__links a:last-child { border-bottom: 0; }
.c-sidebox__links .c-icon { color: var(--koke); flex: none; }
.c-sidebox__links a:hover { color: var(--koke); }
.c-sidebox__notes { display: grid; gap: 8px; }
.c-sidebox__notes li {
  position: relative;
  padding-left: 15px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--sumi-soft);
}
.c-sidebox__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 7px;
  height: 1px;
  background: var(--koke);
}

/* 20-B-5. 仕様表 */
.c-spec { border-top: 1px solid var(--rule); }
.c-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rule);
}
.c-spec__row dt {
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--koke);
  font-weight: 600;
}
.c-spec__row dd { font-size: 1.45rem; color: var(--sumi); }
.c-spec__row dd a { color: var(--ai-mid); text-decoration: underline; text-underline-offset: 3px; }

/* 20-B-6. 注記・CTA・もっと見る */
.c-note {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--koke-wash);
  border-left: 3px solid var(--koke);
}
.c-note p { font-size: 1.3rem; line-height: 1.95; color: var(--koke-deep); }
.c-note p + p { margin-top: 6px; }
.c-note--plain { background: transparent; border-left: 0; padding: 0; margin-top: var(--space-md); }
.c-note--plain p { color: var(--sumi-faint); }

.c-cta {
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  background: var(--ai-deep);
  color: var(--washi);
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}
.c-cta__text { font-family: var(--mincho); font-size: 1.8rem; letter-spacing: .06em; }
.c-cta .c-btn { background: var(--koke); border-color: var(--koke); }
.c-cta .c-btn::before { background: var(--washi); }
.c-cta .c-btn:hover { color: var(--ai-deep); border-color: var(--washi); }

.c-more { margin-top: var(--space-lg); text-align: center; }
.c-searchbox { margin-bottom: var(--space-lg); }
.c-searchbox .c-searchform { border-bottom-color: var(--rule); }
.c-searchbox .c-searchform__input { color: var(--sumi); font-size: 1.8rem; }
.c-searchbox .c-searchform__input::placeholder { color: var(--iwa-mid); }
.c-searchbox .c-searchform__submit { color: var(--koke); }

/* 20-B-7. 前後リンク */
.c-adjacent {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--space-sm);
}
.c-adjacent__link { display: grid; gap: 5px; padding: 14px 0; }
.c-adjacent__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--latin);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--koke);
}
.c-adjacent__link--prev .c-adjacent__label .c-icon { transform: rotate(180deg); }
.c-adjacent__side--next { text-align: right; }
.c-adjacent__side--next .c-adjacent__label { justify-content: flex-end; }
.c-adjacent__title {
  font-family: var(--mincho);
  font-size: 1.6rem;
  letter-spacing: .04em;
  color: var(--ai-deep);
}
.c-adjacent__link:hover .c-adjacent__title { color: var(--koke); }

/* 20-B-8. タグ・検索結果 */
.c-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-lg); }
.c-tags a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 1.25rem;
  background: var(--iwa-wash);
  border: 1px solid var(--rule);
  color: var(--sumi-soft);
}
.c-tags a:hover { border-color: var(--koke); color: var(--koke); }

.c-results { border-top: 1px solid var(--rule); }
.c-results__item { border-bottom: 1px solid var(--rule); }
.c-results__item a { display: grid; gap: 5px; padding: var(--space-md) 2px; }
.c-results__item a:hover { background: var(--koke-wash); }
.c-results__type {
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--koke);
}
.c-results__title { font-family: var(--mincho); font-size: 1.9rem; letter-spacing: .05em; color: var(--ai-deep); }
.c-results__excerpt { font-size: 1.3rem; color: var(--sumi-faint); }

/* 20-B-9. 開催予定カード */
.p-zemilist { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.p-zemilist__item.is-hidden { display: none; }

.p-zemicard { height: 100%; background: var(--washi); border: 1px solid var(--rule); }
.p-zemicard__link { display: grid; height: 100%; }
.p-zemicard__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--iwa-pale); }
.p-zemicard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.p-zemicard__link:hover .p-zemicard__media img { transform: scale(1.06); }
.p-zemicard__badge {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 16px;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--washi);
  background: var(--ai-mid);
  white-space: nowrap;
}
/* 種別ごとの色。単独クラスだと .p-zemicard__badge に上書きされるため複合で指定する */
.p-zemicard__badge.p-news__badge--yagai    { background: var(--koke); }
.p-zemicard__badge.p-news__badge--workshop  { background: var(--tsuchi); }

.p-zemicard__body { display: grid; gap: 8px; padding: var(--space-md); align-content: start; }
.p-zemicard__date {
  font-family: var(--latin);
  font-size: 1.35rem;
  letter-spacing: .1em;
  color: var(--koke);
}
.p-zemicard__title {
  font-family: var(--mincho);
  font-size: 2rem;
  letter-spacing: .06em;
  line-height: 1.5;
  color: var(--ai-deep);
}
.p-zemicard__link:hover .p-zemicard__title { color: var(--koke); }
.p-zemicard__excerpt { font-size: 1.35rem; line-height: 1.9; color: var(--sumi-faint); }
.p-zemicard__meta { display: grid; gap: 6px; margin-top: 4px; }
.p-zemicard__meta span { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; color: var(--sumi-soft); }
.p-zemicard__meta .c-icon { color: var(--iwa-mid); flex: none; }
.p-zemicard__fee {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 1.3rem;
  color: var(--ai);
  font-weight: 600;
}

/* 20-B-10. お知らせカード */
.p-postlist { display: grid; gap: var(--space-lg) var(--space-md); }
.p-postcard__link { display: grid; gap: var(--space-sm); height: 100%; }
.p-postcard__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--iwa-pale); }
.p-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.p-postcard__link:hover .p-postcard__media img { transform: scale(1.06); }
.p-postcard__body { display: grid; gap: 7px; }
.p-postcard__meta { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; color: var(--iwa-mid); }
.p-postcard__cat { color: var(--koke); letter-spacing: .08em; }
.p-postcard__title { font-family: var(--mincho); font-size: 1.9rem; letter-spacing: .05em; line-height: 1.55; color: var(--ai-deep); }
.p-postcard__link:hover .p-postcard__title { color: var(--koke); }
.p-postcard__excerpt { font-size: 1.3rem; line-height: 1.9; color: var(--sumi-faint); }

/* 20-B-11. 佐渡自然塾とは */
.p-about__intro { display: grid; gap: var(--space-lg); align-items: start; }
.p-about__body p { font-size: 1.55rem; line-height: 2.15; color: var(--sumi-soft); }
.p-about__body p + p { margin-top: 1.3em; }
.p-about__figure { margin: 0; }
.p-about__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.p-about__acts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.p-about__act a {
  position: relative;
  display: grid;
  gap: 7px;
  padding: var(--space-md);
  background: var(--washi);
  height: 100%;
  align-content: start;
  transition: background-color var(--dur) var(--ease);
}
.p-about__act a:hover { background: var(--koke-wash); }
.p-about__act-no {
  font-family: var(--latin);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--iwa-mid);
}
.p-about__act-en {
  font-family: var(--latin);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke);
}
.p-about__act-ja { font-family: var(--mincho); font-size: 2.2rem; letter-spacing: .08em; color: var(--ai-deep); }
.p-about__act-desc { font-size: 1.3rem; line-height: 1.9; color: var(--sumi-faint); }
.p-about__act-more { color: var(--koke); transition: transform var(--dur) var(--ease-out); }
.p-about__act a:hover .p-about__act-more { transform: translateX(6px); }

.p-about__lecs { display: grid; gap: var(--space-lg); }
.p-about__lec { display: grid; gap: var(--space-md); align-items: start; }
.p-about__lec-figure { margin: 0; }
/* 人物写真は縦長で撮られていることが多い。4:3の器に入れると顔が切れる */
.p-about__lec-figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; }
.p-about__lec-role { font-size: 1.25rem; letter-spacing: .1em; color: var(--koke); margin-bottom: 4px; }
.p-about__lec-name { font-family: var(--mincho); font-size: 2.6rem; letter-spacing: .14em; color: var(--ai-deep); }
.p-about__lec-field { font-size: 1.3rem; color: var(--sumi-faint); margin: 6px 0 var(--space-sm); }
.p-about__lec-text { font-size: 1.4rem; line-height: 2; color: var(--sumi-soft); }

/* 20-B-12. 出張講座の利用シーン */
.p-case__list { display: grid; gap: var(--space-lg); }
.p-case { display: grid; gap: var(--space-md); align-items: center; background: var(--washi); border: 1px solid var(--rule); }
.p-case__figure { margin: 0; overflow: hidden; }
.p-case__figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.p-case__body { padding: 0 var(--space-md) var(--space-md); display: grid; gap: 10px; align-content: start; }
.p-case__tag {
  justify-self: start;
  padding: 4px 14px;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--washi);
  background: var(--ai-mid);
}
.p-case__tag--guide { background: var(--koke); }
.p-case__title { font-family: var(--mincho); font-size: 2.2rem; letter-spacing: .07em; line-height: 1.5; color: var(--ai-deep); }
.p-case__text { font-size: 1.4rem; line-height: 2; color: var(--sumi-soft); }

/* 20-B-13. 料金プラン */
.p-plan { display: grid; gap: var(--space-md); }
.p-plan__card { padding: var(--space-lg) var(--space-md); background: var(--washi); border: 1px solid var(--rule); }
.p-plan__card--accent { border-color: var(--koke); box-shadow: var(--shadow-sm); }
.p-plan__en {
  font-family: var(--latin);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--koke);
  margin-bottom: 8px;
}
.p-plan__title { font-family: var(--mincho); font-size: 2.2rem; letter-spacing: .08em; color: var(--ai-deep); }
.p-plan__price {
  font-family: var(--mincho);
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ai);
  margin: var(--space-sm) 0 var(--space-md);
}
.p-plan__price small { font-family: var(--gothic); font-size: 1.5rem; margin-left: 4px; }
.p-plan__note {
  margin: calc(var(--space-md) * -1 + 4px) 0 var(--space-md);
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--tsuchi);
}
.p-plan__note strong {
  display: inline-block;
  margin-left: 2px;
  padding: 2px 10px;
  font-size: 1.2rem;
  color: var(--washi);
  background: var(--tsuchi);
}

/* 20-B-14. お問い合わせの導線 */
.p-contactway { display: grid; gap: var(--space-sm); }
.p-contactway__item {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: var(--space-lg) var(--space-md);
  background: var(--washi);
  border: 1px solid var(--rule);
  text-align: center;
  height: 100%;
  align-content: start;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.p-contactway__item:hover { border-color: var(--koke); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.p-contactway__item .c-icon { width: 30px; height: 30px; color: var(--koke); }
.p-contactway__label { font-family: var(--mincho); font-size: 1.9rem; letter-spacing: .06em; color: var(--ai-deep); }
.p-contactway__sub { font-size: 1.25rem; color: var(--sumi-faint); }
.p-contactway__note { font-size: 1.2rem; color: var(--iwa-mid); margin-top: 4px; }
.p-contactway__item--primary { background: var(--koke); border-color: var(--koke); }
.p-contactway__item--primary .c-icon,
.p-contactway__item--primary .p-contactway__label { color: var(--washi); }
.p-contactway__item--primary .p-contactway__sub { color: rgba(251, 250, 247, .82); }
.p-contactway__item--primary .p-contactway__note { color: rgba(251, 250, 247, .6); }
.p-contactway__item--primary:hover { border-color: var(--koke-bright); background: var(--koke-bright); }

/* 20-B-15. 料金表 */
.p-feetable { border-top: 1px solid var(--rule); background: var(--washi); }
.p-feetable__row {
  display: grid;
  gap: 5px;
  padding: var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.p-feetable__row dt { font-size: 1.35rem; letter-spacing: .08em; color: var(--koke); font-weight: 600; }
.p-feetable__row dd { display: grid; gap: 3px; }
.p-feetable__row dd strong { font-family: var(--mincho); font-size: 2.2rem; font-weight: 500; letter-spacing: .04em; color: var(--ai); }
.p-feetable__row dd span { font-size: 1.25rem; color: var(--sumi-faint); }

/* 20-B-15b. 年間プログラム */
.p-annual__head { margin-bottom: var(--space-lg); }
.p-annual__lead { font-size: 1.45rem; line-height: 2.05; color: var(--sumi-soft); }
.p-annual__lead strong { color: var(--ai-deep); font-weight: 600; }

.p-annual { border-top: 1px solid var(--rule); background: var(--washi); }
.p-annual__row {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border-bottom: 1px solid var(--rule);
}
/* 状態は1回ごとに付く（同じ月に終了と予定が混在してよい） */
.p-annual__item--done { opacity: .72; }
.p-annual__item--done .p-annual__title,
.p-annual__item--done .p-annual__date { color: var(--sumi-faint); }
.p-annual__item--cancelled .p-annual__title { text-decoration: line-through; color: var(--sumi-faint); }

/* 月 */
.p-annual__month {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ai);
}
.p-annual__month-num { font-family: var(--mincho); font-size: 2.8rem; line-height: 1; letter-spacing: .02em; }
.p-annual__month-unit { font-size: 1.3rem; }
.p-annual__no { margin-left: 8px; font-size: 1.3rem; color: var(--iwa-mid); }

/* 各欄 */
.p-annual__cell { display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.p-annual__item { display: grid; gap: 6px; align-content: start; min-width: 0; }
/* 同じ欄に2件以上あるときだけ、境目の細い罫を出す */
.p-annual__item + .p-annual__item { padding-top: var(--space-sm); border-top: 1px dashed var(--rule); }
.p-annual__none { font-size: 1.4rem; color: var(--sumi-faint); }
.p-annual__kind {
  justify-self: start;
  padding: 3px 12px;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--washi);
  white-space: nowrap;
}
.p-annual__kind--zemi  { background: var(--ai-mid); }
.p-annual__kind--yagai { background: var(--koke); }
.p-annual__kind--workshop { background: var(--tsuchi); }

.p-annual__date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--latin);
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--koke);
}
.p-annual__state {
  padding: 2px 10px;
  font-family: var(--gothic);
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--sumi-soft);
  border: 1px solid var(--rule);
  background: var(--washi);
}
.p-annual__state--cancel { color: var(--washi); background: var(--tsuchi); border-color: var(--tsuchi); }

.p-annual__title {
  font-family: var(--mincho);
  font-size: 1.7rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ai-deep);
}
.p-annual__place { font-family: var(--gothic); font-size: 1.3rem; color: var(--sumi-faint); }
.p-annual__who { display: grid; gap: 2px; }
.p-annual__name { font-size: 1.35rem; color: var(--sumi); }
.p-annual__affil { font-size: 1.2rem; line-height: 1.7; color: var(--sumi-faint); }

@media (min-width: 720px) {
  .p-annual__row {
    grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-md);
  }
  .p-annual__month { display: grid; gap: 2px; justify-items: start; }
  .p-annual__no { margin-left: 0; }
  .p-annual__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: end;
  }
  .p-annual__head .c-sectionhead { margin-bottom: 0; }
}

@media (min-width: 1080px) {
  .p-annual__row { grid-template-columns: 120px minmax(0, 1.05fr) minmax(0, 1.05fr); }
  .p-annual__title { font-size: 1.8rem; }
}

/* 20-B-16. 回遊導線 */
.p-cross { padding: var(--space-2xl) 0; background: var(--iwa-wash); }
.p-cross__grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-cross__card {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 1 / 1;
  padding: var(--space-sm);
  overflow: hidden;
  isolation: isolate;
  color: var(--washi);
}
.p-cross__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out);
}
.p-cross__card:hover .p-cross__bg { transform: scale(1.12); }
.p-cross__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(7, 28, 43, .88) 0%,
    rgba(7, 28, 43, .62) 26%,
    rgba(7, 28, 43, .20) 58%,
    rgba(7, 28, 43, .08) 100%);
  transition: background var(--dur-slow) var(--ease);
}
.p-cross__card:hover .p-cross__veil {
  background: linear-gradient(to top,
    rgba(60, 82, 48, .86) 0%,
    rgba(60, 82, 48, .58) 26%,
    rgba(7, 28, 43, .18) 58%,
    rgba(7, 28, 43, .06) 100%);
}
.p-cross__text { display: grid; gap: 4px; text-shadow: 0 1px 12px rgba(7, 28, 43, .55); }
.p-cross__en { font-family: var(--latin); font-size: 1.9rem; font-weight: 700; letter-spacing: .12em; }
.p-cross__ja { font-size: 1.35rem; letter-spacing: .1em; color: rgba(251, 250, 247, .88); }
.p-cross__desc { font-size: 1.2rem; color: rgba(251, 250, 247, .62); }
.p-cross__arrow {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  color: var(--koke-bright);
  transition: transform var(--dur) var(--ease-out);
}
.p-cross__card:hover .p-cross__arrow { transform: translateX(6px); }

/* 20-B-17. 下層のレスポンシブ */
@media (min-width: 560px) {
  /* 項目名は内容の高さに引きずられないよう上揃えにする */
  .c-spec__row { grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
  .p-feetable__row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
  .p-postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 器が広くなったら写真そのままの4:3へ */
  .p-fbanner,
  .p-cross__card { aspect-ratio: 4 / 3; padding: var(--space-md); }
  .p-fbanner__arrow,
  .p-cross__arrow { right: var(--space-md); bottom: var(--space-md); }
}

@media (min-width: 720px) {
  .p-zemilist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-about__acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-contactway { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-adjacent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .p-case { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-lg); }
  .p-case__body { padding: var(--space-md) var(--space-md) var(--space-md) 0; }
  .p-case:nth-child(even) .p-case__figure { order: 2; }
  .p-case:nth-child(even) .p-case__body { padding: var(--space-md) 0 var(--space-md) var(--space-md); }
  .p-about__lec { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-lg); }
  .c-cta { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; align-items: center; padding: var(--space-lg); }
}

@media (min-width: 960px) {
  .p-pagehead { min-height: 400px; }
  .l-detail { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-xl); }
  .p-about__intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-2xl); }
  .p-cross__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-postlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .p-pagehead { min-height: 460px; }
  .p-about__acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-zemilist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   21. キーフレーム
   ========================================================================== */

@keyframes loaderRing {
  0%   { stroke-dashoffset: 290; transform: rotate(0deg); }
  55%  { stroke-dashoffset: 60; }
  100% { stroke-dashoffset: 290; transform: rotate(360deg); }
}
@keyframes loaderWave {
  0%   { stroke-dashoffset: 130; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -130; }
}
@keyframes loaderChar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loaderDot {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50%      { transform: translateY(-7px); opacity: 1; }
}
@keyframes loaderCurtain {
  from { transform: scaleY(0); transform-origin: bottom center; }
  to   { transform: scaleY(1); transform-origin: bottom center; }
}
@keyframes heroLine {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scrollDrop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes newsRow {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tickerUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tickerOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100%); }
}
@keyframes ruleGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes softPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes megaFigure {
  from { opacity: 0; transform: scale(1.07); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zoomOutSoft {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes strataDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes badgeIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@keyframes toTopIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes searchIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes underlineIn {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}
@keyframes veilFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==========================================================================
   22. レスポンシブ（幅ごとに列数と文字サイズを個別に決める）
   ========================================================================== */

@media (min-width: 400px) {
  .p-taiken__grid { gap: var(--space-lg); }
}

@media (min-width: 480px) {
  :root { --gutter: 28px; }
  .p-contact__actions { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 560px) {
  .p-taiken__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-footer__corp { font-size: 1.8rem; letter-spacing: .1em; }
  .p-footer__corp-sub { display: inline; font-size: 1.35rem; }
  .p-message__lecturers li {
    grid-template-columns: 108px 190px minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 14px 0;
  }
  .p-message__lec-role { justify-self: stretch; padding: 3px 0; }
  .p-program__tab { padding: 20px 10px; }
  .p-program__tab-ja { font-size: 1.8rem; letter-spacing: .06em; }
  .p-program__tab-en { font-size: 1rem; letter-spacing: .16em; }
  .p-program__metarow {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-sm);
  }
  .p-intro__fact-num { font-size: 3.4rem; min-width: 132px; }
  .p-intro__fact { gap: var(--space-md); }
}

@media (min-width: 640px) {
  :root { --header-h: 76px; }
  .p-hero__controls { right: 8px; bottom: 110px; }
  .p-contact__fees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-intro__facts { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .p-area__link { min-height: 230px; padding: var(--space-lg) var(--space-md); }
}

@media (min-width: 720px) {
  .p-program__panel { grid-template-columns: minmax(0, 1fr); }
  /* 横幅が足りる段階で、はじめて横一列へ戻す */
  .p-news__row {
    grid-template-columns: 104px 108px minmax(0, 1fr) 24px;
    grid-template-areas: "date badge text arrow";
    gap: var(--space-sm) var(--space-md);
    padding: 22px var(--space-md);
  }
  .p-footer__bottom .l-container {
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    text-align: left;
  }
  /* 右下に固定されている「トップへ戻る」に隠れないよう逃がす */
  .p-footer__credit { text-align: right; padding-right: 58px; }
}

@media (min-width: 768px) {
  /* 画面が広くなるほど余白を伸ばす（狭い画面で間延びさせない） */
  :root {
    --gutter:    32px;
    --space-lg:  44px;
    --space-xl:  68px;
    --space-2xl: 100px;
    --space-3xl: 128px;
  }
  body { font-size: 1.6rem; }
  /* 幅が足りたら見出しラベル・種別・「一覧」を戻す */
  .p-ticker__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-md);
    height: 78px;
  }
  .p-ticker__viewport { height: 78px; }
  .p-ticker__head { display: flex; }
  .p-ticker__cat { display: inline-block; }
  .p-ticker__more { display: inline-block; }
  .p-ticker__item a { gap: var(--space-sm); }
  .p-contact__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-footer__brand {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .p-taiken__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: end;
  }
  .p-taiken__head .c-sectionhead { margin-bottom: 0; }
  .p-program__tab { padding: 22px 12px; }
  .p-program__tab-ja { font-size: 2rem; letter-spacing: .1em; }
  .p-program__metarow { grid-template-columns: 180px minmax(0, 1fr); }
  /* 見出しの器は .l-container 側にだけグリッドを掛ける。
     .p-area__head に掛けると .l-container 自体が半分幅の grid item になってしまう。 */
  .p-area__head .c-sectionhead { margin-bottom: 0; }
  .p-area__head .l-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: end;
  }
}

@media (min-width: 860px) {
  .p-intro__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-2xl); }
  .p-program__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
  .p-taiken__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  .p-news__head .c-sectionhead { margin-bottom: 0; }
}

@media (min-width: 960px) {
  :root { --header-h: 88px; }
  .p-gnav { display: block; }
  .p-drawer__toggle { display: none; }
  .p-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-footer__banners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-intro__facts { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  /* 横アコーディオン：ここから横一列になる */
  .p-area__accordion {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: 560px;
    border-top: 0;
  }
  .p-area__panel {
    transition: flex var(--dur-slow) var(--ease-inout);
  }
  .p-area__accordion { display: flex; }
  .p-area__panel { flex: 1 1 0; min-width: 0; }
  .p-area__panel.is-open { flex: 2.4 1 0; }
  .p-area__link {
    height: 100%;
    min-height: 0;
    display: grid;
    align-content: end;
    padding: var(--space-lg) var(--space-md);
  }
  .p-area__ja { writing-mode: horizontal-tb; }
  .p-area__detail {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(12px);
    transition:
      opacity var(--dur-slow) var(--ease) .1s,
      transform var(--dur-slow) var(--ease-out) .1s,
      max-height var(--dur-slow) var(--ease-inout);
  }
  .p-area__panel.is-open .p-area__detail {
    opacity: 1;
    max-height: 300px;
    transform: translateY(0);
  }
}

@media (min-width: 1080px) {
  .p-header__inner { gap: var(--space-xl); }
  .p-program__tab-ja { font-size: 2.2rem; }
  .p-message__inner { max-width: 820px; }
  .p-contact__fees { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  :root {
    --gutter:    40px;
    --space-lg:  48px;
    --space-xl:  80px;
    --space-2xl: 120px;
    --space-3xl: 168px;
  }
  .p-taiken__grid { gap: var(--space-lg) var(--space-md); }
  .p-hero__body { padding-top: 0; }
  .p-intro { padding-top: var(--space-3xl); }
}

@media (min-width: 1400px) {
  .p-taiken__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-area__accordion { height: 620px; }

}

@media (min-width: 1600px) {
  :root { --measure: 1280px; }
}

/* WordPress管理バーの高さを考慮する */
.admin-bar .p-header { top: 32px; }
.admin-bar .p-drawer,
.admin-bar .p-search { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .p-header { top: 46px; }
  .admin-bar .p-drawer,
  .admin-bar .p-search { top: 46px; }
}

/* 印刷 */
@media print {
  .p-header, .p-drawer, .p-search, .p-totop, .p-loader, .p-hero__controls, .p-footer__banners { display: none !important; }
  body { background: #fff; color: #000; }
  [data-inview] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   23. 動きを減らす設定を尊重する
   動きを増やすほど重要になる
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-inview] { opacity: 1; transform: none; }
  .p-hero__line > span { transform: none; }
  .p-hero__slide.is-active .p-hero__media img { animation: none; transform: scale(1); }
  .p-hero__sub, .p-hero__cta { opacity: 1; }
  .p-loader { display: none; }
  .p-drawer__link { opacity: 1; transform: none; }
  .p-hero__scroll-line i { animation: none; }
}