/* =================================================================
   True Japan Initiative — 共通スタイルシート
   確定デザイントークン（02_design_spec）に準拠
   白い和紙 × 墨 × 朱印 × 金線 / 静謐・余白・引き算
   ================================================================= */

/* ---------- 1. トークン ---------- */
:root {
  /* 色（02 確定値） */
  --crimson: #8E2A1F;      /* 朱漆：アクセント・CTA・朱印 */
  --crimson-deep: #6F1F16; /* ホバー沈み色 */
  --gold: #C9A35E;         /* 金：装飾線・タグ枠・ディバイダ */
  --gold-deep: #8E6F32;    /* 深金 */
  --gold-soft: #E0BE7A;    /* 淡金 */
  --gold-mute: #E7D8B4;    /* 薄金（HEX未確定→暫定値） */
  --ink: #1A1612;          /* 墨黒：本文・見出し */
  --ink-soft: #5A5048;     /* 墨淡：キャプション・補助 */
  --ink-mute: #8A8175;     /* メタ・罫 */
  --washi: #F0EAD8;        /* 和紙：ベース背景 */
  --washi-deep: #E7DFC8;   /* 和紙やや濃：区切り面 */
  --washi-card: #F6F1E3;   /* カード地 */
  --navy: #1E2A4A;         /* 夜空紺：フッター・引用・夜 */
  --navy-soft: #2C3A5E;

  /* フォント */
  --serif-jp: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  --serif-body: "Noto Serif JP", "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
  --sans-jp: "Noto Sans JP", "Yu Gothic", "游ゴシック", "Hiragino Sans", sans-serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  /* タイポスケール */
  --t-h1: clamp(2.6rem, 5.4vw, 5rem);
  --t-h2: clamp(1.9rem, 3.4vw, 3rem);
  --t-h3: clamp(1.35rem, 1.8vw, 1.75rem);
  --t-body: clamp(1.0625rem, 1.05vw, 1.2rem);   /* 17-19px */
  --t-lead: clamp(1.2rem, 1.4vw, 1.5rem);
  --t-cap: clamp(0.8rem, 0.85vw, 0.9rem);
  --t-numeral: clamp(8rem, 17vw, 18rem);        /* 巨大番号 */

  /* 余白 */
  --gutter: 5vw;
  --maxw: 1280px;
  --maxw-wide: 1440px;
  --maxw-read: 760px;
  --sec-pad: clamp(3.25rem, 5.5vh, 5.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--washi);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: var(--t-body);
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 日本語の中途半端な改行を防ぐ：基本は keep-all（読点・句点で折る）。
     句読点のない長文だけ緊急折返し。短いトークンは white-space:nowrap で保護済み */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif-jp); font-weight: 600; margin: 0; line-height: 1.32; letter-spacing: 0.04em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

/* 文節単位の改行（対応ブラウザのみ強化）。日本語が自然な文節で折れ、
   「中途半端な改行」を解消。非対応では keep-all にフォールバック */
@supports (word-break: auto-phrase) {
  p, .lead, .catch, .fb-quote, .hero h1, .sec-head h2, .page-hero h1,
  .plan-use, .cap, .goal p, .essence p, .news-title, .dash-desc, .qb-quote,
  .bigquote p, blockquote, .field label, td, .cta-sub {
    word-break: auto-phrase;
  }
}
.lead, .fb-body p, .prose p, .plan-use { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- 3. レイアウト補助 ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--maxw-wide); }
.container--read { max-width: var(--maxw-read); }
.section { padding-block: var(--sec-pad); position: relative; }
.section--alt { background: var(--washi-deep); }
.section { isolation: isolate; }
.section > .container { position: relative; z-index: 1; }

/* =================================================================
   四季の背景（春→夏→秋 を1枚の連続した背景として縦に流す）
   ================================================================= */
