/* =================================================================
   Aurea Lotus / Celsus Investments
   Dynamic Site Proposal - Base color: Navy / Gold / White
   ================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --navy-900: #071633;
  --navy-800: #0a1f44;
  --navy-700: #102a52;
  --navy-600: #1b3a66;
  --navy-500: #2c4d7a;
  /* 差し色はゴールドトーン。役割: -500/-400/-300/-100=罫線・装飾(明背景→暗背景用に明るく)、
     -600/-ink=白面のテキスト用ダークゴールド(AA)、-on-silver=シルバー面のテキスト用(AA)。 */
  --gold-500: #c9a227;
  --gold-400: #d6b651;
  --gold-300: #e7d29a;
  --gold-100: #f6eecf;
  --gold-600: #8f6f12;
  --gold-ink: #9a7d1e;
  --gold-on-silver: #7a5e0e;
  --white: #ffffff;
  --paper: #f8f7f3;
  --paper-2: #f1efe7;
  --ink: #1a1f2b;
  --ink-soft: #4a5163;
  --line: rgba(28, 42, 72, 0.14);

  /* --- クールシルバー階調(やや青み・主役の一角) --- */
  --silver-50:  #f4f6f9;
  --silver-100: #eaedf2;
  --silver-200: #dde1e8;
  --silver-300: #cad0da;
  --silver-400: #a7afbd;
  --silver-500: #828b9b;

  /* --- サテン(クール寒色メタル微グラデ・中面積限定) --- */
  --silver-sheen:      linear-gradient(135deg,#f6f8fb 0%, #e2e6ee 48%, #eef1f6 100%);
  --silver-sheen-soft: linear-gradient(135deg,#fbfcfe 0%, #eceff4 100%);

  /* --- 要所の極細金罫 --- */
  --gold-hair: rgba(143,111,18,0.55);

  --ff-serif: "Cormorant Garamond", "Shippori Mincho", serif;
  --ff-mincho: "Shippori Mincho", "Cormorant Garamond", serif;
  --ff-sans: "Noto Sans JP", system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --shadow-sm: 0 6px 20px rgba(28, 42, 72, 0.08);
  --shadow-md: 0 18px 50px rgba(28, 42, 72, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 84px;
}

/* ===== Object-image reveal : easing / duration tokens =====
   既存 :root の --ease(cubic-bezier(0.22,0.61,0.36,1)) は維持。
   以下を :root に「追記」する(既存変数は上書きしない)。 */
:root{
  /* 強い終端減速＝現像/ワイプ用(立ち上がり速く・終わりが極めて遅い=落ち着く) */
  --ease-develop: cubic-bezier(0.16, 0.74, 0.20, 1);
  /* 被写体ドリフト/ステガー用(既存 --ease 系のなめらかな減速) */
  --ease-drift:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-wipe:  1.45s;   /* 枠の現像 */
  --dur-drift: 1.55s;   /* 被写体は枠よりやや長く=遅速差 */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* scrollbar-gutter: stable で縦スクロールバー幅ぶんの 100vw と実コンテンツ幅の差を吸収し、
   .bleed の負マージン(--edge は 100vw 基準)が想定外にクリップされるのを防ぐ。 */
html { font-size: 112.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-x: clip; } /* 16px -> 18px 基準（全体を大きめに）。overflow-x:clip は data-reveal のスライドインや幅超過画像による横はみ出しをルートで抑え、iOSでレイアウト幅が広がってハンバーガー(≤768)が消える不具合を防ぐ。hidden ではなく clip を使うのは、clip は overflow-y を auto に変えず(html をスクロールコンテナ化しない)、window.scrollTo など window スクロールAPIを壊さないため */
body {
  font-family: var(--ff-mincho);
  color: var(--ink);
  background: var(--white);
  line-height: 1.9;
  font-size: 1rem;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* クリック後（フォーカス/訪問済み/押下中）も継承色を保つ。親テーマ Astra が
   a:visited/:focus/:active に当てる青・紫のリンク色を打ち消す。
   ※ .btn（自前の文字色 --fg を持つ塗りボタン）は除外。除外しないと訪問済み/
      フォーカス後に「濃紺背景×濃紺文字」でボタン文字が消えるため。 */
a:visited:not(.btn), a:focus:not(.btn), a:active:not(.btn) { color: inherit; }
/* マウスクリック時のブラウザ既定アウトライン（点線）は抑止し、キーボード操作時のみ
   下の :focus-visible の金枠を出す（アクセシビリティは維持）。 */
a:focus:not(:focus-visible) { outline: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ---------- Focus visibility (keyboard a11y) ----------
   text-decoration なしリンク/背景色付きボタンでフォーカス位置が分かるよう
   明示的なフォーカスリングを付与。暗背景(ヘッダ/フッタ)上は高コントラストの gold-300。 */
a:focus-visible, button:focus-visible, .btn:focus-visible, .chip:focus-visible,
.nav a:focus-visible, .pagination a:focus-visible, .to-top:focus-visible,
.post-card a:focus-visible, .footer-col a:focus-visible, .breadcrumb a:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 2px;
}
.nav a:focus-visible, .footer-col a:focus-visible, .footer-bottom .social a:focus-visible,
.site-header a:focus-visible, .site-footer a:focus-visible {
  outline-color: var(--gold-600);
}

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: 1380px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.82rem; line-height: 1.2; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-600); font-weight: 600;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-ink); }
.eyebrow--center::after { content: ""; width: 34px; height: 1px; background: var(--gold-ink); }
.eyebrow--light { color: var(--gold-600); }

.sec-title {
  font-family: var(--ff-mincho);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.sec-title .en {
  display: block; font-family: var(--ff-serif); font-style: italic;
  font-size: 0.5em; letter-spacing: 0.12em; color: var(--gold-600);
  margin-top: 0.4em; font-weight: 500;
}
.lead { color: var(--ink-soft); font-size: 1.02rem; max-width: 62ch; }
/* 1行固定のリード（狭い画面では折り返し許可） */
.lead--nowrap { white-space: nowrap; max-width: none; }
@media (max-width: 600px) { .lead--nowrap { white-space: normal; } }

.btn {
  --bg: var(--navy-800); --fg: var(--white);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 34px; font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--bg); color: var(--fg);
  border-radius: 2px; position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease);
  isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--silver-sheen); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--navy-900); box-shadow: var(--shadow-md); }
.btn:hover::after { transform: scaleX(1); }
.btn .arrow { transition: transform 0.4s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--ghost { --bg: var(--navy-800); --fg: var(--white); border: 1px solid var(--navy-800); }
.btn--ghost::after { background: var(--silver-sheen); }
.btn--ghost:hover { color: var(--navy-900); border-color: var(--silver-300); }
.btn--dark { --bg: var(--navy-800); --fg: var(--white); }
.btn--dark::after { background: var(--silver-sheen); }
.btn--dark:hover { color: var(--navy-900); }
/* 暗い画像バンド上で映えるシルバーボタン */
.btn--silver { --bg: var(--silver-sheen); --fg: var(--navy-900); border: 1px solid var(--silver-300); }
.btn--silver::after { background: var(--navy-800); }
.btn--silver:hover { color: var(--white); border-color: var(--navy-800); }

.section { padding-block: clamp(72px, 11vw, 150px); position: relative; background: var(--white); }
/* Explicit white modifier: declares the "white is the主役" intent even though
   .section already defaults to white, so the markup reads unambiguously. */
.section--white { background: var(--white); }
.section--navy { background: var(--navy-800); color: var(--white); }
.section--navy .lead { color: rgba(255,255,255,0.72); }
/* On the white-dominant redesign, "paper" tones are used only as faint
   tinted breathers between predominantly white sections. */
.section--paper { background: var(--silver-50); }
.section--paper2 { background: var(--silver-100); }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(38px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="zoom"] { transform: scale(0.92); }
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="zoom"].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* =================================================================
   Header
   ================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  /* height はレイアウトプロパティのためトランジション対象から外し、瞬時切替にする
     (スクロール閾値通過時の固定ヘッダのリフローを回避)。背景/影/罫のみ遷移。 */
  transition: background 0.4s var(--ease),
    box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-scrolled {
  height: 68px; background: rgba(244, 246, 249, 0.92);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
  border-color: var(--silver-300);
}
/* On light pages the header starts solid */
.site-header.is-solid {
  background: rgba(244, 246, 249, 0.94); backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 14px; color: var(--navy-900); }
/* Celsus Investments ロゴ画像（透過PNG）。スクロールしても縮小しない固定サイズ */
.brand__logo { height: clamp(32px, 3.4vw, 42px); width: auto; display: block; }
.footer-brand .brand__logo { height: 44px; margin-bottom: 4px; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { line-height: 1.15; }
.brand__name { font-family: var(--ff-serif); font-size: 1.32rem; letter-spacing: 0.14em; font-weight: 600; }
.brand__sub { display: block; font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-600); }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--ink-soft); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.1em; padding: 10px 16px; position: relative;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px;
  height: 1px; background: var(--gold-600); transform: scaleX(0);
  transform-origin: right; transition: transform 0.35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy-900); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  margin-left: 10px; padding: 10px 22px !important; border: 1px solid var(--navy-700);
  color: var(--navy-900) !important; border-radius: 2px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease) !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--navy-800); color: var(--white) !important; }
/* 会員ログイン時のログアウト（Contactの右）。Contactが枠ボタン＝こちらは濃紺の塗りで対比 */
.nav__logout {
  margin-left: 8px; padding: 10px 20px !important; border: 1px solid var(--navy-800); border-radius: 2px;
  background: var(--navy-800); color: var(--white) !important;
  transition: background 0.35s var(--ease), color 0.35s var(--ease) !important;
}
.nav__logout::after { display: none; }
.nav__logout:hover { background: transparent; color: var(--navy-900) !important; }

.nav-toggle { display: none; width: 46px; height: 46px; position: relative; z-index: 110; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--navy-900); transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =================================================================
   Hero
   ================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--ink); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 120%; object-fit: cover; }
/* will-change はパララックスが実際に有効な時のみ JS が is-ready-parallax を付与して限定昇格。
   reduced-motion / coarse では付与されず、合成レイヤを恒常確保しない。 */
