/* ═══════════════════════════════════════════════════════
   MANKYU STUDIO — editorial / high-fashion layer
   コンテンツ(作品・キャラ)=パステル、器=モノトーン・エディトリアル
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:#f2f0eb;
  --ink:#111113;
  --mut:#77746c;
  --line:rgba(17,17,19,.14);
  --dark:#0c0c0e;
  --dark-ink:#f2f0eb;
  --dark-line:rgba(242,240,235,.16);
  --ease:cubic-bezier(.19,1,.22,1);
  --font-syne:"Syne",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
  --font-jp:"Zen Kaku Gothic New",sans-serif;
  --font-serif:"Shippori Mincho B1",serif;
  --skin:#ffe9dc;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--font-jp);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.8;
  transition:background 1s var(--ease),color 1s var(--ease);
}
body.dark{background:var(--dark);color:var(--dark-ink)}
@media(pointer:fine){ body,body a,body button{cursor:none} }
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.syne{font-family:var(--font-syne)}
.jp{font-family:var(--font-jp)}
.serif{font-family:var(--font-serif)}

/* 粒子ノイズ */
body::after{
  content:"";position:fixed;inset:-100px;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-6%)}20%{transform:translate(-8%,3%)}
  30%{transform:translate(5%,-9%)}40%{transform:translate(-3%,8%)}50%{transform:translate(-7%,2%)}
  60%{transform:translate(6%,4%)}70%{transform:translate(2%,-7%)}80%{transform:translate(-5%,6%)}90%{transform:translate(7%,-2%)}
}

/* ── プリローダー ── */
#loader{
  position:fixed;inset:0;z-index:9999;background:var(--dark);color:var(--dark-ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:28px 32px;
  transition:transform 1s var(--ease);
}
#loader.done{transform:translateY(-101%)}
.loader-count{font-size:clamp(80px,16vw,200px);line-height:1;align-self:flex-end}

/* ── カーソル ── */
#cur-dot,#cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9800;display:none;border-radius:50%;opacity:0}
#cur-dot.alive,#cur-ring.alive{opacity:1}
@media(pointer:fine){#cur-dot,#cur-ring{display:block}}
#cur-dot{width:6px;height:6px;background:var(--ink);transform:translate(-50%,-50%)}
body.dark #cur-dot{background:var(--dark-ink)}
#cur-ring{
  width:36px;height:36px;border:1px solid currentColor;color:var(--ink);
  transform:translate(-50%,-50%);
  display:none;align-items:center;justify-content:center;
  transition:width .4s var(--ease),height .4s var(--ease),background .4s,color .4s;
}
body.dark #cur-ring{color:var(--dark-ink)}
@media(pointer:fine){#cur-ring{display:flex}}
#cur-ring.big{width:88px;height:88px;background:var(--ink);color:var(--paper);border-color:transparent}
body.dark #cur-ring.big{background:var(--dark-ink);color:var(--dark)}
#cur-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;opacity:0;transition:opacity .3s}
#cur-ring.big #cur-label{opacity:1}
#cur-dot.hide,#cur-ring.hide{opacity:0}

/* ── 作品の背景メディア(スマホ) ── */
main#top{position:relative;z-index:1}
#works-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease);
}
#works-bg.show{opacity:1}
#works-bg video,.wbg-grad,.wbg-shade{position:absolute;inset:0;width:100%;height:100%}
#works-bg video{
  object-fit:cover;filter:saturate(.85);opacity:0;
  transform:scale(1.08);
  transition:opacity .7s var(--ease),transform 1.4s var(--ease);
}
#works-bg.video-on video{opacity:1;transform:scale(1)}
.wbg-grad{transition:background .7s,opacity .7s}
#works-bg.video-on .wbg-grad{opacity:0}
.wbg-shade{background:rgba(10,10,12,.7)}
/* 背景が出ている間はWORKSの文字を反転 */
#works.bg-on{color:var(--dark-ink)}
#works.bg-on .sec-label,#works.bg-on .work-idx,#works.bg-on .work-cat,#works.bg-on .sec-note{color:rgba(242,240,235,.6)}
#works.bg-on .work-list{border-top-color:var(--dark-line)}
#works.bg-on .work-row{border-bottom-color:var(--dark-line)}
#works.bg-on .work-tag{border-color:var(--dark-line)}
#works.bg-on .work-tag.new{background:var(--dark-ink);color:var(--dark)}
#works.bg-on .work-row:hover .work-idx{color:var(--dark-ink)}