.seasons { position: relative; isolation: isolate; }
.seasons > .section { background: transparent; }          /* 連続背景を透けさせる */
.seasons > .section::before { content: none; }
.seasons-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.seasons-bg img {
  position: absolute; left: 0; width: 100%; object-fit: cover; object-position: center;
  opacity: 0.30;
}
/* 春：上端は淡くフェードイン、下端は次へ受け渡し */
.seasons-bg img:nth-child(1) {
  top: 0; height: 46%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 64%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 64%, rgba(0,0,0,0) 100%);
}
/* 夏：上下ともクロスフェードで前後と溶け合う */
.seasons-bg img:nth-child(2) {
  top: 29%; height: 46%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 28%, #000 72%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 28%, #000 72%, rgba(0,0,0,0) 100%);
}
/* 秋：上端は受け継ぎ、下端はフッターへ向け淡く */
.seasons-bg img:nth-child(3) {
  top: 57%; height: 43%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 30%, #000 86%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 30%, #000 86%, rgba(0,0,0,0) 100%);
}
/* 和紙のヴェールで文字の可読性を確保（連続背景の上に一枚） */
.seasons-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(240,234,216,0.30) 0%,
    rgba(240,234,216,0.08) 24%,
    rgba(240,234,216,0.08) 76%,
    rgba(240,234,216,0.34) 100%);
}

/* セクション境界：金線アクセント 80px */
.rule-gold {
  width: 80px; height: 2px; border: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  margin: 0;
}
.rule-gold--center { margin-inline: auto; }

/* ---------- 4. 縦書き ---------- */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--serif-jp);
  letter-spacing: 0.18em;
  line-height: 1.9;
}
.vertical--mixed { text-orientation: mixed; }

/* ---------- 5. 朱印タグ / 落款 / 日の丸 ---------- */
.shuin {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--crimson); color: #F6EEDC;
  font-family: var(--sans-jp); font-size: var(--t-cap); font-weight: 500;
  letter-spacing: 0.22em; padding: 0.45em 1.1em;
  border-radius: 1px;
}
.eyebrow {
  font-family: var(--sans-jp); font-size: var(--t-cap);
  letter-spacing: 0.32em; color: var(--ink-soft); font-weight: 500;
  text-transform: none;
}
.eyebrow-en {
  font-family: var(--serif-en); font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.3rem); letter-spacing: 0.04em;
  color: var(--gold-deep);
}
.maru { /* 日の丸 / 落款の円 */
  display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%;
  background: var(--crimson); vertical-align: middle;
}

