@charset "utf-8";
/* ============================================================
   FV（ファーストビュー）
   fv-mockup/index.html から移植。カンプ用の規則は落としてある。
   ------------------------------------------------------------
   🔴 直すときは fv-mockup 側を直してから、この移植をやり直す。
      ここを直接直すと、カンプと本番がズレる。
   ============================================================ */
/* 🔴 すべての規則を #fv の中に閉じ込めてある（2026-08-11）。
   .lead / .cta / .fv は style.css にも同名がある。包まないと
   FV 用の white-space:nowrap が本文の .lead に効き、横スクロールが 5,000px 出る。
   ⚠️ 包み方：先頭の「.fv」トークンだけを「#fv」に置き換える。
      `.fv__inner` → `#fv .fv__inner` ／ `.fv canvas` → `#fv canvas` */
#fv{
  --base:#F7F5F2; --base-rgb:247,245,242;
  --surface:#FFF; --border:#E0DCD6; --text:#251E1C; --muted:#77716C;
  --accent:#CDCF2B; --accent-bg:#F2F3D2; --accent-txt:#6B6C13;
  --sumi:#2E2D22; --gray:#8A827A;
  --jp:"IBM Plex Sans JP","IBM Plex Sans","Hiragino Sans","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}#fv.dark{ --text:#E8E6E3; --muted:#A6A6AE; --accent-txt:#CDCF2B; }#fv *, #fv *::before, #fv *::after{ box-sizing:border-box; }#fv{ -webkit-text-size-adjust:100%; }#fv{ margin:0; background:var(--base); color:var(--text);
  font-family:var(--jp); font-size:15px; line-height:1.9; letter-spacing:.06em;
  overflow-wrap:break-word; word-break:normal; }#fv, #fv, #fv .next, #fv .subline, #fv .tagline, #fv .stat__num, #fv .stat__label, #fv .next__h, #fv .next__eyebrow, #fv .next__list li, #fv .hud, #fv .lead{
  transition: background-color 1.1s linear, color .8s linear, border-color 1.1s linear;
}#fv{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-start;
     background:var(--base); overflow:hidden; isolation:isolate; }#fv canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }#fv .veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg, rgb(var(--base-rgb)) 0%, rgba(var(--base-rgb),.92) 24%,
    rgba(var(--base-rgb),.40) 36%, rgba(var(--base-rgb),0) 44%); }#fv.stacked .veil{
  background:linear-gradient(180deg, rgb(var(--base-rgb)) 0px,
    rgba(var(--base-rgb),.92) var(--veil-a,38%),
    rgba(var(--base-rgb),0)   var(--veil-b,56%)); }#fv .hud{ position:absolute; inset:0; z-index:3; pointer-events:none;
      font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted); }#fv .hud .tl-txt{ position:absolute; left:30px; top:26px; }#fv .hud .row{ display:block; line-height:1.9; white-space:nowrap; }#fv .hud .k{ opacity:.62; }#fv .hud .v{ color:var(--text); opacity:.78; }#fv .hud .vlabel{ position:absolute; right:26px; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:10.5px; letter-spacing:.34em; color:var(--muted); }#fv .fv__inner{ position:relative; z-index:4; width:100%; max-width:min(1120px,56vw); margin:0;
            padding:min(3.4vh,26px) 30px min(4vh,44px); }#fv .brand{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
         margin:0 0 min(5.5vh,52px); }#fv .brand__wm{ height:26px; width:auto; display:block; flex:none; }#fv .tagline{ margin:0; font-size:clamp(11.5px,1.15vw,14px);
          letter-spacing:.09em; color:var(--muted); }#fv .tagline b{ font-weight:500; color:var(--text); }#fv .lead{ padding-top:20px; margin:0 0 min(3.2vh,26px); font-size:clamp(30px,min(7.4vw,13.5vh),112px); font-weight:600;
       line-height:1.04; letter-spacing:-.01em; font-feature-settings:"palt";
       color:var(--text); white-space:nowrap; }#fv .lead .sr{ position:absolute; width:1px; height:1px; overflow:hidden;
            clip-path:inset(50%); white-space:nowrap; }#fv .lead .ch{ display:inline-block; }#fv .lead .ch.scrambling{ color:var(--accent-txt); opacity:.55; }#fv .subline{ margin:0 0 min(2vh,16px); font-size:clamp(14px,min(1.95vw,2.5vh),21px); font-weight:400;
          line-height:1.75; letter-spacing:.04em; color:var(--text);
          width:100%; max-width:none; }#fv .subline em{ font-style:normal; color:var(--accent-txt); font-weight:500;
             box-shadow:inset 0 -.42em 0 var(--accent-bg); }#fv.dark .subline em{ box-shadow:none; }#fv .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px 20px; margin:0 0 min(4vh,32px);
        padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); max-width:430px; }#fv .stat__num{ font-family:var(--mono); font-size:clamp(21px,3.3vw,36px); font-weight:400;
            line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text); }#fv .stat__num .u{ font-size:.5em; color:var(--muted); margin-left:.15em; }#fv .stat__label{ margin-top:5px; font-size:clamp(10px,1.1vw,11.5px); line-height:1.6;
              letter-spacing:.09em; color:var(--muted); }#fv .cta{ display:inline-flex; align-items:center; gap:12px; margin-top:min(3vh,24px);
      min-height:clamp(46px,6vh,54px); padding:0 clamp(20px,2.4vw,30px);
      background:var(--accent); border:1px solid var(--accent); color:#2E2D22; text-decoration:none;
      font-size:14.5px; font-weight:500; letter-spacing:.08em; transition:background .3s,color .3s;
      white-space:nowrap; }
