/* =========================================================================
   私たちについて — MVV「登山」スクロール演出（本番 css/about-mvv2.css の移植）
   本番と同じ canvas 画像シーケンス方式。色は生値のまま（本番と同一の見え方にする）。
   Valueモーダルの見た目は本番 css/about-mvv.css から該当ブロックだけ持ってきた。
   ========================================================================= */
.mvv2 { position: relative; height: 380svh; background: #070a18; }
@media (max-width: 860px) { .mvv2 { height: 360svh; } }
.mvv2__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* 背景: canvas画像シーケンス（150フレーム）。スクロール＝再生位置のワンカット */
.m2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 北極星のグロー（S1で強調） */
.m2-glow {
  position: absolute; left: 49.6%; top: 42%; width: 46vmin; height: 46vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(235, 240, 255, .42) 0%, rgba(190, 205, 255, .18) 30%, rgba(150, 170, 255, 0) 68%);
  pointer-events: none; opacity: 0; will-change: opacity;
  animation: m2GlowPulse 5.2s ease-in-out infinite;
}
@keyframes m2GlowPulse { 0%, 100% { scale: 1 } 50% { scale: 1.08 } }

/* 瞬く星（山に重ねない配置） */
.m2-sky { position: absolute; inset: 0; pointer-events: none; }
.m2-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 1px rgba(220, 230, 255, .85);
  animation: m2Twinkle 3.4s ease-in-out infinite;
}
.m2-star.dim {
  width: 2px; height: 2px; box-shadow: 0 0 5px 1px rgba(210, 220, 255, .5);
  animation: m2TwinkleDim 4.6s ease-in-out infinite;
}
@keyframes m2Twinkle    { 0%, 100% { opacity: .95 } 50% { opacity: .3 } }
@keyframes m2TwinkleDim { 0%, 100% { opacity: .6 }  50% { opacity: .15 } }

/* 山麓の霞（進行度パララックス: --mvvp をJSが更新） */
.m2-mist {
  position: absolute; left: -4%; right: -4%; height: 26%; bottom: -2%;
  background: linear-gradient(to top, rgba(196, 203, 232, .18), rgba(196, 203, 232, 0));
  filter: blur(6px); pointer-events: none;
  transform: translate3d(0, calc(var(--mvvp, 0) * -6%), 0);
  opacity: var(--mistfade, 1);            /* 終盤フェード（下端エッジが境界に残らない） */
}
.m2-mist--far {
  height: 18%; bottom: 10%;
  transform: translate3d(0, calc(var(--mvvp, 0) * -14%), 0);
  opacity: calc(.5 * var(--mistfade, 1));
}

/* 上下の帯: 上下ともダーク靄（T15: 下の白靄を廃止し上境界と同じ扱いに）。
   白セクションへの橋渡しは直後の .m2-close（夜明けグラデ帯）が担う */
.m2-wash { position: absolute; inset: 0; pointer-events: none; }
.m2-wash::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16%;
  background: linear-gradient(to bottom, rgba(7, 10, 24, .95), rgba(7, 10, 24, 0));
}
.m2-wash::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  /* T17: 全編常時表示→終盤のみフェードイン（--washfade をJSが更新）。
     下端の約4svhは完全不透明の夜色＝canvas終端が帯と完全一致 */
  background: linear-gradient(to top,
    rgba(7, 10, 24, 1) 0%, rgba(7, 10, 24, 1) 13%, rgba(7, 10, 24, .85) 40%, rgba(7, 10, 24, 0) 100%);
  opacity: var(--washfade, 0);
}

/* 夜明けの帯: 演出の夜から後続セクションへ無段階に抜ける。
   終端は .page-section と同じ半透明白（サイト背景が透ける）＝白地の切れ目を作らない。
   margin-top:-2px でセクション境界のサブピクセル白線を塞ぐ */
.m2-close {
  height: 64svh;
  margin-top: -2px;
  background: linear-gradient(to bottom,
    #070a18 0%, #10142a 20%, #232948 42%, rgba(106, 113, 156, .9) 64%,
    rgba(199, 205, 230, .82) 84%, rgba(255, 255, 255, .78) 100%);
}
/* スマホは帯を短く。演出の下端（暗い部分）が流れ切ったあとに 64svh（約540px）の帯が続き、
   Value からメンバーまで何も出ない区間が1画面以上あったため */
@media (max-width: 860px) { .m2-close { height: 22svh; } }