/* ---------- 6. 巨大番号 ---------- */
.numeral {
  font-family: var(--serif-en); font-weight: 500;
  font-size: var(--t-numeral); line-height: 0.8;
  color: var(--gold-mute);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* ---------- 7. 金縁額装フレーム（写真） ---------- */
.framed { position: relative; }
.framed img { position: relative; z-index: 1; display: block; width: 100%; }
.framed::before { /* 朱の細枠 */
  content: ""; position: absolute; inset: 10px; z-index: 2;
  border: 1px solid rgba(142, 42, 31, 0.55); pointer-events: none;
}
.framed .corner {
  position: absolute; width: 34px; height: 34px; z-index: 3; pointer-events: none;
}
.framed .corner::before, .framed .corner::after {
  content: ""; position: absolute; background: var(--gold-deep);
}
.framed .corner::before { width: 100%; height: 2px; top: 0; }
.framed .corner::after { width: 2px; height: 100%; left: 0; }
.framed .corner.tl { top: -2px; left: -2px; }
.framed .corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.framed .corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.framed .corner.br { bottom: -2px; right: -2px; transform: scale(-1); }

/* ---------- 8. ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--sans-jp); font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 500; letter-spacing: 0.12em;
  padding: 0.95em 2em; border: 1px solid transparent; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  position: relative; white-space: nowrap;
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(0.35em); }
.btn--primary { background: var(--crimson); color: #F6EEDC; }
.btn--primary:hover { background: var(--crimson-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--washi); }
.btn--gold { background: transparent; color: var(--gold-deep); border-color: var(--gold-deep); }
.btn--gold:hover { background: var(--gold-deep); color: var(--washi); }
.btn--on-dark { color: var(--washi); border-color: rgba(240,234,216,0.5); }
.btn--on-dark:hover { background: var(--washi); color: var(--ink); border-color: var(--washi); }

.textlink {
  font-family: var(--sans-jp); font-weight: 500; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 0.5em; color: var(--crimson);
  border-bottom: 1px solid transparent; transition: border-color .3s, gap .3s var(--ease);
  padding-bottom: 2px;
}
.textlink:hover { border-color: var(--crimson); gap: 0.85em; }

/* =================================================================
   9. ヘッダー / グローバルナビ（大型）
   ================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: rgba(240, 234, 216, 0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(142, 42, 31, 0.12);
  transition: transform .4s var(--ease), background .4s;
}
.site-header.hide { transform: translateY(-100%); }
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: clamp(1rem, 1.8vh, 1.6rem) var(--gutter);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.nav-list { justify-self: center; }
.brand { display: flex; flex-direction: column; line-height: 1; gap: 0.35em; white-space: nowrap; }
.brand .brand-en {
  font-family: var(--serif-en); font-style: italic; font-weight: 600;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem); color: var(--ink); letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand .brand-jp {
  font-family: var(--sans-jp); font-size: 0.72rem; letter-spacing: 0.28em;
  color: var(--ink-soft);
}
.nav-list { display: flex; align-items: center; gap: clamp(1.1rem, 1.9vw, 2.4rem); }
.nav-list a {
  font-family: var(--sans-jp); font-weight: 500;
  font-size: clamp(1rem, 1.12vw, 1.18rem); letter-spacing: 0.06em;
  color: var(--ink); position: relative; padding-block: 0.3em; white-space: nowrap;
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
  background: var(--crimson); transition: width .35s var(--ease);
}
.nav-list a:hover::after, .nav-list a.current::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 1.4rem; justify-self: end; }
.lang-switch {
  font-family: var(--serif-en); font-size: 0.95rem; letter-spacing: 0.1em;
  color: var(--ink-soft); display: flex; align-items: center; gap: 0.4em; white-space: nowrap;
}
.lang-switch .on { color: var(--ink); font-weight: 600; }
.lang-switch .sep { color: var(--gold-deep); }
.nav-support {
  font-family: var(--sans-jp); font-weight: 500; letter-spacing: 0.12em;
  background: var(--crimson); color: #F6EEDC;
  padding: 0.7em 1.5em; font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  transition: background .35s var(--ease); white-space: nowrap;
}
.nav-support:hover { background: var(--crimson-deep); }

/* ハンバーガー */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; position: relative; z-index: 210;
}
.nav-toggle span {
  position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルメニュー */
.mobile-menu {
  position: fixed; inset: 0; z-index: 199;
  background: var(--washi);
  display: flex; flex-direction: column; justify-content: center;
  padding: 8vh var(--gutter) 6vh;
  transform: translateY(-100%); transition: transform .5s var(--ease);
  overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu a {
  font-family: var(--serif-jp); font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--ink); padding-block: 0.5em; border-bottom: 1px solid rgba(142,42,31,0.14);
  display: flex; align-items: baseline; gap: 1em;
}
.mobile-menu a .idx { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); font-size: 0.7em; }
.mobile-menu .mobile-support {
  margin-top: 2rem; background: var(--crimson); color: #F6EEDC; border: 0;
  justify-content: center; text-align: center;
}

/* スクロール進行バー */
.progress {
  position: fixed; top: 0; left: 0; width: 2px; height: 100%; z-index: 300;
  background: transparent; pointer-events: none;
}
.progress span { display: block; width: 100%; height: 0; background: var(--crimson); transition: height .1s linear; }

/* =================================================================
   10. フェードイン（IntersectionObserver）
   ================================================================= */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.fade-up.in { opacity: 1; transform: none; }
.fade-up[data-delay="1"] { transition-delay: .12s; }
.fade-up[data-delay="2"] { transition-delay: .24s; }
.fade-up[data-delay="3"] { transition-delay: .36s; }

/* =================================================================
   11. イントロマスク（Topのみ）
   ================================================================= */
.intro {
  position: fixed; inset: 0; z-index: 500;
  background: var(--washi);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2rem;
  transition: opacity .9s var(--ease), visibility .9s;
}
.intro.done { opacity: 0; visibility: hidden; }
.intro .intro-wave { position: absolute; inset: 0; opacity: 0.08; }
.intro .intro-mark { text-align: center; }
.intro .intro-en {
  font-family: var(--serif-en); font-style: italic; font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem); color: var(--ink);
  overflow: hidden;
}
.intro .intro-jp {
  font-family: var(--sans-jp); letter-spacing: 0.4em; font-size: var(--t-cap);
  color: var(--ink-soft); margin-top: 1.2em;
  opacity: 0; animation: introFade 1s var(--ease) 1s forwards;
}
.intro .intro-line {
  width: 0; height: 1px; background: var(--gold-deep); margin: 1.4rem auto 0;
  animation: introLine 1.6s var(--ease) .4s forwards;
}
@keyframes introLine { to { width: min(420px, 60vw); } }
@keyframes introFade { to { opacity: 1; } }

