/* OK Engineering & Crafts — site design system */
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#121722;--sub:#5F6672;--line:#DFE2E7;--bg:#F6F7F8;--acc:#2456C9;--deep:#1A3A8F;--eng:#2456C9;--des:#1497B0;--cra:#23966F;--gut:56px}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;font-feature-settings:"palt";-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
ul,ol{list-style:none}
p,h1,h2,h3,a,li,dd{word-break:auto-phrase;text-wrap:pretty}
img{display:block;max-width:100%}
.en{font-family:"Sora",sans-serif;font-feature-settings:"tnum"}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* atmosphere */
.grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(18,23,34,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,23,34,.05) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%);mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%)}
.glow{position:absolute;z-index:-2;inset:0;pointer-events:none;overflow:hidden}
.glow i{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 20s ease-in-out infinite alternate}
.glow i:nth-child(1){width:640px;height:460px;left:760px;top:160px;background:rgba(147,197,253,.65)}
.glow i:nth-child(2){width:420px;height:340px;left:1040px;top:440px;background:rgba(165,243,252,.6);animation-delay:-8s}
.glow i:nth-child(3){width:300px;height:260px;left:620px;top:480px;background:rgba(196,181,253,.35);animation-delay:-14s}
@keyframes drift{to{transform:translate3d(50px,-30px,0) scale(1.1)}}

/* header */
.hdr{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut)}
.logo{display:flex;align-items:center;gap:14px}
.logo .ok{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
.logo .nm{font-size:10.5px;font-weight:500;letter-spacing:.22em;line-height:1.55;border-left:1px solid #C3C8D0;padding-left:14px}
.nav{display:flex;gap:40px}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px}
.nav .e{font-family:"Sora",sans-serif;font-size:14px;font-weight:500;transition:color .2s}
.nav .ja{font-size:10px;color:var(--sub);margin-top:3px;letter-spacing:.06em;font-weight:500}
.nav a[aria-current] .e,.nav a:hover .e{color:var(--acc)}
.menu{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu i{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 7px 0 currentColor,0 -7px 0 currentColor}

/* shared atoms */
.kick{font-size:15px;font-weight:500;letter-spacing:.12em;color:var(--sub);display:flex;align-items:center;gap:14px}
.kick:before{content:"";width:28px;height:1px;background:var(--acc)}
.x{position:absolute;left:-6px;top:-6px;width:13px;height:13px;color:rgba(36,86,201,.5)}
.x:before,.x:after{content:"";position:absolute;background:currentColor}.x:before{left:6px;width:1px;height:13px}.x:after{top:6px;height:1px;width:13px}
.rule{position:relative}
.rule:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(18,23,34,.28) 50%,rgba(36,86,201,.18) 80%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;width:272px;height:60px;padding:0 24px 0 28px;font-size:15px;font-weight:700;letter-spacing:.05em;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn.p{background:var(--deep);color:#fff;border:1px solid var(--deep)}.btn.p:hover{background:var(--acc);border-color:var(--acc)}
.btn.s{background:rgba(255,255,255,.7);color:var(--deep);border:1px solid rgba(26,58,143,.35)}.btn.s:hover{border-color:var(--deep);background:#fff}
.btn span,.lnk span{font-family:"Sora",sans-serif;transition:transform .2s}.btn:hover span,.lnk:hover span{transform:translateX(3px)}
.lnk{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--deep);border-bottom:1px solid rgba(26,58,143,.3)}
.lnk:hover{color:var(--acc);border-color:var(--acc)}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,.38));backdrop-filter:blur(5px) saturate(1.4);-webkit-backdrop-filter:blur(5px) saturate(1.4);border:1px solid rgba(255,255,255,.9);outline:1px solid rgba(18,23,34,.06);box-shadow:0 30px 60px -36px rgba(30,64,175,.35)}
.out{color:transparent;-webkit-text-stroke:1px rgba(36,86,201,.55);font-weight:300}

