:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.7,0,.2,1);--ease-pop:cubic-bezier(.2,1.4,.4,1);--ease-shake:cubic-bezier(.36,.07,.19,.97);--t-s:.2s;--t-m:.45s;--t-l:.9s;color-scheme:dark;--bg:#0a0a0b;--bg2:#121214;--fg:#f2f0ec;--mute:#8d8a85;--ink:#f2f0ec;--text2:var(--text2);--text3:var(--text3);--solid:#1c1c1f;--solid2:#141416;--line:color-mix(in srgb,var(--ink) 12%,transparent);--red:#e60012;--pad:clamp(16px,4vw,56px);
 transition:--bg var(--t-l),--bg2 var(--t-l),--fg var(--t-l),--mute var(--t-l),--ink var(--t-l),--text2 var(--t-l),--text3 var(--t-l),--solid var(--t-l),--solid2 var(--t-l)}
/* サービス〜進め方の区間だけ紙色に反転（色の変数ごとなめらかに切り替わる） */
:root.paper{color-scheme:light;--bg:#ecebe6;--bg2:#e2e0da;--fg:#0d0d0e;--mute:#6f6b66;--ink:#0d0d0e;--text2:#3b3936;--text3:#55524e;--solid:#d3d1cb;--solid2:#dcdad4}
@property --bg{syntax:'<color>';inherits:true;initial-value:#0a0a0b}
@property --bg2{syntax:'<color>';inherits:true;initial-value:#121214}
@property --fg{syntax:'<color>';inherits:true;initial-value:#f2f0ec}
@property --mute{syntax:'<color>';inherits:true;initial-value:#8d8a85}
@property --ink{syntax:'<color>';inherits:true;initial-value:#f2f0ec}
@property --text2{syntax:'<color>';inherits:true;initial-value:var(--text2)}
@property --text3{syntax:'<color>';inherits:true;initial-value:var(--text3)}
@property --solid{syntax:'<color>';inherits:true;initial-value:#1c1c1f}
@property --solid2{syntax:'<color>';inherits:true;initial-value:#141416}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:"Zen Kaku Gothic New",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* iPhone は body だけでは横スクロールを止められないので、html と中身の外枠でも切る */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* 画面固定（sticky）を効かせるため hidden ではなく clip で切る */
main,footer{overflow-x:clip;position:relative}
a{color:inherit;text-decoration:none}
.en{font-family:"Archivo",sans-serif}
::selection{background:var(--red);color:#fff}

/* film grain（ヘッダーより下に置く。上に重ねるとiPhoneのSafariがヘッダーを見つけられず、状態バーの裏に本文が流れる） */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;opacity:.06;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{background-position:0 0}25%{background-position:-40px 30px}50%{background-position:30px -45px}75%{background-position:-30px -30px}}

/* gears (共通の見た目) */
.stage{position:relative}
.g-el{position:absolute;left:0;top:0;display:block;overflow:visible}
svg.gear{transform-origin:50% 50%;will-change:transform}
.g-fix{pointer-events:none}
.gear-body{fill:none;stroke:color-mix(in srgb,var(--ink) 50%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill var(--t-m),stroke var(--t-m)}
.gear-pitch{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.gear-ring{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);vector-effect:non-scaling-stroke}
.gear.solid .gear-body{fill:var(--solid);stroke:color-mix(in srgb,var(--ink) 28%,transparent)}
.gear.white .gear-body{fill:var(--fg);stroke:none}
.gear.red .gear-body{fill:var(--red);stroke:none}
.gear.dim .gear-body{stroke:color-mix(in srgb,var(--ink) 18%,transparent)}

header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top,0px)) var(--pad) 20px;transition:background var(--t-m),padding var(--t-m)}
/* iPhoneのSafariは、上端に固定した不透明な帯の色で状態バーの裏を塗る（色を調べるのは読み込み時）。
   ヘッダーはページ上部では透かしたいので、その役は上端の細い帯 .sb-tint に持たせる */
header.scrolled{background:var(--bg);padding-top:12px;padding-bottom:12px}
.sb-tint{position:fixed;top:0;left:0;right:0;height:1px;background:var(--bg);z-index:51;pointer-events:none}
header .logo{position:relative;display:block}
header .logo img{height:58px;display:block;transition:height var(--t-m),opacity var(--t-m)}
header .logo .lb{position:absolute;left:0;top:0;opacity:0}
.paper header .logo .lb{opacity:1}
.paper header .logo .lw{opacity:0}
header.scrolled .logo img{height:46px}
nav{display:flex;gap:36px;align-items:center}
nav a.l{font-size:12px;letter-spacing:.16em;font-weight:500;position:relative}
nav a.l::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform var(--t-m)}
nav a.l:hover::after,nav a.l.on::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:700;letter-spacing:.06em;transition:background var(--t-m),color var(--t-m),transform var(--t-m) var(--ease);border:0;cursor:pointer;font-family:inherit}
@media (hover:hover){ .btn:hover{background:var(--red);color:#fff} }
.btn svg{width:14px;height:14px}

/* 右端のゲージ */
.gauge{position:fixed;right:18px;top:0;bottom:0;width:46px;z-index:45;pointer-events:none}
.gauge .rack-body{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1}
#gaugeLabel{position:absolute;right:44px;top:0;font-size:10px;letter-spacing:.24em;color:var(--mute);white-space:nowrap;will-change:transform}

/* hero */
.hero-pin{position:relative;height:260svh}
.hero{position:sticky;top:0;height:100svh;padding:0 var(--pad);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(40px,7vh,90px);overflow:hidden}
.hero-copy{position:relative;z-index:2;will-change:transform,opacity}
.hero-red{position:absolute;inset:0;z-index:4;background:var(--red);color:#0a0a0b;clip-path:circle(var(--cr,0px) at var(--cx,74%) var(--cy,47%));pointer-events:none;display:flex;align-items:center;padding:0 var(--pad)}
.hr-big{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(64px,14.5vw,265px);line-height:.84;letter-spacing:-.055em;transform:scale(var(--hs,1.2));transform-origin:0 50%}
.hr-jp{position:absolute;right:var(--pad);bottom:clamp(40px,7vh,90px);font-weight:900;font-size:clamp(22px,3vw,48px);line-height:1.35;text-align:right;color:#fff}
.hero-gears{position:absolute!important;inset:0}
.bolt{object-fit:contain}

@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.6}}
.kicker{display:flex;gap:18px;align-items:center;font-size:12px;letter-spacing:.3em;color:var(--mute);margin-bottom:28px;position:relative}
.kicker i{width:46px;height:1px;background:var(--red)}
h1{font-weight:900;font-size:clamp(46px,8.6vw,150px);line-height:1.02;letter-spacing:-.02em;position:relative;z-index:2}
h1 .row{display:block;padding-bottom:.06em}
/* 文字を上下半分に切り、左右から寄せて噛み合わせる */
h1 .ch{display:inline-block;position:relative}
h1 .ch i{font-style:normal;display:block;transition:transform var(--t-l) var(--ease),opacity var(--t-m);transition-delay:var(--d,0s)}
h1 .ch .t{clip-path:inset(-10% -10% 50% -10%);transform:translateX(-.55em);opacity:0}
h1 .ch .b{position:absolute;inset:0;clip-path:inset(50% -10% -10% -10%);transform:translateX(.55em);opacity:0}
.ready h1 .ch i{transform:none;opacity:1}
h1 em{font-style:normal;color:var(--fg);transition:color var(--t-s);display:inline-block}
.struck h1 em{color:var(--red);animation:jolt .5s}
@keyframes jolt{0%{transform:translate(0,0);text-shadow:none}15%{transform:translate(-4px,1px);text-shadow:4px 0 #fff,-4px 0 rgba(230,0,18,.8)}30%{transform:translate(3px,-1px);text-shadow:-3px 0 #fff}45%{transform:translate(-1px,0);text-shadow:none}100%{transform:none}}
.flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(circle at 74% 47%,rgba(255,255,255,.55),rgba(230,0,18,.18) 40%,transparent 70%);opacity:0}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:1}16%{opacity:.15}26%{opacity:.8}100%{opacity:0}}
@keyframes up{to{transform:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(36px,6vh,64px);gap:24px;position:relative;z-index:2;opacity:0;transform:translateY(16px);transition:opacity var(--t-l) 1.1s,transform var(--t-l) 1.1s}
.ready .hero-foot{opacity:1;transform:none}
.kicker{opacity:0;transition:opacity var(--t-l) .2s}
.ready .kicker{opacity:1}
@keyframes fade{to{opacity:1}}
.hero-foot p{max-width:580px;color:var(--text2);font-size:15px;line-height:2}
.scroll{font-size:11px;letter-spacing:.3em;color:var(--mute);display:flex;align-items:center;gap:14px;margin-right:60px}
.scroll b{display:block;width:1px;height:60px;background:linear-gradient(var(--fg),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 事業の帯（写真で塗った文字） */
.sband{position:relative;height:clamp(440px,36vw,560px);overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.sb-stage{position:absolute;inset:0;width:100%;height:100%}
.sb-tag{position:absolute;left:var(--pad,16px);top:16px;font:800 11px "Archivo",sans-serif;letter-spacing:.28em;color:var(--mute);z-index:2}
.sb-no{position:absolute;right:var(--pad,16px);top:14px;font:900 16px "Archivo",sans-serif;z-index:2}.sb-no em{font-style:normal;color:var(--red)}
.sb-meta{position:absolute;left:var(--pad,16px);right:var(--pad,16px);bottom:30px;z-index:2;transition:opacity .4s}
.sb-rule{height:1px;background:var(--line);position:relative;margin-bottom:12px}.sb-rule i{position:absolute;left:0;top:0;height:1px;background:var(--red);width:0}
.sb-meta b{display:block;font:900 16px "Archivo",sans-serif;letter-spacing:.06em}
.sb-meta span{display:block;margin-top:6px;font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--mute)}

section{padding:clamp(90px,13vw,170px) var(--pad);position:relative}
.label{display:flex;gap:14px;align-items:center;font-size:12px;font-weight:500;letter-spacing:.28em;color:var(--mute);text-transform:uppercase;margin-bottom:48px}
.label b{color:var(--red);font-weight:800}
.label .lab-gear{width:16px;height:16px;margin-right:-4px;transition:none}
.label .lab-gear path{fill:none;stroke:var(--red);stroke-width:1.4}
h2 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(230,0,18,.55) 62%);background-size:0 100%;background-repeat:no-repeat;transition:background-size var(--t-l) .2s var(--ease)}
.lit h2 em,.reveal.in em{background-size:100% 100%}

/* about */
.about{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,5vw,90px);align-items:center}
.about h2{font-size:clamp(32px,3.8vw,60px);line-height:1.42;font-weight:700;margin-bottom:40px}
.about p{color:var(--text2);font-size:clamp(16px,1.25vw,19px);line-height:2.2;margin-bottom:1.3em;max-width:600px}
.engage{position:relative;margin-right:calc(-1 * var(--pad))}
#engageGears{width:100%}

@keyframes strike{0%{opacity:.2}10%{opacity:1}20%{opacity:.3}30%{opacity:1}45%{opacity:.5}60%,100%{opacity:1}}

/* services */
.services{background:transparent}
.svc-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:56px;gap:24px;flex-wrap:wrap}
.svc-head h2{font-family:"Archivo";font-weight:900;font-size:clamp(56px,9vw,150px);line-height:.9;letter-spacing:-.04em}
.svc-head p{color:var(--mute);max-width:360px;line-height:2;font-size:14px}
.svc{border-top:1px solid var(--line);list-style:none}
.svc li{border-bottom:1px solid var(--line);display:grid;grid-template-columns:90px 1.1fr 1.4fr 48px;gap:24px;align-items:center;padding:42px 0;position:relative;transition:padding var(--t-m) var(--ease)}
.svc li::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform var(--t-m) var(--ease);z-index:0}
.svc li:hover::before{transform:scaleY(1)}
.svc li:hover{padding-left:24px;padding-right:24px}
.svc li>*{position:relative;z-index:1}
.svc .no{font-weight:800;font-size:14px;color:var(--mute)}
.svc li:hover .no,.svc li:hover .d{color:#fff}
.svc h3{font-size:clamp(21px,2.2vw,32px);font-weight:700;line-height:1.35}
.svc h3,dd{word-break:keep-all;overflow-wrap:anywhere}
.svc h3 small{display:block;font-size:12px;letter-spacing:.24em;color:var(--mute);font-weight:500;margin-top:8px}
.svc li:hover h3 small{color:rgba(255,255,255,.8)}
.svc .d{color:var(--text2);font-size:14px;line-height:2}
.svc .ar{width:48px;height:48px;display:grid;place-items:center}
.mini-gear{width:100%;height:100%;transition:transform var(--t-l) var(--ease)}
.mini-gear path{fill:none;stroke:color-mix(in srgb,var(--ink) 50%,transparent);stroke-width:1}
.svc li:hover .mini-gear{transform:rotate(240deg)}
.svc li:hover .mini-gear path{fill:#fff;stroke:#fff}
.tag{display:inline-block;font-size:10px;letter-spacing:.2em;border:1px solid currentColor;border-radius:99px;padding:3px 9px;margin-left:10px;vertical-align:middle;color:var(--red)}
.svc li:hover .tag{color:#fff}

/* process: 4つの歯車列 */
.proc-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.proc-head h2{font-size:clamp(32px,3.8vw,60px);line-height:1.42;font-weight:700}
.proc-head p{color:var(--mute);max-width:380px;line-height:2;font-size:14px}
.train{position:relative}
#trainGears{width:100%}
.train .gear.on .gear-body{fill:var(--red);stroke:var(--red)}
.train .num{display:grid;place-items:center;font-weight:800;color:color-mix(in srgb,var(--ink) 45%,transparent);transition:color var(--t-m);line-height:1}
.train .num.on{color:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
.steps li{border-top:1px solid var(--line);padding-top:20px;transition:border-color var(--t-m)}
.steps span{font-size:11px;letter-spacing:.24em;color:var(--mute)}
.steps b{display:block;font-size:22px;margin:8px 0 10px;transition:color var(--t-m)}
.steps p{color:var(--text3);font-size:14px;line-height:1.9}
.steps li.on{border-color:var(--red)}
.steps li.on span{color:var(--red)}

/* company */
.company{background:var(--bg2)}
.co{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.co h2{font-family:"Archivo";font-weight:900;font-size:clamp(48px,6vw,96px);letter-spacing:-.04em;line-height:1}
dl{border-top:1px solid var(--line)}
dl div{display:grid;grid-template-columns:170px 1fr;padding:26px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.9}
dt{color:var(--mute);font-size:14px}
dd span{display:block;color:var(--mute);font-size:13px;font-family:"Archivo"}

/* contact */
.contact{overflow:hidden}
.contact-gear{position:absolute!important;right:-12vw;bottom:-30vw;width:62vw;pointer-events:none}
.ct{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,100px);position:relative;z-index:1}
.ct-head h2{font-family:"Archivo";font-weight:900;font-size:clamp(52px,7.4vw,124px);line-height:.92;letter-spacing:-.045em}
.ct-head h2 span{color:var(--red)}
.ct-head p{color:var(--text2);margin-top:34px;line-height:2}
.form{display:grid;gap:22px;background:color-mix(in srgb,var(--bg2) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,40px)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label,.form fieldset{display:grid;gap:9px;border:0}
.form label>span,.form legend{font-size:13px;color:var(--text2);display:flex;gap:8px;align-items:center}
.form i{font-style:normal;font-size:10px;color:#fff;background:var(--red);border-radius:3px;padding:1px 6px}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent);color:var(--fg);font:inherit;font-size:16px;padding:10px 2px;outline:none;transition:border-color var(--t-m);border-radius:0}
.form textarea{border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:10px;padding:12px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--red)}
.form .bad{border-color:#ff5a5a!important}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px}
.chips label{display:block;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:99px;padding:9px 18px;font-size:14px;transition:all var(--t-m)}
.chips input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--fg);outline-offset:2px}
.hp{position:absolute;left:-9999px}
.agree{display:flex!important;align-items:center;gap:10px;font-size:14px;color:var(--text2);cursor:pointer}
.agree input{width:18px;height:18px;accent-color:var(--red)}
.agree a{text-decoration:underline;text-underline-offset:3px}
.send{justify-self:start;padding:18px 26px 18px 32px;font-size:15px}
.send .mini-gear{width:22px;height:22px}
.send .mini-gear path{stroke:var(--bg);stroke-width:1.4}
@media (hover:hover){ .send:hover .mini-gear{transform:rotate(180deg)} }
@media (hover:hover){ .send:hover .mini-gear path{stroke:#fff} }
.send.busy .mini-gear{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{font-size:14px;line-height:1.9;min-height:1em}
.msg.ok{color:#9be29b}.msg.ng{color:#ff8a8a}

footer{border-top:1px solid var(--line);padding:56px var(--pad) 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;color:var(--mute);font-size:13px;line-height:2}
footer img{height:70px;margin-bottom:16px}
.ft-r{text-align:right}
.ft-r nav{gap:22px;justify-content:flex-end;margin-bottom:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.1em}
.ft-r nav a:hover{color:var(--fg)}

.reveal{opacity:0;transform:translateY(40px);transition:opacity var(--t-l),transform var(--t-l) var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (min-width:1001px){
 section,footer{padding-right:calc(var(--pad) + 60px)}
 .process>.label,.process>.proc-head{padding-right:calc(var(--pad) + 60px)}
 .scroll{display:none}
}
@media (max-width:1000px){
 nav a.l{display:none}
 .gauge{display:none}
 .scroll{margin-right:0}
}
@media (max-width:860px){
 header .logo img{height:42px}
 header.scrolled .logo img{height:38px}
 .btn{padding:11px 16px;font-size:12px}
 h1{font-size:10.6vw}
 .hero-foot{flex-direction:column;align-items:flex-start}
 .scroll{display:none}
 .about,.co,.ct{grid-template-columns:1fr}
 .engage{max-width:440px;margin:0 auto;width:100%}
 .svc li{grid-template-columns:44px 1fr 36px;gap:14px;padding:30px 0}
 .svc .d{grid-column:2/3}
 .svc .ar{grid-row:1;grid-column:3;width:36px;height:36px}
 .steps{grid-template-columns:1fr 1fr;gap:28px 18px}
 .steps b{font-size:18px}
 dl div{grid-template-columns:100px 1fr;font-size:15px}
 .f2{grid-template-columns:1fr}
 .contact-gear{width:120vw;right:-50vw;bottom:-60vw}
 footer{grid-template-columns:1fr}
 .ft-r{text-align:left}
 .ft-r nav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
 /* transition-duration だけ縮めると、JSが幅を入れた直後に測った値が0になる（進め方の歯車列が潰れた）。変化そのものを止める */
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* 開幕 */
.intro{position:fixed;inset:0;z-index:200;pointer-events:auto;animation:introFail 0s 7s forwards}
@keyframes introFail{to{visibility:hidden}}
.intro-half{position:absolute;left:0;right:0;height:50.5%;background:#0a0a0b;transition:transform var(--t-l) var(--ease-io)}
.intro-half.top{top:0}.intro-half.bot{bottom:0}
.intro.open .intro-half.top{transform:translateY(-101%)}
.intro.open .intro-half.bot{transform:translateY(101%)}
.intro-core{position:absolute;left:50%;top:50%;width:min(34vw,220px);aspect-ratio:1;transform:translate(-50%,-50%);transition:opacity var(--t-m),transform var(--t-l) var(--ease-io)}
.intro-gear{width:100%;height:100%;overflow:visible}
.intro-gear path{fill:transparent;stroke:#f2f0ec;stroke-width:1.2;transition:fill var(--t-s)}
.intro.full .intro-gear path{fill:#f2f0ec}
.intro-bolt{position:absolute;left:50%;top:50%;height:58%;transform:translate(-50%,-160%);opacity:0;transition:transform var(--t-m) cubic-bezier(.5,0,.9,.4),opacity var(--t-s)}
.intro.strike .intro-bolt{transform:translate(-50%,-50%);opacity:1;filter:drop-shadow(0 0 30px rgba(230,0,18,.9))}
.intro.open .intro-core{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
.intro-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;color:#8d8a85;font-size:11px;letter-spacing:.3em;transition:opacity var(--t-m)}
.intro-meta b{font-size:clamp(48px,8vw,110px);font-weight:900;color:#f2f0ec;letter-spacing:-.03em;line-height:.8;font-variant-numeric:tabular-nums}
.intro.strike .intro-meta,.intro.open .intro-meta{opacity:0}
.intro.done{display:none}

/* マウスの窓: カーソルの所だけ赤い円に別のコピーが透ける */
.lens{position:absolute;inset:0;z-index:3;background:var(--red);color:#0a0a0b;pointer-events:none;clip-path:circle(var(--r,0px) at var(--lx,50%) var(--ly,50%));padding:0 var(--pad) clamp(40px,7vh,90px);display:flex;align-items:flex-end}
.lens p{font-weight:900;font-size:clamp(46px,8.2vw,144px);line-height:.95;letter-spacing:-.035em;margin-bottom:calc(clamp(36px,6vh,64px) + 64px)}

/* 見出しの中のカプセル */
.pill{display:inline-flex;align-items:center;justify-content:center;height:.86em;width:0;border-radius:99px;vertical-align:-.08em;overflow:hidden;margin:0;transition:width var(--t-l) .3s var(--ease),margin var(--t-l) .3s}
.reveal.in .pill{width:1.7em;margin:0 .14em}
.p-gear{background:var(--fg)}
.p-gear svg{width:.66em;height:.66em}
.p-gear path{fill:var(--bg)!important;stroke:none!important}
.p-bolt{background:var(--red)}
.p-bolt img{height:.6em;filter:brightness(0) invert(1)}

/* 巨大な文字の帯（スクロールで左右に流れる） */
.bigline{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,90px) 0;overflow:hidden;white-space:nowrap;pointer-events:none;background:#000}
.bl-bg{position:absolute;inset:0}
.bl-bg .drive{filter:saturate(.75) brightness(.55);transform:scale(1.04)}
.bl-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#0a0a0b,transparent 22%,transparent 78%,#0a0a0b)}
.bigline .bl-row{position:relative;color:#f2efea}
.bigline .bl-row.b{-webkit-text-stroke-color:#f2efea}
.bl-row{font-weight:900;font-size:clamp(64px,13vw,220px);line-height:.95;letter-spacing:-.045em;will-change:transform;display:inline-block}
.bl-row i{font-style:normal;color:var(--red)}
.bl-row.b{display:block;color:transparent;-webkit-text-stroke:1.5px var(--fg);font-size:clamp(40px,7vw,120px);margin-top:.15em}

/* 会社紹介: 画面幅いっぱいの見出し。スクロールで1文字ずつ点灯 */
.about-h{font-size:clamp(38px,6.8vw,128px);line-height:1.22;font-weight:900;letter-spacing:-.01em;margin-bottom:clamp(50px,7vw,110px)}
.about-h .fc{color:color-mix(in srgb,var(--fg) 16%,transparent);transition:color var(--t-s)}
.about-h .fc.on{color:var(--fg)}
.about-h em .fc.on{color:var(--fg)}




.vis-chart svg{width:100%;height:100%;overflow:visible}
.vis-chart .grid line{stroke:rgba(242,240,236,.08)}
.vis-chart .bars rect{fill:rgba(242,240,236,.1);transform-box:fill-box;transform-origin:50% 100%}
.vis-chart .area{fill:rgba(230,0,18,.18)}
.vis-chart .line{fill:none;stroke:#ff2a3d;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vis-chart .dot{fill:#fff}
.vis-chart .halo{fill:#e60012;opacity:.35;animation:halo 1.6s ease-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes halo{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.4);opacity:0}}
.vis-lp{top:clamp(90px,13vh,130px);height:min(72vh,660px);display:flex;align-items:center;justify-content:center}
.browser{width:100%;height:100%;background:#0a0a0b;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);display:flex;flex-direction:column}
.browser .bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.browser .bar i:first-child{background:#e60012}
.browser .bar span{margin-left:14px;height:16px;flex:1;max-width:260px;border-radius:99px;background:rgba(255,255,255,.08)}
.browser .page{flex:1;padding:22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:14px}
.blk{opacity:0;transform:translateY(34px) scale(.96);transition:opacity var(--t-m),transform var(--t-l) var(--ease)}
.blk.on{opacity:1;transform:none}
.b-hero{display:grid;gap:10px;align-content:start}
.b-hero b{display:block;height:22px;border-radius:4px;background:#f2f0ec}
.b-hero b+b{width:70%;background:rgba(242,240,236,.55)}
.b-hero em{display:block;height:10px;width:85%;border-radius:4px;background:rgba(242,240,236,.25);margin-top:6px}
.b-img{grid-row:1/3;grid-column:2;border-radius:10px;background:linear-gradient(135deg,#e60012,#ff7a45);position:relative;overflow:hidden}
.b-img::after{content:"";position:absolute;inset:30% 25%;border-radius:50%;background:rgba(255,255,255,.25)}
.b-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:end}
.b-cols i{height:62px;border-radius:8px;background:rgba(242,240,236,.12)}
.b-cta{grid-column:1/3;justify-self:center;background:#f2f0ec;color:#0a0a0b;font-size:13px;font-weight:700;padding:12px 30px;border-radius:99px}
.vis-lock{border-radius:22px;overflow:hidden;background:#d9d7d1}
.lock-scene{position:absolute;inset:0}
.blob{position:absolute;border-radius:50%;filter:blur(10px)}
.b1{width:60%;aspect-ratio:1;left:10%;top:15%;background:#e60012;animation:drift 7s ease-in-out infinite alternate}
.b2{width:45%;aspect-ratio:1;right:5%;bottom:5%;background:#0d0d0e;animation:drift 9s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(18%,-12%) scale(1.15)}}
.lock-gear{position:absolute;left:30%;top:22%;width:46%;height:auto;aspect-ratio:1;overflow:visible}
.lock-gear path{fill:#f2f0ec}
.frost{position:absolute;inset:0;backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);background:rgba(236,235,230,.18)}
.lock-tick{position:absolute;left:0;right:0;bottom:22px;white-space:nowrap;overflow:hidden;font-weight:900;font-size:clamp(20px,2.2vw,34px);letter-spacing:.02em;color:#0d0d0e}
.lock-tick span{display:inline-block;animation:tick 14s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* フッターの巨大な社名 */
.ft-giant{grid-column:1/-1;font-weight:900;font-size:19.5vw;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 35%,transparent);white-space:nowrap;margin:0 0 30px -.04em;transition:color var(--t-m),-webkit-text-stroke-color var(--t-m);user-select:none}
.ft-giant:hover{color:var(--red);-webkit-text-stroke-color:var(--red)}

/* LP制作: スマホの中で実際のLP見本がスクロールする */
.vis-lp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.phone{height:100%;aspect-ratio:9/18.5;max-width:100%;background:#0a0a0b;border-radius:34px;padding:9px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.12);transform:rotate(-4deg)}
.phone-screen{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#fff;position:relative}
.lp{position:absolute;left:0;top:0;width:280px;transform-origin:0 0;will-change:transform;color:#1b1b1b;font-family:"Zen Kaku Gothic New",sans-serif;font-size:10px;line-height:1.6}
.lp-fv{padding:22px 16px 18px;background:linear-gradient(180deg,#fff4ec,#fff)}
.lp-badge{display:inline-block;background:#e60012;color:#fff;font-weight:700;font-size:9px;padding:3px 9px;border-radius:99px}
.lp-h{font-weight:900;font-size:22px;line-height:1.3;margin:10px 0 6px;letter-spacing:-.01em}
.lp-sub{font-size:10px;color:#555}
.lp-photo{height:120px;margin:12px 0;border-radius:12px;background:radial-gradient(circle at 70% 40%,#ffd9c2,#f0a37a 60%,#d97b4f);position:relative;overflow:hidden}
.lp-photo i{position:absolute;left:18%;bottom:-14px;width:46%;height:92%;border-radius:40% 40% 10% 10%;background:linear-gradient(#f6c8a8,#e9a985)}
.lp-btn{display:block;text-align:center;background:#e60012;color:#fff;font-weight:900;font-size:12px;padding:11px;border-radius:99px;box-shadow:0 6px 14px -6px rgba(230,0,18,.7)}
.lp-sec{padding:20px 16px}
.lp-t{font-weight:900;font-size:14px;margin-bottom:10px;text-align:center}
.lp-check{list-style:none;display:grid;gap:6px}
.lp-check li{background:#f4f4f2;border-radius:8px;padding:7px 10px}
.lp-check li::before{content:"✓ ";color:#e60012;font-weight:900}
.lp-dark{background:#1b1b1b;color:#fff}
.lp-3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;font-weight:700}
.lp-3 span{background:rgba(255,255,255,.08);border-radius:8px;padding:8px 2px}
.lp-3 b{display:block;color:#ff5560;font-size:12px}
.lp-rev{border:1px solid #eee;border-radius:10px;padding:9px 10px;margin-bottom:7px}
.lp-rev em{font-style:normal;color:#f5a400;font-size:10px}
.lp-rev small{color:#888}
.lp-end{background:#fff4ec;text-align:center}
.lp-note{font-size:10px;letter-spacing:.24em;opacity:.7}

/* サービス: 3事業を1画面に。今の事業だけ白く太く、ほかは線の文字 */
.svx{position:relative;height:320svh;margin-top:clamp(30px,4vw,60px);margin-inline:calc(-1 * var(--pad))}
.svx-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr auto;gap:0 clamp(24px,4vw,70px);padding:clamp(90px,13vh,130px) var(--pad) clamp(36px,6vh,64px);align-items:center}
.svx-gear{position:absolute;right:-18vmin;top:50%;width:92vmin;height:92vmin;transform-origin:50% 50%;margin-top:-46vmin;overflow:visible;pointer-events:none}
.svx-gear path{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:.1}
.svx-list{list-style:none;position:relative;z-index:1;display:grid;gap:clamp(10px,2.4vh,26px)}
.svx-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.6vw,26px);align-items:start;transition:opacity var(--t-m)}
.svx-list .n{font-weight:800;font-size:clamp(14px,1.2vw,18px);letter-spacing:.12em;color:var(--mute);padding-top:.7em;transition:color var(--t-m)}
.svx-list h3{white-space:nowrap;font-weight:900;font-size:clamp(30px,4.5vw,82px);line-height:1.04;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--ink) 38%,transparent);transition:color var(--t-m),-webkit-text-stroke-color var(--t-m),transform var(--t-m) var(--ease);transform-origin:0 50%;transform:scale(.86)}
.svx-list h3 small{display:inline-block;font-size:.2em;letter-spacing:.2em;-webkit-text-stroke:0;color:var(--red);border:1px solid var(--red);border-radius:99px;padding:.3em .8em;margin-left:.6em;vertical-align:.9em}
.svx-list li.on h3{color:var(--fg);-webkit-text-stroke-color:transparent;transform:none}
.svx-list li.on .n{color:var(--red)}
.svx-detail{position:relative;z-index:1;align-self:end;display:grid}
.svx-detail>div{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity var(--t-m),transform var(--t-m) var(--ease);pointer-events:none}
.svx-detail>div.on{opacity:1;transform:none;pointer-events:auto}
.svx-detail small{font-size:12px;letter-spacing:.3em;color:var(--red)}
.svx-detail p{color:var(--text2);font-size:clamp(15px,1.15vw,18px);line-height:2.05;margin:14px 0 20px;max-width:520px}
.svx-detail .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.svx-detail .tags li{border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:13px;color:var(--text2)}
.svx-bar{grid-column:1/-1;height:2px;background:var(--line);margin-top:clamp(20px,4vh,40px);position:relative;z-index:1}
.svx-bar i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}

/* サービス（写真版）: 1事業＝写真1枚を画面いっぱいに。次の画面が下から迫り上がる */
.svb{position:relative;height:340svh;margin-top:clamp(30px,4vw,60px);margin-inline:calc(-1 * var(--pad))}
.svb-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.svb-p{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--hide,0) * 100%) 0 0 0);will-change:clip-path;color:#fff;background:#000}
.svb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.08));will-change:transform}
.svb-p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.78) 100%);pointer-events:none}
.svb-word{position:absolute;z-index:1;left:var(--pad);bottom:calc(clamp(30px,6vh,60px) + var(--infoH,120px));transform:translate3d(var(--x,0),0,0);white-space:nowrap;font-weight:900;line-height:.9;letter-spacing:-.02em;font-size:var(--fs,12vw);will-change:transform}
.svb-word span{display:inline-block}
.p3 .svb-word span::after{content:"";}
.svb-no{position:absolute;z-index:1;right:var(--pad);top:clamp(80px,12vh,120px);font-weight:800;font-size:clamp(13px,1.1vw,16px);letter-spacing:.3em}
.svb-no::before{content:"";display:inline-block;width:40px;height:1px;background:#e60012;vertical-align:middle;margin-right:14px}
.svb-info{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:clamp(30px,6vh,60px);display:grid;grid-template-columns:auto 1fr;gap:6px clamp(24px,4vw,60px);align-items:end;max-width:1100px}
.svb-info small{grid-column:1/-1;font-size:12px;letter-spacing:.3em;color:#ff4050}
.svb-info h3{font-size:clamp(18px,1.7vw,26px);font-weight:900;white-space:nowrap}
.svb-info p{font-size:clamp(13px,1.05vw,16px);line-height:1.9;opacity:.88;max-width:560px}

/* 進め方: 縦スクロールで横に進む歯車列 */
.process{padding-inline:0!important;padding-top:clamp(60px,8vw,110px)}
.process>.label,.process>.proc-head{padding-inline:var(--pad)}
.hscroll{position:relative;height:var(--hsh,300svh)}
.hs-frame{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hs-track{position:relative;padding-inline:var(--pad);will-change:transform;padding-top:40px}
.hs-track .train{width:auto}
.hs-track .steps{position:relative;display:block;height:150px;margin-top:10px}
.hs-track .steps li{position:absolute;top:0;width:var(--w,240px);border-left:2px solid var(--line);border-top:0;padding:2px 0 4px 18px;transition:border-color var(--t-m)}
.hs-track .steps li.on{border-left-color:var(--red)}
.hs-track .steps span{display:block;font-family:"Archivo",sans-serif;font-weight:800;font-size:12px;letter-spacing:.24em}
.hs-track .steps b{font-size:clamp(20px,1.8vw,26px);margin:6px 0 8px}
.hs-track .steps p{font-size:13.5px;line-height:1.85}

/* 走行映像（AIで作った5秒をループ。粗が目立たないよう暗く落とす） */
.drive{display:block;width:100%;height:100%;object-fit:cover}
.contact-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.contact-bg .drive{filter:saturate(.7) brightness(.42)}
.contact-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg),transparent 30%,transparent 70%,var(--bg))}
.contact-gear{z-index:0}
.drive-band{position:relative;margin-top:clamp(50px,7vw,90px);height:clamp(200px,28vw,380px);border-radius:16px;overflow:hidden}
.drive-band .drive{filter:saturate(.8) brightness(.75)}
.drive-band p{position:absolute;left:clamp(16px,3vw,36px);bottom:clamp(14px,2.4vw,28px);font-weight:800;font-size:clamp(14px,1.4vw,20px);letter-spacing:.2em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* カーソル（マウス操作の端末だけ） */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:95;pointer-events:none;will-change:transform}
.cursor svg{position:absolute;left:-5px;top:-5px;width:10px;height:10px;transition:width var(--t-m),height var(--t-m),left var(--t-m),top var(--t-m)}
.cursor path{fill:var(--red);stroke:none}
.cursor.hot svg{left:-19px;top:-19px;width:38px;height:38px}
.cursor.hot path{fill:none;stroke:var(--fg);stroke-width:1}

/* 下層ページ（プライバシーポリシー） */
.doc{max-width:820px;margin:0 auto;padding:170px var(--pad) 120px}
.doc-h{font-size:clamp(30px,4vw,48px);font-weight:700;line-height:1.4;margin-bottom:40px}
.doc h2{font-size:18px;font-weight:700;margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--text2);font-size:15px;line-height:2.1}
.doc ul{padding-left:1.4em}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc-date{margin-top:56px;color:var(--mute)!important;font-size:13px!important}

/* スマホ（後ろで定義した部品の上書きはここにまとめる） */
@media (max-width:860px){
 .lens{display:none}
 .b-cols i{height:34px}
 .browser .page{padding:14px;gap:10px}
 .hero-pin{height:220svh}
 .hr-big{font-size:14vw}
 .hs-track .steps{height:190px}
}

/* 稲妻の演出: ピカッ（発光・跳ね）→ドーン（揺れ・衝撃波）→キラーン（光の筋と星が数秒おき） */
.bolt-fx{pointer-events:none}
.bolt-fx img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bolt-fx.glow img{filter:drop-shadow(0 0 40px rgba(230,0,18,.6))}
.b-sheen{position:absolute;inset:0;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.95) 48%,rgba(255,235,235,.7) 52%,transparent 62%) no-repeat;background-size:300% 100%;background-position:120% 0;animation:sheen 4.6s 2.2s infinite}
@keyframes sheen{0%{background-position:120% 0}18%{background-position:-20% 0}100%{background-position:-20% 0}}
.b-star{position:absolute;right:4%;top:2%;width:46%;aspect-ratio:1;transform:translate(30%,-30%) scale(0);background:radial-gradient(circle,#fff 0,rgba(255,255,255,.9) 6%,rgba(255,80,90,.35) 18%,transparent 42%),linear-gradient(90deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%) center/100% 3px no-repeat,linear-gradient(0deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%) center/3px 100% no-repeat;mix-blend-mode:screen;animation:star 4.6s 2.2s infinite}
@keyframes star{0%,6%{transform:translate(30%,-30%) scale(0) rotate(0)}11%{transform:translate(30%,-30%) scale(1.15) rotate(25deg)}17%,100%{transform:translate(30%,-30%) scale(0) rotate(50deg)}}
.bolt-fx.hit img{animation:pika .9s var(--ease)}
@keyframes pika{0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0))}12%{transform:scale(1.22);filter:brightness(3) drop-shadow(0 0 60px rgba(255,255,255,.95)) drop-shadow(0 0 120px rgba(230,0,18,.9))}40%{transform:scale(.96);filter:brightness(1.4) drop-shadow(0 0 50px rgba(230,0,18,.8))}100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 40px rgba(230,0,18,.6))}}
.engage .bolt-fx{opacity:.25;transition:opacity var(--t-m)}
.engage.lit .bolt-fx{opacity:1}
.quake{animation:quake .55s var(--ease-shake)}
@keyframes quake{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(4px,-2px,0)}30%,50%,70%{transform:translate3d(-7px,3px,0)}40%,60%{transform:translate3d(7px,-3px,0)}}
.shock{position:absolute;z-index:96;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid rgba(255,60,70,.9);box-shadow:0 0 40px rgba(230,0,18,.8),inset 0 0 30px rgba(255,255,255,.5);pointer-events:none;animation:shock 1.1s var(--ease) forwards}
@keyframes shock{0%{transform:scale(.2);opacity:1}100%{transform:scale(60);opacity:0;border-width:.5px}}
@media (prefers-reduced-motion:reduce){.quake{animation:none}.shock{display:none}.b-sheen,.b-star{animation:none;display:none}}
@media (max-width:860px){
 .svx-pin{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;gap:28px;padding-top:calc(84px + env(safe-area-inset-top,0px))}
 .svx-list h3{font-size:9.4vw}
 .svx-gear{right:-40vw;width:110vw;height:110vw;margin-top:-55vw}
 .svx-detail p{font-size:14px;line-height:1.9;margin:10px 0 14px}
 .svx-detail .tags li{padding:6px 12px;font-size:12px}
 .svx-bar{margin-top:0}
}
@media (max-width:860px){
 .svb-info{grid-template-columns:1fr}
 .svb-info h3{white-space:normal}
}


/* サービス: 回る模型。模型は背景を抜いてあり、巨大英字は真後ろに置いて模型が手前で隠す */
.tt{position:relative;height:520svh;margin-top:clamp(40px,6vw,80px);margin-inline:calc(-1 * var(--pad))}
.tt-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#030303}
/* 英字は模型の真後ろ。円筒の天板より上に頭を出し、下半分は模型が手前で隠す */
.tt-word{position:absolute;left:50%;top:31%;z-index:0;transform:translate(-50%,-50%);font-weight:900;font-size:min(calc(100vw / (var(--n) * .74)),46svh);letter-spacing:-.02em;line-height:.8;white-space:nowrap;color:var(--fg);opacity:0;will-change:transform,opacity;pointer-events:none}
.tt-word.red{color:var(--red)}
/* 真横の目線で撮った模型。円筒の外側まで丸ごと画面に入れて「回る模型」として見せる（円筒は画像の幅6〜94%） */
/* 背景を抜いた模型 */
.tt-model{position:absolute;left:50%;top:60%;z-index:1;width:min(84vw,135svh);aspect-ratio:16/9;transform:translate(-50%,-50%)}
.tt-model img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:clip-path,filter;
 -webkit-mask:linear-gradient(#000 80%,transparent 96%);mask:linear-gradient(#000 80%,transparent 96%)}
/* 文字を読ませるため下側だけ暗く落とす */
.tt-stage::after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:3;background:linear-gradient(transparent,rgba(5,5,6,.78));pointer-events:none}
/* 回り込みの境目に通す、部屋と部屋の間の黒い壁 */
.tt-seam{position:absolute;top:14%;bottom:17%;width:7%;transform:translateX(-50%);z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,#0b0b0c 30%,#151517 50%,#0b0b0c 70%,transparent);border-radius:40%/8%}
/* 中身が全部absoluteなので幅と高さを箱に持たせる（無いと幅0で文字が縦に崩れる） */
.tt-info{position:absolute;z-index:5;left:var(--pad);bottom:clamp(30px,7vh,70px);width:min(520px,calc(100vw - 2 * var(--pad)));height:170px}
.tt-info article{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(16px);transition:opacity var(--t-m),transform var(--t-m) var(--ease)}
.tt-info article.on{opacity:1;transform:none}
.tt-info small{font-size:12px;letter-spacing:.3em;color:#ff4050}
.tt-info h3{font-size:clamp(22px,2.2vw,34px);font-weight:900;margin:8px 0 10px;word-break:keep-all}
.tt-info h3 .tag{font-size:11px;letter-spacing:.14em;color:var(--red);vertical-align:.5em;margin-left:10px}
.tt-info p{font-size:14px;line-height:1.9;color:#cfcac2}
.tt-dial{position:absolute;z-index:5;right:var(--pad);bottom:clamp(30px,7vh,70px);font-size:12px;letter-spacing:.24em;color:var(--mute);text-align:right}
.tt-dial b{display:block;font-size:clamp(40px,4vw,64px);font-weight:900;color:var(--fg);letter-spacing:-.02em;line-height:1}
.tt-dial em{font-style:normal;color:var(--red)}
.tt-dial svg{display:block;margin:12px 0 0 auto;width:64px;height:64px;overflow:visible}
@media (min-width:1001px){ .tt{margin-right:calc(-1 * (var(--pad) + 60px))} }
@media (max-width:760px){
 /* スマホは縦長に撮った模型（3:4、円筒は幅8〜91%・天板は高さ24%） */
 .tt-model{width:104vw;aspect-ratio:3/4;top:52%}
 .tt-seam{top:25%;bottom:12%;width:9%}
 .tt-word{top:35%;font-size:min(calc(100vw / (var(--n) * .74)),46vw)}
 .tt-info{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 .tt-dial{top:calc(80px + env(safe-area-inset-top,0px));bottom:auto}
}

/* スマホのメニュー（幅1000px以下だけ） */
.menu-btn{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);background:transparent;color:var(--fg);cursor:pointer;flex:none}
.menu-btn i{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform var(--t-m) var(--ease-io),top var(--t-m) var(--ease-io)}
.menu-btn i:first-child{top:18px}
.menu-btn i:last-child{top:26px}
.menu-open .menu-btn{color:#f2f0ec;border-color:rgba(242,240,236,.4)}
.menu-open .menu-btn i:first-child{top:22px;transform:rotate(45deg)}
.menu-open .menu-btn i:last-child{top:22px;transform:rotate(-45deg)}
.menu-open header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-open header .logo .lb{opacity:0}
.menu-open header .logo .lw{opacity:1}
html.menu-open{overflow:hidden}
.menu{position:fixed;inset:0;z-index:49;background:#0a0a0b;color:#f2f0ec;display:flex;flex-direction:column;justify-content:center;padding:calc(100px + env(safe-area-inset-top,0px)) var(--pad) calc(36px + env(safe-area-inset-bottom,0px));overflow:hidden;
 clip-path:circle(0 at calc(100% - var(--pad) - 23px) calc(43px + env(safe-area-inset-top,0px)));visibility:hidden;transition:clip-path var(--t-l) var(--ease-io),visibility 0s var(--t-l)}
.menu-open .menu{clip-path:circle(150% at calc(100% - var(--pad) - 23px) calc(43px + env(safe-area-inset-top,0px)));visibility:visible;transition:clip-path var(--t-l) var(--ease-io),visibility 0s}
.menu-gear{position:absolute;right:-34vw;bottom:-30vw;width:86vw;height:86vw;overflow:visible;animation:menuSpin 40s linear infinite}
.menu-gear path{fill:none;stroke:var(--red);stroke-width:.14;opacity:.6}
@keyframes menuSpin{to{transform:rotate(360deg)}}
.menu-list{list-style:none;position:relative}
.menu-list a{display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;column-gap:6px;padding:2.1svh 0;border-bottom:1px solid rgba(242,240,236,.14);opacity:0;transform:translateY(28px);transition:opacity var(--t-m),transform var(--t-m) var(--ease)}
.menu-list li:first-child a{border-top:1px solid rgba(242,240,236,.14)}
.menu-open .menu-list a{opacity:1;transform:none}
.menu-open .menu-list li:nth-child(1) a{transition-delay:.25s}
.menu-open .menu-list li:nth-child(2) a{transition-delay:.31s}
.menu-open .menu-list li:nth-child(3) a{transition-delay:.37s}
.menu-open .menu-list li:nth-child(4) a{transition-delay:.43s}
.menu-open .menu-list li:nth-child(5) a{transition-delay:.49s}
.menu-list b{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--red)}
.menu-list span{font-weight:900;font-size:clamp(40px,12.5vw,96px);line-height:.92;letter-spacing:-.03em}
.menu-list small{grid-column:2;margin-top:6px;font-size:12px;letter-spacing:.08em;color:#8d8a85}
.menu-list a:active span{color:var(--red)}
.menu-foot{position:relative;margin-top:28px;font-size:11px;letter-spacing:.26em;color:#8d8a85}
@media (max-width:1000px){ .menu-btn{display:block} nav{gap:10px} }
@media (min-width:1001px){ .menu{display:none} }

/* ---- 触ったときの手応え・状態が分かる動き ---- */
/* 押すと一瞬沈む（transform はボタンの吸い寄せで使うので scale で分ける） */
.btn,.chips span,.menu-btn,.menu-list a,nav a.l,.ft-r nav a{transition-property:background,color,transform,scale,opacity,border-color;transition-duration:var(--t-m),var(--t-m),var(--t-m),var(--t-s),var(--t-m),var(--t-m);transition-timing-function:var(--ease)}
.btn:active,.menu-btn:active{scale:.94}
.chips span:active{scale:.95}
.menu-list a:active{scale:.98}
.btn svg:not(.mini-gear):not(.ok-mark){transition:transform var(--t-m) var(--ease)}
.btn:active svg:not(.mini-gear):not(.ok-mark){transform:translateX(4px)}
@media (hover:hover){ .btn:hover svg:not(.mini-gear):not(.ok-mark){transform:translateX(4px)} }

/* 入力欄：触れると赤い下線が左から伸び、項目名が白く浮く。正しく入ると右端にチェック */
.form label:not(.agree){position:relative}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{background:linear-gradient(var(--red),var(--red)) no-repeat 0 100%/0 2px;transition:background-size var(--t-m) var(--ease),border-color var(--t-m)}
.form input:not([type=radio]):not([type=checkbox]):focus,.form textarea:focus{background-size:100% 2px;outline:none}
.form label>span{transition:color var(--t-m),transform var(--t-m) var(--ease)}
.form label:focus-within>span{color:var(--fg);transform:translateY(-2px)}
.form label:not(.agree)::after{content:"";position:absolute;right:2px;bottom:14px;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg) scale(0);transition:transform var(--t-m) var(--ease-pop)}
.form label:has(input:not(:placeholder-shown):valid)::after{transform:rotate(-45deg) scale(1)}
.form label:has(textarea)::after{display:none}
/* 入力漏れ：その欄だけ横に揺れる */
.shake{animation:fieldShake .42s var(--ease-shake)}
@keyframes fieldShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.chips.bad span{border-color:#ff5a5a}
.agree.bad{color:#ff8a8a}
/* 送信：送信中は歯車が回り、送れたら赤に変わってチェックが描かれる */
.send{position:relative}
.send .ok-mark{display:none;width:20px;height:20px}
.send .ok-mark path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.send.done{background:var(--red);color:#fff;pointer-events:none}
.send.done .mini-gear{display:none}
.send.done .ok-mark{display:block}
.send.done .ok-mark path{animation:drawOk .5s .15s var(--ease-io) forwards}
@keyframes drawOk{to{stroke-dashoffset:0}}
.msg{transition:opacity var(--t-m),transform var(--t-m) var(--ease)}
.msg:empty{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){ .shake{animation:none} .send.done .ok-mark path{stroke-dashoffset:0} }

/* 回る模型のダイヤル：押すと次の部屋へ、印を押すとその部屋へ回る */
.tt-next{display:block;margin-left:auto;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-align:right;cursor:pointer;transition:scale var(--t-s) var(--ease)}
.tt-next:active{scale:.94}
.tt-next svg{transition:transform var(--t-m) var(--ease)}
@media (hover:hover){ .tt-next:hover svg{transform:rotate(30deg)} }
.tt-pips{display:flex;justify-content:flex-end;gap:4px;margin-top:10px}
.tt-pips button{width:26px;height:26px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.tt-pips button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(242,239,234,.45);transform:translate(-50%,-50%);transition:background var(--t-m),border-color var(--t-m),width var(--t-m) var(--ease),border-radius var(--t-m)}
.tt-pips button.on::before{width:20px;border-radius:5px;background:var(--red);border-color:var(--red)}
.tt-pips button:active::before{scale:.8}

/* 動きの決まりごと：なめらかさは --ease（すっと止まる）/--ease-io（ゆっくり始まって止まる）/--ease-pop（弾む）/--ease-shake（揺れる）、
   長さは --t-s（押す・色）/--t-m（出入り）/--t-l（大きく出る）の3段階。新しく足す動きもこの中から選ぶ */

/* 回る模型：最初だけ「スクロールで回る」と出し、回り始めたら消す */
.tt-hint{position:absolute;z-index:5;left:50%;bottom:clamp(30px,7vh,70px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;color:var(--mute);white-space:nowrap;transition:opacity var(--t-m) var(--ease),transform var(--t-m) var(--ease)}
.tt-hint i{display:block;width:1px;height:36px;background:linear-gradient(var(--fg),transparent);animation:drop 2s infinite}
.tt-hint.gone{opacity:0;transform:translate(-50%,10px);pointer-events:none}
@media (max-width:760px){ .tt-hint{bottom:auto;top:calc(150px + env(safe-area-inset-top,0px));left:var(--pad);transform:none;align-items:flex-start} .tt-hint.gone{transform:translateY(10px)} }

/* 画像：読み込みが終わるまではぼかしておき、読み込めたら浮かび上がる */
.tt-model{transition:filter var(--t-l) var(--ease),opacity var(--t-l) var(--ease)}
.tt-model:not(.ready){filter:blur(16px);opacity:.35}

/* 会社概要：表は1行ずつ下から出る */
.co dl.reveal{opacity:1;transform:none}
.co dl.reveal>div{opacity:0;transform:translateY(18px);transition:opacity var(--t-l) var(--ease),transform var(--t-l) var(--ease)}
.co dl.reveal.in>div{opacity:1;transform:none}
.co dl.reveal.in>div:nth-child(1){transition-delay:0.00s}
.co dl.reveal.in>div:nth-child(2){transition-delay:0.08s}
.co dl.reveal.in>div:nth-child(3){transition-delay:0.16s}
.co dl.reveal.in>div:nth-child(4){transition-delay:0.24s}
.co dl.reveal.in>div:nth-child(5){transition-delay:0.32s}
.co dl.reveal.in>div:nth-child(6){transition-delay:0.40s}
.co dl.reveal.in>div:nth-child(7){transition-delay:0.48s}

/* 画像に幅・高さを書いた（表示中のずれ防止）。表示の大きさはCSSの高さで決めるので幅は自動 */
header .logo img,.ft-l img{width:auto}

/* 回る模型（スマホ）: 模型は縦長（2:3、赤い縁は高さ4〜91%）。英字を90度倒して左に縦の柱として立て、模型は右に寄せて柱の右側に重ねる。目盛りは上端に横一列 */
@media (max-width:760px){
 .tt-word{writing-mode:vertical-rl;top:calc(120px + 29svh);left:calc(14px + var(--th) / 2);font-size:calc(58svh / (var(--n) * .74));--th:calc(58svh / (var(--n) * .74) * .8)}
 .tt-model{left:auto;right:-6vw;width:78vw;aspect-ratio:2/3;top:calc(50% + 10px);transform:translateY(-50%)}
 .tt-seam{top:4%;bottom:9%}
 .tt-hint{display:none}
 .tt-dial{top:calc(74px + env(safe-area-inset-top,0px));left:auto;right:var(--pad);display:flex;align-items:center;gap:14px}
 .tt-next{display:flex;align-items:center;gap:8px;margin:0;font-size:0}
 .tt-next b{font-size:24px}
 .tt-next svg{width:30px;height:30px;margin:0;order:-1}
 .tt-pips{margin:0}
 .tt-pips button{width:18px}
}