/* ============================================================
   ミチナビ 新TOP 2分割FV — v8（8/20-21 伏見さんFB反映版）
   v8: 内容を左右入れ替え（左=青=勤怠管理・給与／右=黄=kintone・色配置は維持）
       浮遊アイコン→サルタミチビくん4体を4隅へ（視差・波は維持＝8/21通話）
       カーソル追従=サル実装／ピルは黄面用にインク色／見出し「勤怠管理・給与」
   骨格: joyzo実測トークン移植（reference/joyzo_fv_measure.json）
   §7移植制約: 全クラス mfv- 接頭辞／.mfv-root 配下で自己完結
   v4: 告知帯／GPT素材（ダッシュボード・バッジ・浮遊アイコン・波背景）／
       §9実文チップ／マウス視差（背景と浮遊アイコンのみ）
   ============================================================ */


/* ============ スコープ内リセット＋トークン（§7-1/2） ============ */
.mfv-root,
.mfv-root *,
.mfv-root *::before,
.mfv-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mfv-root {
  --mfv-teal:        #14C4CD;
  --mfv-teal-deep:   #0EA5AE;   /* hover: joyzoの「深まり」を再現 */
  --mfv-yellow:      #FFC30F;   /* joyzo #FFC107 と見分け不能・コードは別（実証: _shots/yellow_compare.png） */
  --mfv-yellow-deep: #FFB300;   /* hover: joyzo実測値 */
  --mfv-ink:         #111827;   /* 黄面テキスト（joyzo実測 rgb(17,24,39)） */
  --mfv-ribbon-bg:   #0E3138;   /* 告知帯: ダークティール系（§10-2「面と分離」） */
  --mfv-white:       #FFFFFF;
  --mfv-slant:       26px;      /* 斜め分割の半オフセット（900px高で約3.3°） */
  --mfv-dur:         .5s;       /* joyzo実測 transition */
  --mfv-ribbon-h:    42px;
  font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
}

/* ============ 最上部 告知帯（§10-2） ============ */
.mfv-ribbon {
  height: var(--mfv-ribbon-h);
  background: var(--mfv-ribbon-bg);
  color: var(--mfv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  text-indent: .28em;
}
.mfv-rb-arw {
  font-size: 11px;
  letter-spacing: 0;
  text-indent: 0;
  opacity: .55;
}

/* ============ ブランドマーク（別置き・§6-2） ============ */
.mfv-site-brand {
  position: fixed;
  top: calc(var(--mfv-ribbon-h) + 18px);
  left: 34px;
  z-index: 50;
  color: var(--mfv-white);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3em;
  pointer-events: none;
}

/* ============ 骨格: 2分割 ============ */
.mfv-fv {
  --mfv-split: 50%;             /* 青パネルの基準幅。hoverで75%/25%へ */
  position: relative;
  height: calc(100vh - var(--mfv-ribbon-h));   /* フォールバック（§7-5） */
  height: calc(100svh - var(--mfv-ribbon-h));  /* dvhはURLバー伸縮で高さが跳ねるためsvh採用 */
  min-height: 620px;
  overflow: hidden;
}

.mfv-panel { display: block; text-decoration: none; cursor: pointer; color: inherit; }

/* 右（黄・kintone）= 全面に下敷き */
.mfv-right {
  position: absolute;
  inset: 0;
  background: var(--mfv-yellow);
  transition: background-color var(--mfv-dur) ease-in-out;
  z-index: 1;
}

/* 左（青・勤怠）= 上層。右エッジをclip-pathで斜めに */
.mfv-left {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(var(--mfv-split) + var(--mfv-slant));
  background: var(--mfv-teal);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--mfv-slant) * 2) 100%, 0 100%);
  transition: width var(--mfv-dur) ease-out, background-color var(--mfv-dur) ease-in-out;
  z-index: 2;
}

/* コンテンツは「見えている領域」の中央に追従 */
.mfv-inner {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: flex-start;   /* 上端固定＝左右の見出し基準線が揃う（§6-3） */
  justify-content: center;
}
.mfv-left .mfv-inner {
  left: 0;
  /* %は親パネル(=split+slant)基準。可視領域の中線=パネル幅-slant に合わせる */
  width: calc(100% - var(--mfv-slant));
}
.mfv-right .mfv-inner {
  left: var(--mfv-split);
  right: 0;
  transition: left var(--mfv-dur) ease-out;
}