.hero.is-ready-parallax .hero__bg img { will-change: transform; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(244,246,249,0.94) 0%, rgba(244,246,249,0.78) 42%, rgba(244,246,249,0.30) 100%),
    linear-gradient(to top, rgba(234,237,242,0.85), transparent 42%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: var(--header-h); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.hero h1 {
  font-family: var(--ff-mincho); font-weight: 600;
  font-size: clamp(1.5rem, 4.6vw, 3.5rem); line-height: 1.3; letter-spacing: 0.04em;
  margin-block: 10px 18px;
}
.hero h1 .gold { color: var(--gold-600); }
.hero h1 { color: var(--navy-900); }
.hero__lead-ja { font-size: 1.05rem; color: var(--ink-soft); max-width: 48ch; }
.hero__lead-en { font-family: var(--ff-serif); font-style: italic; font-size: 1.15rem; letter-spacing: 0.05em; color: var(--gold-600); margin-top: 14px; }
/* Hero front-page copy (client text): citation / closing / English block */
.hero__cite { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }
.hero__closing { font-family: var(--ff-mincho); font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--navy-900); line-height: 1.7; margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--gold-500); }
.hero__en { max-width: 58ch; margin-top: clamp(22px, 3vw, 34px); padding-top: 20px; border-top: 1px solid var(--silver-300); }
.hero__en-head { font-family: var(--ff-serif); font-style: italic; font-weight: 500; font-size: 1.12rem; color: var(--navy-700); line-height: 1.4; }
.hero__en-body { font-family: var(--ff-serif); font-size: 1.02rem; color: var(--ink-soft); line-height: 1.7; margin-top: 10px; }
.hero__en-cite { font-family: var(--ff-serif); font-size: 0.85rem; color: var(--ink-soft); opacity: 0.9; line-height: 1.55; margin-top: 8px; }
.hero__en-closing { font-family: var(--ff-serif); font-style: italic; font-size: 1rem; color: var(--navy-700); line-height: 1.6; margin-top: 8px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero__scroll {
  position: absolute; left: var(--gut); bottom: 34px; z-index: 2;
  display: flex; align-items: center; gap: 14px; font-size: 0.68rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft);
  text-shadow: 0 1px 4px rgba(255,255,255,0.6); /* keep readable over any hero image */
}
.hero__scroll .line { width: 60px; height: 1px; background: var(--silver-400); overflow: hidden; position: relative; }
.hero__scroll .line::after { content: ""; position: absolute; inset: 0; background: var(--gold-600); animation: scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* Animated headline words */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: inline-block; white-space: nowrap; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.hero.is-ready .reveal-line > span { transform: none; }

/* =================================================================
   Who We Are
   ================================================================= */
.who { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.who__bilingual { display: grid; gap: 28px; }
.who__quote { font-family: var(--ff-serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.5; color: var(--navy-800); position: relative; padding-left: 30px; }
.who__quote::before { content: "“"; position: absolute; left: -6px; top: -10px; font-size: 4rem; color: var(--gold-300); font-family: var(--ff-serif); }
.who__media { position: relative; }
.who__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 4/5; object-fit: cover; }
.who__media .badge {
  position: absolute; bottom: -26px; left: -26px; background: var(--silver-sheen); color: var(--ink);
  padding: 24px 28px; border-radius: var(--radius); box-shadow: var(--shadow-md); border-left: 3px solid var(--gold-hair);
}
.who__media .badge b { font-family: var(--ff-serif); font-size: 2.4rem; color: var(--navy-900); display: block; line-height: 1; }
.who__media .badge span { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* =================================================================
   Founder
   ================================================================= */
.founder { display: grid; grid-template-columns: 320px 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.founder__photo { position: relative; }
.founder__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); box-shadow: 0 22px 48px rgba(7,22,51,0.20); }
.founder__photo .frame { position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold-500); border-radius: var(--radius); z-index: -1; }
.founder__name { font-family: var(--ff-mincho); font-size: 1.5rem; margin-top: 22px; }
.founder__name span { display: block; font-family: var(--ff-serif); font-style: italic; color: var(--gold-600); font-size: 1rem; letter-spacing: 0.08em; }
.founder__role { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }
.founder__bio p + p { margin-top: 1.1em; }
.founder__bio .en { color: var(--ink-soft); font-family: var(--ff-serif); font-style: italic; font-size: 0.98rem; }

/* Book */
.book { display: grid; grid-template-columns: 150px 1fr auto; gap: 32px; align-items: center; margin-top: 44px; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.book__cover { box-shadow: var(--shadow-md); border-radius: 2px; transform: translateY(0); transition: transform 0.6s var(--ease); }
.book:hover .book__cover { transform: translateY(-4px); }
.book__title { font-family: var(--ff-mincho); font-size: 1.2rem; }
.book__meta { font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; }

/* Charts / stats */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.chart-card { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 32px; border: 1px solid var(--silver-300); }
.chart-card h4 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-600, #b08e1e); font-weight: 600; }
.chart-card .big { font-family: var(--ff-serif); font-size: 3.2rem; line-height: 1; margin-top: 10px; color: var(--navy-800); }
.chart-card .big small { font-size: 1.2rem; color: var(--gold-600); }
.chart-card .desc { font-size: 0.82rem; color: var(--ink-soft); margin-top: 8px; }
/* 数字の上に置くラベル（ファンド名との間隔を確保し、数字とは近づける） */
.chart-card .desc--top { margin-top: 14px; margin-bottom: 0; letter-spacing: 0.04em; }
.chart-card .desc--top + .big { margin-top: 2px; }
/* line chart */
.linechart { width: 100%; height: 120px; margin-top: 18px; }
.linechart path.area { fill: url(#goldfade); opacity: 0; transition: opacity 1s var(--ease) 0.6s; }
.linechart path.line { fill: none; stroke: var(--navy-700); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.chart-card.is-in .linechart path.line { transition: stroke-dashoffset 2s var(--ease); stroke-dashoffset: 0; }
.chart-card.is-in .linechart path.area { opacity: 1; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-soft); }
/* bar chart */
.barchart { display: flex; align-items: flex-end; gap: 12px; height: 130px; margin-top: 18px; }
.barchart .bar { flex: 1; background: linear-gradient(to top, var(--navy-700), var(--silver-300)); border-radius: 2px 2px 0 0; height: 0; transition: height 1.2s var(--ease); }
.barchart .bar:nth-child(2) { transition-delay: 0.1s; }
.barchart .bar:nth-child(3) { transition-delay: 0.2s; }
.barchart .bar:nth-child(4) { transition-delay: 0.3s; }
.barchart .bar:nth-child(5) { transition-delay: 0.4s; }

/* =================================================================
   Business cards (Home)
   ================================================================= */
.biz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.biz-card { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 380px; display: flex; align-items: flex-end; color: var(--white); box-shadow: var(--shadow-sm); }
.biz-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); z-index: 0; }
.biz-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,22,51,0.94) 8%, rgba(7,22,51,0.35) 60%, rgba(7,22,51,0.1)); z-index: 1; }
.biz-card:hover img { transform: none; }
.biz-card__body { position: relative; z-index: 2; padding: 38px; width: 100%; }
.biz-card__num { font-family: var(--ff-serif); font-style: italic; color: var(--gold-400); font-size: 0.95rem; letter-spacing: 0.1em; }
.biz-card h3 { font-family: var(--ff-mincho); font-size: 1.7rem; margin-block: 6px 4px; }
.biz-card .en { font-family: var(--ff-serif); font-style: italic; color: rgba(255,255,255,0.78); }
/* レイアウトを動かさないフェードアップ表示(max-height のリフローを廃し opacity+transform のみ)。
   clip-path で初期は折り畳み、hover で開く。height は確保せず合成のみで開閉する。 */
.biz-card p { font-size: 0.9rem; color: rgba(255,255,255,0.78); margin-top: 14px; opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), clip-path 0.6s var(--ease); }
.biz-card:hover p { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
.biz-card__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--gold-300); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }

/* =================================================================
   Page hero (sub pages)
   ================================================================= */
/* White-dominant sub-page hero: white field, navy text, gold accents,
   header sits dark on it so it gets .is-solid in markup. */
.page-hero { position: relative; padding-top: calc(var(--header-h) + 10px); padding-bottom: clamp(24px, 3vw, 40px); background: var(--white); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); }
/* ヒーロー直後のセクションは上余白を詰め、本文を早く見せる */
body.theme-inst .page-hero + .section { padding-top: clamp(36px, 5vw, 64px); }
/* 記事系（イベント等）のヒーロー見出しは文章が長いので控えめサイズに */
.page-hero--article h1 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.45; }
/* 出欠登録セクションは余白を詰める（直前セクションの下余白も縮めて継ぎ目を詰める） */
body.theme-inst .section--rsvp { padding-top: clamp(8px, 1.5vw, 18px); padding-bottom: clamp(44px, 6vw, 80px); }
body.theme-inst .section:has(+ .section--rsvp) { padding-bottom: clamp(14px, 2.2vw, 26px); }
.section--rsvp .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
.page-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--header-h); background: var(--silver-100); }
.page-hero::after { display: none; }
.page-hero__deco { display: none; }
.page-hero h1 { font-family: var(--ff-mincho); font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: 0.05em; position: relative; color: var(--navy-900); }
.page-hero .lead { color: var(--ink-soft); }
.page-hero .en { font-family: var(--ff-serif); font-style: italic; color: var(--gold-600, #b08e1e); letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.breadcrumb { display: flex; gap: 10px; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 22px; }
.breadcrumb a:hover { color: var(--gold-600, #a8841c); }

/* =================================================================
   Our Business detail
   ================================================================= */
.biz-row { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.biz-row--rev { grid-template-columns: 0.8fr 1fr; }
.biz-row--rev .biz-row__media { order: -1; }
.biz-row__media img { border-radius: var(--radius); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
.biz-row__num { font-family: var(--ff-serif); font-style: italic; font-size: 4rem; color: var(--gold-300); line-height: 1; }
.feature-list { display: grid; gap: 14px; margin-top: 24px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 0.95rem; }
.feature-list li::before { content: "✦"; color: var(--gold-500); flex: none; margin-top: 2px; }

.program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.program { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); position: relative; overflow: hidden; }
.program::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-500); transform: scaleY(0); transform-origin: top; transition: transform 0.45s var(--ease); }
.program:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.program:hover::before { transform: scaleY(1); }
.program__icon { width: 48px; height: 48px; color: var(--gold-500); margin-bottom: 18px; }
.program h4 { font-family: var(--ff-mincho); font-size: 1.25rem; }
.program .en { color: var(--gold-600, #b08e1e); font-family: var(--ff-serif); font-style: italic; font-size: 0.9rem; }
.program p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 10px; }

/* ---- ABOUT / WHO WE ARE (リファレンス風: 左見出し＋多段組み＋事業ホイール) ---- */
.about-head { position: relative; padding-left: 22px; margin-bottom: clamp(28px, 4vw, 48px); }
.about-head::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--gold-500); }
.about-head__title { font-family: var(--ff-mincho); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: 0.08em; color: var(--navy-900); line-height: 1.3; }
.about-head__title .en { display: block; font-family: var(--ff-serif); font-style: italic; font-size: 0.42em; letter-spacing: 0.16em; color: var(--gold-600); margin-top: 0.5em; }

/* 3列の対訳(日本語＋対応する英語)を、左上→右下へ読ませる段差レイアウト */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.about-col { padding: 0; }
.about-col:nth-child(2) { margin-top: clamp(28px, 4vw, 48px); }
.about-col:nth-child(3) { margin-top: clamp(56px, 8vw, 96px); }
.about-col .jp { color: var(--ink); font-size: 1.02rem; line-height: 2; letter-spacing: 0.02em; line-break: strict; }
.about-col .en { color: var(--ink-soft); font-family: var(--ff-serif); font-size: 1.14rem; line-height: 1.75; margin-top: 1.25em; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; column-gap: 0; }
  .about-col, .about-col:nth-child(2), .about-col:nth-child(3) { margin-top: 0; }
  .about-col + .about-col { border-top: 1px solid var(--gold-hair); padding-top: clamp(24px, 5vw, 36px); margin-top: clamp(24px, 5vw, 36px); }
}

/* ベン図(2円の重なり＝シナジー)。viewBoxを内容に合わせて余白を詰め済み(640×448) */
.synergy-fig { position: relative; aspect-ratio: 640 / 448; }
.synergy-fig__art { width: 100%; height: 100%; display: block; }
.synergy-fig__emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 13%; height: auto; }
/* デスクトップ: 中央列のEN段落にフロート、円に重なる文字を回り込ませる */
.synergy-fig--float { float: left; width: 510px; margin: 4px 0 12px -512px; shape-outside: ellipse(159px 50% at 335px 50%); shape-margin: 16px; }
.about-col .en--cont { margin-top: 0; }
.synergy-fig--mobile { display: none; }
@media (max-width: 1300px) {
  /* スマホ/タブレット: フロート版(margin-left:-512pxで左へ大きくブリード)は
     ~1280px未満だと左端で見切れるため隠し、セクション末尾の中央表示版に切替 */
  .synergy-fig--float { display: none; }
  .about-col .en--cont { margin-top: 1.25em; }
  .synergy-fig--mobile { display: block; width: 100%; max-width: 400px; margin: clamp(32px, 6vw, 56px) auto 0; }
}

