@charset "utf-8";
/* =========================================================
   Quuma / 松井琢人 ポートフォリオ
   スプラトゥーン風リニューアル
   - ライム × パープル × 黒 をベースに、
     セクションごとに --ink を差し替えて色を塗り替える
   ========================================================= */

/* ---------- デザイントークン ---------- */
:root{
  /* ベースインク */
  --ink-lime:#c8f000;
  --ink-lime-deep:#9dbd00;
  --ink-purple:#7b2fbe;
  --ink-purple-lit:#a24ff0;   /* 黒地でも影として見えるパープル */
  --ink-purple-deep:#4a1580;

  /* 下地 */
  --bg:#060608;
  --bg-2:#0d0d13;
  --panel:#131319;
  --outline:#07070b;
  --text:#f7f7f2;
  --muted:#9d9da8;

  /* セクションインク（各セクションで --ink を上書き） */
  --c-orange:#ff9500;
  --c-pink:#ed006f;
  --c-blue:#1268ff;
  --c-cyan:#02bcc9;
  --c-purple:#7e23ef;
  --c-green:#56d600;
  --ink:var(--ink-lime);

  /* ナビの現在色（JSがセクションに合わせて差し替える） */
  --nav-ink:var(--ink-lime);

  --maxw:1320px;
  --pad:clamp(20px, 4vw, 72px);

  /* 角を斜めに切る（ステッカー） */
  --cut-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  --cut:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  --cut-lg:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);

  --font-ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",
            "Noto Sans JP",system-ui,-apple-system,sans-serif;
  /* Bungee は英数字のみ持つため、日本語は Dela Gothic One に自動で落ちる */
  --font-display:"Bungee","Dela Gothic One","Hiragino Kaku Gothic ProN",sans-serif;
  --font-display-ja:"Dela Gothic One","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-num:"Barlow Condensed","Bungee",system-ui,sans-serif;
  /* Comic Sans MS は英数字しか持たないため、日本語は手書き風の Yusei Magic に落ちる。
     Comic Sans を先に置くので英数字は Comic Sans のまま（Yusei Magic の英数字は使われない） */
  --font-comic:"Comic Sans MS","Comic Sans","Chalkboard SE","Yusei Magic",var(--font-ja);

  --ease-pop:cubic-bezier(.2,1.35,.35,1);

  /* ガラス面の共通レシピ（年表タイルと Q STORY の gear で共有）。
     色は各カードの --c が担当し、ここは下地・縁・てかりだけを持つ。 */
  --glass-sheet:linear-gradient(158deg,
                  rgba(255,255,255,.10) 0%,
                  rgba(255,255,255,.025) 45%,
                  rgba(255,255,255,.05) 100%),
                rgba(12,12,18,.66);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.34),
              inset 0 -1px 0 rgba(255,255,255,.08),
              0 16px 40px -28px rgba(0,0,0,.95);
  --glass-sheen:linear-gradient(to bottom,rgba(255,255,255,.11),transparent);
  --glass-blur:blur(14px) saturate(1.2);
  --glass-r:clamp(14px,1.5vw,22px);

  /* 登場アニメは transform ではなく translate/scale/rotate を使う。
     要素側の transform（傾き・ホバー）と合成されるので打ち消し合わない。
     自前の transition を持つ要素は、この変数を自分のリストに足すこと。 */
  --t-reveal:opacity .5s ease,
             translate .62s var(--ease-pop),
             scale .62s var(--ease-pop),
             rotate .62s var(--ease-pop);
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* hidden 属性は常に効かせる。
   ブラウザ標準の [hidden]{display:none} はクラス指定の display に負けるため、
   JS で hidden を立てても要素が残り、透明なまま操作を奪うことがある。 */
[hidden]{display:none!important}
html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
  /* 端末標準のグレーではなく、サイトのライムでタップを返す */
  -webkit-tap-highlight-color:rgba(200,240,0,.22);
}
body{
  font-family:var(--font-ja);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ink-lime);outline-offset:3px;border-radius:2px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:fixed;top:-72px;left:16px;z-index:500;
  padding:12px 20px;background:var(--ink-lime);color:var(--outline);
  font-family:var(--font-display-ja);font-size:14px;
  clip-path:var(--cut-sm);transition:top .2s;
}
.skip-link:focus{top:8px}

.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;z-index:2;
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* --- ステッカー（角を切った太枠バッジ） --- */
.sticker{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(9.5px,.86vw,12px);
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.5;
  padding:7px 14px;
  background:var(--text);
  color:var(--outline);
  clip-path:var(--cut-sm);
  transform:rotate(-1.8deg);
}
.sticker--lime{background:var(--ink-lime)}
.sticker--ink{background:var(--ink);color:var(--outline)}
.sticker--tilt-a{transform:rotate(-3.2deg)}
.sticker--tilt-b{transform:rotate(2.4deg)}

/* --- ハザードストライプ --- */
.hazard{
  display:inline-block;vertical-align:middle;
  width:clamp(42px,6vw,92px);height:11px;margin-right:12px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,transparent 6px 12px);
}

/* --- セクション上端のインクの垂れ --- */
.ink-edge{
  position:absolute;top:0;left:0;
  width:100%;height:clamp(42px,5.4vw,84px);
  color:var(--ink);fill:currentColor;
  z-index:8;pointer-events:none;
}

/* --- 背景に散らすインク --- */
/* --py は main.js がスクロール量に応じて入れる（パララックス） */
.deco{
  position:absolute;z-index:0;pointer-events:none;
  fill:currentColor;
  transform:translateY(var(--py,0px)) rotate(var(--rot,0deg));
  will-change:transform;
}

/* --- 極太の傾いた見出し ---
   縁取り(.1em)は外側へ約.05em広がるので、
   影のオフセットはそれより十分大きく取らないと影が隠れる */
.h-splat{
  font-family:var(--font-display-ja);
  font-weight:400;
  line-height:1.42;
  letter-spacing:.005em;
  color:var(--text);
  -webkit-text-stroke:.1em var(--outline);
  paint-order:stroke fill;
  text-shadow:.11em .15em 0 var(--ink);
}
.h-splat .ln{
  display:block;width:fit-content;
  transform:rotate(-2.1deg);
  transform-origin:left center;
}
.h-splat .ln:nth-child(2){transform:rotate(1.3deg)}
.h-splat .ln:nth-child(3){transform:rotate(-1.6deg)}

/* --- 筆跡の下線 --- */
.brush-under{position:relative;display:inline-block;padding-bottom:clamp(15px,1.8vw,26px)}
.brush-under > span{position:relative;z-index:2}
.brush{
  position:absolute;left:-2.5%;bottom:0;
  width:105%;height:clamp(13px,1.5vw,24px);
  color:var(--ink);fill:currentColor;z-index:1;
}
[data-reveal] .brush{clip-path:inset(0 100% 0 0)}
[data-reveal].is-in .brush{
  clip-path:inset(0 0 0 0);
  transition:clip-path .85s cubic-bezier(.3,.8,.3,1) .2s;
}