/* glass lettering */
.bgw{position:absolute;z-index:-1;left:0;top:50%;transform:translate(calc(-2400% / var(--gw)),-50%);width:calc(var(--gw) * 96.4vw / 2053);aspect-ratio:var(--gw)/var(--gh);pointer-events:none;user-select:none}
.bgw>*{position:absolute;inset:0;width:100%;height:100%}
.bgw .refr{-webkit-mask:var(--mna,var(--m)) center/100% 100% no-repeat;mask:var(--mna,var(--m)) center/100% 100% no-repeat;backdrop-filter:blur(1.5px) brightness(1.12) saturate(1.5);-webkit-backdrop-filter:blur(1.5px) brightness(1.12) saturate(1.5)}
.bgw .lens{-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background-image:linear-gradient(rgba(18,23,34,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(18,23,34,.10) 1px,transparent 1px);background-size:44px 44px;background-position:-13px -7px}

/* ===== Home FV ===== */
.fv{position:relative;height:100vh;min-height:760px;overflow:hidden;isolation:isolate}
.fv .grid{-webkit-mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%),linear-gradient(#000 75%,transparent);mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%),linear-gradient(#000 75%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.fv .wrap{position:absolute;left:var(--gut);right:var(--gut);top:128px;bottom:56px;display:grid;grid-template-columns:1fr 480px;gap:56px}
.fv .main{display:flex;flex-direction:column;justify-content:center}
.fv .cp{position:relative;margin:156px 0 160px}
.copy{position:relative;color:var(--deep);text-shadow:0 0 18px rgba(246,247,248,.95),0 0 6px rgba(246,247,248,.9);font-size:clamp(30px,2.8vw,40px);font-weight:700;line-height:1.6;letter-spacing:.04em;white-space:nowrap;margin:28px 0 0}
.fv .row{padding-top:40px;display:flex;justify-content:space-between;align-items:center}
.ctas{display:flex;align-items:center;gap:16px}
.fv .bgw{--gw:2053;--gh:636;transform:translate(-1.17%,-50%)}
.scroll{position:absolute;right:28px;bottom:0;transform:translateX(50%);font-size:10px;letter-spacing:.24em;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:14px}.scroll span{writing-mode:vertical-rl}
.scroll s{position:relative;width:1px;height:88px;background:#C9CDD4;overflow:hidden}
.scroll s:after{content:"";position:absolute;inset:0;height:40%;background:var(--acc);animation:run 2.4s cubic-bezier(.6,0,.2,1) infinite}
@keyframes run{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.side{align-self:center;padding:28px 36px 10px}
.fv .side{transform:translateY(76px)}
.sh{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.sh span{font-size:26px;font-weight:500;letter-spacing:-.01em}
.sh small{font-size:12px;letter-spacing:.14em;color:var(--sub);font-weight:500}
.it{display:grid;grid-template-columns:48px 1fr;gap:8px;padding:15px 0;border-bottom:1px solid rgba(18,23,34,.09)}
.it:last-of-type{border:0}
.it .no{font-size:12px;color:var(--acc);padding-top:2px;font-weight:500}
.it small{font-size:11.5px;color:var(--sub);letter-spacing:.06em}
.it p{font-size:15.5px;font-weight:500;line-height:1.6;margin-top:3px}
a.it:hover p{color:var(--acc)}
.all{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:48px;border-top:1px solid var(--line);font-size:13px;font-weight:500}
.all:hover{color:var(--acc)}

/* ===== Sub page hero ===== */
.ph{position:relative;overflow:hidden;isolation:isolate;padding:128px var(--gut) 88px}
.ph .grid{-webkit-mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%),linear-gradient(#000 70%,transparent);mask-image:radial-gradient(130% 100% at 35% 45%,#000 45%,transparent 90%),linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.ph .glow i:nth-child(1){top:60px}.ph .glow i:nth-child(2){top:300px}.ph .glow i:nth-child(3){top:320px}
.ph .wrap{display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:end;min-height:560px}
.ph .main{align-self:stretch;display:flex;flex-direction:column}
.crumb{font-size:12px;letter-spacing:.16em;color:var(--sub);display:flex;gap:10px;align-items:center}
.crumb a:hover{color:var(--acc)}.crumb i{width:16px;height:1px;background:#B8BEC7}
.ph .cp{position:relative;margin:auto 0 0;padding:92px 0 88px}
.ph .copy{margin:0;font-size:clamp(30px,2.8vw,40px)}
.ph .sub{display:block;font-size:13px;font-weight:500;letter-spacing:.18em;color:var(--acc);margin-bottom:10px;text-shadow:none}
.ph .row{padding-top:36px}
.ph .lead{max-width:640px;font-size:16px;line-height:2.05;color:#2B313C}
.ph .lead b{display:block;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.7}
.ph .side{align-self:end}
.side .it{grid-template-columns:40px 1fr;padding:13px 0}
.side .it p{margin:0;font-size:15px}
.side .it .no{padding-top:3px}
.side dl{display:grid;grid-template-columns:96px 1fr;font-size:14.5px}
.side dt,.side dd{padding:14px 0;border-bottom:1px solid rgba(18,23,34,.09)}
.side dt{color:var(--sub);font-size:12.5px;letter-spacing:.08em;padding-top:16px}
.side dd{font-weight:500;line-height:1.7}
.side dl>*:nth-last-child(-n+2){border:0}
.side.toc{padding-bottom:14px}.side.toc .it{padding:9px 0}.side.toc .it p{font-size:14px}

/* ===== Sections ===== */
.sec{position:relative;padding:152px var(--gut);isolation:isolate}
.in{max-width:1328px;margin:0 auto;position:relative}
.hd{display:grid;grid-template-columns:368px 1fr;gap:56px;padding-top:28px;margin-bottom:72px;align-items:end}
.idx{font-size:12px;letter-spacing:.2em;color:var(--acc);font-weight:500;display:flex;gap:12px;align-items:center}
.idx b{font-weight:500;color:var(--sub)}
.ttl{margin-top:18px}
.ttl .en{display:block;font-size:64px;font-weight:400;letter-spacing:-.03em;line-height:1}
.ttl .ja{display:block;font-size:14px;font-weight:500;letter-spacing:.16em;color:var(--sub);margin-top:14px}
.hd .lead{font-size:17px;line-height:2;color:#2B313C;max-width:680px}
.hd .act{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}

.sec>.glow{top:-240px;bottom:-240px}
body{overflow-x:clip}
.sec .grid{-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
/* concept */
.concept .stmt{font-size:clamp(28px,2.6vw,38px);font-weight:700;line-height:1.7;letter-spacing:.04em;color:var(--deep)}
.concept .body{font-size:17px;line-height:2.1;color:#2B313C;max-width:620px}
.cgrid{display:grid;grid-template-columns:368px 1fr;gap:56px}
.cgrid .ctx{padding-top:8px}.concept .body{margin-top:40px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:104px}
.pillar{position:relative;padding:32px 0 0;border-top:1px solid rgba(18,23,34,.16)}
.pillar:before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--c)}
.pillar .ic{width:44px;height:44px;color:var(--c);margin-bottom:28px}
.pillar h3{font-size:30px;font-weight:400;letter-spacing:-.02em}
.pillar .ja{font-size:12.5px;color:var(--sub);letter-spacing:.12em;margin-top:6px;font-weight:500}
.pillar p{font-size:15.5px;line-height:1.95;margin-top:20px;color:#2B313C;max-width:360px}
.pillar small{display:block;margin-top:18px;font-size:12px;letter-spacing:.06em;color:var(--sub)}
.c-eng{--c:var(--eng)}.c-des{--c:var(--des)}.c-cra{--c:var(--cra)}

/* service cards */
.svc .glow i:nth-child(1){left:auto;right:-120px;top:120px}.svc .glow i:nth-child(2){left:120px;right:auto;top:520px}.svc .glow i:nth-child(3){left:46%;top:360px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{position:relative;display:flex;flex-direction:column;padding:36px 36px 28px;min-height:520px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgba(30,64,175,.45)}
.card .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.16em;font-weight:500;color:var(--sub)}
.card .n{font-size:72px;line-height:1;letter-spacing:-.04em;margin:40px 0 28px}
.card h3{font-size:22px;font-weight:700;line-height:1.6;letter-spacing:.03em;min-height:70px}
.card ul{margin-top:24px;border-top:1px solid rgba(18,23,34,.12)}
.card li{position:relative;padding:12px 0 12px 22px;font-size:14.5px;line-height:1.6;border-bottom:1px solid rgba(18,23,34,.07)}
.card li:before{content:"+";position:absolute;left:0;top:11px;font-family:"Sora";color:var(--c,var(--acc));font-size:14px}
.card .more{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--deep);letter-spacing:.05em}
.card .more span{font-family:"Sora";width:40px;height:40px;border:1px solid rgba(26,58,143,.3);border-radius:50%;display:grid;place-items:center;transition:background .2s,color .2s}
.card:hover .more span{background:var(--deep);color:#fff}
.card .bar{position:absolute;left:-1px;top:-1px;width:56px;height:2px;background:var(--c)}

/* about teaser */

.abt .txt{font-size:24px;font-weight:700;line-height:1.85;letter-spacing:.04em;color:var(--deep);margin:56px 0 48px;max-width:560px}
.prof{padding:32px 40px 18px}
.prof dl{display:grid;grid-template-columns:112px 1fr;font-size:15.5px}
.prof dt,.prof dd{padding:20px 0;border-bottom:1px solid rgba(18,23,34,.09)}
.prof dt{font-size:12.5px;color:var(--sub);letter-spacing:.1em;padding-top:23px}
.prof dd{font-weight:500;line-height:1.7}
.prof dl>*:nth-last-child(-n+2){border:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid rgba(18,23,34,.14);background:rgba(255,255,255,.6);font-size:13px;font-weight:500;white-space:nowrap}
.chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--acc))}

/* works */
.works .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.slot{position:relative;height:200px;border:1px dashed rgba(36,86,201,.35);display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(36,86,201,.035) 14px 15px)}
.slot .en{font-size:12px;letter-spacing:.2em;color:var(--acc)}
.slot p{font-size:14px;color:var(--sub)}

/* contact CTA */
.cta{padding:0 var(--gut) 120px}
.cta .box{position:relative;overflow:hidden;isolation:isolate;max-width:1328px;margin:0 auto;padding:88px 80px;border:1px solid rgba(18,23,34,.08);background:rgba(255,255,255,.45)}
.cta .glow i:nth-child(1){left:auto;right:-80px;top:-120px}.cta .glow i:nth-child(2){left:auto;right:300px;top:120px}.cta .glow i:nth-child(3){left:40%;top:200px}
.cta .grid{-webkit-mask-image:radial-gradient(90% 120% at 80% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(90% 120% at 80% 50%,#000 30%,transparent 85%)}
.cta .idx{color:var(--acc)}.cta .ci{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:end}
.cta h2{font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.6;color:var(--deep);letter-spacing:.04em;margin:28px 0 20px}
.cta p{font-size:16px;line-height:2;color:#2B313C;max-width:560px}
.cta .acts{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.cta .mail{font-size:15px;font-weight:500;color:var(--deep);display:inline-flex;gap:10px;align-items:center;min-height:44px}
.cta .mail:hover{color:var(--acc)}
.cta .bgw{--gw:1404;--gh:301;left:auto;right:-40px;top:auto;bottom:-70px;transform:none;width:min(1100px,80vw);opacity:.9}

/* footer */
.ft{padding:72px var(--gut) 32px;border-top:1px solid var(--line);background:rgba(255,255,255,.5)}
.ft .in{display:grid;grid-template-columns:1fr auto;gap:56px}
.ft .tag{font-size:13px;color:var(--sub);letter-spacing:.1em;margin-top:22px}
.ft nav{display:flex;gap:48px}
.ft nav a{display:flex;flex-direction:column;min-height:44px;justify-content:center}
.ft nav .e{font-family:"Sora";font-size:14px;font-weight:500}.ft nav .ja{font-size:11px;color:var(--sub);margin-top:4px}
.ft nav a:hover .e{color:var(--acc)}
.ft .bot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--line);font-size:12px;color:var(--sub);letter-spacing:.04em}
.ft .bot a{display:inline-flex;align-items:center;min-height:44px}.ft .bot a:hover{color:var(--acc)}
.ft .bot div{display:flex;gap:32px;align-items:center}

/* ===== Service page ===== */
.area{display:grid;grid-template-columns:368px 1fr;gap:56px;padding:56px 0 96px}

.area .l{position:sticky;top:48px;align-self:start}
.area .num{font-size:120px;line-height:.9;letter-spacing:-.05em}
.area .tg{font-size:12px;letter-spacing:.2em;color:var(--c);font-weight:500;margin-top:28px;display:flex;align-items:center;gap:10px}
.area .tg:before{content:"";width:20px;height:2px;background:var(--c)}
.area h2{font-size:26px;font-weight:700;line-height:1.6;letter-spacing:.03em;margin-top:14px}
.area .chips{margin-top:28px}
.area ol{border-top:1px solid rgba(18,23,34,.16);counter-reset:i}
.area li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:30px 0;border-bottom:1px solid rgba(18,23,34,.08);counter-increment:i;transition:background .2s}
.area li:before{content:counter(i,decimal-leading-zero);font-family:"Sora";font-size:13px;color:var(--c);padding-top:5px;letter-spacing:.08em}
.area li strong{display:block;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:.02em}
.area li span{display:block;font-size:15px;color:var(--sub);line-height:1.9;margin-top:6px}

/* ===== About page ===== */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.val{position:relative;padding:40px 44px 44px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.val .n{font-size:64px;line-height:1;letter-spacing:-.04em}
.val p{font-size:20px;font-weight:700;line-height:1.85;letter-spacing:.03em;margin-top:40px;max-width:520px}
.skg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.skc{padding:32px 32px 36px;border-top:2px solid var(--c);background:rgba(255,255,255,.55)}
.skc h3{font-size:24px;font-weight:400;letter-spacing:-.02em}
.skc h3 small{display:block;font-family:"Zen Kaku Gothic New";font-size:12px;color:var(--sub);letter-spacing:.12em;margin-top:6px;font-weight:500}
.skc ul{margin-top:28px}
.skc li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(18,23,34,.08);font-size:16px;font-weight:500}
.skc li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.duo{display:grid;grid-template-columns:368px 1fr;gap:56px}
.duo .hob{font-size:17px;line-height:2.1;color:#2B313C}
.duo .hob b{display:block;font-size:22px;color:var(--ink);margin-bottom:14px;line-height:1.7}
.msg{position:relative;padding:64px 72px}
.msg .q{font-size:80px;line-height:.6;color:rgba(36,86,201,.35);font-family:"Sora";height:40px}
.msg .t{font-size:24px;font-weight:700;line-height:1.95;letter-spacing:.04em;color:var(--deep)}
.msg .sig{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:13px;color:var(--sub);letter-spacing:.14em}
.msg .sig:before{content:"";width:28px;height:1px;background:var(--acc)}

/* ===== Contact page ===== */
.mailp{position:relative;overflow:hidden;isolation:isolate;padding:72px 80px;display:grid;grid-template-columns:1fr;gap:48px;align-items:end}
.mailp .addr{display:inline-block;font-size:clamp(32px,3.6vw,52px);font-weight:400;letter-spacing:-.02em;color:var(--deep);margin:28px 0 18px;border-bottom:1px solid rgba(26,58,143,.25);padding-bottom:6px;transition:color .2s,border-color .2s}
.mailp .addr span{font-size:.6em;vertical-align:.35em;margin-left:.2em;transition:transform .2s;display:inline-block}.mailp .addr:hover span{transform:translate(3px,-3px)}
.mailp .addr:hover{color:var(--acc);border-color:var(--acc)}
.mailp small{display:block;font-size:13px;color:var(--sub)}
.mailp h2,.pair h2{font-size:22px;font-weight:700;letter-spacing:.03em;margin-top:16px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.pair>div{padding:40px 44px;min-height:280px;display:flex;flex-direction:column}
.pair p{font-size:15.5px;line-height:2;color:#2B313C;margin-top:16px}
.pair .badge{margin-top:auto}
.badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--acc);border:1px solid rgba(36,86,201,.35);align-self:flex-start;margin-top:auto}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.pair .idx,.mailp .idx{color:var(--acc);font-size:12px;margin:0}
.pair .base{font-size:44px;font-weight:700;letter-spacing:.06em;color:var(--deep);margin-top:auto;line-height:1.2}
.base small{display:block;font-family:"Sora";font-size:12px;letter-spacing:.2em;color:var(--sub);font-weight:500;margin-bottom:8px}

/* ===== Privacy ===== */
.doc{display:grid;grid-template-columns:368px 1fr;gap:56px}
.doc .meta{position:sticky;top:48px;align-self:start;font-size:13px;color:var(--sub);line-height:2}
.doc .meta b{display:block;font-family:"Sora";font-size:12px;letter-spacing:.2em;color:var(--acc);font-weight:500}
.doc article{max-width:800px}
.doc section{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:32px}
.doc section:first-child{border-top-color:rgba(18,23,34,.2)}
.doc .no{font-family:"Sora";font-size:14px;color:var(--acc);padding-top:4px;letter-spacing:.06em}
.doc h2{font-size:20px;font-weight:700;letter-spacing:.03em;line-height:1.6}
.doc p,.doc li{font-size:15.5px;line-height:2.05;color:#2B313C}
.doc p{margin-top:14px}
.doc ul{margin-top:14px}
.doc li{position:relative;padding-left:22px}
.doc li:before{content:"";position:absolute;left:4px;top:15px;width:6px;height:1px;background:var(--acc)}
.doc .date{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--sub)}


.ttl .jp{display:block;font-size:34px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.hd .lead .big{display:block;font-size:24px;font-weight:700;line-height:1.85;letter-spacing:.04em;color:var(--deep)}
.abt .hd{margin-bottom:0}.abt .hd .act{flex-direction:column;align-items:flex-start;gap:40px}
.works .hd{margin-bottom:0}
.concept .intro{padding-top:56px}
.concept .stmt{font-size:clamp(26px,2.4vw,34px)}
.concept .body{font-size:18px;margin-top:32px;max-width:none}
.cta .ttl .en{font-size:56px}.cta .ctxt{margin-top:28px}
.ph .wrap.solo{grid-template-columns:1fr}
.skc{padding:8px 32px 20px}.skc ul{margin-top:12px}.skc li:last-child{border:0}
.msg .q{margin-top:0}
.hd .act .lead+.btn{flex:none}
/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in-v{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}

/* ===== Tablet ===== */
@media (max-width:1180px){
 :root{--gut:40px}
 .fv .wrap,.ph .wrap{grid-template-columns:1fr 400px;gap:40px}
 .hd,.cgrid,.area,.duo,.doc{grid-template-columns:280px 1fr;gap:40px}
 .card{padding:32px 28px 24px}
 .mailp{padding:56px;grid-template-columns:1fr}
}
/* ===== Mobile ===== */
@media (max-width:760px){
 :root{--gut:20px}
 .nav{display:none!important}.menu{display:flex}
 .grid{background-size:28px 28px}
 .glow i:nth-child(1){width:340px;height:300px;left:120px;top:360px}.glow i:nth-child(2){width:260px;height:240px;left:-60px;top:620px}.glow i:nth-child(3){display:none}
 .hdr{position:relative;padding:16px 20px}.logo .ok{font-size:28px}.logo .nm{font-size:9px;padding-left:10px}
 .fv{height:auto;min-height:0}
 .fv .wrap{position:relative;inset:auto;grid-template-columns:1fr;gap:40px;padding:24px 20px 40px}
 .kick{font-size:12px;gap:10px;letter-spacing:.06em}.kick:before{width:20px}
 .fv .cp{margin:40px 0}.fv .bgw{width:104%;left:-6px;top:-30px;transform:none}
 .ctas{flex-direction:column;align-items:stretch;gap:12px}.btn{width:100%}
 .copy{white-space:normal;font-size:clamp(21px,6vw,25px)!important;margin:16px 0 28px}
 .fv .row{padding-top:28px;display:block}.scroll{display:none}
 .fv .side{transform:none}
 .side{padding:22px 20px 8px}.sh span{font-size:22px}.it{grid-template-columns:36px 1fr}
 .ph{padding:0 0 56px}.ph .wrap{grid-template-columns:1fr;gap:40px;min-height:0;padding:16px 20px 0}
 .ph .cp{padding:72px 0 64px}.ph .bgw{width:calc(var(--gw) * 150vw / 2053)}
 .ph .lead{font-size:15px;line-height:2}
 .sec{padding:88px 20px}
 .hd,.cgrid,.area,.duo,.doc{grid-template-columns:1fr;gap:28px}
 .hd{margin-bottom:44px}.ttl .en{font-size:44px}.hd .act{flex-direction:column;align-items:flex-start;gap:24px}
 .pillars,.cards,.works .slots,.vals,.skg,.pair{grid-template-columns:1fr}
 .pillars{margin-top:64px;gap:48px}
 .concept .stmt{font-size:22px}.concept .body{font-size:15.5px;margin-top:28px}
 .works .slots{grid-template-columns:repeat(3,1fr);gap:8px}.slot{height:96px;padding:12px}.slot .en{font-size:10px;letter-spacing:.1em}.slot p{font-size:11px}
 .hdr.open .nav{display:flex!important;position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:0 32px;background:rgba(246,247,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .hdr.open .nav a{align-items:flex-start}.hdr.open .nav .e{font-size:30px}.hdr.open .nav .ja{font-size:12px}
 .hdr.open{position:fixed;inset:0 0 auto}
 .hdr.open .menu i{background:transparent;box-shadow:none;position:relative}.hdr.open .menu i:before,.hdr.open .menu i:after{content:"";position:absolute;left:0;top:0;width:22px;height:1px;background:currentColor;transform:rotate(45deg)}.hdr.open .menu i:after{transform:rotate(-45deg)}
 .card{min-height:0}.card h3{min-height:0}.card .n{margin:28px 0 20px;font-size:56px}
 .hd .lead .big{font-size:19px}.ttl .jp{font-size:26px}.concept .intro{padding-top:36px}.cta .ttl .en{font-size:40px}
 .cta{padding:0 20px 72px}.cta .box{padding:48px 24px 160px}.cta .idx{color:var(--acc)}.cta .ci{grid-template-columns:1fr;gap:32px}.cta .acts{align-items:stretch}
 .cta .bgw{width:150vw;right:-60px;bottom:-30px}
 .ft{padding:48px 20px 24px}.ft .in{grid-template-columns:1fr;gap:32px}.ft nav{flex-wrap:wrap;gap:16px 32px}.ft .bot{flex-direction:column-reverse;align-items:flex-start;gap:8px}
 .area{padding:40px 0 56px}.area .l{position:static}.area .num{font-size:80px}.area h2{font-size:23px}.area li{grid-template-columns:44px 1fr;padding:22px 0}.area li strong{font-size:17px}
 .val{padding:28px 24px 32px;min-height:0}.val .n{font-size:48px}.val p{font-size:17px;margin-top:24px}
 .msg{padding:40px 24px}.msg .t{font-size:19px}
 .mailp{padding:40px 24px}.pair>div{padding:32px 24px;min-height:220px}.base{font-size:34px}
 .doc .meta{position:static}.doc section{grid-template-columns:40px 1fr;padding:28px 0}
}
/* ---- CMS-driven additions ---- */
.fv .wrap.solo{grid-template-columns:1fr}
.doc section.post{grid-template-columns:1fr}
.doc .post h2{margin-top:32px}.doc .post h2:first-child{margin-top:0}
.doc .post h3{font-size:17px;font-weight:700;margin-top:28px;line-height:1.7}
.doc .post a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.doc .post ol{margin-top:14px;padding-left:22px;list-style:decimal}.doc .post ol li{padding-left:4px}.doc .post ol li:before{display:none}
.doc .post blockquote{margin-top:18px;padding-left:18px;border-left:2px solid var(--acc);color:var(--sub)}
.doc .jl h2 a{transition:color .3s}.doc .jl h2 a:hover{color:var(--acc)}
.doc .jl small{display:block;font-family:"Sora";font-size:12px;letter-spacing:.12em;color:var(--sub);margin-top:6px}
.doc .back{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}