/* FDSi 3サイト共通 デザインシステム
   出典＝corp_v2/render/index.html のトークン・モーション定義を分離したもの。
   ここにサイト横断の「トークン／ベース／モーション／共通部品」だけを置く。
   ページ固有のレイアウトは各ページの <style> に書く。 */

:root{
  --c-bg: oklch(0.13 0 0);
  --c-bg-deep: oklch(0.06 0 0);
  --c-fg: oklch(0.985 0 0);
  --c-fg-dim: oklch(0.79 0 0);
  --c-paper: oklch(0.985 0.002 250);
  --c-paper-2: oklch(0.955 0.003 250);
  --c-on-paper: oklch(0.17 0 0);
  --c-on-paper-dim: oklch(0.40 0 0);
  /* accent: 深紅 (2026-09-05 つよし指示 青→赤) hue 22 */
  --c-red: oklch(0.40 0.135 22);          /* 面・塗り。上に載るのは白文字 (AA 9.45:1) */
  --c-red-bright: oklch(0.70 0.150 22);   /* 暗地のリンク・文字 (AA 7.04:1 on --c-bg) */
  --c-red-ink: oklch(0.45 0.150 22);      /* 明地(paper)の文字 (AA 7.71:1 on --c-paper) */
  --c-line: oklch(1 0 0 / 0.22);
  --c-line-strong: oklch(1 0 0 / 0.44);
  --c-line-dark: oklch(0 0 0 / 0.16);
  --s1: 8px; --s2: 24px; --s3: 56px; --s4: 120px;
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-hov: cubic-bezier(.58,.01,0,.99);
  --ease-hl: cubic-bezier(.5,0,0,1);
}

/* ---------- base ---------- */
html{scroll-behavior:auto}
body{margin:0;background:var(--c-bg);color:var(--c-fg);
  font-family:"Helvetica Neue",Helvetica,Arial,"Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
img{max-width:100%}
a{color:var(--c-red-bright);text-decoration:none}
a:hover{color:var(--c-fg)}
*{box-sizing:border-box}

/* ---------- header ---------- */
header[data-header]{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:var(--s1);height:56px;padding:0 var(--s2);
  overflow:hidden;
  background-color:oklch(0.06 0 0 / 0);backdrop-filter:blur(0px);
  border-bottom:1px solid oklch(1 0 0 / 0);
  transition:background-color .3s var(--ease-hov), backdrop-filter .3s var(--ease-hov),
             border-bottom-color .3s var(--ease-hov), transform .4s var(--ease-hov)}
header[data-header][data-scrolled]{background-color:oklch(0.06 0 0 / 0.86);
  backdrop-filter:blur(10px);border-bottom-color:var(--c-line)}
header[data-header][data-hidden]{transform:translateY(-100%)}
.brand{display:flex;align-items:baseline;gap:var(--s1);min-width:0;flex:0 1 auto;overflow:hidden;
  color:var(--c-fg);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--c-fg)}
.brand b{font-size:15px;font-weight:700;letter-spacing:0.14em}
.brand span{font-size:10px;letter-spacing:0.18em;color:var(--c-fg-dim);
  overflow:hidden;text-overflow:ellipsis}
nav[data-navlinks]{display:flex;align-items:center;gap:var(--s2);flex:0 1 auto;min-width:0;
  font-size:12px;letter-spacing:0.1em;white-space:nowrap}
nav[data-navlinks] a{color:var(--c-fg-dim);text-decoration:none;white-space:nowrap}
nav[data-navlinks] a:hover{color:var(--c-fg)}

[data-hov]>[data-fill]{transition:clip-path .4s var(--ease-hov), transform .4s var(--ease-hov)}
[data-hov]:hover>[data-fill]{clip-path:inset(0 round 1px);transform:translateY(0)}
.linkline{display:inline-flex;align-items:center;gap:var(--s1);font-size:13px;letter-spacing:0.12em;
  text-decoration:none;border-bottom:1px solid var(--c-line);padding-bottom:4px;color:var(--c-fg)}
.linkline.on-paper{color:var(--c-on-paper);border-bottom-color:var(--c-line-dark)}

