/* =========================================================
   開腸瑜伽協会 — TOPページ固有スタイル
   役割: TOP（index相当）の各セクションの構造・content。
         HERO / Intro / Statement(fullsec) / Concept(ladder) / 不腸〜満腸(stages) /
         Who we are(overlaysec) / 4導線(paths) / Certified Studios(fullsec)。
   依存: tokens.css, base.css, layout.css, components.css
   注意: 動く背景(3D造形)・マスクリビール・キーフレームは animation.css、
         SPの max-width @media は responsive.css に分離。
   読み込むのは TOP.html のみ。他ページは読み込まない。
   ========================================================= */

/* ====================================================================
   01 HERO — 全画面・背景動画にロゴ／罫線／コピーを天地左右中央
   ==================================================================== */
.hero { position: relative; height: 100svh; min-height: 580px; overflow: hidden; background: #FAF7F4; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 白ヴェール：イントロで「白→動画フェードイン」を作る。content(z:4)より下、bg(z:0)より上。 */
.hero__veil { position: absolute; inset: 0; z-index: 3; background: #FAF7F4; opacity: 0; pointer-events: none; }
html:not(.hero-intro) .hero__veil { display: none; }
/* 全画面パララックス：背景は parallax.js が transform / 固定背景で制御 */
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease); will-change: transform; }
.hero__img--forest { opacity: 1; }

/* ── HERO 背景ピン留め（position:fixed レイヤー＋clip）：背景は画面に留まり、上をコンテンツが流れる。
   合成された固定要素なので background-attachment:fixed と違い再描画されず＝カクつかない。
   ・breath パン（hero__bg の transform/animation）は固定要素の基準を壊すので、このモードでは強制解除。 */
.hero__bg.ky-herofixed { overflow: visible !important; animation: none !important; transform: none !important; }
.hero__bg.ky-herofixed > img.hero__img {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100svh;
  object-fit: cover; object-position: center; visibility: visible !important;
  opacity: 1; z-index: 0; will-change: transform; backface-visibility: hidden; }

.hero__sheen { position: absolute; inset: -16%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(42% 32% at 36% 26%, rgba(255,250,238,0.55), transparent 70%); }
/* HERO 画像にうっすら紫がかった色みを重ねる（夜明け前の静かなトーン） */
.hero__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background:
    linear-gradient(165deg, rgba(150,120,205,0.55) 0%, rgba(120,98,180,0.30) 48%, rgba(70,58,120,0.40) 100%); }
.hero__tint::after { content: ""; position: absolute; inset: 0; mix-blend-mode: overlay;
  background: linear-gradient(165deg, rgba(140,110,200,0.30) 0%, rgba(96,76,160,0.20) 60%, rgba(60,48,110,0.26) 100%); }
.hero__grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 可読性スクリム：中央のロゴを持ち上げ、周縁は静かに沈める */
.hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(50% 58% at 50% 50%, rgba(247,244,239,0.60), rgba(247,244,239,0) 72%),
    linear-gradient(180deg, rgba(247,244,239,0.12) 0%, rgba(247,244,239,0) 24%, rgba(34,28,24,0.10) 100%); }

/* 中央構成：ロゴ → 罫線 → コピー */
.hero__inner { position: relative; z-index: 4; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero__center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(20px, 3vh, 36px); padding: 8vh 0; }
.hero__logo { display: flex; flex-direction: column; width: auto; height: clamp(200px, 34vh, 320px);
  aspect-ratio: 606 / 3527; --logo-url: url('/assets/img/logo_wh_ver.svg');
  filter: drop-shadow(0 3px 18px rgba(20,16,12,0.42)); }
.hero__logo-ch { flex: 1 1 0; width: 100%; background-image: var(--logo-url);
  background-repeat: no-repeat; background-size: 100% 400%; }
.hero__logo-ch:nth-child(1) { background-position: center top; }
.hero__logo-ch:nth-child(2) { background-position: center 33.333%; }
.hero__logo-ch:nth-child(3) { background-position: center 66.667%; }
.hero__logo-ch:nth-child(4) { background-position: center bottom; }
html[data-hero-tone="bright"] .hero__logo { --logo-url: url('/assets/img/logo_bl_ver.svg'); }
.hero__rule { width: clamp(46px, 5vw, 74px); height: 1px; background: var(--ink); opacity: 0.42; }
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.hero__lead { font-family: var(--font-display); font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  line-height: 1.9; letter-spacing: 0.14em; color: var(--ink); text-wrap: pretty; }
.hero__sub { font-size: var(--fs-small); color: var(--ink-2); letter-spacing: 0.06em; max-width: 30ch; line-height: 1.85; text-wrap: pretty; }