/* =================================================================
   12. HERO（Top）
   ================================================================= */
.hero {
  position: relative; min-height: clamp(560px, 76vh, 820px); display: flex; align-items: center;
  color: var(--washi); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { /* 墨の保護グラデ：中央の文字を読みやすく沈める＋右端を締める */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(26,22,18,0.5) 0%, rgba(26,22,18,0.2) 55%, rgba(26,22,18,0) 100%),
    linear-gradient(270deg, rgba(26,22,18,0.42) 0%, rgba(26,22,18,0) 16%),
    linear-gradient(0deg, rgba(26,22,18,0.5) 0%, rgba(26,22,18,0) 45%),
    linear-gradient(180deg, rgba(26,22,18,0.4) 0%, rgba(26,22,18,0) 30%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--maxw-wide); margin-inline: auto;
  padding: clamp(2rem, 5vh, 4rem) var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  justify-content: center; min-height: inherit;
}
.hero-vertical {
  position: absolute; right: clamp(3rem, 14vw, 17rem); top: 50%; transform: translateY(-50%); z-index: 2;
  color: var(--gold-soft);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem); letter-spacing: 0.3em; font-weight: 700;
  border-left: 2px solid var(--gold); padding-left: 1.2rem;
  display: flex; gap: 0.4em; text-shadow: 0 2px 18px rgba(26,22,18,1), 0 0 4px rgba(26,22,18,0.9);
}
.hero-vertical span { display: block; white-space: nowrap; }
.hero { align-items: flex-end; }
.hero-inner { justify-content: flex-end; padding-bottom: clamp(4rem, 12vh, 9rem); }
.hero-main { max-width: 60ch; display: flex; flex-direction: column; align-items: center; transform: none; }
.hero .kicker {
  font-family: var(--sans-jp); font-size: var(--t-cap); letter-spacing: 0.28em;
  color: var(--gold-soft); margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.8em;
}
.hero h1 {
  font-size: var(--t-h1); line-height: 1.1; letter-spacing: 0.06em;
  margin-bottom: 1.2rem; text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.hero h1 .word { display: inline-block; }
.hero .catch {
  font-family: var(--serif-jp); font-size: var(--t-lead); line-height: 1.7;
  margin-bottom: 0.6rem; letter-spacing: 0.05em;
}
.hero .catch span { display: block; }
.hero .subtitle {
  font-family: var(--sans-jp); font-size: clamp(0.95rem,1.05vw,1.15rem);
  color: rgba(240,234,216,0.85); letter-spacing: 0.08em; margin-bottom: 1.8rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.hero-scroll {
  position: absolute; left: var(--gutter); bottom: clamp(2rem,5vh,4rem); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  color: var(--gold-soft); font-family: var(--serif-en); font-style: italic; letter-spacing: 0.2em;
  writing-mode: vertical-rl; font-size: 0.85rem;
}
.hero-scroll::after { content: ""; width: 1px; height: 56px; background: var(--gold-soft); animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100%{ transform: scaleY(0.4); transform-origin: top; opacity:.4;} 50%{ transform: scaleY(1); opacity:1;} }

/* =================================================================
   12-B. フルブリード引用バンド（リズム用・夜の静謐）
   ================================================================= */
.quote-band {
  position: relative; min-height: clamp(30rem, 72vh, 46rem);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--washi);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.qb-bg { position: absolute; inset: 0; z-index: 0; }
.qb-bg img { width: 100%; height: 100%; object-fit: cover; }
.qb-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,33,58,0.88) 0%, rgba(18,15,12,0.93) 100%);
}
.qb-inner {
  position: relative; z-index: 1; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: clamp(1.6rem, 3vw, 2.6rem);
}
.qb-eyebrow { font-family: var(--serif-en); font-style: italic; color: var(--gold-soft); letter-spacing: 0.08em; font-size: clamp(1rem,1.3vw,1.3rem); }
.qb-mark { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--crimson); font-size: clamp(1.6rem,3vw,2.4rem); }
.qb-quote {
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--serif-jp); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.5; letter-spacing: 0.16em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4); height: clamp(13rem, 36vh, 20rem);
}
.qb-quote span { display: block; margin-left: 0.5em; }
.qb-quote span:first-child { margin-left: 0; }
.qb-attr { font-family: var(--sans-jp); font-size: var(--t-cap); color: rgba(240,234,216,0.72); letter-spacing: 0.14em; }
@media (max-width: 767px) {
  .qb-quote { writing-mode: horizontal-tb; height: auto; text-align: center; }
  .qb-quote span { margin-left: 0; }
}

