@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   BLUE ROCK GEAR — v2.1
   目標テイスト = 「かっこいい」（実例3件の実測から）
     書体: Shippori Mincho / Zen Kaku Gothic New / Syne（実例で共通のもの）
     対比: 18倍前後   段階: 17前後   keyframes: 7〜13   transition: 85〜592
     ライブラリ: Lenis（実例5/8件で使用）＋ GSAP

   川井さんの指摘で直したもの
     ・字が大きすぎる      → h1 178px → 132px
     ・WORKS がダサい      → 不等分割＋3種マスクをやめ、2列で大きく見せる
     ・スマホの右が詰まる    → はみ出しをデスクトップ限定に
     ・動画とマスコットが消えた → ヒーローに「窓」として戻す（生成りの静けさは壊さない）
   ══════════════════════════════════════════════════════════ */
:root{
  --paper:#EDE9E2;
  --paper-2:#E5E0D7;
  --ink:#16130F;
  --ink-70:rgba(22,19,15,.78);  /* 薄くて読めない指摘を受けて .62→.78 */
  --ink-40:rgba(22,19,15,.46);  /* ラベル。.34→.46 */
  --line:rgba(22,19,15,.15);
  --blue:#1B44E0;
  --pad:clamp(20px,5vw,88px);
  --mincho:"Shippori Mincho",serif;
  --gothic:"Zen Kaku Gothic New",sans-serif;
  --disp:"Syne",sans-serif;
  --cond:"Roboto Condensed",sans-serif;
  --ease:cubic-bezier(.16,.84,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--gothic);font-weight:400;font-size:15px;line-height:2.05;
  letter-spacing:.055em;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .35s var(--ease),opacity .35s var(--ease)}
::selection{background:var(--ink);color:var(--paper)}

/* ── 共通 ───────────────────────────────── */
.rail{display:flex;flex-direction:column;justify-content:flex-end;gap:24px;padding-bottom:12px}
.rail i{width:1px;flex:1;background:linear-gradient(var(--ink) 38%,transparent);min-height:60px;
  transform-origin:bottom;transform:scaleY(0);transition:transform 1.4s var(--ease)}
.rail.on i{transform:scaleY(1)}
.vlabel{writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--cond);font-weight:300;font-size:11px;letter-spacing:.42em;
  color:var(--ink-40);white-space:nowrap;transition:color .5s var(--ease)}
.rail.on .vlabel{color:var(--ink-70)}
.sec{padding:clamp(88px,15vh,190px) var(--pad);
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:clamp(18px,4vw,54px)}
.sec-h{font-family:var(--mincho);font-weight:600;margin:0 0 clamp(28px,5.5vh,66px);
  font-size:clamp(28px,4.8vw,66px);line-height:1.36;letter-spacing:.005em;max-width:16em}
.lead{max-width:32em;color:var(--ink-70);margin:0;font-size:15.5px}
.lead+.lead{margin-top:1.6em}
.lead b{font-weight:700;color:var(--ink)}
.accent{color:var(--blue)}
.en{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.26em;
  color:var(--ink-40);display:block;transition:color .4s var(--ease),letter-spacing .5s var(--ease)}

/* 見出しの出方＝「ストリーミング感」。左から右へ、目で追える速さで流す。
   ・速すぎると読めない（1.05s／間隔0.11s は速すぎるという指摘を受けて調整）
   ・イージングは急減速をやめ、ほぼ一定速度に。文字が“流れて出る”ように見せる
   ・1行ずつ間を空けて、3行が順に立ち上がる */
