/* 第14世代ラボ(原本 sample/keiru-portfolio-14th/keiru-portfolio-site-14th.png)。
   原本は 1366x768 の画面を縦に並べたもの。--u=原本の1px を画面に合わせた長さ にして、座標をそのまま写す。
   キャラは固定の舞台(.k14-stage)に1体だけ置き、Works / Videos の灰色の面と、ヒーローの灰色の幕がその上に重なる。
   Profile / Contact に入るとキャラが左へ寄る(html[data-k14]) */
:root{
  /* 画面を埋める側に合わせ(cover)、左右は最大 50px まで切ってよい(原本の左右の余白 58px の内側)。16:10 の画面でも上下の帯がほぼ出ない */
  --u:min(max(calc(100vw / 1366),calc(100vh / 768)),calc(100vw / 1266));
  --ox:calc((100vw - 1366 * var(--u)) / 2);
  --oy:calc((100vh - 768 * var(--u)) / 2);
  --k-grey:#d8dee4; --k-glass:rgba(210,218,224,.86); --k-ink:#15171c; --k-mute:#8c9298; --k-title:#c8d1d9;
  --k-pink:#d43f9b; --k-cyan:#6fd0de; --k-teal:#2bb3a6;
  --k-en:'Source Sans 3',system-ui,sans-serif; --k-pop:'Mochiy Pop One','Zen Kaku Gothic New',sans-serif;
}
html{scroll-snap-type:y proximity}
body.g13.k14{background:#fff;background-image:none;color:var(--k-ink);font-family:var(--jp)}
.k14 main{overflow:visible;position:relative;z-index:2}
.k14 main>section{position:relative;height:100vh;min-height:0;scroll-snap-align:start;overflow:hidden;background:none;padding:0;margin:0;max-width:none;display:block}
.k14 .k14-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k14 [hidden]{display:none!important}

/* ---------- ヘッダー(固定・面なし) ---------- */
.k14 .g13-header.k14-header{position:fixed;inset:0 0 auto 0;transform:none;left:0;top:0;width:100%;max-width:none;height:calc(var(--oy) + 125 * var(--u));margin:0;padding:0;border-radius:0;background:none;box-shadow:none;display:block;z-index:60;pointer-events:none}
.k14-header>*{pointer-events:auto}
.k14 .k14-header .brand{position:absolute;left:calc(var(--ox) + 58 * var(--u));top:calc(var(--oy) + 27 * var(--u));width:auto;margin:0;color:var(--k-ink)}
.k14 .k14-header .brand svg{height:calc(70 * var(--u));width:auto;display:block}
.k14 .k14-header nav{position:absolute;left:calc(var(--ox) + 548 * var(--u));top:calc(var(--oy) + 40 * var(--u));display:flex;gap:calc(42 * var(--u))}
.k14 .k14-header nav a{font:700 calc(30 * var(--u))/1.4 var(--k-en);color:var(--k-ink);letter-spacing:0}
.k14 .k14-header nav a::after{bottom:calc(-4 * var(--u))}
.k14 .k14-header .g13-lang{position:absolute;left:calc(var(--ox) + 1214 * var(--u));top:calc(var(--oy) + 40 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));font:700 calc(30 * var(--u))/1.4 var(--k-en)}
.k14 .k14-header .g13-lang button{width:auto;height:auto;font:inherit;color:#7d7d7d;padding:0}
.k14 .k14-header .g13-lang button[aria-pressed=true]{color:var(--k-ink)}
.k14 .k14-header .g13-lang>span{color:var(--k-ink)}
.k14 .k14-header .menu-btn{display:none}

/* ---------- 右の帯(SNS + ©)---------- */
.k14-rail{position:fixed;z-index:55;left:calc(var(--ox) + 1272 * var(--u));top:calc(var(--oy) + 314 * var(--u));width:calc(34 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u))}
.k14-rail a{display:block;width:calc(34 * var(--u));height:calc(34 * var(--u))}
.k14-rail img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.k14-copy{margin:calc(90 * var(--u)) 0 0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 calc(21 * var(--u))/1 var(--k-en);color:var(--k-ink);white-space:nowrap}