/* ── テキストシーン（位置=進行度の写像。JSがtransformを毎フレーム制御） ── */
.m2-scene {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; will-change: transform;
  opacity: 0;   /* T25: エンジン始動前に全シーンが重なって見えないよう初期非表示（JSが毎フレーム上書き） */
}
.m2-scene__inner { max-width: min(92vw, 880px); text-align: center; padding: 0 4vw; }
.m2-scene--left  { justify-content: flex-start; }
.m2-scene--left  .m2-scene__inner { text-align: left; padding-left: 8vw; max-width: min(80vw, 620px); }
.m2-scene--left  .m2-desc { margin-left: 0; }
.m2-scene--right { justify-content: flex-end; }
.m2-scene--right .m2-scene__inner { text-align: right; padding-right: 8vw; max-width: min(80vw, 620px); }
.m2-scene--right .m2-desc { margin-right: 0; }
.m2-scene__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 52% 44% at 50% 50%, rgba(8, 11, 22, .42), rgba(8, 11, 22, 0) 72%);
}
.m2-scene--left  .m2-scene__scrim { background: radial-gradient(ellipse 42% 44% at 26% 50%, rgba(8, 11, 22, .44), rgba(8, 11, 22, 0) 72%); }
.m2-scene--right .m2-scene__scrim { background: radial-gradient(ellipse 42% 44% at 74% 50%, rgba(8, 11, 22, .44), rgba(8, 11, 22, 0) 72%); }
@media (max-width: 860px) {
  .m2-scene--left, .m2-scene--right { justify-content: center; }
  .m2-scene--left .m2-scene__inner, .m2-scene--right .m2-scene__inner { text-align: center; padding: 0 6vw; max-width: 92vw; }
  .m2-scene--left .m2-scene__scrim, .m2-scene--right .m2-scene__scrim {
    background: radial-gradient(ellipse 52% 44% at 50% 50%, rgba(8, 11, 22, .44), rgba(8, 11, 22, 0) 72%);
  }
}

/* T22: 英字ラベル（Philosophy/Vision/Mission/5 years Mission/Value。
   旧セクションの .eyebrow を踏襲＝グラデ文字＋グラデライン） */