.wipe{display:inline-block;animation:wipeIn 1.5s cubic-bezier(.32,.5,.35,1) both}
.wipe:nth-of-type(1){animation-delay:.25s}
.wipe:nth-of-type(2){animation-delay:.95s}
.wipe:nth-of-type(3){animation-delay:1.65s}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0)}
                  to{clip-path:inset(0 -.12em 0 0)}}
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft)}
.reveal.on{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ── ヘッダ ─────────────────────────────── */
/* ヒーロー（暗い動画）の上では白、スクロールしたら墨に切り替える。
   mix-blend-mode:multiply は暗い背景の上で文字が消えるので使わない */
.hd{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;
  align-items:center;padding:18px var(--pad);color:var(--paper);
  text-shadow:0 1px 14px rgba(9,8,7,.45);
  transition:padding .5s var(--ease),background .5s var(--ease),
             color .5s var(--ease),text-shadow .5s var(--ease)}
.hd.slim{padding:11px var(--pad);color:var(--ink);text-shadow:none;
  background:rgba(237,233,226,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.hd .logo{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.2em;
  transition:letter-spacing .5s var(--ease)}
.hd .logo:hover{letter-spacing:.3em}
.hd nav{display:flex;gap:clamp(14px,2.3vw,30px);font-family:var(--cond);font-size:11px;letter-spacing:.24em}
.hd nav a{color:rgba(237,233,226,.82);position:relative;padding-bottom:3px}
.hd.slim nav a{color:var(--ink-40)}
.hd nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hd nav a:hover{color:var(--paper)}
.hd.slim nav a:hover{color:var(--ink)}
.hd nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:760px){.hd nav{display:none}}

/* ── HERO：全画面。迫力はここで作る ─────────────── */
.hero{position:relative;min-height:100svh;display:grid;align-content:center;
  padding:clamp(96px,13vh,150px) var(--pad) 56px;color:var(--paper);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0b0a09}
.hero-bg .poster,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg video{opacity:0;transition:opacity 1.6s var(--ease-soft)}
.hero-bg video.on{opacity:1}
.hero-bg canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2}
/* 文字を読ませるための影。左を濃く、下を締める＝中央に寄せない */
.hero-bg .shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,8,7,.82) 0%,rgba(9,8,7,.5) 46%,rgba(9,8,7,.12) 78%),
             linear-gradient(0deg,rgba(9,8,7,.62),transparent 46%)}
.hero-fg{display:grid;grid-template-columns:26px minmax(0,1fr);gap:clamp(18px,4vw,54px);
  position:relative;z-index:4;max-width:1500px}
.hero .rail i{background:linear-gradient(rgba(237,233,226,.9) 38%,transparent)}
.hero .vlabel{color:rgba(237,233,226,.45)}
.hero.on .vlabel,.hero .rail.on .vlabel{color:rgba(237,233,226,.75)}
.kick{font-family:var(--cond);font-size:12px;letter-spacing:.3em;
  color:rgba(237,233,226,.75);margin:0 0 clamp(14px,3vh,28px);text-shadow:0 1px 10px rgba(9,8,7,.4)}
.hero h1{font-family:var(--mincho);font-weight:400;margin:0 0 clamp(20px,4vh,40px);
  font-size:clamp(38px,8.2vw,118px);line-height:1.06;letter-spacing:-.03em}
.hero h1 .wipe{display:block;white-space:nowrap}   /* ← 折り返しを禁止。改行は自分で決める */
.hero h1 em{font-style:normal;font-weight:800}
.hero h1 .thin{color:rgba(237,233,226,.42)}
.hero .lead{max-width:30em;color:rgba(237,233,226,.86);text-shadow:0 1px 12px rgba(9,8,7,.4)}
.hero .lead b{color:var(--paper);font-weight:500}
.scrollcue{display:flex;align-items:center;gap:12px;margin-top:clamp(24px,4.5vh,50px);
  font-family:var(--cond);font-size:10px;letter-spacing:.3em;color:rgba(237,233,226,.5)}
.scrollcue span{width:52px;height:1px;background:rgba(237,233,226,.35);position:relative;overflow:hidden}
.scrollcue span::after{content:"";position:absolute;inset:0;background:var(--paper);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:560px){
  .hero h1{font-size:clamp(30px,8.6vw,44px)}
  .hero-bg .shade{background:linear-gradient(0deg,rgba(9,8,7,.8),rgba(9,8,7,.35) 60%,rgba(9,8,7,.55))}
}

/* ── SERVICES ───────────────────────────── */
.srv{border-top:1px solid var(--line);display:grid;grid-template-columns:74px 1fr;
  gap:clamp(12px,2.6vw,36px);padding:clamp(24px,3.6vw,40px) 0;align-items:start;
  transition:background .5s var(--ease),padding-left .5s var(--ease)}
.srv:last-of-type{border-bottom:1px solid var(--line)}
.srv:hover{background:rgba(22,19,15,.028);padding-left:14px}
.srv .no{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.22em;
  color:var(--ink-40);padding-top:.6em;transition:color .45s var(--ease)}