/* --- 押せるインクボタン --- */
.btn-ink{
  position:relative;display:inline-block;
  transform:rotate(-2deg);
  filter:drop-shadow(7px 9px 0 var(--ink-purple));
  transition:transform .18s var(--ease-pop),filter .18s ease,var(--t-reveal);
}
.btn-ink__txt{
  display:block;
  background:var(--ink-lime);
  color:var(--outline);
  border:3px solid var(--outline);
  font-family:var(--font-display-ja);
  font-size:clamp(15px,1.55vw,24px);
  letter-spacing:.04em;line-height:1.4;
  padding:clamp(16px,1.9vw,26px) clamp(28px,4vw,68px);
  clip-path:var(--cut-lg);
  white-space:nowrap;
}
.btn-ink__txt i{font-style:normal}
.btn-ink__drip{
  position:absolute;left:6%;right:6%;top:calc(100% - 10px);height:30px;
  background:var(--ink-lime);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' fill='%23fff'%3E%3Cpath d='M0 0h200v8H0z'/%3E%3Crect x='28' y='4' width='13' height='22' rx='6.5'/%3E%3Crect x='68' y='4' width='8' height='12' rx='4'/%3E%3Crect x='96' y='4' width='10' height='16' rx='5'/%3E%3Crect x='150' y='4' width='12' height='28' rx='6'/%3E%3C/svg%3E") repeat-x 0 0/200px 30px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' fill='%23fff'%3E%3Cpath d='M0 0h200v8H0z'/%3E%3Crect x='28' y='4' width='13' height='22' rx='6.5'/%3E%3Crect x='68' y='4' width='8' height='12' rx='4'/%3E%3Crect x='96' y='4' width='10' height='16' rx='5'/%3E%3Crect x='150' y='4' width='12' height='28' rx='6'/%3E%3C/svg%3E") repeat-x 0 0/200px 30px;
  pointer-events:none;
}
.btn-ink:hover{transform:rotate(-2deg) translate(-2px,-3px);filter:drop-shadow(10px 13px 0 var(--ink-purple))}
.btn-ink:active{transform:rotate(-2deg) translate(5px,7px);filter:drop-shadow(2px 3px 0 var(--ink-purple))}

/* =========================================================
   開幕インク
   ========================================================= */
.curtain{position:fixed;inset:0;z-index:400;pointer-events:none}
.curtain span{position:absolute;inset:0;display:block}
.curtain span::after{
  content:"";position:absolute;top:calc(100% - 1px);left:0;right:0;height:64px;
  background:inherit;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='%23fff'%3E%3Cpath d='M0 0h240v22H0z'/%3E%3Ccircle cx='0' cy='22' r='20'/%3E%3Ccircle cx='46' cy='24' r='26'/%3E%3Ccircle cx='104' cy='20' r='16'/%3E%3Ccircle cx='156' cy='25' r='24'/%3E%3Ccircle cx='206' cy='20' r='15'/%3E%3Ccircle cx='240' cy='22' r='20'/%3E%3Crect x='148' y='40' width='16' height='26' rx='8'/%3E%3Crect x='40' y='42' width='13' height='20' rx='6.5'/%3E%3Crect x='198' y='40' width='10' height='15' rx='5'/%3E%3C/svg%3E") repeat-x 0 0/240px 64px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='%23fff'%3E%3Cpath d='M0 0h240v22H0z'/%3E%3Ccircle cx='0' cy='22' r='20'/%3E%3Ccircle cx='46' cy='24' r='26'/%3E%3Ccircle cx='104' cy='20' r='16'/%3E%3Ccircle cx='156' cy='25' r='24'/%3E%3Ccircle cx='206' cy='20' r='15'/%3E%3Ccircle cx='240' cy='22' r='20'/%3E%3Crect x='148' y='40' width='16' height='26' rx='8'/%3E%3Crect x='40' y='42' width='13' height='20' rx='6.5'/%3E%3Crect x='198' y='40' width='10' height='15' rx='5'/%3E%3C/svg%3E") repeat-x 0 0/240px 64px;
}
.curtain__a{background:var(--ink-lime);animation:curtainUp .66s cubic-bezier(.66,0,.34,1) .2s both}
.curtain__b{background:var(--ink-purple);animation:curtainUp .66s cubic-bezier(.66,0,.34,1) .04s both}
@keyframes curtainUp{from{transform:translateY(0)}to{transform:translateY(-115%)}}

/* =========================================================
   ヘッダーナビ
   ========================================================= */
.site-header{
  /* スクリム(125)より上。ここが下だとメニューを閉じる×が押せなくなる */
  position:fixed;inset:0 0 auto 0;z-index:135;
  display:flex;justify-content:flex-end;
  padding:20px clamp(18px,3.2vw,52px);
  padding-top:max(20px, env(safe-area-inset-top));
  transition:background .35s ease,padding .35s ease,backdrop-filter .35s ease;
  pointer-events:none;
}
.site-header.is-stuck{
  background:rgba(6,6,8,.8);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:12px;
  box-shadow:0 3px 0 rgba(200,240,0,.28);
}
.gnav{pointer-events:auto}
.gnav__list{display:flex;gap:clamp(8px,1vw,16px);align-items:center}
.gnav__list a{
  display:block;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.85));
  transform:rotate(-1.7deg);
  transition:transform .25s var(--ease-pop),filter .25s ease;
}
.gnav__list li:nth-child(even) a{transform:rotate(1.7deg)}
.gnav__list a span{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(10px,.88vw,12.5px);
  letter-spacing:.05em;
  line-height:1;
  padding:11px 15px;
  color:var(--text);
  background:rgba(10,10,15,.9);
  border:2px solid rgba(247,247,242,.3);
  clip-path:var(--cut-sm);
  white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.gnav__list a:hover span,
.gnav__list a:focus-visible span,
.gnav__list a[aria-current="page"] span{
  background:var(--nav-ink);
  color:var(--outline);
  border-color:var(--outline);
}
.gnav__list a:hover{transform:rotate(-1.7deg) scale(1.07)}
.gnav__list li:nth-child(even) a:hover{transform:rotate(1.7deg) scale(1.07)}

.gnav__toggle{display:none}
.nav-scrim{display:none}

/* =========================================================
   セクション共通
   ========================================================= */
.section{
  position:relative;
  min-height:100svh;
  padding-block:clamp(96px,11vh,148px);
  display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;
  overflow:hidden;
}
.section--hero{padding-block:0}
.section--profile{--ink:var(--c-orange);background:var(--bg)}
.section--qstory {--ink:var(--c-pink);  background:var(--bg-2)}
.section--works  {--ink:var(--c-blue);  background:var(--bg)}
.section--contact{--ink:var(--c-cyan);  background:var(--bg-2)}

/* 網点のうっすらした地紋 */
.section--qstory::before,
.section--contact::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  color:rgba(247,247,242,.055);
  background-image:radial-gradient(currentColor 1.3px,transparent 1.4px);
  background-size:10px 10px;
}