/* ---------- 固定の舞台(キャラ・顔のビジュアライザー・ロゴ・肩書きの帯)---------- */
.k14-stage{position:fixed;inset:0;z-index:1;pointer-events:none}
.k14-char{position:absolute;width:calc(504 * var(--u));left:calc(var(--ox) + 431 * var(--u));top:calc(var(--oy) + 139 * var(--u));transition:left .9s cubic-bezier(.65,0,.35,1)}
html[data-k14=profile] .k14-char,html[data-k14=contact] .k14-char{left:calc(var(--ox) + 206 * var(--u))}
.k14-char-img{display:block;width:100%;height:auto}
.k14-logo{position:absolute;left:9%;width:81%;top:42.6%;height:auto;opacity:0;transition:opacity .6s}
html:is([data-k14=profile],[data-k14=contact]) .k14-logo{opacity:1}
/* ヒーローと Music ではロゴはカードの上に乗る(原本どおり)=舞台のロゴではなくカードの中の複製を使う */
.k14-clogo{position:absolute;left:calc(51 * var(--u));top:calc(-77 * var(--u));width:calc(408 * var(--u));height:auto;pointer-events:none}
.k14-band{position:absolute;left:18%;width:68%;top:72.2%;margin:0;padding:calc(3 * var(--u)) 0;background:rgba(58,30,98,.78);color:#fff;text-align:center;font:700 calc(21 * var(--u))/1.25 var(--k-en);letter-spacing:.01em;opacity:0;transition:opacity .6s}
html:is([data-k14=profile],[data-k14=contact]) .k14-band{opacity:1}

/* 顔の上のビジュアライザー: 本番の sound canvas(#muFig)を顔へ移し、図形だけを描く。地・盤・ラベル・キャラは隠す */
.k14 .k14-char #muFig.mu-canvas{position:absolute;inset:auto;left:23%;top:-2%;width:56%;height:auto;aspect-ratio:1;margin:0;max-width:none;border-radius:50%;background:transparent!important;filter:none;overflow:visible;transform:none;opacity:1;display:block;box-shadow:none;border:0}
.k14 #muFig .mu-bg,.k14 #muFig .mu-label,.k14 #muFig .mu-fps,.k14 #muFig .mu-vis,.k14 #muFig .mu-disc,.k14 #muFig .mu-cat,.k14 #muFig .mu-foot{display:none}
.k14 #muFig canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;filter:brightness(1.8) saturate(1.4) drop-shadow(0 0 6px rgba(140,220,255,.55));opacity:0;transition:opacity .5s}
.k14 #muFig.is-live canvas{opacity:1}

/* ---------- 共通の部品 ---------- */
.k14-card{position:absolute;left:calc(var(--ox) + 424 * var(--u));top:calc(var(--oy) + 490 * var(--u));width:calc(518 * var(--u));height:calc(227 * var(--u));border-radius:calc(34 * var(--u));background:var(--k-glass);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end;padding:0 calc(38 * var(--u)) calc(30 * var(--u));gap:calc(24 * var(--u))}
.k14-play{display:flex;align-items:center;gap:calc(32 * var(--u));border:0;background:none;padding:0;cursor:pointer;color:var(--k-ink);font:400 calc(27 * var(--u))/1.3 var(--k-pop);text-align:left}
.k14-play svg{flex:none;width:calc(86 * var(--u));height:calc(86 * var(--u));padding:calc(22 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));border-radius:50%;background:linear-gradient(135deg,#8fd85a,#cbe46a);fill:#fff;box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(120,170,60,.25);transition:transform .25s}
.k14-play:hover svg{transform:scale(1.06)}
.k14-play:focus-visible{outline:3px solid var(--k-ink);outline-offset:6px;border-radius:calc(48 * var(--u))}
.k14-title{font:900 calc(64 * var(--u))/1 var(--k-en);color:var(--k-title);margin:0 0 calc(56 * var(--u));letter-spacing:0}
.k14 h2,.k14 h3{letter-spacing:0}

/* ---------- ヒーロー(灰色の幕の上) ---------- */
.k14 .k14-hero{background:rgba(216,222,228,.86)!important}
.k14-vert{position:absolute;left:calc(var(--ox) + 60 * var(--u));top:calc(var(--oy) + 185 * var(--u));margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 calc(33 * var(--u))/1 var(--k-en);color:var(--k-mute);letter-spacing:.01em}
.k14-scroll{position:absolute;left:calc(var(--ox) + 58 * var(--u));top:calc(var(--oy) + 590 * var(--u));width:calc(34 * var(--u));display:flex;flex-direction:column;align-items:center}
.k14-scroll img{width:100%;height:auto}
.k14-scroll i{display:block;width:2px;height:calc(56 * var(--u));background:linear-gradient(#a7c9e6,#7fc9d6);transform-origin:top;animation:k14drop 2.4s ease-in-out infinite}
@keyframes k14drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.k14 .k14-hero-copy{position:absolute;left:calc(var(--ox) + 908 * var(--u));top:calc(var(--oy) + 255 * var(--u));margin:0;font:600 calc(34 * var(--u))/1.45 var(--k-en);color:var(--k-mute);letter-spacing:.005em}
.k14-hero-sub{position:absolute;left:calc(var(--ox) + 910 * var(--u));top:calc(var(--oy) + 370 * var(--u));margin:0;font:400 calc(17 * var(--u))/1.6 var(--k-pop);color:var(--k-mute)}
.k14 .k14-hero .k14-play span{color:#7e868d}

/* ---------- Works / Videos(灰色の面)---------- */
.k14 #works.g13-works,.k14 #video.video-gallery{background:none!important;backdrop-filter:none}
.k14 #works::before,.k14 #video::before{content:"";position:absolute;left:calc(var(--ox) + 136 * var(--u));top:calc(var(--oy) + 141 * var(--u));width:calc(1094 * var(--u));height:calc(532 * var(--u));background:rgba(216,222,228,.84)}
.k14 #works>.g13-title,.k14 #video .s-head h2{position:absolute;left:0;right:0;top:calc(var(--oy) + 160 * var(--u));text-align:center;padding:0;margin:0;font:900 calc(64 * var(--u))/1 var(--k-en);color:#fff;z-index:1}
.k14 #works .works-track{position:absolute;left:calc(var(--ox) + 136 * var(--u));top:calc(var(--oy) + 255 * var(--u));width:calc(1094 * var(--u));padding:0 calc(302 * var(--u));gap:calc(20 * var(--u));z-index:1}
.k14 #works .works-track .wk-card{flex:0 0 calc(490 * var(--u));height:calc(274 * var(--u))}
.k14 #works .works-track .wk-thumb{aspect-ratio:auto;height:100%}
.k14 #works .works-track .wk-body{padding:calc(40 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));background:linear-gradient(transparent,rgba(0,0,0,.6))}
.k14 #works .works-track h3{font:700 calc(24 * var(--u))/1.2 var(--k-en);margin:0}
.k14 #works .works-track .wk-note{display:none}
.k14 #works .works-controls{position:absolute;left:0;right:0;top:calc(var(--oy) + 544 * var(--u));margin:0;z-index:1;gap:calc(14 * var(--u))}
.k14 #works .works-controls>*{display:none}
.k14-dots{display:flex;gap:calc(14 * var(--u))}
.k14-dots button{width:calc(15 * var(--u));height:calc(15 * var(--u));min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:#111;opacity:.3;cursor:pointer}
.k14-dots button[aria-current=true]{opacity:1}
.k14 #works .works-controls .k14-dots{display:flex}
.k14 #works .g13-anchor{position:absolute}

.k14 #video.s::before{display:block}
.k14 #video .s-head{position:static;margin:0;display:block}
.k14 #video .wrap{position:static;display:block;padding:0;max-width:none;width:auto}
.k14 #video .s-head .jp,.k14 #video .vg-intro,.k14 #video .vg-group-head{display:none}
.k14 #video .vg-group{position:absolute;left:calc(var(--ox) + 194 * var(--u));top:calc(var(--oy) + 293 * var(--u));width:calc(984 * var(--u));margin:0;z-index:1}
.k14 #video .vg-wide-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(86 * var(--u))}
.k14 #video .vg-card{border-radius:calc(20 * var(--u));background:none}
.k14 #video .vg-image{height:calc(249 * var(--u));aspect-ratio:auto;border-radius:calc(20 * var(--u))}
.k14 #video .vg-title,.k14 #video .vg-format{display:none}
.k14 #video .vg-more{position:absolute;left:0;right:0;top:calc(var(--oy) + 574 * var(--u));margin:0;text-align:center;z-index:1}
.k14 #video.video-gallery .vg-more .wd-pill,.k14 #video .vg-more a{display:inline-flex;align-items:center;justify-content:center;width:calc(352 * var(--u));height:calc(55 * var(--u));padding:0;border:0;border-radius:99px;background:var(--k-ink);color:#fff;font:400 calc(21 * var(--u))/1 var(--k-pop)}

/* ---------- Music ---------- */
.k14-new .k14-head,.k14-disc .k14-head{position:absolute;margin:0;font:700 calc(44 * var(--u))/1 var(--k-en)}
.k14-head.is-pink{left:calc(var(--ox) + 105 * var(--u));top:calc(var(--oy) + 193 * var(--u));color:var(--k-pink)}
.k14-head.is-cyan{left:calc(var(--ox) + 978 * var(--u));top:calc(var(--oy) + 206 * var(--u));color:var(--k-cyan)}
.k14-jacket{position:absolute;left:calc(var(--ox) + 137 * var(--u));top:calc(var(--oy) + 282 * var(--u));width:calc(205 * var(--u))}
.k14 .album-pick,.k14 .k14-pick{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s}
.k14 .album-pick img,.k14 .k14-pick img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.k14 .album-pick:hover,.k14 .k14-pick:hover{transform:translateY(-4px)}
.k14 .album-pick[aria-pressed=true],.k14 .k14-pick[aria-pressed=true]{outline:3px solid var(--k-teal);outline-offset:4px}
.k14 .k14-grid{position:absolute;left:calc(var(--ox) + 970 * var(--u));top:calc(var(--oy) + 282 * var(--u));width:calc(262 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u)) calc(10 * var(--u))}
.k14-rels{position:absolute;left:calc(var(--ox) + 84 * var(--u));top:calc(var(--oy) + 528 * var(--u));width:calc(318 * var(--u))}
.k14 .k14-rels .ms-release{margin:0;padding:0;border:0;width:auto}
.k14 .k14-rels .ms-linkhead{display:none}
.k14 .k14-rels .ms-links{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u)) calc(22 * var(--u));margin:0}
.k14 .k14-rels .ms-links a{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));height:calc(46 * var(--u));min-height:0;padding:0 calc(8 * var(--u));border-radius:99px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#53c7d6,#2e58b5) border-box;color:var(--k-ink);font:700 calc(16 * var(--u))/1 var(--k-en);box-shadow:none;white-space:nowrap}
.k14 .k14-rels .ms-links a.is-main{font:400 calc(15 * var(--u))/1 var(--k-pop)}
.k14 .k14-rels .ms-links a .dot{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.k14 .k14-mcard{align-items:center;padding-bottom:0;padding-top:calc(120 * var(--u))}
.k14 .k14-mcard .k14-play{gap:0}
.k14-mtext{min-width:0}
.k14 .k14-mtext .ms-k{display:none}
.k14 .k14-mtext .ms-t,.k14 .k14-mtext .k14-mt{margin:0;font:400 calc(27 * var(--u))/1.3 var(--k-pop);color:var(--k-ink)}
.k14 .k14-mtext .ms-m,.k14 .k14-mtext .k14-mm{margin:calc(6 * var(--u)) 0 0;font:600 calc(13 * var(--u))/1.3 var(--k-en);color:#4b545b}

/* ---------- Profile / Contact(キャラは左)---------- */
.k14-text{position:absolute;left:calc(var(--ox) + 740 * var(--u));width:calc(480 * var(--u));top:calc(var(--oy) + 258 * var(--u));text-align:center}
.k14-text p{margin:0 0 calc(36 * var(--u));font:400 calc(25 * var(--u))/1.45 var(--k-pop);color:var(--k-ink)}
.k14-cta{margin-top:calc(30 * var(--u))!important}
.k14-btn{display:inline-flex;align-items:center;justify-content:center;width:calc(352 * var(--u));height:calc(83 * var(--u));border-radius:99px;background:var(--k-ink);color:#fff;font:400 calc(28 * var(--u))/1 var(--k-pop);transition:background .25s,transform .25s}
.k14-btn:hover{background:#2c3236;transform:translateY(-2px)}
.k14 .k14-foot{background:none;border:0;padding:0;margin:0;width:auto}
.k14-foot{position:absolute;left:calc(var(--ox) + 63 * var(--u));top:calc(var(--oy) + 708 * var(--u))}
.k14-foot a,.k14-btn{text-decoration:none}
.k14-foot a{font:400 calc(19 * var(--u))/1 var(--k-pop);color:var(--k-ink)}

/* 先頭へ・プレーヤーは本番のまま。右の帯と重ならないよう先頭へボタンは隠す */
.k14 .to-top{display:none}

@media (prefers-reduced-motion:reduce){.k14-char{transition:none}.k14-scroll i{animation:none}}

.k14 #muFig::before,.k14 #muFig::after{display:none!important}
.k14 .k14-jacket .album-pick[aria-pressed=true],.k14 .k14-jacket .k14-pick[aria-pressed=true]{outline:0}
.k14 .k14-card{z-index:1}
/* 本番の Videos 用の指定(.s::before を消す・.wrap/.s-head の position)が強いので、ここで確実に上書きする */
.k14 main>#video.video-gallery.s::before{content:"";display:block;position:absolute;left:calc(var(--ox) + 136 * var(--u));top:calc(var(--oy) + 141 * var(--u));width:calc(1094 * var(--u));height:calc(532 * var(--u));background:rgba(216,222,228,.84);z-index:0;opacity:1;transform:none}
.k14 main>#video.video-gallery .wrap,.k14 main>#video.video-gallery .s-head{position:static!important;transform:none!important;filter:none!important;will-change:auto!important;contain:none!important;backdrop-filter:none!important;translate:none!important;scale:none!important}
.k14 main>#video.video-gallery .s-head h2,.k14 main>#works>.g13-title{color:#fff!important}
.k14-rail{mix-blend-mode:multiply}

/* ---------- すりガラス(2026-10-31 ユーザー指示。参考 sample/keiru-portfolio-14th/ガラス透過の参考.png)----------
   灰色の板ではなく、後ろのキャラ(下半身・しずく)を強くぼかして透かす。上端は境目なく溶かし、縁は細い白線だけ */
.k14 .k14-card{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(236,240,246,.18) 38%,rgba(226,232,240,.32) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(80,70,140,.10)}
.k14 .k14-card::before{content:"";position:absolute;inset:calc(-120 * var(--u)) 0 auto;height:calc(140 * var(--u));pointer-events:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(transparent,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 70%,transparent)}
.k14 .k14-clogo{z-index:1}
.k14 .k14-card>*:not(.k14-clogo){position:relative;z-index:2}

/* 2026-10-31 縦書きは全文字を横倒しにする(© は Unicode で「正立」扱いなので、そのまま 180° 回すと逆さになっていた) */
.k14-copy,.k14-vert{text-orientation:sideways}
/* ヒーロー左: ファビコンの猫から下へ光が流れる線(本番の地色に合わせて PORTFOLIO SITE は墨寄りの灰) */
.k14 .k14-heroS .k14-vert{color:#8c9298}
.k14-scroll{gap:calc(6 * var(--u))}
.k14-scroll i{position:relative;display:block;width:2px;height:calc(110 * var(--u));background:rgba(140,146,152,.25);overflow:hidden;animation:none;transform:none}
.k14-scroll i::after{content:"";position:absolute;left:0;top:0;width:100%;height:45%;background:linear-gradient(transparent,#2bb3a6 55%,#d43f9b);animation:k14flow 2.2s cubic-bezier(.55,0,.35,1) infinite}
@keyframes k14flow{0%{transform:translateY(-100%)}100%{transform:translateY(230%)}}
@media (prefers-reduced-motion:reduce){.k14-scroll i::after{animation:none;transform:none;height:100%}}
/* すりガラスの上の線を薄く(左右と下は残す) */
.k14 .k14-card{border-color:rgba(255,255,255,.12) rgba(255,255,255,.5) rgba(255,255,255,.55);box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(80,70,140,.10)}

/* =====================================================================
   スマホ(640px以下。本番 gen13.js のハンバーガーと同じ境目)
   キャラは固定のまま画面の中央上に置き、各節はその上を流れる。
   読ませる面(Music / Profile / Contact の本文)はすりガラスの板に載せる。PC の --u 座標はここで全部打ち消す
   ===================================================================== */
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  html{scroll-snap-type:none}
  :root{--sp:16px}
  .k14 main>section{height:auto;min-height:0;overflow:visible}

  /* ヘッダー: ロゴ + 言語 + ハンバーガー。面は白のすりガラス */
  .k14 .g13-header.k14-header{height:60px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:110}
  .k14 .k14-header .brand{left:var(--sp);top:13px}
  .k14 .k14-header .brand svg{height:32px}
  .k14 .k14-header nav{display:none}
  .k14 .k14-header .g13-lang{left:auto;right:64px;top:16px;font-size:15px;gap:4px}
  .k14 .k14-header .menu-btn{display:flex;position:absolute;right:8px;top:8px;width:44px;height:44px;background:none;box-shadow:none}
  .k14 .k14-header .menu-btn span{background:var(--k-ink)}
  .k14-rail{display:none}

  /* 固定の舞台: 幅 72vw・ヘッダーの下。Profile / Contact でも左へは寄せない */
  .k14-char,html[data-k14=profile] .k14-char,html[data-k14=contact] .k14-char{width:min(72vw,52svh);left:50%;top:76px;transform:translateX(-50%);transition:none}
  .k14-band{font-size:12px;padding:3px 0}

  /* ヒーロー: 画面ひとつ。カードは下に */
  .k14 .k14-heroS{height:100svh;min-height:560px}
  .k14 .k14-heroS .k14-card{left:var(--sp);right:var(--sp);width:auto;top:auto;bottom:max(24px,4svh);height:132px;border-radius:24px;padding:0 20px 20px}
  .k14 .k14-card .k14-clogo{left:50%;transform:translateX(-50%);top:-54px;width:min(78vw,300px)}
  .k14-play{font-size:18px;gap:16px}
  .k14-play svg{width:60px;height:60px;padding:16px 12px 16px 18px}
  .k14 .k14-heroS .k14-vert{left:8px;top:96px;font-size:14px}
  .k14 .k14-heroS .k14-scroll{left:12px;top:auto;bottom:calc(max(24px,4svh) + 150px);width:22px}
  .k14-scroll i{height:64px}

  /* 共通: 節の見出しと、本文を載せるすりガラスの板 */
  .k14 .k14-plate{margin:0 var(--sp);padding:28px 20px;border-radius:24px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.7)}

  /* Works / Videos: 灰色の面は画面幅いっぱい(左右 16px) */
  .k14 #works,.k14 main>#video.video-gallery{padding:72px 0 48px}
  .k14 #works::before,.k14 main>#video.video-gallery.s::before{left:var(--sp);right:var(--sp);width:auto;top:56px;bottom:24px;height:auto}
  .k14 #works>.g13-title,.k14 main>#video.video-gallery .s-head h2{position:relative!important;top:auto;font-size:44px;margin:0 0 20px}
  .k14 #works .works-track{position:relative;left:auto;top:auto;width:auto;margin:0 var(--sp);padding:0 8vw;gap:12px}
  .k14 #works .works-track .wk-card{flex-basis:calc(100vw - 2 * var(--sp) - 16vw);height:auto;aspect-ratio:16/10}
  .k14 #works .works-track h3{font-size:17px}
  .k14 #works .works-controls{position:relative;top:auto;margin-top:16px}
  .k14-dots button{width:12px;height:12px}
  .k14 #video .vg-group{position:relative;left:auto;top:auto;width:auto;margin:0 calc(var(--sp) + 14px)}
  .k14 #video .vg-wide-grid{grid-template-columns:1fr;gap:14px}
  .k14 #video .vg-image{height:auto;aspect-ratio:16/9;border-radius:16px}
  .k14 #video .vg-more{position:relative;top:auto;margin-top:20px}
  .k14 #video.video-gallery .vg-more .wd-pill,.k14 #video .vg-more a{width:auto;height:48px;padding:0 28px;font-size:15px}

  /* Music: 板の上に New Release → 再生カード → 配信リンク → Discography */
  .k14 .k14-music{padding:76px 0 40px;display:flex;flex-direction:column;gap:0;margin:0 var(--sp);padding-left:20px;padding-right:20px;border-radius:24px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);margin-top:40px;margin-bottom:24px;padding-top:28px}
  .k14 .k14-mcol{display:contents}
  .k14-new .k14-head,.k14-disc .k14-head{position:static;font-size:30px;text-align:center;margin:0 0 14px}
  .k14-jacket{position:static;width:58%;margin:0 auto 16px}
  .k14 .k14-mcard{position:relative;left:auto;top:auto;width:auto;height:auto;order:0;margin:0 0 16px;padding:18px 16px;align-items:center;border-radius:20px}
  .k14 .k14-mcard .k14-clogo{display:none}
  .k14 .k14-mtext .ms-t{font-size:18px}
  .k14 .k14-mtext .ms-m{font-size:12px}
  .k14-rels{position:static;width:auto;margin:0 0 28px}
  .k14 .k14-rels .ms-links{gap:8px 10px}
  .k14 .k14-rels .ms-links a{height:42px;font-size:13px}
  .k14 .k14-rels .ms-links a.is-main{font-size:12px}
  .k14 .k14-grid{position:static;width:auto;grid-template-columns:repeat(3,1fr);gap:8px}
  /* 並び: 見出し → ジャケット → 再生カード → 配信リンク → Discography */
  .k14-new .k14-head{order:1}.k14-jacket{order:2}.k14 .k14-mcard{order:3}.k14-rels{order:4}.k14-disc .k14-head{order:5}.k14 .k14-grid{order:6}

  /* Profile / Contact: キャラ(固定)を上に見せ、本文は下のすりガラスの板 */
  .k14 .k14-side{padding:calc(min(72vw,52svh) * 1.0 + 40px) 0 32px}
  .k14-text{position:relative;left:auto;top:auto;width:auto;margin:0 var(--sp);padding:28px 20px;border-radius:24px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.7)}
  .k14-title{font-size:40px;margin:0 0 20px}
  .k14-text p{font-size:16px;margin:0 0 20px}
  .k14-btn{width:min(100%,300px);height:60px;font-size:19px}
  .k14 .k14-foot{position:static;margin:20px var(--sp) 0;display:flex;justify-content:space-between;align-items:center}
  .k14 .k14-foot::after{content:"© 2026 keiru";font:700 13px/1 var(--k-en)}
  .k14-foot a{font-size:13px}
  /* 顔のビジュアライザーは本文の邪魔にならないよう少し控えめに */
  .k14 #muFig canvas{filter:brightness(1.5) saturate(1.3)}

  /* ドロワー=原本のグレーの画面: 灰色の幕(キャラが透ける)+ 縦書き + メニュー + コピー + 再生 + SNS */
  .k14 > .drawer{background:rgba(216,222,228,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:84px 24px 28px 64px;align-content:start;gap:20px}
  .k14-dvert{position:absolute;left:18px;top:96px;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);text-orientation:sideways;font:700 22px/1 var(--k-en);color:var(--k-mute)}
  .k14 .drawer nav{align-self:start}
  .k14 .drawer nav ul{margin:0;gap:6px;width:auto}
  .k14 .drawer nav a{font:700 30px/1.35 var(--k-en);color:var(--k-ink)}
  .k14 .drawer nav a i{font:600 13px/1 var(--k-en);color:var(--k-mute);margin-right:12px}
  .k14-dcopy{margin:8px 0 0;font:600 24px/1.45 var(--k-en);color:var(--k-mute)}
  .k14-dplay{justify-self:start;font-size:17px;color:#5d656c}
  .k14-dplay svg{width:56px;height:56px;padding:15px 11px 15px 17px}
  .k14 .drawer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
  .k14-dcp{margin:0;font:700 13px/1 var(--k-en);color:var(--k-ink)}
  .k14 .drawer-sns{margin-left:0}
  .k14 .drawer-sns .sns-icon{width:42px;height:42px;border:0;background:rgba(255,255,255,.7)}
}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  html[data-k14=top] .k14-char{width:min(86vw,56svh)}
  .k14 #video .vg-card,.k14 #video .vg-open,.k14 #video .vg-image{width:100%;max-width:none;display:block}
  .k14 #video .vg-group{margin:0 calc(var(--sp) + 12px)}
}

/* 2026-10-31 上下の余白を詰める(縦積みの表示)。キャラの寸法を変数にし、カードと本文の板をキャラの下半身に重ねる */
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  :root{--cw:min(72vw,52svh,460px);--ct:76px}
  html[data-k14=top]{--cw:min(86vw,56svh,520px)}
  .k14-char,html[data-k14=profile] .k14-char,html[data-k14=contact] .k14-char,html[data-k14=top] .k14-char{width:var(--cw);top:var(--ct)}
  /* ヒーロー: カードの上端=キャラの下から 30% の位置(PC と同じく下半身に重ねる)。節の高さはカードまで */
  .k14 .k14-heroS{height:auto;min-height:0;padding-top:calc(var(--ct) + var(--cw) * 1.25 * .72);padding-bottom:28px}
  .k14 .k14-heroS .k14-card{position:relative;left:auto;right:auto;bottom:auto;top:auto;margin:0 var(--sp);width:auto}
  .k14 .k14-heroS .k14-scroll{bottom:auto;top:calc(var(--ct) + var(--cw) * .9)}
  /* Profile / Contact: 頭と胸までを見せ、板はロゴの高さから重ねる(すりガラス越しに下半身が透ける) */
  .k14 .k14-side{padding:calc(var(--ct) + var(--cw) * 1.25 * .62) 0 28px}
  .k14 .k14-side .k14-text{background:rgba(255,255,255,.5)}
  .k14 #works,.k14 main>#video.video-gallery{padding:64px 0 40px}
  .k14 .k14-music{margin-top:24px}
}
/* 縦長のタブレット(641〜1100px)はハンバーガーを使わず、ヘッダーにメニューを出す(本番のドロワーは 640px 以下でしか開かないため) */
@media (min-width:641px) and (max-width:1100px) and (max-aspect-ratio:5/4){
  :root{--sp:32px;--cw:min(56vw,46svh,460px)}
  html[data-k14=top]{--cw:min(64vw,50svh,520px)}
  .k14 .k14-header .menu-btn{display:none}
  .k14 .k14-header nav{display:flex;left:auto;right:120px;top:17px;gap:22px}
  .k14 .k14-header nav a{font-size:18px}
  .k14 .k14-header .g13-lang{right:var(--sp)}
  .k14-rail{display:flex;left:auto;right:12px;top:40svh;transform:scale(.8);transform-origin:right top}
  .k14 .k14-music,.k14-text,.k14 .k14-heroS .k14-card{max-width:640px;margin-left:auto;margin-right:auto}
  .k14 .k14-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  /* 本番 gen13.css の「各節=1画面・中央寄せ」(641px 以上で効く)を打ち消す */
  .k14 main>section[id]{min-height:0!important;justify-content:flex-start!important}
  /* Profile / Contact はちょうど1画面。キャラ(固定)は上に、本文の板は下に置く=どこにも空白の帯ができない */
  .k14 main>section.k14-side[id]{min-height:100svh!important;display:flex;flex-direction:column;justify-content:flex-end!important;padding:calc(var(--ct) + 24px) 0 28px}
  .k14 .k14-side .k14-text{margin-top:0}
}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  /* 1画面ぶん取ると前の節との間に空白が出るので、頭〜肩書きの帯が見える高さだけ取る */
  .k14 main>section.k14-side[id]{min-height:0!important;padding-top:calc(var(--ct) + var(--cw) * 1.25 * .68)}
}

/* 2026-10-31 縦積み(スマホ・縦タブレット)はキャラを固定しない=画面と画面の間にキャラを見せるための空白が要らない。
   ヒーローのキャラ(顔のビジュアライザー付き)はページと一緒に流れ、Profile / Contact は節の中に自分のキャラを持つ */
.k14-sidechar{display:none}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14-stage{position:absolute;inset:0 0 auto 0;height:0;overflow:visible}
  .k14-logo,.k14-band{display:none}
  .k14 #works,.k14 main>#video.video-gallery{padding:24px 0 24px}
  .k14 #works::before,.k14 main>#video.video-gallery.s::before{top:8px;bottom:8px}
  .k14 #works>.g13-title,.k14 main>#video.video-gallery .s-head h2{margin:8px 0 16px}
  .k14 .k14-music{margin-top:8px;margin-bottom:8px}
  .k14 .k14-heroS{padding-bottom:16px}
  .k14 main>section.k14-side[id]{padding:16px 0 16px!important;min-height:0!important;justify-content:flex-start!important}
  .k14 .k14-sidechar{display:block;position:relative;width:min(70vw,360px);margin:0 auto -14%;z-index:0}
  .k14-sc-img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 62%,transparent 86%);mask-image:linear-gradient(#000 62%,transparent 86%)}
  .k14-sc-logo{position:absolute;left:9%;width:81%;top:42.6%;height:auto}
  .k14-sc-band{position:absolute;left:18%;width:68%;top:72.2%;padding:3px 0;background:rgba(58,30,98,.78);color:#fff;text-align:center;font:700 12px/1.25 var(--k-en)}
  .k14 .k14-side .k14-text{position:relative;z-index:1;background:rgba(255,255,255,.55)}
  .k14 .k14-foot{margin-top:16px}
}

/* Contact ではキャラを出さない(2026-10-31 ユーザー指示)=固定の舞台ごと消す */
.k14-stage{transition:opacity .6s}
html[data-k14=contact] .k14-stage{opacity:0}
/* PC: キャラが無いので Contact の文字は画面の中央へ */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  #contact .k14-text{left:calc(var(--ox) + 443 * var(--u))}
}
/* スマホ: Works / Videos のグレーの面を消して白地に(2026-10-31 ユーザー指示)。白い見出しは Profile と同じ淡色へ。動画は左右の余白を詰めて大きく */
@media (max-width:640px){
  .k14 #works::before,.k14 main>#video.video-gallery.s::before{display:none!important}
  .k14 main>#video.video-gallery .s-head h2,.k14 main>#works>.g13-title{color:var(--k-title)!important}
  .k14 main>#video.video-gallery .wrap{width:auto!important;margin:0!important}
  .k14 main>#video.video-gallery .vg-group{margin:0 12px}
  .k14 main>#video.video-gallery .vg-wide-grid{gap:16px}
}
/* スマホのドロワーを整える(2026-10-31 ユーザー指示「余白や色が見づらい・ヘッダーも透過してドロワーに合わせる・メニューは中央」)
   ①地はすりガラスを濃く(裏の絵が透けて読みにくかった) ②開いている間はヘッダーの白い帯を消し、ドロワーと同じ面に見せる
   ③メニュー・コピー・再生ボタンを中央の1列に、上下の空きを均等に ④淡い灰色の文字は濃くする(#8c9298 はすりガラス上で 2.6 しかない) */
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  html.drawer-open .k14 .g13-header.k14-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .k14 > .drawer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;
    padding:calc(60px + 4svh) 24px max(24px,env(safe-area-inset-bottom));text-align:center;
    background:rgba(222,228,233,.9);-webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2)}
  .k14-dvert{left:16px;top:50%;transform:translateY(-50%) rotate(180deg);font-size:18px;color:#5a6065;opacity:.55}
  .k14 .drawer nav{align-self:center;width:100%}
  .k14 .drawer nav ul{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.6svh,14px);padding:0;margin:0}
  .k14 .drawer nav a{display:inline-flex;align-items:baseline;justify-content:center;font-size:clamp(28px,8vw,34px)}
  .k14 .drawer nav a i{display:none}
  .k14-dcopy{margin:0;font-size:20px;line-height:1.4;color:#3d454b}
  .k14-dplay{justify-self:auto;align-self:center;color:var(--k-ink)}
  .k14 .drawer-foot{width:100%;margin-top:0}
  .k14-dcp{color:#3d454b}
}
/* Profile の SNS(本番の .pf-sns をそのまま)=スマホ・縦長タブレットだけ。PC は右端の帯に SNS がある。Contact には置かない(窓口はフォームだけ) */
.k14 .k14-side .pf-sns{display:none}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 .k14-side .pf-sns{display:flex;margin-top:4px}
  .k14 .k14-side .pf-sns .sns-icon{background:#fff}
}
/* ドロワーの SNS の丸は白 .7 の半透明だと「うっすら白い」中途半端な見え方になる=Profile の SNS と同じ不透明の白+影に */
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 .drawer-sns .sns-icon{background:#fff;box-shadow:0 4px 14px #263d4514}
}
/* ビジュアライザーの色を濃く(2026-10-31 ユーザー要望)。明るさを足すと白に寄って淡くなる=明るさは素のまま、彩度とコントラストを上げ、白い光のにじみ(drop-shadow)も外す。
   重ね方は screen のまま(normal にすると Tunnel の黒い地が出て、淡い円になるだけだった) */
.k14 #muFig canvas,.k14 .k14-char #muFig canvas{filter:saturate(2.8) contrast(1.4)!important}
/* PC: 下端のプレーヤー(高さ約73px)が出るとカードの再生ボタンと曲名の下側に被る=中身を上へ寄せる(2026-10-31 ユーザー指示) */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-mcard{padding-top:calc(52 * var(--u))}
  .k14 .k14-heroS .k14-hcard{padding-bottom:calc(58 * var(--u))}
}