.srv:hover .no{color:var(--blue)}
.srv h3{font-family:var(--mincho);font-weight:600;margin:0 0 8px;
  font-size:clamp(19px,2.4vw,29px);letter-spacing:.015em}
.srv p{margin:0 0 10px;max-width:34em;color:var(--ink-70);font-size:14.5px}
.srv:hover .en{color:var(--ink-70);letter-spacing:.34em}

/* ── WHY ────────────────────────────────── */
/* 右が空いていて意図が読めない、という指摘。実績の数字を置いて左右を釣り合わせる */
.why{background:var(--paper-2)}
.why-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.figs{display:grid;gap:0;border-top:1px solid var(--line)}
.fig{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease)}
.fig:hover{padding-left:10px}
.fig dt{font-size:12.5px;color:var(--ink-70);letter-spacing:.06em;margin:0;line-height:1.75}
.fig dd{margin:0;font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,4.4vw,58px);line-height:1;letter-spacing:-.02em;
  transition:color .45s var(--ease)}
.fig:hover dd{color:var(--blue)}
.fig dd small{font-family:var(--gothic);font-weight:400;font-size:13px;letter-spacing:.06em;margin-left:5px}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}.figs{margin-top:34px}}

/* ── WORKS：2列で大きく見せる（小細工をやめる） ───────── */
.wk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.6vw,58px)}
.wk a{display:block;position:relative}
.wk a:nth-child(even){margin-top:clamp(30px,6vw,90px)}   /* 段差は1つだけ。散らかさない */
.wk figure{margin:0 0 16px;aspect-ratio:16/11;overflow:hidden;background:var(--ink);position:relative}
.wk img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.3s var(--ease-soft),filter 1s var(--ease)}
.wk a:hover img{transform:scale(1.075)}
.wk figure::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;
  transition:opacity .6s var(--ease)}
.wk a:hover figure::after{opacity:.13}
.wk .view{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.3em;color:var(--paper);
  opacity:0;transform:translateY(9px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.wk a:hover .view{opacity:1;transform:none}
.wk .no{font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:.3em;
  color:var(--ink-40);display:block;margin-bottom:7px;transition:color .4s var(--ease)}
.wk a:hover .no{color:var(--blue)}
.wk h3{font-family:var(--mincho);font-weight:600;font-size:clamp(16px,1.9vw,23px);
  margin:0 0 5px;letter-spacing:.02em;transition:opacity .4s var(--ease)}
.wk p{margin:0;font-size:13.5px;color:var(--ink-70);line-height:1.9}
@media(max-width:760px){.wk{grid-template-columns:1fr;gap:38px}.wk a:nth-child(even){margin-top:0}}

/* ── COMPANY ───────────────────────────── */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(26px,5vw,72px);align-items:start}
.co-mark{font-family:var(--disp);font-weight:800;line-height:.92;letter-spacing:-.03em;
  font-size:clamp(38px,5.4vw,86px);color:transparent;
  -webkit-text-stroke:1px var(--ink-40);word-break:break-word}
.co-mark span{display:block}
.co-mark span:last-child{color:var(--ink-40);-webkit-text-stroke:0}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}.co-mark{margin-top:26px}}
.dl{margin:0;max-width:840px}
.dl>div{display:grid;grid-template-columns:168px 1fr;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:14px;transition:padding-left .45s var(--ease)}
.dl>div:hover{padding-left:10px}
.dl dt{font-family:var(--cond);font-size:11px;letter-spacing:.24em;color:var(--ink-40);padding-top:.35em}
.dl dd{margin:0}
@media(max-width:640px){.dl>div{grid-template-columns:1fr;gap:3px}.dl>div:hover{padding-left:0}}

/* ── CONTACT ───────────────────────────── */
.contact{background:var(--ink);color:var(--paper)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}}
.ct-form{display:grid;gap:16px}
.ct-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.ct-form .row{grid-template-columns:1fr}}
.ct-form label{display:grid;gap:7px;font-size:12px;letter-spacing:.08em;color:rgba(237,233,226,.72)}
.ct-form label b{font-weight:700;font-size:10px;color:var(--paper);
  border:1px solid rgba(237,233,226,.45);padding:1px 6px;margin-left:7px;letter-spacing:.14em}