/* 「私たちについて」だけ出現を“フェードのみ(上品)”に上書き
   ― 上昇/左右スライド/ズームを止め、ゆっくり淡く現す */
#who [data-reveal],
#who [data-reveal="left"],
#who [data-reveal="right"],
#who [data-reveal="zoom"] {
  transform: none !important;
  transition: opacity 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}

.about-figure { display: flex; justify-content: center; margin-top: clamp(48px, 7vw, 96px); }
.about-medal { position: relative; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1 / 1; }
.about-medal__art { width: 100%; height: 100%; display: block; }
.about-medal__emblem { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 19%; height: auto; }

/* ---- MEDIA DUO (登壇・受講などの2枚組ビジュアル) ---- */
.media-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(28px, 4vw, 44px); }
.media-duo__item { position: relative; margin: 0; }
.media-duo__item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.media-duo__item::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--gold-hair); border-radius: var(--radius); z-index: -1; }
.media-duo__item figcaption { margin-top: 12px; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink-soft); }
@media (max-width: 700px) { .media-duo { grid-template-columns: 1fr; } }

/* =================================================================
   Blog
   ================================================================= */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: clamp(36px, 5vw, 64px); align-items: start; }
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { padding: 8px 18px; border: 1px solid var(--line); border-radius: 100px; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-soft); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.chip:hover { border-color: var(--gold-500); color: var(--navy-800); }
.chip.is-active { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }

/* ---- お知らせ(News) コーポレート型リスト ---- */
.news-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px, 3vw, 34px); }
.news-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; border-top: 1px solid var(--line); }
.news-row { border-bottom: 1px solid var(--line); }
.news-row__link { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: clamp(16px, 2.1vw, 24px) 8px; text-decoration: none; color: var(--ink); transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.news-row__link:hover { background: var(--silver-100); }
.news-row__date { flex: 0 0 auto; width: 92px; font-family: var(--ff-serif); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--gold-on-silver, #7a5e0e); }
.news-row__cat { flex: 0 0 auto; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--navy-700); border: 1px solid var(--gold-hair); border-radius: 2px; padding: 3px 10px; white-space: nowrap; }
.news-row__title { flex: 1 1 auto; font-family: var(--ff-mincho); font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.5; color: var(--navy-900); }
.news-row__link:hover .news-row__title { color: var(--gold-600); }
.news-row__thumb { flex: 0 0 auto; width: 88px; height: 58px; overflow: hidden; border-radius: var(--radius); }
.news-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .news-row__link { flex-wrap: wrap; gap: 6px 12px; padding: 15px 4px; }
  .news-row__title { flex-basis: 100%; order: 3; }
  .news-row__thumb { display: none; }
}

/* ---- お知らせ 記事詳細(読み物レイアウト / WP the_content 想定) ---- */
.article-wrap { max-width: 920px; margin-inline: auto; }
.article-head { margin-bottom: clamp(22px, 3vw, 36px); }
.article-meta { display: flex; align-items: center; gap: 14px; margin: 16px 0 12px; }
.article-meta time { font-family: var(--ff-serif); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--gold-on-silver, #7a5e0e); }
.article-title { font-family: var(--ff-mincho); font-weight: 600; font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.5; letter-spacing: 0.03em; color: var(--navy-900); }
.article-hero { margin: clamp(20px, 3vw, 34px) 0; }
.article-hero img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.article-body { font-size: 1rem; line-height: 2.05; color: var(--ink-soft); }
.article-body .lead { font-size: 1.06rem; color: var(--navy-800); line-height: 1.95; margin-bottom: 1.6em; }
.article-body h2 { font-family: var(--ff-mincho); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--navy-900); letter-spacing: 0.03em; line-height: 1.5; margin: 2em 0 0.7em; padding-left: 14px; border-left: 3px solid var(--gold-500); }
.article-body h3 { font-family: var(--ff-mincho); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--navy-800); margin: 1.7em 0 0.5em; }
.article-body p { margin: 0 0 1.5em; }
.article-body ul, .article-body ol { margin: 0 0 1.6em 1.3em; }
.article-body li { margin-bottom: 0.55em; }
.article-body blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold-hair); font-family: var(--ff-mincho); font-style: italic; color: var(--navy-800); }
.article-body figure { margin: 1.9em 0; }
.article-body figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.article-body figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
.article-body a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; }
.article-foot { margin-top: clamp(32px, 5vw, 56px); }
.article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); padding-top: clamp(20px, 3vw, 28px); }
.prevnext { display: flex; flex-direction: column; gap: 4px; text-decoration: none; max-width: 46%; }
.prevnext--next { text-align: right; margin-left: auto; }
.prevnext__label { font-family: var(--ff-serif); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--gold-on-silver, #7a5e0e); }
.prevnext__title { font-family: var(--ff-mincho); font-size: 0.95rem; color: var(--navy-900); transition: color 0.3s var(--ease); }
.prevnext:hover .prevnext__title { color: var(--gold-600); }
@media (max-width: 560px) { .article-nav { flex-direction: column; } .prevnext, .prevnext--next { max-width: 100%; text-align: left; margin-left: 0; } }

.post-list { display: grid; gap: 22px; }
.post-card { display: grid; grid-template-columns: 240px 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__thumb { overflow: hidden; aspect-ratio: 4/3; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.post-card:hover .post-card__thumb img { transform: none; }
.post-card__body { padding: 26px 30px; display: flex; flex-direction: column; }
.post-meta { display: flex; gap: 14px; align-items: center; font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.06em; }
.post-cat { color: var(--gold-600, #a8841c); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.post-card h3 { font-family: var(--ff-mincho); font-size: 1.25rem; margin-block: 10px 8px; transition: color 0.3s var(--ease); }
.post-card:hover h3 { color: var(--gold-600, #a8841c); }
.post-card p { font-size: 0.88rem; color: var(--ink-soft); }
.post-card__more { margin-top: auto; padding-top: 14px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-700); display: inline-flex; gap: 8px; }

.sidebar { display: grid; gap: 34px; position: sticky; top: calc(var(--header-h) + 20px); }
.widget h4 { font-family: var(--ff-mincho); font-size: 1.05rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; position: relative; }
.widget h4::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--gold-500); }
.search-box { display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.search-box input { flex: 1; border: none; padding: 12px 14px; background: var(--white); }
/* 入力自体の outline は消すが、ラッパーにフォーカスリングを出して可視性を担保 */
.search-box input:focus { outline: none; }
.search-box:focus-within { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,0.14); }
.search-box button { background: var(--navy-800); color: var(--white); padding-inline: 16px; }
/* padding-left のレイアウト移動を transform: translateX に置換(レイアウト非干渉) */
.cat-list li a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.cat-list li a:hover { color: var(--gold-600, #a8841c); transform: translateX(8px); }
.cat-list .count { color: var(--ink-soft); font-size: 0.78rem; }
.recent li a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; align-items: center; }
.recent img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.recent .t { font-size: 0.82rem; line-height: 1.5; }
.recent .d { font-size: 0.7rem; color: var(--ink-soft); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; font-size: 0.85rem; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.pagination a:hover, .pagination a.is-active { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }

/* =================================================================
   Contact
   ================================================================= */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 70px); align-items: start; }
.info-card { background: var(--silver-100); color: var(--ink); border-radius: var(--radius); padding: 40px; }
.info-card h3 { font-family: var(--ff-mincho); font-size: 1.4rem; }
.info-card .en { font-family: var(--ff-serif); font-style: italic; color: var(--gold-on-silver); }
.info-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--silver-300); }
.info-item:last-of-type { border-bottom: none; }
.info-item .ic { width: 22px; color: var(--navy-700); flex: none; margin-top: 3px; }
.info-item .lbl { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
.info-item .val { font-size: 0.95rem; margin: 0; }
.map { margin-top: 24px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--silver-300); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.05); }

.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.field { margin-bottom: 22px; position: relative; }
.field label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--navy-700); font-weight: 600; margin-bottom: 8px; }
.field label .req { color: var(--gold-600, #b0892a); margin-left: 4px; font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  line-height: 1.5; height: auto; /* Astra が select 等に当てる大きめ line-height/height でテキストが見切れるのを防ぐ */
  background: var(--silver-50); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }
.radio-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.radio-tile { position: relative; }
.radio-tile input { position: absolute; opacity: 0; }
.radio-tile label { display: block; text-align: center; padding: 16px 10px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); margin: 0; font-weight: 500; }
.radio-tile input:checked + label { border-color: var(--navy-700); background: var(--silver-100); color: var(--navy-800); box-shadow: 0 0 0 1px var(--navy-700); }
/* キーボードフォーカスの可視化(input は opacity:0 で隠れるため隣接 label に出す / WCAG 2.4.7) */
.radio-tile input:focus-visible + label { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.form-success { display: none; text-align: center; padding: 30px; background: var(--silver-100); border: 1px solid var(--silver-300); border-radius: var(--radius); color: var(--navy-800); margin-bottom: 22px; }
.form-success.show { display: block; animation: pop 0.5s var(--ease); }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* =================================================================
   Members-only
   ================================================================= */
/* White-dominant login: white field with a single navy color-area panel
   on one side (echoes the SPLIT-BLOCK language). */
.login-wrap { min-height: 100svh; display: grid; grid-template-columns: 0.62fr 1.38fr; align-items: stretch; background: var(--white); position: relative; overflow: hidden; }
/* institutional theme keeps the navy color-area panel even thinner */
body.theme-inst .login-wrap { grid-template-columns: 0.55fr 1.45fr; }
.login-aside { position: relative; background: var(--silver-sheen); color: var(--ink); display: grid; align-content: center; gap: 18px; padding: clamp(40px, 6vw, 90px); overflow: hidden; }
.login-aside::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%, rgba(7,22,51,0.05), transparent 55%); }
.login-aside .deco-sq { right: 8%; bottom: 10%; }
.login-aside__title { font-family: var(--ff-mincho); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.05em; position: relative; color: var(--navy-900); }
.login-aside__title .en { display: block; font-family: var(--ff-serif); font-style: italic; color: var(--gold-on-silver); font-size: 0.5em; margin-top: 0.4em; }
.login-aside p { color: var(--ink-soft); font-size: 0.92rem; position: relative; max-width: 38ch; }
/* ログイン画面：非会員向け「会員になるには」案内（Pα-8） */
.login-aside__note { margin-top: 16px; font-size: 0.86rem; color: var(--ink-soft); position: relative; max-width: 38ch; }
.login-aside__note a { color: var(--navy-800); border-bottom: 1px solid var(--gold-500); padding-bottom: 1px; white-space: nowrap; transition: color 0.3s var(--ease); }
.login-aside__note a:hover { color: var(--gold-600); }
.login-main { display: grid; place-items: center; padding: calc(var(--header-h) + 40px) var(--gut) 60px; position: relative; }
.login-card { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(34px, 5vw, 54px); position: relative; border-top: 3px solid var(--gold-500); }
/* 文面が長い再設定系カードは横幅を広げ、折り返しによる縦長化を抑える */
.login-card--wide { max-width: 580px; }
.login-card--wide .form-success { text-align: left; }
/* 完了メッセージ表示後は、その後ろの入力欄・ボタンを隠す（変更後も入力画面が残らないように） */
.login-card .form-success.show ~ .field,
.login-card .form-success.show ~ button,
.login-card .form-success.show ~ .forgot { display: none; }
.login-card .logo-row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; }
.login-card h1 { font-family: var(--ff-mincho); font-size: 1.6rem; text-align: center; }
.login-card .sub { text-align: center; color: var(--ink-soft); font-size: 0.84rem; margin-top: 4px; }
.login-card .forgot { display: block; text-align: center; margin-top: 18px; font-size: 0.82rem; color: var(--navy-700); }
.login-card .forgot:hover { color: var(--gold-600, #a8841c); }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* Member dashboard */
.member-news { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.news-item { display: grid; grid-template-columns: 104px 1fr; gap: 22px; padding: 18px 24px; align-items: center; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); }
/* アイキャッチ未設定：ダミー画像を出さず本文のみ（サムネ列を詰める） */
.news-item--no-thumb { grid-template-columns: 1fr; }
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--paper); }
.news-item__thumb { width: 104px; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background: var(--silver-100); }
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-item__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.news-item .date { font-family: var(--ff-serif); color: var(--ink-soft); font-size: 0.88rem; }
.news-item .tag { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; text-align: center; background: var(--silver-100); color: var(--navy-800); border: 1px solid var(--silver-300); }
/* お知らせ一覧では EVENT も NEWS と同じ薄いシルバー表示に統一（is-event の濃紺上書きは無効化） */
.news-item .title { font-size: 0.98rem; line-height: 1.5; }
a.news-item { color: inherit; text-decoration: none; }
a.news-item .title { transition: color 0.3s var(--ease); }
a.news-item:hover .title { color: var(--gold-600); }
/* 一覧の仕上げ：左アクセント・サムネズーム・右シェブロン */
.news-item { position: relative; padding-right: 50px; }
.news-item::after { content: "\2192"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; line-height: 1; color: var(--gold-600); transition: transform 0.35s var(--ease), color 0.3s var(--ease); }
a.news-item:hover { box-shadow: inset 3px 0 0 var(--gold-500); }
a.news-item:hover::after { transform: translate(5px, -50%); color: var(--gold-500); }
.news-item__thumb img { transition: transform 0.55s var(--ease); }
a.news-item:hover .news-item__thumb img { transform: scale(1.06); }
/* お知らせのフィルタ・もっと見る・記事メタ */
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(18px, 2.5vw, 28px); }
.news-more { text-align: center; margin-top: clamp(22px, 3vw, 36px); }
/* 注目のトピック：セクションの上下余白を詰める */
/* 注目トピックの上下余白を揃える（page-hero+section / theme-inst section の上書きに勝つよう
   詳細度を .section.section--topic に上げ、上側の余白 clamp(36,5vw,64) に統一） */