/* ---------- reveal（motion.js が付ける is-inview で発火） ---------- */
[data-mask]{overflow:clip}
[data-reveal]{transform:translateY(120%);will-change:transform}
[data-reveal="body"]{transform:translateY(105%)}
[data-mask].is-inview>[data-reveal]{transform:translateY(0);
  transition:transform .75s var(--ease) calc(var(--i, 0) * 0.05s)}
[data-mask].is-inview>[data-reveal="body"]{transform:translateY(0);
  transition:transform .75s var(--ease) calc(var(--i, 0) * 0.1s)}
[data-reveal="media"]{transform:none;clip-path:inset(10% round 2px);will-change:clip-path}
[data-mask].is-inview>[data-reveal="media"]{clip-path:inset(0 round 2px);
  transition:clip-path 1s var(--ease) calc(var(--i, 0) * 0.05s)}

/* ---------- 見出しハイライト ---------- */
[data-hl]{position:relative;display:inline-block;isolation:isolate;padding:0 .1em}
[data-hl]::before{content:"";position:absolute;left:0;top:-5%;width:0;height:110%;
  background:var(--c-red);z-index:-1}
[data-mask].is-inview [data-hl]::before{width:100%;
  transition:width .75s var(--ease-hl) calc(var(--i, 0) * 0.05s + .15s)}
.sec-paper [data-hl]{color:var(--c-fg)}

/* ---------- cursor stalker（PC のみ） ---------- */
[data-cursor]{display:none}
@media (hover: hover) and (pointer: fine){
  [data-cursor]{display:block;position:fixed;left:0;top:0;z-index:90;pointer-events:none;
    will-change:transform}
  [data-cursor]>div{display:grid;place-items:center;min-width:104px;padding:11px 16px;
    background:var(--c-red);color:var(--c-fg);font-size:11px;letter-spacing:0.18em;
    font-weight:700;white-space:nowrap;opacity:0;
    clip-path:inset(100% 100% 0 0 round 50%);transform:translate(-50%,-50%);
    transition:clip-path .4s var(--ease-hov), transform .4s var(--ease-hov),
               opacity .4s var(--ease-hov)}
  [data-cursor]>div[data-on]{opacity:1;clip-path:inset(0 round 1px);
    transform:translate(-50%,-50%) translateY(-25%)}
  [data-cursor]>div>span{opacity:0;transition:opacity .15s ease-in-out}
  [data-cursor]>div[data-on]>span{opacity:1;transition:opacity .15s ease-in-out .25s}
}

/* ---------- アンカー遷移のフラッシュ ---------- */
@keyframes fdsi-flash{0%{opacity:0}18%{opacity:1}62%{opacity:1}100%{opacity:0}}
@keyframes fdsi-para{0%{transform:translate(-50%,-50%) rotate(26deg) skewX(-14deg) scale(0);opacity:1}
  62%{transform:translate(-50%,-50%) rotate(26deg) skewX(-14deg) scale(1.7);opacity:1}
  100%{transform:translate(-50%,-50%) rotate(26deg) skewX(-14deg) scale(1.7);opacity:0}}
[data-fx="flash"]{position:fixed;inset:0;background:var(--c-red-bright);opacity:0;pointer-events:none;z-index:81}
[data-fx="flash"][data-run]{animation:fdsi-flash 800ms var(--ease-hov) both}
[data-fx="para"]{position:fixed;left:50%;top:50%;width:100vmax;height:150vmax;background:var(--c-bg-deep);
  transform:translate(-50%,-50%) rotate(26deg) skewX(-14deg) scale(0);pointer-events:none;z-index:80}
[data-fx="para"][data-run]{animation:fdsi-para 800ms var(--ease-hov) both}

/* ---------- レスポンシブ ---------- */
@media (max-width: 760px){
  [data-navlinks]{display:none !important}
}
@media (max-width: 480px){
  header[data-header]{padding:0 var(--s1)}
  .brand span{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{transform:none !important;clip-path:none !important;opacity:1 !important}
  [data-hl]::before{width:100% !important}
  [data-hov]>[data-fill]{display:none !important}
  [data-cursor]{display:none !important}
  [data-fx]{display:none !important}
  header[data-header]{background-color:oklch(0.06 0 0 / 0.86) !important;
    backdrop-filter:blur(10px) !important;border-bottom-color:var(--c-line) !important;
    transform:none !important}
}