/* 左右の縦書き識別テキスト */
.side{
  position:absolute;top:50%;z-index:6;
  font-family:var(--font-display);
  font-size:clamp(8.5px,.72vw,11px);
  letter-spacing:.16em;
  color:rgba(247,247,242,.4);
  white-space:nowrap;
  pointer-events:none;
}
.side em{font-style:normal;color:var(--ink)}
.side--left{
  left:clamp(8px,1.3vw,22px);
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
}
.side--right{
  right:clamp(8px,1.3vw,22px);
  transform:translateY(-50%);
  writing-mode:vertical-rl;
}
@media (max-width:1000px){ .side{display:none} }

/* スクロールヒント */
.scroll-hint{
  position:absolute;right:clamp(14px,2.4vw,40px);bottom:clamp(24px,6vh,64px);
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:10px;letter-spacing:.16em;
  color:var(--text);
  writing-mode:vertical-rl;
}
.scroll-hint i{
  display:block;width:8px;height:70px;border-radius:0 0 4px 4px;
  background:linear-gradient(to bottom,var(--ink-lime),rgba(200,240,0,.05));
  animation:inkDrip 2.1s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes inkDrip{
  0%,100%{transform:scaleY(.45);opacity:.5}
  55%{transform:scaleY(1);opacity:1}
}
@media (max-width:1000px){ .scroll-hint{display:none} }

/* セクション見出し（番号＋ラベル） */
.sec-head{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);
  margin-bottom:clamp(16px,2.4vh,30px);
}
.sec-head--right{justify-content:flex-end}
.sec-head--center{justify-content:center}
.sec-head__num{
  position:relative;display:block;flex:none;
  width:clamp(56px,5.8vw,90px);aspect-ratio:1;
}
.sec-head__num svg{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--ink);fill:currentColor;
}
.sec-head__num em{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-style:normal;line-height:1;
  font-size:clamp(19px,2.1vw,33px);color:var(--outline);
}
.sec-head__label{
  font-family:var(--font-display);
  font-size:clamp(19px,2.5vw,40px);
  letter-spacing:.02em;line-height:1;
  color:var(--text);
  -webkit-text-stroke:.07em var(--outline);
  paint-order:stroke fill;
  text-shadow:.085em .115em 0 var(--ink);
  transform:rotate(-2.2deg);
}

/* スクロール表示アニメーション */
[data-reveal]{
  opacity:0;translate:0 26px;
  transition:var(--t-reveal);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal="splat"]{
  translate:0 28px;scale:.9;rotate:-7deg;
  transition-delay:calc(var(--i,0) * 85ms);
}
[data-reveal].is-in{opacity:1;translate:0 0;scale:1;rotate:0deg}

/* =========================================================
   01 FIRST VIEW
   ========================================================= */
.section--hero{
  min-height:100svh;
  align-items:center;justify-content:center;
  background:#000;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.hero__img{
  position:absolute;top:0;height:100%;width:46%;
  object-fit:cover;
  animation:heroIn 1.15s cubic-bezier(.2,.8,.25,1) .55s both;
}
/* 中央には大きな焼き込み見出しがあるので、必ず端（0% / 100%）を見せること。
   端に焼き込まれていた縦ラベルは scripts/clean-hero.js で塗り潰し済み。 */
.hero__img--l{
  left:0;object-position:0% 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 82%);
  mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 82%);
}
.hero__img--r{
  right:0;object-position:100% 50%;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 36%,transparent 82%);
  mask-image:linear-gradient(270deg,#000 0%,#000 36%,transparent 82%);
}
@keyframes heroIn{
  from{opacity:0;transform:scale(1.12);filter:saturate(.4)}
  to{opacity:1;transform:scale(1);filter:saturate(1)}
}
/* 中央を暗く落として、画像に焼き込まれた文字を隠す */
.hero__halftone{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 62% at 50% 50%,#000 0%,#000 46%,rgba(0,0,0,.72) 70%,transparent 100%),
    linear-gradient(180deg,rgba(0,0,0,.7) 0%,transparent 26%,transparent 68%,rgba(0,0,0,.85) 100%);
}
.hero__halftone::after{
  content:"";position:absolute;inset:0;
  color:rgba(200,240,0,.10);
  background-image:radial-gradient(currentColor 1.2px,transparent 1.3px);
  background-size:8px 8px;
}

.hero__inner{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--pad);
  display:flex;justify-content:center;
}
.hero__copy{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.8vh,24px)}
.hero__kicker{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(8px,.9vw,14px) clamp(10px,1.2vw,18px);
}
/* 見出しが 6vw まで伸びるので、キッカーも vw で追従させないと画面が広いほど
   相対的に小さく見える。余白は em にして文字サイズと一緒に育てる */
.hero__kicker .sticker{font-size:clamp(13px,1.9vw,26px);padding:.5em 1.15em}