/* HERO トーン：dark＝白ロゴ＋白コピー（ハローなし・可読性は文字影で確保）。bright＝黒ロゴ＋濃いコピー。 */
html[data-hero-tone="dark"] .hero__logo {
  filter: drop-shadow(0 3px 22px rgba(20,16,12,0.5)) drop-shadow(0 1px 9px rgba(20,16,12,0.45)); }
html[data-hero-tone="dark"] .hero__lead { color: var(--on-dark);
  text-shadow: 0 1px 20px rgba(20,16,12,0.55), 0 0 3px rgba(20,16,12,0.4); }
html[data-hero-tone="dark"] .hero__sub { color: var(--on-dark);
  text-shadow: 0 1px 16px rgba(20,16,12,0.5), 0 0 3px rgba(20,16,12,0.4); }
html[data-hero-tone="dark"] .hero__rule { background: var(--on-dark); opacity: 0.5; }
html[data-hero-tone="dark"] .hero__scroll { color: var(--on-dark-2); }
html[data-hero-tone="dark"] .hero__scroll-line { background: linear-gradient(var(--on-dark-2), rgba(255,255,255,0)); }

/* スクロール誘導（線の流れ落ちアニメは animation.css） */
.hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(18px, 3vh, 36px);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 11px;
  font-family: var(--font-latin); font-style: italic; letter-spacing: 0.24em; font-size: 0.78rem; color: var(--ink-2); }
.hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(var(--ink-2), rgba(120,112,104,0)); position: relative; overflow: hidden; }

/* ====================================================================
   02 Intro — 宣言文（背景の3D造形は animation.css）
   ==================================================================== */
.intro { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center;
  background: radial-gradient(130% 96% at 82% 6%, #FDF8F6 0%, #FAF3F1 48%, #F5EEEB 100%); }
.intro__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: clamp(112px,16vw,210px) var(--gutter); }
.intro__head { font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(2.1rem,4.5vw,4.3rem); line-height: 1.72; letter-spacing: 0.17em; }
.intro__head .accent { color: #a33f3e; }
.intro__lead { font-family: var(--font-display); color: var(--ink);
  font-size: clamp(1.3rem,2.3vw,1.95rem); line-height: 1.7; letter-spacing: 0.09em;
  margin-top: clamp(54px,8vw,104px); }
.intro__body { margin-top: clamp(26px,3.4vw,42px); display: flex; flex-direction: column; gap: 0; }
.intro__body p { font-size: var(--fs-body); color: var(--ink-2); line-height: 2.0; letter-spacing: 0.04em; }

/* ====================================================================
   全面50/50スプリット（Statement / Certified Studios 共通）
   片側を写真/動画全面・もう片側をテキスト縦中央。
   ==================================================================== */
.fullsec { height: clamp(560px, 76vh, 880px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; overflow: hidden; }
.fullsec__media { position: relative; overflow: hidden; height: 100%; width: 100%; }
.fullsec__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 全幅メディアの強パララックス用：拡大ヘッドルーム確保（縦移動は parallax.js が付与）。
   .photo img の reveal トランジション(2.2s)を切り、Statement同様スクロールに即追従させる */
.fullsec__media img[data-parallax] { will-change: transform; transform: scale(1.28); transition: none !important; }
/* 固定背景モード（強さ「固定」）：画像を画面に貼り付け、スクロールしても動かさない */
.stmtband__bg.ky-bgfixed, .fullsec__media.ky-bgfixed, .hero__bg.ky-bgfixed {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-attachment: fixed; }
/* will-change:transform / transform を持つ要素は background-attachment:fixed が要素基準に退化して
   画面固定にならないため、固定モード時は解除する（Who we are / Certified Studios 対策） */
.fullsec__media.ky-bgfixed { will-change: auto !important; transform: none !important; }
.ky-bgfixed > img { visibility: hidden; }
/* 動画は parallax のヘッドルーム確保のため拡大（縦移動は parallax.js が translate で付与） */
.fullsec__media video, .photo video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; will-change: transform; transform: scale(1.42); }
.fullsec__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 6vw, 124px); }
.fullsec__body h2 { font-size: var(--fs-display); line-height: 1.5; letter-spacing: 0.04em; }
.fullsec__body p { color: var(--ink-2); margin-top: var(--s-6); line-height: var(--lh-body); }
.fullsec__body .link { margin-top: var(--s-7); }
.sec--ink .fullsec__body p { color: var(--on-dark-2); }
.fullsec--media-left .fullsec__media { order: 0; }
.fullsec--media-left .fullsec__body { order: 1; }