/* 再生中の作品タイトルを虹色ハイライト(スマホ=背景再生中 / PC=ホバー再生中) */
.work-row.playing .work-title,
.work-row[data-video]:hover .work-title{
  background:linear-gradient(90deg,#ff9db0,#ffd966,#a8e6c9,#8fb8ff,#c9a8ff,#ff9db0);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:rainbowSlide 3.5s linear infinite;
}
@keyframes rainbowSlide{to{background-position:300% 0}}

/* ── 作品ホバープレビュー ── */
#float{
  position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  width:min(320px,30vw);aspect-ratio:4/5; /* 動画は実アスペクト比に上書き(JS) */
  opacity:0;transform:scale(.85) rotate(-3deg);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
#float.wide{width:min(480px,40vw)} /* 横長動画は大きめに */
#float.show{opacity:1;transform:scale(1) rotate(0deg)}
#float-media{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:80px;overflow:hidden;
}
#float-media video{width:100%;height:100%;object-fit:cover}

/* ── 星の雨 ── */
#star-rain{position:fixed;inset:0;pointer-events:none;z-index:9600;overflow:hidden}
.rain-star{position:absolute;top:-40px;animation:rainFall linear forwards}
@keyframes rainFall{to{transform:translateY(110vh) rotate(360deg)}}

/* ── ヘッダー ── */
#header{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px;
  mix-blend-mode:difference;color:#f2f0eb;
}
#header a{color:#f2f0eb}
.h-logo{font-weight:500}
.h-nav{display:flex;gap:26px}
.h-nav a{position:relative;padding:4px 0}
.h-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.h-nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:760px){.h-nav{display:none}}

/* 下線リンク共通 */
.u-link{position:relative;display:inline-block;padding:4px 0}
.u-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.u-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ── スムーススクロールラッパー ── */
#smooth.fixed{position:fixed;top:0;left:0;width:100%;will-change:transform}

/* ── HERO ── */
#hero{
  min-height:100svh;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 32px 40px;
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.02);
}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.5) 0%,rgba(10,10,12,.62) 55%,rgba(10,10,12,.8) 100%);
}
#hero>*:not(.hero-media){position:relative;z-index:2}
/* 背景動画があるときは文字を反転 */
#hero.has-video{color:var(--dark-ink)}
#hero.has-video .hero-eyebrow,
#hero.has-video .hero-note,
#hero.has-video .scroll-word{color:rgba(242,240,235,.62)}
#hero.has-video .outline{-webkit-text-stroke-color:var(--dark-ink)}
#hero.has-video .outline:hover{color:var(--dark-ink)}
#hero.has-video .badge-rot text{fill:var(--dark-ink)}
#hero.has-video .scroll-cue{border-color:rgba(242,240,235,.5)}
.hero-eyebrow{color:var(--mut);margin-bottom:2vh}
.hero-t{
  font-family:var(--font-syne);font-weight:800;
  font-size:clamp(40px,13.5vw,196px);
  line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
  user-select:none;
}
.mask{display:block;overflow:hidden}
.mask .l{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease)}
.loaded .mask .l,.shown .mask .l{transform:translateY(0)}
.mask:nth-child(2) .l{transition-delay:.08s}
.outline{
  color:transparent;-webkit-text-stroke:1.5px var(--ink);
  transition:transform 1.1s var(--ease),color .5s;
}
.outline:hover{color:var(--ink)}
.hero-side{
  display:flex;flex-wrap:wrap;gap:26px;align-items:baseline;
  margin-top:4vh;max-width:860px;
}
.hero-sub{font-size:clamp(15px,2vw,19px);font-weight:500}
.hero-note{color:var(--mut)}
.hero-links{display:flex;gap:24px}
.hero-bottom{
  position:absolute;left:32px;right:32px;bottom:28px;
  display:flex;align-items:flex-end;justify-content:space-between;
}
.scroll-word{color:var(--mut);animation:scrollBlink 2.2s ease-in-out infinite}
@keyframes scrollBlink{0%,100%{opacity:1}50%{opacity:.25}}
.badge-rot{position:relative;width:104px;height:104px}
.badge-rot svg{width:100%;height:100%;animation:rotate 14s linear infinite}
.badge-rot text{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;fill:var(--ink);text-transform:uppercase}
.badge-c{position:absolute;inset:0;display:grid;place-items:center;font-size:18px}
@keyframes rotate{to{transform:rotate(360deg)}}