.hero__lead{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(2px,.6vh,10px);
  font-family:var(--font-display-ja);
  font-size:clamp(30px,6vw,92px);
  line-height:1.18;letter-spacing:.005em;
  -webkit-text-stroke:.085em var(--outline);
  paint-order:stroke fill;
}
.hero__ln{display:block;white-space:nowrap}
.hero__ln--1{transform:rotate(-2.6deg)}
.hero__ln--2{transform:rotate(1.5deg)}
.hero__ln--3{transform:rotate(-1.8deg)}
.hero__lead b{font-weight:400;font-style:normal}
.i-w    {color:var(--text);      text-shadow:.1em .14em 0 var(--ink-lime)}
.i-lime {color:var(--ink-lime);  text-shadow:.1em .14em 0 var(--ink-purple-lit)}
.i-blue {color:#4d95ff;          text-shadow:.1em .14em 0 var(--ink-purple-lit)}
.i-green{color:#6bea1f;          text-shadow:.1em .14em 0 var(--ink-purple-lit)}

.hero__brand{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(30px,5.6vw,86px);
  line-height:1;letter-spacing:.02em;
  color:var(--ink-lime);
  -webkit-text-stroke:.07em var(--outline);
  paint-order:stroke fill;
  text-shadow:.09em .125em 0 var(--ink-purple-lit);
  transform:rotate(-2.4deg);
  margin-top:clamp(4px,1vh,14px);
}

/* =========================================================
   02 PROFILE
   ========================================================= */
.deco--p1{
  width:clamp(200px,26vw,420px);aspect-ratio:1;
  top:6%;right:-6%;color:var(--ink-purple);opacity:.5;
  --rot:18deg;
}
.deco--p2{
  width:clamp(150px,18vw,300px);aspect-ratio:1;
  bottom:4%;left:-7%;color:var(--ink);opacity:.16;
  --rot:-24deg;
}

.profile__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(16px,2.2vh,26px)}
.badge-row .sticker:nth-child(even){transform:rotate(2deg)}

.profile__title{
  font-size:clamp(19px,2.35vw,36px);
  margin-bottom:clamp(18px,2.6vh,30px);
}
.profile__name{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:clamp(14px,1.15vw,17px);color:var(--text);
}
.profile__name strong{
  font-family:var(--font-display-ja);font-weight:400;
  font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;
}
.profile__name .sep{color:var(--ink)}
.profile__role{
  font-size:clamp(11px,.95vw,13px);letter-spacing:.06em;
  color:var(--muted);margin-top:2px;
}
/* 引用ブロックを外したぶん、この2文が左カラムの締めになる。
   1文目を主役として大きく、2文目は一段落として階層をつける */
.profile__lead{
  font-family:var(--font-comic);
  margin-top:clamp(18px,2.5vh,26px);font-size:clamp(15px,1.35vw,19px);
  line-height:1.9;color:rgba(247,247,242,.92);
}
.profile__lead--alt{
  margin-top:10px;font-size:clamp(13.5px,1.1vw,16px);
  line-height:1.95;color:var(--muted);
}
.profile__lead b{color:var(--ink-lime);font-weight:700}

.profile__photo{position:relative;isolation:isolate}
.profile__photo-blob{
  position:absolute;inset:-9% -7%;width:114%;height:118%;
  color:var(--ink);fill:currentColor;opacity:.9;z-index:0;
  transform:rotate(-6deg);
}
.profile__photo img{
  position:relative;z-index:1;
  width:100%;height:auto;
  clip-path:url(#blobClip);
  transform:rotate(1.6deg);
}

/* --- ステータス（ガラスパネル） --- */
.stats-box{
  position:relative;isolation:isolate;
  margin-top:clamp(30px,5vh,58px);
  padding:clamp(20px,2.4vw,34px) clamp(18px,2.2vw,36px);
  border-radius:clamp(20px,2.4vw,34px);
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(158deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 38%,
      rgba(255,255,255,.015) 62%,
      rgba(255,255,255,.06) 100%),
    rgba(12,12,18,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 0 70px rgba(255,255,255,.045),
    0 26px 60px -26px rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  overflow:hidden;
}
/* 上面のスペキュラと、右上のにじむ光 */
.stats-box::before,
.stats-box::after{content:"";position:absolute;pointer-events:none;z-index:0}
.stats-box::before{
  left:0;right:0;top:0;height:58%;
  background:linear-gradient(to bottom,rgba(255,255,255,.09),transparent);
}
.stats-box::after{
  top:-45%;right:-8%;width:58%;height:170%;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent 72%);
}
.stats-box > *{position:relative;z-index:1}
.stats-box__head{
  display:flex;align-items:center;
  font-family:var(--font-display);
  font-size:clamp(13px,1.3vw,19px);letter-spacing:.05em;
  color:var(--text);margin-bottom:clamp(14px,1.8vh,22px);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.stats{display:grid;gap:clamp(9px,1.2vh,15px)}
.stat{
  display:grid;
  grid-template-columns:clamp(76px,8vw,110px) minmax(0,1fr) clamp(48px,5vw,66px);
  align-items:center;gap:clamp(10px,1.4vw,20px);
}
.stat__name{
  font-size:clamp(11px,.95vw,13.5px);font-weight:700;
  letter-spacing:.04em;color:rgba(247,247,242,.9);
}
.stat__bar{display:flex;gap:clamp(4px,.55vw,9px);height:clamp(16px,1.7vw,24px)}
/* 消灯：奥に沈んだガラスのくぼみ */
.stat__bar i{
  flex:1;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.45);
  transition:background .22s ease,box-shadow .22s ease;
}
/* 点灯：てかりのあるオレンジのバー */
.stat__bar i.is-on{
  background:linear-gradient(180deg,
    #ffc266 0%,
    #ff9d1c 14%,
    #f28c07 42%,
    #d16b00 50%,
    #ef8300 58%,
    #ffa42c 86%,
    #ffbd5c 100%);
  box-shadow:
    0 0 20px -2px rgba(255,145,10,.6),
    0 0 6px rgba(255,175,60,.5),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(120,52,0,.5);
}
.stat__val{
  font-family:var(--font-display);
  font-size:clamp(13px,1.35vw,20px);line-height:1;
  color:var(--ink);text-align:right;
  text-shadow:0 0 16px rgba(255,150,20,.45);
}
.stat__val span{font-size:.6em;color:rgba(247,247,242,.45);text-shadow:none}

/* --- 年表（ステージタイル） --- */
.stages{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.5vw,22px);
  margin-top:clamp(26px,4vh,48px);
}
/* カード自体がその色のガラス板。--c は HTML 側で 1 枚ずつ指定している。
   同じレシピを Q STORY の .gear でも使う（--glass-* は :root 参照）。 */
.stage,
.gear{
  border-radius:var(--glass-r);
  border:1px solid rgba(247,247,242,.16);
  background:var(--glass-sheet);
  box-shadow:var(--glass-rim);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .stage,
  .gear{
    border-color:color-mix(in srgb,var(--c,var(--ink)) 42%,rgba(247,247,242,.16));
    background:
      linear-gradient(158deg,
        color-mix(in srgb,var(--c,var(--ink)) 16%,transparent) 0%,
        rgba(255,255,255,.025) 45%,
        color-mix(in srgb,var(--c,var(--ink)) 9%,transparent) 100%),
      rgba(12,12,18,.66);
    box-shadow:
      0 0 30px -12px color-mix(in srgb,var(--c,var(--ink)) 75%,transparent),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 0 45px -14px color-mix(in srgb,var(--c,var(--ink)) 45%,transparent),
      0 16px 40px -28px rgba(0,0,0,.95);
  }
  .stage:hover,
  .gear:hover{
    box-shadow:
      0 0 42px -10px color-mix(in srgb,var(--c,var(--ink)) 85%,transparent),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 0 55px -12px color-mix(in srgb,var(--c,var(--ink)) 55%,transparent),
      0 16px 40px -28px rgba(0,0,0,.95);
    border-color:color-mix(in srgb,var(--c,var(--ink)) 62%,rgba(247,247,242,.16));
  }
}
/* 上端のてかり（旧・板の描画から差し替え） */
.stage::before,
.gear::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:0;
  background:var(--glass-sheen);
  border:0;clip-path:none;border-radius:var(--glass-r) var(--glass-r) 0 0;
  pointer-events:none;
}
.stage{
  position:relative;isolation:isolate;
  padding:clamp(16px,1.7vw,24px) clamp(12px,1.2vw,18px);
  transform:none;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.stage > *{position:relative;z-index:1}
.stage__num{
  position:relative;display:block;
  width:clamp(42px,4.4vw,64px);aspect-ratio:1;margin-bottom:10px;
}
.stage__num svg{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--c,var(--ink));fill:currentColor;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c,var(--ink)) 70%,transparent))
         drop-shadow(0 0 3px rgba(255,255,255,.35));
}
.stage__num em{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-style:normal;line-height:1;
  font-size:clamp(14px,1.45vw,21px);color:var(--outline);
}
.stage p{font-size:clamp(10.5px,.88vw,12.5px);line-height:1.72;color:rgba(247,247,242,.85)}