/* ステートメントの型（fullsec / overlaysec 内で使用） */
.stmt h2 { font-size: var(--fs-display); line-height: 1.5; letter-spacing: 0.04em; }
.stmt p { color: var(--ink-2); margin-top: var(--s-6); line-height: var(--lh-body); }
.stmt .link { margin-top: var(--s-7); }
.sec--ink .stmt p { color: var(--on-dark-2); }

/* ====================================================================
   Statement（全面動画バンド）— 動画を横幅いっぱい・テキストは中央に重ね、
   可読性のため薄いペーパーのパネルを敷く。
   ==================================================================== */
.stmtband { position: relative; height: 100vh; min-height: 600px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.stmtband__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.stmtband__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; will-change: transform; transform: scale(1.42); }
.stmtband__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform; transform: scale(1.28); }
/* 全体をごく薄く沈め、パネルのエッジを馴染ませる */
.stmtband__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,28,24,0.16) 0%, rgba(34,28,24,0.04) 40%, rgba(34,28,24,0.18) 100%); }
.stmtband__inner { position: relative; z-index: 2; width: 100%; padding: var(--gutter); display: flex; justify-content: center; }
/* 薄いペーパーの背景パネル（中央・墨文字を読みやすく） */
.stmtband__panel { text-align: center; max-width: 720px;
  padding: clamp(40px, 5.5vw, 80px) clamp(32px, 5vw, 88px);
  background: rgba(247,244,239,0.80); backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius);
  box-shadow: 0 40px 90px -50px rgba(34,28,24,0.5); }
.stmtband__panel .sec-eyebrow { display: block; }
.stmtband__panel h2 { font-size: var(--fs-display); line-height: 1.5; letter-spacing: 0.04em;
  /* 行末約物（、。）の右余白ぶん、視覚的に中央へ寄せる光学補正 */
  transform: translateX(0.26em); }
.stmtband__panel p { color: var(--ink-2); margin-top: var(--s-6); line-height: var(--lh-body); text-wrap: pretty; }
.stmtband__panel .link { margin-top: var(--s-7); }

/* ====================================================================
   Concept — 不腸→快腸→拡腸→満腸の縦の道行き＋使命コピー
   （背景の3D造形・fallback は animation.css）
   ==================================================================== */
.concept { position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 78% 18%, #FFFEFE 0%, #FEFBFC 48%, #FCF7FA 100%); }
.concept__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(96px,14vw,200px) var(--gutter) clamp(110px,15vw,210px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,120px); align-items: center; }