/* ── MARQUEE ── */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.marquee-track{display:flex;white-space:nowrap;will-change:transform}
.marquee-text{
  font-family:var(--font-syne);font-weight:800;text-transform:uppercase;
  font-size:clamp(48px,8vw,110px);line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--ink);
  padding-right:24px;
}
body.dark .marquee-text{-webkit-text-stroke-color:var(--dark-ink)}

/* ── セクション共通 ── */
.section{padding:16vh 32px;max-width:1440px;margin:0 auto}
@media(max-width:700px){
  .section{padding:12vh 20px}
  #hero{padding:110px 20px 140px}
  .hero-bottom{left:20px;right:20px}
  .badge-rot{width:84px;height:84px}
  #header{padding:18px 20px}
  #footer{padding:24px 20px;gap:12px}
}
.sec-head{margin-bottom:7vh}
.sec-label{color:var(--mut);margin-bottom:3vh}
.sec-lead{max-width:560px;font-size:14.5px}
.sec-note{color:var(--mut);margin-top:6vh}

/* 行リビール(フェード+浮き上がり。作品行はブラー解除も) */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].shown{opacity:1;transform:none}
.work-row[data-reveal]{
  filter:blur(7px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
.work-row[data-reveal].shown{filter:blur(0)}

/* ── WORKS ── */
.work-list{border-top:1px solid var(--line)}
.work-row{
  display:grid;grid-template-columns:70px 1fr auto auto;gap:24px;align-items:baseline;
  padding:30px 8px;border-bottom:1px solid var(--line);
  position:relative;
}
.work-idx{font-family:var(--font-mono);font-size:12px;color:var(--mut);transition:color .4s}
.work-title{
  font-family:var(--font-syne);font-weight:700;
  font-size:clamp(26px,4.2vw,58px);line-height:1.1;letter-spacing:-.01em;
  transition:transform .6s var(--ease),opacity .4s;
  font-feature-settings:"palt";
}
.work-row .work-title{font-family:var(--font-jp);font-weight:700}
.work-cat{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;white-space:nowrap}
.work-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  padding:5px 10px;border:1px solid var(--line);border-radius:99px;white-space:nowrap;
}
.work-tag.new{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.dark .work-tag.new{background:var(--dark-ink);color:var(--dark)}
.work-row:hover .work-title{transform:translateX(18px)}
.work-row:hover .work-idx{color:var(--ink)}
.work-list:hover .work-row:not(:hover) .work-title{opacity:.25}
@media(max-width:700px){
  .work-row{grid-template-columns:1fr auto;gap:8px 12px;padding:24px 4px}
  .work-idx{grid-row:1;grid-column:1;align-self:center}
  .work-tag{grid-row:1;grid-column:2;justify-self:end}
  .work-title{grid-row:2;grid-column:1/-1;font-size:clamp(24px,7.5vw,36px)}
  .work-cat{grid-row:3;grid-column:1/-1}
}

/* ── IP(ダーク) ── */
#ip{max-width:none;border-top:1px solid var(--dark-line)}
#ip .sec-head,#ip .chars,#ip .ip-note{max-width:1440px;margin-left:auto;margin-right:auto}
.ip-title{
  font-weight:800;font-size:clamp(48px,9vw,140px);line-height:1;
  letter-spacing:-.02em;text-transform:uppercase;font-feature-settings:"palt";
  margin-bottom:3vh;
}
.ip-lead{max-width:520px;font-size:14.5px;color:inherit;opacity:.75}
.chars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);
}
.char-card{
  background:var(--dark);padding:40px 28px 32px;text-align:left;position:relative;
  transition:background .5s;
}
.char-card:hover{background:#141417}
.char-no{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:.5;display:flex;justify-content:space-between}
.char-stage{height:200px;display:flex;align-items:center;justify-content:center;margin:22px 0 18px}
.char-name{font-size:20px;font-weight:700;display:flex;align-items:baseline;gap:10px}
.char-name .en{font-family:var(--font-syne);font-weight:700;font-size:12px;letter-spacing:.12em;opacity:.5}
.char-copy{font-size:13px;opacity:.65;margin-top:8px;min-height:3.2em}
.char-hint{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;opacity:.35;margin-top:14px;text-transform:uppercase}
.ip-note{margin-top:6vh;opacity:.5}

/* パステルの円形ステージ(コンテンツ=可愛い、の額縁) */
.char-face{position:relative;width:150px;height:150px}
.char-face::before{
  content:"";position:absolute;inset:-22px;border-radius:50%;z-index:0;
  transition:transform .6s var(--ease);
}
.char-card:hover .char-face::before{transform:scale(1.06)}
.face-yui::before{background:radial-gradient(circle,#bcd6ff 0%,rgba(188,214,255,.0) 70%)}
.face-mero::before{background:radial-gradient(circle,#ffd6de 0%,rgba(255,214,222,0) 70%)}
.face-nemu::before{background:radial-gradient(circle,#aab7dd 0%,rgba(170,183,221,0) 70%)}

/* ── CSS顔(v1から移植・正典準拠) ── */
.head{position:absolute;inset:10px;background:var(--skin);border-radius:46%;z-index:2}
.eye{position:absolute;top:62px;width:26px;height:30px;background:#fff;border-radius:50%;overflow:hidden;z-index:3}
.eye-l{left:28px}.eye-r{right:28px}
.pupil{position:absolute;top:6px;left:6px;width:14px;height:18px;border-radius:50%;transition:transform .1s linear}
.pupil::after{content:"";position:absolute;top:2px;left:2px;width:5px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.pupil-amber{background:#e8a33d}
.pupil-pink{background:#ff7ba0}
.pupil-grey{background:#6f7ea8}
.lid{position:absolute;inset:0;background:var(--skin);transform:translateY(-100%);transition:transform .12s}
.blink .lid{transform:translateY(0)}
.lid-jito{transform:translateY(-55%)}
.blink .lid-jito{transform:translateY(0)}
.blush{position:absolute;top:88px;width:18px;height:9px;border-radius:50%;background:#ffb3c0;opacity:.8;z-index:3}
.blush-l{left:16px}.blush-r{right:16px}
.mouth{position:absolute;left:50%;transform:translateX(-50%);z-index:3}
.mouth-smile{top:100px;width:16px;height:9px;border:2.5px solid #d97f6a;border-top:none;border-radius:0 0 16px 16px}
.mouth-open{top:98px;width:12px;height:13px;background:#d97f6a;border-radius:40% 40% 50% 50%}
.mouth-flat{top:103px;width:12px;height:2.5px;background:#c08a76;border-radius:99px}
.mole{position:absolute;width:4px;height:4px;border-radius:50%;background:#a8794f;z-index:4}

/* ユイ */
.face-yui .hair-front{position:absolute;top:-6px;left:-5px;right:-5px;height:62px;background:#f2debd;border-radius:60% 60% 46% 46%;z-index:2}
.face-yui .hair-front::before,.face-yui .hair-front::after{content:"";position:absolute;bottom:-14px;width:34px;height:26px;background:#f2debd;border-radius:0 0 60% 60%}
.face-yui .hair-front::before{left:8px;transform:rotate(6deg)}
.face-yui .hair-front::after{right:8px;transform:rotate(-6deg)}
.hair-back{position:absolute;inset:4px;background:#eed3ab;border-radius:50%;z-index:1}
.twintail{position:absolute;bottom:6px;width:34px;height:56px;background:#f2debd;border-radius:50% 50% 60% 60%;z-index:1;animation:tailSway 3.2s ease-in-out infinite;transform-origin:top center}
.twintail-l{left:-8px;rotate:14deg}
.twintail-r{right:-8px;rotate:-14deg;animation-delay:-1.6s}
@keyframes tailSway{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.ribbon{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:20px;height:12px;border-radius:2px}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;width:9px;height:12px;border-radius:2px;background:inherit}
.ribbon::before{left:-8px;transform:skewY(18deg)}
.ribbon::after{right:-8px;transform:skewY(-18deg)}
.ribbon-blue{background:#4d8dff}
.ribbon-red{background:#ff5c74}
.char-card:hover .ribbon{animation:ribbonBounce .6s var(--ease)}
@keyframes ribbonBounce{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.4,.7)}70%{transform:translateX(-50%) scale(.85,1.2)}100%{transform:translateX(-50%) scale(1)}}

/* メロ */
.face-mero .hair-front{position:absolute;top:-6px;left:-5px;right:-5px;height:58px;background:#ffb0ca;border-radius:60% 60% 50% 50%;z-index:2}
.face-mero .hair-front::before{content:"";position:absolute;bottom:-16px;left:50%;transform:translateX(-50%) rotate(2deg);width:30px;height:26px;background:#ffb0ca;border-radius:0 0 60% 60%}
.ponytail{position:absolute;top:-30px;left:62%;width:32px;height:62px;background:#ffb0ca;border-radius:70% 40% 60% 55%;z-index:3;transform-origin:bottom center;animation:ponySway 2.8s ease-in-out infinite}
@keyframes ponySway{0%,100%{transform:rotate(14deg)}50%{transform:rotate(26deg)}}
.ponytail .ribbon{top:auto;bottom:2px;z-index:2}
.char-mero.shocked .head{animation:headShake .5s}
@keyframes headShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-3deg)}75%{transform:translateX(5px) rotate(3deg)}}

/* ネム */
.hair-nemu{position:absolute;top:-6px;left:-6px;right:-6px;height:66px;background:#9fb2d8;border-radius:60% 60% 40% 44%;z-index:2}
.hair-nemu::before{content:"";position:absolute;bottom:-32px;left:14px;width:42px;height:44px;background:#9fb2d8;border-radius:20% 20% 60% 70%;transform:rotate(8deg)}
.hair-nemu::after{content:"";position:absolute;bottom:-12px;right:6px;width:18px;height:16px;background:#9fb2d8;border-radius:0 0 60% 60%;transform:rotate(-8deg)}
.face-nemu .eye-l{top:72px;left:auto;right:32px;height:26px}
.face-nemu .pupil{top:8px}
.face-nemu .mole{top:102px;left:auto;right:38px}
.face-nemu .mouth-flat{top:108px}
.cushion{position:absolute;bottom:-8px;right:-16px;font-size:34px;color:#bcd6ff;z-index:5;filter:drop-shadow(0 4px 6px rgba(20,20,30,.5));animation:cushionFloat 3.6s ease-in-out infinite}
@keyframes cushionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ユイ気絶 */
.spiral{position:absolute;top:60px;font-size:24px;font-weight:900;color:#e8a33d;z-index:4;opacity:0;pointer-events:none;font-family:var(--font-syne)}
.spiral-l{left:24px}.spiral-r{right:24px}
.char-yui.dizzy .eye{visibility:hidden}
.char-yui.dizzy .spiral{opacity:1;animation:spiralSpin 1s linear infinite}
@keyframes spiralSpin{to{transform:rotate(360deg)}}
.char-yui.dizzy .head{animation:dizzyWobble 2.4s ease-in-out}
@keyframes dizzyWobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
.star-orbit{position:absolute;top:-14px;left:50%;width:110px;height:36px;margin-left:-55px;z-index:5;opacity:0;pointer-events:none}
.char-yui.dizzy .star-orbit{opacity:1}
.star-orbit i{position:absolute;left:50%;top:50%;font-style:normal;font-size:18px;color:#ffd966;animation:orbit 1.4s linear infinite}
.star-orbit i:nth-child(2){animation-delay:-.47s}
.star-orbit i:nth-child(3){animation-delay:-.93s}
@keyframes orbit{
  0%{transform:translate(-50%,-50%) rotate(0) translateX(46px) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) translateX(46px) scale(.6)}
  100%{transform:translate(-50%,-50%) rotate(360deg) translateX(46px) scale(1)}
}

/* メロ !? */
.shock{position:absolute;top:-18px;right:-6px;font-family:var(--font-syne);font-size:34px;font-weight:800;color:#ff5c74;z-index:5;opacity:0;transform:scale(0) rotate(14deg)}
.char-mero.shocked .shock{animation:shockPop 1.2s var(--ease)}
@keyframes shockPop{
  0%{opacity:0;transform:scale(0) rotate(14deg)}
  20%{opacity:1;transform:scale(1.3) rotate(-6deg)}
  35%{transform:scale(1) rotate(4deg)}
  80%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(.6) translateY(-16px)}
}

/* 吹き出し(モノトーン再設計) */
.speech{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%) scale(0);
  background:var(--dark);border:1px solid var(--dark-line);
  padding:5px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  white-space:nowrap;z-index:6;color:var(--dark-ink);
  transition:transform .35s var(--ease);
}
.char-card.talking .speech{transform:translateX(-50%) scale(1)}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:36px}}
.about-body{font-size:clamp(19px,2.6vw,28px);line-height:2;font-feature-settings:"palt"}
.about-awards-label{color:var(--mut);margin-bottom:14px}
.about-facts{display:grid;gap:0;align-content:start;border-top:1px solid var(--line)}
.about-facts>div{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line)}
.about-facts dt{color:var(--mut)}
.about-facts dd{font-family:var(--font-jp);font-size:13px;text-transform:none;letter-spacing:0}

/* ── CONTACT ── */
.contact-big{
  display:inline-flex;align-items:flex-start;gap:16px;
  font-weight:800;font-size:clamp(38px,11vw,170px);line-height:1;
  letter-spacing:-.03em;text-transform:uppercase;
}
.contact-big .l{transition:transform 1.1s var(--ease)}
.contact-arrow{
  font-size:.35em;margin-top:.18em;
  transition:transform .5s var(--ease);
}
.contact-big:hover .contact-arrow{transform:translate(10px,-10px)}
.contact-lead{max-width:480px;margin-top:4vh;font-size:14.5px}
.contact-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:5vh;color:var(--mut)}
.contact-meta a{color:var(--ink)}
body.dark .contact-meta a{color:var(--dark-ink)}

/* ── FOOTER ── */
#footer{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
  padding:32px;border-top:1px solid var(--line);color:var(--mut);
}
#footer a{color:inherit}

/* ── reduce motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .mask .l{transform:none}
  [data-reveal]{opacity:1;transform:none}
  body::after{display:none}
}