body.theme-inst .section.section--topic { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
/* 注目トピック：0件メッセージ ＆ 複数選択時の横スクロール（1件のときは従来どおり全幅） */
.topic-empty { text-align: center; color: var(--ink-soft); padding: 12px 0 4px; }
.topic-cards--scroll { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.topic-cards--scroll .topic-card { flex: 0 0 100%; scroll-snap-align: center; }
/* 注目のトピックカード：ネイビー＋画像で目立たせる */
.topic-card { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--navy-900); color: #fff; }
/* アイキャッチ未設定：ダミー画像を出さず本文のみ（1カラム） */
.topic-card--no-media { grid-template-columns: 1fr; }
.topic-card__media { position: relative; display: block; min-height: 280px; overflow: hidden; }
.topic-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.topic-card:hover .topic-card__media img { transform: scale(1.05); }
.topic-card__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.topic-card__label { display: flex; align-items: center; gap: 14px; }
.topic-card__label .tag { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; background: var(--gold-500); color: var(--navy-900); border: 1px solid var(--gold-500); }
.topic-card__label .date { font-family: var(--ff-serif); color: rgba(255,255,255,0.82); font-size: 0.95rem; letter-spacing: 0.04em; }
.topic-card__title { font-family: var(--ff-mincho); font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.5; }
.topic-card__title a { color: #fff; transition: color 0.3s var(--ease); }
.topic-card__title a:hover { color: var(--gold-300); }
.topic-card__meta { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.topic-card .btn { align-self: flex-start; margin-top: 8px; }
/* ネイビーカード上ではホバー色をゴールドにして背景との同化を防ぐ */
.topic-card .btn--silver::after { background: var(--gold-500); }
.topic-card .btn--silver:hover { color: var(--navy-900); border-color: var(--gold-500); }
@media (max-width: 760px) {
  .topic-card { grid-template-columns: 1fr; }
  .topic-card__media { min-height: 200px; }
}
.article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.article-meta .date { font-family: var(--ff-serif); color: var(--ink-soft); font-size: 0.92rem; }
.article-meta .tag { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; background: var(--silver-100); color: var(--navy-800); border: 1px solid var(--silver-300); }
.article-meta .tag.is-event { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }

.event-grid { display: grid; grid-template-columns: 1fr 0.7fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
/* イベント詳細：本文＋開催概要の2カラム */
.event-detail-layout { display: grid; grid-template-columns: 1fr 0.7fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .event-detail-layout { grid-template-columns: 1fr; } }
/* イベント告知画像：切り抜かず本来の比率で表示（横長／縦長／チラシどれでも可。幅で制御し中央配置） */
.event-figure { margin: 0 auto clamp(26px, 4vw, 44px); max-width: 720px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--silver-50); }
.event-figure img { width: 100%; height: auto; display: block; }
.event-side { background: var(--silver-sheen); color: var(--ink); border-radius: var(--radius); padding: 34px; }
.event-side h4 { font-family: var(--ff-mincho); color: var(--navy-900); font-size: 1.1rem; margin-bottom: 16px; }
.event-side .event-detail { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--silver-300); font-size: 0.88rem; }
/* 複数日程は 1日程＝1行で表示（途中で不自然に折り返さない） */
.event-detail .dt-line { display: block; }
.event-detail .dt-line + .dt-line { margin-top: 4px; }
.event-side .event-detail b { color: var(--navy-900); min-width: 64px; }

/* イベント一覧（各イベントから出欠登録） */
.event-list { display: grid; gap: 14px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.event-card { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 32px); background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold-500); border-radius: var(--radius); padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px); transition: box-shadow 0.3s var(--ease); }
.event-card:hover { box-shadow: var(--shadow-md); }
.event-card__date { font-family: var(--ff-serif); color: var(--gold-on-silver); font-size: 0.92rem; letter-spacing: 0.04em; }
.event-card__date .dow { font-size: 0.85em; margin: 0 2px; }
.event-card__title { font-family: var(--ff-mincho); color: var(--navy-900); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.5; margin: 6px 0; }
.event-card__meta { font-size: 0.85rem; color: var(--ink-soft); }
.event-card__btn { flex: none; white-space: nowrap; }
.event-rsvp { max-width: 680px; margin-inline: auto; }
.event-rsvp input[readonly] { background: var(--silver-50); color: var(--navy-900); cursor: default; }
.event-rsvp input[readonly].is-set { background: var(--white); font-weight: 600; border-color: var(--gold-500); }
/* 「登録するイベント」表示欄: input だと長いイベント名が1行で見切れるため、折り返せる表示ボックスにする */
.event-rsvp .rsvp-event__name { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--silver-50); color: var(--navy-900); line-height: 1.6; }
.event-rsvp .rsvp-event__name.is-set { background: var(--white); font-weight: 600; border-color: var(--gold-500); }
@media (max-width: 720px) {
  .event-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .event-card__btn { width: 100%; justify-content: center; }
}

/* =================================================================
   Footer
   ================================================================= */
/* sticky footer: 記事なし等でコンテンツが短くても footer を最下部へ */
body.theme-inst { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer { background: var(--silver-100); color: var(--ink-soft); padding-top: 80px; margin-top: auto; }
/* フッターの内容幅を本文より少し狭める */
.site-footer .wrap { max-width: 1040px; }
.footer-top { display: grid; grid-template-columns: auto 1fr; gap: 40px 64px; align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--silver-300); }
/* Business列: 見出しは上段・全幅、リンクは横並び */
.footer-col--business { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; row-gap: 4px; }
.footer-col--business h5 { flex: 0 0 100%; margin-bottom: 10px; }
.footer-col--business a { display: inline-block; }
.footer-brand .brand__name { color: var(--navy-900); }
.footer-brand p { font-size: 0.85rem; margin-top: 18px; max-width: 32ch; }
.footer-col h5 { color: var(--navy-900); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
/* padding-left のレイアウト移動を transform: translateX に置換(レイアウト非干渉) */
.footer-col a { display: block; font-size: 0.88rem; padding: 6px 0; transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.footer-col a:hover { color: var(--navy-900); transform: translateX(6px); }
.footer-news input { width: 100%; padding: 13px 15px; background: var(--white); border: 1px solid var(--silver-300); border-radius: 2px; color: var(--ink); margin-bottom: 12px; }
.footer-news input::placeholder { color: var(--silver-500); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-block: 28px; font-size: 0.78rem; }
.footer-bottom .social { display: flex; gap: 14px; }
.footer-bottom .social a { width: 38px; height: 38px; border: 1px solid var(--silver-300); border-radius: 50%; display: grid; place-items: center; transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); }
.footer-bottom .social a:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

/* back to top */
.to-top { position: fixed; right: 26px; bottom: 26px; width: 50px; height: 50px; border-radius: 50%; background: var(--navy-800); color: var(--white); display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.4s var(--ease); z-index: 90; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--navy-900); transform: translateY(-4px); }

/* =================================================================
   EDITORIAL-BLEED COMPONENTS  (white-dominant redesign)
   ----------------------------------------------------------------
   .split        : 2-col grid; one cell is a viewport-edge bleed image,
                   the other a solid navy panel. Image offsets vertically
                   to create a step / overlap against the panel.
   .split--rev   : swaps image/panel sides (alternate rhythm).
   .bleed        : the image cell that runs to the viewport edge.
   .panel        : solid navy color-area panel with eyebrow/serif/btn.
   .fixed-band   : full-width fixed-attachment photo band w/ white margins.
   .deco-sq      : thin gold/navy outlined square accent overlay.
   ================================================================= */

/* ---- SPLIT-BLOCK ---- */
.split-wrap { background: var(--white); }
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  /* stretch so the image cell fills section height while the panel sits
     vertically offset inside it — that contrast is what makes the step read */
  align-items: stretch;
  gap: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  /* Distance from the split content-box edge to the viewport edge:
     half the leftover viewport width + the split's own padding gutter.
     Wrap-based (min(100vw, --maxw)) instead of the old (100vw - 100%)/2,
     which referenced the content box and over-pulled by one gutter — that
     clipped the --rev image right edge and risked horizontal scroll. */
  --edge: calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gut));
}
/* image bleeds to the LEFT viewport edge */
.split .bleed { margin-left: calc(var(--edge) * -1); }
.split--rev { grid-template-columns: 0.95fr 1.05fr; }
.split--rev .bleed { order: 2; margin-left: 0; margin-right: calc(var(--edge) * -1); }
.split--rev .panel { order: 1; }