.ct-form input,.ct-form textarea{width:100%;padding:13px 15px;font:inherit;font-size:14px;
  color:var(--paper);background:rgba(237,233,226,.05);
  border:1px solid rgba(237,233,226,.22);border-radius:0;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.ct-form input:focus,.ct-form textarea:focus{outline:none;
  border-color:var(--paper);background:rgba(237,233,226,.1)}
.ct-form textarea{resize:vertical;line-height:1.9}
.ct-form .consent{grid-template-columns:auto 1fr;display:grid;align-items:start;gap:10px;
  font-size:12px;line-height:1.8;margin-top:4px}
.ct-form .consent input{width:16px;height:16px;margin-top:4px;accent-color:var(--paper)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form .btn{justify-self:start;margin-top:16px;cursor:pointer;background:transparent;
  /* button は color を継承しない。既定の黒文字が暗い背景に乗って消えていた */
  color:var(--paper);-webkit-appearance:none;appearance:none;
  font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.26em}
.ct-form .btn:hover{color:var(--ink)}
.ct-form .btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.contact .sec-h{color:var(--paper)}
.contact .vlabel{color:rgba(237,233,226,.4)}
.contact .rail i{background:linear-gradient(var(--paper) 38%,transparent)}
.contact .lead{color:rgba(237,233,226,.66)}
.contact .lead b{color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:19px 38px;
  border:1px solid rgba(237,233,226,.38);font-family:var(--disp);font-weight:700;
  font-size:11px;letter-spacing:.26em;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--paper);z-index:-1;
  transform:translateY(101%);transition:transform .6s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--paper)}
.btn:hover::before{transform:none}

/* ── フッタ ─────────────────────────────── */
.ft{padding:28px var(--pad);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--cond);font-size:11px;letter-spacing:.26em;color:var(--ink-40)}
.ft-partner{padding:18px var(--pad);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ft-partner img{width:128px;opacity:.72;transition:opacity .5s var(--ease)}
.ft-partner a:hover img{opacity:1}
.ft-partner p{margin:0;font-size:11px;line-height:1.9;color:var(--ink-70);max-width:44em}
.ft-partner p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .wipe{clip-path:none}
  .reveal{opacity:1;transform:none}
  .rail i{transform:scaleY(1)}
  .window video{opacity:1}
}

/* ══════════════════════════════════════════════════════════
   動きの物量（v2.2）
   「かっこいい」実例の実測: transition 85〜592 / keyframes 7〜13
   v2.1 は transition 25 しかなく「止まっている要素が多すぎた」。
   派手さではなく、**あらゆる要素が違う速度で微かに反応する**状態を作る。
   ══════════════════════════════════════════════════════════ */

/* 見出しを行ごとに流す（JSで <b class="ln"> に分割） */
.sec-h .ln{display:block;overflow:hidden}
.sec-h .ln>i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform 1.15s cubic-bezier(.22,.68,.28,1)}
.sec-h.on .ln>i{transform:none}
.sec-h.on .ln:nth-child(2)>i{transition-delay:.13s}
.sec-h.on .ln:nth-child(3)>i{transition-delay:.26s}

/* スクロール進捗（上部の細い線） */
.prog{position:fixed;inset:0 auto auto 0;height:2px;width:100%;z-index:70;
  transform:scaleX(0);transform-origin:left;background:var(--blue);
  transition:transform .12s linear,opacity .5s var(--ease);opacity:.85}

/* WORKS：画像を視差でわずかに動かす（--p は JS が入れる） */
.wk figure{--p:0}
.wk img{transform:translate3d(0,calc(var(--p)*-16px),0) scale(1.06);
  transition:transform 1.2s var(--ease-soft),filter .9s var(--ease)}
.wk a:hover img{transform:translate3d(0,calc(var(--p)*-16px),0) scale(1.12);filter:saturate(1.06)}
.wk a{transition:opacity .55s var(--ease)}
.wk:hover a{opacity:.52}
.wk:hover a:hover{opacity:1}
.wk h3{transition:transform .55s var(--ease),color .4s var(--ease)}
.wk a:hover h3{transform:translateX(7px)}
.wk p{transition:color .5s var(--ease),transform .6s var(--ease)}
.wk a:hover p{transform:translateX(7px);color:var(--ink)}
.wk figure{transition:box-shadow .7s var(--ease)}
.wk a:hover figure{box-shadow:0 18px 50px -22px rgba(22,19,15,.5)}