/* --- PROFILE STORY 展開パネル --- */
.story{margin-top:clamp(26px,4vh,46px)}
.story__btn{
  position:relative;
  display:flex;align-items:center;gap:16px;width:100%;
  padding:18px clamp(16px,2vw,28px);
  text-align:left;min-height:60px;
  transform:rotate(-.6deg);
  transition:transform .25s var(--ease-pop);
}
.story__btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--ink);
  clip-path:var(--cut);
  transition:filter .25s ease;
}
.story__btn > *{position:relative;z-index:1}
.story__btn:hover{transform:rotate(-.6deg) translateY(-2px)}
.story__btn:hover::before{filter:brightness(1.15)}
.story__btn-label{
  font-family:var(--font-display);font-size:clamp(12px,1.15vw,16px);
  letter-spacing:.04em;color:var(--outline);
}
.story__btn-sub{font-size:12px;color:rgba(7,7,11,.72);letter-spacing:.04em;font-weight:700}
.story__btn-icon{margin-left:auto;position:relative;width:18px;height:18px;flex:none}
.story__btn-icon::before,.story__btn-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--outline);
  transform:translate(-50%,-50%);transition:transform .3s ease,opacity .3s ease;
}
.story__btn-icon::before{width:18px;height:3px}
.story__btn-icon::after{width:3px;height:18px}
.story__btn[aria-expanded="true"] .story__btn-icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

.story__panel{overflow:hidden}
.story__inner{
  position:relative;margin-top:10px;
  padding:clamp(24px,3vw,42px) clamp(18px,2.6vw,38px) clamp(24px,3vw,38px);
  background:var(--panel);
  border:2px solid rgba(247,247,242,.14);
  clip-path:var(--cut-lg);
  /* ミシン目のラベル列 + スクロールする本文 */
  display:grid;
  grid-template-columns:clamp(74px,8vw,116px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);
  align-items:start;
}

/* --- 左のラベル（ミシン目つき） --- */
.story__tag{
  position:relative;align-self:stretch;
  display:grid;place-items:center;
  padding-right:clamp(14px,2vw,26px);
  font-family:var(--font-display);
  font-size:clamp(13px,1.4vw,20px);letter-spacing:.06em;
  color:var(--ink);line-height:1;
  text-align:center;
}
.story__tag::after{
  content:"";position:absolute;top:2px;bottom:2px;right:0;width:3px;
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(247,247,242,.55) 0 7px,
    transparent 7px 14px
  );
}

/* --- スクロール領域 --- */
.story__view{position:relative;min-width:0}
/* 上下の見切れフェード（スクロールできることを示す） */
.story__view::before,
.story__view::after{
  content:"";position:absolute;left:0;right:12px;height:34px;
  pointer-events:none;z-index:2;
  opacity:1;transition:opacity .25s ease;
}
.story__view::before{top:0;background:linear-gradient(to bottom,var(--panel),transparent)}
.story__view::after{bottom:0;background:linear-gradient(to top,var(--panel),transparent)}
.story__view.is-top::before{opacity:0}
.story__view.is-end::after{opacity:0}

.story__scroll{
  height:clamp(260px,42vh,420px);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  padding-right:clamp(12px,1.4vw,20px);
}
/* Firefox 系だけ標準プロパティで色をつける。
   Chrome / Safari で両方を書くと ::-webkit-scrollbar の指定が無視され、
   スクロールしない限り見えないオーバーレイ表示に戻ってしまう。 */
@supports not selector(::-webkit-scrollbar){
  .story__scroll{
    scrollbar-width:thin;
    scrollbar-color:var(--ink) rgba(247,247,242,.10);
  }
}
.story__scroll:focus-visible{
  outline:3px solid var(--ink);outline-offset:4px;
}
/* スクロールバー（WebKit / Blink）：本体色の丸いつまみ */
.story__scroll::-webkit-scrollbar{width:9px}
.story__scroll::-webkit-scrollbar-track{
  background:rgba(247,247,242,.10);border-radius:99px;
}
.story__scroll::-webkit-scrollbar-thumb{
  background:var(--ink);border-radius:99px;
  border:2px solid var(--panel);background-clip:padding-box;
}
.story__scroll::-webkit-scrollbar-thumb:hover{filter:brightness(1.15)}
.story__body>*:last-child{margin-bottom:0}

.story__h{
  font-family:var(--font-display-ja);font-weight:400;
  font-size:clamp(16px,1.7vw,24px);line-height:1.55;margin-bottom:18px;
  color:var(--text);
}
.story__meta{
  font-family:var(--font-comic);
  font-size:13px;color:var(--muted);letter-spacing:.05em;margin-bottom:22px;line-height:1.8
}
.story__inner p{
  font-family:var(--font-comic);
  font-size:clamp(13.5px,1vw,15px);line-height:2.05;margin-bottom:15px;color:rgba(247,247,242,.88)
}
.story__q{color:var(--ink-lime);font-weight:700}
/* 締めの一文だけは今まで通りディスプレイ書体（p より詳細度を上げて上書きを防ぐ） */
.story__inner p.story__last{
  font-family:var(--font-display-ja);
  color:var(--text);font-size:clamp(15px,1.3vw,19px)!important;
  letter-spacing:.05em;padding-top:8px;margin-bottom:0!important;
}

/* =========================================================
   03 Q STORY
   ========================================================= */