/* ---------- 文字サイズの最適化(2026-10-31 ユーザー指示「全体的なテキストの文字サイズを最適化」)----------
   PC: 文字は配置と同じ --u で伸びるので、1920px では本文35px・見出し90pxまで膨らんでいた。
       文字だけ --tu(=--u の上限 1.15px)で伸ばす=1366 のデザインの大きさは保ち、大きい画面では 1.15 倍で止める。
       小さい文字(曲の情報・配信ピル)は 1280px で 12px まで縮んでいたので 13px を下限にする */
:root{--tu:min(var(--u),1.15px)}
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-header nav a,.k14 .k14-header .g13-lang{font-size:calc(30 * var(--tu))!important}
  .k14 .k14-vert{font-size:calc(33 * var(--tu))!important}
  .k14 .k14-play{font-size:calc(27 * var(--tu))!important}
  .k14 main>#works>.g13-title,.k14 main>#video.video-gallery .s-head h2,.k14 .k14-title{font-size:calc(64 * var(--tu))!important}
  .k14 #works .works-track h3{font-size:calc(24 * var(--tu))!important}
  .k14 .k14-new .k14-head,.k14 .k14-disc .k14-head{font-size:calc(44 * var(--tu))!important}
  .k14 .k14-rels .ms-links a{font-size:max(13px,calc(16 * var(--tu)))!important}
  .k14 .k14-rels .ms-links a.is-main{font-size:max(13px,calc(15 * var(--tu)))!important}
  .k14 .k14-mtext .ms-t{font-size:calc(27 * var(--tu))!important}
  .k14 .k14-mtext .ms-m{font-size:max(13px,calc(13 * var(--tu)))!important}
  .k14 #video.video-gallery .vg-more .wd-pill,.k14 #video .vg-more a{font-size:calc(21 * var(--tu))!important}
  .k14 .k14-text p{font-size:calc(25 * var(--tu))!important}
  .k14 .k14-btn{font-size:calc(28 * var(--tu))!important}
  .k14 .k14-foot a{font-size:max(13px,calc(19 * var(--tu)))!important}
  .k14 .k14-copy{font-size:max(13px,calc(21 * var(--tu)))!important}
}
/* スマホ: 節の見出しを 40px にそろえる(Works/Videos 44・Profile/Contact 40 とばらばらだった)。Music の小見出しは 28。
   小さい文字は 13px を下限に、Contact のボタンは本文とのつり合いで 18px に */
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 main>#works>.g13-title,.k14 main>#video.video-gallery .s-head h2,.k14 .k14-title{font-size:40px!important}
  .k14 .k14-new .k14-head,.k14 .k14-disc .k14-head{font-size:28px!important}
  .k14 .k14-rels .ms-links a,.k14 .k14-rels .ms-links a.is-main,.k14 .k14-mtext .ms-m{font-size:13px!important}
  .k14 .k14-btn{font-size:18px!important}
}
/* 縦長タブレット(641〜1100px): スマホと同じ大きさだと画面に対して小さい=一回り大きく */
@media (min-width:641px) and (max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 main>#works>.g13-title,.k14 main>#video.video-gallery .s-head h2,.k14 .k14-title{font-size:52px!important}
  .k14 .k14-new .k14-head,.k14 .k14-disc .k14-head{font-size:34px!important}
  .k14 .k14-text p{font-size:19px!important}
  .k14 .k14-play,.k14 .k14-mtext .ms-t{font-size:21px!important}
  .k14 #works .works-track h3{font-size:20px!important}
  .k14 .k14-rels .ms-links a,.k14 .k14-rels .ms-links a.is-main,.k14 .k14-mtext .ms-m{font-size:14px!important}
  .k14 .k14-btn{font-size:20px!important}
  .k14 #video.video-gallery .vg-more .wd-pill,.k14 #video .vg-more a{font-size:17px!important}
  .k14 .k14-foot a{font-size:15px!important}
}
/* PC: ヒーローの再生ボタンと文字も Music のカードと同じ置き方に(2026-10-31 ユーザー指示)=上下中央・上 52u・ボタンと文字の間 24u */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-heroS .k14-hcard{align-items:center;padding-top:calc(72 * var(--u));padding-bottom:0}
  .k14 .k14-heroS .k14-hcard .k14-play{gap:calc(24 * var(--u))}
}
/* ページの先頭へ(Contact のボタンの下)=ファビコンの猫+上へ流れる線+PAGE TOP。ヒーローの「下へ」の猫と対になる */
.k14 .k14-totop-wrap{margin:calc(44 * var(--u)) 0 0!important}
.k14-totop{display:inline-flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));color:var(--k-ink);text-decoration:none}
.k14-totop i{display:block;width:1px;height:calc(40 * var(--u));background:#c9cfd4;position:relative;overflow:hidden}
.k14-totop i::after{content:"";position:absolute;left:0;right:0;height:45%;bottom:-45%;background:linear-gradient(transparent,#e0679a);animation:k14flowup 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes k14flowup{to{bottom:100%}}
.k14-totop img{width:calc(40 * var(--u));height:auto;transition:transform .3s}
.k14-totop span{font:700 max(12px,calc(14 * var(--tu)))/1 var(--k-en);letter-spacing:.12em}
.k14-totop:hover img{transform:translateY(-4px)}
.k14-totop:focus-visible{outline:2px solid var(--k-ink);outline-offset:6px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.k14-totop i::after{animation:none}}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 .k14-totop-wrap{margin:24px 0 0!important}
  .k14-totop{gap:6px}
  .k14-totop i{height:28px}
  .k14-totop img{width:34px}
  .k14-totop span{font-size:12px}
}

/* ---------- 2026-10-31 追加分(本番で直接編集。ラボの _lab/14th.css はここで止まっている)---------- */
/* Videos の「YouTubeですべての動画を見る」: Mochiy Pop One の英字は形が遊んでいて、他のボタンと書体が違って見えた
   =英字はメニュー・見出しと同じ Source Sans 3、和文は今のまま Mochiy。太字の偽造(font-synthesis)は切る */
.k14 #video.video-gallery .vg-more .wd-pill,.k14 #video .vg-more a{font-family:'Source Sans 3','Mochiy Pop One',sans-serif!important;font-weight:700;font-synthesis:none}
/* 低い PC 画面(1280x640 など)ではデザインの高さが画面より高く --oy が負になり、ヘッダーが上端で切れていた
   =ヘッダーだけは --oy を 0 で下止めする(本文の配置は変えない) */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14{--hy:max(var(--oy),0px)}
  .k14 .g13-header.k14-header{height:calc(var(--hy) + 125 * var(--u))}
  .k14 .k14-header .brand{top:calc(var(--hy) + 27 * var(--u))}
  .k14 .k14-header nav,.k14 .k14-header .g13-lang{top:calc(var(--hy) + 40 * var(--u))}
}
/* 縦長タブレット: Profile の肩書きの帯が本文の板に隠れていた=キャラと板の重なりを浅くする(スマホは今のまま) */
@media (min-width:641px) and (max-width:1100px) and (max-aspect-ratio:5/4){
  .k14 .k14-sidechar{margin-bottom:-3%}
}
/* 再生ボタンの三角を丸の上下左右の中央に(2026-10-31 ユーザー指示)。
   それまでは目の錯覚の補正で右へ寄せていた=三角の形(M8→M6.5 で枠の中央へ)と、丸の余白(左だけ広い)を両方そろえた */
.k14-play svg{padding:calc(22 * var(--u))!important}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){
  .k14-play svg{padding:16px!important}
  .k14-dplay svg{padding:15px!important}
}
/* 動画サムネの ▶(文字)は書体の字面で上下左右がずれる=文字を消して、丸の中央に三角を図形で描く */
.k14 .vg-play{padding:0!important;font-size:0!important}
.k14 .vg-play::before{content:"";display:block;width:14px;height:16px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
/* トップ下の「プライバシーポリシー」も下層ページ(.k14-pfoot)と同じゴシック体に(2026-10-31 ユーザー指示) */
.k14 .k14-foot a{font:700 15px/1 var(--jp)!important;letter-spacing:.02em}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){.k14 .k14-foot a{font-size:13px!important}}

