/* 第13世代(2026-10-18〜)。gen10.css の後に読み、トップページ(index)だけを上書きする。原本 sample/keiru-portfolio-13th.png。ラボ(_lab/13th.css)から移植 */
:root{--g13-bg:#afbdc3;--g13-video:#c1ced3;--g13-white:#edf1f2;--sage:var(--g13-bg);--ink:#252b2e;--mute:#47575f;--g13-round:'M PLUS Rounded 1c',sans-serif}
html{scroll-behavior:smooth;scroll-padding-top:110px}body.g13{background:var(--g13-bg);color:var(--ink);overflow-x:clip}.g13 main{overflow:clip}.g13 .d{opacity:1;transform:none;filter:none;clip-path:none;--e:1}.g13 [hidden]{display:none!important}.g13 a:focus-visible,.g13 button:focus-visible{outline:3px solid #223c47;outline-offset:5px}.g13 .g13-header{position:relative;z-index:50;display:flex;align-items:center;gap:32px;margin:30px auto 0;padding:13px 36px;width:90%;max-width:1250px;border-radius:60px;background:#fff;min-height:70px}.g13 .brand{position:static;display:block;width:125px;height:auto;transform:none;color:#222;mix-blend-mode:normal;margin-right:auto}.g13 .brand svg{width:100%;height:32px}.g13-header nav{display:flex;gap:30px}.g13-header nav a{font:800 20px/1.5 var(--g13-round);text-decoration:none}.g13-lang{display:flex;gap:10px;font-weight:800}.g13-lang button{border:0;background:none;font:inherit;padding:8px 0;cursor:pointer;color:#777}.g13-lang button[aria-pressed=true]{color:#222}.g13-hero{position:relative;max-width:1220px;margin:auto;min-height:680px;padding:170px 30px 50px}.g13-hero h1{font:800 clamp(35px,4.25vw,59px)/1.48 var(--g13-round);letter-spacing:.065em;color:#fff;margin:20px 0 130px}.hero-cat{position:absolute;right:0;top:95px;width:42%}.hero-cat img{width:100%;height:auto}.topics{max-width:730px}.topics h2{font:800 30px/1.5 var(--g13-round);color:#fff;letter-spacing:.06em;margin:0 0 8px}.topics a{background:#f7f7f7;border-radius:60px;display:flex;align-items:center;gap:18px;padding:14px 20px;font-size:18px;font-weight:700;text-decoration:none}.topics a>span:last-child{margin-left:auto}.topic-dot{background:#ff6168;width:17px;height:17px;flex-shrink:0;border-radius:50%}.topics time{white-space:nowrap}.g13-title,.g13 .s-head h2{font:800 clamp(68px,10.8vw,146px)/1.1 var(--g13-round);letter-spacing:0;color:var(--g13-white);margin:0}.g13-works{padding:0 0 70px}.g13-works>.g13-title{text-align:right;padding:0 28px 16px}.works-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 calc((100vw - min(57vw,800px))/2);overscroll-behavior-x:contain}.works-track::-webkit-scrollbar{display:none}.g13 .works-track .wk-card{position:relative;flex:0 0 min(57vw,800px);border:0;border-radius:0;background:#1a2024;box-shadow:none;overflow:hidden;scroll-snap-align:center}.g13 .works-track .wk-thumb{aspect-ratio:1.6;display:block;overflow:hidden}.g13 .works-track .wk-thumb img{width:100%;height:100%;object-fit:cover}.g13 .works-track .wk-body{position:absolute;inset:auto 0 0;padding:65px 32px 24px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;pointer-events:none}.g13 .works-track h3{font:800 clamp(18px,2.4vw,32px)/1.4 var(--jp);color:white}.works-track h3 a{pointer-events:auto;color:inherit;text-decoration:none}.g13 .works-track .wk-note{color:#fff;font-size:15px;margin:5px 0 0}.works-controls{display:flex;justify-content:center;gap:22px;align-items:center;margin-top:22px;font-size:12px;letter-spacing:.12em}.works-controls button{border:1px solid #fff8;border-radius:50%;background:transparent;width:40px;height:40px;cursor:pointer;font-size:20px}.g13 #music.s{background:none;backdrop-filter:none;padding:38px 40px 85px;min-height:0;height:auto;color:var(--ink)}.g13 #music .wrap{max-width:1280px;width:100%;margin:auto}.g13 #music .s-head{justify-content:center;margin-bottom:40px}.g13 #music .jp,.g13 .music-intro,.g13 .ms-note,.g13 .track-heading,.g13 .ms-linkhead{display:none}.music-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 30px;align-items:start}.album-row{display:flex;gap:12px;grid-column:1;grid-row:1}.album-pick{background:none;border:0;padding:0;min-width:0;flex:1;cursor:pointer;transition:transform .25s}.album-pick img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}.album-pick[aria-pressed=true]{outline:3px solid white;outline-offset:4px}.album-pick:hover{transform:translateY(-5px)}.g13 #muFig.mu-canvas{position:relative;inset:auto;transform:none;opacity:1;display:block;grid-column:2;grid-row:1 / span 2;width:100%;height:auto;aspect-ratio:1;border-radius:25px;margin:0;max-width:none}.g13 #music .ms{display:block;grid-column:1;grid-row:2;margin-top:42px}.g13 .ms>div:first-child{display:none}.g13 #trList{display:block;padding:0;margin:0;list-style:none;border:0}.g13 #trList>li{display:none}.g13 #trList>li.is-selected{display:block}.g13 .track-button{color:var(--ink);border:0;background:transparent;padding:10px 6px 24px;min-height:85px}.g13 .track-button .pl{background:#fff;color:#202a2e;width:55px;height:55px}.g13 .track-button .t{font-size:26px}.g13 .track-button small{color:var(--mute);font-size:15px}.g13 .track-button .tag,.g13 .track-duration{display:none}.g13 .ms-release{position:relative;margin-top:28px;padding-top:14px;border-top:2px solid #fff9;width:calc(150% + 45px)}.g13 .ms-links{margin:0;gap:12px;flex-wrap:wrap}.g13 .ms-links a,.g13 .ms-links a.is-main{background:#dbe3e7;color:#26343b;border:1px solid #f3f6f7;box-shadow:none;font-size:14px;padding:13px 17px;min-height:44px}.g13 #video.video-gallery{background:var(--g13-video);backdrop-filter:none;min-height:0;padding:28px 0 70px}.g13 #video .wrap{max-width:none;width:100%;display:grid;grid-template-columns:1.8fr 1.8fr;gap:0 32px;padding:0 70px}.g13 #video .s-head{grid-column:1/-1;margin:0 0 70px -48px}.g13 #video .jp,.g13 .vg-intro,.g13 .vg-group-head,.g13 .vg-title,.g13 .vg-format{display:none}.g13 .vg-group{margin:0;min-width:0}.g13 .vg-wide-grid{display:block}.g13 .vg-wide-grid .vg-card:not(:first-child){display:none}.g13 .vg-short-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.g13 .vg-short-grid .vg-card:nth-child(n+4){display:none}.g13 .vg-card{border-radius:32px;overflow:hidden;background:#f8f8f8;border:0}.g13 .vg-image,.g13 .vg-short .vg-image{aspect-ratio:auto;height:305px;border-radius:32px}.g13 .vg-image img{height:100%;object-fit:cover}.g13 .vg-more{grid-column:1/-1;margin-top:65px;text-align:center}.g13 .vg-more a{background:#c2e1ff;border:2px solid #4e5a60;padding:8px 65px;color:#293a47;border-radius:40px}.g13-blog{max-width:1250px;margin:0 auto;padding:30px 25px 110px}.g13-blog>.g13-title{text-align:right}.blog-intro{color:#fff;font-size:20px;font-weight:700;margin:45px 0 28px}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.blog-card{background:#eef2f3;border-radius:24px;overflow:hidden;text-decoration:none;transition:transform .25s}.blog-card:hover{transform:translateY(-6px)}.blog-card>img{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover}.blog-card>div{padding:25px}.blog-card span{font-size:11px;letter-spacing:.15em;color:#536875}.blog-card h3{font-size:22px;line-height:1.55;margin:16px 0 12px;color:#26353c}.blog-card p{font-size:13px;color:#536875}.blog-card b{font-size:13px;display:block;margin-top:28px}.g13 #profile.s,.g13 #contact.s{position:relative;background:none;min-height:0;height:auto;padding:50px 65px 100px;color:#fff}.g13 #profile .wrap,.g13 #contact .wrap{max-width:1200px;width:100%;margin:auto}.g13 .pf-state{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:35px}.g13 #profile .s-head,.g13 #contact .s-head{grid-column:1/-1;justify-content:center;margin-bottom:35px}.g13 .st-col{width:100%;max-width:none;text-align:center;padding:0;transform:none;opacity:1}.g13 #profile .st-col p,.g13 #contact .st-col p{color:#fff;font-size:23px;line-height:1.55;font-weight:700}.g13 #profile .pf-kicker,.g13 #contact .ct-kicker{font-size:23px;letter-spacing:.17em;opacity:1}.g13 .pf-cat{position:static;display:block;width:100%;max-width:480px;margin:0;transform:none}.g13 .pf-cat img{width:100%;height:auto}.g13 .pf-cat figcaption{color:#fff;text-align:center;letter-spacing:.25em;font-size:22px}.g13 #contact .wrap{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:35px}.contact-cat{margin:0}.contact-cat img{width:100%;height:auto}.g13 #contact .btn{background:#ffbd59;color:#222;border:2px solid #4b5053;border-radius:99px;padding:9px 65px;font-size:16px;box-shadow:none;min-height:46px}.g13 .btn-plane{display:none}.g13 .ct-foot{position:static;grid-column:1/-1;margin-top:50px;padding:15px 0 0;border-top:1px solid #ffffff40;display:flex;justify-content:space-between}.g13 .ct-foot a,.g13 .ct-foot .cp{color:#fff}.g13 .s:before,.g13 .s:after{display:none}.g13 .mu-vis{pointer-events:auto}.g13 .player{z-index:100}.g13 .vg-dialog{z-index:110}
@media(min-width:1500px){.g13-hero{min-height:720px}}
@media(max-width:900px){.g13 .g13-header{gap:18px;padding:14px 22px}.g13-header nav{gap:16px}.g13-header nav a{font-size:14px}.g13 .brand{width:85px}.g13-hero{min-height:560px;padding-top:120px}.g13-hero h1{margin-bottom:120px}.hero-cat{top:100px;right:20px}.topics{max-width:600px}.topics a{font-size:14px}.g13 #video .wrap{padding:0 30px;gap:22px}.g13 #video .s-head{margin-left:-15px}.g13 .vg-image,.g13 .vg-short .vg-image{height:230px}.g13 .vg-short-grid{gap:15px}.g13 #profile.s,.g13 #contact.s{padding-left:30px;padding-right:30px}.g13 #profile .st-col p,.g13 #contact .st-col p{font-size:17px}.g13 #profile .pf-kicker,.g13 #contact .ct-kicker{font-size:17px}.g13 .track-button .t{font-size:20px}.g13 .ms-links a,.g13 .ms-links a.is-main{font-size:12px;padding:10px 12px}.blog-card>div{padding:18px}.blog-card h3{font-size:18px}}
@media(max-width:640px){html{scroll-padding-top:30px}.g13 .g13-header{width:92%;margin-top:16px;padding:12px 17px;display:grid;grid-template-columns:1fr auto;gap:12px;border-radius:22px}.g13 .brand{width:80px}.g13 .brand svg{height:24px}.g13-lang{grid-column:2;grid-row:1;font-size:12px}.g13-header nav{grid-column:1/-1;justify-content:space-between;gap:8px}.g13-header nav a{font-size:11px}.g13-hero{padding:52px 24px 30px;min-height:510px}.g13-hero h1{font-size:29px;line-height:1.55;letter-spacing:.035em;margin:0;position:relative;z-index:1}.hero-cat{top:165px;width:57%;right:17px}.topics{margin-top:210px}.topics h2{font-size:22px}.topics a{padding:12px;gap:8px;font-size:10px;line-height:1.5}.topic-dot{width:10px;height:10px}.topics a>span:last-child{display:none}.g13-title,.g13 .s-head h2{font-size:66px}.g13-works{padding-bottom:30px}.g13-works>.g13-title{padding-right:18px}.works-track{gap:15px;padding:0 11vw}.g13 .works-track .wk-card{flex-basis:78vw}.g13 .works-track .wk-body{padding:38px 17px 15px}.g13 .works-track h3{font-size:18px}.g13 .works-track .wk-note{font-size:11px}.g13 #music.s{padding:25px 20px 45px}.g13 #music .s-head{margin-bottom:30px}.music-layout{grid-template-columns:minmax(0,1fr);gap:25px}.album-row{gap:8px}.g13 #music .ms{grid-row:2;margin-top:0}.g13 #muFig.mu-canvas{grid-column:1;grid-row:3;width:75%;justify-self:center;max-width:330px}.g13 .ms-release{width:100%;margin-top:12px}.g13 .ms-links{gap:8px}.g13 .ms-links a,.g13 .ms-links a.is-main{font-size:10px;flex:1 0 29%;justify-content:center;padding:10px 8px;white-space:nowrap}.g13 .track-button{padding-bottom:15px}.g13 .track-button .pl{width:42px;height:42px}.g13 #video.video-gallery{padding:25px 0 40px}.g13 #video .wrap{grid-template-columns:1fr;padding:0 22px;gap:22px}.g13 #video .s-head{margin:0 0 10px -8px}.g13 .vg-image{height:auto;aspect-ratio:16/9}.g13 .vg-short .vg-image{height:170px}.g13 .vg-card,.g13 .vg-image,.g13 .vg-short .vg-image{border-radius:20px}.g13 .vg-more{margin:10px 0 0}.g13 .vg-more a{font-size:12px;padding:10px 45px}.g13-blog{padding:30px 22px 45px}.blog-intro{font-size:14px;line-height:1.8;margin:25px 0}.blog-grid{grid-template-columns:1fr;gap:20px}.blog-card>div{padding:22px}.blog-card h3{font-size:20px}.blog-card b{margin-top:18px}.g13 #profile.s,.g13 #contact.s{padding:35px 24px 40px}.g13 .pf-state,.g13 #contact .wrap{grid-template-columns:1fr;gap:24px}.g13 #profile .s-head,.g13 #contact .s-head{margin-bottom:15px}.g13 #profile .st-col p,.g13 #contact .st-col p{font-size:16px}.g13 #profile .pf-kicker,.g13 #contact .ct-kicker{font-size:13px}.g13 .pf-cat,.g13 .contact-cat{width:70%;max-width:300px;justify-self:center;margin:0}.g13 .pf-cat figcaption{font-size:17px}.g13 #contact .btn{padding:10px 40px;font-size:14px}.g13 .ct-foot{margin-top:10px;font-size:10px;gap:15px}.g13 .ct-foot .cp,.g13 .ct-foot a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.g13 *{animation:none!important;transition:none!important}}
/* Neutralize the production fixed stage within this experiment. */
.g13:before,.g13:after{display:none}.g13 #profile>.wrap,.g13 #contact>.wrap{position:static;inset:auto;transform:none;height:auto;overflow:visible;pointer-events:auto;padding-top:0}.g13 #profile #pfBio{position:static;inset:auto;display:grid;padding-top:0;opacity:1;visibility:visible;pointer-events:auto}.g13 #profile .s-head,.g13 #contact .s-head{position:static;inset:auto;opacity:1}.g13 #profile .st-col,.g13 #contact .st-col{opacity:1;transform:none}.g13 #music .s-head h2,.g13 #video.video-gallery .s-head h2{color:var(--g13-white)}.g13 #video.video-gallery .vg-more .wd-pill{background:#c2e1ff;color:#293a47}.g13 .music-credit{display:none}.g13 #muFig{overflow:hidden;background:#091414}.g13 #muFig .mu-bg{filter:brightness(.28) saturate(.65)}
.g13 .music-layout>.ms-release{grid-column:1/-1;grid-row:3;width:100%;margin-top:22px}.g13 #muFig .mu-bg{filter:brightness(.28) saturate(.65)!important}.g13 #contact .s-head h2{color:var(--g13-white)}
@media(max-width:640px){.g13 .music-layout>.ms-release{grid-row:4;margin-top:0}.g13 .music-layout{gap:22px}}

/* Overall refinement — 2026-10-18 */
.g13 { --g13-gutter:clamp(24px,5.4vw,74px); }
.g13 .g13-header { max-width:1230px; min-height:68px; }
.g13-header nav a { font-family:var(--jp); font-size:19px; }
.g13-header nav a:hover { color:#597380; }
.g13-lang button { min-width:30px; min-height:44px; }
.g13-hero { min-height:650px; padding-top:155px; }
.hero-cat { width:40%; right:15px; }
.g13-hero h1 { margin-bottom:125px; font-size:clamp(35px,4.1vw,56px); }
.topics a { min-height:58px; font-size:17px; transition:background .2s; }
.topics a:hover { background:white; }
.g13-title,.g13 .s-head h2 { font-family:var(--jp); font-weight:700; font-size:clamp(72px,10.6vw,145px); letter-spacing:-.035em; line-height:1.05; }
.g13-works { padding-bottom:48px; }
.g13-works>.g13-title { padding-right:var(--g13-gutter); padding-bottom:26px; }
.g13 .works-track .wk-body { padding:75px 34px 28px; }
.g13 .works-track .wk-note { font-size:16px; line-height:1.7; }
.works-controls { margin-top:20px; gap:24px; color:#334951; }
.works-controls button { width:44px; height:44px; background:#ffffff24; border-color:#ffffffa0; transition:background .2s; }
.works-controls button:hover { background:#ffffff80; }
.works-count { font-variant-numeric:tabular-nums; }
.g13 #music.s { padding:40px 40px 80px; }
.g13 #music .s-head { margin-bottom:48px; }
.music-layout { column-gap:32px; align-items:center; }
.album-row { align-self:start; padding:5px 4px; }
.album-pick[aria-pressed=true] { outline-width:2px; outline-offset:3px; }
.g13 #music .ms { align-self:center; margin-top:15px; }
.g13 #trList>li { border:0; }
.g13 .track-button { min-height:90px; padding:12px 8px; gap:20px; border-radius:12px; }
.g13 .track-button .t { font-family:var(--jp); font-size:27px; }
.g13 .track-button small { margin-top:7px; font-size:14px; }
.g13 #muFig { --hue:165; isolation:isolate; box-shadow:0 12px 32px #263d4512; }
.g13 #muFig .mu-disc { z-index:2; }
.g13 #muFig .mu-label,.g13 #muFig .mu-foot,.g13 #muFig .mu-cat { z-index:3; }
.g13 #muFig .mu-vis { z-index:4; min-height:35px; }
.g13 .music-layout>.ms-release { margin-top:25px; padding-top:20px; border-top:1px solid #ffffffa0; }
.g13 .ms-links { gap:10px; }
.g13 .ms-links a,.g13 .ms-links a.is-main { font-size:14px; font-weight:700; padding:12px 19px; }
.g13 #video.video-gallery { padding-top:35px; padding-bottom:65px; }
.g13 #video .wrap { padding-inline:var(--g13-gutter); gap:0 32px; }
.g13 #video .s-head { margin:0 0 64px calc(-1 * var(--g13-gutter) + 24px); }
.g13 .vg-image,.g13 .vg-short .vg-image { height:310px; }
.g13 .vg-more { margin-top:48px; }
.g13 #video .vg-more a { min-height:44px; padding:9px 65px; font-size:14px; }
.g13-blog { padding-top:40px; padding-bottom:85px; }
.blog-intro { margin-top:30px; font-size:19px; color:#344c57; }
.blog-card { display:flex; flex-direction:column; border-radius:20px; background:#f3f5f5; }
.blog-card>div { display:flex; flex-direction:column; flex:1; padding:26px; }
.blog-card h3 { font-size:22px; line-height:1.6; letter-spacing:0; }
.blog-card p { margin-bottom:25px; line-height:1.7; }
.blog-card b { margin-top:auto; padding-top:10px; }
.g13 #profile.s,.g13 #contact.s { padding-top:45px; padding-bottom:70px; }
.g13 #profile .s-head,.g13 #contact .s-head { margin-bottom:36px; }
.g13 #profile .st-col p,.g13 #contact .st-col p { font-family:var(--jp); font-size:23px; line-height:1.75; letter-spacing:.03em; }
.g13 #profile .pf-kicker,.g13 #contact .ct-kicker { font-size:21px; letter-spacing:.18em; }
.g13 .pf-cat,.g13 .contact-cat { width:100%; max-width:460px; justify-self:center; }
.g13 #contact .btn { min-width:280px; min-height:48px; }
.g13 .ct-foot { opacity:1; pointer-events:auto; margin-top:32px; padding-top:22px; }
.g13 #contact .ct-foot .cp,.g13 #contact .ct-foot a { color:#344c57; font-size:13px; }
@media (min-width:641px) and (max-width:1000px) {
  .g13-header nav { gap:15px; }
  .g13-header nav a { font-size:14px; }
  .g13 .g13-header { gap:15px; }
  .g13-hero { min-height:565px; padding-top:125px; }
  .hero-cat { top:110px; }
  .g13 .vg-image,.g13 .vg-short .vg-image { height:220px; }
  .g13 #profile .st-col p,.g13 #contact .st-col p { font-size:18px; }
  .g13 #profile .pf-kicker,.g13 #contact .ct-kicker { font-size:15px; }
  .blog-card>div { padding:20px; }
  .blog-card h3 { font-size:19px; }
  .g13 .mu-label { font-size:8px; letter-spacing:.08em; }
}
@media (max-width:640px) {
  .g13 .g13-header { padding:8px 16px 10px; gap:3px; }
  .g13-header nav { gap:5px; }
  .g13-header nav a { display:flex; align-items:center; min-height:40px; font-size:12px; }
  .g13-lang button { min-width:25px; }
  .g13-hero { min-height:510px; padding:44px 24px 38px; }
  .g13-hero h1 { font-size:29px; margin:0; }
  .hero-cat { top:161px; right:23px; width:58%; }
  .topics { margin-top:210px; }
  .topics a { display:grid; grid-template-columns:10px 1fr; gap:3px 9px; border-radius:19px; padding:12px 15px; font-size:12px; }
  .topics time { font-size:11px; }
  .topics a>span:nth-child(3) { grid-column:2; }
  .topic-dot { grid-row:1/3; }
  .g13-title,.g13 .s-head h2 { font-size:68px; }
  .g13-works { padding-bottom:30px; }
  .g13-works>.g13-title { padding:0 22px 22px; }
  .g13 .works-track .wk-body { padding:45px 18px 16px; }
  .g13 .works-track h3 { font-size:17px; }
  .g13 .works-track .wk-note { font-size:12px; line-height:1.55; }
  .g13 #music.s { padding:30px 22px 46px; }
  .g13 #music .s-head { margin-bottom:30px; }
  .music-layout { row-gap:20px; }
  .g13 #music .ms { margin:0; }
  .g13 .track-button { min-height:75px; padding:8px 3px; gap:14px; }
  .g13 .track-button .t { font-size:22px; }
  .g13 .track-button small { font-size:12px; }
  .g13 #muFig.mu-canvas { width:80%; }
  .g13 .music-layout>.ms-release { margin-top:0; padding-top:17px; }
  .g13 .ms-links { gap:8px; }
  .g13 .ms-links a,.g13 .ms-links a.is-main { font-size:11px; padding:10px 7px; }
  .g13 #video.video-gallery { padding:30px 0 45px; }
  .g13 #video .wrap { padding:0 22px; gap:20px; }
  .g13 #video .s-head { margin:0 0 10px -8px; }
  .g13 .vg-image { height:auto; aspect-ratio:16/9; }
  .g13 .vg-short .vg-image { height:170px; }
  .g13 .vg-more { margin:5px 0 0; }
  .g13 #video .vg-more a { font-size:12px; padding:10px 30px; }
  .g13-blog { padding:35px 22px 45px; }
  .blog-intro { font-size:15px; margin:23px 0; }
  .blog-grid { gap:16px; }
  .blog-card { display:grid; grid-template-columns:105px minmax(0,1fr); border-radius:17px; }
  .blog-card>img { height:100%; aspect-ratio:auto; object-position:center; }
  .blog-card>div { padding:17px 15px; }
  .blog-card span { font-size:9px; letter-spacing:.08em; }
  .blog-card h3 { font-size:16px; line-height:1.65; margin:9px 0 12px; }
  .blog-card p { display:none; }
  .blog-card b { font-size:11px; padding-top:0; }
  .g13 #profile.s,.g13 #contact.s { padding:35px 24px 45px; }
  .g13 #profile .s-head,.g13 #contact .s-head { margin-bottom:15px; }
  .g13 #profile .st-col p,.g13 #contact .st-col p { font-size:16px; line-height:1.9; letter-spacing:.01em; }
  .g13 #profile .pf-kicker,.g13 #contact .ct-kicker { font-size:12px; letter-spacing:.13em; }
  .g13 .pf-cat,.g13 .contact-cat { width:72%; max-width:280px; }
  .g13 #contact .btn { min-width:240px; }
  .g13 .ct-foot { margin-top:15px; gap:10px; }
  .g13 #contact .ct-foot .cp,.g13 #contact .ct-foot a { font-size:11px; }
}

/* Navigation state and keyboard access; no production changes. */
.g13-header nav a { position:relative; }
.g13-header nav a::after {
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; border-radius:2px; background:#597380;
  transform:scaleX(0); transition:transform .2s;
}
.g13-header nav a[aria-current="location"]::after { transform:scaleX(1); }
.g13 .works-track:focus-visible { outline:2px solid #344c57; outline-offset:-2px; }
@media (max-width:640px) { .g13-header nav a::after { bottom:3px; } }
@media (prefers-reduced-motion:reduce) { .g13-header nav a::after { transition:none; } }

/* Fixed header and balanced language selector. */
:root { --g13-header-top:24px; --g13-header-height:70px; }
html { scroll-padding-top:calc(var(--g13-header-top) + var(--g13-header-height) + 24px); }
body.g13 { padding-top:calc(var(--g13-header-top) + var(--g13-header-height)); }
.g13 .g13-header {
  position:fixed; top:var(--g13-header-top); left:50%;
  transform:translateX(-50%); margin:0; z-index:90;
  box-shadow:0 4px 24px #263d4510;
}
.g13 .g13-lang {
  display:grid; grid-template-columns:36px 10px 36px; align-items:center;
  justify-items:center; gap:4px; flex-shrink:0;
  font:700 14px/1 var(--jp); letter-spacing:0;
}
.g13 .g13-lang button {
  display:grid; place-items:center; width:36px; height:44px;
  min-width:0; min-height:0; padding:0; margin:0;
  font:inherit; line-height:1; letter-spacing:0; color:#7b8185;
}
.g13 .g13-lang button[aria-pressed="true"] { color:#252b2e; }
.g13 .g13-lang>span { display:block; line-height:1; color:#a0a5a8; }
@media (max-width:640px) {
  :root { --g13-header-top:12px; --g13-header-height:105px; }
  .g13 .g13-lang { grid-template-columns:32px 8px 32px; gap:3px; font-size:12px; }
  .g13 .g13-lang button { width:32px; height:40px; }
}

/* Each section occupies at least one viewport; content may grow on small screens. */
body.g13 { padding-top:0; }
.g13 main > section[id]:is(#works,#music,#video,#blog,#profile,#contact) {
  min-height:100vh;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.g13 main > #top.g13-hero {
  min-height:100vh;
  height:auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:36px;
  row-gap:40px;
  padding-top:calc(var(--g13-header-top) + var(--g13-header-height) + 55px);
  padding-bottom:70px;
}
.g13 .g13-hero h1 { margin:0; }
.g13 .g13-hero .hero-cat {
  position:static;
  width:100%;
  max-width:480px;
  justify-self:end;
}
.g13 .g13-hero .topics { grid-column:1/-1; width:min(100%,730px); margin:0; }
.g13 .works-track { flex-shrink:0; }
@media(max-width:640px) {
  .g13 main > #top.g13-hero {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    row-gap:24px;
    padding-top:calc(var(--g13-header-top) + var(--g13-header-height) + 40px);
    padding-bottom:40px;
  }
  .g13 .g13-hero .hero-cat { width:72%; max-width:300px; justify-self:center; }
  .g13 .g13-hero .topics { grid-column:1; }
}

/* Center the copy and character independently of the bottom Topics block. */
.g13 main > #top.g13-hero {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  padding-block:180px;
}
.g13 .hero-main {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:center;
  gap:36px;
  width:100%;
}
.g13 .g13-hero .topics {
  position:absolute;
  left:30px;
  bottom:70px;
  width:min(calc(100% - 60px),730px);
}
@media(max-width:640px) {
  .g13 main > #top.g13-hero { padding-block:160px; }
  .g13 .hero-main { grid-template-columns:minmax(0,1fr); gap:24px; }
  .g13 .g13-hero .topics { left:24px; bottom:40px; width:calc(100% - 48px); }
}

/* Topics: right arrow inside a circular outline. */
.g13 .topics a>.topic-arrow {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex-shrink:0;
  border:1px solid currentColor;
  border-radius:50%;
  color:#47575f;
  font:500 20px/1 var(--jp);
  margin-left:auto;
}
@media(max-width:640px) {
  .g13 .topics a { grid-template-columns:10px minmax(0,1fr) 28px; }
  .g13 .topics a>.topic-arrow {
    grid-column:3;
    grid-row:1/3;
    width:28px;
    height:28px;
    font-size:18px;
  }
}

/* Reuse the current site's gentle character sway (4.6s, ±2.4deg). */
.g13 .hero-cat img,
.g13 .pf-cat img,
.g13 .contact-cat img,
.g13 .mu-cat { transform-origin:50% 100%; }
@media(prefers-reduced-motion:no-preference) {
  .g13 .hero-cat img,
  .g13 .pf-cat img,
  .g13 .contact-cat img,
  .g13 .mu-cat { animation:sway 4.6s ease-in-out infinite; }
}

/* Match the actual video formats, with equal card heights on desktop. */
.g13 #video.video-gallery .wrap {
  grid-template-columns:minmax(0,256fr) repeat(3,minmax(0,81fr));
  column-gap:clamp(16px,2vw,28px);
  align-items:start;
}
.g13 #video .vg-shorts-group,
.g13 #video .vg-short-grid { display:contents; }
.g13 #video .vg-image {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:22px;
}
.g13 #video .vg-short .vg-image { height:auto; aspect-ratio:9/16; }
.g13 #video .vg-card { border-radius:22px; }
.g13 #video .vg-image img { width:100%; height:100%; object-fit:cover; }
/* Preserve the existing YouTube 4:3 fallback's removal of letterbox bars. */
.g13 #video .vg-wide-grid .vg-image img.is-hq { height:133.333%; }
@media(max-width:640px) {
  .g13 #video.video-gallery .wrap { grid-template-columns:minmax(0,1fr); row-gap:22px; }
  .g13 #video .vg-shorts-group { display:block; }
  .g13 #video .vg-short-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .g13 #video .vg-card,
  .g13 #video .vg-image { border-radius:16px; }
  .g13 #video .vg-short .vg-play { width:36px; height:36px; font-size:12px; }
}

/* YouTube link: pale blue pill, readable ink text, true centered label. */
.g13 #video.video-gallery .vg-more .wd-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:340px;
  max-width:100%;
  min-height:48px;
  padding:12px 24px;
  border:1.5px solid #47575f;
  border-radius:999px;
  background:#c2e1ff;
  color:#293a47;
  font:700 14px/1.5 var(--jp);
  letter-spacing:.02em;
  text-align:center;
  vertical-align:middle;
  box-shadow:none;
  transition:background .2s,transform .2s;
}
.g13 #video.video-gallery .vg-more .wd-pill:hover {
  background:#dbe3e7;
  transform:translateY(-2px);
  box-shadow:none;
}
@media(max-width:640px) {
  .g13 #video.video-gallery .vg-more .wd-pill { width:300px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .g13 #video.video-gallery .vg-more .wd-pill:hover { transform:none; }
}

/* Blog links: a white right arrow inside a filled ink circle. */
.g13 .blog-card .blog-more {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.g13 .blog-card .blog-more>span:first-child {
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}
.g13 .blog-card .blog-arrow {
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:1px solid #293a47;
  border-radius:50%;
  background:#293a47;
  color:#fff;
  font:500 20px/1 var(--jp);
  letter-spacing:0;
}
@media(max-width:640px) {
  .g13 .blog-card .blog-more { gap:8px; }
  .g13 .blog-card .blog-arrow { flex-basis:28px; width:28px; height:28px; font-size:18px; }
}

/* Match the filled Blog arrow. */
.g13 .topics a>.topic-arrow {
  border-color:#293a47;
  background:#293a47;
  color:#fff;
}

/* Mobile navigation reuses the production hamburger and full-screen drawer. */
.g13 .g13-header .menu-btn,
.g13 > .drawer { display:none; }
@media(max-width:640px) {
  .g13 .g13-header {
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    z-index:110;
  }
  .g13 .g13-header>nav { display:none; }
  .g13 .g13-header .g13-lang { grid-column:2; grid-row:1; }
  .g13 .g13-header .menu-btn {
    display:flex;
    position:relative;
    inset:auto;
    grid-column:3;
    grid-row:1;
  }
  .g13 > .drawer {
    display:grid;
    z-index:100;
    padding-top:calc(var(--g13-header-top) + var(--g13-header-height) + 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html.drawer-open { overflow:hidden; }
}

/* Contact CTA: balanced with the other pills, retaining the mockup's amber. */
.g13 #contact .st-col .ct-btnwrap { margin:32px 0 0; }
.g13 #contact .ct-btnwrap .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:300px;
  max-width:100%;
  min-width:0;
  min-height:52px;
  padding:12px 24px;
  gap:0;
  border:1.5px solid #293a47;
  border-radius:999px;
  background:#ffbd59;
  color:#293a47;
  font:700 16px/1.5 var(--jp);
  letter-spacing:.03em;
  text-align:center;
  vertical-align:middle;
  box-shadow:0 3px 0 #293a4714;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.g13 #contact .ct-btnwrap .btn::after { display:none; }
.g13 #contact .ct-btnwrap .btn:hover {
  background:#ffc875;
  transform:translateY(-2px);
  box-shadow:0 5px 12px #293a471a;
}
.g13 #contact .ct-btnwrap .btn:active { transform:translateY(0); box-shadow:none; }
@media(max-width:640px) {
  .g13 #contact .st-col .ct-btnwrap { margin-top:26px; }
  .g13 #contact .ct-btnwrap .btn { width:280px; font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
  .g13 #contact .ct-btnwrap .btn:hover { transform:none; }
}

/* 第11世代の機能(ローディング・旧アンカー)の受け皿 */
.g13 .loader { background:var(--g13-bg); }
.g13 .g13-anchor { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }
.g13 .g13-works { position:relative; }

/* 2026-10-18 Works のカードは原本どおり四角(gen10.css の .wk-thumb が上だけ角丸にしていた) */
.g13 .works-track .wk-thumb, .g13 .works-track .wk-thumb img { border-radius:0; }

/* 2026-10-18 ヒーローに副題と2つのボタンを戻した(第11世代と同じ。#heroPlay は music.js が担う) */
.g13 .hero-copy { min-width:0; }
.g13 .g13-hero .h-tag { font:800 clamp(15px,1.5vw,22px)/1.6 var(--g13-round); letter-spacing:.06em; color:#fff; margin:clamp(14px,1.6vw,24px) 0 0; }
.g13 .g13-hero .h-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px,2.2vw,32px); }
.g13 .g13-hero .mu-btn.is-ghost { background:#fff; }
@media(max-width:640px) {
  .g13 .g13-hero .h-tag { font-size:15px; margin-top:12px; }
  .g13 .g13-hero .h-cta { margin-top:18px; gap:10px; }
  .g13 .g13-hero .mu-btn { font-size:13px; padding:12px 18px; }
}


/* 2026-10-18 言語ボタンは文字だけ(gen10.css の .lang-btn.is-active が差し色の面を敷くので打ち消す。選択中は aria-pressed で濃くする) */
.g13 .g13-lang .lang-btn, .g13 .g13-lang .lang-btn.is-active, .g13 .g13-lang .lang-btn:hover { background:none; border:0; box-shadow:none; }
.g13 .g13-lang .lang-btn:hover { color:#252b2e; }

/* 2026-10-18 ハンバーガーは丸枠なし・黒の3本線(ユーザー指示)。開くと×になる動きは gen10.css のまま */
@media(max-width:640px) {
  .g13 .g13-header .menu-btn { background:none; box-shadow:none; }
  .g13 .g13-header .menu-btn span { background:#252b2e; width:26px; }
  .g13 .g13-header .menu-btn:focus-visible { outline:2px solid #344c57; outline-offset:2px; border-radius:8px; }
}

/* 2026-10-18 Profile の本文の下に SNS(ドロワーと同じ4つ。GA のラベルは <名前>_profile) */
.g13 .pf-sns { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:clamp(24px,3vh,34px); }
.g13 .pf-sns .sns-icon { width:48px; height:48px; border:0; box-shadow:0 4px 14px #263d4514; }
.g13 .pf-sns .sns-icon img { width:20px; height:20px; }
.g13 .pf-sns .sns-icon:focus-visible { outline:2px solid #344c57; outline-offset:3px; }
@media(max-width:640px) { .g13 .pf-sns { gap:12px; } .g13 .pf-sns .sns-icon { width:44px; height:44px; } }


/* 2026-10-18 スマホ(640px以下)は「各節=1画面」をやめ、中身のままの高さにする(ユーザー指示)。
   ヒーローの Topics も下端の絶対配置をやめて流れに戻す(画面の高さに合わせる理由が無くなったため) */
@media(max-width:640px) {
  .g13 main > section[id]:is(#works,#music,#video,#blog,#profile,#contact) { min-height:0; justify-content:flex-start; }
  .g13 main > #top.g13-hero { min-height:0; justify-content:flex-start; padding-top:calc(var(--g13-header-top) + var(--g13-header-height) + 36px); padding-bottom:48px; }
  .g13 .g13-hero .topics { position:static; width:100%; margin-top:32px; }
}

/* 2026-10-18 節の地を交互に(ユーザー指示): Hero 地 / Works 明 / Music 地 / Videos 明 / Blog 地 / Profile 明 / Contact 地。明=Videos と同じ --g13-video */
.g13 main > #works, .g13 main > #profile.s { background:var(--g13-video); }

/* 2026-10-18 Profile の本文は墨(ユーザー指示)。白は明るい地 #c1ced3 の上で 1.6 しか無かった。墨 #252b2e で 8.9。大見出し「Profile」は他の節と同じ淡い色のまま */
.g13 main > #profile.s .pf-kicker, .g13 main > #profile.s .pf-text, .g13 main > #profile.s figcaption { color:#252b2e; }

/* 2026-10-18 砂目テクスチャ「弱」(ユーザーがラボ _lab-grain.html で4段階を見比べて選択)。
   ブルーグレーの地だけに敷く=サムネ・ジャケット・動画・白いカードには乗らない。止まった粒(アニメーションなし)。
   assets/grain-13.png=128px のパレットPNG・11KB(暗い粒55%・明るい粒45%、不透明度は最大 20/255)。 */
body.g13, .g13 main > #works, .g13 main > #video.video-gallery, .g13 main > #profile.s { background-image:url(/assets/grain-13.png?v=20260942); background-size:128px 128px; }
/* 明地の下層(作品詳細・お問い合わせ・プライバシー)には敷かない=読みやすさ優先で戻した地なので */
body.g13-page.is-light { background-image:none; }

/* 2026-10-18 Contact の本文も墨(ユーザー指示。Profile と同じ扱い)。白は地 #afbdc3 の上で 1.9、墨 #252b2e で 7.4。大見出し「Contact」は淡色のまま */
.g13 main > #contact.s .ct-kicker, .g13 main > #contact.s .ct-lead, .g13 main > #contact.s .sub { color:#252b2e; }