.bleed {
  position: relative;
  align-self: stretch;
  /* Image runs taller than the panel's offset content so its top & bottom
     edges show beyond the panel — that's the vertical step / overlap. */
  min-height: clamp(360px, 46vw, 620px);
  overflow: hidden; /* keep image inside, no horizontal scroll */
}
.bleed img {
  width: 100%; height: 100%;
  min-height: clamp(360px, 46vw, 620px);
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.split:hover .bleed img { transform: none; }

/* navy color-area panel; offset vertically & horizontally to create the
   step / overlap against the full-height bleed image */
.panel {
  background: var(--silver-sheen);
  color: var(--ink);
  padding: clamp(34px, 4.5vw, 68px);
  position: relative;
  z-index: 2;
  /* vertical breathing room so the taller image shows top & bottom */
  margin-block: clamp(40px, 6vw, 90px);
  /* push the panel down relative to the image so the step is clearly visible */
  transform: translateY(clamp(28px, 4vw, 56px));
  box-shadow: var(--shadow-md);
  border-top: 1px solid var(--gold-hair); /* thin gold accent rule along the panel top */
  /* サイト全体でパネルの箱サイズを統一(共通の最小高さ＋内容を中央寄せ) */
  min-height: clamp(300px, 34vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split .panel { margin-left: clamp(-72px, -6vw, -36px); } /* overlap onto image */
.split--rev .panel { margin-left: 0; margin-right: clamp(-72px, -6vw, -36px); }
.panel .eyebrow { color: var(--gold-on-silver); }
.panel .eyebrow::before, .panel .eyebrow--center::after { background: var(--gold-600); }
.panel__title {
  font-family: var(--ff-mincho); font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.32;
  letter-spacing: 0.04em; margin-block: 18px 6px;
  color: var(--navy-900);
}
.panel__title .en {
  display: block; font-family: var(--ff-serif); font-style: italic;
  font-size: 0.5em; letter-spacing: 0.12em; color: var(--gold-on-silver);
  margin-top: 0.35em; font-weight: 500;
}
.panel p { color: var(--ink-soft); font-size: 0.98rem; margin-top: 12px; }
.panel .btn { margin-top: 28px; }
/* Established stat badge inside navy panel — separated from body copy by a gold rule */
.panel__stat {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--gold-hair); /* gold separator */
}
.panel__stat b {
  font-family: var(--ff-serif); font-size: 2.1rem; line-height: 1;
  color: var(--navy-900); font-weight: 600;
}
.panel__stat span {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- FIXED-BAND ---- */
.fixed-band {
  position: relative;
  min-height: clamp(360px, 52vh, 560px);
  display: grid; place-items: center;
  margin-block: clamp(40px, 8vw, 110px); /* pure white breathing space above/below */
  color: var(--white);
  background-color: var(--navy-900);
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
  /* 背景固定でコンテンツだけがスクロールする演出。
     iOS/タッチ端末では fixed が不安定なため、後段の @media / @supports で scroll にフォールバック。 */
  background-attachment: fixed;
  overflow: hidden;
}
.fixed-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(7,22,51,0.5), rgba(7,22,51,0.6));
}
.fixed-band__inner { position: relative; z-index: 2; text-align: center; padding-inline: var(--gut); max-width: 1100px; margin-inline: auto; }
.fixed-band__mark { display: block; width: 56px; height: 56px; margin-inline: auto; margin-bottom: 18px; }
/* ロゴ画像をマークに使う場合（文字入りのため少し大きめ・縦横比維持） */
img.fixed-band__mark { width: auto; height: clamp(84px, 11vw, 128px); }
/* ログインカードのロゴ画像 */
.login-mark { display: block; width: clamp(120px, 60%, 160px); height: auto; }
.fixed-band__title {
  font-family: var(--ff-mincho); font-weight: 600;
  /* Astra親テーマが h2 に直接ダーク色を指定するため、継承ではなく明示的に白を指定 */
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.06em; line-height: 1.4;
}
.fixed-band__title .en {
  display: block; font-family: var(--ff-serif); font-style: italic;
  font-size: 0.46em; color: var(--gold-300); letter-spacing: 0.12em; margin-top: 0.5em;
}

/* ---- DECORATIVE SQUARES ---- */
.deco-sq { position: absolute; border: 1px solid var(--gold-500); pointer-events: none; z-index: 1; }
.deco-sq--navy { border-color: var(--navy-700); }
.deco-sq--lg { width: clamp(90px, 12vw, 170px); aspect-ratio: 1; }
.deco-sq--sm { width: clamp(48px, 6vw, 84px); aspect-ratio: 1; }
.bleed .deco-sq { z-index: 3; }

/* ---- SECTION HEADING (centered, reusable) ---- */
.sec-head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: clamp(28px, 4vw, 48px); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1024px) {
  .who, .founder, .biz-row, .biz-row--rev, .contact-grid, .event-grid { grid-template-columns: 1fr; }
  .biz-row--rev .biz-row__media { order: 0; }
  .founder { gap: 36px; }
  .founder__photo { max-width: 280px; }
  .blog-layout { grid-template-columns: 1fr; }
  .login-wrap { grid-template-columns: 1fr; align-content: start; }
  /* theme-inst の 2カラム上書き(body.theme-inst .login-wrap)より詳細度を合わせて、SP/タブレットで確実に1カラム化する */
  body.theme-inst .login-wrap { grid-template-columns: 1fr; }
  /* パネルを上・カードを下に積む。固定ヘッダーはパネル上に重なるため、ヘッダー分の余白はパネル側に付ける */
  .login-aside { min-height: auto; padding-block: clamp(22px, 5vw, 38px); padding-top: calc(var(--header-h) + clamp(12px, 4vw, 22px)); order: 1; }
  /* カード側は上のヘッダー避け余白が不要。パネルとの隙間を詰めて1画面に収める */
  .login-main { order: 2; padding: clamp(20px, 5vw, 34px) var(--gut) clamp(26px, 7vw, 46px); }
  .sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }

  /* SPLIT-BLOCK -> single column, image full-bleed on top, panel below */
  .split, .split--rev { grid-template-columns: 1fr; }
  .split .bleed, .split--rev .bleed {
    order: -1; margin: 0 calc(var(--edge) * -1); /* both edges, wrap-based */
    min-height: clamp(240px, 56vw, 380px);
  }
  .split .panel, .split--rev .panel {
    /* drop the desktop downward translate; pull up into the image instead */
    transform: none;
    margin: clamp(-44px, -9vw, -26px) var(--gut) 0; /* slight upward overlap */
  }
}
@media (max-width: 768px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto auto; width: min(82vw, 360px);
    /* is-solid ヘッダーの backdrop-filter が fixed の含みブロックになり、
       inset:bottom:0 だと nav 高さがヘッダー高さに潰れる。ビューポート単位の
       高さ(dvh)は含みブロックに依存せず常に全画面高になるのでこれで固定する。 */
    height: 100vh; height: 100svh; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: safe center;
    gap: 6px; background: var(--silver-sheen); padding: 80px 32px 40px;
    transform: translateX(100%); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    box-shadow: none; /* 閉状態は影なし（画面外パネルの左向き影が右端に薄暗く映るのを防ぐ）。開いた時だけ影を出す */
    /* 横向き/低背画面でメニュー項目がビューポートを超えても、上詰め(safe center)＋
       内部スクロールで全項目に到達でき、Contact等が見切れないようにする */
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.nav-open .nav { transform: none; box-shadow: -20px 0 60px rgba(28,42,72,0.18); }
  .nav a { font-size: 1.05rem; padding: 14px 8px; border-bottom: 1px solid var(--silver-300); }
  .nav a::after { display: none; }
  .nav__cta { text-align: center; margin: 16px 0 0; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); z-index: 99; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .stats, .biz-grid, .program-grid, .radio-group, .field-row { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; }
  .post-card__thumb { aspect-ratio: 16/9; }
  .news-item { grid-template-columns: 76px 1fr; gap: 14px; padding: 14px 16px; }
  .news-item__thumb { width: 76px; }
  .sidebar { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .who__media .badge { left: 0; }

  /* FIXED-BAND fallback: scroll instead of fixed on small screens */
  .fixed-band { background-attachment: scroll; margin-block: clamp(28px, 10vw, 56px); }
  /* keep the upward overlap step (don't let margin-inline-only wipe margin-top) */
  .split .panel, .split--rev .panel {
    transform: none;
    margin: clamp(-44px, -9vw, -26px) var(--gut) 0;
  }
}
/* スマホ縦: 会員ログイン(パネル＋カード)を1画面に収めるための圧縮 */
@media (max-width: 560px) {
  .login-aside { gap: 8px; padding-top: calc(var(--header-h) + 6px); padding-bottom: 14px; }
  .login-aside__title { font-size: 1.5rem; }
  .login-aside__title .en { margin-top: 0.2em; }
  .login-aside p { font-size: 0.85rem; line-height: 1.65; }
  .login-main { padding-top: 12px; padding-bottom: 16px; }
  .login-card { padding: 22px 22px 20px; }
  .login-card .logo-row { margin-bottom: 12px; gap: 6px; }
  .login-mark { width: 84px; }
  .login-card h1 { font-size: 1.35rem; }
  .login-card .sub { margin-top: 2px; line-height: 1.7; }
  .login-card .field { margin-bottom: 14px; }
  .login-card .forgot { margin-top: 12px; }
}
/* 低背かつ狭幅(小型スマホ縦=iPhone SE等)ではさらに圧縮し、フォーム全体を1画面に収める */
@media (max-width: 560px) and (max-height: 720px) {
  .login-aside { padding-top: calc(var(--header-h) + 2px); padding-bottom: 10px; gap: 6px; }
  .login-aside p { line-height: 1.55; }
  .login-main { padding-top: 8px; padding-bottom: 12px; }
  .login-card { padding: 16px 20px 16px; }
  .login-card .logo-row { margin-bottom: 8px; }
  .login-mark { width: 72px; }
  .login-card h1 { font-size: 1.25rem; }
  .login-card .field { margin-bottom: 10px; }
}
/* iOS / reduced-motion fallback for the fixed band (background-attachment:fixed
   is unreliable on iOS and conflicts with reduced-motion preferences) */
@media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse), (any-pointer: coarse) {
  .fixed-band { background-attachment: scroll; }
}
@supports (-webkit-touch-callout: none) { .fixed-band { background-attachment: scroll; } }

/* =================================================================
   LENS cinematic-fixed — extra helpers
   ================================================================= */
/* Fixed-band: supporting copy + thin gold inner frame accent */
.fixed-band__text { color: rgba(255,255,255,0.85); margin-top: 16px; font-size: 0.98rem; max-width: 56ch; margin-inline: auto; }
/* fixed-band 上の Contact CTA 要素（暗い背景に合わせて配色） */
.fixed-band .eyebrow { color: rgba(255,255,255,0.92); margin-bottom: 14px; }
.fixed-band .eyebrow::before, .fixed-band .eyebrow::after { background: var(--gold-500); }
.fixed-band .btn { margin-top: 30px; }
/* CTAバンドの見出し・説明文は1行で固定（英文サブと狭い画面では折り返し許可） */
.fixed-band--cta .fixed-band__title { white-space: nowrap; }
.fixed-band--cta .fixed-band__title .en { white-space: normal; }
.fixed-band--cta .fixed-band__text { white-space: nowrap; max-width: none; }
@media (max-width: 720px) {
  .fixed-band--cta .fixed-band__title,
  .fixed-band--cta .fixed-band__text { white-space: normal; }
}
.fixed-band__frame { position: absolute; inset: clamp(20px, 4vw, 48px); z-index: 1; border: 1px solid var(--gold-hair); pointer-events: none; }