.qstory__mark{
  /* CONTACT と同じ q-logo.webp。余白を切り落としてあるので画像の端＝ロゴの端。
     左は 0 以上に置いて左端で欠けないようにする。幅だけで決めると画像の高さが
     セクション高（100svh・overflow:hidden）を超えるので、高さ側でも頭打ちに
     する（84svh の 604/725 ≒ 70svh がこの画像の実際の高さ上限）。 */
  position:absolute;left:clamp(4px,1.6vw,30px);top:50%;
  transform:translateY(-52%);
  width:min(32vw,500px,84svh);height:auto;
  z-index:0;opacity:.7;pointer-events:none;
}
.deco--q1{
  width:clamp(190px,24vw,380px);aspect-ratio:1;
  top:8%;right:-7%;color:var(--ink);opacity:.22;
  --rot:-14deg;
}
.qstory__inner{display:flex;flex-direction:column}
.qstory__title{
  font-size:clamp(21px,3.1vw,50px);
  text-align:right;margin-bottom:clamp(26px,4vh,50px);
  align-self:flex-end;
}
.qstory__title .ln{transform-origin:right center}

.gears{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(8px,1.3vw,22px);
}
.gear{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(14px,1.7vw,26px) clamp(8px,1vw,16px);
  opacity:0;
  transform:translateY(26px) scale(.9);
  transition:opacity .5s ease,transform .6s var(--ease-pop),
             box-shadow .3s ease,border-color .3s ease;
  transition-delay:calc(var(--n) * 130ms);
}
.gears.is-in .gear{opacity:1;transform:translateY(0) scale(1)}
.gear > *{position:relative;z-index:1}
.gear__badge{position:relative;display:block;width:clamp(62px,7.4vw,116px);aspect-ratio:1}
.gear__badge svg{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--c);fill:currentColor;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 70%,transparent))
         drop-shadow(0 0 3px rgba(255,255,255,.35));
}
.gear__badge em{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-style:normal;line-height:1;
  font-size:clamp(26px,3.3vw,54px);color:var(--outline);
}
.gear__eq{
  display:block;margin-top:clamp(8px,1.2vh,15px);
  font-family:var(--font-display);
  font-size:clamp(9px,.92vw,13px);letter-spacing:.02em;
  color:rgba(247,247,242,.85);white-space:nowrap;
}
.gear__eq b{color:var(--c);font-weight:400}
.gear__ja{
  display:block;margin-top:clamp(7px,1.1vh,13px);
  font-size:clamp(10px,.9vw,13px);
  line-height:1.6;color:rgba(247,247,242,.74);
}

.qstory__closing{
  align-self:flex-end;
  margin-top:clamp(28px,4.4vh,54px);
  font-family:var(--font-display-ja);
  font-size:clamp(17px,2.4vw,38px);letter-spacing:.02em;line-height:1.4;
  transform:rotate(-1.4deg);
}

/* =========================================================
   04 WORKS
   ========================================================= */
.deco--w1{
  width:clamp(220px,28vw,440px);aspect-ratio:1;
  bottom:-8%;right:-8%;color:var(--ink);opacity:.17;
  --rot:28deg;
}
.works__head{margin-bottom:clamp(24px,3.6vh,44px)}
.works__title{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  -webkit-text-stroke:0;text-shadow:none;
}
.works__num{position:relative;display:block;flex:none;width:clamp(60px,6.4vw,102px);aspect-ratio:1}
.works__num svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);fill:currentColor}
.works__num em{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-style:normal;line-height:1;
  font-size:clamp(21px,2.3vw,37px);color:var(--outline);
}
.works__word{
  font-family:var(--font-display);
  font-size:clamp(36px,5.4vw,86px);line-height:1;letter-spacing:.02em;
  color:var(--text);
  -webkit-text-stroke:.06em var(--outline);
  paint-order:stroke fill;
  text-shadow:.09em .125em 0 var(--ink);
  transform:rotate(-2.2deg);
}
.works__sub{
  display:flex;align-items:center;
  font-family:var(--font-display);font-size:clamp(10px,.95vw,13px);
  letter-spacing:.06em;color:rgba(247,247,242,.62);
  margin-top:14px;
}

/* 掲載2件を対等に並べる。件数が変わってもカード側は触らずに済むよう、
   傾きとアクセント色は grid の子の順番だけで振り分ける */
.works__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,38px);align-items:start;
}

.card{--c:var(--ink)}
.works__grid > .card:nth-child(1){--c:var(--ink-lime);transform:rotate(-1.4deg)}
.works__grid > .card:nth-child(2){--c:var(--c-blue);transform:rotate(1.2deg)}
.card{
  filter:drop-shadow(6px 8px 0 var(--c));
  transition:transform .4s var(--ease-pop),filter .35s ease,var(--t-reveal);
}
.card:hover,
.card:focus-within{transform:rotate(0deg) translateY(-8px);filter:drop-shadow(11px 14px 0 var(--c))}
.card__link{
  display:block;height:100%;
  background:var(--panel);
  border:3px solid rgba(247,247,242,.92);
  clip-path:var(--cut-lg);
}
.card__thumb{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;background:#000;
  border-bottom:3px solid rgba(247,247,242,.92);
}
.card__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.card:hover .card__thumb img,
.card:focus-within .card__thumb img{transform:scale(1.05)}
.card__body{padding:clamp(16px,1.7vw,26px)}
.card__cat{margin-bottom:12px}
.card__cat .sticker{background:var(--c);color:var(--outline)}
.card__name{
  font-family:var(--font-display-ja);font-weight:400;
  font-size:clamp(15px,1.4vw,23px);letter-spacing:.01em;line-height:1.45;
}
.card__en{
  font-family:var(--font-display);font-size:clamp(10px,.9vw,13px);
  letter-spacing:.02em;color:var(--c);margin-top:8px;
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags li{
  font-family:var(--font-display);font-size:9.5px;letter-spacing:.02em;
  padding:5px 10px;
  background:rgba(247,247,242,.09);
  color:rgba(247,247,242,.78);
  clip-path:var(--cut-sm);
}
.card__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--font-display);font-size:clamp(10px,.88vw,12.5px);
  letter-spacing:.04em;
  padding:9px 16px;
  background:var(--text);color:var(--outline);
  clip-path:var(--cut-sm);
  transition:background .25s ease,transform .25s var(--ease-pop);
}
.card__cta i{font-style:normal}
.card:hover .card__cta,
.card:focus-within .card__cta{background:var(--c);transform:translateX(4px)}
.card--main .card__thumb{aspect-ratio:5/4}
.card--main .card__name{font-size:clamp(19px,1.95vw,30px)}

.works__closing{
  margin-top:clamp(28px,4vh,50px);
  font-family:var(--font-display-ja);
  font-size:clamp(15px,1.85vw,29px);letter-spacing:.02em;line-height:1.4;
  transform:rotate(-1.2deg);
}

/* =========================================================
   05 CONTACT
   ========================================================= */
/* フッターは絶対配置をやめて流し込みにする。contact__inner の margin-block:auto が
   余った高さを上下に吸うので、本文は中央・フッターは常に最下部に落ち着き、
   画面が縦に狭いときも両者が重ならない（逃げ幅の決め打ちが要らない） */