/* ========== 2026-10-31 夕方: ヒーローと Music のカード固定 / Works・Videos は白地でキャラを覆う / 左端の固定 / Music の見出し中央 / 配信リンクの注記(ラボ _lab/14th-fixed.css から) ========== */
/* ラボ(2026-10-31): ヒーローのガラスカードを固定し、Works の白い地でキャラとカードを覆う。Music でキャラが再び現れる。PC のみ */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  /* カード(ロゴ+再生ボタン)をキャラと同じく画面に固定 */
  .k14 .k14-heroS .k14-hcard{position:fixed;transition:opacity .45s ease,visibility 0s linear 0s}
  /* Works は白い地で全面を覆う(キャラもカードも隠れる)。灰色の面と中身はそのまま。
     既存の `.k14 #works.g13-works{background:none!important}` より強い指定にする */
  .k14 main>#works.g13-works{background:#fff!important;z-index:3}
  /* Works が画面の中心まで来たら(=カードはもう白い地の下)ヒーローのカードを消す。Music は同じ位置に自分のカードを持つ */
  html:not([data-k14=top]) .k14-heroS .k14-hcard{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
}
/* Works のグレーの面を外し、見出しは Profile と同じ淡色に(2026-10-31 ユーザー指示)。全幅で */
.k14 main>#works.g13-works::before{display:none!important}
.k14 main>#works.g13-works>.g13-title{color:var(--k-title)!important}
/* 左端の「PORTFOLIO SITE」と猫のスクロールの合図を、右端の帯と同じく常に固定(2026-10-31 ユーザー選択)。PC のみ。
   main の重なり順の中で Works(3)より上に置く=白い地の上にも出る */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-heroS .k14-vert,.k14 .k14-heroS .k14-scroll{position:fixed;z-index:5}
}
/* Music のガラスカード(曲名+再生)も固定。New Release / Discography だけがスクロールで上がってくる(2026-10-31 ユーザー指示)。PC のみ。
   出すのは「Music が画面の中心まで来た〜Videos がカードの下端に届く前」=html.k14-mcard-on(_lab/14th-fixed.js が付け外し) */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-music .k14-mcard{position:fixed;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s}
  html.k14-mcard-on .k14 .k14-music .k14-mcard{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease,visibility 0s linear 0s}
}
/* 左端の猫(固定・右端 92u)と Music の配信ボタン(左 84u)が重なる=ボタンの束を少し右へ(幅は詰めて右端は変えない) */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-rels{left:calc(var(--ox) + 108 * var(--u));width:calc(294 * var(--u))}
  .k14 .k14-rels .ms-links{gap:calc(9 * var(--u)) calc(14 * var(--u))}
}
/* New Release / Discography の見出しを、それぞれの列(左=ジャケットと配信ボタン / 右=ジャケット6枚)の中央へ(2026-10-31 ユーザー指示)。
   左の列は配信ボタンの束(108〜402u)を基準にし、ジャケットも同じ中心(255u)へそろえる */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-head.is-pink{left:calc(var(--ox) + 108 * var(--u));width:calc(294 * var(--u));text-align:center}
  .k14 .k14-head.is-cyan{left:calc(var(--ox) + 970 * var(--u));width:calc(262 * var(--u));text-align:center}
  .k14 .k14-jacket{left:calc(var(--ox) + 152.5 * var(--u))}
}
/* 配信リンクの下の注記(2026-10-31 ユーザー指示)=選曲で配信先が切り替わることを伝える。全幅で */
.k14 .k14-relnote{margin:calc(12 * var(--u)) 0 0;text-align:center;font:500 max(12px,calc(13 * var(--tu)))/1.6 var(--jp);color:#5a6065;word-break:auto-phrase}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){.k14 .k14-relnote{margin:10px 0 0;font-size:12px}}
/* Videos も Works と同じく白い地でキャラを覆う。グレーの面は外し、見出しは淡色に(2026-10-31 ユーザー指示)。全幅で */
/* 白で覆うのは PC だけ(スマホ・タブレットはキャラが固定でないので不要。z-index を上げると Profile のキャラの上端を隠した) */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){.k14 main>#video.video-gallery.s{background:#fff!important;z-index:3}}
.k14 main>#video.video-gallery.s::before{display:none!important}
.k14 main>#video.video-gallery .s-head h2{color:var(--k-title)!important}
/* 再生中のプレーヤー(約73px)に配信ボタン下の注記が隠れていた=新曲のジャケットを 205u→165u に縮め、配信ボタンの束を 528u→476u へ上げる(2026-10-31 ユーザー選択)。中心は 255u のまま */
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-jacket{left:calc(var(--ox) + 172.5 * var(--u));width:calc(165 * var(--u))}
  .k14 .k14-rels{top:calc(var(--oy) + 476 * var(--u))}
}
/* ヒーローのキャッチ(2026-10-31 ユーザー指示)=キャラの右。読み上げは隠れた h1 が担うので aria-hidden。
   キャラとカードと同じく固定し、Works が来たらカードと一緒に消える。スマホ・縦長タブレットは出さない(キャラとカードで画面が埋まるため) */