/* White-led sub-page hero (replaces the full navy slab so white stays the protagonist) */
.page-hero--white { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero--white::before { background-image: radial-gradient(circle at 85% 15%, rgba(201,162,39,0.10), transparent 50%); }
.page-hero--white h1 { color: var(--ink); }
.page-hero--white .en { color: var(--gold-600, #a8841c); }
.page-hero--white .breadcrumb { color: var(--ink-soft); }
.page-hero--white .breadcrumb a:hover { color: var(--gold-600, #a8841c); }
.page-hero--white .lead { color: var(--ink-soft) !important; }
.page-hero--white .page-hero__deco { opacity: 0.08; }

/* Solid-rectangle gold button variant (sharp corners for the panel CTA) */
.btn--rect { border-radius: 0; padding: 12px 26px; font-size: 0.78rem; letter-spacing: 0.16em; }

/* Force the page background pure-white where white must dominate */
.bg-white { background: var(--white); }

/* =================================================================
   LENS  —  institutional-minimal
   ----------------------------------------------------------------
   opt-in via <body class="theme-inst">.
   方針: 白98% / 余白最大 / 細いゴールド罫中心 / ブリード控えめ /
         ネイビーパネルは小さめ。最も端正で機関投資家的。
   既存の .split/.bleed/.panel/.fixed-band/.deco-sq を壊さず上書きする。
   ================================================================= */
body.theme-inst { background: var(--white); }
/* 白を主役に。paper2 帯も近白へ寄せ、色面の主張を抑える */
body.theme-inst .section--paper2 { background: var(--silver-50); }
/* 余白最大: セクション天地リズムを大きく取る */
body.theme-inst .section { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(52px, 7vw, 96px); }

/* --- 細いゴールド罫を主アクセントに --- */
.hairline { border: 0; height: 1px; background: var(--gold-500); width: 72px; margin: 0; }
.hairline--center { margin-inline: auto; }
.hairline--full { width: 100%; background: var(--line); }
body.theme-inst .sec-head .hairline { margin-top: 22px; }

/* --- SPLIT: ブリード控えめ / パネル小さめ / オフセットは端正だが視認可能に --- */
/* 画像高を抑えて端正に（cinematic より低め。ただしパネルの縦オフセットより
   十分高く取り、上下の段差がはっきり見えるようにする） */
body.theme-inst .bleed,
body.theme-inst .bleed img { min-height: clamp(300px, 34vw, 440px); }
/* 段差/オーバーラップは静かだが最低32px以上は食い込ませる */
body.theme-inst .panel { margin-block: clamp(40px, 6vw, 90px); padding: clamp(30px, 3.8vw, 56px); }
/* 縦オフセット(transform)は基底 .panel から継承して段差を可視化する */
body.theme-inst .split .panel { margin-left: clamp(-64px, -4.5vw, -32px); }
body.theme-inst .split--rev .panel { margin-right: clamp(-64px, -4.5vw, -32px); }
/* パネル内テキストを抑制（小さめ・静か） */
body.theme-inst .panel__title { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
body.theme-inst .panel p { font-size: 0.9rem; color: var(--ink-soft); }
/* 列比: 画像をやや大きく、パネルは小さめに（institutional） */
body.theme-inst .split { grid-template-columns: minmax(0,1fr) 640px; }
body.theme-inst .split--rev { grid-template-columns: 640px minmax(0,1fr); }

/* --- FIXED-BAND: 低め・抑制的、上下の白余白を最大化 --- */
body.theme-inst .fixed-band { min-height: clamp(300px, 42vh, 460px); margin-block: 0; padding-block: clamp(56px, 8vw, 96px); }
body.theme-inst .fixed-band::before { background: linear-gradient(rgba(7,22,51,0.46), rgba(7,22,51,0.56)); }

/* --- 装飾四角は細罫1本、控えめに --- */
body.theme-inst .deco-sq { border-width: 1px; opacity: 0.85; }

@media (max-width: 1024px) {
  body.theme-inst .split, body.theme-inst .split--rev { grid-template-columns: 1fr; }
  /* Override the desktop theme-inst negative margin-left/right (higher
     specificity than .split .panel) so the stacked panel keeps its gutter
     and a clean upward overlap step instead of a sideways shift. */
  body.theme-inst .split .panel,
  body.theme-inst .split--rev .panel {
    transform: none;
    margin: clamp(-44px, -9vw, -26px) var(--gut) 0;
  }
}
@media (max-width: 768px) {
  body.theme-inst .split .panel,
  body.theme-inst .split--rev .panel {
    transform: none;
    margin: clamp(-44px, -9vw, -26px) var(--gut) 0;
  }
}

/* =================================================================
   オブジェクト画像のスライドイン強調 (split-block の .bleed 画像)
   ----------------------------------------------------------------
   左右からの移動量と時間を大きくし、「横からスライドして出る」印象を強める。
   .bleed 自体には他の transform が無いため安全に上書きできる。
   resting(.is-in) は高詳細度で transform:none に戻す。
   ※ パネルは段差用の translateY を持つため、ここでは触らず画像のみ強調する。
   ※ prefers-reduced-motion 時は既存の !important ルールで無効化される。
   ================================================================= */
.bleed[data-reveal="left"]  { transform: translateX(clamp(-150px, -12vw, -80px)); }
.bleed[data-reveal="right"] { transform: translateX(clamp(80px, 12vw, 150px)); }
.bleed[data-reveal] {
  transition-duration: 1.15s;
  transition-timing-function: cubic-bezier(0.16, 0.84, 0.3, 1);
}
.bleed[data-reveal].is-in { transform: none; }

/* =================================================================
   OBJECT-IMAGE REVEAL  —  "現像(develop) + 呼吸(breathe)"
   ----------------------------------------------------------------
   .bleed の横スライド(L801-807)を clip-path 現像ワイプへ昇華する加算的レイヤ。
   ★必ず style.css の末尾(既存 .bleed[data-reveal] 規則より後)に貼る=後勝ち。
   方針: 移動でなく遮蔽解除。枠(clip)と被写体(img)が別速度で動く二層視差。
         deco-sq はL字に線描き、淡い編集インデックス活字、パネル子のステガー。
   性能: transform/opacity/clip-path/filter のみ。will-change は出現中/可視時限定。
   段差: .panel の base translateY(L566)は .is-in で再宣言して死守(デスクトップ)。
   ================================================================= */

/* ---- 1. 枠の出現(視認性最優先) ----
   ※ 以前の clip-path 現像ワイプは一部環境で初期クリップ(inset 100%)のまま
     開かず、画像が表示されない事象があったため不使用。
     確実な opacity ゲート + 上品な方向スライドで出す(透明度で出すので
     万一 is-in 反映が遅れても "見えない" まま固定されることはない)。 */
.bleed[data-reveal="left"]  { transform: translateX(clamp(-110px, -9vw, -60px)); }
.bleed[data-reveal="right"] { transform: translateX(clamp(60px, 9vw, 110px)); }
.bleed[data-reveal="left"],
.bleed[data-reveal="right"]{
  opacity: 0;
  transition:
    opacity   1.0s  var(--ease-develop),
    transform 1.25s var(--ease-develop);
}
.bleed[data-reveal="left"].is-in,
.bleed[data-reveal="right"].is-in{
  opacity: 1;
  transform: none;
}

/* ---- 2. インナー・ドリフト(枠と被写体の二層視差) ----
   フォーカスプル的なブラー解除は上品さを損なうため廃止。被写体ドリフトは
   scale(1.04)→1 の控えめなズームのみに簡素化する。 */
.bleed[data-reveal="left"] img,
.bleed[data-reveal="right"] img{
  transform: scale(1.04) translateY(1.5%);
  /* 既存 .bleed img{transition:transform 1.2s} を上書きして長尺化 */
  transition:
    transform var(--dur-drift) var(--ease-drift) .12s;  /* 枠より僅か遅れて落ち着く */
}
.bleed[data-reveal="left"].is-in img,
.bleed[data-reveal="right"].is-in img{
  transform: scale(1) translateY(0);
}

/* ---- 3. スクロール微パララックス層(is-in 後 JS が is-parallax を付与) ----
   is-in 後のみ。img を --py(rAF注入)で縦に±2%。scale(1.04) のクロップ余白内に必ず収める。
   既存 .split:hover .bleed img{scale1.04} と衝突しないよう translate+scale を統合上書き。*/
/* resting 規則 .bleed[data-reveal].is-in img (0,3,1) に勝つよう詳細度を上げる(0,4,1)。
   scale は resting(1) と一致させ、is-parallax 付与時のスケール跳ね(1→1.04の瞬間ジャンプ)を防ぐ。 */
.bleed[data-reveal].is-in.is-parallax img{
  transform: translate3d(0, var(--py, 0px), 0) scale(1);
  transition: none;                 /* スクロール追従中は transition を切る */
  will-change: transform;
}
.split:hover .bleed[data-reveal].is-in.is-parallax img{
  transform: translate3d(0, var(--py, 0px), 0) scale(1); /* hover拡大なし */
}

/* ---- 4. ゴールド線の描画(deco-sq をL字に「引く」=額が締まる) ----
   既存の四辺 border を透過し、擬似要素2本(上辺 横線 → 左辺 縦線)で線描き。
   --navy バリアントはネイビー線・原点を反転して角から内へ自然に引く。 */
.bleed[data-reveal] .deco-sq{ border-color: transparent; position: absolute; }
.bleed[data-reveal] .deco-sq::before,
.bleed[data-reveal] .deco-sq::after{
  content:""; position:absolute; background: var(--gold-500);
}
.bleed[data-reveal] .deco-sq--navy::before,
.bleed[data-reveal] .deco-sq--navy::after{ background: var(--navy-700); }
/* 上辺(横線 左→右) */
.bleed[data-reveal] .deco-sq::before{
  top:-1px; left:-1px; right:-1px; height:1px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease-develop) .35s;  /* ワイプの後に走る */
}
/* 左辺(縦線 上→下) */
.bleed[data-reveal] .deco-sq::after{
  top:-1px; left:-1px; bottom:-1px; width:1px;
  transform: scaleY(0); transform-origin: top center;
  transition: transform .9s var(--ease-develop) .5s;
}
.bleed[data-reveal].is-in .deco-sq::before{ transform: scaleX(1); }
.bleed[data-reveal].is-in .deco-sq::after{  transform: scaleY(1); }
/* 右下配置(--navy)は原点反転で角→内へ */
.bleed[data-reveal] .deco-sq--navy::before{ transform-origin: right center; }
.bleed[data-reveal] .deco-sq--navy::after{  transform-origin: center bottom; }

/* ---- 5. 編集的インデックス活字(data-index を ::before で大きく淡く) ----
   白6%で白主役を死守。transform は使わず opacity のみ=段差非干渉。
   pointer-events:none / z-index:0 で本文を阻害しない。data-index 未付与は無害。*/
.panel[data-index]{ position: relative; overflow: hidden; }   /* 数字を枠内にクリップ */
.panel[data-index] > *{ position: relative; z-index: 1; } /* 本文を数字の前面へ */
.panel[data-index]::before{
  content: attr(data-index);
  position: absolute; top: clamp(2px, 0.6vw, 12px); right: clamp(14px, 2vw, 28px);
  font-family: var(--ff-serif); font-style: italic; font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1; letter-spacing: .02em;
  color: rgba(7,22,51,0.07);
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 1.2s var(--ease-develop) .25s;
}
.panel[data-index].is-in::before{ opacity: 1; }
/* --rev は数字を左肩へ */
.split--rev .panel[data-index]::before{ right:auto; left: clamp(12px, 2vw, 28px); }

/* ---- 6. パネル本体 reveal(段差 translateY を死守する) ----
   panel の base transform: translateY(clamp(28px,4vw,56px)) (L566) を維持しつつ
   clip-path + opacity のみで出す。汎用 [data-reveal].is-in{transform:none}(L129)
   が段差を消すため、.is-in で translateY を「再宣言」して後勝ちさせる。
   ★モバイル(<=1024px)は既存が transform:none + margin overlap のため触らない。 */
@media (min-width: 1025px){
  .split .panel[data-reveal],
  .split--rev .panel[data-reveal]{
    transform: translateY(clamp(28px, 4vw, 56px)); /* base 段差を明示再宣言 */
    opacity: 0;
    transition: opacity .9s var(--ease-develop) .18s;
  }
  /* resting: translateY を !important で死守し段差温存。opacity のみ解除 */
  .split .panel[data-reveal].is-in,
  .split--rev .panel[data-reveal].is-in{
    transform: translateY(clamp(28px, 4vw, 56px)) !important;
    opacity: 1;
  }

  /* ---- 7. パネル子要素のステガー(CSS純粋・JS非依存) ----
     パネル自身は触らず直下子(eyebrow/title/p/p/stat/btn)のみ縦に持ち上げ。*/
  .split .panel[data-reveal] > *,
  .split--rev .panel[data-reveal] > *{
    opacity: 0; transform: translateY(16px);
    transition: opacity .8s var(--ease-drift), transform .8s var(--ease-drift);
  }
  .split .panel[data-reveal].is-in > *,
  .split--rev .panel[data-reveal].is-in > *{ opacity: 1; transform: none; }
  .split .panel[data-reveal].is-in > *:nth-child(1),
  .split--rev .panel[data-reveal].is-in > *:nth-child(1){ transition-delay: .10s; }
  .split .panel[data-reveal].is-in > *:nth-child(2),
  .split--rev .panel[data-reveal].is-in > *:nth-child(2){ transition-delay: .18s; }
  .split .panel[data-reveal].is-in > *:nth-child(3),
  .split--rev .panel[data-reveal].is-in > *:nth-child(3){ transition-delay: .26s; }
  .split .panel[data-reveal].is-in > *:nth-child(4),
  .split--rev .panel[data-reveal].is-in > *:nth-child(4){ transition-delay: .34s; }
  .split .panel[data-reveal].is-in > *:nth-child(5),
  .split--rev .panel[data-reveal].is-in > *:nth-child(5){ transition-delay: .42s; }
  .split .panel[data-reveal].is-in > *:nth-child(n+6),
  .split--rev .panel[data-reveal].is-in > *:nth-child(n+6){ transition-delay: .50s; }
}

/* =================================================================
   ACCESSIBILITY  —  reduced-motion で全新演出を無効化
   既存 [data-reveal]{...!important}(L136-138) を補完。clip/filter/parallax/stagger を停止。
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  .bleed[data-reveal="left"], .bleed[data-reveal="right"],
  .bleed[data-reveal="left"].is-in, .bleed[data-reveal="right"].is-in,
  .bleed[data-reveal] img, .bleed[data-reveal].is-in img,
  .bleed[data-reveal].is-in.is-parallax img{
    clip-path: none !important; transform: none !important;
    filter: none !important; opacity: 1 !important; transition: none !important;
    will-change: auto !important;
  }
  /* deco-sq: 線描画を止め元の四辺 border を復活 */
  .bleed[data-reveal] .deco-sq{ border-color: var(--gold-500) !important; }
  .bleed[data-reveal] .deco-sq--navy{ border-color: var(--navy-700) !important; }
  .bleed[data-reveal] .deco-sq::before,
  .bleed[data-reveal] .deco-sq::after{ display: none !important; }
  /* index 数字: 即表示 */
  .panel[data-index]::before{ opacity: 1 !important; transition: none !important; }
  /* パネル本体: 段差 translateY は基底 L566 が担保。ここでは clip/opacity のみ解除 */
  .split .panel[data-reveal], .split--rev .panel[data-reveal],
  .split .panel[data-reveal].is-in, .split--rev .panel[data-reveal].is-in{
    clip-path: none !important; opacity: 1 !important; transition: none !important;
  }
  /* ステガー子要素: 即表示 */
  .split .panel[data-reveal] > *, .split--rev .panel[data-reveal] > *,
  .split .panel[data-reveal].is-in > *, .split--rev .panel[data-reveal].is-in > *{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  /* ヒーロー見出しのワード・スライドイン: 瞬時表示(data-reveal を持たないため別途ガード) */
  .reveal-line > span, .hero.is-ready .reveal-line > span{
    transform: none !important; transition: none !important;
  }
  /* 無限ループ装飾(スクロールライン / ティッカー)を停止(WCAG 2.2.2 / 前庭安全) */
  .hero__scroll .line::after{ animation: none !important; }
  /* チャート: 線描画/面フェード/棒伸長を即時最終状態にし動きを止める */
  .chart-card .linechart path.line{ transition: none !important; stroke-dashoffset: 0 !important; }
  .chart-card .linechart path.area{ transition: none !important; opacity: 1 !important; }
  .barchart .bar{ transition: none !important; }
}

/* =================================================================
   LONG-FORM DOCUMENT CONTENT (client copy)
   prose / bilingual / principle list / program details / books
   ================================================================= */
.content-media { position: relative; margin: 0 0 clamp(24px,3.5vw,40px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/6; }
.content-media img { width:100%; height:100%; object-fit:cover; display:block; }
.content-media .deco-sq { z-index: 3; }

.bilingual { max-width: 940px; margin-inline: auto; }
.lang-tag { display:flex; align-items:center; gap:14px; margin: clamp(20px,3vw,32px) 0 18px; font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase; color: var(--gold-on-silver); font-weight:600; }
.lang-tag::before { content:""; width:28px; height:1px; background: var(--gold-500); flex:none; }
.lang-tag::after { content:""; flex:1; height:1px; background: var(--silver-300); }

.prose > p { color: var(--ink); font-size: 1.02rem; line-height: 2.0; margin-bottom: 1.3em; }
.prose > p:last-child { margin-bottom: 0; }
.prose--en > p { font-family: var(--ff-serif); font-size: 1.14rem; line-height: 1.85; color: var(--ink-soft); letter-spacing: 0.005em; }

.principle-list { list-style:none; display:grid; gap:16px; margin: 6px 0 1.4em; padding: clamp(22px,3vw,32px); background: var(--silver-50); border:1px solid var(--silver-200); border-left:3px solid var(--gold-500); border-radius: var(--radius); }
.principle { display:flex; gap:16px; align-items:flex-start; }
.principle .num { font-family: var(--ff-serif); font-style:italic; font-size:1.7rem; line-height:1; color: var(--gold-on-silver); flex:none; min-width:1.4em; }
.principle .txt { color: var(--navy-900); font-weight:500; font-size:1.02rem; line-height:1.7; }

/* Program details (philanthropy) */
.prog-list { display:grid; gap:20px; max-width:940px; margin-inline:auto; }
.prog { background: var(--white); border:1px solid var(--silver-200); border-radius: var(--radius); padding: clamp(24px,3vw,34px); position:relative; overflow:hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.prog::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--gold-500); }
.prog:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.prog__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--silver-200); }
.prog__head h4 { font-family: var(--ff-mincho); font-size:1.28rem; color: var(--navy-900); }
.prog__head .en { font-family: var(--ff-serif); font-style:italic; color: var(--gold-on-silver); font-size:0.98rem; }
.prog__rows { display:grid; gap:10px; margin:0; }
.prog__row { display:grid; grid-template-columns: 178px 1fr; gap:16px; font-size:0.95rem; line-height:1.75; margin:0; }
.prog__row dt { color: var(--gold-on-silver); font-weight:600; letter-spacing:0.04em; white-space:nowrap; }
/* 基礎講座カードの案内文（入会はお問い合わせフォームへ） */
.prog__note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--silver-200); font-size: 0.9rem; line-height: 1.75; color: var(--ink-soft); }
.prog__note a { color: var(--navy-800); border-bottom: 1px solid var(--gold-500); padding-bottom: 1px; transition: color .3s var(--ease); }
.prog__note a:hover { color: var(--gold-600); }
.prog__row dd { color: var(--ink); margin:0; }
.prog__row a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.prog__row a:hover { color: var(--gold-600); }

/* Books */
/* 業績グラフを全幅・大きく */
.founder-perf { margin-top: clamp(44px, 6vw, 80px); }
.stats--lg { margin-top: 0; gap: clamp(24px, 3vw, 40px); }
.stats--lg .chart-card { padding: clamp(28px, 3.5vw, 46px); }
.stats--lg h4 { font-size: 0.85rem; }
.stats--lg .big { font-size: clamp(2.8rem, 5vw, 4.4rem); }
.stats--lg .desc { font-size: 0.92rem; }
.stats--lg .linechart { height: clamp(150px, 17vw, 220px); }

/* 著書: プロフィールの下に縦で・大きく */
.books { margin-top: clamp(56px, 8vw, 100px); }
.book-list { display: grid; gap: 22px; max-width: 880px; margin-inline: auto; }
.book-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 30px; }
.book2 { display:grid; grid-template-columns: 160px 1fr; gap:36px; align-items:center; background: var(--silver-50); border:1px solid var(--silver-200); border-radius:var(--radius); padding: clamp(24px,3vw,36px); perspective: 1200px; }
.book2__cover { display:block; }
/* 書影は斜め置き、ホバーで正面（表紙クリックでAmazonへ） */
.book2 img {
  display:block; width:160px; height:auto; border-radius:2px;
  box-shadow: -10px 14px 28px rgba(7,22,51,0.20);
  transform: rotateY(-16deg);
  transform-origin: center;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.book2:hover img {
  transform: rotateY(0deg) translateY(-3px);
  box-shadow: 0 22px 44px rgba(7,22,51,0.22);
}
@media (prefers-reduced-motion: reduce){
  .book2 img { transform: none !important; transition: none !important; }
}
.book2 h4 { font-family: var(--ff-mincho); font-size:1.18rem; line-height:1.65; color: var(--navy-900); }
.book2 .meta { font-size:0.9rem; color: var(--ink-soft); margin:10px 0 18px; }
.book2 .btn, .book2__btn { padding:11px 24px; font-size:0.8rem; white-space: nowrap; }

@media (max-width: 760px){
  .prog__row { grid-template-columns: 1fr; gap:2px; }
  .book-grid { grid-template-columns: 1fr; }
  .book2 { grid-template-columns: 128px 1fr; gap:22px; }
  .book2 img { width:128px; }
  /* 情報カラムが内容の min-content で膨らんでグリッドがはみ出す(右見切れ)のを防ぐ */
  .book2__info { min-width: 0; }
  /* Amazonボタン等の nowrap を解除して折り返し可能に */
  .book2 .btn, .book2__btn { white-space: normal; }
  .content-media { aspect-ratio: 16/9; }
}
@media (max-width: 560px){
  /* スマホ縦: 表紙を上・情報を下に縦積みして情報側の横幅を確保 */
  .book2 { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
  .book2 img { width: 132px; }
}

/* 事業セクションのオブジェクト型: 短い導入パネルを縦中央に配置 */
.panel--intro { display: flex; flex-direction: column; justify-content: center; }
/* 創立者写真の装飾枠(旧ゴールドの額装)は非表示にする */
.founder__photo .frame { display: none; }

/* 写真上の装飾フレーム（四角い枠）は邪魔なので非表示 */
.deco-sq { display: none !important; }
.fixed-band__frame { display: none !important; }

/* =================================================================
   事業カード(パネル)を3Dで少し傾け、カーソルで正面を向く（書影と同様）
   デスクトップのみ／reduced-motion時は無効。段差 translateY と rotateY を合成し、
   is-in でも傾きを維持。:hover で rotateY(0)=正面へ。
   ================================================================= */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference){
  .split, .split--rev { perspective: 1800px; }
  .split .panel[data-reveal],
  .split .panel[data-reveal].is-in {
    transform: translateY(clamp(28px,4vw,56px)) rotateY(-11deg) !important;
    transform-origin: center;
    transition: opacity .9s var(--ease-develop) .18s, transform .7s var(--ease), box-shadow .5s var(--ease) !important;
  }
  .split--rev .panel[data-reveal],
  .split--rev .panel[data-reveal].is-in {
    transform: translateY(clamp(28px,4vw,56px)) rotateY(11deg) !important;
  }
  .split .panel[data-reveal].is-in:hover,
  .split--rev .panel[data-reveal].is-in:hover {
    transform: translateY(clamp(28px,4vw,56px)) rotateY(0deg) !important;
    box-shadow: var(--shadow-md);
  }
}

/* 事業カードのインデックス番号(01/02)は非表示（不要のため） */
.panel[data-index]::before { display: none !important; }

/* =========================================================
   投資グラフ刷新（おしゃれ＆分かりやすく）
   見出し横のバッジ／目盛りグリッド線／非スケーリングの鮮明な線
   ========================================================= */
.chart-card__head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chart-card__head h4 { margin:0; }
.chart-card__badge {
  font-family: var(--ff-mincho); font-size:0.82rem; font-weight:600; letter-spacing:0.04em;
  color: var(--gold-on-silver); background: var(--gold-100);
  border:1px solid var(--gold-hair); border-radius:999px; padding:5px 14px; white-space:nowrap;
}
.chart-card .big { margin-top:8px; }
.chart-card .big small { margin-left:2px; }
.linechart .grid line { stroke: var(--silver-200); stroke-width:1; stroke-dasharray:2 5; vector-effect: non-scaling-stroke; }
.linechart .grid line.base { stroke: var(--silver-300); stroke-dasharray:none; }
.linechart path.line { vector-effect: non-scaling-stroke; stroke-width: 2.4; }
.chart-axis { margin-top:8px; }

/* =================================================================
   Astra親テーマ上書きの打ち消し
   ----------------------------------------------------------------
   Astra は h1..h6 に直接ダーク色(--ast-global-color-2)を指定するため、
   本来「継承」で色が決まる完成デザインの見出し（fixed-band や navy
   パネル上で白になるべき見出し 等）がダークに沈んでしまう。
   ブラウザ既定と同じく「継承」に戻すことで、スタンドアロン時と同じ
   見た目を復元する（デザイン側が明示指定した色はそのまま優先される）。
   ================================================================= */
h1, h2, h3, h4, h5, h6 { color: inherit; }

/* =================================================================
   P2-4 パスワード再設定（WP-Members [wpmem_form password] の意匠化）
   ----------------------------------------------------------------
   WP-Members の素の出力（#wpmem_login > form.form > fieldset >
   label / .div_text > input / .button_div > input.buttons、および
   .wpmem_msg メッセージ）を、ログイン画面の .field / .btn--dark 意匠に
   合わせる。スコープは .wpmem-card（page-password-reset.php のカード）に
   限定し、他所の WP-Members 出力には影響させない。
   ================================================================= */
.wpmem-card #wpmem_login { margin: 4px 0 0; padding: 0; width: auto; background: none; border: 0; }
.wpmem-card form.form { margin: 0; padding: 0; background: none; border: 0; }
.wpmem-card form.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; background: none; }
/* 見出しは logo-row（h1 / .sub）で用意済みのため、フォーム内 legend は隠す */
.wpmem-card form.form legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wpmem-card form.form label {
  display: block; font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--navy-700); font-weight: 600; margin-bottom: 8px;
}
.wpmem-card form.form .div_text { margin-bottom: 22px; }
.wpmem-card form.form input[type="text"],
.wpmem-card form.form input[type="password"],
.wpmem-card form.form input[type="email"] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  line-height: 1.5; height: auto; background: var(--silver-50);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.wpmem-card form.form input[type="text"]:focus,
.wpmem-card form.form input[type="password"]:focus,
.wpmem-card form.form input[type="email"]:focus {
  outline: none; border-color: var(--gold-500); background: var(--white);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.14);
}
/* 送信ボタン（.btn--dark 相当。input 要素のため ::after は使わず色遷移で近似） */
.wpmem-card form.form .button_div { margin-top: 6px; }
.wpmem-card form.form input.buttons,
.wpmem-card form.form input[type="submit"] {
  width: 100%; display: block; cursor: pointer;
  padding: 15px 34px; font-weight: 600; font-size: 0.86rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--navy-800); color: var(--white);
  border: 0; border-radius: 2px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.wpmem-card form.form input.buttons:hover,
