/*! world-ink — /ai/ (AIエージェント導入). Loaded after works.css + agents.css.
    A room where something is quietly running: deep navy graphite, a fine dot
    grid, a time ruler across the day, and an instrument — rings at four speeds
    around a lit core, two satellite gauges, hairlines from the feeds into it —
    with the real report app standing in front of it. Nothing flashes.
    Inline SVG and 2D rotation only: no CSS 3D, no clip-path (Safari/Edge),
    and no data: backgrounds (the CSP's img-src is 'self'). */
body[data-world="ink"]{
  --ground:#04060A;--raise:#0B0F16;
  --ink:#E4EAFB;--ink-mid:#A2AEC8;--ink-dim:#7A87A6;--ink-faint:#717EA0;
  --line:rgba(255,255,255,.10);--line-firm:rgba(255,255,255,.22);
  --acc:#5B86FF;--acc-line:rgba(62,104,240,.62);--acc-glow:rgba(30,63,232,.24);--tint:#5B86FF;
  background-color:#01030B;
  background-image:
    radial-gradient(rgba(38,80,220,.22) 1px,transparent 1.7px),
    radial-gradient(78% 7% at 78% 1%,rgba(24,56,225,.52),transparent 72%),
    radial-gradient(56% 5% at 4% 98%,rgba(24,56,225,.2),transparent 74%);
  background-size:28px 28px,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat;
  background-attachment:fixed,scroll,scroll;
}
body[data-world="ink"] main{--grad:linear-gradient(96deg,#5B86FF 0%,#1E3FE8 100%)}
body[data-world="ink"] .chips li{border-radius:4px}
body[data-world="ink"] .p-hero::before{display:none}
body[data-world="ink"] .btn{background:linear-gradient(100deg,#2A4FF0,#1B37DE);color:#E9EEFF;
  box-shadow:0 12px 38px rgba(26,58,225,.42)}
body[data-world="ink"] .card{border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  border-color:rgba(52,96,238,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body[data-world="ink"] .card:hover{border-color:rgba(52,96,238,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 56px rgba(0,0,0,.5),0 0 44px rgba(52,96,238,.12)}
body[data-world="ink"] .brief{border-color:rgba(52,96,238,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 6px rgba(52,96,238,.04)}

/* ── Hero ───────────────────────────────────────────────────────────── */
.w-hero--ink{
  background:
    radial-gradient(46% 52% at 62% 52%,rgba(30,70,235,.42),transparent 70%),
    radial-gradient(64% 66% at 46% 46%,rgba(20,46,205,.26),transparent 72%),
    radial-gradient(44% 44% at 94% 8%,rgba(24,56,225,.26),transparent 70%);
  border-bottom:1px solid rgba(46,88,235,.42);
  box-shadow:0 1px 60px rgba(26,62,230,.34);
}
.w-hero--ink::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px)}
.w-hero--ink .w-grid,.w-hero--ink .w-ruler{position:relative;z-index:1}

/* ── The day, as a ruler ─────────────────────────────────────────────── */
.w-ruler{position:relative;height:48px;max-width:var(--shell);margin:0 auto clamp(20px,3vh,36px)}
.w-ruler::before{content:"";position:absolute;left:0;right:0;top:24px;height:1px;background:rgba(255,255,255,.16)}
.w-ruler::after{content:"";position:absolute;left:0;right:0;top:18px;height:7px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px calc(100% / 24))}
.w-ruler span{position:absolute;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink-mid);white-space:nowrap}
.w-ruler .h{top:32px;transform:translateX(-50%)}
.w-ruler .h.first{transform:none}
.w-ruler .h.last{transform:translateX(-100%)}
.w-ruler .m{top:-4px;transform:translateX(-50%);font-size:11px;color:var(--acc)}
.w-ruler .m::after{content:"";position:absolute;left:50%;top:24px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:#4E7BFF;box-shadow:0 0 6px rgba(78,123,255,.9),0 0 22px rgba(30,66,240,.95)}
.w-ruler .m.doubt{color:#7FA0FF;transform:translateX(-100%)}
.w-ruler .m.doubt::after{left:100%;background:transparent;border:1px solid #7FA0FF;box-shadow:none}
.w-ruler .pulse{position:absolute;left:-12%;top:24px;width:12%;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(92,132,255,.95),transparent);
  box-shadow:0 0 14px rgba(30,66,240,.9)}

/* ── The instrument ─────────────────────────────────────────────────── */
.w-visual--ink{isolation:isolate}
/* The dial spans the right half of the hero, larger than the space it is given,
   with its lit core landing in the gap between the text and the phone. Its left
   edge fades out rather than being cut, so it never collides with the prose. */
.w-hud{position:absolute;top:-6%;bottom:-6%;left:45%;right:-3%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%)}
.w-hud::before{content:"";position:absolute;top:50%;left:0;width:min(880px,128%);aspect-ratio:1;
  transform:translate(-26%,-50%);background:
    radial-gradient(17% 17% at 50% 50%,rgba(86,124,255,.5),transparent 68%),
    radial-gradient(34% 34% at 50% 50%,rgba(26,58,228,.5),transparent 72%)}
.w-hud svg{position:absolute;top:50%;left:0;width:min(880px,128%);height:auto;aspect-ratio:1;
  transform:translate(-26%,-50%);overflow:visible;
  filter:drop-shadow(0 0 18px rgba(40,84,235,.8)) drop-shadow(0 0 54px rgba(22,52,215,.55))}
.w-hud .h-dot{filter:drop-shadow(0 0 7px rgba(220,235,255,.95))}

/* The feeds the agent reads, landing on the instrument's left rim. */
.w-feeds{position:absolute;left:-2%;top:50%;transform:translateY(-50%);margin:0;padding:0;
  list-style:none;display:grid;gap:44px;z-index:2}
.w-feeds::before{content:"";position:absolute;left:3px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(52,96,238,.4),transparent)}
.w-feeds li{position:relative;padding-left:18px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;color:var(--ink);white-space:nowrap;
  text-shadow:0 0 12px rgba(4,6,10,.95),0 0 5px rgba(4,6,10,1),0 0 2px rgba(4,6,10,1)}
.w-feeds li::before{content:"";position:absolute;left:0;top:.35em;width:7px;height:7px;border-radius:50%;
  border:1px solid rgba(52,96,238,.85);background:rgba(52,96,238,.18)}
.w-feeds li::after{content:"";position:absolute;left:calc(100% + 10px);top:.72em;width:86px;height:1px;
  background:linear-gradient(90deg,rgba(52,96,238,.5),rgba(52,96,238,0))}

/* ── The phone: a line-drawn mock of the structure (four tabs, a stamp, a report) — not the real screen ── */
.w-phone{position:relative;z-index:1;width:min(100%,360px);margin:0 0 0 auto;border-radius:50px;
  background:#1C1F24;box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.09);padding:12px}
.w-phone::after{content:"";position:absolute;left:10%;right:10%;top:100%;height:56px;border-radius:50%;
  background:linear-gradient(180deg,rgba(52,96,238,.2),transparent);filter:blur(16px);pointer-events:none}
.w-phone .scr{border-radius:40px;overflow:hidden;background:#EEF1F5;color:#3E4A5C;
  filter:saturate(1.04) brightness(.9);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Zen Kaku Gothic New',sans-serif;
  font-size:15px;line-height:1.7;text-align:left}
.w-phone .bar{background:#F7F8FA;border-bottom:1px solid #D8DEE8;padding-top:34px}
.w-phone .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px}
.w-phone .row b{font-size:17px;font-weight:700;letter-spacing:.01em;color:#3E4A5C}
.w-phone .tabs{display:flex;gap:4px;padding:0 12px}
.w-phone .tabs span{flex:1;text-align:center;padding:10px 6px 12px;font-size:15px;color:#7A8699;border-bottom:2px solid transparent}
.w-phone .tabs .on{color:#3E4A5C;font-weight:700;border-bottom-color:#8B95A5}
.w-phone .st{padding:10px 18px;font-size:13px;text-align:center;color:#7A8699;background:#F7F8FA;border-bottom:1px solid #D8DEE8}
.w-phone .rd{padding:12px 12px 22px}
.w-phone .ttl{font-size:21px;line-height:1.4;font-weight:700;margin:0 0 16px}
.w-phone .body{background:#F7F8FA;border:1px dashed #C9D1DC;border-radius:12px;padding:6px 16px 14px;font-size:13.5px;line-height:1.7}
.w-phone .body h4{font-size:15px;font-weight:700;margin:16px 0 4px;padding-top:12px;border-top:1px dashed #C9D1DC}
.w-phone .body h4:first-child{margin-top:6px;padding-top:0;border-top:0}
.w-phone .body p{margin:6px 0}
.w-phone .body ul{padding-left:20px;margin:6px 0}
.w-phone .body li{margin:4px 0}
.w-phone-cap{position:relative;z-index:1;margin:22px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.08em;color:var(--ink-mid);text-align:right}

@media (prefers-reduced-motion: no-preference){
  .w-ruler .pulse{animation:w-sweep 14s linear 2s infinite}
  .w-hud g{transform-origin:320px 320px}
  .h-a{animation:h-spin 160s linear infinite}
  .h-b{animation:h-spin 74s linear infinite reverse}
  .h-c{animation:h-spin 220s linear infinite}
  .h-d{animation:h-spin 96s linear infinite}
  .h-e{animation:h-spin 58s linear infinite reverse}
}
@keyframes h-spin{to{transform:rotate(1turn)}}
@keyframes w-sweep{0%{left:-12%;opacity:0}6%{opacity:1}60%{left:100%;opacity:1}66%{opacity:0}100%{left:100%;opacity:0}}

@media (max-width:1180px){.w-feeds{display:none}}
@media (max-width:1024px){.w-hud{display:none}}
@media (max-width:960px){
  .w-phone{margin:0 auto}
  .w-phone-cap{text-align:center}
  .w-ruler .h{display:none}
  .w-ruler .h.first,.w-ruler .h.last{display:block}
}
@media (max-width:620px){
  .w-ruler{display:none}
  .w-phone{border-radius:40px;padding:10px}
  .w-phone .scr{border-radius:32px}
}

/* ── The whole page as one instrument (2026-09-10) ──────────────────
   The hero read as an instrument and the rest read as a document. These rules
   carry the same vocabulary down the page: a drawn frame with tick marks at
   both margins, a hairline and a rivet between sections, machined corners on
   every card, tick rails instead of plain gradient rules, and faint rings in
   the margins so no band of the page is ever blank. Strokes and gradients
   only — no images, no CSS 3D, no clip-path. */
body[data-world="ink"] main{position:relative}
body[data-world="ink"] main::before,
body[data-world="ink"] main::after{
  content:"";position:absolute;top:0;bottom:0;width:7px;pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg,transparent,rgba(52,96,238,.16) 6%,rgba(52,96,238,.16) 94%,transparent) 0 0/1px 100% no-repeat,
    repeating-linear-gradient(180deg,rgba(52,96,238,.3) 0 1px,transparent 1px 64px) 0 0/7px 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}
body[data-world="ink"] main::before{left:calc(var(--pad) - 26px)}
body[data-world="ink"] main::after{right:calc(var(--pad) - 26px);transform:scaleX(-1)}

/* A hairline and a rivet where one section hands over to the next. */
body[data-world="ink"] .sec{border-top:1px solid rgba(52,96,238,.09)}
body[data-world="ink"] .sec::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;
  margin-left:-4.5px;transform:rotate(45deg);background:#04060A;border:1px solid rgba(52,96,238,.4);z-index:1}
/* Faint rings in the margins: the machine keeps turning past the edge of the text. */
body[data-world="ink"] .sec::after{content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(460px,42vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(52,96,238,.075)}
body[data-world="ink"] .sec:nth-of-type(odd)::after{right:-13%;top:16%}
/* The rings hang past the right edge on purpose; the section cuts them at the
   screen. Without this a tablet in landscape (1024, 1180px) laid the page out
   wider than its screen and let it slide sideways (found 2026-10-07). */
body[data-world="ink"] .sec{overflow-x:clip}
body[data-world="ink"] .sec:nth-of-type(even)::after{left:-15%;bottom:10%;border-style:dashed;border-color:rgba(52,96,238,.06)}
body[data-world="ink"] .sec .shell{position:relative;z-index:1}

/* Machined corners on the cards. */
body[data-world="ink"] .card::before,
body[data-world="ink"] .card::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none;
  border-color:rgba(52,96,238,.5);border-style:solid;border-width:0}
body[data-world="ink"] .card::before{left:9px;top:9px;border-left-width:1px;border-top-width:1px}
body[data-world="ink"] .card::after{right:9px;bottom:9px;border-right-width:1px;border-bottom-width:1px}
body[data-world="ink"] .card:hover::before,body[data-world="ink"] .card:hover::after{border-color:#5B86FF}
body[data-world="ink"] .card .idx,body[data-world="ink"] .card .cat-no{color:#7FA0FF}

/* Steps, plans and the brief pick up the same tick rail. */
body[data-world="ink"] .step::before,body[data-world="ink"] .card .rail{
  background:repeating-linear-gradient(90deg,rgba(52,96,238,.75) 0 2px,transparent 2px 7px)}
body[data-world="ink"] .brief{position:relative}
body[data-world="ink"] .brief::before,body[data-world="ink"] .brief::after{content:"";position:absolute;
  width:16px;height:16px;border-color:rgba(52,96,238,.7);border-style:solid;border-width:0;pointer-events:none}
body[data-world="ink"] .brief::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px}
body[data-world="ink"] .brief::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px}
body[data-world="ink"] .brief-head{background:rgba(52,96,238,.06)}

/* The one reframe line, set on a machined bar. */
body[data-world="ink"] .pull::before{width:4px;border-radius:0;
  background:repeating-linear-gradient(180deg,#5B86FF 0 3px,rgba(52,96,238,.25) 3px 7px)}
body[data-world="ink"] .pull em{-webkit-text-fill-color:#5B86FF;color:#5B86FF;background:none;
  text-shadow:0 0 20px rgba(52,96,238,.5)}

/* Numbers, roles and chips in the same blue-white. */
body[data-world="ink"] .num{position:relative;background:linear-gradient(180deg,rgba(52,96,238,.07),transparent)}
body[data-world="ink"] .num b{-webkit-text-fill-color:#5B86FF;color:#5B86FF;text-shadow:0 0 16px rgba(52,96,238,.4)}
body[data-world="ink"] .roles dt::before{border-radius:0;box-shadow:0 0 10px rgba(52,96,238,.8)}
body[data-world="ink"] .prose{border-left:1px solid rgba(52,96,238,.28)}
body[data-world="ink"] .faq details{border-color:rgba(52,96,238,.14)}
body[data-world="ink"] .faq details[open]{border-color:rgba(52,96,238,.4);background:rgba(52,96,238,.04)}
body[data-world="ink"] .stairs{position:relative}
body[data-world="ink"] .stair-head{color:#5B86FF}
body[data-world="ink"] .submit{box-shadow:0 12px 38px rgba(52,96,238,.24)}
body[data-world="ink"] .form-wrap{position:relative;border-color:rgba(52,96,238,.18)}
body[data-world="ink"] .form-wrap::before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;
  border-left:1px solid rgba(52,96,238,.55);border-top:1px solid rgba(52,96,238,.55);pointer-events:none}
body[data-world="ink"] .form-wrap::after{content:"";position:absolute;right:14px;bottom:14px;width:16px;height:16px;
  border-right:1px solid rgba(52,96,238,.55);border-bottom:1px solid rgba(52,96,238,.55);pointer-events:none}
/* A scan of the panel, laid over everything but the chrome. */
body[data-world="ink"]::after{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(40,84,235,.03) 0 1px,transparent 1px 3px)}
@media (max-width:900px){
  body[data-world="ink"] main::before,body[data-world="ink"] main::after{display:none}
  body[data-world="ink"] .sec::after{display:none}
}
/* The doubter row kept an amber from the old palette; this world is one hue. */
body[data-world="ink"] .brief-row.doubt b{color:#5B86FF;text-shadow:0 0 12px rgba(52,96,238,.5)}
body[data-world="ink"] .faq summary::after{color:#7FA0FF}

/* ── 基板（2026-09-10） ───────────────────────────────────────────────
   ヒーローの下から、ページの地が回路基板になる。タイルは2つ（480 と 326 を
   90度回して重ねる）で、繰り返しが格子に見えないようにしてある。data: の
   背景は CSP（img-src 'self'）で弾かれるので、インライン SVG で描く。
   ぼかしは一切かけない（スマホでは描画コストが跳ねる）。 */
.w-pcb,.w-pcb-live{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden;
  --pcb-top:860px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent var(--pcb-top),
    #000 calc(var(--pcb-top) + 620px),#000 calc(100% - 220px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent var(--pcb-top),
    #000 calc(var(--pcb-top) + 620px),#000 calc(100% - 220px),transparent 100%)}
/* ユーザー指定（2026-09-10）：真っ黒を 0、元の青を 100 として 60 の濃さ。光の層は落とさない */
.w-pcb{opacity:.6}
.w-pcb svg,.w-pcb-live svg{display:block;width:100%;height:100%}
/* 青は上だけで終わらせない。ページの高さいっぱいに、大きな青の滲みを数か所。
   マスクを共有するので、ヒーローの下から一緒に効いてくる。 */
.w-pcb::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(44% 6% at 88% 12%,rgba(24,56,225,.12),transparent 70%),
  radial-gradient(40% 5% at 6% 30%,rgba(24,56,225,.09),transparent 70%),
  radial-gradient(46% 6% at 94% 50%,rgba(24,56,225,.11),transparent 70%),
  radial-gradient(40% 5% at 4% 70%,rgba(24,56,225,.08),transparent 70%),
  radial-gradient(44% 6% at 84% 90%,rgba(24,56,225,.11),transparent 70%)}
.pc-r{fill:none;stroke:rgba(32,72,222,.42);stroke-width:1}
.pc-r2{fill:none;stroke:rgba(32,72,222,.25);stroke-width:1}
.pc-t{fill:none;stroke:rgba(40,84,235,.48);stroke-width:1.3;stroke-linecap:square}
.pc-t .live{stroke:rgba(78,123,255,.55)}
.pc-t2{fill:none;stroke:rgba(40,84,235,.28);stroke-width:1.2;stroke-linecap:square}
.pc-c{fill:rgba(1,3,12,.82);stroke:rgba(40,84,235,.44);stroke-width:1}
.pc-pad{fill:rgba(48,92,240,.46)}
.pc-p{fill:none;stroke:rgba(40,84,235,.46);stroke-width:1.4}
.pc-p2{fill:none;stroke:rgba(40,84,235,.29);stroke-width:1.2}
.pc-h{fill:#01030B}
.pc-g{fill:rgba(34,74,228,.4)}
.pc-n{fill:#5B86FF}
@media (max-width:960px){.w-pcb,.w-pcb-live{--pcb-top:1180px}}
@media (max-width:620px){.w-pcb,.w-pcb-live{--pcb-top:1060px}}

/* ── 基板を流れる光（2026-09-10） ──────────────────────────────────
   ユーザー「青い基盤の模様に沿って、青い光が速い速度で時々流れる演出を、ところどころ」。
   実在の配線を写した線（ai/index.html の .w-pcb-live）の上を、短い光が
   周期の最初の1割で駆け抜け、残りは消えている＝速く、時々。場所ごとに位相をずらす。
   ⚠ ぼかし禁止（上の基板と同じ理由）。光の滲みは、太く薄い線と細く明るい芯の2本重ねで出す。
   線の長さは pathLength=100 で揃える。 */
/* 光の長さ --l（線の長さに対する%）は線ごとに変え、どの線でも約26pxの光にしてある */
.pl{fill:none;stroke-linecap:round;stroke-dasharray:var(--l,7) 200;stroke-dashoffset:var(--l,7);
  animation:pl-run var(--d,9s) linear var(--o,0s) infinite}
.pl path:first-child{stroke:rgba(74,122,255,.30);stroke-width:6}
.pl path:last-child{stroke:#C4D4FF;stroke-width:1.6}
@keyframes pl-run{0%{stroke-dashoffset:var(--l,7)}10%,100%{stroke-dashoffset:-100}}
/* デスクトップは配線に沿う短い光、スマホは節の間の隙間を横切るレールの光 */
.pl-m{display:none}
@media (max-width:620px){.pl-d{display:none}.pl-m{display:inline}}
@media (prefers-reduced-motion:reduce){.w-pcb-live{display:none}}

/* 基板の上に文字が乗るので、器は不透明な地を持ち、地の上に直に置く文は
   自分の影で紙を作る。ここを省くと配線が本文を横切って読めなくなる。 */
body[data-world="ink"] :is(.card,.brief,.num,.step,.plan,.faq details,.form-wrap,.spec,.doc,.tread){
  background-color:#060C1A}
body[data-world="ink"] .card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022)),#060C1A}
body[data-world="ink"] .faq details[open]{
  background:linear-gradient(rgba(52,96,238,.05),rgba(52,96,238,.05)),#060C1A}
body[data-world="ink"] :is(.sec h2,.sec-lede,.prose,.pull,.note,.roles dd,.brief-after){
  text-shadow:0 0 14px rgba(2,6,16,.96),0 0 5px rgba(2,6,16,.9)}
body[data-world="ink"] .sec h2{text-shadow:0 0 26px rgba(2,6,16,.98),0 0 8px rgba(2,6,16,.95)}
.pc-t3{fill:none;stroke:rgba(56,100,245,.32);stroke-width:1.6;stroke-linecap:square}
.pc-p3{fill:none;stroke:rgba(56,100,245,.36);stroke-width:1.6}

/* ── 縦を詰める・PC は横に広く（2026-10-15 仕様46。/studio/ の仕様45と同じ考え方） ──────────
   中身は最大 1400px、1440px の画面で左右 80px 前後。節の上下の余白は PC 64px ずつ・スマホ 40px ずつ。
   節の番号と英字の見出し、最初の画面の英字の見出し・標語・札の帯は外した（基板・光・計器・見本の画面は残す）。 */
body[data-world="ink"]{--shell:1400px}
@media (min-width:1001px){body[data-world="ink"]{--pad:clamp(56px,5.6vw,80px)}}
body[data-world="ink"] .sec{padding-top:clamp(40px,4.45vw,64px);padding-bottom:clamp(40px,4.45vw,64px)}
body[data-world="ink"] .sec h2{margin:0 0 clamp(20px,1.7vw,24px);font-size:clamp(26px,3vw,42px)}
body[data-world="ink"] .sec-lede{margin:-8px 0 clamp(18px,1.7vw,24px);font-size:clamp(14px,1.2vw,15.5px);line-height:1.85}
body[data-world="ink"] .prose p{line-height:1.9}
body[data-world="ink"] .pull{margin-top:clamp(20px,2.4vw,30px)}
.w-hero--ink{padding-top:clamp(20px,2.4vw,32px);padding-bottom:clamp(28px,3vw,40px)}
.w-hero--ink .w-ruler{margin-bottom:clamp(12px,2vh,24px)}
.w-hero--ink .w-grid{align-items:center}
.w-hero--ink .crumb{margin-bottom:14px}
.w-hero--ink .w-name{margin-bottom:clamp(14px,1.8vh,20px)}
.w-hero--ink .w-lede{margin-bottom:22px}
/* 札の中を詰める */
body[data-world="ink"] .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="ink"] .card .idx{margin-bottom:10px}
body[data-world="ink"] .card h3{margin-bottom:8px;font-size:clamp(17px,1.35vw,19px);line-height:1.42}
body[data-world="ink"] .card p{line-height:1.8}
body[data-world="ink"] .card .list{margin-top:10px;gap:4px}
body[data-world="ink"] .nums{margin-bottom:clamp(18px,2vw,26px)}
body[data-world="ink"] .num{padding:14px 18px}
/* 当社の7つの役は PC で 2 列に */
@media (min-width:1001px){
  body[data-world="ink"] .roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3vw,48px);max-width:none}
}
body[data-world="ink"] .roles div{padding:11px 0}
/* 届く報告：PC は報告の横に、読んだあとの一言 */
@media (min-width:1001px){
  body[data-world="ink"] #monday .shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);align-items:end}
  body[data-world="ink"] #monday :is(h2,.sec-lede){grid-column:1/-1}
  body[data-world="ink"] #monday .brief-after{margin:0}
}
body[data-world="ink"] .brief-row{padding:10px 22px}
/* 作り方の2段落は PC で横に */
@media (min-width:1001px){
  body[data-world="ink"] #method .prose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3vw,48px);max-width:none}
  body[data-world="ink"] #method .prose p{margin:0}
}
body[data-world="ink"] .step{padding:20px 20px 18px}
body[data-world="ink"] .step b{font-size:22px;margin-bottom:10px}
body[data-world="ink"] .stairs{margin-top:clamp(18px,2vw,26px)}
body[data-world="ink"] .stairs + .stairs{margin-top:clamp(26px,3vw,40px)}
body[data-world="ink"] .plan .meta{margin-bottom:12px}
body[data-world="ink"] .plan ul{gap:4px}
/* よくある質問は PC で 2 列（開いた問いだけが伸びる） */
body[data-world="ink"] .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
body[data-world="ink"] .faq summary{padding:16px 22px}
/* 相談の節は PC で横に：左に見出しと一言、右にフォーム */
@media (min-width:1001px){
  body[data-world="ink"] #contact .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto 1fr;column-gap:clamp(32px,3.4vw,56px);align-items:start}
  body[data-world="ink"] #contact h2{grid-column:1;grid-row:1}
  body[data-world="ink"] #contact .sec-lede{grid-column:1;grid-row:2;margin:0}
  body[data-world="ink"] #contact .form-wrap{grid-column:2;grid-row:1/span 2}
}
body[data-world="ink"] .form-wrap{padding:clamp(20px,2.4vw,32px)}
body[data-world="ink"] .fields{gap:14px}
body[data-world="ink"] .submit{margin-top:20px}
@media (max-width:760px){
  body[data-world="ink"] .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .w-hero--ink{padding-top:20px;padding-bottom:24px}
  body[data-world="ink"] .card{padding:20px 18px 18px}
  body[data-world="ink"] .faq summary{padding:14px 18px;gap:12px}
  body[data-world="ink"] .faq .a{padding:0 18px 18px 48px}
  body[data-world="ink"] .form-wrap{padding:18px}
  body[data-world="ink"] .fields{gap:12px}
}