.section--contact{justify-content:flex-start;padding-bottom:0}
.contact__inner{margin-block:auto}
.contact__mark{
  position:absolute;left:50%;top:clamp(48px,11vh,120px);
  transform:translateX(-50%);
  /* 画像は横長（725:604）で、余白は切り落としてある＝画像の端＝ロゴの端。
     幅だけで大きさを決めると、上端オフセット＋画像の高さがセクションの高さ
     （100svh・overflow:hidden）を超えて下が欠けるので、高さ側でも頭打ちに
     する。88svh の 604/725 ≒ 73svh がこの画像の実際の高さ上限。 */
  width:min(52vw,700px,88svh);height:auto;
  z-index:0;opacity:.55;pointer-events:none;
}
.deco--c1{
  width:clamp(200px,26vw,400px);aspect-ratio:1;
  top:12%;left:-8%;color:var(--ink-purple);opacity:.55;
  --rot:-18deg;
}
.deco--c2{
  width:clamp(160px,20vw,320px);aspect-ratio:1;
  bottom:16%;right:-6%;color:var(--ink);opacity:.2;
  --rot:22deg;
}
.contact__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.contact__title{
  font-size:clamp(24px,4.4vw,72px);
  line-height:1.3;
}
.contact__title .ln{margin-inline:auto;transform-origin:center}
.contact__sub{
  margin-top:clamp(16px,2.4vh,28px);
  font-family:var(--font-display-ja);
  font-size:clamp(13px,1.4vw,21px);letter-spacing:.03em;
  color:var(--text);
}
.contact__sub b{color:var(--ink-lime);font-weight:400}

.contact__inner .btn-ink{margin-top:clamp(30px,4.6vh,56px)}

.contact__mail{margin-top:clamp(26px,3.6vh,44px)}
.contact__mail a{
  display:inline-block;
  font-family:var(--font-display);font-size:clamp(11px,1vw,14px);
  letter-spacing:.04em;
  padding:8px 16px;
  color:var(--text);
  background:rgba(247,247,242,.09);
  clip-path:var(--cut-sm);
  transition:background .25s ease,color .25s ease;
}
.contact__mail a:hover{background:var(--ink);color:var(--outline)}

/* フッター */
.site-footer{
  position:relative;z-index:4;
  padding-block:clamp(20px,2.8vh,30px);
  padding-bottom:max(clamp(20px,2.8vh,30px), env(safe-area-inset-bottom));
  background:rgba(6,6,8,.78);
}
.site-footer::before{ /* 上端のハザードストライプ */
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 7px,var(--outline) 7px 14px);
}
.site-footer__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.site-footer__copy{
  font-family:var(--font-display);font-size:10px;
  letter-spacing:.04em;color:rgba(247,247,242,.6);
}
.site-footer__nav{display:flex;gap:clamp(12px,1.8vw,26px)}
.site-footer__nav a{
  font-family:var(--font-display);font-size:10px;
  letter-spacing:.04em;color:rgba(247,247,242,.6);
  transition:color .25s ease;
}
.site-footer__nav a:hover{color:var(--ink-lime)}
.site-footer__tag{
  font-family:var(--font-display-ja);
  font-size:clamp(11px,.95vw,14px);letter-spacing:.03em;
}

/* =========================================================
   タブレット 768–1199px
   ========================================================= */
@media (max-width:1199px){
  :root{--maxw:960px}
  .gnav__list{gap:6px}
  /* タッチで届く高さ（44px 以上）を確保する */
  .gnav__list a span{padding:14px 14px;letter-spacing:.02em}
  .contact__mail a{padding:14px 20px}
  .site-footer__nav{gap:2px;flex-wrap:wrap}
  .site-footer__nav a{display:block;padding:13px 14px;font-size:11.5px}
  /* vw 基準だと下限に張り付いて小さすぎるものを底上げ */
  .sticker{font-size:11px}
  .card__en{font-size:11.5px}
  .card__cta{font-size:12px}
  .tags li{font-size:10.5px}
  .profile__role{font-size:12px}
  .site-footer__copy{font-size:11px}
  .profile__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .stat{grid-template-columns:clamp(70px,9vw,100px) minmax(0,1fr) 54px}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qstory__title{text-align:right}
  /* 2件なのでタブレット幅まで2列を保つ（1列にすると間延びする） */
  .card--main .card__thumb{aspect-ratio:16/9}
  .hero__img{width:52%}
}

/* =========================================================
   モバイル 767px以下
   ========================================================= */