/* =================================================================
   13. セクション共通見出し
   ================================================================= */
.sec-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.sec-head .eyebrow-en { margin-bottom: 0.2rem; }
.sec-head h2 { font-size: var(--t-h2); letter-spacing: 0.05em; }
.sec-head h2 .accent { color: var(--crimson); }
.numbered { position: relative; }
.numbered > .numeral { position: absolute; top: clamp(-2rem,-3vw,-3.5rem); right: -1vw; z-index: 0; }

/* =================================================================
   14. FOUNDER BRIEF
   ================================================================= */
.founder-brief { position: relative; overflow: hidden; }
.fb-grid {
  display: grid; grid-template-columns: 0.85fr minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center; position: relative; z-index: 1;
}
.fb-photo { position: relative; }
.fb-photo .shuin { position: absolute; top: 18px; left: 18px; z-index: 4; }
.fb-text .eyebrow-en { margin-bottom: 1rem; }
.fb-text h2 { font-size: var(--t-h3); line-height: 1.6; margin-bottom: 1.8rem; font-weight: 600; }
.fb-quote {
  font-family: var(--serif-jp); font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.7;
  color: var(--crimson); position: relative; padding-left: 1.4rem; margin-bottom: 2rem;
  border-left: 2px solid var(--gold); letter-spacing: 0.04em;
}
.fb-body p { margin-bottom: 1.2em; color: var(--ink); }
.fb-body { margin-bottom: 2rem; }

/* Founder と統合したミッションの一文（春の章の導入） */
.mission-line {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem);
  border-bottom: 1px solid rgba(201,163,94,0.5);
  display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2vw, 1.6rem);
  text-align: center;
}
.mission-line .qb-eyebrow { color: var(--gold-deep); white-space: nowrap; }
.mission-quote {
  font-family: var(--serif-jp); font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.5; letter-spacing: 0.08em;
  color: var(--ink);
}
.mission-quote .accent { color: var(--crimson); }
.mission-attr {
  font-family: var(--serif-en); font-style: italic; letter-spacing: 0.06em;
  color: var(--ink-mute); font-size: clamp(0.9rem, 1.1vw, 1.15rem);
}

/* =================================================================
   15. STATS
   ================================================================= */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
}
.stat { padding: clamp(1.8rem,3vw,2.8rem) clamp(1rem,2vw,2rem); text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(201,163,94,0.45); }
.stat .num {
  font-family: var(--serif-en); font-weight: 500; color: var(--ink);
  font-size: clamp(3rem, 5.5vw, 5.4rem); line-height: 1; letter-spacing: 0.01em;
}
.stat .num .plus { color: var(--crimson); }
.stat .unit { font-family: var(--serif-jp); font-size: clamp(1rem,1.3vw,1.3rem); color: var(--ink); margin-left: 0.15em; }
.stat .cap { font-family: var(--sans-jp); font-size: var(--t-cap); color: var(--ink-soft); margin-top: 1rem; letter-spacing: 0.06em; line-height: 1.6; }

/* =================================================================
   16. NEWS
   ================================================================= */