/* v9 (8/22 伏見さんFB): 背景装飾の波（旧 mfv-wave）は削除 */

/* ============ 浮遊キャラ: サルタミチビくん×4（FV全体の4隅・視差対象・v8） ============ */
.mfv-float {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .14));
  transition: opacity .35s ease;   /* transformは視差JSが毎フレーム上書きするためopacityのみ */
}
/* 左（ティール面・勤怠）: 出勤=左上／退勤=左下。左上はブランドマーク(ミチナビ)と被らない高さへ */
.mfv-ch-tl { left: 3%;  top: 15%;   }
.mfv-ch-bl { left: 5%;  bottom: 9%; }
/* 右（黄面・kintone）: みて=右上／PC操作=右下 */
.mfv-ch-tr { right: 4%; top: 11%;    }
.mfv-ch-br { right: 6%; bottom: 10%; }

/* ============ コンテンツ列 ============ */
/* 固定幅コンテンツ = パネルが縮んでも折返しが構造的に起きない */
.mfv-content {
  position: relative;
  z-index: 1;               /* 装飾レイヤーより前 */
  flex: 0 0 auto;
  width: max-content;
  max-width: 640px;
  /* 列の上端オフセット: 列高さ約560px(fig319+見出し群)が帯下領域の縦中央に来る位置へ両列とも固定（§6-3） */
  margin-top: max(20px, calc((100svh - var(--mfv-ribbon-h) - 560px) / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 拡大/退場をパネル伸縮(--mfv-dur)と同期＝広がる動きと中身の動きが一体に見える */
  transform-origin: 50% 30%;
  transition: opacity var(--mfv-dur) ease-out, transform var(--mfv-dur) ease-out;
}
.mfv-left .mfv-content { color: var(--mfv-white); }
.mfv-right  .mfv-content { color: var(--mfv-ink); }

/* グラフィックゾーン: 左右で同じ高さ＝見出し基準線が揃う（§6-3・8/20修正指示③でも維持を明示） */
.mfv-fig {
  height: 319px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
/* kintone面（v8=右・黄）: ピル（吹き出し）をダッシュボードの真上に縦積み（comp_v1準拠） */
.mfv-fig-stack {
  flex-direction: column;
  gap: 6px;
}
/* ピル=SVG再現（8/20修正①: 旧pngはJPEG切り出しノイズ→ベクター化。
   文字はtextLengthで幅固定＝フォント読込状況に依らず枠に収まる） */
.mfv-pill {
  display: block;
  width: 236px;
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(10, 40, 44, .22));   /* CTAボタンと同系の影 */
}
.mfv-pill-txt {
  font-family: 'M PLUS 1p', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 700;
  fill: #0EA5AE;   /* v8.2: 白ピルに青文字（=--mfv-teal-deep・勤怠面ボタンの文字色と同じ） */
}
.mfv-dash {
  display: block;
  filter: drop-shadow(0 22px 36px rgba(17, 24, 39, .26));
}
.mfv-badge-img {
  display: block;
  filter: drop-shadow(0 14px 28px rgba(8, 60, 64, .26));   /* v8: 青面 */
}

/* ============ ホバー伸縮（PC・:has連動） ============ */
@media (hover: hover) and (pointer: fine) {
  .mfv-fv:has(.mfv-left:hover),
  .mfv-fv:has(.mfv-left:focus-visible) { --mfv-split: 75%; }
  .mfv-fv:has(.mfv-right:hover),
  .mfv-fv:has(.mfv-right:focus-visible)  { --mfv-split: 25%; }

  .mfv-fv:has(.mfv-left:hover) .mfv-left,
  .mfv-fv:has(.mfv-left:focus-visible) .mfv-left { background: var(--mfv-teal-deep); }
  .mfv-fv:has(.mfv-right:hover) .mfv-right,
  .mfv-fv:has(.mfv-right:focus-visible) .mfv-right   { background: var(--mfv-yellow-deep); }

  /* 拡大側は中身も一緒に拡大（8/20修正②: 面だけ広がって中身が据え置きだと余白が不自然） */
  .mfv-fv:has(.mfv-left:hover) .mfv-left .mfv-content,
  .mfv-fv:has(.mfv-left:focus-visible) .mfv-left .mfv-content,
  .mfv-fv:has(.mfv-right:hover) .mfv-right .mfv-content,
  .mfv-fv:has(.mfv-right:focus-visible) .mfv-right .mfv-content {
    transform: scale(1.13);
  }

  /* 縮小側はフェード退場（joyzoの文字折返し破綻を起こさない） */
  .mfv-fv:has(.mfv-left:hover) .mfv-right .mfv-content,
  .mfv-fv:has(.mfv-left:focus-visible) .mfv-right .mfv-content,
  .mfv-fv:has(.mfv-right:hover) .mfv-left .mfv-content,
  .mfv-fv:has(.mfv-right:focus-visible) .mfv-left .mfv-content {
    opacity: 0;
    transform: scale(.9);
  }
  /* 縮小側は浮遊キャラも退場（狭い帯での密集・端切れ防止。波は質感として残す） */
  .mfv-fv:has(.mfv-left:hover) .mfv-right .mfv-float,
  .mfv-fv:has(.mfv-left:focus-visible) .mfv-right .mfv-float,
  .mfv-fv:has(.mfv-right:hover) .mfv-left .mfv-float,
  .mfv-fv:has(.mfv-right:focus-visible) .mfv-left .mfv-float {
    opacity: 0;
  }
}

/* ============ タイポ（joyzo実測＋英字サブ層） ============ */
.mfv-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.mfv-headline {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 2;
}
.mfv-copy {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 2;
  opacity: .9;
}

/* ============ ボタン: 塗り＋浮き＋矢印スライド（§6-4）＋ギミック（8/20修正④） ============ */
.mfv-btn {
  position: relative;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px 16px 36px;   /* comp_v1参考: 余白広め */
  border-radius: 999px;
  background: var(--mfv-white);
  border: 3px solid rgba(255, 255, 255, .5);
  box-shadow: 0 8px 22px rgba(10, 40, 44, .22);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  /* マグネット用（JSが --mx/--my を書く。無指定時は0） */
  transform: translate(var(--mx, 0px), var(--my, 0px));
}
.mfv-left .mfv-btn { color: var(--mfv-teal-deep); }
.mfv-right  .mfv-btn { color: var(--mfv-ink); }

/* 外周の縁取りリング（8/20修正④: 本体から離した二重の縁） */
.mfv-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  transition: inset .35s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease, opacity .3s ease;
}

/* テキストロール: ホバーで文字が下から入れ替わる */
.mfv-btn-txt {
  display: block;
  overflow: hidden;
}
.mfv-btn-txt-in {
  position: relative;
  display: block;
  transition: transform .4s cubic-bezier(.6, 0, .2, 1);
}
.mfv-btn-txt-in::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
}