/* 数字：カウントアップ後に少し沈む */
.fig dd{transition:color .45s var(--ease),transform .7s var(--ease-soft),letter-spacing .6s var(--ease)}
.fig:hover dd{transform:translateY(-3px);letter-spacing:0}
.fig dt{transition:color .45s var(--ease),transform .55s var(--ease)}
.fig:hover dt{color:var(--ink);transform:translateX(4px)}
.fig{transition:padding-left .5s var(--ease),background .55s var(--ease),border-color .5s var(--ease)}
.fig:hover{background:rgba(22,19,15,.03);border-color:var(--ink-40)}

/* SERVICES：行が伸びる */
.srv{position:relative}
.srv::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.srv:hover::after{transform:scaleX(1)}
.srv h3{transition:transform .55s var(--ease),letter-spacing .6s var(--ease)}
.srv:hover h3{transform:translateX(6px);letter-spacing:.05em}
.srv p{transition:color .5s var(--ease)}
.srv:hover p{color:var(--ink)}

/* COMPANY：輪郭文字が呼吸する */
.co-mark span{transition:-webkit-text-stroke-color .8s var(--ease),color .8s var(--ease),
  transform .9s var(--ease-soft)}
.co-mark:hover span:nth-child(1){transform:translateX(-8px)}
.co-mark:hover span:nth-child(2){transform:translateX(8px)}
.co-mark:hover span:nth-child(3){transform:translateX(-4px)}
.dl dd{transition:color .45s var(--ease)}
.dl>div:hover dd{color:var(--ink)}
.dl dt{transition:color .45s var(--ease),letter-spacing .5s var(--ease)}
.dl>div:hover dt{color:var(--ink-70);letter-spacing:.3em}
.dl>div{transition:padding-left .45s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.dl>div:hover{background:rgba(22,19,15,.025)}

/* CONTACT：入力欄が反応する */
.ct-form label{transition:color .4s var(--ease)}
.ct-form label:focus-within{color:var(--paper)}
.ct-form input,.ct-form textarea{transition:border-color .45s var(--ease),background .45s var(--ease),
  box-shadow .5s var(--ease),transform .4s var(--ease)}
.ct-form input:hover,.ct-form textarea:hover{border-color:rgba(237,233,226,.42)}
.ct-form input:focus,.ct-form textarea:focus{box-shadow:0 6px 24px -14px rgba(0,0,0,.8)}
.ct-form label b{transition:background .4s var(--ease),color .4s var(--ease)}
.ct-form label:focus-within b{background:var(--paper);color:var(--ink)}
.ct-form .consent{transition:color .4s var(--ease)}
.ct-form .consent:hover{color:var(--paper)}

/* 共通：小さなラベルが反応する */
.vlabel{transition:color .5s var(--ease),letter-spacing .7s var(--ease)}
.rail:hover .vlabel{letter-spacing:.5em;color:var(--ink)}
.hero .rail:hover .vlabel{color:var(--paper)}
.kick{transition:letter-spacing .8s var(--ease),color .5s var(--ease)}
.hero:hover .kick{letter-spacing:.36em}
.scrollcue{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero.gone .scrollcue{opacity:0;transform:translateY(10px)}
.ft-partner p a{transition:color .4s var(--ease),text-underline-offset .4s var(--ease)}
.ft-partner p a:hover{text-underline-offset:6px}
.ft span{transition:color .5s var(--ease),letter-spacing .6s var(--ease)}
.ft:hover span{color:var(--ink-70);letter-spacing:.3em}

/* キーボード操作の可視化（アクセシビリティ＋反応の物量） */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;
  transition:outline-offset .25s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .sec-h .ln>i{transform:none}
  .wk img{transform:none}
  .prog{display:none}
}

/* ── 動きの物量 追加分（v2.3） ───────────────────── */

/* ヒーロー動画をゆっくり寄せる。静止画に見せない */
.hero-bg video,.hero-bg .poster{animation:kenburns 34s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}
                    to{transform:scale(1.13) translate3d(-1.2%,-1.4%,0)}}

/* 流れている見出しの先端にカーソルを出す＝ストリーミング感を強める */
.hero h1 .wipe{position:relative}
.hero h1 .wipe::after{content:"";position:absolute;top:.16em;right:-.1em;
  width:.045em;height:.74em;background:var(--paper);opacity:0;
  animation:caret 1.5s steps(1) both}