@media (max-width:767px){
  html{scroll-padding-top:78px}
  body{font-size:16px;line-height:1.8}
  .section{
    min-height:auto;
    padding-block:clamp(70px,10vh,96px);
  }
  .section--hero{min-height:100svh;padding:0}

  /* --- モバイルメニュー --- */
  .site-header{padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top))}
  .gnav__toggle{
    position:relative;z-index:140;
    display:grid;place-items:center;
    width:58px;height:58px;margin-left:auto;
  }
  .gnav__toggle-ink{
    position:absolute;inset:0;width:100%;height:100%;
    color:var(--nav-ink);fill:currentColor;
    transition:color .3s ease,transform .3s var(--ease-pop);
  }
  .gnav__toggle[aria-expanded="true"] .gnav__toggle-ink{transform:rotate(90deg) scale(1.08)}
  .gnav__bars{
    position:relative;z-index:1;
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:24px;
  }
  .gnav__bar{
    display:block;width:100%;height:3px;background:var(--outline);
    transition:transform .3s ease,opacity .25s ease;
  }
  .gnav__toggle[aria-expanded="true"] .gnav__bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .gnav__toggle[aria-expanded="true"] .gnav__bar:nth-child(2){opacity:0}
  .gnav__toggle[aria-expanded="true"] .gnav__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .gnav__list{
    position:fixed;inset:0;z-index:130;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:18px;padding:0 clamp(28px,9vw,56px);
    background:var(--bg);
    background-image:radial-gradient(rgba(200,240,0,.13) 1.4px,transparent 1.5px);
    background-size:11px 11px;
    clip-path:circle(0% at calc(100% - 44px) 44px);
    transition:clip-path .5s cubic-bezier(.5,0,.2,1),visibility .5s;
    visibility:hidden;
  }
  .gnav__list.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
  .gnav__list li{width:100%;opacity:0;transform:translateX(28px)}
  .gnav__list.is-open li{
    opacity:1;transform:none;
    transition:opacity .4s ease,transform .5s var(--ease-pop);
  }
  .gnav__list.is-open li:nth-child(1){transition-delay:.16s}
  .gnav__list.is-open li:nth-child(2){transition-delay:.23s}
  .gnav__list.is-open li:nth-child(3){transition-delay:.30s}
  .gnav__list.is-open li:nth-child(4){transition-delay:.37s}
  .gnav__list a span{
    display:block;width:100%;
    padding:18px 22px;font-size:17px;letter-spacing:.05em;
    clip-path:var(--cut);
  }
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:125;
    background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease;
  }
  .nav-scrim.is-open{opacity:1}
  body.nav-open{overflow:hidden}

  /* --- FIRST VIEW（1枚を左端寄せで敷く＝中央の焼き込み見出しを避ける） --- */
  .hero__img--l{
    width:100%;object-position:0% 50%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__img--r{display:none}
  .hero__halftone{
    background:
      radial-gradient(ellipse 74% 52% at 50% 50%,#000 0%,rgba(0,0,0,.9) 42%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.35) 100%),
      linear-gradient(180deg,rgba(0,0,0,.75) 0%,transparent 24%,transparent 66%,rgba(0,0,0,.9) 100%);
  }
  .hero__lead{font-size:clamp(27px,8.4vw,44px)}
  .hero__brand{font-size:clamp(28px,8vw,42px)}
  .hero__kicker .sticker{font-size:clamp(12px,3.4vw,17px);padding:.5em 1.1em}

  /* --- PROFILE --- */
  .profile__grid{grid-template-columns:1fr;gap:26px}
  .profile__photo{order:-1;margin-inline:calc(var(--pad) * -.5)}
  .profile__title{font-size:19px;line-height:1.55}
  .h-splat{-webkit-text-stroke-width:.09em}
  .profile__lead{font-size:15.5px}
  .profile__lead--alt{font-size:14px}
  .stat{grid-template-columns:80px minmax(0,1fr) 46px;gap:10px}
  .stat__name{font-size:11px}
  .stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stage p{font-size:12px}
  .story__btn{flex-wrap:wrap;gap:4px 14px}
  .story__btn-icon{margin-left:auto}
  /* ラベルは上に横並び、ミシン目も横向きへ */
  .story__inner{grid-template-columns:minmax(0,1fr);gap:14px}
  .story__tag{
    justify-self:start;place-items:center start;
    padding:0 0 12px;width:100%;
  }
  .story__tag::after{
    top:auto;bottom:0;left:0;right:0;width:auto;height:3px;
    background-image:repeating-linear-gradient(
      to right,
      rgba(247,247,242,.55) 0 7px,
      transparent 7px 14px
    );
  }
  .story__scroll{height:clamp(240px,52vh,380px)}

  /* --- Q STORY（縦積み） --- */
  .qstory__mark{
    left:50%;top:6%;transform:translateX(-50%);
    width:min(78vw,340px);opacity:.2;
  }
  .qstory__title{text-align:left;align-self:flex-start;font-size:21px;margin-bottom:26px}
  .qstory__title .ln{transform-origin:left center}
  .gears{grid-template-columns:1fr;gap:10px}
  .gear{
    flex-direction:row;align-items:center;gap:16px;text-align:left;
    padding:12px 16px;
  }
  .gear__badge{width:60px;flex:none}
  .gear__badge em{font-size:26px}
  .gear__eq{margin-top:0;font-size:11.5px}
  .gear__ja{margin-top:3px;font-size:12.5px}
  .qstory__closing{align-self:flex-start;font-size:19px;margin-top:26px}

  /* --- WORKS（1列） --- */
  .works__word{font-size:38px}
  .works__grid{grid-template-columns:1fr;gap:20px}
  .works__side{grid-template-columns:1fr;gap:20px}
  .card--main .card__thumb{aspect-ratio:4/3}
  .works__closing{font-size:16px;margin-top:26px}

  /* --- CONTACT --- */
  .contact__title{font-size:24px;line-height:1.42}
  .contact__sub{font-size:14px}
  .btn-ink{width:100%}
  .btn-ink__txt{
    padding:20px 18px;font-size:15px;letter-spacing:.02em;
    text-align:center;white-space:normal;
  }
  .contact__mark{top:2%;width:min(92vw,420px);opacity:.45}
  .site-footer{margin-top:clamp(52px,8vh,76px)}
  .site-footer__inner{flex-direction:column;align-items:center;text-align:center;gap:16px}

  /* --- 実機での可読性・タップ領域（文字サイズはタブレット側で底上げ済み。
         ここでは狭い画面向けに余白だけ詰める） --- */
  .sticker{padding:7px 12px}
  .tags li{padding:6px 11px}
  .contact__mail a{font-size:12.5px}
  .site-footer__nav{justify-content:center}
}

@media (max-width:380px){
  .hero__lead{font-size:25px}
  .hero__brand{font-size:26px}
  .contact__title{font-size:21px}
  .works__word{font-size:32px}
  .gear__badge{width:52px}
  .gear__badge em{font-size:22px}
}

/* =========================================================
   リキッドガラス (@liquid-dom/core)

   PROFILE の STATUS ボックスとステージカードの「板」を WebGPU の
   ガラスに差し替えたときだけ .is-liquid-glass が付く。対応していない
   ブラウザでは何も起きず、上で定義した CSS のガラスがそのまま残る。
   ========================================================= */
.liquid-canvas{
  position:absolute;
  z-index:0;pointer-events:none;
  contain:strict;
}

/* ガラスの裏に敷く鏡。セクションの地の色と飾りを描き直し、
   カードの色をグローとして置く。これが屈折してふちに乗る。 */
.liquid-mirror{
  position:relative;width:100%;height:100%;
  overflow:hidden;background:var(--bg);
}
.liquid-mirror__glows,
.liquid-mirror__decos{position:absolute;inset:0}
.liquid-mirror__glow{
  position:absolute;
  background:radial-gradient(closest-side,var(--glow,var(--ink)),transparent 78%);
}
.liquid-mirror__deco{
  position:absolute;
  /* 位置は JS が実測して入れるので、元の指定を打ち消しておく */
  inset:auto;transform:none;will-change:auto;
}

/* 板そのものはガラスが描くので、CSS 側の板は消して文字だけ残す */
.is-liquid-glass .stats-box,
.is-liquid-glass .stages .stage{
  z-index:1;
  background:none;
  border-color:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.is-liquid-glass .stats-box::before,
.is-liquid-glass .stats-box::after,
.is-liquid-glass .stages .stage::before{content:none}

/* =========================================================
   動きを減らす設定への対応
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .curtain{display:none}
  [data-reveal]{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  [data-reveal] .brush{clip-path:inset(0 0 0 0)!important}
  .gear{opacity:1!important;transform:none!important}
  .hero__img{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .scroll-hint i{animation:none;transform:scaleY(1);opacity:1}
  .gnav__list li{opacity:1!important;transform:none!important}
}