/* 縦の道行き（ladder）：ノード＋罫線を同一中心軸で中央揃え／ラベルは左ツラ揃え */
.ladder { --node-col: clamp(176px,19vw,206px); --accent-rose: #CFA193; display: flex; flex-direction: column; align-items: stretch; }
.rung { display: grid; grid-template-columns: var(--node-col) 1fr; column-gap: clamp(22px,2.6vw,42px); align-items: center; }
/* ブレース行（快腸/拡腸）：ノード（漢字）と本文ラベルを天地中央で揃える */
.rung:has(.rung__node--brace) { align-items: center; }
.rung:has(.rung__node--brace) .rung__label { align-self: center; }
.rung__node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-self: center; flex: none; width: clamp(112px,12vw,150px); height: clamp(112px,12vw,150px); }
.rung__node--circle { border-radius: 50%; }
.rung__node--fucho { background: #ECE3D7; box-shadow: inset 0 0 0 1px rgba(40,34,30,0.05); }
.rung__node--mancho { width: clamp(150px,17vw,212px); height: clamp(150px,17vw,212px);
  background: radial-gradient(70% 70% at 50% 38%, #F6DDD2 0%, #EFCDBF 100%);
  box-shadow: 0 30px 60px -36px rgba(176,118,102,0.55), inset 0 0 0 1px rgba(176,118,102,0.18); }
.rung__kanji { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.16em; font-size: clamp(1.5rem,2.4vw,2.05rem); line-height: 1; }
.rung__node--fucho .rung__kanji { color: var(--ink-3); margin-right: -0.16em; }
.rung__node--mancho .rung__kanji { color: #6E463C; font-size: clamp(1.7rem,2.8vw,2.4rem);
  display: inline-flex; align-items: center; gap: clamp(16px,1.9vw,28px); }
.rung__node--mancho .rung__kanji::before, .rung__node--mancho .rung__kanji::after {
  content: ""; display: inline-block; width: clamp(16px,1.9vw,26px); height: 1px; background: var(--accent-rose); }
.rung__node--mancho .rung__kanji::after { margin-left: -0.16em; }
.rung__kanjiwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.rung__kanjirow { display: inline-flex; align-items: center; justify-content: center; }
.rung__romaji { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px;
  font-family: var(--font-latin); font-style: italic; letter-spacing: 0.22em;
  font-size: 0.72rem; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
/* ⟨ 快腸 / 拡腸 ⟩ ＝括弧つきの非円ノード（水平線＋シェブロンを一本のSVGパスで頂点共有） */
.rung__node--brace { width: auto; min-width: clamp(112px,12vw,150px); height: auto; padding-bottom: 2px; }
.rung__node--brace .rung__kanjirow { display: inline-flex; align-items: center; gap: clamp(9px,1.1vw,15px); }
.rung__node--brace .rung__kanji { color: var(--rose-brown); letter-spacing: 0.16em; padding-left: 0.16em; }
.rung__brkt { flex: none; display: block; width: clamp(28px,3.3vw,38px); height: auto; color: var(--accent-rose); transform: translateY(0.04em); }
.rung__label { justify-self: start; font-family: var(--font-display); font-size: clamp(1rem,1.35vw,1.18rem);
  line-height: 1.95; letter-spacing: 0.06em; color: #8A756D; }
.rung__label .em { color: var(--ink); }
/* ノード間をつなぐ細線（中心軸に合わせる）＋下向きの矢 */
.ladder__link { position: relative; width: 1px; height: clamp(44px,5.4vw,78px); background: var(--line-strong); margin: 16px 0 16px calc(var(--node-col) / 2); }
.ladder__link::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 6px;
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: translate(-50%, 0) rotate(45deg); }

/* 右列：使命・コピー */
.concept__verse { max-width: none; }
.concept__verse-head { font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.4rem, 2.3vw, 2.0rem); line-height: 1.62; letter-spacing: 0.06em;
  margin-bottom: clamp(30px, 3.4vw, 48px); text-wrap: pretty; }
.concept__verse-rule { width: clamp(120px,18vw,220px); height: 1px; background: var(--line-strong); margin-bottom: var(--s-7); }
.concept__verse p { font-family: var(--font-display); font-size: clamp(1.05rem,1.5vw,1.34rem); line-height: 2.15; letter-spacing: 0.08em; color: var(--ink); }
.concept__verse p + p { margin-top: clamp(22px,2.4vw,34px); }
.concept__verse .q { color: var(--rose-brown); }
.concept__verse .wish { color: var(--ink-2); }
.concept__verse-cta { margin-top: clamp(34px, 4vw, 56px); }

/* ====================================================================
   不腸→快腸→拡腸→満腸（四段階カード・ミント地）
   ==================================================================== */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 36px); margin-top: var(--s-9); }
.stage__media { aspect-ratio: 3/4; position: relative; overflow: hidden; box-shadow: var(--shadow-soft); }
.stage__kanji { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: 0.1em; margin-top: var(--s-5); }
.stage__en { font-family: var(--font-latin); font-style: italic; color: var(--ink-3); font-size: var(--fs-small); }
.stage__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-snug); margin-top: var(--s-3); }

/* ====================================================================
   01 Our Work（事業概要）：PCは横幅いっぱいの均等5分割。カード感は出さず、
   薄い罫線・余白・ごく淡い hover の背景変化だけで静かに区切る。
   ==================================================================== */
.work__lead { font-family: var(--font-display); color: var(--ink-2);
  font-size: clamp(1.04rem, 1.55vw, 1.32rem); line-height: 2.0; letter-spacing: 0.06em;
  margin-top: var(--s-6); max-width: 52ch; text-wrap: pretty; }
.works { margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 1.6vw, 28px);
  position: relative; left: 50%; transform: translateX(-50%); width: min(1180px, 92vw); }
.work { position: relative; display: flex; flex-direction: column;
  grid-column: span 2;
  text-decoration: none; color: inherit;
  padding: clamp(20px, 1.8vw, 28px);
  background: color-mix(in oklab, var(--rose-brown) 6%, var(--paper));
  border-radius: 0;
  transition: background-color 0.5s var(--ease); }