.wpmem-card form.form input[type="submit"]:hover {
  background: var(--silver-sheen); color: var(--navy-900); box-shadow: var(--shadow-md);
}
/* メッセージ（送信完了・エラー）。.form-success の質感に寄せる */
.wpmem-card .wpmem_msg {
  text-align: left; padding: 20px 24px; margin-bottom: 22px;
  background: var(--silver-100); border: 1px solid var(--silver-300);
  border-radius: var(--radius); color: var(--navy-800); font-size: 0.9rem; line-height: 1.7;
}
.wpmem-card .wpmem_msg a { color: var(--navy-700); text-decoration: underline; }
.wpmem-card .wpmem_msg a:hover { color: var(--gold-600, #a8841c); }

/* =================================================================
   P2-5 （会員限定）イベント：受付終了表示 ＋ 出欠フォーム（Formidable意匠化）
   ----------------------------------------------------------------
   ・.rsvp-closed はプロト event-single-closed.html のインライン定義を移設。
   ・出欠フォームは Formidable の素出力（.frm_*）を、他ページの
     .field / .radio-tile / .btn--dark 意匠に寄せる。スコープは
     .event-rsvp__form（single-event.php のフォーム枠）に限定。
   ================================================================= */
.rsvp-closed { max-width: 560px; margin-inline: auto; text-align: center; background: var(--white); border: 1px solid var(--silver-200); border-top: 3px solid var(--gold-500); border-radius: var(--radius); padding: clamp(36px,5vw,60px) clamp(24px,4vw,48px); box-shadow: var(--shadow-md); }
.rsvp-closed__ic { width: 46px; height: 46px; color: var(--gold-600); margin-bottom: 14px; }
.rsvp-closed h3 { font-family: var(--ff-mincho); font-size: 1.3rem; color: var(--navy-900); margin-bottom: 14px; }
.rsvp-closed p { color: var(--ink-soft); font-size: .92rem; line-height: 1.9; margin-bottom: 26px; }
.rsvp-closed .btn { margin-inline: auto; }

.event-rsvp__form { max-width: 560px; margin-inline: auto; background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--gold-500); box-shadow: var(--shadow-md); padding: clamp(30px,4vw,48px); }
.event-rsvp__form .frm_form_field { margin-bottom: 22px; }
.event-rsvp__form .frm_primary_label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--navy-700); font-weight: 600; margin-bottom: 8px; padding: 0; }
.event-rsvp__form .frm_required { color: var(--gold-600, #b0892a); }
.event-rsvp__form input[type="text"],
.event-rsvp__form input[type="email"] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  line-height: 1.5; height: auto; background: var(--silver-50);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.event-rsvp__form input[type="text"]:focus,
.event-rsvp__form input[type="email"]:focus {
  outline: none; border-color: var(--gold-500); background: var(--white); box-shadow: 0 0 0 3px rgba(201,162,39,0.14);
}
/* 出欠のラジオ＝プロトの radio-tile 風（3タイル・チェックで濃紺枠） */
.event-rsvp__form .frm_opt_container { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
@media (max-width: 480px) { .event-rsvp__form .frm_opt_container { grid-template-columns: 1fr; } }
.event-rsvp__form .frm_radio { margin: 0; }
.event-rsvp__form .frm_radio > label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px 8px; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
  font-weight: 500; margin: 0; white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* ラジオの丸は視覚的に隠す（フロー外＝テキストが中央に来る／幅を奪って折り返さない）。
   :has(input:checked/focus-visible) で選択・フォーカス状態は拾うので機能は維持。 */
.event-rsvp__form .frm_radio input { position: absolute !important; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.event-rsvp__form .frm_radio:has(input:checked) > label { border-color: var(--navy-700); background: var(--silver-100); color: var(--navy-800); box-shadow: 0 0 0 1px var(--navy-700); }
.event-rsvp__form .frm_radio:has(input:focus-visible) > label { outline: 2px solid var(--gold-500); outline-offset: 2px; }
/* 送信ボタン（.btn--dark 相当） */
.event-rsvp__form .frm_submit { margin-top: 8px; }
.event-rsvp__form .frm_button_submit {
  width: 100%; display: block; cursor: pointer;
  padding: 15px 34px; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.14em;
  background: var(--navy-800); color: var(--white); border: 0; border-radius: 2px;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.event-rsvp__form .frm_button_submit:hover { background: var(--silver-sheen); color: var(--navy-900); box-shadow: var(--shadow-md); }
/* エラー／完了メッセージ */
.event-rsvp__form .frm_error { color: #b3261e; font-size: 0.8rem; margin-top: 6px; }
.event-rsvp .frm_message { max-width: 560px; margin: 18px auto 0; padding: 20px 24px; background: var(--silver-100); border: 1px solid var(--silver-300); border-radius: var(--radius); color: var(--navy-800); text-align: center; }

/* =========================================================
   お問い合わせフォーム（page-contact.php / Formidable id=1）
   出欠フォーム（.event-rsvp__form）に準じて意匠化。
   ========================================================= */
.contact-form { max-width: 640px; margin-inline: auto; background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--gold-500); box-shadow: var(--shadow-md); padding: clamp(30px,4vw,48px); }
.contact-form .frm_form_field { margin-bottom: 22px; }
.contact-form .frm_primary_label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--navy-700); font-weight: 600; margin-bottom: 8px; padding: 0; }
.contact-form .frm_required { color: var(--gold-600, #b0892a); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  line-height: 1.5; height: auto; background: var(--silver-50); font-family: inherit; font-size: 0.95rem; color: var(--navy-900);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.contact-form textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none; border-color: var(--gold-500); background: var(--white); box-shadow: 0 0 0 3px rgba(201,162,39,0.14);
}
/* 姓・名の2カラム。FormidableはコンテナをCSS Grid（12カラム）にし、
   「.frm_fields_container > .frm_form_field { grid-column: 1 / span 12 !important }」で
   全項目を強制全幅にしている。この !important に勝つため、frm6 だけ同じ !important で
   span 6（半分）に戻す。入力ボックスは --field-width:100% なのでコンテナ幅に追従する。 */
.contact-form .frm_fields_container > .frm6 { grid-column: span 6 / span 6 !important; }
.contact-form .frm6 input { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) {
  .contact-form .frm_fields_container > .frm6 { grid-column: 1 / span 12 !important; }
}
/* プライバシー同意チェックボックス */
.contact-form .frm_checkbox { font-size: 0.85rem; color: var(--ink-soft); }
.contact-form .frm_checkbox label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.7; cursor: pointer; }
.contact-form .frm_checkbox input { width: auto; margin-top: 5px; flex: 0 0 auto; }
.contact-form .frm_checkbox a { color: var(--navy-700); text-decoration: underline; }
/* 送信ボタン（.btn--dark 相当） */
.contact-form .frm_submit { margin-top: 8px; }
.contact-form .frm_button_submit {
  width: 100%; display: block; cursor: pointer;
  padding: 15px 34px; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.14em;
  background: var(--navy-800); color: var(--white); border: 0; border-radius: 2px;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.contact-form .frm_button_submit:hover { background: var(--silver-sheen); color: var(--navy-900); box-shadow: var(--shadow-md); }
.contact-form .frm_error { color: #b3261e; font-size: 0.8rem; margin-top: 6px; }
/* 送信完了メッセージ（.form-success の質感に寄せる） */
.contact-form .frm_message { text-align: center; padding: 30px; background: var(--silver-100); border: 1px solid var(--silver-300); border-radius: var(--radius); color: var(--navy-800); line-height: 1.9; }
.contact-form .frm_message p { margin: 0; }

/* =================================================================
   スマホ：創立者略歴の写真を小さくし、右へ名前・肩書きを回り込ませる
   （写真の右に「柳下 裕紀 / Yuki Yagishita / Founder & Chief …」）
   ================================================================= */
@media (max-width: 600px) {
  .founder__photo { max-width: none; }
  .founder__photo::after { content: ""; display: block; clear: both; }
  .founder__photo img { float: left; width: 42vw; max-width: 180px; margin: 0 18px 10px 0; }
  .founder__photo .founder__name { margin-top: 2px; font-size: 1.3rem; }
  .founder__photo .founder__role { margin-top: 8px; }
}