.hero h1 .wipe:nth-of-type(1)::after{animation-delay:.25s}
.hero h1 .wipe:nth-of-type(2)::after{animation-delay:.95s}
.hero h1 .wipe:nth-of-type(3)::after{animation-delay:1.65s}
@keyframes caret{0%{opacity:1}88%{opacity:1}100%{opacity:0}}

/* 区切り線が引かれる */
.sec+.sec{position:relative}
.sec+.sec::before{content:"";position:absolute;inset:0 var(--pad) auto;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  animation:lineDraw 1.6s var(--ease) both}
@keyframes lineDraw{to{transform:scaleX(1)}}

/* マスコットの周りを回る点線（3Dが読めない環境でも動きが残る） */
.hero-bg::after{content:"";position:absolute;right:6%;top:50%;width:clamp(180px,26vw,380px);
  aspect-ratio:1;translate:0 -50%;border:1px dashed rgba(237,233,226,.16);border-radius:50%;
  z-index:1;animation:orbit 42s linear infinite}
@keyframes orbit{to{rotate:360deg}}

/* スクロールキューの矢印が呼吸する */
.scrollcue::after{content:"↓";display:inline-block;font-size:11px;animation:nod 2.6s var(--ease-soft) infinite}
@keyframes nod{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(4px);opacity:1}}

/* 数字が入った直後にわずかに沈む */
.fig dd{animation:settle .9s var(--ease-soft) both}
@keyframes settle{0%{transform:translateY(-6px)}100%{transform:none}}

/* 進捗バーがうっすら光る */
.prog{animation:glow 3.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.72}50%{opacity:1}}

/* ── 反応を全要素に行き渡らせる ───────────────── */
.hd{transition:padding .5s var(--ease),background .5s var(--ease),color .5s var(--ease),
  text-shadow .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease)}
.hd .logo{transition:letter-spacing .5s var(--ease),opacity .4s var(--ease)}
.hd .logo:active{opacity:.6}
.sec-h{transition:opacity .8s var(--ease)}
.lead{transition:color .5s var(--ease)}
.lead b{transition:color .4s var(--ease),background .4s var(--ease)}
.accent{transition:color .5s var(--ease),text-shadow .5s var(--ease)}
.srv .no{transition:color .45s var(--ease),transform .5s var(--ease),letter-spacing .5s var(--ease)}
.srv:hover .no{transform:translateY(-2px)}
.srv .en{transition:color .4s var(--ease),letter-spacing .5s var(--ease),opacity .4s var(--ease)}
.wk .no{transition:color .4s var(--ease),letter-spacing .5s var(--ease)}
.wk a:hover .no{letter-spacing:.42em}
.wk .view{transition:opacity .55s var(--ease),transform .55s var(--ease),letter-spacing .6s var(--ease)}
.wk a:hover .view{letter-spacing:.42em}
.wk figure::after{transition:opacity .6s var(--ease),background .6s var(--ease)}
.co-mark{transition:opacity .7s var(--ease)}
.btn{transition:color .45s var(--ease),border-color .45s var(--ease),letter-spacing .5s var(--ease)}
.btn:hover{letter-spacing:.32em}
.btn span{transition:transform .5s var(--ease)}
.btn:hover span{transform:translate(4px,-4px)}
.ft-partner img{transition:opacity .5s var(--ease),transform .6s var(--ease-soft)}
.ft-partner a:hover img{transform:translateY(-3px)}
.rail i{transition:transform 1.4s var(--ease),background .6s var(--ease)}
.contact .sec-h{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.dl>div:last-child{transition:border-color .5s var(--ease)}
.ct-form .consent input{transition:transform .3s var(--ease)}
.ct-form .consent:hover input{transform:scale(1.1)}
.vlabel{transition:color .5s var(--ease),letter-spacing .7s var(--ease),opacity .5s var(--ease)}
.kick{transition:letter-spacing .8s var(--ease),color .5s var(--ease),opacity .6s var(--ease)}
.hero .lead{transition:color .5s var(--ease),opacity .6s var(--ease)}
.hero-bg video{transition:opacity 1.6s var(--ease-soft),filter 1.2s var(--ease)}
.wk a:focus-visible figure{transition:box-shadow .4s var(--ease)}
.srv:focus-within{background:rgba(22,19,15,.028)}
.srv{transition:background .5s var(--ease),padding-left .5s var(--ease),border-color .5s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .hero-bg video,.hero-bg .poster,.hero-bg::after,.scrollcue::after,
  .fig dd,.prog,.sec+.sec::before,.hero h1 .wipe::after{animation:none!important}
  .sec+.sec::before{transform:scaleX(1)}
}

/* ══════════════════════════════════════════════════════════
   下層（works/*.html）— トップと同じ書体・トーンに揃える
   ══════════════════════════════════════════════════════════ */
.wd-hero{padding:clamp(120px,17vh,190px) var(--pad) clamp(40px,7vh,80px);
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:clamp(18px,4vw,54px)}
.crumb{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);
  font-size:11px;letter-spacing:.26em;color:var(--ink-40);margin:0 0 clamp(22px,4vh,44px);
  transition:color .4s var(--ease),gap .45s var(--ease)}