.news-list { border-top: 1px solid rgba(142,42,31,0.16); }
.news-item {
  display: grid; grid-template-columns: 12rem 9rem 1fr auto; gap: 2rem; align-items: center;
  padding: clamp(1.4rem,2.4vw,2rem) 0.5rem; border-bottom: 1px solid rgba(142,42,31,0.16);
  transition: background .35s, padding-left .35s var(--ease);
}
.news-item:hover { background: var(--washi-card); padding-left: 1.3rem; }
.news-date { font-family: var(--serif-en); font-size: 1.2rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.news-cat { justify-self: start; }
.news-title { font-family: var(--serif-jp); font-size: clamp(1.05rem,1.4vw,1.35rem); color: var(--ink); }
.news-item .arrow { color: var(--gold-deep); }

/* =================================================================
   17. IMPACT / 寄付プラン
   ================================================================= */
.impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem,2.5vw,2.5rem); }
.plan {
  background: var(--washi-card); border: 1px solid rgba(201,163,94,0.5);
  padding: clamp(2rem,3vw,3rem) clamp(1.6rem,2.4vw,2.4rem);
  display: flex; flex-direction: column; gap: 1.2rem; position: relative;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 4px 0 rgba(142,42,31,0.12); }
.plan .plan-amount { font-family: var(--serif-en); font-size: clamp(2.4rem,4vw,3.6rem); color: var(--ink); line-height: 1; }
.plan .plan-eyebrow { font-family: var(--serif-en); font-style: italic; font-size: clamp(1.15rem,1.6vw,1.5rem); color: var(--gold-deep); letter-spacing: 0.03em; }
.plan .plan-amount .yen { font-family: var(--serif-jp); font-size: 0.55em; margin-right: 0.1em; color: var(--ink-soft); }
.plan .plan-name { font-family: var(--serif-jp); font-size: var(--t-h3); color: var(--crimson); letter-spacing: 0.04em; }
.plan .plan-use { font-family: var(--serif-body); font-size: clamp(0.95rem,1vw,1.08rem); color: var(--ink-soft); line-height: 1.85; flex: 1; }
.plan .btn { justify-content: center; margin-top: 0.5rem; }

/* =================================================================
   18. DASHBOARD（出口導線）
   ================================================================= */
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(201,163,94,0.4); border: 1px solid rgba(201,163,94,0.4); }
.dash-cell {
  background: var(--washi); padding: clamp(2.5rem,4vw,4rem) clamp(1.6rem,2.4vw,2.6rem);
  display: flex; flex-direction: column; gap: 1rem; min-height: clamp(15rem,22vw,18rem);
  transition: background .4s var(--ease), color .4s;
}
.dash-cell:hover { background: var(--ink); color: var(--washi); }
.dash-cell:hover .dash-en, .dash-cell:hover .arrow { color: var(--gold-soft); }
.dash-cell:hover .dash-desc { color: rgba(240,234,216,0.78); }
.dash-num { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); font-size: 1.3rem; }
.dash-en { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); font-size: 1.2rem; transition: color .4s; }
.dash-cell h3 { font-size: var(--t-h3); margin-top: auto; }
.dash-desc { font-family: var(--sans-jp); font-size: var(--t-cap); color: var(--ink-soft); letter-spacing: 0.06em; transition: color .4s; }
.dash-cell .arrow { color: var(--crimson); align-self: flex-start; transition: color .4s, transform .35s var(--ease); }
.dash-cell:hover .arrow { transform: translateX(0.4em); }

/* =================================================================
   19. フッター
   ================================================================= */
.site-footer { background: var(--navy); color: rgba(240,234,216,0.86); padding-block: clamp(3.5rem,6vw,5.5rem) 2.5rem; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem,4vw,4rem);
  padding-bottom: 3rem; border-bottom: 1px solid rgba(184,148,90,0.4);
}
.footer-brand .brand-en { font-family: var(--serif-en); font-style: italic; font-size: clamp(1.6rem,2.2vw,2rem); color: var(--washi); }
.footer-brand .corp { font-family: var(--sans-jp); font-size: var(--t-cap); line-height: 2; margin-top: 1.4rem; color: rgba(240,234,216,0.72); }
.footer-col h4 { font-family: var(--sans-jp); font-size: var(--t-cap); letter-spacing: 0.2em; color: var(--gold-soft); margin-bottom: 1.2rem; font-weight: 500; }
.footer-col ul li { margin-bottom: 0.8em; }
.footer-col a { font-family: var(--sans-jp); font-size: clamp(0.92rem,1vw,1.02rem); color: rgba(240,234,216,0.86); transition: color .3s; letter-spacing: 0.04em; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 2rem; flex-wrap: wrap; }
.footer-bottom .copy { font-family: var(--serif-en); font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(240,234,216,0.6); }
.footer-bottom .pending { font-family: var(--sans-jp); font-size: 0.72rem; color: rgba(240,234,216,0.45); letter-spacing: 0.06em; }