.k14-catch{display:none}
@media (min-width:1101px),(min-width:641px) and (min-aspect-ratio:5/4){
  .k14 .k14-heroS .k14-catch{display:block;position:fixed;z-index:1;left:calc(var(--ox) + 890 * var(--u));top:calc(var(--oy) + 300 * var(--u));margin:0;
    font:900 calc(36 * var(--tu))/1.12 var(--k-en);color:var(--k-ink);letter-spacing:-.005em;white-space:nowrap;transition:opacity .45s ease,visibility 0s linear 0s}
  html:not([data-k14=top]) .k14-heroS .k14-catch{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
}
/* 配信がまだ反映されていないサービス(点線のピル)=注記の行は置かず、ピルの中に「準備中」(2026-11-02 Almost Evening の Spotify)。
   反映されたら span を a に戻し data-ga-label を付ける */
.k14 .k14-rels .ms-links span.is-soon{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));height:calc(46 * var(--u));min-height:0;padding:0 calc(8 * var(--u));border:1.5px dashed #b9c2ca;border-radius:99px;background:#fff;color:#3d454b;font:700 max(13px,calc(16 * var(--tu)))/1 var(--k-en);white-space:nowrap}
.k14 .k14-rels .ms-links span.is-soon .dot{width:calc(12 * var(--u));height:calc(12 * var(--u));background:#b9c2ca}
.k14 .k14-rels .ms-links span.is-soon small{font:700 11px/1 var(--jp);color:#5a6065}
@media (max-width:640px),(max-width:1100px) and (max-aspect-ratio:5/4){.k14 .k14-rels .ms-links span.is-soon{height:auto;min-height:40px;font-size:13px;gap:6px}}
/* 再生の三角は「重心」を丸の中心に(2026-11-03 ユーザー指示)。外枠の中心で合わせると重心が左に寄り、左寄りに見えた。
   SVG は path を M8.33(重心 x=12)へ。図形で描く ▶ は幅の 1/6 だけ右へずらす(三角の重心は底辺から幅の 1/3) */
.k14 .vg-play::before{transform:translateX(2.33px)}
/* Videos の ▶ が上にずれていた(約9px)=隠した文字「▶」も格子の行を取り、図形の三角が上の行へ押し出されていた。
   三角は丸の中心に絶対配置で固定(重心合わせの 2.33px 右も込み) */
.k14 .vg-play::before{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + 2.33px),-50%)!important}