.mfv-btn-arw {
  position: relative;
  width: 20px;
  height: 14px;
  overflow: hidden;
}
.mfv-btn-arw svg {
  position: absolute;
  inset: 0;
  transition: transform .35s cubic-bezier(.5, 0, .2, 1);
}
.mfv-btn-arw svg:last-child { transform: translateX(-28px); }

/* ゼリー弾み: パネルにカーソルが入った瞬間ぷるんと弾む */
@keyframes mfvJelly {
  0%   { scale: 1 1; }
  30%  { scale: 1.12 .88; }
  50%  { scale: .94 1.08; }
  72%  { scale: 1.04 .97; }
  100% { scale: 1 1; }
}

/* ホバー: 背景は白のまま・文字色も維持。影/浮き＋縁取り拡張＋文字ロール＋弾み */
.mfv-panel:hover .mfv-btn, .mfv-panel:focus-visible .mfv-btn {
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 4px));
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 20px 38px rgba(10, 40, 44, .34);
  animation: mfvJelly .65s cubic-bezier(.36, .07, .19, .97);
}
.mfv-panel:hover .mfv-btn::before, .mfv-panel:focus-visible .mfv-btn::before {
  inset: -16px;
  border-color: rgba(255, 255, 255, .9);
}
.mfv-panel:hover .mfv-btn-txt-in,
.mfv-panel:focus-visible .mfv-btn-txt-in { transform: translateY(-100%); }
.mfv-panel:hover .mfv-btn-arw svg:first-child,
.mfv-panel:focus-visible .mfv-btn-arw svg:first-child { transform: translateX(28px); }
.mfv-panel:hover .mfv-btn-arw svg:last-child,
.mfv-panel:focus-visible .mfv-btn-arw svg:last-child  { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .mfv-panel:hover .mfv-btn, .mfv-panel:focus-visible .mfv-btn { animation: none; }
  .mfv-btn-txt-in { transition: none; }
}