@media (max-width:479.98px){#fv .cta{ font-size:13px; letter-spacing:.02em; padding:0 16px; gap:8px; }
}

@media (max-width:359.98px){#fv .cta{ font-size:12px; padding:0 13px; }
}
#fv .cta:hover, #fv .cta:focus-visible{ background:transparent; color:var(--accent-txt); }#fv.dark .cta:hover{ color:var(--accent); }#fv .cta .arrow{ font-family:var(--mono); transition:transform .3s; }#fv .cta:hover .arrow{ transform:translateX(4px); }
@media (max-width:1023.98px){#fv .fv__inner{ max-width:none; padding:22px 26px 36px; }#fv .hud .vlabel{ display:none; }#fv .next{ padding:96px 26px; }#fv .panel{ top:8px; right:8px; bottom:auto; width:auto; opacity:.95; }
}


@media (max-width:767.98px){#fv .fv__inner{ padding:18px 22px 34px; }#fv .lead{ font-size:clamp(26px,8.6vw,62px); }#fv .brand__wm{ height:22px; }#fv .stats{ grid-template-columns:repeat(2,1fr); gap:18px 16px; }#fv .next{ padding:84px 22px; }#fv .nowlabel{ white-space:normal; max-width:74vw; font-size:11.5px; padding:7px 12px 8px; }
}


@media (max-width:479.98px){#fv .fv__inner{ padding:14px 18px 28px; }#fv .lead{ font-size:clamp(24px,9.2vw,44px); }#fv .brand{ gap:6px 12px; }#fv .brand__wm{ height:19px; }#fv .next{ padding:64px 18px; }#fv .nowlabel{ max-width:82vw; font-size:11px; padding:6px 10px 7px; }
}


#fv .nowlabel{ position:absolute; z-index:3; pointer-events:none;
  transform:translate(-50%,-50%) rotate(-1.4deg);
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  padding:9px 16px 10px; font-size:12px; letter-spacing:.06em; white-space:nowrap;
  color:var(--text); opacity:0; transition:opacity .5s; }#fv .nowlabel.on{ opacity:1; }

@media (prefers-reduced-motion:reduce){#fv .nowlabel{ transition:none; } }