.crumb:hover{color:var(--ink);gap:16px}
.wd-hero h1{font-family:var(--mincho);font-weight:400;margin:0 0 clamp(20px,3.4vh,36px);
  font-size:clamp(38px,7.4vw,104px);line-height:1.08;letter-spacing:-.03em}
.wd-cover{margin:clamp(34px,6vh,72px) 0 0;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  -webkit-mask:linear-gradient(#000 88%,transparent);mask:linear-gradient(#000 88%,transparent)}
.wd-cover img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.6s var(--ease-soft)}
.wd-cover:hover img{transform:scale(1.07)}
.case{border-top:1px solid var(--line);display:grid;
  grid-template-columns:120px minmax(0,.92fr) minmax(0,1.1fr);
  gap:clamp(10px,2.4vw,34px);padding:clamp(24px,3.6vw,42px) 0;align-items:start;
  transition:background .5s var(--ease),padding-left .5s var(--ease)}
@media(max-width:900px){.case{grid-template-columns:96px minmax(0,1fr)}
  .case .case-t{grid-column:2}}
@media(max-width:560px){.case{grid-template-columns:1fr;gap:8px}
  .case .case-t{grid-column:1}.case .step{padding-top:0}}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case:hover{background:rgba(22,19,15,.028);padding-left:14px}
.case .step{font-family:var(--disp);font-weight:800;font-size:10px;letter-spacing:.22em;
  color:var(--ink-40);padding-top:.7em;transition:color .45s var(--ease)}
.case:hover .step{color:var(--blue)}
.case h3{font-family:var(--mincho);font-weight:600;margin:0;
  font-size:clamp(17px,2.1vw,25px);letter-spacing:.015em;
  transition:transform .55s var(--ease)}
.case:hover h3{transform:translateX(6px)}
.case .case-t{margin:0;max-width:30em;padding-top:.25em;color:var(--ink-70);font-size:14.5px;transition:color .5s var(--ease)}
.next{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(52px,9vh,110px) var(--pad);background:var(--ink);color:var(--paper);
  transition:background .6s var(--ease)}
.next:hover{background:#0d0b09}
.next p{margin:0 0 10px;font-family:var(--cond);font-size:11px;letter-spacing:.28em;
  color:rgba(237,233,226,.5)}
.next h2{font-family:var(--mincho);font-weight:400;margin:0;
  font-size:clamp(26px,4.6vw,62px);letter-spacing:-.01em;
  transition:transform .7s var(--ease-soft)}
.next:hover h2{transform:translateX(14px)}
.next i{font-style:normal;font-size:clamp(26px,3.6vw,46px);
  transition:transform .7s var(--ease-soft)}
.next:hover i{transform:translate(10px,-10px)}
@media(max-width:640px){.next{flex-direction:column;align-items:flex-start}}
/* 下層は背景が生成りなので、ヘッダの文字を最初から黒で置く */
.hd.light{color:var(--ink);text-shadow:none}
.hd.light nav a{color:var(--ink-70)}
.hd.light nav a:hover{color:var(--ink)}

/* 最後の節と NEXT の間が空きすぎるので詰める */
main>.sec:last-of-type{padding-bottom:clamp(54px,8vh,96px)}

/* 送信結果の表示。v1 にはあったが v2 で落ちていた（送っても何も出ない状態だった） */
.form-result{margin:0 0 18px;padding:13px 16px;font-size:14px;line-height:1.7;
  border-left:2px solid var(--blue);background:rgba(237,233,226,.09);color:var(--paper)}
.form-result.ng{border-left-color:#c2603f}