/* =================================================================
   20. 下層ページ共通：ページヘッダー
   ================================================================= */
.page-hero {
  position: relative; padding-top: clamp(9rem, 16vh, 13rem); padding-bottom: clamp(4rem, 7vw, 6rem);
  overflow: hidden;
}
.page-hero--photo { color: var(--washi); min-height: clamp(28rem, 60vh, 40rem); display: flex; align-items: flex-end; }
.page-hero--photo .page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero--photo .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(26,22,18,0.82) 0%, rgba(26,22,18,0.42) 55%, rgba(26,22,18,0.5) 100%); }
.page-hero-inner { position: relative; z-index: 2; }
.page-hero .numeral { position: absolute; top: 30%; right: 2vw; z-index: 0; }
.page-hero .eyebrow-en { margin-bottom: 0.8rem; }
.page-hero h1 { font-size: var(--t-h1); letter-spacing: 0.08em; line-height: 1.2; }
.page-hero .lead { font-family: var(--serif-body); font-size: var(--t-lead); margin-top: 1.6rem; max-width: 42ch; line-height: 1.8; }
.page-hero--photo .lead { color: rgba(240,234,216,0.9); }

/* 本文ブロック */
.prose { max-width: var(--maxw-read); }
.prose p { margin-bottom: 1.4em; }
.prose h2 { font-size: var(--t-h2); margin: 2.4em 0 0.8em; }
.prose .lead { font-size: var(--t-lead); line-height: 1.85; }

/* 大型引用 */
.bigquote { position: relative; max-width: 24em; }
.bigquote .qmark { font-family: var(--serif-en); font-size: 7rem; color: var(--gold-mute); line-height: 0.5; display: block; }
.bigquote p { font-family: var(--serif-jp); font-size: clamp(1.5rem,2.6vw,2.4rem); line-height: 1.7; color: var(--ink); letter-spacing: 0.04em; }

/* 活動ブロック（projects） */
.act { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,4vw,4.5rem); align-items: center; }
.act:nth-child(even) .act-photo { order: 2; }
.act-photo { position: relative; }
.act-num { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); font-size: 1.4rem; margin-bottom: 0.6rem; }
.act h3 { font-size: clamp(1.6rem,2.4vw,2.2rem); margin-bottom: 1.2rem; letter-spacing: 0.04em; }
.act p { color: var(--ink-soft); line-height: 1.9; }

/* 4本柱 / 7本質 グリッド */
.goal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(201,163,94,0.4); border: 1px solid rgba(201,163,94,0.4); }
.goal { background: var(--washi); padding: clamp(2rem,3.2vw,3rem); display: flex; flex-direction: column; gap: 0.8rem; min-height: 14rem; }
.goal .goal-no { font-family: var(--serif-en); color: var(--gold-deep); font-size: 1.2rem; }
.goal .goal-en { font-family: var(--serif-en); font-style: italic; font-size: clamp(1.3rem,1.8vw,1.7rem); color: var(--crimson); }
.goal h3 { font-size: var(--t-h3); }
.goal p { font-size: var(--t-cap); color: var(--ink-soft); line-height: 1.8; font-family: var(--sans-jp); }