.work:hover { background: color-mix(in oklab, var(--rose-brown) 11%, var(--paper)); }
.work:focus-visible { outline: 2px solid var(--rose-brown); outline-offset: 4px; }
.work__media img { transition: filter 0.6s var(--ease), transform 0.9s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .work:hover .work__media img { filter: brightness(1.05); transform: scale(1.03); }
}
.work__media { flex: none; width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: var(--s-5); }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
.work__body { display: flex; flex-direction: column; }
.work__no { font-family: var(--font-latin); font-style: italic; color: var(--ink-3); font-size: 1.05rem; line-height: 1; }
.work__title { font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem); letter-spacing: 0.03em; line-height: 1.5;
  margin-top: var(--s-4); text-wrap: pretty; }
.work__en { font-family: var(--font-latin); font-style: italic; color: var(--rose-brown);
  font-size: var(--fs-small); letter-spacing: 0.04em; margin-top: 2px; }
.work__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-body);
  letter-spacing: 0.02em; margin-top: var(--s-5); text-wrap: pretty; }

/* 04・05：下段は横並び（画像左＋テキスト右）で2枚 */
.work--wide { grid-column: span 3; flex-direction: row; align-items: center;
  gap: clamp(20px, 1.8vw, 32px); }
.work--wide .work__media { flex: 0 0 44%; width: auto; margin-bottom: 0; }
.work--wide .work__body { flex: 1 1 auto; min-width: 0; }

/* ====================================================================
   Who we are — 全面背景＋テキスト重ね（微パララックス）
   背景imgの縦移動は parallax.js、立ち上がる布(__mask)は animation.css
   ==================================================================== */
.overlaysec { position: relative; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: center; }
.overlaysec__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.overlaysec__bg img { position: absolute; left: 0; top: -18%; width: 100%; height: 136%; object-fit: cover; display: block; will-change: transform; }
.overlaysec__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247,244,239,0.84) 0%, rgba(247,244,239,0.52) 30%, rgba(247,244,239,0.08) 58%, rgba(247,244,239,0) 76%),
    linear-gradient(0deg, rgba(34,28,24,0.10) 0%, rgba(34,28,24,0) 26%); }
.overlaysec__inner { position: relative; z-index: 3; width: 100%; }
.overlaysec__body { max-width: 42ch; }
.overlaysec__body h2 { font-size: var(--fs-display); line-height: 1.5; letter-spacing: 0.04em; }
.overlaysec__body p { color: var(--ink-2); margin-top: var(--s-6); max-width: 36ch; line-height: var(--lh-body); }
.overlaysec__body .link { margin-top: var(--s-7); }

/* Who we are（没入スプリット版・任意レイアウト） */
.whoweare { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 82vh; }
.whoweare__media { position: relative; overflow: hidden; }
.whoweare__media img { width: 100%; height: 100%; object-fit: cover; }
.whoweare__body { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(64px,9vw,140px) var(--gutter) clamp(64px,9vw,140px) clamp(40px,6vw,104px); max-width: 720px; }
.whoweare__body .stmt { max-width: none; }

/* ====================================================================
   4導線（カード2×2）
   ==================================================================== */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px) clamp(28px,3vw,56px); margin-top: var(--s-9); }
.path__media { aspect-ratio: 16/10; position: relative; overflow: hidden; box-shadow: var(--shadow-soft); }
.path__head { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-5); }
.path__title { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: 0.04em; }
.path__verb { font-family: var(--font-latin); font-style: italic; color: var(--rose-brown); font-size: var(--fs-small); }
.path__desc { color: var(--ink-2); margin-top: var(--s-4); max-width: 40ch; font-size: var(--fs-small); line-height: var(--lh-snug); }

/* 4導線カードの hover：画像をふわっと明るく（カード自体はリンクではない） */
.path__media img { transition: filter 0.6s var(--ease), transform 0.9s var(--ease) !important; }
.path__title { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .path__media:hover img { filter: brightness(1.06) saturate(1.01); }
}
.path:focus-visible { outline: 2px solid var(--rose-brown); outline-offset: 6px; }

/* Pathways：2つの大きな入口（gates）。面全体がリンク、控えめなCTA行つき */
.gates { grid-template-columns: 1fr 1fr; gap: clamp(30px, 3.4vw, 64px); }
.gates .path__media { aspect-ratio: 16/11; }
.gates .path__title { font-size: var(--fs-h2); }
.gates .path__desc { max-width: 42ch; }
.path__more { margin-top: var(--s-5); }
.gates .path__more .arrow { transition: transform 0.5s var(--ease); }
/* 画像をリンク化：カーソルを指マークに。画像 or CTA のホバーで「詳しく見る」が連動 */
a.path__media { display: block; cursor: pointer; }
.gates .path__media:hover ~ .path__more::after { transform: scaleX(1); transform-origin: left; }
.gates .path__media:hover ~ .path__more .arrow { transform: translateX(5px); }