.m2-eyebrow {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: clamp(11px, .84vw, 13px); letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
  margin-bottom: 1.1em;
  background: linear-gradient(90deg, #9db1e8, #c9a3d8, #f27ba4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* 明るい山肌上でも読めるように（text-shadowはclip:textで効かないためdrop-shadow） */
  filter: drop-shadow(0 1px 3px rgba(8, 11, 22, .85)) drop-shadow(0 2px 14px rgba(8, 11, 22, .6));
}
.m2-eyebrow::before {
  content: ""; width: clamp(20px, 3vw, 40px); height: 2px;
  background: linear-gradient(90deg, #9db1e8, #f27ba4); opacity: .9;
}
.m2-scene--right .m2-eyebrow { flex-direction: row-reverse; }

/* T22: 日本語キッカーは控えめな白（旧 .kicker 踏襲）＝英字ラベルと役割分担 */
.m2-kicker {
  display: block; font-size: .74rem; letter-spacing: .16em; font-weight: 500;
  color: rgba(255, 255, 255, .72); margin-bottom: 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.m2-statement {
  color: #fff; font-weight: 700; line-height: 1.5; letter-spacing: .06em;
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
  text-shadow: 0 2px 22px rgba(8, 11, 22, .8);
}
/* T20: S1もS2以降と同じ太さ・サイズに統一（フォント表記の統一）。
   1行維持はPCのみ＝狭幅では「〜幸せを、」「創出する。」の2行に自然折返し */
.m2-scene--s1 .m2-statement { white-space: nowrap; }
@media (max-width: 620px) { .m2-scene--s1 .m2-statement { white-space: normal; } }
.m2-scene--s4 .m2-scene__inner { max-width: min(88vw, 760px); }
.m2-scene--s4 .m2-statement { font-size: clamp(1.15rem, 2.9vw, 2.2rem); }
.m2-statement em {
  font-style: normal; display: inline-block; white-space: nowrap;
  background: linear-gradient(90deg, #9db1e8, #c9a3d8, #f27ba4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.m2-statement ruby rt { font-size: .34em; letter-spacing: .3em; color: #f2b8cd; }
.m2-desc {
  color: rgba(255, 255, 255, .82); line-height: 2.1; font-size: clamp(.82rem, 1.6vw, 1rem);
  max-width: min(88vw, 820px); margin: 1.6rem auto 0;
  text-shadow: 0 1px 14px rgba(8, 11, 22, .9);
  text-wrap: pretty;                       /* T17: 中途半端な折返しの抑制 */
  word-break: auto-phrase;                 /* T20: 文節単位の折返し（Chrome系。非対応は従来挙動） */
}
.m2-desc b { color: #fff; }
.nb { white-space: nowrap; }               /* 語句の途中で改行させない */

/* S5 Value（縦並び・クリックで既存モーダル） */
.m2-vals { display: flex; flex-direction: column; align-items: center; gap: clamp(.4rem, 1.6vh, 1rem); }
.m2-vals__head {
  font-size: .74rem; letter-spacing: .16em; font-weight: 500;
  color: rgba(255, 255, 255, .72); margin-bottom: .6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);   /* T22: 英字ラベル(m2-eyebrow)と役割分担し日本語は白 */
}
.mvv2 .mvv-val {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: baseline; gap: 1rem; color: #fff; pointer-events: auto;
  padding: .2rem .6rem; opacity: 1; transform: none; filter: none;
}
.mvv2 .mvv-val__no {
  font-size: .8rem; letter-spacing: .18em;
  background: linear-gradient(90deg, #9db1e8, #c9a3d8, #f27ba4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 3px rgba(8, 11, 22, .85));  /* T20: 明るい山肌上の視認性 */
}
.mvv2 .mvv-val__term {
  font-size: clamp(1.3rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: .18em;
  text-shadow: 0 2px 18px rgba(8, 11, 22, .85);
  border-bottom: 2px solid transparent; transition: border-color .3s;
}
.mvv2 .mvv-val:hover .mvv-val__term { border-image: linear-gradient(90deg, #9db1e8, #c9a3d8, #f27ba4) 1; border-bottom: 2px solid; }
.mvv2 .mvv-val__src { display: none; }

/* スクロールヒント */
.m2-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .75); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
  transition: opacity .6s; animation: m2CueBob 2.2s ease-in-out infinite;
}
@keyframes m2CueBob { 0%, 100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 7px) } }

@media (prefers-reduced-motion: reduce) {
  .m2-star, .m2-glow, .m2-cue { animation: none !important; }
  .m2-scene { transition: opacity .3s; transform: none !important; }
}


/* ── Value モーダル（本番 about-mvv.css より） ── */
.mvv-modal {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--ease, ease), visibility .45s;
}
.mvv-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mvv-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 11, 22, .58);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  backdrop-filter: blur(20px) saturate(1.05);
}
.mvv-modal__content {
  position: relative; z-index: 1;
  width: min(680px, 86vw); text-align: center;
  padding: clamp(16px, 3vw, 30px);
  transform: translateY(14px); transition: transform .45s var(--ease, ease);
}
.mvv-modal.is-open .mvv-modal__content { transform: none; }
.mvv-modal__no {
  font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .2em;
  color: #f27ba4; margin: 0 0 .4em;
}
.mvv-modal__term {
  font-family: var(--font); font-weight: 800; color: #fff;
  font-size: clamp(38px, 6vw, 72px); line-height: 1.05; letter-spacing: .04em; margin: 0;
}
.mvv-modal__fig { margin: clamp(14px,2.4vw,26px) auto 0; max-width: 300px; }
.mvv-modal__fig[hidden] { display: none; }
.mvv-modal__desc {
  font-size: clamp(14px, 1.5vw, 17px); line-height: 2.05; color: rgba(255,255,255,.8);
  max-width: 34em; margin: clamp(16px,2.4vw,26px) auto 0;
}
.mvv-modal__close {
  position: absolute; top: clamp(12px,3vh,26px); right: clamp(12px,3vw,26px);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  font-size: 18px; color: #fff; line-height: 1;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s, transform .2s;
}
.mvv-modal__close:hover { background: rgba(255,255,255,.3); transform: rotate(90deg); }
.mvv-modal__nav { display: flex; justify-content: center; gap: 18px; margin-top: clamp(20px,3vw,32px); }
.mvv-modal__nav-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: 13px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s;
}
.mvv-modal__nav-btn:hover { background: rgba(255,255,255,.28); border-color: #f27ba4; color: #f27ba4; }
.mvv-modal .ab-vals__venn .venn-t { fill: rgba(255,255,255,.92); }
.mvv-modal .ab-vals__venn .venn-c { fill: #fff; stroke: rgba(8,11,22,.75); }
.mvv-modal .ab-vals__venn .venn-circles circle { mix-blend-mode: screen; }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle { animation: vennPop .5s cubic-bezier(.34,1.4,.64,1) both; transform-origin: center; transform-box: fill-box; }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle:nth-child(2) { animation-delay: .08s; }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle:nth-child(3) { animation-delay: .16s; }
.mvv-modal__content {
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Value 02「愛される人」のベン図（本番 css/style.css の .ab-vals__venn を移植。
      色はこのサイトのトークンに置き換え。モーダル内＝暗い地なので screen 合成にする） ── */
.ab-vals__venn { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.ab-vals__venn .venn-circles circle { stroke-width: 1.6; mix-blend-mode: screen; }
.ab-vals__venn .venn-circles circle:nth-child(1) { fill: rgba(61, 90, 171, .34); stroke: var(--c1); }
.ab-vals__venn .venn-circles circle:nth-child(2) { fill: rgba(140, 90, 156, .34); stroke: var(--c2); }
.ab-vals__venn .venn-circles circle:nth-child(3) { fill: rgba(214, 51, 108, .32); stroke: var(--c3); }
.ab-vals__venn .venn-t { font-size: 15px; font-weight: 700; fill: rgba(255,255,255,.92); }
.ab-vals__venn .venn-c { font-size: 16px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(8,11,22,.75); stroke-width: 4px; stroke-linejoin: round; }
@keyframes vennPop { from { scale: .7; opacity: 0 } to { scale: 1; opacity: 1 } }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle { animation: vennPop .5s cubic-bezier(.34,1.4,.64,1) both; transform-origin: center; transform-box: fill-box; }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle:nth-child(2) { animation-delay: .08s; }
.mvv-modal.is-open .ab-vals__venn .venn-circles circle:nth-child(3) { animation-delay: .16s; }

/* ── モーダルへ渡すためだけの下書き（画面には出さない） ── */
.mvv-val__desc, .mvv-val__fig { display: none; }