:root,:root[data-look="s"]{
  /* S 墨と銀(推奨):墨→銀灰の明暗+抑えた朱の1点 */
  --h-c:#F4F4F2;--h-bg:#EAEAE7;--h-edge:#D3D3CF;--h-text:#17181B;--h-sub:#4E5157;--h-shadow:20,20,22;--h-shop:.55;
  --s-top:#E6E7E8;--s-top2:#C9CCD0;--s-bottom:#2A2C30;--s-side:#2B2D32;--s-side2:#41444A;--s-back:#CFD1D3;--s-key:#B5432F;--s-key2:#963524;--s-seam:#FFFFFF;--s-edge:rgba(255,255,255,.16);
  --hb-bg:#17181B;--hb-fg:#FFFFFF;--h-panel:rgba(234,234,231,.86);
  --sec-a:#F1F1EE;--sec-a2:#E9E9E6;--sec-b:#E5E5E1;--sec-c:#EFEFEC;--sec-d:#E7E7E3;--sec-light:rgba(255,255,255,.75);
  --cta-bg:#2A2C30;--cta-fg:#FFFFFF;--cta-sub:#C9CCD0;--card:#F8F8F6;--card-line:#D6D6D1;
}
:root[data-look="n"]{
  /* N 紺と霧:深い紺→青灰→霧の明色+穏やかな砂色の1点 */
  --h-c:#F3F4F5;--h-bg:#E8EBEE;--h-edge:#CED4DA;--h-text:#172033;--h-sub:#4B5566;--h-shadow:18,28,46;--h-shop:.55;
  --s-top:#E4E8EE;--s-top2:#C4CCD6;--s-bottom:#1E2A3D;--s-side:#1F2D45;--s-side2:#33445E;--s-back:#D3D9E0;--s-key:#D8C7A8;--s-key2:#BFA982;--s-seam:#FFFFFF;--s-edge:rgba(255,255,255,.16);
  --hb-bg:#172033;--hb-fg:#FFFFFF;--h-panel:rgba(232,235,238,.86);
  --sec-a:#EEF1F4;--sec-a2:#E6EAEF;--sec-b:#E1E7ED;--sec-c:#EDF0F4;--sec-d:#E4E9EF;--sec-light:rgba(255,255,255,.75);
  --cta-bg:#1E2A3D;--cta-fg:#FFFFFF;--cta-sub:#C4CCD6;--card:#F7F9FB;--card-line:#D1D9E1;
}
:root{
  --paper:#FFFFFF;--ink:#1D1E20;--sub:#5B5E63;--rule:#D9D7D2;--accent:#C4161C;--soft:#F3F1EC;
  --hh:64px;
  --gut:clamp(20px,4vw,40px);--max:1240px;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;
}
html{scroll-padding-top:calc(var(--hh) + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:8px 16px}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.nb{display:inline-block;white-space:nowrap;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.note{font-size:13px;line-height:1.8;color:var(--sub)}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.link:hover{text-decoration-thickness:2px}
.textbtn{background:none;border:0;padding:0;cursor:pointer}

.review{background:#2B2B2B;color:#fff;font-size:12.5px;line-height:1.6}
.review .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-block:8px}
.review .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.review button,.review a{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;padding:4px 12px;min-height:32px;cursor:pointer;font-size:12.5px;text-decoration:none;display:inline-flex;align-items:center}
.review button[aria-pressed="true"],.review button[aria-current="page"]{background:#fff;color:#1F2124;border-color:#fff}

.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
.logo{display:grid;place-items:center;width:136px;aspect-ratio:284/72;border:1px dashed #8A8D92;color:var(--sub);font-size:10px;line-height:1.3;text-align:center;background:transparent;cursor:pointer;padding:0;flex:none}
.gnav{display:flex;align-items:center;gap:4px}
.gnav button{background:none;border:0;cursor:pointer;height:44px;padding:0 14px;font-size:14px;font-weight:500;position:relative}
.gnav button[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--ink)}
.gnav .cta-s{margin-left:12px;border:1px solid var(--ink);border-radius:999px;padding:0 20px}
.gnav .cta-s:hover{background:var(--ink);color:#fff}
.gnav .cta-s[aria-current="page"]::after{display:none}
.menu-btn{display:none;background:none;border:1px solid var(--ink);border-radius:999px;height:40px;padding:0 18px;font-size:14px;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:60;background:var(--paper);padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 24px);display:none;flex-direction:column}
.drawer.open{display:flex}
.drawer-top{display:flex;justify-content:space-between;align-items:center;height:var(--hh)}
.drawer ul{margin-top:24px;border-top:1px solid var(--rule)}
.drawer li button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:18px 0;font-size:20px;font-weight:700;cursor:pointer}
.drawer .note{margin-top:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:#fff;color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}

.screen{display:none}
.screen.is-active{display:block}
.screen h1:focus{outline:none}

/* ═══ ヒーロー「時間の短冊」(仮CG) ═══ */
.hero{position:relative;height:440vh;background:var(--h-bg);transition:background .4s}
.hero-pin{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));overflow:hidden;color:var(--h-text);
  background:radial-gradient(75% 65% at 60% 45%,var(--h-c) 0%,var(--h-bg) 45%,var(--h-edge) 100%)}
.stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 46%;pointer-events:none;overflow:hidden}
.floor{position:absolute;left:50%;top:50%;width:46vw;height:9vw;margin:-4.5vw 0 0 -23vw;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--h-shadow),.3),rgba(var(--h-shadow),0));filter:blur(10px);will-change:transform,opacity}
.scene{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.st{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.f{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.f.front{inset:0;background-repeat:no-repeat;box-shadow:inset 0 1px 0 var(--s-edge),inset 0 -1px 0 rgba(0,0,0,.16)}
.f.back{inset:0;background:var(--s-back)}
.f.top{left:0;right:0;background:linear-gradient(180deg,var(--s-top),var(--s-top2))}
.f.bottom{left:0;right:0;background:var(--s-bottom)}
.f.left,.f.right{top:0;bottom:0;background:linear-gradient(90deg,var(--s-side),var(--s-side2))}
.st.key .f.top{background:linear-gradient(180deg,var(--s-key),var(--s-key2))}
.seam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--s-seam);opacity:0}
.st.key .seam{background:var(--s-key)}

.hcopy{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);z-index:2;will-change:transform,opacity}
.hcopy .inner{width:min(36em,50%);max-width:100%;container-type:inline-size}
.hcopy .nb,.hcta .nb{white-space:nowrap}
.hcopy h1{font-size:clamp(28px,3.8vw,52px);font-size:clamp(26px,9.4cqi,52px);line-height:1.42;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt";text-wrap:balance}
.hcopy .lead{margin-top:20px;font-size:clamp(15px,1.4vw,17px)}
.hcopy .big{font-size:clamp(20px,2.4vw,34px);font-size:clamp(18px,6.2cqi,34px);line-height:1.6;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.hcopy .sm{margin-top:12px;font-size:14px;color:var(--h-sub)}
#copy2,#copy3{opacity:0}
.hcta{position:absolute;inset:0;z-index:3;display:flex;align-items:center;opacity:0}
.hcta .wrap{width:100%;display:flex;justify-content:flex-end}
.hcta .inner{flex:0 0 auto;width:min(28em,42%);max-width:100%;container-type:inline-size}
@media (min-width:721px) and (max-width:900px){.hcta .inner{width:40%}}
.hcta h2{font-size:clamp(24px,3vw,42px);font-size:clamp(22px,12.5cqi,42px);line-height:1.5;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.hcta p{margin-top:16px}
.hcta .acts{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:28px}
.hero .btn{background:var(--hb-bg);color:var(--hb-fg);border-color:var(--hb-bg)}
.hero .btn:hover{background:transparent;color:var(--h-text);border-color:var(--h-text)}
.hero .btn.line{background:transparent;color:var(--h-text);border-color:var(--h-text)}
.hero .btn.line:hover{background:var(--hb-bg);color:var(--hb-fg)}
.scrim{display:none}
.cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font-size:12px;color:var(--h-sub);letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;gap:6px}
.cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--h-sub),transparent)}
.review .lbl{opacity:.75}
.hero-ui{position:absolute;right:var(--gut);top:14px;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.motion-btn{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid #BDBAB3;border-radius:999px;min-height:36px;padding:0 14px;font-size:12.5px;cursor:pointer}
.badge{font-size:11px;color:var(--ink);border:1px dashed #80868B;border-radius:999px;padding:2px 10px;background:rgba(255,255,255,.9)}
.autonote{position:absolute;left:var(--gut);top:14px;z-index:5;max-width:min(30em,60%);background:#fff;color:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.7}
.autonote[hidden]{display:none}

/* セクション共通 */
.sec{padding-block:clamp(64px,10vw,128px)}
.sec + .sec{border-top:1px solid var(--rule)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(24px,4vw,40px)}
.h2{font-size:clamp(24px,3.2vw,40px);line-height:1.5;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.lede{max-width:36em;font-size:clamp(15px,1.5vw,17px);margin-top:12px}
.eyebrow{font-size:14px;color:var(--sub);font-weight:700;letter-spacing:.06em}







/* ═══ v20 本文の読みやすさ:点と重なっても読めるよう、文字のまわりに背景色のごく薄いふち ═══ */
#s-top .sec :is(p,h2,h3,dt,dd,address,.big,.lede,.fw-title,.fw-meta,.fw-credit,.note){text-shadow:0 0 6px var(--paper),0 0 2px var(--paper)}

/* ═══ v18 ページ全体のアニメーション ═══ */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rvd,0s)}
.rv.in{opacity:1;transform:none}
.rvh{position:relative}
.rvh .rvt{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1) .25s}
.rvh.in .rvt{clip-path:inset(0 0 0 0)}
.rvh::before{content:"";position:absolute;top:.72em;right:calc(100% + 10px);width:var(--tick,0px);height:2px;background:#E50027;transform-origin:left center;transform:scaleX(0);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.rvh.in::before{transform:scaleX(1)}
.mq{position:relative;z-index:1;overflow:hidden;padding-block:clamp(18px,3vw,36px);border-block:1px solid var(--rule);background:color-mix(in srgb,var(--paper) 45%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-track span{display:inline-flex;align-items:center;gap:.5em;padding-right:.5em;font-size:clamp(44px,8vw,120px);font-weight:700;line-height:1.05;letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.mq-track i{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:#E50027}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
.mq.off .mq-track{animation-play-state:paused}
html.rm .rv{opacity:1;transform:none;transition:none}
html.rm .rvh .rvt{clip-path:none;transition:none}
html.rm .rvh::before{display:none}
html.rm .mq-track{animation:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rvh .rvt{clip-path:none}.rvh::before{display:none}.mq-track{animation:none}}

/* ═══ v17 読み込み時の赤い点を、よりダイナミックに(ため→跳ぶ→着地→走る→線→赤い幕) ═══ */
#intro .i-dot{transform-origin:50% 50%}
#intro .i-ghost{position:absolute;left:0;top:0;border-radius:50%;background:#E50027;opacity:0;will-change:transform,opacity}
#intro .i-ripple{position:absolute;left:0;top:0;border:2px solid #E50027;border-radius:50%;opacity:0;will-change:transform,opacity}
#introBand{position:fixed;top:0;bottom:0;left:0;width:0;background:#E50027;z-index:201;pointer-events:none;display:none;will-change:transform,width}
html.rm #introBand{display:none!important}

/* ═══ v16 背景:白地に細かい点の群れ。5秒ごとに形が移り変わる(WebGL、外部ライブラリなし) ═══ */
#dots{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.no-gl #dots,body.bg-off #dots{display:none}
main,.foot{position:relative;z-index:1}
#t13{background:transparent}
#t13 .amb{display:none}
.dots-ui{position:absolute;right:var(--gut);bottom:16px;z-index:2}
@supports (background:color-mix(in srgb,red 50%,transparent)){
  #s-top #works-top{background:linear-gradient(180deg,color-mix(in srgb,var(--sec-a) 62%,transparent),color-mix(in srgb,var(--sec-a2) 68%,transparent))}
  #s-top #service{background:color-mix(in srgb,var(--sec-b) 68%,transparent)}
  #s-top #business{background:color-mix(in srgb,var(--sec-c) 68%,transparent)}
  #s-top #about{background:color-mix(in srgb,var(--sec-d) 70%,transparent)}
}

/* ═══ v13 読み込み時のロゴアニメーション→ページ全体の背景の再生ヘッド(スクロール連動のトップはやめる) ═══ */
.hx#hx{display:none}
:root{--phx:max(12px,calc((100vw - var(--max)) / 2 + var(--gut) / 2))}
.t13{position:relative;min-height:calc(100vh - var(--hh));min-height:calc(100svh - var(--hh));display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(75% 65% at 55% 40%,var(--h-c) 0%,var(--h-bg) 55%,var(--h-edge) 100%)}
.t13>.wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(40px,6vw,96px);align-items:end;padding-block:clamp(56px,10vh,120px)}
.t13 .main{container-type:inline-size}
.t13 h1{font-size:clamp(30px,10.2cqi,76px);line-height:1.36;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.t13 .lead{margin-top:22px;font-size:clamp(15px,1.4vw,18px);color:var(--h-sub)}
.t13 .side{container-type:inline-size;border-top:1px solid var(--h-text);padding-top:20px}
.t13 .svc13{font-size:clamp(19px,7cqi,28px);line-height:1.6;font-weight:700;font-feature-settings:"palt"}
.t13 .sm{margin-top:10px;font-size:14px;color:var(--h-sub)}
.t13 .acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:24px}
.t13 .nb{white-space:nowrap}
.t13 .down{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;letter-spacing:.08em;color:var(--h-sub);z-index:1}
@media (max-width:900px){.t13>.wrap{grid-template-columns:minmax(0,1fr);align-items:start}}
@media (max-width:720px){.t13 .acts .btn{width:100%}.t13 .down{display:none}}
body.hero13-in .mcta{display:none!important}
#ph{position:fixed;top:0;bottom:0;left:var(--phx);width:2px;margin-left:-1px;background:#E50027;opacity:.9;z-index:35;pointer-events:none;display:none}
#phDot{position:fixed;left:var(--phx);top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#E50027;z-index:36;pointer-events:none;display:none;will-change:transform}
body.ph-on #ph,body.ph-on #phDot{display:block}
@media (max-width:720px){#ph{width:1.5px}#phDot{width:10px;height:10px;margin:-5px 0 0 -5px}}
#intro{position:fixed;inset:0;z-index:200;background:radial-gradient(75% 65% at 50% 45%,var(--h-c) 0%,var(--h-bg) 50%,var(--h-edge) 100%);cursor:pointer}
#intro[hidden]{display:none}
#intro .i-logo{position:absolute;left:50%;top:46%;width:min(46vw,560px);transform:translate(-50%,-50%);will-change:transform,opacity}
#intro .i-logo img{display:block;width:100%;height:auto}
#intro .i-dot{position:absolute;left:0;top:0;border-radius:50%;background:#E50027;will-change:transform}
#intro .i-line{position:absolute;left:0;top:0;width:2px;height:0;background:#E50027;will-change:transform,height}
#intro .skip-hint{position:absolute;right:var(--gut);bottom:18px;font-size:12px;color:var(--h-sub)}
@media (max-width:720px){#intro .i-logo{width:72vw;top:42%}}
html.rm #intro{display:none}

/* ═══ v12 新しいトップ:公式ロゴの赤い点→再生ヘッド→走査で文字→枠へ広がる ═══ */
.hero#hero{display:none}
.hx{position:relative;height:380vh}
.hx-pin{background:radial-gradient(75% 65% at 50% 45%,var(--h-c) 0%,var(--h-bg) 50%,var(--h-edge) 100%)}
.hx-logo{position:absolute;left:50%;top:46%;width:min(46vw,560px);transform:translate(-50%,-50%);z-index:2;will-change:transform,opacity}
.hx-logo img{display:block;width:100%;height:auto}
.hx-logo .full{display:none}
.hx-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#E50027;z-index:4;will-change:transform}
.hx-dot i{position:absolute;inset:0;border-radius:50%;background:inherit;animation:hxPulse 2.6s ease-in-out infinite alternate}
@keyframes hxPulse{from{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:.82}}
.hx-pin.paused .hx-dot i{animation-play-state:paused}
.hx-line{position:absolute;left:0;top:0;width:2px;height:0;background:#E50027;z-index:3;opacity:0;will-change:transform,height}
.hx-frame{position:absolute;border:1px solid var(--h-text);opacity:0;z-index:1;pointer-events:none}
.hx-copy{position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%);z-index:2;container-type:inline-size;opacity:0;visibility:hidden}
.hx-copy .t{font-size:clamp(28px,7.4cqi,64px);line-height:1.42;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.hx-copy .s{margin-top:18px;font-size:clamp(14px,1.4vw,17px);color:var(--h-sub)}
.hx-copy .nb{white-space:nowrap}
.hx-cta .t{font-size:clamp(24px,5.6cqi,48px)}
.hx-cta .acts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:26px}
.hx-ui{position:absolute;left:var(--gut);top:14px;z-index:6}
.hx-note{position:absolute;left:var(--gut);top:60px;z-index:6;max-width:min(30em,70%);background:#fff;border:1px solid var(--ink);border-radius:8px;padding:10px 14px;font-size:13px}
.hx-note[hidden]{display:none}
.hx-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;color:var(--h-sub);letter-spacing:.08em;z-index:2}
@media (max-width:720px){
  .hx{height:320vh}
  .hx-logo{width:72vw;top:42%}
  .hx-copy{left:var(--gut);right:var(--gut)}
  .hx-copy .t{font-size:clamp(24px,8.6cqi,40px)}
  .hx-cta .t{font-size:clamp(22px,8cqi,34px)}
  .hx-cta .acts .btn{width:100%}
  .hx-cue{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
/* 静止版:動かさず縦に並べ、すべての文と導線を表示 */
html.rm .hx{height:auto}
html.rm .hx-pin{position:relative;top:0;height:auto;overflow:visible;padding:clamp(48px,8vw,96px) 0 clamp(48px,8vw,80px)}
html.rm .hx-logo{position:relative;left:auto;top:auto;transform:none!important;opacity:1!important;margin:0 auto clamp(40px,6vw,72px)}
html.rm .hx-logo .full{display:block}
html.rm .hx-logo .nodot,html.rm .hx-dot,html.rm .hx-line,html.rm .hx-frame,html.rm .hx-cue{display:none}
html.rm .hx-copy{position:relative;left:auto;right:auto;top:auto;transform:none;opacity:1!important;visibility:visible!important;clip-path:none!important;max-width:var(--max);margin:0 auto 40px;padding-inline:var(--gut)}

/* ═══ v11 公式ロゴ(公開サイトの画像を参照。描き替えない)と冒頭のロゴスタート ═══ */
.logo.has-logo{border:0;opacity:1}
.logo img{display:block;width:100%;height:auto}
.logo .logo-ph{display:none}
.logo.noimg img{display:none}
.logo.noimg .logo-ph{display:block}
.hlogo{position:absolute;left:50%;top:44%;z-index:2;width:clamp(200px,30vw,420px);transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}
.hlogo img{display:block;width:100%;height:auto}
.hlogo .hlogo-ph{display:none;border:1px dashed currentColor;border-radius:6px;padding:14px 10px;text-align:center;font-size:13px;line-height:1.6;color:var(--h-sub);background:rgba(255,255,255,.6)}
.hlogo.noimg img{display:none}
.hlogo.noimg .hlogo-ph{display:block}
html.rm .hlogo{display:none}
@media (max-width:720px){.hlogo{top:34%;width:62vw}}

/* ═══ v11 事業カード:画像枠の比率・境界線・本文の開始位置を2枚でそろえる ═══ */
.bz .fw-frame{aspect-ratio:3/2}
.bz .fw-frame img{object-fit:contain}

/* ═══ v9 背景の淡い光の動き:ぼかした光がゆっくり漂う。停止・動きを減らす設定・画面外・タブ非表示では止める ═══ */
:root,:root[data-look="n"]{--amb-rgb:118,140,172}
:root[data-look="s"]{--amb-rgb:150,150,146}
.amb{position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 32% at 28% 30%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),radial-gradient(34% 28% at 74% 68%,rgba(var(--amb-rgb),.16),rgba(var(--amb-rgb),0) 70%);
  animation:ambDrift 38s ease-in-out infinite alternate;will-change:transform}
@keyframes ambDrift{0%{transform:translate3d(-5%,-3%,0) scale(1)}50%{transform:translate3d(4%,2%,0) scale(1.06)}100%{transform:translate3d(-2%,5%,0) scale(1.02)}}
.sway{position:absolute;inset:0;transform-style:preserve-3d;animation:sway 16s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateY(-1.6deg) translate3d(0,-4px,0)}to{transform:rotateY(1.6deg) translate3d(0,4px,0)}}
.ambsec{position:relative;overflow:hidden}
.ambsec>.wrap{position:relative;z-index:1}
.ambsec::before{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(30% 26% at 20% 25%,rgba(255,255,255,.7),rgba(255,255,255,0) 70%),radial-gradient(28% 24% at 80% 75%,rgba(var(--amb-rgb),.12),rgba(var(--amb-rgb),0) 70%);
  animation:ambDrift 46s ease-in-out infinite alternate;will-change:transform}
#service.ambsec::before{animation-duration:52s;animation-direction:alternate-reverse}
#about.ambsec::before{animation-duration:58s}
.hero-pin.paused .amb,.stage.paused .sway,.ambsec.amb-off::before{animation-play-state:paused}
html.rm .amb,html.rm .sway,html.rm .ambsec::before{animation:none}
html.rm .amb{inset:0} /* v10:静止版ではヒーローの枠がはみ出しを隠さないため、光の層を枠内に収める(横スクロール防止) */
@media (prefers-reduced-motion:reduce){.amb,.sway,.ambsec::before{animation:none}}
.foot .motion-btn{margin-top:12px}

/* ═══ v9 改行:文節単位の改行(対応ブラウザのみ)と行の長さの調整 ═══ */
h1,h2,h3,.lede,.big,.fw-title,.bz-title,.card-title,.wk-title,.dt-title h2{word-break:auto-phrase;text-wrap:balance}
p,dd,address,.bz-desc{text-wrap:pretty}

/* ═══ v9 実績一覧(全件画像付き)・作品詳細の画像 ═══ */
.wkyear{margin-top:clamp(40px,6vw,64px)}
.wkyear:first-child{margin-top:0}
.wkyear>h2{font-size:clamp(26px,3.2vw,40px);font-weight:400;color:var(--sub);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.wkgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.wk .fw-media,.bz .fw-media{display:block;width:100%}
.wk .fw-frame{aspect-ratio:16/10;background:linear-gradient(180deg,#EEF0F2,#E2E5E9)}
.wk .fw-frame img,.dk .fw-frame img{inset:0;height:100%;object-fit:contain;transform:none}
.wk .fw-text{margin-top:12px}
.wk-meta{font-size:12.5px;color:var(--sub)}
.wk-title{margin-top:4px;font-size:15.5px;font-weight:700;line-height:1.7}
.wk .fw-go{margin-top:10px;font-size:13.5px}
.dk{margin-top:28px}
.dk .fw-frame{width:min(100%,calc(70vh * var(--arn)));margin-inline:auto;border-radius:6px}
@media (max-width:960px){.wkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.wkgrid{grid-template-columns:minmax(0,1fr)}}

/* ═══ v8 ヒーロー下の面:真っ白をやめ、淡い面・柔らかい光・節ごとの穏やかな色の変化(模様は使わない) ═══ */
#works-top{background:radial-gradient(55% 380px at 12% 0%,var(--sec-light),transparent 70%),linear-gradient(180deg,var(--h-bg) 0%,var(--sec-a) 240px,var(--sec-a2) 100%)}
#service{background:linear-gradient(180deg,var(--sec-a2) 0%,var(--sec-b) 100%)}
#business{background:radial-gradient(45% 420px at 88% 0%,var(--sec-light),transparent 70%),var(--sec-c)}
#about{background:linear-gradient(180deg,var(--sec-c) 0%,var(--sec-d) 100%)}
#s-top .sec + .sec{border-top:1px solid rgba(255,255,255,.6)}
#s-top .cta{background:var(--cta-bg);color:var(--cta-fg);border-top:0}
#s-top .cta .lede{color:var(--cta-sub)}
#s-top .cta .btn{background:#FFFFFF;color:var(--cta-bg);border-color:#FFFFFF}
#s-top .cta .btn:hover{background:transparent;color:#FFFFFF}
.hero{transition:none}

/* ═══ v8 事業紹介 ═══ */
.bzgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.bz{background:var(--card);border:1px solid var(--card-line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.bz .fw-media{display:block}
.bz .fw-frame{border-radius:0}
.bz .fw-frame img{inset:0;height:100%;object-fit:contain;transform:none}
.bz .fw-text{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:0;flex:1}
.bz-eyebrow{font-size:12.5px;letter-spacing:.08em;color:var(--sub);font-weight:700}
.bz-title{margin-top:6px;font-size:clamp(20px,2vw,26px);line-height:1.5;font-weight:700}
.bz-desc{margin-top:12px;font-size:15px;line-height:1.9}
.bz .fw-go{align-self:flex-start;margin-top:20px}
.fw-ph small{display:block;margin-top:6px;font-size:11.5px;color:#5B5E63;word-break:break-all}

/* ═══ v8 拠点と地図 ═══ */
.locs{margin-top:clamp(48px,6vw,72px)}
.locs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:20px}
.loc{background:var(--card);border:1px solid var(--card-line);border-radius:8px;padding:clamp(18px,2vw,26px)}
.loc h4{font-size:17px;font-weight:700}
.loc address{font-style:normal;margin-top:6px;font-size:15px;line-height:1.8}
.map{position:relative;margin-top:16px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#E9ECEF,#DCE1E6);border:1px solid var(--card-line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.map.live iframe{pointer-events:auto}
.map-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-size:13.5px;line-height:1.7;color:#3F4348}
.map-ph p{margin-bottom:10px}
.map-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.map-ctl{position:absolute;left:10px;bottom:10px;display:none;gap:8px}
.map.loaded .map-ctl{display:flex}
.map.loaded .map-ph{display:none}
.map.blocked .map-ctl{display:none}
.map.blocked::before{content:"このプレビューでは地図を埋め込み表示できません。下の「Googleマップで開く」をご利用ください"!important}
.map.loaded::before{content:"地図を読み込んでいます。表示されない場合は下の「Googleマップで開く」をご利用ください";position:absolute;inset:0;display:grid;place-items:center;padding:24px 24px 64px;text-align:center;font-size:13.5px;line-height:1.7;color:#3F4348}
.map-note{margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--sub)}
.map-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:44px;font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:5px}
.map-open::after{content:"↗"}

/* ═══ v7 トップの実績:作品画像+スクロール連動 ═══ */
.fwlist{display:flex;flex-direction:column;gap:clamp(72px,10vw,140px);margin-top:clamp(32px,5vw,56px)}
.fw{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);align-items:center}
.fw-media{display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;text-decoration:none}
.fw.l .fw-media{grid-column:1 / span 7}.fw.l .fw-text{grid-column:9 / span 4}
.fw.l.alt .fw-media{grid-column:6 / span 7;grid-row:1}.fw.l.alt .fw-text{grid-column:1 / span 4;grid-row:1}
.fw.p .fw-media{grid-column:2 / span 5}.fw.p .fw-text{grid-column:8 / span 4}
.fw.p.alt .fw-media{grid-column:7 / span 5;grid-row:1}.fw.p.alt .fw-text{grid-column:2 / span 4;grid-row:1}
.fw.p .fw-frame{width:min(100%,calc((100vh - 200px) * var(--arn)));width:min(100%,calc((100svh - 200px) * var(--arn)));margin-inline:auto}
.fw-frame{position:relative;overflow:hidden;border-radius:4px;background:#E4E3DF;aspect-ratio:var(--ar);clip-path:inset(0 var(--wipe,0%) 0 0);will-change:clip-path}
.fw-frame img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;display:block;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.fw.p .fw-frame img{inset:0;height:100%;object-fit:contain;background:#E4E3DF;transform:none}
.fw-ph{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:16px;font-size:13px;line-height:1.7;color:#4E5157;
  background:linear-gradient(180deg,#ECEBE8,#D9D8D4)}
.fw-frame.noimg .fw-ph{display:grid}
.fw-frame.noimg img{display:none}
.fw-ph b{display:block;font-size:12px;color:#17181B;margin-bottom:4px}
.fw-cut{position:absolute;top:0;bottom:0;right:var(--wipe,0%);width:2px;margin-right:-1px;background:rgba(255,255,255,.9);opacity:var(--cut,0);pointer-events:none}
.fw-text>*{opacity:var(--o,1);transform:translate3d(0,var(--ty,0px),0)}
.fw-meta{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.fw-title{margin-top:10px;font-size:clamp(19px,1.9vw,26px);line-height:1.6;font-weight:700;font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase}
.fw-credit{margin-top:14px;font-size:14px;line-height:1.8;color:var(--ink)}
.fw-credit span{display:block;font-size:12.5px;color:var(--sub)}
.fw-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 4px;cursor:pointer;color:inherit;text-decoration:none}
.fw-go::after{content:"→"}
a.fw-go::after{content:"↗"}
.fw-more{margin-top:clamp(56px,8vw,96px);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding-top:24px}
html.rm .fw-frame{clip-path:none}
html.rm .fw-frame img{transform:none}
html.rm .fw-text>*{opacity:1;transform:none}
html.rm .fw-cut{display:none}

/* 実績:文字とクレジット中心 */
.ylist{border-top:1px solid var(--ink)}
.ygroup{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:0 24px;border-bottom:1px solid var(--rule)}
.year{font-size:clamp(28px,3.6vw,48px);font-weight:400;line-height:1.2;letter-spacing:.02em;padding-top:18px;color:var(--sub);font-variant-numeric:tabular-nums}
.wrow{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:16px 0;border:0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;background:none;width:100%;text-align:left;cursor:pointer}
.ygroup .wrow:last-child{border-bottom:0}
.wrow .mo{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.wrow .tt{font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.6}
.wrow .go{font-size:13px;color:var(--sub);white-space:nowrap}
.wrow .go::after{content:" →"}
.wrow.ext .go::after{content:" ↗"}
@media (hover:hover){.wrow:hover .tt{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}.wrow:hover .go{color:var(--ink)}}
.wrow.simple{grid-template-columns:4.6em minmax(0,1fr) auto}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px)}
.card{display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;text-decoration:none;width:100%}
.slot{position:relative;aspect-ratio:16/11;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(180deg,#F8F9FA 0%,#fff 48%,#F2F3F5 66%,#E7E9EC 100%)}
.panel{position:relative;aspect-ratio:var(--ar);background:linear-gradient(150deg,#E9EBEE,#DDE0E4);border-radius:2px;display:grid;place-items:center;color:#5F6368;font-size:11.5px;line-height:1.5;text-align:center;padding:8px}
.panel.l{width:70%}.panel.p{height:76%}
.card-title{display:block;margin-top:14px;font-size:15.5px;font-weight:700;line-height:1.7}
.card-meta{display:block;margin-top:2px;font-size:12.5px;color:var(--sub)}

.svc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.svc .big{font-size:clamp(24px,3vw,38px);line-height:1.6;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.svc-r p+p{margin-top:16px}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.spec{display:grid;grid-template-columns:7em minmax(0,1fr);border-top:1px solid var(--ink)}
.spec dt,.spec dd{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.8}
.spec dt{color:var(--sub);font-size:14px}
.access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.access h3{font-size:15px;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.access p{font-size:14.5px;line-height:1.8}
.cta{background:var(--soft);border-top:1px solid var(--rule)}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:clamp(56px,8vw,104px)}

.page-head{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(24px,3vw,40px)}
.page-head h1{font-size:clamp(28px,4vw,48px);line-height:1.45;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px;padding-block:16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.search{flex:1 1 260px;min-width:0}
input,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #BFC3C8;border-radius:6px;padding:12px 14px;min-height:50px}
input:focus,textarea:focus{border-color:var(--ink)}
textarea{min-height:180px;resize:vertical;line-height:1.8}
.seg-ctl{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.seg-ctl button{background:none;border:0;min-height:40px;padding:0 16px;font-size:13.5px;cursor:pointer}
.seg-ctl button[aria-pressed="true"]{background:var(--ink);color:#fff}
.count{font-size:13px;color:var(--sub);margin:16px 0 24px}
.empty{padding:48px 0;border-top:1px solid var(--ink)}
.empty .btn{margin-top:16px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.tabs button{flex:none;min-height:42px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;cursor:pointer;font-size:13.5px;white-space:nowrap}
.tabs button[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.dt-title{margin-top:36px;padding-block:28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.dt-title h2{font-size:clamp(24px,3.6vw,44px);line-height:1.5;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt";max-width:22em}
.dt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);padding-block:clamp(32px,5vw,56px) clamp(64px,9vw,120px)}
.dt-side{align-self:start;position:sticky;top:calc(var(--hh) + 24px)}
.ourpart{margin-top:8px;border-top:1px solid var(--ink)}
.ourpart div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ourpart dt{font-weight:700}
.cap-h{font-size:13px;color:var(--sub)}
.credits h3{font-size:14px;font-weight:700;margin-top:40px;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.credits h3:first-child{margin-top:0}
.cr{display:grid;grid-template-columns:10em minmax(0,1fr);gap:2px 24px;padding:10px 0;border-bottom:1px solid var(--rule);line-height:1.8}
.cr .r{font-size:14px;color:var(--sub)}
.cr .n{overflow-wrap:anywhere}
.cr .s{display:block;font-size:13px;color:var(--sub)}
.names{display:flex;flex-wrap:wrap;gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--rule)}
.pn{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px}
.ct{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);padding-bottom:clamp(64px,9vw,120px)}
.field{margin-top:24px}
.lab{display:block;font-size:14.5px;font-weight:700;margin-bottom:8px}
.req{font-size:11.5px;font-weight:700;color:var(--accent);margin-left:8px}
.opt{font-size:11.5px;color:var(--sub);margin-left:8px;font-weight:400}
.err{min-height:1.6em;margin-top:6px;font-size:13px;color:var(--accent)}
.box{border:1px solid var(--ink);border-radius:8px;padding:16px 18px;font-size:14.5px;line-height:1.8}
.box[hidden]{display:none}
.ct-aside h3{font-size:14px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:12px}
.ct-aside section+section{margin-top:36px}
.ct-aside p{font-size:14.5px;line-height:1.8}
.ct-aside p+p{margin-top:12px}

.specnote{display:none;margin-top:20px;border:1px dashed #80868B;border-radius:8px;background:#FAFAFB;color:#3C4043;padding:14px 16px;font-size:13px;line-height:1.8;max-width:60em}
.specnote b{display:block;font-size:12px;color:#1F2124;margin-bottom:4px}
html.show-spec .specnote{display:block}
.hero .specnote{position:absolute;left:var(--gut);top:60px;z-index:6;max-width:40em;margin:0}
.phase-chip{display:none;position:fixed;left:12px;bottom:12px;z-index:70;background:#2B2B2B;color:#fff;border-radius:999px;padding:6px 14px;font-size:12px;font-variant-numeric:tabular-nums}
html.show-spec .phase-chip{display:block}
.foot{border-top:1px solid var(--rule);padding-block:32px 48px;font-size:13px;color:var(--sub)}
.foot ul{display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:12px}
.mcta{display:none}

/* ═══ 静止版 ═══ */
html.rm .hero{height:auto}
html.rm .hero-pin{position:relative;top:0;height:auto;overflow:visible;padding-bottom:clamp(48px,7vw,80px)}
html.rm .stage{position:relative;inset:auto;height:min(62vh,580px)}
html.rm .hcopy{position:relative;inset:auto;bottom:auto;opacity:1!important;visibility:visible!important;transform:none!important;margin-top:32px}
html.rm .hcopy .inner,html.rm .hcta .inner{width:100%;max-width:40em}
html.rm .hcopy .big{font-size:clamp(19px,2.2vw,26px)}
html.rm .hcta{position:relative;inset:auto;opacity:1!important;visibility:visible!important;transform:none!important;margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,5vw,48px);border-top:1px solid var(--s-edge)}
html.rm .hcta .wrap{justify-content:flex-start}
html.rm .scrim,html.rm .cue{display:none}
html.rm .btn{transition:none}
html.rm .hero .specnote{position:relative;top:auto;left:auto;margin:16px var(--gut) 0}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc,.about,.dt,.ct{grid-template-columns:minmax(0,1fr)}
  .dt-side{position:static}
}
@media (max-width:720px){
  :root{--hh:56px}
  .gnav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .logo{width:112px}
  .hero{height:320vh}
  .stage{perspective:900px;perspective-origin:50% 34%}
  .floor{width:80vw;height:16vw;margin:-8vw 0 0 -40vw}
  .scrim{display:block;position:absolute;left:0;right:0;bottom:0;height:48%;z-index:1;background:linear-gradient(180deg,transparent 0%,var(--h-bg) 36%,var(--h-bg) 100%);opacity:.96;pointer-events:none}
  .hcopy .inner,.hcta .inner{width:100%;max-width:none}
  .hcta h2{font-size:clamp(22px,8.6cqi,34px)}
  .hcopy{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .hcta{align-items:flex-end;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .hcta .wrap{justify-content:flex-start}
  .hcta .acts .btn{width:100%}
  .grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .fw,.fw.alt{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .bzgrid,.locs-grid{grid-template-columns:minmax(0,1fr)}
  .map{aspect-ratio:4/3}
  .fw .fw-media,.fw.alt .fw-media,.fw .fw-text,.fw.alt .fw-text{grid-column:1 / -1!important;grid-row:auto!important}
  .fw.p .fw-media{width:min(78%,300px)}
  .fwlist{gap:64px}
  .ygroup{grid-template-columns:minmax(0,1fr)}
  .year{padding-top:20px;font-size:28px}
  .wrow{grid-template-columns:2.6em minmax(0,1fr);gap:2px 12px}
  .wrow .go{grid-column:2}
  .wrow.simple{grid-template-columns:4em minmax(0,1fr)}
  .access{grid-template-columns:minmax(0,1fr)}
  .spec{grid-template-columns:6em minmax(0,1fr)}
  .cr{grid-template-columns:7.5em minmax(0,1fr);gap:2px 14px}
  .btn{width:100%}
  .pn .btn{width:auto;flex:1 1 140px}
  .autonote{max-width:calc(100% - 2 * var(--gut));top:60px}
  .hero .specnote{top:100px;right:var(--gut)}
  body.has-mcta{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mcta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);border-top:1px solid var(--rule)}
  body.has-mcta:not(.hero-in) .mcta{display:block}
  .mcta .btn{min-height:48px}
}
@media (min-width:721px){
  /* v7:回り込み〜並べ替えで短冊が文字の下を通るため、文字の背後に背景色の面を敷く(図形の形・動きは変えない) */
  .hcopy .inner{width:calc(min(36em,50%) + 44px);padding:18px 22px;margin-left:-22px;border-radius:6px;background:var(--h-panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  html.rm .hcopy .inner{width:100%;max-width:40em;margin-left:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
}
@media (min-width:721px){
  /* PC幅:回り込みの区間で右上が短冊とかかるため、操作UIを左上へ。通知はその下へずらす(位置のみ) */
  .hero-ui{left:var(--gut);right:auto;justify-content:flex-start}
  .autonote{top:60px}
}
@media (max-width:720px){
  .cue{bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-direction:row;gap:8px;line-height:1.4}
  .cue::after{width:24px;height:1px;background:linear-gradient(90deg,var(--h-sub),transparent)}
}
@media (max-width:720px) and (max-height:800px){
  .hcta{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .hcta h2{font-size:clamp(20px,7.6cqi,30px)}
  .hcta p{margin-top:10px}
  .hcta .acts{margin-top:20px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}


/* Production integration: real links, theme isolation, and admin bar offsets. */
html{margin-top:0!important}body.eoto-v21{margin:0!important;padding:0!important;background:#fff}
.eoto-v21 .gnav a{display:inline-flex;align-items:center;height:44px;padding:0 14px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.eoto-v21 .gnav .cta-s{border:1px solid var(--ink);border-radius:999px;padding:0 20px}
.eoto-v21 .drawer a{display:block;padding:12px 0;font-size:24px;text-decoration:none}
.eoto-v21 .logo,.eoto-v21 .btn{text-decoration:none}.eoto-v21 .wrap{width:100%}
.eoto-v21 .site-header{margin:0;padding:0;left:0;right:0}.eoto-v21 h1,.eoto-v21 h2,.eoto-v21 h3{color:inherit;font-family:var(--sans);clear:none}
.eoto-v21 p{margin-bottom:0}.eoto-v21 .btn{line-height:1.5}
.eoto-v21 .site-header .logo img{max-height:none}.eoto-v21 img{max-width:100%;height:auto}
.eoto-v21 #t13{overflow:visible}.eoto-v21 .fw-media{display:block;text-decoration:none}
.eoto-v21 .fw-credit{margin-top:12px}.eoto-v21 .fw-ph{font-size:14px}
.eoto-v21.admin-bar .site-header{top:32px}.eoto-v21.admin-bar #ph{top:32px}
@media(max-width:782px){.eoto-v21.admin-bar .site-header{top:46px}.eoto-v21.admin-bar #ph{top:46px}}
/* Content remains available even when JavaScript or WebGL is unavailable. */
html:not(.eoto-motion-ready) #intro,html:not(.eoto-motion-ready) #introBand{display:none!important}
html:not(.eoto-motion-ready) .mq-track{animation:none!important}
@keyframes eotoIntroSafety{to{visibility:hidden;opacity:0;pointer-events:none}}
html.eoto-motion-ready #intro,html.eoto-motion-ready #introBand{animation:eotoIntroSafety 0s linear 4s forwards}
.eoto-v21 #featured .fw-go::after{content:"→"}
.eoto-v21 #ast-scroll-top{display:none!important}

/* Keep the seven-item navigation usable at tablet widths. */
@media(max-width:860px){.eoto-v21 .gnav{display:none}.eoto-v21 #menuBtn{display:inline-flex}}