/* ============ カーソル追従: サルタミチビくん（v8・素材受領で実装） ============ */
.mfv-cursor-chara {
  position: fixed;
  top: 0; left: 0;
  width: 120px;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity .25s ease;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18));
}
.mfv-cursor-chara.mfv-ring-on { opacity: 1; }
.mfv-cursor-chara img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============ ロード演出（控えめ・1回だけ） ============ */
@keyframes mfv-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.mfv-content > * { animation: mfv-fade-up .7s ease backwards; }
.mfv-content > *:nth-child(1) { animation-delay: .05s; }
.mfv-content > *:nth-child(2) { animation-delay: .12s; }
.mfv-content > *:nth-child(3) { animation-delay: .19s; }
.mfv-content > *:nth-child(4) { animation-delay: .26s; }
.mfv-content > *:nth-child(5) { animation-delay: .33s; }
.mfv-content > *:nth-child(6) { animation-delay: .40s; }

/* ============ フォーカス可視 ============ */
.mfv-panel:focus-visible { outline: 3px solid var(--mfv-white); outline-offset: -10px; }
.mfv-right:focus-visible { outline-color: var(--mfv-ink); }

/* ============ SP: 上下2枚に積む（ホバー無し・視差無し） ============ */
@media (max-width: 768px) {
  .mfv-root { --mfv-ribbon-h: 36px; }
  .mfv-ribbon { font-size: 11px; gap: 10px; }
  .mfv-site-brand { top: calc(var(--mfv-ribbon-h) + 14px); left: 18px; font-size: 14px; }

  .mfv-fv {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - var(--mfv-ribbon-h));   /* フォールバック */
    min-height: calc(100svh - var(--mfv-ribbon-h));
  }
  .mfv-panel {
    position: relative;
    inset: auto;
    width: 100% !important;
    flex: 1 1 50%;
    min-height: 50vh;    /* フォールバック */
    min-height: 50svh;
    z-index: auto;
    overflow: hidden;
  }
  /* 青が上・軽い斜めの水平シーム */
  .mfv-left {
    order: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    margin-bottom: -28px;
    z-index: 2;
  }
  .mfv-right { order: 2; }

  .mfv-inner {
    position: static;
    width: auto !important;
    left: auto !important;
    height: 100%;
    padding: 52px 20px 44px;
  }
  .mfv-right .mfv-inner { padding-top: 60px; } /* シーム重なりぶん逃がす */

  .mfv-content { width: 100%; max-width: 100%; margin-top: 0; }

  /* ピル(56)+gap(6)+ダッシュ(169)を収める高さ。右のバッジ側も同値＝基準線一致 */
  .mfv-fig { height: 231px; margin-bottom: 8px; }
  .mfv-pill { width: 205px; }
  .mfv-dash { width: min(62vw, 240px); height: auto; }
  .mfv-badge-img { width: 180px; height: auto; }

  /* 浮遊キャラは各面1体・小さめ（クラッター回避）: 青=出勤／黄=みて。いずれも右上
     （左上はブランドマーク、下部はボタンと干渉するため右上へ逃がす） */
  .mfv-ch-bl, .mfv-ch-br { display: none; }
  .mfv-ch-tl { width: 76px; height: auto; left: auto; right: 3%; top: 6%; }
  .mfv-ch-tr { width: 76px; height: auto; right: 3%; top: 4%; }

  .mfv-headline { font-size: clamp(24px, 7vw, 28px); line-height: 1.7; }
  .mfv-copy { font-size: 14px; line-height: 1.9; }
  .mfv-eyebrow { font-size: 11px; }
  .mfv-btn { margin-top: 20px; padding: 13px 24px 13px 28px; font-size: 14px; }
  .mfv-cursor-chara { display: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .mfv-root,
  .mfv-root *,
  .mfv-root *::before,
  .mfv-root *::after {
    transition: none !important;
    animation: none !important;
  }
  .mfv-cursor-chara { display: none; }
}