.essence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1px; background: rgba(201,163,94,0.35); border: 1px solid rgba(201,163,94,0.35); }
.essence { background: var(--washi); padding: clamp(1.6rem,2.4vw,2.2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.essence .kanji { font-family: var(--serif-jp); font-size: clamp(2rem,3vw,2.8rem); color: var(--ink); letter-spacing: 0.1em; }
.essence .romaji { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); font-size: 1.05rem; }
.essence p { font-size: var(--t-cap); color: var(--ink-soft); font-family: var(--sans-jp); line-height: 1.8; margin-top: 0.4rem; }

/* CTA帯 */
.cta-band { background: var(--ink); color: var(--washi); position: relative; overflow: hidden; }
.cta-band .container { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.8rem; }
.cta-band h2 { color: var(--washi); font-size: var(--t-h2); }
.cta-band .cta-sub { font-family: var(--sans-jp); color: rgba(240,234,216,0.8); letter-spacing: 0.06em; max-width: 40ch; }
.cta-band .hero-cta { justify-content: center; }
.cta-band .wave-bg { position: absolute; inset: 0; opacity: 0.06; z-index: 0; }

/* 関連導線（3リンク） */
.relnav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: rgba(201,163,94,0.4); border: 1px solid rgba(201,163,94,0.4); }
.relnav a { background: var(--washi); padding: clamp(1.8rem,3vw,2.6rem); display: flex; flex-direction: column; gap: 0.6rem; transition: background .35s, color .35s; }
.relnav a:hover { background: var(--ink); color: var(--washi); }
.relnav a:hover .relnav-en { color: var(--gold-soft); }
.relnav .relnav-en { font-family: var(--serif-en); font-style: italic; color: var(--gold-deep); }
.relnav h3 { font-size: var(--t-h3); }

/* テーブル（法人情報） */
.info-table { width: 100%; border-collapse: collapse; max-width: 820px; }
.info-table th, .info-table td { text-align: left; padding: 1.3rem 1rem; border-bottom: 1px solid rgba(142,42,31,0.16); vertical-align: top; }
.info-table th { font-family: var(--sans-jp); font-weight: 500; color: var(--ink-soft); letter-spacing: 0.1em; width: 14rem; font-size: var(--t-cap); }
.info-table td { font-family: var(--serif-body); color: var(--ink); }
.pending-tag { font-family: var(--sans-jp); font-size: 0.7rem; color: var(--crimson); border: 1px solid rgba(142,42,31,0.4); padding: 0.15em 0.6em; margin-left: 0.6em; letter-spacing: 0.08em; white-space: nowrap; }

/* フォーム */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; max-width: 760px; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--sans-jp); font-size: var(--t-cap); letter-spacing: 0.1em; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--serif-body); font-size: 1.05rem; color: var(--ink);
  background: var(--washi-card); border: 1px solid rgba(142,42,31,0.25); padding: 0.85em 1em;
  border-radius: 0; transition: border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crimson); }
.field textarea { min-height: 9rem; resize: vertical; }
.consent { display: flex; align-items: center; gap: 0.7em; font-family: var(--sans-jp); font-size: var(--t-cap); color: var(--ink-soft); }

/* 動画グリッド（channel） */
.video-main { position: relative; aspect-ratio: 16/9; background: var(--ink); }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.2rem,2vw,2rem); }
.video-card { display: flex; flex-direction: column; gap: 0.9rem; }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-play svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.video-card h3 { font-size: var(--t-h3); }
.video-card .v-meta { font-family: var(--sans-jp); font-size: var(--t-cap); color: var(--ink-soft); letter-spacing: 0.06em; }

/* スキップリンク */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--crimson); color: #fff; padding: 0.8em 1.4em; }
.skip-link:focus { left: 1rem; top: 1rem; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--crimson); outline-offset: 3px;
}

/* =================================================================
   21. レスポンシブ（≥1281 / ≤1280 で明示分離）
   ================================================================= */
@media (max-width: 1280px) {
  .nav-list, .nav-right .lang-switch, .nav-right .nav-support { display: none; }
  .nav-toggle { display: block; }
  .nav-right { gap: 0; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-vertical { display: none; }

  .fb-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before, .stat:nth-child(4)::before { content: none; }
  .stat:nth-child(odd)::before { content: none; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid rgba(201,163,94,0.4); }
  .impact-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .dash-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .act { grid-template-columns: 1fr; gap: 1.8rem; }
  .act:nth-child(even) .act-photo { order: 0; }
  .video-grid { grid-template-columns: repeat(2,1fr); }
  .relnav { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --gutter: 24px; }
  .news-item { grid-template-columns: 1fr; gap: 0.6rem; align-items: start; }
  .news-item .arrow { display: none; }
  .goal-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .info-table th { width: auto; }
  .info-table th, .info-table td { display: block; padding-block: 0.5rem; }
  .info-table tr { display: block; padding-block: 0.8rem; border-bottom: 1px solid rgba(142,42,31,0.16); }
  .info-table th, .info-table td { border: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}