/* Rootfor renewal: additional patterns 4-6
   Shared base = pattern 1 (grey, white outline fragments) + pattern 3 background (24px blue grid, plan drawing),
   rule-line motion on English display type (after LARGO), 20% grey image placeholders.
   Pattern 4 = works in 3 columns          / footer: logo drawn from guide lines
   Pattern 5 = works as interactive index   / footer: drawing title block
   Pattern 6 = works on a horizontal board  / footer: dark panel with a scale ruler */

:root {
  /* 2026-10-15 (統合プレビュー6): Japanese text in Zen Kaku Gothic New (FOT-Cezanne retired) */
  --f-disp: "avenir-next-lt-pro", "Avenir Next", "Outfit", "Zen Kaku Gothic New", system-ui, sans-serif;
  --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --fg-rgb: 18 19 20;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --bg: #e4e4e4;
  --surface: #d9d9d9;
  --fg: #121314;
  --muted: #55585f;
  --line: rgba(18, 19, 20, .2);
  --line-strong: rgba(18, 19, 20, .7);
  --frag: #ffffff;
  --blue: #2448e6;
  --grid: rgba(36, 72, 230, .085);
  --ph: #cccccc;          /* 20% grey placeholder */
  --ph-ink: #3d4047;
  --panel: #1a1b1e;
  --panel-fg: #e4e4e4;
  --accent: var(--blue);
  color-scheme: light;

  --gutter: clamp(16px, 2.6vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --navw: 232px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--fg);
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: var(--f-jp); font-size: 15px; line-height: 1.95; letter-spacing: .04em;
  word-break: auto-phrase;
}
p, dd, li, figcaption { text-wrap: pretty; }
h1, h2, h3, .lead, .cs-lead { text-wrap: balance; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-family: var(--f-disp); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jl { font-family: var(--f-jp); font-size: 10px; letter-spacing: .06em; text-transform: none; margin-left: 6px; color: var(--muted); }
.sel { user-select: all; }

/* ---------- logo ---------- */
.logo { display: block; color: inherit; }
.logo svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- rule-line motion (English display type, after LARGO) ---------- */
.rl-host { position: relative; }
.rl { position: absolute !important; inset: 0; width: auto !important; height: auto !important; display: block !important; pointer-events: none; z-index: 1; }
.rl i { position: absolute; display: block; height: 1px; background: currentColor; opacity: .9; transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease); }
.rl i.on { transform: scaleX(1); }
.rl i.r { transform-origin: right center; }
.rl i.g { opacity: .55; }
.rl svg { position: absolute; display: block; overflow: visible; }
.rl svg path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.rl svg.on path { stroke-dashoffset: 0; }
.rl svg.r path { stroke-dashoffset: -1; }
.rl-static i { transform: none; opacity: .35; }

/* ---------- image placeholders (20% grey) ---------- */
.phd { position: relative; aspect-ratio: var(--ar, 4 / 3); max-width: 100%; background: var(--ph); display: grid; place-items: center; overflow: hidden; }
.phd svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.phd svg path { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.phd figcaption { position: relative; display: grid; gap: 2px; justify-items: center; padding: 8px 12px; background: var(--ph); color: var(--ph-ink); text-align: center; font-size: 12px; line-height: 1.5; max-width: 86%; }
.phd figcaption b { font: 500 10.5px/1.2 var(--f-mono); letter-spacing: .16em; }
.phd figcaption i { font: 400 10.5px/1.2 var(--f-mono); font-style: normal; letter-spacing: .08em; }
.phd.sm figcaption { padding: 4px 6px; font-size: 11px; }
.phd.sm figcaption span { display: none; }

/* ---------- hero (LARGO first view) ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-columns: var(--navw) minmax(0, 1fr); overflow: hidden; }
.hero-side { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--gutter) + 8px) 0 var(--gutter) var(--gutter); }
.gnav { display: grid; gap: 2px; }
.gnav a { font-family: var(--f-disp); font-size: 24px; font-weight: 500; line-height: 1.36; letter-spacing: .01em; text-decoration: none; width: max-content; }
.gnav .jp { font-family: var(--f-jp); font-size: 11px; font-weight: 400; margin-left: 8px; letter-spacing: .08em; color: var(--muted); display: inline-block; }
.side-sub { display: grid; gap: 2px; margin-top: 18px; font-size: 12px; }
.side-sub a { text-decoration: none; color: var(--muted); }
.side-sub a:hover { color: var(--fg); }
.side-logo { width: 96px; color: var(--fg); }
.hero-main { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--gutter) + 40px) var(--gutter) var(--gutter) clamp(8px, 2vw, 32px); }
.hero-copy { align-self: center; display: grid; gap: 26px; }
.hero h1 { font-family: var(--f-disp); font-weight: 500; font-size: clamp(3.4rem, 1.4rem + 7.4vw, 10rem); line-height: .98; letter-spacing: -.035em; }
.hero h1 > span { display: block; width: fit-content; }
.hero-jp { display: grid; gap: 8px; max-width: 30em; }
.hero-jp strong { font-size: clamp(1.05rem, .9rem + .5vw, 1.35rem); font-weight: 700; letter-spacing: .1em; }
.hero-jp p { font-size: 13px; color: var(--muted); line-height: 1.9; }
.hero-foot { display: flex; justify-content: flex-end; align-items: end; }
.news { width: min(440px, 100%); display: grid; gap: 10px; }
.news-item { display: none; gap: 6px; text-decoration: none; }
.news-item.on { display: grid; animation: newsIn .7s var(--ease); }
/* all items share one cell, so the box keeps the tallest item's height and nothing above it shifts as they rotate */
.news { grid-template-columns: minmax(0, 1fr); }
.news-item { display: grid; grid-area: 1 / 1; visibility: hidden; }
.news-item.on { visibility: visible; }
.news-bars { grid-row: 2; }
.news-item .kind { font-family: var(--f-disp); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.news-item span:last-child { min-height: 3.4em; font-size: 13px; line-height: 1.7; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.news-bars { display: flex; gap: 6px; }
.news-bars i { display: block; width: 26px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.news-bars i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.news-bars i.on::after { animation: bar 5s linear forwards; }
.news.paused .news-bars i.on::after { animation-play-state: paused; }
.news-bars i.done::after { transform: scaleX(1); }
@keyframes bar { to { transform: scaleX(1); } }
@keyframes newsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* fragment layers: white outlines over the blue plan */
.frag { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.frag svg { width: 100%; height: 100%; display: block; overflow: visible; }
.frag-outline path { fill: none; stroke: var(--frag); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.frag-outline .f { transform-box: fill-box; transform-origin: center; animation: drift var(--dur, 26s) var(--ease) infinite alternate; }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--dx, 30px), var(--dy, -20px)) rotate(var(--rot, 10deg)); }
  100% { transform: translate(calc(var(--dx, 30px) * -.6), calc(var(--dy, -20px) * .8)) rotate(calc(var(--rot, 10deg) * -.5)); }
}
.frag-plan .ln { fill: none; stroke: var(--blue); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: plan 14s var(--ease) infinite; animation-delay: var(--d, 0s); opacity: .8; }
.frag-plan .ln.thin { stroke-width: .8; opacity: .5; }
.frag-plan .dash { fill: none; stroke: var(--blue); stroke-width: .9; stroke-dasharray: 5 6; opacity: 0; animation: fade 14s var(--ease) infinite; animation-delay: var(--d, 0s); }
.frag-plan text { font-family: var(--f-mono); font-size: 12px; fill: var(--blue); opacity: 0; animation: fade 14s var(--ease) infinite; animation-delay: var(--d, 0s); }
@keyframes plan { 0% { stroke-dashoffset: 1; } 18% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: -1; } }
@keyframes fade { 0%, 12% { opacity: 0; } 24%, 76% { opacity: .8; } 92%, 100% { opacity: 0; } }

/* ---------- sections ---------- */
.sec { padding: clamp(96px, 12vw, 180px) var(--gutter); position: relative; }
.sec[id] { scroll-margin-top: 72px; }
.nw { white-space: nowrap; }
.sec-in { max-width: 1440px; margin: 0 auto; }
.big { font-family: var(--f-disp); font-weight: 500; font-size: clamp(2.8rem, 1.2rem + 5.4vw, 7.2rem); line-height: 1; letter-spacing: -.03em; }
.big > span { display: block; width: fit-content; }
.two { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.col-media { display: grid; gap: clamp(32px, 4vw, 56px); min-width: 0; }
.ph-think { width: min(100%, 560px); }
.ph-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(12px, 1.6vw, 20px); align-items: end; max-width: 620px; }
.ph-pair .ph-b { margin-bottom: 18%; }
.prose { display: grid; gap: 22px; max-width: 34em; }
.prose .lead { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.75; letter-spacing: .08em; }
.prose p { color: var(--muted); }
.phil { display: grid; margin-top: 16px; border-top: 1px solid var(--line-strong); }
.phil li { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--fg); }
.phil li span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); padding-top: 4px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin-top: 8px; border-top: 1px solid var(--line-strong); }
.facts dt, .facts dd { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { padding-right: 28px; }
.facts dd { color: var(--muted); }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* workflow */
.flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line-strong); }
.flow li { list-style: none; padding: 18px 14px 24px 0; display: grid; gap: 10px; align-content: start; position: relative; min-width: 0; }
.flow li + li { padding-left: 14px; border-left: 1px solid var(--line); }
.flow .phd { margin-bottom: 6px; aspect-ratio: auto; height: clamp(96px, 8.4vw, 132px); }
.flow .no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.flow h3 { font-size: 15px; font-weight: 700; line-height: 1.6; }
.flow p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.flow-note { margin-top: 18px; font-size: 13px; color: var(--muted); }
.flow-note a { color: var(--fg); }
@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .flow li, .flow li + li { border-left: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; }
  .flow .phd { grid-row: 1 / span 3; margin: 0; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } .flow li, .flow li + li { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; } }

/* ---------- projects: shared ---------- */
.proj-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.proj-tools { display: grid; gap: 10px; justify-items: end; }
.proj-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.proj-count b { color: var(--fg); font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.filters button { font: 500 14px/1.4 var(--f-disp); color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.filters button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.pj-viewport { max-width: 1440px; margin: clamp(40px, 5vw, 72px) auto 0; }
.pj { position: relative; display: block; text-decoration: none; color: inherit; min-width: 0; }
.pj.hide { display: none !important; }
.pj-fig { position: relative; }
.pj .ph { position: relative; overflow: hidden; background: var(--ph); aspect-ratio: 4 / 3; }
.pj .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pj-no, .pj-year { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.pj-name { font-family: var(--f-disp); font-weight: 500; letter-spacing: -.005em; line-height: 1.12; }
.pj-cat, .pj-scope { font-size: 13px; line-height: 1.6; color: var(--muted); }
.pj-go { font-family: var(--f-disp); font-size: 12px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.pj-dim, .pj-ruler { display: none; }
/* registration marks around the image */
.mk { position: absolute; inset: -7px; pointer-events: none; opacity: .55; transition: inset .7s var(--ease), opacity .5s var(--ease); --c: var(--blue); --s: 12px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--s) no-repeat; }
.pj:hover .mk, .pj:focus-visible .mk { inset: -13px; opacity: 1; }
.pj:hover .ph img { transform: scale(1.045); }

/* ---------- pattern 4: three columns ---------- */
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(56px, 5vw, 88px) clamp(20px, 2.4vw, 36px); }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj { display: grid; gap: 20px; align-content: start; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: baseline; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-no { grid-column: 1; grid-row: 1; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-year { grid-column: 2; grid-row: 1; justify-self: end; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-name { grid-column: 1 / -1; font-size: clamp(1.3rem, .95rem + .9vw, 1.9rem); position: relative; padding-bottom: 8px; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-name span { display: block; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj:hover .pj-name::after, html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj:focus-visible .pj-name::after { transform: scaleX(1); }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-cat { grid-column: 1; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-go { grid-column: 2; grid-row: 3; justify-self: end; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj-scope { grid-column: 1 / -1; }
html.js:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .pj[data-reveal] { transition-delay: calc(var(--col, 0) * .12s); }
@media (max-width: 1100px) { html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .projects { grid-template-columns: 1fr; } }

/* ---------- pattern 5: interactive index with cursor preview ---------- */
html[data-p="5"] .projects { border-top: 1px solid var(--line-strong); }
html[data-p="5"] .pj { display: grid; grid-template-columns: 3.6em minmax(0, 2.5fr) minmax(0, 1.1fr) minmax(0, 1.6fr) 4.5em 7.5em; column-gap: 18px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: opacity .5s var(--ease); }
html[data-p="5"] .pj::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
html[data-p="5"] .pj:hover::after, html[data-p="5"] .pj:focus-visible::after { transform: scaleX(1); }
html[data-p="5"] .pj-fig { display: none; }
html[data-p="5"] .pj-body { display: contents; }
html[data-p="5"] .pj-name { font-size: clamp(1.5rem, .9rem + 1.7vw, 2.7rem); line-height: 1.15; transition: transform .7s var(--ease); }
html[data-p="5"] .pj:hover .pj-name, html[data-p="5"] .pj:focus-visible .pj-name { transform: translateX(14px); }
html[data-p="5"] .pj-year { text-align: right; }
html[data-p="5"] .pj-go { text-align: right; transition: color .4s; }
html[data-p="5"] .pj:hover .pj-go { color: var(--fg); }
@media (hover: hover) and (min-width: 901px) {
  html[data-p="5"] .projects:hover .pj:not(:hover) { opacity: .38; }
}
.pj-preview { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(280px, 26vw, 400px); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; will-change: transform; }
.pj-preview.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.pj-preview::before { content: ""; position: absolute; inset: -9px -9px auto -9px; height: calc(100% - 22px); border: 1px solid var(--blue); }
.pv-in { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ph); clip-path: inset(50% 0 50% 0); transition: clip-path .7s var(--ease); }
.pj-preview.on .pv-in { clip-path: inset(0); }
.pv-in img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1s var(--ease); }
.pj-preview.on .pv-in img { transform: scale(1); }
.pv-k { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 400 10.5px/1.4 var(--f-mono); letter-spacing: .08em; color: var(--blue); }
@media (max-width: 900px), (hover: none) {
  html[data-p="5"] .pj { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 18px 0; }
  html[data-p="5"] .pj-fig { display: block; grid-column: 1; grid-row: 1 / span 4; }
  html[data-p="5"] .pj-fig .mk { display: none; }
  html[data-p="5"] .pj-no, html[data-p="5"] .pj-name, html[data-p="5"] .pj-cat, html[data-p="5"] .pj-scope { grid-column: 2; }
  html[data-p="5"] .pj-name { font-size: 1.25rem; }
  html[data-p="5"] .pj-year, html[data-p="5"] .pj-go { display: none; }
  html[data-p="5"] .pj:hover .pj-name { transform: none; }
  .pj-preview { display: none; }
}

/* ---------- pattern 6: horizontal drawing board ---------- */
html[data-p="6"] .pj-dim { display: block; position: relative; height: 13px; margin-bottom: 12px; color: var(--blue); }
html[data-p="6"] .pj-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: currentColor; }
html[data-p="6"] .pj-dim::after { content: ""; position: absolute; inset: 0; border-inline: 1px solid currentColor; }
html[data-p="6"] .pj-dim b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 8px; background: var(--bg); font: 400 10.5px/1 var(--f-mono); letter-spacing: .08em; }
html[data-p="6"] .pj-no { display: none; }
html[data-p="6"] .pj-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; margin-top: 16px; align-items: baseline; }
html[data-p="6"] .pj-name { grid-column: 1; font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem); }
html[data-p="6"] .pj-name span { display: block; }
html[data-p="6"] .pj-year { grid-column: 2; grid-row: 1; }
html[data-p="6"] .pj-cat, html[data-p="6"] .pj-scope { grid-column: 1 / -1; font-size: 12px; }
html[data-p="6"] .pj-go { grid-column: 1 / -1; }
html[data-p="6"] .pj-ruler { display: flex; align-items: center; gap: 20px; }
.pr-bar { position: relative; flex: 1; height: 22px; color: var(--fg);
  background:
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 120px) left bottom / 100% 14px no-repeat; opacity: .75; }
.pr-bar i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--pr, 0)); }
.pr-k { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.pr-k .pr-n { color: var(--fg); }
.pr-hint { margin-left: 14px; transition: opacity .4s; }
.pr-hint::after { content: "Scroll →"; }
.pj-ruler.at-end .pr-hint { opacity: 0; }
@media (max-width: 900px) { .pr-hint::after { content: "Swipe →"; } }

@media (min-width: 901px) {
  html[data-p="6"] #projects { padding-inline: 0; padding-bottom: clamp(48px, 6vw, 96px); scroll-margin-top: 0; }
  html[data-p="6"] .pj-pin { height: var(--pin-h, 300vh); }
  html[data-p="6"] .pj-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 20px; padding: 92px 0 26px; }
  html[data-p="6"] .proj-head { width: 100%; max-width: none; padding-inline: var(--gutter); }
  html[data-p="6"] .proj-head .big { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5.4rem); }
  html[data-p="6"] .pj-viewport { max-width: none; margin: 0; overflow: hidden; display: flex; align-items: safe center; min-height: 0; }
  html[data-p="6"] .projects { display: flex; align-items: flex-start; gap: clamp(56px, 6vw, 112px); width: max-content; padding-inline: var(--gutter) 30vw; will-change: transform; }
  html[data-p="6"] .pj { flex: none; --h: clamp(200px, 42vh, 460px); width: calc(var(--h) * 4 / 3); }
  html[data-p="6"] .pj.sm { --h: clamp(170px, 31vh, 330px); width: max(200px, calc(var(--h) * 4 / 5)); margin-top: clamp(24px, 7vh, 90px); }
  html[data-p="6"] .pj-name span { white-space: nowrap; }
  html[data-p="6"] .pj .ph { height: var(--h); aspect-ratio: auto; }
  html[data-p="6"] .pj-ruler { padding-inline: var(--gutter); }
  html.js[data-p="6"] .pj[data-reveal] { transform: none; opacity: 1; }
}
@media (min-width: 901px) and (max-height: 700px) {
  html[data-p="6"] .pj-sticky { padding-top: 76px; row-gap: 12px; }
  html[data-p="6"] .pj { --h: clamp(170px, 34vh, 400px); }
  html[data-p="6"] .pj.sm { --h: clamp(150px, 26vh, 300px); margin-top: 3vh; }
  html[data-p="6"] .proj-head .big { font-size: clamp(2.2rem, 1rem + 3vw, 4rem); }
  html[data-p="6"] .pj-cat, html[data-p="6"] .pj-scope { display: none; }
}
@media (max-width: 900px) {
  html[data-p="6"] .pj-viewport { margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  html[data-p="6"] .pj-viewport::-webkit-scrollbar { display: none; }
  html[data-p="6"] .projects { display: flex; gap: 18px; width: max-content; padding-inline: var(--gutter); }
  html[data-p="6"] .pj { flex: none; width: 76vw; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  html[data-p="6"] .pj.sm { width: 60vw; }
  html[data-p="6"] .pj.sm .ph { aspect-ratio: 4 / 5; }
  html[data-p="6"] .pj-ruler { margin-top: 26px; }
  html.js[data-p="6"] .pj[data-reveal] { transform: none; opacity: 1; }
}

/* ---------- contact ---------- */
.contact-ways { display: grid; border-top: 1px solid var(--line-strong); }
.contact-ways > * { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-ways .v { font-family: var(--f-mono); font-size: 14px; user-select: all; }
.contact-ways a:hover .k { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- footers (one per pattern) ---------- */
.foot { display: none; }
html:is([data-p="4"],:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"])) .fa, html[data-p="5"] .fb, html[data-p="6"] .fc { display: block; }
.foot-wrap { max-width: 1440px; margin: 0 auto; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; font-size: 12px; color: var(--muted); }
.foot-base a { text-decoration: none; }
.foot-base a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-base small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; }
.totop { margin-left: auto; background: none; border: 1px solid currentColor; padding: 8px 14px; font: 500 12px/1 var(--f-disp); letter-spacing: .06em; cursor: pointer; }
.totop:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.note { display: block; font-size: 12px; color: var(--muted); }

/* A: logo drawn from guide lines */
.fa { padding: clamp(64px, 7vw, 104px) var(--gutter) 28px; border-top: 1px solid var(--line-strong); }
.fa-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.fa-cols .label { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.fa-cols ul { display: grid; gap: 6px; }
.fa-cols li { list-style: none; font-size: 14px; }
.fa-cols li a { text-decoration: none; }
.fa-cols li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fa-cols address { font-style: normal; font-size: 14px; line-height: 1.8; }
.fa-logo { margin: clamp(56px, 7vw, 112px) 0 clamp(24px, 3vw, 40px); }
.fa-logo .build { width: 100%; max-width: none; }
.fa-logo .build .guide { stroke: var(--blue); opacity: .8; }
.fa-logo .build .guide-label { fill: var(--blue); }
.fa .foot-base { border-top: 1px solid var(--line); padding-top: 20px; }
@media (max-width: 900px) { .fa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 600px) { .fa-logo .build .guide-label { display: none; } }
@media (max-width: 480px) { .fa-cols { grid-template-columns: 1fr; } }

/* B: drawing title block */
.fb { padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(32px, 4vw, 56px); }
.tb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 1px solid var(--fg); background: color-mix(in srgb, var(--bg) 70%, transparent); outline: 1px solid var(--fg); outline-offset: 6px; margin: 7px; }
.tb .c { position: relative; display: grid; align-content: start; gap: 6px; padding: 12px 14px 14px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); min-width: 0; }
.tb .k { font: 400 10px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tb .k i { font-family: var(--f-jp); font-style: normal; letter-spacing: .06em; margin-left: 8px; }
.tb .v { font-size: 14px; line-height: 1.6; font-style: normal; overflow-wrap: anywhere; }
.tb .v small { display: block; font-size: 11px; color: var(--muted); }
.tb .c-title { grid-column: 1 / span 8; grid-row: 1 / span 2; padding-bottom: 22px; }
.tb .ttl { font-family: var(--f-disp); font-weight: 500; font-size: clamp(2.2rem, 1rem + 4vw, 5.6rem); line-height: 1.02; letter-spacing: -.03em; margin-top: 18px; }
.tb .ttl > span { display: block; width: fit-content; }
.tb .jp { font-weight: 700; letter-spacing: .1em; margin-top: 8px; }
.tb .c-logo { grid-column: 9 / span 4; grid-row: 1 / span 2; border-right: 0; display: grid; place-items: center; padding: 28px; }
.tb .c-logo .logo { width: min(240px, 80%); }
.tb .c-office { grid-column: 1 / span 3; }
.tb .c-addr { grid-column: 4 / span 5; }
.tb .c-base { grid-column: 9 / span 4; border-right: 0; }
.tb .c-tel { grid-column: 1 / span 3; }
.tb .c-contact { grid-column: 4 / span 3; }
.tb .c-contact .v { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tb .c-index { grid-column: 7 / span 6; border-right: 0; }
.tb .c-index .v { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--f-disp); font-weight: 500; }
.tb .c-scale { grid-column: 1 / span 2; border-bottom: 0; }
.tb .c-date { grid-column: 3 / span 2; border-bottom: 0; }
.tb .c-sheet { grid-column: 5 / span 2; border-bottom: 0; }
.tb .c-sheet .v { color: var(--blue); font-family: var(--f-mono); }
.tb .c-scale .v, .tb .c-date .v { font-family: var(--f-mono); }
.tb .c-copy { grid-column: 7 / span 6; border-right: 0; border-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 12px; color: var(--muted); }
.tb .c-copy small { font-family: var(--f-mono); font-size: 11px; }
.tb a { text-decoration: none; }
.tb a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "title title" "logo logo" "office base" "addr addr" "tel contact" "index index" "scale date" "sheet sheet" "copy copy"; }
  .tb .c { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .tb .c-title { grid-area: title; } .tb .c-logo { grid-area: logo; } .tb .c-office { grid-area: office; } .tb .c-base { grid-area: base; }
  .tb .c-addr { grid-area: addr; } .tb .c-tel { grid-area: tel; } .tb .c-contact { grid-area: contact; } .tb .c-index { grid-area: index; }
  .tb .c-scale { grid-area: scale; } .tb .c-date { grid-area: date; } .tb .c-sheet { grid-area: sheet; } .tb .c-copy { grid-area: copy; border-bottom: 0; }
  .tb .c-office, .tb .c-tel, .tb .c-scale { border-right: 1px solid var(--line-strong); }
  .tb .c-logo { place-items: start; padding: 18px 14px; }
  .tb .c-logo .logo { width: 140px; }
}

/* C: dark panel with a scale ruler */
.fc { --fc-fg: #e4e4e4; --fc-muted: #a0a3aa; background-color: var(--panel); color: var(--fc-fg);
  background-image: linear-gradient(rgba(228, 228, 228, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(228, 228, 228, .05) 1px, transparent 1px); background-size: 24px 24px;
  padding: clamp(64px, 7vw, 104px) var(--gutter) 28px; }
.fc .label, .fc .jl, .fc .note, .fc .foot-base, .fc .jp { color: var(--fc-muted); }
.fc-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.fc .clock { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.fc .clock b { font: 500 clamp(3.4rem, 2rem + 4vw, 6.6rem)/1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fc .clock b .c { font: inherit; animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.fc .clock > span { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--fc-muted); }
.fc-nav { display: grid; gap: 2px; }
.fc-nav a { font: 500 22px/1.4 var(--f-disp); text-decoration: none; width: max-content; }
.fc-nav .jp { font: 400 11px/1 var(--f-jp); margin-left: 8px; letter-spacing: .08em; }
.fc-contact { display: grid; gap: 8px; font-size: 14px; }
.fc-contact a { text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid rgba(228, 228, 228, .2); }
.fc-contact a:hover { border-bottom-color: var(--fc-fg); }
.fc-contact p { font-family: var(--f-mono); }
.fc-ruler { --mm: 3.7795px; position: relative; height: 64px; margin: clamp(56px, 6vw, 96px) 0 24px; cursor: crosshair; color: var(--fc-fg); touch-action: pan-y;
  background:
    linear-gradient(currentColor, currentColor) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(228, 228, 228, .9) 0 1px, transparent 1px calc(var(--mm) * 50)) left top / 100% 26px no-repeat,
    repeating-linear-gradient(90deg, rgba(228, 228, 228, .6) 0 1px, transparent 1px calc(var(--mm) * 10)) left top / 100% 16px no-repeat,
    repeating-linear-gradient(90deg, rgba(228, 228, 228, .35) 0 1px, transparent 1px calc(var(--mm) * 2)) left top / 100% 8px no-repeat; }
.fc-ruler .nums span { position: absolute; top: 30px; transform: translateX(-50%); font: 400 10px/1 var(--f-mono); color: var(--fc-muted); }
.fc-ruler .nums span:first-child { transform: none; }
.fc-ruler .cur { position: absolute; top: -10px; bottom: 0; left: 0; width: 1px; background: #8fa6ff; opacity: 0; transition: opacity .3s; pointer-events: none; }
.fc-ruler.on .cur { opacity: 1; }
.fc-ruler .cur em { position: absolute; top: 48px; left: 8px; font: 500 11px/1 var(--f-mono); font-style: normal; color: #8fa6ff; white-space: nowrap; }
.fc-ruler .cur.flip em { left: auto; right: 8px; }
.fc .foot-base { border-top: 1px solid rgba(228, 228, 228, .2); padding-top: 22px; }
.fc .foot-base .logo { width: 92px; color: var(--fc-fg); }
.fc .foot-base address { font-style: normal; }
.fc .totop:hover { background: var(--fc-fg); color: var(--panel); border-color: var(--fc-fg); }
.fc :focus-visible { outline-color: #8fa6ff; }
@media (max-width: 900px) { .fc-top { grid-template-columns: 1fr; } }

/* ---------- top bar ---------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line); }
.bar .logo { width: 88px; }
.bar nav { display: flex; gap: 22px; font-family: var(--f-disp); font-size: 15px; font-weight: 500; }
.bar nav a { text-decoration: none; }
.topbar { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-110%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s; }
.topbar.show { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }

/* ---------- case study ---------- */
.cs-top { padding: clamp(56px, 8vw, 120px) var(--gutter) 0; }
.cs-top .sec-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.cs-name { font-family: var(--f-disp); font-weight: 500; font-size: clamp(4.4rem, 2rem + 10vw, 13rem); line-height: .92; letter-spacing: -.045em; }
.cs-name > span { display: block; width: fit-content; }
.cs-lead { margin-top: 26px; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); font-weight: 700; letter-spacing: .08em; line-height: 1.75; }
.cs-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.cs-meta dt, .cs-meta dd { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cs-meta dt { font-family: var(--f-disp); font-size: 11px; letter-spacing: .12em; color: var(--muted); padding-right: 32px; text-transform: uppercase; }
.cs-cover { margin: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.cs-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; outline: 1px solid var(--line); outline-offset: 10px; }
@media (max-width: 900px) { .cs-top .sec-in { grid-template-columns: 1fr; } .cs-cover img { aspect-ratio: 4 / 3; } }

.chap { padding: clamp(96px, 11vw, 160px) var(--gutter); position: relative; }
.chap-k { display: flex; gap: 16px; align-items: baseline; margin-bottom: 20px; }
.chap-k b { display: block; font-family: var(--f-disp); font-weight: 500; font-size: clamp(2.6rem, 1.2rem + 4vw, 5.4rem); line-height: 1.02; letter-spacing: -.03em; }
.chap-k span { font-size: 14px; color: var(--muted); }
.chap h2 { font-size: clamp(1.45rem, 1rem + 1.6vw, 2.4rem); line-height: 1.55; letter-spacing: .06em; max-width: 20em; }
.why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 5vw, 64px); }
.why-media { display: grid; gap: 28px; align-content: start; }
.why-media .phd { width: 72%; justify-self: end; }
.why figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.why .phd figcaption { margin-top: 0; color: var(--ph-ink); }
.issues { border-top: 1px solid var(--line-strong); counter-reset: is; }
.issues li { list-style: none; display: grid; grid-template-columns: 3em minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--line); }
.issues li::before { counter-increment: is; content: counter(is, decimal-leading-zero); font-family: var(--f-mono); font-size: 11px; color: var(--muted); padding-top: 4px; }
.issues h3 { font-size: 16px; line-height: 1.6; }
.issues p { grid-column: 2; color: var(--muted); font-size: 14px; }
.draft { display: inline-block; margin-top: 18px; font-size: 12px; color: var(--muted); border: 1px dashed var(--line-strong); padding: 6px 10px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }

.how-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 5vw, 72px); }
.plan-wrap { position: sticky; top: 84px; align-self: start; height: calc(100dvh - 110px); max-height: 840px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
.plan { width: 100%; height: 100%; color: var(--fg); overflow: visible; }
.plan .w { stroke: currentColor; stroke-width: 1.6; fill: none; }
.plan .t { stroke: currentColor; stroke-width: .9; fill: none; opacity: .55; }
.plan .d { stroke: currentColor; stroke-width: .8; fill: none; stroke-dasharray: 4 5; opacity: .45; }
.plan .txt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; fill: var(--muted); }
.plan .key circle { fill: var(--bg); stroke: currentColor; stroke-width: .9; }
.plan .key text { font-family: var(--f-disp); font-size: 10px; fill: currentColor; text-anchor: middle; dominant-baseline: central; }
.plan .grp { transition: opacity .6s var(--ease), color .6s var(--ease); }
.plan[data-step] .grp.hl { opacity: .2; }
.plan[data-step="1"] .g1.hl, .plan[data-step="2"] .g2.hl, .plan[data-step="3"] .g3.hl { opacity: 1; color: var(--blue); }
.plan[data-step="1"] .g1 .w, .plan[data-step="2"] .g2 .w, .plan[data-step="3"] .g3 .w { stroke-width: 2.6; }
.plan[data-step="1"] .g1 .t, .plan[data-step="2"] .g2 .t, .plan[data-step="3"] .g3 .t, .plan[data-step="1"] .g1 .d, .plan[data-step="3"] .g3 .d { opacity: .95; }
.plan[data-step="1"] .k1 circle, .plan[data-step="2"] .k2 circle, .plan[data-step="3"] .k3 circle { fill: var(--blue); stroke: var(--blue); }
.plan[data-step="1"] .k1 text, .plan[data-step="2"] .k2 text, .plan[data-step="3"] .k3 text { fill: #ffffff; }
.js .plan .w, .js .plan .t { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .plan.drawn .w, .js .plan.drawn .t { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease); }
.steps { display: grid; }
.step { min-height: 80dvh; display: grid; align-content: center; gap: 16px; padding-block: 40px; border-top: 1px solid var(--line); opacity: .4; transition: opacity .6s var(--ease); }
.step.on { opacity: 1; }
.step .no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.step h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.55; }
.step p { color: var(--muted); max-width: 30em; }
.step-media { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: end; }
.step-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.concept { margin-top: 22px; color: var(--muted); max-width: 34em; }
@media (max-width: 560px) { .step-media { grid-template-columns: 1fr; } .step-media .phd { width: 64%; justify-self: end; } }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; }
  .plan-wrap { top: 58px; height: 32dvh; z-index: 2; background: var(--bg); padding-block: 6px; }
  .step { min-height: auto; padding-block: 44px; }
}

.ba { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface); margin-top: clamp(36px, 5vw, 64px); --x: 50%; outline: 1px solid var(--line); outline-offset: 10px; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--x)); }
.ba .bar-x { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: #fff; pointer-events: none; }
.ba .bar-x::after { content: "BEFORE  |  AFTER"; white-space: pre; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 500 11px/1 var(--f-disp); letter-spacing: .14em; background: #fff; color: #121314; padding: 9px 12px; }
.ba:focus-within .bar-x::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-cap { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.gal img { width: 100%; height: auto; object-fit: cover; }
.gal .a { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.gal .b { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.gal .c { grid-column: 2 / span 5; aspect-ratio: 4 / 5; }
.gal .d { grid-column: 7 / span 6; aspect-ratio: 3 / 2; margin-top: 18%; }
.ph-movie { margin-top: clamp(40px, 6vw, 80px); }
@media (max-width: 760px) { .gal { grid-template-columns: 1fr 1fr; } .gal > * { grid-column: span 2 !important; aspect-ratio: 3 / 2 !important; margin-top: 0 !important; } }

.role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); padding-top: 22px; }
.role ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.role li { list-style: none; }
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); }
.next a { display: grid; gap: 12px; padding: 26px 0; text-decoration: none; align-content: start; }
.next a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.next b { display: block; width: fit-content; font-family: var(--f-disp); font-weight: 500; font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
@media (max-width: 760px) { .role, .next { grid-template-columns: 1fr; } .next a + a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- page transition curtain & opening ---------- */
.pt { position: fixed; inset: 0; z-index: 90; background-color: var(--panel); color: var(--panel-fg); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; visibility: hidden;
  background-image: linear-gradient(rgba(228, 228, 228, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(228, 228, 228, .07) 1px, transparent 1px); background-size: 24px 24px; }
.pt .logo { width: 120px; }
html.pt-enter .pt, html.pt-leave .pt { visibility: visible; }
html.pt-enter .pt { transform: translateY(0); }
html.pt-enter.pt-go .pt { transform: translateY(-100%); transition: transform .9s var(--ease) .1s; }
html.pt-leave .pt { transform: translateY(0); transition: transform .7s var(--ease); pointer-events: auto; }

.opening { position: fixed; inset: 0; z-index: 95; background-color: var(--bg); color: var(--fg); display: grid; place-items: center; transition: transform 1s var(--ease), visibility 0s 1s;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.opening.gone { transform: translateY(-100%); visibility: hidden; }
.opening[hidden] { display: none !important; }
.build { width: min(820px, 84vw); }
.build svg { width: 100%; height: auto; overflow: visible; display: block; }
.build .guide { stroke: var(--blue); stroke-width: .12; fill: none; opacity: .8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease), opacity 1s var(--ease); }
.build .guide-label { font-family: var(--f-mono); font-size: 2px; letter-spacing: .02em; fill: var(--blue); opacity: 0; transition: opacity .8s .4s var(--ease); }
.build .glyph { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: .16; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease); }
.build.g-in .guide { stroke-dashoffset: 0; }
.build.g-in .guide-label { opacity: .8; }
.build.p-in .glyph { stroke-dashoffset: 0; }
.build.done .glyph { fill-opacity: 1; stroke-opacity: 0; transition: fill-opacity .8s var(--ease), stroke-opacity .8s var(--ease); }
.build.done .guide { opacity: .3; }

/* ---------- reveal ---------- */
.js [data-reveal] { transform: translateY(28px); opacity: .001; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
.js [data-reveal].in { transform: none; opacity: 1; }

/* ---------- pattern switcher (prototype only) ---------- */
.pswitch { position: fixed; top: 14px; right: 14px; z-index: 80; display: flex; gap: 4px; align-items: center; padding: 6px; background: #15171c; color: #e9ecf2; border: 1px solid rgba(233,236,242,.25); font: 500 12px/1 var(--f-jp); box-shadow: 0 10px 30px rgba(5, 8, 20, .3); }
.pswitch .t { padding: 0 6px; color: #9aa2b2; font-size: 11px; }
.pswitch button { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.pswitch button[aria-pressed="true"] { background: #e9ecf2; color: #15171c; }
.pswitch button:hover { border-color: rgba(233,236,242,.45); }
.pswitch .replay, .pswitch .min { border-left: 1px solid rgba(233,236,242,.25); margin-left: 2px; }
.pswitch.collapsed > :not(.min) { display: none; }
.pswitch.collapsed { padding: 4px; }
/* inside the band of the top bar, next to the logo */
@media (min-width: 901px) {
  .pswitch.in-bar { top: 12px; bottom: auto; left: calc(var(--gutter) + 116px); right: auto; padding: 3px; box-shadow: none; font-size: 11px; }
  .pswitch.in-bar button { padding: 7px 9px; }
  .pswitch.in-bar .t { display: none; }
}
@media (max-width: 900px) { .foot { padding-bottom: 88px !important; } }

/* ---------- mobile ---------- */
.menu-btn { display: none; }
@media (max-width: 900px) {
  :root { --navw: 0px; }
  .hero { grid-template-columns: 1fr; }
  .hero-side { position: absolute; inset: 0 0 auto 0; padding: 18px var(--gutter); flex-direction: row; align-items: center; justify-content: space-between; z-index: 5; }
  .hero-side .side-wrap { display: none; }
  .hero-side.open .side-wrap { display: grid; position: fixed; inset: 0; background: var(--bg); padding: 96px var(--gutter) 40px; align-content: start; gap: 24px; z-index: 6; overflow-y: auto; }
  .side-logo { width: 84px; order: -1; position: relative; z-index: 7; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .menu-btn { display: inline-block; position: relative; z-index: 7; font: 500 13px/1 var(--f-jp); color: var(--fg); background: transparent; border: 1px solid var(--line-strong); padding: 10px 14px; }
  .hero-main { padding: 104px var(--gutter) 28px; }
  .hero-copy { align-self: end; }
  .hero-foot { justify-content: flex-start; margin-top: 36px; }
  .frag-outline, .frag-plan { opacity: .45; }
  .pswitch { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: 50%; transform: translateX(50%); }
  .pswitch .t { display: none; }
  .pswitch.collapsed { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: 12px; transform: none; }
  .pswitch.collapsed.at-hero { top: 16px; bottom: auto; right: 50%; transform: translateX(50%); }
  .pswitch.collapsed .min { padding: 7px 10px; }
  .bar nav { gap: 14px; font-size: 13px; }
  .bar nav .jl, .bar nav .wide { display: none; }
  .proj-tools { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { transform: none; opacity: 1; }
  .frag-plan .ln { stroke-dashoffset: 0; animation: none; }
  .frag-plan .dash, .frag-plan text { opacity: .8; animation: none; }
  .frag-outline .f { animation: none; }
  .js .plan .w, .js .plan .t { stroke-dashoffset: 0; }
  .step { opacity: 1; }
  .pv-in { clip-path: none; }
}

/* ---------- pattern 7: white paper, 30% grey grid, the headline drawn as a type specimen ---------- */
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) { --bg: #ffffff; --surface: #f1f1f1; --grid: transparent; --g15: #d9d9d9; --gx: min(28px, calc(var(--gutter) - 4px)); --line: rgba(18, 19, 20, .22); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) body { overflow-x: clip; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .frag-plan, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .frag-outline { display: none; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) [data-typedraw] > .rl { display: none !important; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero h1 { line-height: .96; letter-spacing: -.04em; position: relative; z-index: 1; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero-copy { gap: clamp(56px, 7vh, 88px); }
@media (min-width: 901px) {
  html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero h1 > span:not(.rl) { display: inline; }
  html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero h1 > span:nth-child(1)::after { content: " "; }
  html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero h1 > span:nth-child(2)::after { content: "\A"; white-space: pre; }
}
html.js:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) [data-typedraw] > span:not(.rl) { color: transparent; -webkit-text-stroke: 1.5px var(--fg); transition: color 1.1s var(--ease); }
html.js:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) [data-typedraw].td-fill > span:not(.rl) { color: var(--fg); }
html.js:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .hero h1.td-fill > span:nth-child(2) { color: transparent; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .cs-top { position: relative; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .cs-name { margin-block: 52px 76px; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .cs-top .sec-in > div, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .cs-meta { position: relative; z-index: 4; }
.td { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .td { display: block; }
.td svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.td path { fill: none; stroke: var(--blue); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease), stroke .25s, stroke-width .25s; }
.td.on path { stroke-dashoffset: 0; }
.td path.g { stroke: #8b8e94; }
.td path.gb { stroke: var(--fg); }
.td path.e { stroke: #9a9da3; }
.td path.tk { stroke: var(--fg); }
.td path.c, .td path.an { opacity: .8; }
.td path.snap { stroke: var(--blue); stroke-width: 2px; }
.td text { font: 400 10.5px/1 var(--f-mono); letter-spacing: .06em; fill: var(--blue); opacity: 0; transition: opacity .8s var(--ease); }
.td text.gl { fill: var(--muted); }
.td.on text { opacity: 1; }
.td.now path, .td.now text { transition: none; }
.td-box { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 1px solid var(--blue); background: rgba(36, 72, 230, .07); opacity: 0; transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .4s; }
.td-box.on { opacity: 1; }
.td-box em { position: absolute; left: -1px; bottom: 100%; margin-bottom: 6px; padding: 4px 6px; font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .04em; color: var(--bg); background: var(--blue); white-space: pre; }
.td-cross { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.td-cross.on { opacity: 1; }
.td-cross i { position: absolute; background: var(--blue); opacity: .5; }
.td-cross .h { left: 0; right: 0; top: 0; height: 1px; }
.td-cross .v { top: 0; bottom: 0; left: 0; width: 1px; }
.td-cross em { position: absolute; left: 0; top: 0; padding: 4px 6px; font: 400 10.5px/1 var(--f-mono); font-style: normal; color: var(--blue); background: var(--bg); border: 1px solid var(--blue); white-space: pre; }
@media (max-width: 900px) { .td text { font-size: 9px; } .td text.gl { display: none; } .td-box em { font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .td path, .td text { transition: none !important; } .td-box { display: none; } }

/* pattern 7, round 2: no page grid; 15% grey guides only around objects */
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .mk { display: none; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .phd { overflow: visible; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) :is(.cs-cover, .why figure, .step-media, .gal, .contact-ways) { position: relative; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) :is(.phd, .pj-fig, .cs-cover, .why figure, .step-media, .gal, .contact-ways, .plan-wrap)::before {
  content: ""; position: absolute; inset: calc(-1 * var(--gx)); pointer-events: none; z-index: -1;
  background:
    linear-gradient(var(--g15), var(--g15)) 0 var(--gx) / 100% 1px no-repeat,
    linear-gradient(var(--g15), var(--g15)) 0 calc(100% - var(--gx)) / 100% 1px no-repeat,
    linear-gradient(var(--g15), var(--g15)) var(--gx) 0 / 1px 100% no-repeat,
    linear-gradient(var(--g15), var(--g15)) calc(100% - var(--gx)) 0 / 1px 100% no-repeat;
  clip-path: inset(50% 50%); transition: clip-path 1.3s var(--ease); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .gv::before { clip-path: inset(0); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .cs-cover img, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .ba { outline: 0; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .td path.g, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .td path.gb, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .td path.e, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .td path.tk { stroke: var(--g15); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .fa-logo .build .guide { stroke: var(--g15); opacity: 1; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .fa-logo .build .guide-label { fill: var(--muted); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .opening .build .guide { stroke: var(--g15); opacity: 1; }

/* pattern 7: big English headings set across the full width, letters that move */
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .two > .col-media, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) #contact .two > div:first-child { display: contents; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .two > .col-media > .big, html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) #contact .two .big { grid-column: 1 / -1; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .big { line-height: .98; letter-spacing: -.04em; margin-bottom: clamp(48px, 6vw, 96px); }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .big > span:not(.rl) { white-space: nowrap; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .proj-head { display: grid; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .proj-tools { justify-self: end; }
html.js:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .big[data-reveal] { transform: none; opacity: 1; }
html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .big .lt { display: inline-block; -webkit-text-stroke: 1.5px var(--fg);
  transform: translate3d(0, calc(var(--k, 0) * .62em - var(--h, 0) * .16em), 0) rotate(calc(var(--k, 0) * var(--r, 0deg)));
  color: rgb(var(--fg-rgb) / calc(1 - max(var(--k, 0), var(--h, 0) * .9)));
  transition: transform .55s var(--ease), color .45s var(--ease); }
html.td-measure .big .lt { transform: none !important; transition: none !important; }
html.td-measure :is([data-typedraw], [data-typedraw] *) { transition: none !important; }
@media (max-width: 900px) { html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .proj-tools { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .big .lt { transform: none; color: var(--fg); } html:is([data-p="7"],[data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) :is(.phd, .pj-fig, .cs-cover, .why figure, .step-media, .gal, .contact-ways, .plan-wrap)::before { clip-path: none; } }

/* ---------- patterns 10 (white) and 11 (dark): prism light behind the page (WebGL) ---------- */
body { font-synthesis-weight: none; }
.prism { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
html[data-p="10"] .prism, html[data-p="11"] .prism, html[data-p="12"] .prism, html[data-p="13"] .prism, html[data-p="14"] .prism, html[data-p="15"] .prism, html[data-p="16"] .prism { display: block; }
html.op-on:is([data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .prism { z-index: 94; }
html.op-on:is([data-p="10"],[data-p="11"],[data-p="12"],[data-p="13"],[data-p="14"],[data-p="15"],[data-p="16"]) .opening { background: transparent; }
html[data-p="11"] {
  --bg: #0a0c11; --surface: #12151c; --fg: #e9ecf2; --fg-rgb: 233 236 242; --muted: #9ba2b0;
  --line: rgba(233, 236, 242, .16); --line-strong: rgba(233, 236, 242, .55); --g15: rgba(233, 236, 242, .15);
  --blue: #8fa6ff; --accent: #8fa6ff; --ph: #1d2028; --ph-ink: #a3aab7; --panel: #05070b; color-scheme: dark;
}
html[data-p="11"] .plan .key text { fill: #0a0c11; }
html[data-p="11"] .opening .build .guide { stroke: rgba(233, 236, 242, .22); }
html[data-p="11"] .opening .build .guide-label { fill: rgba(233, 236, 242, .55); }

/* ===================== pattern 14 ===================== */
/* works: one-line names at one shared size (set by script) */
html:is([data-p="14"],[data-p="15"],[data-p="16"]) .pj-name { font-size: var(--pjfs, clamp(1.3rem, .95rem + .9vw, 1.9rem)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is([data-p="14"],[data-p="15"],[data-p="16"]) .pj-name span { display: inline; }

/* six footers; the logo is small, never the subject */
html:is([data-p="14"],[data-p="15"],[data-p="16"]) .fa { display: none; }
html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="1"] .f1, html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="2"] .f2, html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="3"] .f3,
html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="4"] .f4, html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="5"] .f5, html:is([data-p="14"],[data-p="15"],[data-p="16"])[data-ft="6"] .f6 { display: block; }
.f14 { position: relative; padding: clamp(96px, 12vw, 180px) var(--gutter) 28px; color: var(--fg); }
.f14 .label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.f14 .label .jl { margin-left: 10px; letter-spacing: .08em; }
.f14 a { color: inherit; text-decoration: none; }
.f14 address { font-style: normal; font-size: 14px; line-height: 1.8; }
.f14 .note { font-size: 12px; color: var(--muted); }
.f14 .f-ways { display: grid; gap: 10px; font-size: 14px; }
.f14 .f-ways a:hover, .f14 .f-inline a:hover, .f14 .f-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.f14 .f-ways p { display: grid; gap: 2px; margin-top: 4px; }
.f14 .f-ways .sel { font: 500 15px/1.4 var(--f-mono); letter-spacing: .04em; }
.f14 .f-inline { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 15px/1.4 var(--f-disp); }
.f14 .f-col { display: grid; gap: 8px; font: 500 15px/1.4 var(--f-disp); }
.f14 .jl { font: 400 11px/1 var(--f-jp); color: var(--muted); margin-left: 8px; letter-spacing: .06em; }
.f14 .f-baserow { display: flex; align-items: center; gap: 24px; margin-top: clamp(56px, 7vw, 96px); padding-top: 20px; border-top: 1px solid var(--line); }
.f14 .f-baserow .foot-base { flex: 1; }
.f14 .f-mini { display: block; width: 84px; flex: none; color: var(--fg); }
.f14 .f-mini svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* 1: a direct line to the first talk */
.f1-q { font: 500 clamp(2rem, 1.2rem + 3.4vw, 4.6rem)/1.22 var(--f-jp); letter-spacing: .02em; margin: 6px 0 clamp(40px, 5vw, 64px); }
.f1-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 16px; align-items: stretch; }
.f-btn { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 28px; border: 1px solid var(--line-strong); font: 500 clamp(1rem, .9rem + .4vw, 1.25rem)/1.3 var(--f-jp); transition: background .4s var(--ease), color .4s var(--ease); }
.f-btn i { font-style: normal; font-family: var(--f-disp); }
.f-btn:hover { background: var(--fg); color: var(--bg); }
.f1-tel { display: grid; align-content: center; gap: 4px; padding: 0 8px 0 20px; }
.f1-tel .sel { font: 500 clamp(1.2rem, 1rem + .6vw, 1.6rem)/1 var(--f-mono); }
.f14 .f-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; margin-top: clamp(48px, 6vw, 80px); align-items: start; }
/* 2: the sitemap as large type */
.f2-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.f2-list { display: grid; border-top: 1px solid var(--line); }
.f2-item { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto auto; align-items: baseline; gap: 18px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.f2-item .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.f2-item .en { font: 500 clamp(2rem, 1rem + 3.4vw, 4.4rem)/1.02 var(--f-disp); letter-spacing: -.03em; transition: transform .5s var(--ease); }
.f2-item .jp { font-size: 12px; color: var(--muted); }
.f2-item i { font-style: normal; font: 400 20px/1 var(--f-disp); opacity: 0; transform: translateX(-8px); transition: .4s var(--ease); }
.f2-item:hover .en { transform: translateX(14px); }
.f2-item:hover i { opacity: 1; transform: none; }
.f2-side { display: grid; gap: 14px; align-content: start; }
.f2-side .label:not(:first-child) { margin-top: 24px; }
/* 3: the office as a drawn position */
.f3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.f3-map svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.f3-map .g { fill: none; stroke: var(--g15); stroke-width: 1; }
.f3-map .m { fill: none; stroke: var(--fg); stroke-width: 1.2; }
.f3-map .m circle { fill: var(--fg); }
.f3-map text { font: 400 10px var(--f-mono); letter-spacing: .12em; fill: var(--muted); }
.f3-info { display: grid; gap: 22px; }
.f3-coord { display: flex; flex-wrap: wrap; gap: 0 .4em; font: 500 clamp(2.4rem, 1.2rem + 4vw, 5.6rem)/1 var(--f-disp); letter-spacing: -.03em; }
/* 4: the works keep moving past */
.f4 { padding-top: 0; }
.f4-strip { overflow: hidden; padding-block: clamp(56px, 7vw, 96px); margin-inline: calc(var(--gutter) * -1); }
.f4-track { display: flex; gap: 16px; width: max-content; animation: f4-run 60s linear infinite; }
.f4:hover .f4-track { animation-play-state: paused; }
.f4-card { display: grid; gap: 10px; width: clamp(200px, 20vw, 300px); }
.f4-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.f4-card span { font: 500 13px/1.3 var(--f-disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes f4-run { to { transform: translateX(-50%); } }
.f4-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.f4-lead { font: 500 clamp(1.3rem, 1rem + 1vw, 2rem)/1.5 var(--f-jp); }
/* 5: Rootfor in four facts */
.f5-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.f5-nums > div { display: grid; gap: 18px; padding: 26px 22px 30px; border-left: 1px solid var(--line); }
.f5-nums > div:first-child { border-left: 0; padding-left: 0; }
.f5-nums .k { font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.f5-nums .k i { font-style: normal; margin-left: 8px; letter-spacing: .06em; }
.f5-nums b { font: 500 clamp(2.6rem, 1.4rem + 4vw, 6rem)/1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.f5-nums b.jp { font: 500 clamp(1.4rem, 1rem + 1.4vw, 2.4rem)/1.2 var(--f-jp); letter-spacing: .02em; align-self: end; }
.f5-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 72px); }
/* 6: an index table */
.f6-head { display: flex; justify-content: space-between; gap: 16px; }
.f6-table { display: grid; border-top: 1px solid var(--line-strong); }
.f6-row { display: grid; grid-template-columns: 3em minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.6fr) 2em; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background .3s var(--ease), padding .4s var(--ease); }
.f6-row .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.f6-row .en { font: 500 clamp(1.3rem, 1rem + 1vw, 2rem)/1.1 var(--f-disp); letter-spacing: -.02em; }
.f6-row .jp, .f6-row .d { font-size: 13px; line-height: 1; color: var(--muted); padding-top: .08em; }
.f6-row .no { line-height: 1; }
.f6-row .en { line-height: 1; padding-bottom: .06em; }
.f6-row i { line-height: 1; }
.f6-row i { font-style: normal; justify-self: end; }
.f6-row:hover { background: rgb(var(--fg-rgb) / .06); padding-inline: 12px; }
.f6-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
@media (max-width: 900px) {
  .f1-cta, .f14 .f-row, .f2-grid, .f3-grid, .f5-grid, .f6-foot { grid-template-columns: 1fr; }
  .f1-tel { padding: 8px 0 0; }
  .f4-grid { grid-template-columns: 1fr 1fr; }
  .f4-lead { grid-column: 1 / -1; }
  .f5-nums { grid-template-columns: 1fr 1fr; }
  .f5-nums > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .f5-nums > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .f6-row { grid-template-columns: 2.4em minmax(0, 1fr) 1.4em; }
  .f6-row .jp, .f6-row .d { display: none; }
  .f14 .f-baserow { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .f4-track { animation: none; } }

/* prototype panel */
.lab { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 120; background: #121418; color: #e9ecf2; border: 1px solid #2c3038; font: 500 12px/1.3 var(--f-jp); width: min(330px, calc(100vw - 32px)); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.lab[hidden] { display: none; }
.lab-t { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.lab-t::after { content: "−"; float: right; }
.lab.collapsed .lab-t::after { content: "+"; }
.lab.collapsed .lab-b { display: none; }
.lab-b { display: grid; gap: 8px; padding: 0 12px 12px; }
.lab-r { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); align-items: center; gap: 8px; }
.lab-k { color: #9ba2b0; }
.lab-o { display: flex; flex-wrap: wrap; gap: 4px; }
.lab-o button { min-width: 28px; padding: 5px 7px; background: none; border: 1px solid #3a3f49; color: inherit; font: 500 11px/1 var(--f-mono); cursor: pointer; }
.lab-o button[aria-pressed="true"] { background: #e9ecf2; color: #121418; border-color: #e9ecf2; }
.lab-d { color: #9ba2b0; min-height: 1.3em; }
.embed .lab { bottom: 12px; }
.lab16 .lab-r { grid-template-columns: 5.5em minmax(0, 1fr); }

/* cursors (fine pointers only; the script never turns them on for touch) */
.cur { position: fixed; inset: 0; pointer-events: none; z-index: 130; display: none; }
html[data-cur]:not([data-cur="0"]) .cur { display: block; }
html[data-cur]:not([data-cur="0"]), html[data-cur]:not([data-cur="0"]) * { cursor: none !important; }
.cur > * { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; }
.cur.on > * { opacity: 1; }
.cur .c-x, .cur .c-y, .cur .c-glow, .cur .c-ring, .cur .c-dot, .cur .c-lab { display: none; }
/* 1: drafting crosshair with coordinates */
html[data-cur="1"] .cur .c-x { display: block; width: 100vw; height: 1px; background: rgb(var(--fg-rgb) / .28); transform: translateY(var(--y)); }
html[data-cur="1"] .cur .c-y { display: block; height: 100vh; width: 1px; background: rgb(var(--fg-rgb) / .28); transform: translateX(var(--x)); }
html[data-cur="1"] .cur .c-dot { display: block; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1px solid var(--fg); background: var(--bg); transform: translate(var(--x), var(--y)) rotate(45deg); }
html[data-cur="1"] .cur .c-lab { display: block; font: 400 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); white-space: pre; transform: translate(calc(var(--x) + 12px), calc(var(--y) + 10px)); }
/* 2: dot and a following ring */
html[data-cur="2"] .cur .c-dot { display: block; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--fg); transform: translate(var(--x), var(--y)); }
html[data-cur="2"] .cur .c-ring { display: block; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgb(var(--fg-rgb) / .5); transform: translate(var(--rx), var(--ry)) scale(1); transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s; }
html[data-cur="2"] .cur:is([data-kind="link"],[data-kind="ext"],[data-kind="btn"]) .c-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgb(var(--fg-rgb) / .06); }
html[data-cur="2"] .cur[data-kind="pj"] .c-ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
html[data-cur="2"] .cur.down .c-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
/* 3: a drop of the page's light */
html[data-cur="3"] .cur .c-glow { display: block; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(circle, rgba(64, 205, 190, .45), rgba(40, 110, 245, .28) 40%, rgba(40, 110, 245, 0) 70%); filter: blur(6px); transform: translate(var(--gx), var(--gy)); mix-blend-mode: var(--glow-blend, multiply); }
html.dk[data-cur="3"] .cur .c-glow { --glow-blend: screen; }
html[data-cur="3"] .cur .c-dot { display: block; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #2f8cff; box-shadow: 0 0 12px 3px rgba(80, 220, 200, .7); transform: translate(var(--x), var(--y)); }
html[data-cur="3"] .cur[data-kind]:not([data-kind=""]) .c-glow { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
/* 4: an inverting lens */
html[data-cur="4"] .cur .c-ring { display: block; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transform: translate(var(--rx), var(--ry)); transition: opacity .3s, width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease); }
html[data-cur="4"] .cur:is([data-kind="link"],[data-kind="ext"],[data-kind="btn"]) .c-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
html[data-cur="4"] .cur[data-kind="type"] .c-ring { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
html[data-cur="4"] .cur[data-kind="pj"] .c-ring { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
/* 5: a small marker that says what a click will do */
html[data-cur="5"] .cur .c-dot { display: block; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--fg); transform: translate(var(--x), var(--y)); }
html[data-cur="5"] .cur .c-lab { display: block; padding: 6px 9px; background: var(--fg); color: var(--bg); font: 500 10px/1 var(--f-mono); letter-spacing: .14em; transform: translate(calc(var(--rx) + 12px), calc(var(--ry) + 12px)); transition: opacity .3s, padding .3s var(--ease); }
html[data-cur="5"] .cur[data-kind=""] .c-lab { padding: 4px 6px; background: none; color: var(--fg); }

/* scrollbars */
.sbx > * { display: none; }
html[data-sb="1"] { scrollbar-width: thin; }
html[data-sb="1"]::-webkit-scrollbar { width: 6px; }
html[data-sb="1"]::-webkit-scrollbar-track { background: transparent; }
html[data-sb="1"]::-webkit-scrollbar-thumb { background: rgb(var(--fg-rgb) / .45); }
html[data-sb="5"]::-webkit-scrollbar { width: 10px; }
html[data-sb="5"]::-webkit-scrollbar-track { background: var(--bg); }
html[data-sb="5"]::-webkit-scrollbar-thumb { background: linear-gradient(#2a5cf0, #1aa7b8 55%, #7fe0b8); border: 3px solid var(--bg); border-radius: 999px; }
@supports not selector(::-webkit-scrollbar) {
  html[data-sb="1"] { scrollbar-color: rgb(var(--fg-rgb) / .45) transparent; }
  html[data-sb="5"] { scrollbar-color: #1aa7b8 transparent; }
}
html:is([data-sb="2"],[data-sb="3"],[data-sb="4"]) { scrollbar-width: none; }
html:is([data-sb="2"],[data-sb="3"],[data-sb="4"])::-webkit-scrollbar { display: none; }
.sbx { position: fixed; z-index: 110; inset: 0 0 auto auto; pointer-events: none; }
/* 2: a ruler with a moving cursor */
html[data-sb="2"] .sb2 { display: block; position: fixed; top: 72px; bottom: 72px; right: 0; width: 26px; pointer-events: auto; cursor: ns-resize; touch-action: none; }
.sb2 .ticks i { position: absolute; right: 0; width: 6px; height: 1px; background: rgb(var(--fg-rgb) / .3); }
.sb2 .ticks i.l { width: 12px; background: rgb(var(--fg-rgb) / .55); }
.sb2 .marks span { position: absolute; right: 18px; padding: 2px 5px; background: var(--bg); transform: translateY(-50%); font: 400 9px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.sb2:hover .marks span { opacity: 1; }
.sb2 .th { position: absolute; right: 0; top: calc(var(--p, 0) * 100%); width: 26px; height: 2px; margin-top: -1px; background: var(--fg); }
.sb2 .th em { position: absolute; right: 30px; top: -6px; font: 500 10px/1 var(--f-mono); font-style: normal; color: var(--fg); letter-spacing: .06em; }
/* 3: chapters down the edge */
html[data-sb="3"] .sb3 { display: block; position: fixed; top: 22vh; bottom: 22vh; right: 18px; width: 2px; pointer-events: auto; }
.sb3 .line { position: absolute; inset: 0; background: rgb(var(--fg-rgb) / .16); }
.sb3 .line i { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p, 0) * 100%); background: var(--fg); }
.sb3 button { position: absolute; right: -5px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 1px solid var(--fg); background: var(--bg); padding: 0; cursor: pointer; }
.sb3 button.act { background: var(--fg); }
.sb3 button span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--f-disp); white-space: nowrap; color: var(--fg); opacity: 0; transition: opacity .3s; }
.sb3:hover button span, .sb3 button.act span { opacity: 1; }
/* 4: a progress line along the top */
html[data-sb="4"] .sb4 { display: block; position: fixed; left: 0; right: 0; top: 0; height: 10px; pointer-events: auto; cursor: pointer; }
.sb4 i { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #2a5cf0, #1aa7b8, #7fe0b8); }
.sb4 em { position: absolute; top: 6px; left: calc(var(--p, 0) * 100%); transform: translateX(-100%); padding-right: 4px; font: 500 10px/1 var(--f-mono); font-style: normal; color: var(--fg); }
@media (max-width: 900px) { html[data-sb="2"] .sb2, html[data-sb="3"] .sb3 { display: none; } html[data-sb="4"] .sb4 em { display: none; } }
.lab.collapsed { width: auto; }
html[data-cur="2"] .cur .c-lab { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--bg); transform: translate(var(--rx), var(--ry)) translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s, transform .35s var(--ease); }
html[data-cur="2"] .cur.on[data-kind="pj"] .c-lab { opacity: 1; transform: translate(var(--rx), var(--ry)) translate(-50%, -50%) scale(1); }
html[data-cur="2"] .cur[data-kind="pj"] .c-ring { background: var(--fg); border-color: var(--fg); }
html[data-cur="2"] .cur[data-kind="pj"] .c-dot { opacity: 0; }

/* ===================== pattern 16: six ways to set the project information ===================== */
.pj-tags { display: none; }
html[data-p="16"] .pj-go::after { content: none; }
/* 1: spec sheet, like the title block of a drawing */
html[data-p="16"][data-pj="1"] .pj-body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: 0; align-items: stretch; }
html[data-p="16"][data-pj="1"] .pj-no { grid-column: 1; grid-row: 1; }
html[data-p="16"][data-pj="1"] .pj-go { grid-column: 3; grid-row: 1; justify-self: end; }
html[data-p="16"][data-pj="1"] .pj-name { grid-column: 1 / -1; grid-row: 2; padding: 10px 0 16px; }
html[data-p="16"][data-pj="1"] :is(.pj-cat, .pj-scope, .pj-year) { grid-row: 3; display: grid; align-content: start; gap: 8px; padding: 12px 12px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--fg); justify-self: stretch; min-height: 4.2em; }
html[data-p="16"][data-pj="1"] .pj-cat { grid-column: 1; border-left: 0; padding-left: 0; }
html[data-p="16"][data-pj="1"] .pj-scope { grid-column: 2; }
html[data-p="16"][data-pj="1"] .pj-year { grid-column: 3; }
html[data-p="16"][data-pj="1"] :is(.pj-cat, .pj-scope, .pj-year)::before { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html[data-p="16"][data-pj="1"] .pj-cat::before { content: "Type"; }
html[data-p="16"][data-pj="1"] .pj-scope::before { content: "Scope"; }
html[data-p="16"][data-pj="1"] .pj-year::before { content: "Year"; }
/* 2: a gallery caption: number, name and year on one line, the rest in one quiet line */
html[data-p="16"][data-pj="2"] .pj-body { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: baseline; }
html[data-p="16"][data-pj="2"] .pj-no { grid-column: 1; grid-row: 1; }
html[data-p="16"][data-pj="2"] .pj-name { grid-column: 2; grid-row: 1; padding-bottom: 0; }
html[data-p="16"][data-pj="2"] .pj-year { grid-column: 3; grid-row: 1; }
html[data-p="16"][data-pj="2"] .pj-cat { grid-column: 2 / -1; grid-row: 2; padding-top: 6px; }
html[data-p="16"][data-pj="2"] .pj-scope { grid-column: 2 / -1; grid-row: 3; color: var(--muted); }
html[data-p="16"][data-pj="2"] .pj-go { display: none; }
html[data-p="16"][data-pj="2"] .pj-name::after { bottom: -4px; }
/* 3: the information rises over the photograph */
html[data-p="16"][data-pj="3"] .pj { position: relative; }
html[data-p="16"][data-pj="3"] .pj-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, .78), rgba(8, 10, 14, .25) 55%, rgba(8, 10, 14, 0)); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
html[data-p="16"][data-pj="3"] .pj:is(:hover, :focus-visible) .pj-fig::after { opacity: 1; }
html[data-p="16"][data-pj="3"] .pj-body { grid-template-columns: minmax(0, 1fr) auto; }
html[data-p="16"][data-pj="3"] .pj-name { grid-column: 1; grid-row: 1; padding-bottom: 0; }
html[data-p="16"][data-pj="3"] .pj-year { grid-column: 2; grid-row: 1; }
html[data-p="16"][data-pj="3"] :is(.pj-no, .pj-cat, .pj-scope, .pj-go) { position: absolute; z-index: 2; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html[data-p="16"][data-pj="3"] .pj:is(:hover, :focus-visible) :is(.pj-no, .pj-cat, .pj-scope, .pj-go) { opacity: 1; transform: none; }
html[data-p="16"][data-pj="3"] .pj-no { top: 18px; left: 18px; }
html[data-p="16"][data-pj="3"] .pj-go { top: 18px; right: 18px; }
html[data-p="16"][data-pj="3"] .pj-cat { top: 48px; left: 18px; font-size: 20px; }
html[data-p="16"][data-pj="3"] .pj-scope { top: 80px; left: 18px; right: 18px; color: rgba(255, 255, 255, .8); }
@media (hover: none) { html[data-p="16"][data-pj="3"] .pj-fig::after, html[data-p="16"][data-pj="3"] :is(.pj-no, .pj-cat, .pj-scope, .pj-go) { opacity: 1; transform: none; } }
/* 4: a large number beside the information */
html[data-p="16"][data-pj="4"] .pj-body { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; row-gap: 6px; align-items: start; }
html[data-p="16"][data-pj="4"] .pj-no { grid-column: 1; grid-row: 1 / span 3; font: 300 64px/.8 var(--f-disp); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--fg); }
html[data-p="16"][data-pj="4"] .pj-name { grid-column: 2 / -1; grid-row: 1; padding-bottom: 6px; }
html[data-p="16"][data-pj="4"] .pj-cat { grid-column: 2; grid-row: 2; }
html[data-p="16"][data-pj="4"] .pj-year { grid-column: 3; grid-row: 2; }
html[data-p="16"][data-pj="4"] .pj-scope { grid-column: 2; grid-row: 3; color: var(--muted); }
html[data-p="16"][data-pj="4"] .pj-go { grid-column: 3; grid-row: 3; }
/* 5: what was designed, as tags */
html[data-p="16"][data-pj="5"] .pj-body { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
html[data-p="16"][data-pj="5"] .pj-cat { grid-column: 1; grid-row: 1; color: var(--muted); }
html[data-p="16"][data-pj="5"] .pj-year { grid-column: 2; grid-row: 1; }
html[data-p="16"][data-pj="5"] .pj-name { grid-column: 1 / -1; grid-row: 2; }
html[data-p="16"][data-pj="5"] .pj-no, html[data-p="16"][data-pj="5"] .pj-scope { display: none; }
html[data-p="16"][data-pj="5"] .pj-tags { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1; grid-row: 3; }
html[data-p="16"][data-pj="5"] .pj-tags span { padding: 5px 12px 4px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; line-height: 1.2; transition: background .4s var(--ease), color .4s var(--ease); }
html[data-p="16"][data-pj="5"] .pj:hover .pj-tags span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
html[data-p="16"][data-pj="5"] .pj-go { grid-column: 2; grid-row: 3; align-self: center; }
/* 6: an index line: name, type and year on one rule; the scope opens on hover */
html[data-p="16"][data-pj="6"] .pj-body { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 18px; row-gap: 0; align-items: center; border-top: 1px solid var(--line-strong); padding-top: 14px; }
html[data-p="16"][data-pj="6"] .pj-no { display: none; }
html[data-p="16"][data-pj="6"] .pj-name { grid-column: 1; grid-row: 1; padding-bottom: 0; }
html[data-p="16"][data-pj="6"] .pj-name::after { display: none; }
html[data-p="16"][data-pj="6"] .pj-cat { grid-column: 2; grid-row: 1; color: var(--muted); }
html[data-p="16"][data-pj="6"] .pj-year { grid-column: 3; grid-row: 1; }
html[data-p="16"][data-pj="6"] :is(.pj-scope, .pj-go) { grid-row: 2; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), padding .5s var(--ease); }
html[data-p="16"][data-pj="6"] .pj-scope { grid-column: 1 / 3; }
html[data-p="16"][data-pj="6"] .pj-go { grid-column: 3; }
html[data-p="16"][data-pj="6"] .pj:is(:hover, :focus-visible) :is(.pj-scope, .pj-go) { max-height: 3em; opacity: 1; padding-top: 10px; }
@media (hover: none) { html[data-p="16"][data-pj="6"] :is(.pj-scope, .pj-go) { max-height: 3em; opacity: 1; padding-top: 10px; } }

/* pattern 16: a looser side menu */
html[data-p="16"] .gnav { gap: 18px; }
html[data-p="16"] .gnav a { line-height: 1.2; }
html[data-p="16"] .side-sub { gap: 16px; margin-top: 36px; }
html[data-p="16"] .gnav .jp, html[data-p="16"] .jl { position: relative; top: var(--jp-shift, 0px); }

/* pattern 16, information 5: five tag designs */
html[data-p="16"][data-pj="5"]:not([data-tag="0"]) .pj-tags span { border: 0; border-radius: 0; background: none; color: var(--fg); line-height: 1; font-size: 12px; }
html[data-p="16"][data-pj="5"]:not([data-tag="0"]) .pj:hover .pj-tags span { background: none; color: var(--fg); }
/* 1: a dimension line under each word */
html[data-p="16"][data-pj="5"][data-tag="1"] .pj-tags { gap: 14px; }
html[data-p="16"][data-pj="5"][data-tag="1"] .pj-tags span { position: relative; padding: 4px 8px 8px; }
html[data-p="16"][data-pj="5"][data-tag="1"] .pj-tags span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border: solid rgb(var(--fg-rgb) / .55); border-width: 0 1px 1px; transition: right .5s var(--ease); }
html[data-p="16"][data-pj="5"][data-tag="1"] .pj:hover .pj-tags span::before { border-color: var(--fg); }
/* 2: an index with numbers and hairline rules */
html[data-p="16"][data-pj="5"][data-tag="2"] .pj-tags { gap: 0; counter-reset: tg; }
html[data-p="16"][data-pj="5"][data-tag="2"] .pj-tags span { counter-increment: tg; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-left: 1px solid var(--line); }
html[data-p="16"][data-pj="5"][data-tag="2"] .pj-tags span:first-child { padding-left: 0; border-left: 0; }
html[data-p="16"][data-pj="5"][data-tag="2"] .pj-tags span::before { content: counter(tg, decimal-leading-zero); font: 400 12px/1 var(--f-mono); color: var(--muted); transition: color .4s; }
html[data-p="16"][data-pj="5"][data-tag="2"] .pj:hover .pj-tags span::before { color: var(--accent); }
/* 3: printer's crop marks at the four corners */
html[data-p="16"][data-pj="5"][data-tag="3"] .pj-tags { gap: 10px; }
html[data-p="16"][data-pj="5"][data-tag="3"] .pj-tags span { --m: rgb(var(--fg-rgb) / .6); padding: 7px 12px; background:
  linear-gradient(var(--m), var(--m)) 0 0 / 6px 1px, linear-gradient(var(--m), var(--m)) 0 0 / 1px 6px,
  linear-gradient(var(--m), var(--m)) 100% 0 / 6px 1px, linear-gradient(var(--m), var(--m)) 100% 0 / 1px 6px,
  linear-gradient(var(--m), var(--m)) 0 100% / 6px 1px, linear-gradient(var(--m), var(--m)) 0 100% / 1px 6px,
  linear-gradient(var(--m), var(--m)) 100% 100% / 6px 1px, linear-gradient(var(--m), var(--m)) 100% 100% / 1px 6px; background-repeat: no-repeat; transition: background-size .4s var(--ease); }
html[data-p="16"][data-pj="5"][data-tag="3"] .pj:hover .pj-tags span { --m: var(--fg); background:
  linear-gradient(var(--m), var(--m)) 0 0 / 10px 1px, linear-gradient(var(--m), var(--m)) 0 0 / 1px 10px,
  linear-gradient(var(--m), var(--m)) 100% 0 / 10px 1px, linear-gradient(var(--m), var(--m)) 100% 0 / 1px 10px,
  linear-gradient(var(--m), var(--m)) 0 100% / 10px 1px, linear-gradient(var(--m), var(--m)) 0 100% / 1px 10px,
  linear-gradient(var(--m), var(--m)) 100% 100% / 10px 1px, linear-gradient(var(--m), var(--m)) 100% 100% / 1px 10px; background-repeat: no-repeat; }
/* 4: a soft wash of the page's light */
html[data-p="16"][data-pj="5"][data-tag="4"] .pj-tags { gap: 8px; }
html[data-p="16"][data-pj="5"][data-tag="4"] .pj-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(42, 92, 240, .12), rgba(26, 167, 184, .12) 60%, rgba(127, 224, 184, .16)); }
html[data-p="16"][data-pj="5"][data-tag="4"] .pj-tags span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #2a5cf0, #1aa7b8 60%, #7fe0b8); box-shadow: 0 0 8px rgba(26, 167, 184, .7); }
html[data-p="16"][data-pj="5"][data-tag="4"] .pj:hover .pj-tags span { background: linear-gradient(90deg, rgba(42, 92, 240, .24), rgba(26, 167, 184, .24) 60%, rgba(127, 224, 184, .3)); }
/* 5: a slanted frame, like a section cut */
html[data-p="16"][data-pj="5"][data-tag="5"] .pj-tags { gap: 12px; padding-left: 3px; }
html[data-p="16"][data-pj="5"][data-tag="5"] .pj-tags span { position: relative; isolation: isolate; padding: 7px 14px; transition: color .4s var(--ease); }
html[data-p="16"][data-pj="5"][data-tag="5"] .pj-tags span::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgb(var(--fg-rgb) / .55); transform: skewX(-16deg); transition: background .4s var(--ease), border-color .4s; }
html[data-p="16"][data-pj="5"][data-tag="5"] .pj:hover .pj-tags span { color: var(--bg); }
html[data-p="16"][data-pj="5"][data-tag="5"] .pj:hover .pj-tags span::before { background: var(--fg); border-color: var(--fg); }

/* pattern 16: 100px page margins, thinner hover rules */
@media (min-width: 1200px) { html[data-p="16"] { --gutter: 100px; --navw: 340px; } }
@media (min-width: 901px) and (max-width: 1199px) { html[data-p="16"] { --gutter: 80px; --navw: 300px; } }
html[data-p="16"] :is(.sec-in, .pj-viewport, .foot-wrap) { max-width: 1680px; }
html[data-p="16"] .pj-name::after { height: 1px; transform: scaleX(0) scaleY(.5); transform-origin: left bottom; }
html[data-p="16"] .pj:hover .pj-name::after, html[data-p="16"] .pj:focus-visible .pj-name::after { transform: scaleX(1) scaleY(.5); }
html[data-p="16"][data-pj="5"][data-tag="3"] .pj-tags span, html[data-p="16"][data-pj="5"][data-tag="3"] .pj:hover .pj-tags span { --w: .5px; background:
  linear-gradient(var(--m), var(--m)) 0 0 / var(--l, 6px) var(--w), linear-gradient(var(--m), var(--m)) 0 0 / var(--w) var(--l, 6px),
  linear-gradient(var(--m), var(--m)) 100% 0 / var(--l, 6px) var(--w), linear-gradient(var(--m), var(--m)) 100% 0 / var(--w) var(--l, 6px),
  linear-gradient(var(--m), var(--m)) 0 100% / var(--l, 6px) var(--w), linear-gradient(var(--m), var(--m)) 0 100% / var(--w) var(--l, 6px),
  linear-gradient(var(--m), var(--m)) 100% 100% / var(--l, 6px) var(--w), linear-gradient(var(--m), var(--m)) 100% 100% / var(--w) var(--l, 6px); background-repeat: no-repeat; }
html[data-p="16"][data-pj="5"][data-tag="3"] .pj:hover .pj-tags span { --l: 10px; }

/* pattern 16: construction drawn from the glyphs */
.td path.c2 { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.td.on path.c2 { opacity: .55; }
.td path.c2 { stroke-dasharray: 4 3 !important; }
.td path.sb { fill: rgba(36, 72, 230, .12); stroke: none; }
.td path.nd { fill: var(--bg); stroke: var(--blue); }
.td text.ec { font-family: inherit; letter-spacing: 0; fill: none; stroke: var(--blue); stroke-width: 1px; paint-order: stroke; opacity: 0; }
.td.on text.ec { opacity: .9; }

/* pattern 16: a more compact footer */
html[data-p="16"] .f14 { padding-top: clamp(48px, 5vw, 72px); padding-bottom: 24px; }
html[data-p="16"] .f6-row { padding: 11px 0; }
html[data-p="16"] .f6-foot { margin-top: 24px; gap: 24px; }
html[data-p="16"] .f14 .f-baserow { margin-top: 28px; padding-top: 16px; }
html[data-p="16"] .f6-head { margin-bottom: 4px; }

/* pattern 16: one gap between sections — 256px (PC) / 192px (narrow) */
html[data-p="16"] { --secgap: 256px; --ft-pt: 72px; }
@media (max-width: 900px) { html[data-p="16"] { --secgap: 192px; --ft-pt: 48px; } }
html[data-p="16"] .sec { padding-top: 0 !important; padding-bottom: var(--secgap); }
html[data-p="16"] #mission { padding-top: max(0px, calc(var(--secgap) - var(--hero-slack, 0px))) !important; }
html[data-p="16"] #contact { padding-bottom: calc(var(--secgap) - var(--ft-pt)); }
html[data-p="16"] .f14 { padding-top: var(--ft-pt); }

/* pattern 16: six motions for the big headings (driven by --k: 1 = start, 0 = in place; --h = pointer) */
html[data-p="16"][data-mo] .big .lt { transition: transform .55s var(--ease), color .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease), clip-path .55s var(--ease), -webkit-text-stroke-color .45s var(--ease);
  color: rgb(var(--fg-rgb) / calc(1 - var(--h, 0) * .9)); }
/* 1 rise: each letter comes up from under a line just below the descenders */
html[data-p="16"][data-mo="1"] .big .lt { transform: translate3d(0, calc(var(--k, 0) * 1.25em - var(--h, 0) * .16em), 0);
  clip-path: inset(-.3em -.2em calc(var(--k, 0) * 1.25em - .3em) -.2em); }
/* 2 outline to ink: a blue outline first, then the fill */
html[data-p="16"][data-mo="2"] .big .lt { transform: translate3d(0, calc(var(--h, 0) * -.16em), 0);
  color: rgb(var(--fg-rgb) / calc(1 - max(min(1, var(--k, 0) * 1.6), var(--h, 0) * .9)));
  -webkit-text-stroke-color: color-mix(in srgb, var(--blue) calc(min(1, var(--k, 0) * 1.6) * 100%), var(--fg));
  opacity: calc(1 - max(0, var(--k, 0) - .7) * 3.3); }
/* 3 focus: blurred and spread apart, then sharp and tight */
html[data-p="16"][data-mo="3"] .big .lt { transform: translate3d(calc(var(--d, 0) * var(--k, 0) * .5em), calc(var(--h, 0) * -.16em), 0) scale(calc(1 + var(--k, 0) * .08));
  filter: blur(calc(var(--k, 0) * 14px)); opacity: calc(1 - var(--k, 0) * .85); }
/* 4 flip: letters turn over on the baseline, like a split-flap board */
html[data-p="16"][data-mo="4"] .big .lt { transform-origin: 50% 78%;
  transform: perspective(4em) translate3d(0, calc(var(--h, 0) * -.16em), 0) rotateX(calc(var(--k, 0) * -96deg));
  opacity: calc(1 - var(--k, 0) * .7); }
/* 5 upright: slanted letters stand up straight (an echo of the angle marks) */
html[data-p="16"][data-mo="5"] .big .lt { transform-origin: 0 78%;
  transform: translate3d(calc(var(--k, 0) * .45em), calc(var(--h, 0) * -.16em), 0) skewX(calc(var(--k, 0) * -26deg));
  opacity: calc(1 - var(--k, 0) * .6); }
/* 6 snap: each letter starts on another guide (cap, x-height, descender) and snaps to the baseline */
html[data-p="16"][data-mo="6"] .big .lt { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  transform: translate3d(0, calc(var(--o, 0) * var(--k, 0) * 1em - var(--h, 0) * .16em), 0);
  color: rgb(var(--fg-rgb) / calc(1 - max(var(--k, 0) * .8, var(--h, 0) * .9))); }
@media (prefers-reduced-motion: reduce) { html[data-p="16"][data-mo] .big .lt { transform: none !important; filter: none !important; clip-path: none !important; opacity: 1 !important; color: var(--fg) !important; -webkit-text-stroke-color: var(--fg) !important; } }
html.td-measure[data-mo] .big .lt { filter: none !important; clip-path: none !important; }

/* ===== pattern 16: six opening proposals ===== */
.opening[data-v] { overflow: hidden; transition: opacity .9s var(--ease), background-color 1s var(--ease), visibility 0s .9s; }
.opening[data-v].gone { transform: none; opacity: 0; visibility: hidden; }
.opening[data-v] p { margin: 0; }

/* 1 light */
.o1-glow { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: radial-gradient(circle, #f4f7ff 0%, #b9cbff 12%, #5a7dff 30%, rgba(30, 60, 220, .85) 48%, rgba(56, 190, 170, .42) 64%, rgba(20, 40, 160, .18) 74%, rgba(10, 12, 17, 0) 82%);
  filter: blur(.5px); transform: scale(0); opacity: 0; transition: transform 1.9s cubic-bezier(.16, .8, .12, 1), opacity .7s var(--ease); }
.opening[data-v="1"].s1 .o1-glow { transform: scale(1.6); opacity: 1; }
.opening[data-v="1"].s2 .o1-glow { transform: scale(150); }
.opening[data-v="1"].s3 { background-color: transparent; }
.opening[data-v="1"].s3 .o1-glow { opacity: 0; transition: opacity 1.1s var(--ease); }
.o1-logo { position: relative; width: min(280px, 52vw); color: #0a0c11; opacity: 0; transform: scale(.94); transition: opacity 1s var(--ease) .5s, transform 1.6s var(--ease) .5s; }
.o1-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.opening[data-v="1"].s2 .o1-logo { opacity: 1; transform: none; }
.opening[data-v="1"].s3 .o1-logo { opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.o1-cap { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; font: 400 12px/1 var(--f-mono); letter-spacing: .2em; color: var(--muted); opacity: 0; transition: opacity .8s var(--ease); }
.opening[data-v="1"].s1 .o1-cap { opacity: 1; }
.opening[data-v="1"].s3 .o1-cap { opacity: 0; }

/* 2 typeset: the hero builds itself */
html.op-v2 .opening { display: none !important; }
html.op-v2 :is(.hero-side, .hero-jp, .hero-foot) { transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.op-v2.op-s1 :is(.hero-side, .hero-jp, .hero-foot) { opacity: 0; transform: translateY(14px); }
html.op-v2.op-s1.op-s3 :is(.hero-side, .hero-jp, .hero-foot) { opacity: 1; transform: none; }
html.op-v2.op-s1.op-s3 .hero-jp { transition-delay: .15s; }
html.op-v2.op-s1.op-s3 .hero-foot { transition-delay: .3s; }
html.op-v2 .hero h1 > span { transition: color .9s var(--ease), -webkit-text-stroke-color .9s var(--ease), -webkit-text-stroke-width .9s var(--ease); }
html.op-v2 .hero h1 > span:nth-child(2) { transition-delay: .25s; }
html.op-v2 .hero h1 > span:nth-child(3) { transition-delay: .5s; }
html.op-v2.op-s1:not(.op-s2) .hero h1 > span { color: transparent !important; -webkit-text-stroke: 1.5px #8fa6ff !important; }

/* 3 measure */
.opening[data-v="3"] { background: transparent; }
.o3-half { position: absolute; left: 0; right: 0; height: 50%; background: var(--bg); transition: transform 1.15s cubic-bezier(.76, 0, .2, 1); }
.o3-top { top: 0; } .o3-bot { bottom: 0; }
.opening[data-v="3"].s2 .o3-top { transform: translateY(-100%); }
.opening[data-v="3"].s2 .o3-bot { transform: translateY(100%); }
.o3-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: var(--blue); transform: scaleX(0); transform-origin: left center; }
.o3-num { position: absolute; left: var(--gutter); bottom: calc(50% + 16px); font: 400 64px/1 var(--f-mono); letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .5s var(--ease); }
.o3-num span { font-size: 16px; margin-left: 6px; color: var(--muted); }
.o3-meta { position: absolute; right: var(--gutter); top: calc(50% + 16px); font: 400 12px/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); opacity: 0; transition: opacity .5s var(--ease) .2s; }
.opening[data-v="3"].s1 :is(.o3-num, .o3-meta) { opacity: 1; }
.opening[data-v="3"].s2 :is(.o3-num, .o3-meta, .o3-line) { opacity: 0; transition: opacity .3s var(--ease); }

/* 4 signature */
.opening[data-v="4"] { transition: background-color .8s var(--ease), opacity .4s var(--ease), visibility 0s .4s; }
.o4-logo { width: min(520px, 72vw); color: var(--fg); transform-origin: 0 0; transition: transform 1s cubic-bezier(.76, 0, .2, 1), opacity .3s var(--ease); }
.o4-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.o4-g { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: .3; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease) calc(var(--i) * .1s), fill-opacity .6s var(--ease), stroke-opacity .6s var(--ease); }
.opening[data-v="4"].s1 .o4-g { stroke-dashoffset: 0; }
.opening[data-v="4"].s2 .o4-g { fill-opacity: 1; stroke-opacity: 0; transition-delay: 0s; }
.o4-sub { position: absolute; left: 0; right: 0; top: calc(50% + min(150px, 22vw)); text-align: center; font: 400 12px/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .6s var(--ease) .4s; }
.opening[data-v="4"].s1 .o4-sub { opacity: 1; }
.opening[data-v="4"].s3 { background-color: transparent; }
.opening[data-v="4"].s3 .o4-sub { opacity: 0; transition-delay: 0s; }
.opening[data-v="4"].s4 .o4-logo { opacity: 0; }
html.op-v4 .hero .side-logo { opacity: 0; }

/* 5 words */
.o5-stage { display: grid; place-items: center; }
.o5-w { grid-area: 1 / 1; font: 500 80px/1.2 var(--f-jp); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1.5px #8fa6ff; opacity: 0; transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .55s var(--ease), color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease); }
.o5-w.on { opacity: 1; transform: none; }
.o5-w.ink { color: var(--fg); -webkit-text-stroke-color: var(--fg); }
.o5-cap { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; font: 400 12px/1 var(--f-mono); letter-spacing: .24em; color: var(--muted); }
.opening[data-v="5"] { transition: transform 1s cubic-bezier(.76, 0, .2, 1), visibility 0s 1s; }
.opening[data-v="5"].gone { transform: translateY(-100%); opacity: 1; }
@media (max-width: 900px) { .o5-w { font-size: 48px; } .o3-num { font-size: 48px; } }

/* 6 frame */
.opening[data-v="6"] { background: transparent; }
.o6-win { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 200vmax var(--bg); outline: 1px solid var(--blue); transition: outline-color .6s var(--ease); }
.o6-dw { position: absolute; left: 12px; right: 12px; top: 12px; height: 1px; background: var(--blue); }
.o6-dh { position: absolute; top: 12px; bottom: 12px; right: 12px; width: 1px; background: var(--blue); }
.o6-dw::before, .o6-dw::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--blue); }
.o6-dw::before { left: 0; } .o6-dw::after { right: 0; }
.o6-dh::before, .o6-dh::after { content: ""; position: absolute; left: -4px; width: 9px; height: 1px; background: var(--blue); }
.o6-dh::before { top: 0; } .o6-dh::after { bottom: 0; }
.o6-w, .o6-h { position: absolute; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--blue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.o6-w { left: 50%; top: 20px; transform: translateX(-50%); }
.o6-h { right: 20px; top: 50%; transform: translateY(-50%); }
.o6-win > * { opacity: 0; transition: opacity .4s var(--ease); }
.opening[data-v="6"].s1 .o6-win > * { opacity: 1; }
.opening[data-v="6"].s2 .o6-win { outline-color: transparent; }
.opening[data-v="6"].s2 .o6-win > * { opacity: 0; transition-duration: .6s; }
.o6-meta { position: absolute; left: var(--gutter); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); font: 400 12px/1 var(--f-mono); letter-spacing: .24em; color: var(--muted); }
.opening[data-v="6"].s2 .o6-meta { opacity: 0; transition: opacity .4s; }

/* ===== pattern 17: pattern 16 + five scroll effects (data-x="17", data-sfx) ===== */
html[data-x="17"] .sec [data-reveal] { transform: none; opacity: 1; transition: none; }
html[data-x="17"] .sec .sx { will-change: transform; }

/* 1 mask: images open from below, text rises out of a mask */
html[data-x="17"][data-sfx="1"] .sec .sx:not(.big, .phd, .pj) { transform: translate3d(0, calc((1 - var(--e, 1)) * 36px), 0); clip-path: inset(-.2em -2px calc((1 - var(--e, 1)) * 100%) -2px); }
html[data-x="17"][data-sfx="1"] .sec .phd.sx, html[data-x="17"][data-sfx="1"] .sec .pj.sx .pj-fig { clip-path: inset(calc((1 - var(--e, 1)) * 100%) 0 0 0); }
html[data-x="17"][data-sfx="1"] .sec .phd.sx > *, html[data-x="17"][data-sfx="1"] .sec .pj.sx .pj-fig img { transform: scale(calc(1 + (1 - var(--e, 1)) * .3)); transform-origin: 50% 100%; }
html[data-x="17"][data-sfx="1"] .sec .pj.sx .pj-body { transform: translate3d(0, calc((1 - var(--e, 1)) * 28px), 0); opacity: calc(var(--e, 1) * 1.4 - .4); }

/* 2 depth: layers move at different speeds; headings drift sideways with their guides */
html[data-x="17"][data-sfx="2"] .sec .sx:not(.big) { transform: translate3d(0, calc((.5 - var(--t, .5)) * var(--dp, 40px)), 0); }
html[data-x="17"][data-sfx="2"] .sec .phd.sx { --dp: 140px; }
html[data-x="17"][data-sfx="2"] .sec .phd.sx > * { transform: translateY(calc((var(--t, .5) - .5) * 24%)) scale(1.24); }
html[data-x="17"][data-sfx="2"] .sec .pj.sx { --dp: 60px; }
html[data-x="17"][data-sfx="2"] .sec .pj.sx:nth-child(3n + 2) { --dp: 180px; }
html[data-x="17"][data-sfx="2"] .sec .pj.sx .ph { overflow: hidden; }
html[data-x="17"][data-sfx="2"] .sec .pj.sx .pj-fig img { transform: translateY(calc((var(--t, .5) - .5) * 16%)) scale(1.2); }
html[data-x="17"][data-sfx="2"] .sec .flow > li.sx:nth-child(even) { --dp: 120px; }
html[data-x="17"][data-sfx="2"] .sec .big.sx, html[data-x="17"][data-sfx="2"] .sec > .td { transform: translate3d(calc((.5 - var(--ht, .5)) * 16vw), 0, 0); }

/* 3 zoom: each block comes forward out of focus, and steps back as it leaves */
html[data-x="17"][data-sfx="3"] .sec .sx:not(.big) { transform-origin: 50% 70%;
  transform: scale(calc(.8 + .2 * var(--e, 1) - .08 * var(--x, 0)));
  opacity: calc((.1 + .9 * var(--e, 1)) * (1 - .8 * var(--x, 0)));
  filter: blur(calc((1 - var(--e, 1)) * 12px)); }
html[data-x="17"][data-sfx="3"] .sec .phd.sx > *, html[data-x="17"][data-sfx="3"] .sec .pj.sx .pj-fig img { transform: scale(calc(1.3 - .3 * var(--e, 1))); }

/* 4 horizontal: headings slide in from the right, blocks wipe in sideways, Workflow runs as a pinned track */
html[data-x="17"][data-sfx="4"] .sec .big.sx, html[data-x="17"][data-sfx="4"] .sec > .td { transform: translate3d(calc((1 - var(--he, 1)) * 48vw), 0, 0); }
html[data-x="17"][data-sfx="4"] .sec .sx:not(.big) { transform: translate3d(calc((1 - var(--e, 1)) * -48px), 0, 0); clip-path: inset(-.2em calc((1 - var(--e, 1)) * 100%) -.2em 0); }
html[data-x="17"][data-sfx="4"] .sec .pj.sx:nth-child(even) { transform: translate3d(calc((1 - var(--e, 1)) * 48px), 0, 0); clip-path: inset(-.2em 0 -.2em calc((1 - var(--e, 1)) * 100%)); }
@media (min-width: 901px) {
  html[data-x="17"][data-sfx="4"] #workflow { overflow-x: clip; }
  html[data-x="17"][data-sfx="4"] #workflow .sec-in { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  html[data-x="17"][data-sfx="4"] #workflow::after { content: ""; display: block; height: var(--hdist, 0px); }
  html[data-x="17"][data-sfx="4"] #workflow .flow { display: flex; width: max-content; transform: translate3d(calc(var(--hp, 0) * var(--hdist, 0px) * -1), 0, 0); }
  html[data-x="17"][data-sfx="4"] #workflow .flow > li { width: 360px; flex: none; transform: none; clip-path: none; }
  html[data-x="17"][data-sfx="4"] #workflow .flow .phd { height: 200px; }
  html[data-x="17"][data-sfx="4"] #workflow > .td { transform: translate3d(calc((1 - var(--he, 1)) * 48vw), var(--pin, 0px), 0); }
}

/* 5 typed: text is set character by character, each one flashing blue; images open like a scan */
@keyframes twIn { 0% { opacity: 0; color: var(--blue); } 1% { opacity: 1; color: var(--blue); } 100% { opacity: 1; } }
html[data-x="17"][data-sfx="5"] .sec .sx .tw-c { opacity: 0; }
html[data-x="17"][data-sfx="5"] .sec .sx.typed .tw-c { animation: twIn .5s var(--ease) both; animation-delay: calc(var(--c) * var(--cs, 20ms)); }
html[data-x="17"][data-sfx="5"] .sec .phd.sx, html[data-x="17"][data-sfx="5"] .sec .sx .phd, html[data-x="17"][data-sfx="5"] .sec .pj.sx .pj-fig { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
html[data-x="17"][data-sfx="5"] .sec .phd.sx.typed, html[data-x="17"][data-sfx="5"] .sec .sx.typed .phd, html[data-x="17"][data-sfx="5"] .sec .pj.sx.typed .pj-fig { clip-path: inset(0 0 0 0); }
html[data-x="17"][data-sfx="5"] .sec .pj.sx .pj-body { opacity: 0; transition: opacity .6s var(--ease) .5s; }
html[data-x="17"][data-sfx="5"] .sec .pj.sx.typed .pj-body { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html[data-x="17"] .sec .sx, html[data-x="17"] .sec .sx *, html[data-x="17"] .sec > .td { transform: none !important; clip-path: none !important; filter: none !important; opacity: 1 !important; animation: none !important; }
}
html[data-x="17"] .sec { overflow-x: clip; }
/* the typed wrappers must look exactly like the text they replace */
html .sec .tw, html .sec .tw-c { font: inherit; color: inherit; letter-spacing: inherit; padding: 0; margin: 0; border: 0; display: inline; }

/* the typed characters stay visible once set (the animation's end state is opacity 1) */
html[data-x="17"][data-sfx="5"] .sec .sx.typed .tw-c { opacity: 1; }

/* 6 laid out: blocks are put down on the page like prints on a desk, each at its own small angle */
html[data-x="17"][data-sfx="6"] .sec .sx:not(.big) { transform-origin: 50% 100%;
  transform: translate3d(calc((1 - var(--e, 1)) * var(--dx, 0px)), calc((1 - var(--e, 1)) * 96px), 0) rotate(calc((1 - var(--e, 1)) * var(--rot, 0deg)));
  opacity: calc(.1 + .9 * var(--e, 1)); }
html[data-x="17"][data-sfx="6"] .sec .phd.sx, html[data-x="17"][data-sfx="6"] .sec .pj.sx .pj-fig, html[data-x="17"][data-sfx="6"] .sec .sx .phd {
  box-shadow: 0 calc((1 - var(--e, 1)) * 40px) calc((1 - var(--e, 1)) * 64px) rgba(5, 10, 30, calc((1 - var(--e, 1)) * .35)); }

/* 7 developed: a soft edge of light passes down each block, and images settle from over-exposed to true */
html[data-x="17"][data-sfx="7"] .sec .sx:not(.big) {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--e, 1) * 150% - 50%), transparent calc(var(--e, 1) * 150%));
  mask-image: linear-gradient(180deg, #000 calc(var(--e, 1) * 150% - 50%), transparent calc(var(--e, 1) * 150%)); }
html[data-x="17"][data-sfx="7"] .sec .phd.sx, html[data-x="17"][data-sfx="7"] .sec .sx .phd, html[data-x="17"][data-sfx="7"] .sec .pj.sx .pj-fig img {
  filter: brightness(calc(1 + (1 - var(--e, 1)) * 1.6)) saturate(calc(1 - (1 - var(--e, 1)) * .7)) blur(calc((1 - var(--e, 1)) * 8px)); }
@media (prefers-reduced-motion: reduce) { html[data-x="17"] .sec .sx { -webkit-mask-image: none !important; mask-image: none !important; box-shadow: none !important; } }

/* ======================================================================
   Lower pages (about / works / advisor / flow / interview / news / faq / contact)
   Same rules as the top page: dark head that turns white, big English headings,
   blue construction lines, 12-80px type scale, 100px margins, 256px section gaps.
   ====================================================================== */
.pgbar nav { gap: 20px; font-size: 14px; }
.pgbar nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.pgbar nav a:not([aria-current]) { color: color-mix(in srgb, var(--fg) 78%, transparent); }
@media (max-width: 1180px) { .pgbar nav .jl { display: none; } }
@media (max-width: 900px) {
  .pgbar { flex-wrap: wrap; row-gap: 10px; }
  .pgbar nav { width: 100%; overflow-x: auto; scrollbar-width: none; gap: 18px; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pgbar nav::-webkit-scrollbar { display: none; }
  .pgbar nav a { white-space: nowrap; flex: none; }
}

/* page head */
.pg-top .sec-in { display: block; }
.pg-crumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; }
.pg-crumb a { color: inherit; text-decoration: none; }
.pg-crumb a:hover { color: var(--fg); }
.pg-crumb [aria-current] { color: var(--fg); }
.pg-name { font-size: clamp(56px, 16.5vw, 176px); white-space: nowrap; }
.pg-sub { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; padding-bottom: clamp(48px, 6vw, 96px); position: relative; z-index: 4; }
.pg-jp { font-size: 18px; letter-spacing: .2em; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line-strong); }
.pg-intro { display: grid; gap: 24px; max-width: 36em; }
.pg-intro .cs-lead { margin-top: 0; font-size: 32px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.pg-intro p:not(.cs-lead) { color: var(--muted); font-size: 16px; line-height: 2; }
@media (max-width: 900px) { .pg-sub { grid-template-columns: 1fr; } .pg-intro .cs-lead { font-size: 24px; } }
html[data-p="16"] .pg-top .pg-name { margin-block: 40px 96px; }
html[data-p="16"] main > .pg-top + .sec { padding-top: var(--secgap) !important; }

/* a lead and its prose side by side under a big heading */
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; margin-bottom: clamp(48px, 6vw, 88px); }
.pg-split .lead { font-size: 24px; font-weight: 500; line-height: 1.7; letter-spacing: .06em; color: var(--fg); }
.pg-split .prose p { font-size: 16px; line-height: 2; }
@media (max-width: 900px) { .pg-split { grid-template-columns: 1fr; gap: 20px; } }
.pg-note { margin-top: 32px; font-size: 14px; color: var(--muted); }
.pg-note a, .pg-more { color: var(--fg); text-underline-offset: 4px; }
.pg-more { font-weight: 500; }
.sec .draft { margin-top: 24px; }

/* about: services */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.svc li { list-style: none; display: grid; gap: 10px; align-content: start; padding: 28px 28px 40px 0; border-bottom: 1px solid var(--line); }
.svc li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.svc .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.svc .en { font: 500 40px/1.05 var(--f-disp); letter-spacing: -.02em; margin-top: 18px; }
.svc h3 { font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.svc p { font-size: 14px; line-height: 1.9; color: var(--muted); }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } .svc li, .svc li:not(:nth-child(3n + 1)) { padding: 22px 0 28px; border-left: 0; } .svc .en { font-size: 32px; } }
.pg-logo { max-width: 560px; }
.pg-logo .build { max-width: none; }
.pg-sign { display: grid; gap: 6px; margin-top: 8px; }
.pg-sign b { font-size: 24px; font-weight: 500; letter-spacing: .14em; color: var(--fg); }
.co-table { display: grid; grid-template-columns: 12em minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.co-table dt, .co-table dd { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.9; }
.co-table dt { color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .co-table { grid-template-columns: 1fr; } .co-table dt { padding-bottom: 0; border-bottom: 0; } .co-table dd { padding-top: 6px; } }

/* works: archive */
.arc { border-top: 1px solid var(--line-strong); }
.arc-row { display: grid; grid-template-columns: 3.5em minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 1.5em; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 16px; }
.arc-row .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.arc-row .tp, .arc-row .tg { font-size: 14px; color: var(--muted); }
.arc-row i { font-style: normal; color: var(--muted); text-align: right; }
.arc-row .arc-soon { margin-left: 10px; font: 400 12px/1 var(--f-mono); color: var(--muted); border: 1px solid var(--line-strong); padding: 3px 6px; vertical-align: 2px; }
a.arc-row:hover .nm { text-decoration: underline; text-underline-offset: 4px; }
.arc-head { font: 400 12px/1 var(--f-mono) !important; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; padding-block: 12px; }
@media (max-width: 760px) { .arc-row { grid-template-columns: 3em minmax(0, 1fr) 1.2em; } .arc-row .tp, .arc-row .tg { display: none; } }

/* advisor */
.chk { display: grid; border-top: 1px solid var(--line-strong); }
.chk li { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 16px; }
.chk .no { font: 400 12px/1.9 var(--f-mono); color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.plan { display: grid; gap: 20px; align-content: start; padding: 32px 32px 40px 0; border-bottom: 1px solid var(--line); }
.plan + .plan { padding-left: 32px; border-left: 1px solid var(--line); }
.plan-k { display: grid; gap: 6px; }
.plan-k .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.plan-k b { font: 500 40px/1.05 var(--f-disp); letter-spacing: -.02em; margin-top: 14px; }
.plan-k span:last-child { font-size: 14px; color: var(--muted); }
.plan-yen { font: 500 48px/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding-block: 20px; border-block: 1px solid var(--line); }
.plan-yen .u { font-size: 24px; }
.plan-yen .t { font: 400 14px/1 var(--f-jp); color: var(--muted); letter-spacing: .04em; margin-left: 6px; }
.plan-li { display: grid; gap: 10px; }
.plan-li li { list-style: none; position: relative; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.plan-li li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--blue); }
.plan-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; font-size: 14px; line-height: 1.7; }
.plan-meta dt { color: var(--muted); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan, .plan + .plan { padding: 28px 0 32px; border-left: 0; } }

/* questions */
.qa { border-top: 1px solid var(--line-strong); }
.qa-i { border-bottom: 1px solid var(--line); }
.qa-i summary { list-style: none; display: grid; grid-template-columns: 4em minmax(0, 1fr) 24px; gap: 16px; align-items: baseline; padding: 24px 0; cursor: pointer; }
.qa-i summary::-webkit-details-marker { display: none; }
.qa-i .q { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.qa-i .qt { font-size: 18px; font-weight: 500; line-height: 1.7; letter-spacing: .04em; }
.qa-i summary i { position: relative; width: 16px; height: 16px; align-self: center; }
.qa-i summary i::before, .qa-i summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: currentColor; transition: transform .4s var(--ease); }
.qa-i summary i::after { transform: rotate(90deg); }
.qa-i[open] summary i::after { transform: rotate(0deg); }
.qa-i summary:hover .qt { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.qa-a { display: grid; grid-template-columns: 4em minmax(0, 1fr) 24px; gap: 16px; padding: 0 0 28px; }
.qa-a p { grid-column: 2; font-size: 16px; line-height: 2; color: var(--muted); max-width: 40em; }
.qa-groups { display: grid; gap: 64px; }
.qa-gk { font-size: 14px; letter-spacing: .14em; color: var(--muted); margin-bottom: 16px; }
@media (max-width: 700px) { .qa-i summary, .qa-a { grid-template-columns: 3em minmax(0, 1fr) 18px; gap: 10px; } .qa-i .qt { font-size: 16px; } }

/* flow: 14 steps */
.steps14 { display: grid; gap: 72px; }
.st-grp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 5vw, 96px); }
.st-k { position: sticky; top: 96px; align-self: start; display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.st-k b { font: 500 40px/1.05 var(--f-disp); letter-spacing: -.02em; }
.st-k span { font-size: 14px; color: var(--muted); }
.st-list { border-top: 1px solid var(--line-strong); }
.st { list-style: none; display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 220px); gap: 28px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.st-no { font: 500 48px/1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.st-body { display: grid; gap: 10px; }
.st-body h3 { font-size: 20px; font-weight: 500; letter-spacing: .06em; }
.st-body p { font-size: 16px; line-height: 2; color: var(--muted); }
.st .st-ph { width: 100%; }
@media (max-width: 900px) { .st-grp { grid-template-columns: 1fr; } .st-k { position: static; } .st { grid-template-columns: 64px minmax(0, 1fr); } .st-no { font-size: 32px; } .st .st-ph { grid-column: 2; max-width: 280px; } }

/* interview */
.iv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px clamp(28px, 4vw, 64px); }
.iv { display: grid; gap: 12px; text-decoration: none; color: inherit; align-content: start; }
.iv .phd { margin-bottom: 8px; }
.iv-k { display: flex; gap: 14px; align-items: baseline; }
.iv-k .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.iv-k .en { font: 500 14px/1 var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.iv h3 { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.iv-biz { font-size: 14px; color: var(--muted); }
.iv-q { font-size: 18px; line-height: 1.8; padding-top: 12px; border-top: 1px solid var(--line); }
.iv-go { font-size: 14px; color: var(--muted); }
.iv:hover h3 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .iv-list { grid-template-columns: 1fr; } }
.iv-art { max-width: 820px; margin-inline: auto; display: grid; gap: 64px; }
.iv-meta { margin: 0; }
.iv-num { display: grid; gap: 14px; padding-block: 32px; border-block: 1px solid var(--line-strong); }
.iv-num p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 500 80px/1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.iv-num .u { font: 500 24px/1 var(--f-jp); letter-spacing: .04em; }
.iv-num i { font-style: normal; font-size: 40px; color: var(--blue); }
.iv-num figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .iv-num p { font-size: 48px; } }
.iv-sec { display: grid; gap: 16px; }
.iv-n .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.iv-sec h3 { font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.iv-qq { font-size: 16px; color: var(--muted); }
.iv-qq b { font-family: var(--f-disp); color: var(--blue); margin-right: 10px; }
.iv-aa { font-size: 16px; line-height: 2.1; }
.iv-art .next { margin-top: 0; }

/* news */
.nfilters { margin-bottom: 28px; }
.nfilters sup { font: 400 12px/1 var(--f-mono); margin-left: 4px; vertical-align: 4px; color: var(--muted); }
.news-list { border-top: 1px solid var(--line-strong); }
.news-list li { list-style: none; border-bottom: 1px solid var(--line); }
.news-list li[hidden] { display: none; }
.news-list a { display: grid; grid-template-columns: 11em minmax(0, 1fr) 1.5em; gap: 20px; align-items: baseline; padding: 20px 0; text-decoration: none; color: inherit; }
.nl-cat { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.nl-t { font-size: 16px; line-height: 1.8; }
.news-list i { font-style: normal; color: var(--muted); text-align: right; }
.news-list a:hover .nl-t { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) { .news-list a { grid-template-columns: minmax(0, 1fr) 1.2em; gap: 6px 12px; } .nl-cat { grid-column: 1 / -1; } }

/* contact form */
.ct-ways { display: grid; border-top: 1px solid var(--line-strong); max-width: 560px; }
.ct-ways > * { display: grid; grid-template-columns: minmax(0, 1fr) 1.5em; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.ct-ways .k { font-size: 18px; font-weight: 500; letter-spacing: .04em; }
.ct-ways .d { grid-column: 1; font-size: 14px; color: var(--muted); }
.ct-ways i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; color: var(--muted); text-align: right; }
.ct-form { display: grid; gap: 28px; align-content: start; }
.ct-req { font-size: 14px; color: var(--muted); }
.ct-req b, .fld label b { color: var(--blue); margin-left: 4px; font-weight: 500; }
.fld { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fld-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.fld-2 > div { display: grid; gap: 10px; min-width: 0; }
.fld label, .fld legend { font-size: 14px; letter-spacing: .06em; padding: 0; }
.fld legend { margin-bottom: 12px; }
.fld input[type="text"], .fld input[type="tel"], .fld input[type="email"], .fld textarea { width: 100%; font: inherit; font-size: 16px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 10px 0; transition: border-color .3s var(--ease); }
.fld textarea { border: 1px solid var(--line-strong); padding: 12px 14px; resize: vertical; line-height: 1.8; }
.fld input::placeholder, .fld textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.fld input:focus, .fld textarea:focus { outline: 0; border-color: var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: block; padding: 8px 16px; border: 1px solid var(--line-strong); font-size: 14px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-agree { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ct-agree input { width: 18px; height: 18px; accent-color: var(--fg); }
.ct-agree a { color: var(--fg); text-underline-offset: 4px; }
.ct-send { justify-self: start; display: inline-flex; gap: 28px; align-items: center; padding: 18px 28px; font: 500 16px/1 var(--f-jp); letter-spacing: .1em; color: var(--bg); background: var(--fg); border: 0; cursor: pointer; transition: gap .4s var(--ease); }
.ct-send:hover { gap: 40px; }
.ct-send i { font-style: normal; }
.ct-done { padding: 16px 18px; border: 1px solid var(--blue); font-size: 14px; color: var(--fg); }
@media (max-width: 700px) { .fld-2 { grid-template-columns: 1fr; } }
.fld [aria-invalid="true"] { border-color: #d9534f; }

/* page-name opening for lower pages (pattern 16/17) */
.pgop { display: none; }
html[data-p="16"].pt-enter .pgop, html.pgop-on .pgop { display: grid; }
html[data-p="16"] body.pg .pt { display: none; }
html[data-p="16"] .pt { background-color: #0a0c11; }
html[data-p="16"] .pt .logo { display: none; }
.pgop { overflow: hidden; }
.pgop .pgop-build { width: auto; max-width: none; flex: none; }
.pgop .guide { stroke-width: .22; }
.pgop .guide-label { font-size: 5px; }
.pg-glyph { font-family: var(--f-disp); font-weight: 500; font-size: 100px; letter-spacing: -4px; fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: .7; stroke-opacity: 0;
  stroke-dasharray: 600; stroke-dashoffset: 600; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(8px);
  transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) var(--d, 0s), stroke-opacity .6s ease var(--d, 0s), transform 1.4s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
    fill-opacity 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0s) * 1.4); }
.build.p-in .pg-glyph { stroke-dashoffset: 0; stroke-opacity: 1; transform: none; }
.build.done .pg-glyph { fill-opacity: 1; stroke-opacity: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) var(--d, 0s), transform 1.4s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), fill-opacity 1.1s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0s) * 1.4), stroke-opacity 1.2s ease calc(var(--d, 0s) * 1.4 + .3s); }
.pgop .guide { transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .2, 1), opacity 1.2s ease; }
.pgop .guide-label { transition: opacity 1s ease .3s; }
/* leave by fading out and lifting a little, instead of wiping the screen away */
.opening.pgop.gone { transform: none; opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(.4, 0, .2, 1), visibility 0s 1s; }
.pgop .pgop-build { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter 1s ease; }
.pgop.gone .pgop-build { transform: translateY(-24px); filter: blur(2px); }

/* lower pages: blocks that carry the current site's wording as it is */
.svc-plain li { padding-bottom: 28px; }
.svc-plain h3 { font-size: 20px; margin-top: 20px; }
.philo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.philo li { list-style: none; display: grid; gap: 18px; align-content: start; padding: 28px 28px 40px 0; border-bottom: 1px solid var(--line); }
.philo li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.philo .no { font: 500 48px/1 var(--f-disp); letter-spacing: -.03em; }
.philo p { font-size: 16px; line-height: 2; }
@media (max-width: 900px) { .philo { grid-template-columns: 1fr; } .philo li, .philo li + li { padding: 24px 0 32px; border-left: 0; } }
.plan-jp { font: 500 24px/1.4 var(--f-jp) !important; letter-spacing: .06em !important; margin-top: 14px; }
.plan-yen { font-size: 40px; }
.plan-tag { font-size: 14px; line-height: 1.8; color: var(--muted); }
.plan-sk { font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.plan-who { font-size: 14px; line-height: 1.9; padding-top: 16px; border-top: 1px solid var(--line); }
.st-flat { border-top: 1px solid var(--line-strong); }
.st-flat .st { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 260px); }
@media (max-width: 900px) { .st-flat .st { grid-template-columns: 64px minmax(0, 1fr); } }
.iv-stack { display: grid; border-top: 1px solid var(--line-strong); }
.iv-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); padding: 40px 0; border-bottom: 1px solid var(--line); }
.iv-row .phd { margin: 0; }
.iv-txt { display: grid; gap: 14px; align-content: start; }
.iv-d { font-size: 16px; line-height: 2; color: var(--muted); }
.iv-row .iv-go { justify-self: start; font-size: 14px; }
@media (max-width: 900px) { .iv-row { grid-template-columns: 1fr; } }
.iv-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.iv-p { display: grid; gap: 10px; align-content: start; }
.iv-p .phd { max-width: 160px; margin-bottom: 6px; }
.iv-p h3 { font-size: 20px; font-weight: 500; letter-spacing: .1em; }
.iv-p p:not(.label) { font-size: 14px; line-height: 1.9; color: var(--muted); }
@media (max-width: 700px) { .iv-people { grid-template-columns: 1fr; } }
.iv-intro, .iv-close { font-size: 18px; line-height: 2; padding-block: 28px; border-block: 1px solid var(--line-strong); }
.req, .opt { margin-left: 10px; font-size: 12px; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.req { border-color: var(--blue); color: var(--blue); }
.ct-terms { font-size: 14px; }
.ct-terms a { color: var(--fg); text-underline-offset: 4px; }
.pg-split .lead .label { font-size: 12px; }

/* ======================================================================
   Lower pages, three layouts (body.lay-a / .lay-b / .lay-c).
   Same rules as the top page (案17): dark head, big English headings with the
   construction, 100px margins, 256px between sections, the 12-80px type scale.
   Only the arrangement changes.
   ====================================================================== */
html[data-p="16"] main > :is(.lb-cover, .lb-metaline, .la-cover, .lc-coverrow) + .sec { padding-top: var(--secgap) !important; }
.lay .sec-in { min-width: 0; }
.lay .step { min-height: 0; }
.wtools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: 40px; }
.wfilters { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wfilters button { font: 500 14px/1.4 var(--f-disp); color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.wfilters button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.wcount { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.wcount b { font: 500 24px/1 var(--f-disp); color: var(--fg); margin-right: 6px; letter-spacing: -.02em; }
[data-wl] [hidden] { display: none !important; }

/* ---------------- A: index rail ---------------- */
.pg-top.la-top .sec-in.la-grid, .la-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.la-rail { position: sticky; top: 104px; display: grid; gap: 16px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line-strong); min-width: 0; max-height: calc(100vh - 136px); overflow-y: auto; scrollbar-width: thin; }
.la-rail-top { position: static; max-height: none; overflow: visible; margin-top: 40px; }
.la-k { display: flex; align-items: baseline; gap: 10px; }
.la-k .no { font: 500 48px/1 var(--f-disp); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.la-k .of { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .1em; }
.la-jp, .la-pjp { font-size: 16px; letter-spacing: .16em; }
.la-pjp { font-size: 18px; color: var(--muted); }
.la-prog { display: block; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.la-prog i { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(var(--rp, 0)); }
.la-sub ol { border-top: 1px solid var(--line); }
.la-sub li { list-style: none; }
.la-sub ol a { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 4px; padding: 9px 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.la-sub ol a:hover { color: var(--fg); }
.la-sub ol .no { font: 400 12px/1.9 var(--f-mono); }
.la-toc ol { border-top: 1px solid var(--line); }
.la-toc li { list-style: none; }
.la-toc a { display: grid; grid-template-columns: 2.8em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; font: 500 18px/1.3 var(--f-disp); }
.la-toc a:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.la-toc .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.la-toc .j { font: 400 12px/1 var(--f-jp); color: var(--muted); letter-spacing: .06em; }
.la-main { min-width: 0; }
.la-main > * + * { margin-top: 48px; }
.la-intro { padding-bottom: clamp(56px, 7vw, 112px); max-width: 40em; }
.la-prose { max-width: 40em; }
.la-prose p { font-size: 16px; line-height: 2; }
.la-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line-strong); }
.la-list li { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.la-list .no, .la-wk .no { font: 400 12px/1.9 var(--f-mono); color: var(--muted); }
.la-rows { border-top: 1px solid var(--line-strong); }
.la-rows li { list-style: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.la-rows .no { font: 500 48px/1 var(--f-disp); letter-spacing: -.03em; }
.la-rows p { font-size: 18px; line-height: 2; max-width: 36em; }
.la-logo .pg-logo { max-width: 640px; }
.la-greet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.la-greet .phd { width: 100%; }
.la-h { font-size: 32px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; max-width: 22em; }
.la-why { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: end; }
.la-why .phd { width: 100%; }
.la-fig img, .la-gal img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.la-fig figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.la-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.la-gal figure:nth-child(2) img { aspect-ratio: 3 / 2; }
.la-cover { padding: 0 var(--gutter); }
.la-cover img { display: block; width: 100%; max-width: 1680px; margin-inline: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.la-meta div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.la-meta dt { font: 400 12px/1.7 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.la-meta dt .jl { display: none; }
.la-client { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-block: 1px solid var(--line-strong); }
.la-client dd { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.la-tl { position: relative; margin-left: 8px; border-left: 1px solid var(--line-strong); }
.la-tl li { list-style: none; position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 0 0 64px 32px; scroll-margin-top: 120px; }
.la-tl li:last-child { padding-bottom: 0; }
.la-tl li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--blue); }
.la-tl-no { font: 500 32px/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.la-tl-b { display: grid; gap: 12px; }
.la-tl-b h3 { font-size: 20px; font-weight: 500; letter-spacing: .06em; }
.la-tl-b p { font-size: 16px; line-height: 2; color: var(--muted); max-width: 40em; }
.la-tl-ph { max-width: 420px; margin-top: 8px; }
.la-wks { border-top: 1px solid var(--line-strong); }
.la-wk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: start; }
.la-wks > .la-wk + .la-wk { margin-top: 0; }
.la-wk-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.la-wk-fig { overflow: hidden; }
.la-wk:hover .la-wk-fig img { transform: scale(1.03); }
.la-wk-tx { display: grid; gap: 10px; align-content: start; }
.la-wk .nm { font-size: 24px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; }
.la-wk .mt { font-size: 14px; color: var(--muted); line-height: 1.8; }
.la-wk .go { font-size: 14px; margin-top: 8px; }
.la-wk:hover .nm { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.la-chk { margin: 0; }
.la-wide .phd { width: 100%; }
.la-plans { border-top: 1px solid var(--line-strong); }
.la-plan { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 901px) { .la-plan-m { grid-column: 2; } }
.la-plans > .la-plan + .la-plan { margin-top: 0; }
.la-plan-k { display: grid; gap: 12px; align-content: start; }
.la-plan-k .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.la-plan-k b { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.la-plan-k .plan-yen { font-size: 40px; padding-block: 0; border: 0; }
.la-plan-m { display: grid; gap: 16px; align-content: start; }
.la-ivs { border-top: 1px solid var(--line-strong); }
.la-iv { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.la-ivs > .la-iv + .la-iv { margin-top: 0; }
.la-iv .phd { width: 100%; }
.la-iv h3 { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.la-art { max-width: none; margin: 0; }
.la-art .iv-sec { scroll-margin-top: 120px; }
.la-qas { border-top: 1px solid var(--line-strong); }
.la-qa { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); column-gap: 16px; row-gap: 12px; padding: 32px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.la-qas > .la-qa + .la-qa { margin-top: 0; }
.la-qa .q { font: 400 12px/2 var(--f-mono); color: var(--muted); letter-spacing: .08em; }
.la-qa h3 { font-size: 20px; font-weight: 500; line-height: 1.7; letter-spacing: .04em; }
.la-ans { grid-column: 2; font-size: 16px; line-height: 2; color: var(--muted); max-width: 40em; }
.la-filters { flex-direction: column; align-items: flex-start; gap: 2px; }
.la-nf .label { margin-bottom: 4px; }
.la-ways .ct-ways > * { padding: 14px 0; }
.la-ways .ct-ways .k { font-size: 16px; }
.la-ways .pg-note { margin-top: 16px; font-size: 12px; line-height: 1.8; }
.la-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.la-form > :is(fieldset, .fld:has(textarea), .ct-terms, .ct-agree, .ct-send, .ct-done) { grid-column: 1 / -1; }
.la-form > .ct-send { justify-self: start; }
.la-how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) {
  .pg-top.la-top .sec-in.la-grid, .la-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .la-rail { position: static; max-height: none; overflow: visible; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px 16px; }
  .la-rail > :not(.la-k, .la-jp) { grid-column: 1 / -1; }
  .la-rail-top { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .la-sub:not(.la-nf, .la-ways), .la-prog { display: none; }
  .la-k .no { font-size: 32px; }
  .la-list { grid-template-columns: minmax(0, 1fr); }
  .la-rows li { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .la-rows .no { font-size: 32px; }
  .la-greet, .la-wk, .la-plan, .la-iv, .la-why, .la-how { grid-template-columns: minmax(0, 1fr); }
  .la-form { grid-template-columns: minmax(0, 1fr); }
  .la-h { font-size: 24px; }
  .la-tl li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 24px; }
  .la-tl-no { font-size: 24px; }
  .la-filters { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .la-cover img { aspect-ratio: 4 / 3; }
}

/* ---------------- B: editorial spreads ---------------- */
.lb-top .sec-in { display: block; }
.lb-topline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.lb-issue { display: flex; gap: 20px; align-items: baseline; font-size: 14px; letter-spacing: .16em; color: var(--muted); }
.lb-issue .no { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; }
html[data-p="16"] .lb-top .pg-name { margin-top: 24px; }
.pgfit > span { white-space: nowrap; }
.lb-intro, .lb-split, .lb-greet, .lb-statements li, .lb-step, .lb-art, .lb-feat-tx, .lb-formwrap, .lb-why, .lb-gal, .lb-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); }
.lb-intro { row-gap: 40px; padding-bottom: clamp(64px, 8vw, 128px); }
.lb-lead { grid-column: 1 / span 8; font-size: 40px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.lb-cols { grid-column: 5 / -1; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.lb-intro-only .lb-cols { grid-column: 3 / -1; }
.lb-cols p { font-size: 16px; line-height: 2; color: var(--muted); margin-bottom: 1em; }
.lb-cover { line-height: 0; }
.lb-cover img, .lb-cover .phd { display: grid; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.lb-cover img { display: block; }
.lb-metaline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 24px var(--gutter) 0; }
.lb-metaline p { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.lb-metaline b { font-size: 16px; font-weight: 500; }
.lb-metaline .jl { display: none; }
.lb-kick { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); margin-bottom: 40px; }
.lb-kick .no { font: 500 24px/1 var(--f-disp); letter-spacing: -.01em; }
.lb-jp { font-size: 14px; letter-spacing: .16em; }
.lb-of { margin-left: auto; font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .12em; }
.lb-split { row-gap: 32px; align-items: start; margin-bottom: clamp(56px, 7vw, 112px); }
.lb-pull { grid-column: 1 / span 7; font-size: 32px; font-weight: 500; line-height: 1.75; letter-spacing: .06em; }
.lb-split > :not(.lb-pull) { grid-column: 9 / -1; }

.lb-prose { max-width: none; }
.lb-prose p { font-size: 16px; line-height: 2; }
.lb-2c { display: block; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.lb-2c p { margin-bottom: 1em; break-inside: avoid; }
.lb-after { margin-top: clamp(56px, 7vw, 96px); max-width: 1000px; }
.lb-head { font-size: 32px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; max-width: 24em; margin-bottom: 40px; }
.lb-index { border-top: 1px solid var(--line-strong); }
.lb-index li { list-style: none; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.lb-index .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lb-index .t { font-size: 40px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; }
.lb-index-2 .t { font-size: 24px; line-height: 1.6; }
.lb-statements li { list-style: none; padding: 48px 0; border-top: 1px solid var(--line); align-items: start; }
.lb-statements li:last-child { border-bottom: 1px solid var(--line); }
.lb-statements .no { grid-column: 1 / span 2; font: 500 80px/.9 var(--f-disp); letter-spacing: -.04em; }
.lb-statements li > :last-child { grid-column: 4 / span 8; }
.lb-statements li:nth-child(2) .no { grid-column: 4 / span 2; }
.lb-statements li:nth-child(2) > :last-child { grid-column: 7 / -1; }
.lb-statements p { font-size: 24px; line-height: 1.9; letter-spacing: .04em; }
.lb-iss h4 { font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; margin-bottom: 12px; }
.lb-iss p { font-size: 16px; line-height: 2; color: var(--muted); }
.lb-iss li { padding: 32px 0; }
.lb-iss .no { font-size: 48px; }
.lb-iss li > :last-child, .lb-iss li:nth-child(2) > :last-child { grid-column: 3 / -1; }
.lb-iss li:nth-child(2) .no { grid-column: 1 / span 2; }
.lb-logo { margin-bottom: clamp(56px, 7vw, 112px); }
.lb-logo .pg-logo { max-width: none; width: min(100%, 1100px); }
.lb-split-r { margin-bottom: 0; }
.lb-greet { align-items: end; }
.lb-bleed-l { grid-column: 1 / span 6; margin-left: calc(-1 * var(--gutter)); }
.lb-greet .lb-portrait { grid-column: 1 / span 5; }
@media (min-width: 901px) {
  .lb-split-r > .lb-pull { grid-column: 1 / span 4 !important; grid-row: 1 !important; font-size: 24px; }
  .lb-split-r > :not(.lb-pull) { grid-column: 5 / -1 !important; grid-row: 1 !important; }
}
.lb-bleed-r { margin-right: calc(-1 * var(--gutter)); }
.lb-bleed { margin-inline: calc(-1 * var(--gutter)); }
.lb-bleed .ba { outline: 0; margin-top: 0; }
.lb-bleed-l .phd, .lb-bleed-r .phd, .lb-bleed .phd { width: 100%; }
.lb-greet .prose { grid-column: 8 / -1; }
.lb-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lb-fig figcaption { margin: 10px 0 0 var(--gutter); font-size: 12px; color: var(--muted); }
.lb-co { columns: 2; column-gap: 64px; border-top: 1px solid var(--line-strong); }
.lb-co > div { break-inside: avoid; display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.lb-co dt { font-size: 14px; color: var(--muted); letter-spacing: .1em; }
.lb-co dd { font-size: 16px; line-height: 1.9; }
.lb-mosaic { row-gap: clamp(56px, 6vw, 96px); }
.lb-wk { grid-column: span 6; display: grid; gap: 16px; align-content: start; text-decoration: none; color: inherit; }
.lb-wk-fig { overflow: hidden; }
.lb-wk-fig img { display: block; width: 100%; aspect-ratio: var(--a, 4 / 3); object-fit: cover; transition: transform .8s var(--ease); }
.lb-wk:hover .lb-wk-fig img { transform: scale(1.03); }
.lb-wk:nth-child(5n + 1) { grid-column: 1 / -1; --a: 21 / 9; }
.lb-wk:nth-child(5n + 2) { grid-column: 1 / span 7; --a: 4 / 3; }
.lb-wk:nth-child(5n + 3) { grid-column: 9 / -1; --a: 4 / 5; margin-top: 120px; }
.lb-wk:nth-child(5n + 4) { grid-column: 2 / span 5; --a: 4 / 5; }
.lb-wk:nth-child(5n + 5) { grid-column: 8 / -1; --a: 4 / 3; margin-top: 160px; }
.lb-wk-cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.lb-wk-cap .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lb-wk-cap .nm { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.lb-wk-cap .go { font-size: 14px; }
.lb-wk-cap .mt { grid-column: 2 / -1; font-size: 14px; color: var(--muted); }
.lb-wk:hover .nm { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lb-arc { columns: 2; column-gap: 64px; border-top: 1px solid var(--line-strong); }
.lb-arc li { list-style: none; break-inside: avoid; }
.lb-arc-i { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto 1.4em; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.lb-arc-i .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lb-arc-i .nm { font-size: 18px; line-height: 1.6; }
.lb-arc-i .tp { font-size: 12px; color: var(--muted); }
.lb-arc-i i { font-style: normal; color: var(--muted); text-align: right; }
a.lb-arc-i:hover .nm { text-decoration: underline; text-underline-offset: 4px; }
.lb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: clamp(20px, 2.4vw, 40px); row-gap: 20px; border-top: 1px solid var(--line-strong); }
.lb-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; gap: 20px; align-content: start; padding-top: 32px; }
.lb-plan-no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lb-plan-yen { font: 500 48px/1.15 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lb-plan-nm { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.lb-plan-who { font-size: 18px; line-height: 1.9; padding-block: 20px; border-block: 1px solid var(--line); }
.lb-qa .qa-i summary, .lb-qa .qa-a { grid-template-columns: 96px minmax(0, 1fr) 24px; }
.lb-qa .qa-i summary { padding: 32px 0; }
.lb-qa .q { font: 500 48px/1 var(--f-disp); letter-spacing: -.03em; color: var(--fg); }
.lb-qa .qt { font-size: 24px; line-height: 1.6; }
.lb-qa .qa-a p { font-size: 18px; }
.lb-qa > .qa-i + .qa-i { margin-top: 0; }
.lb-steps { display: grid; gap: clamp(80px, 9vw, 160px); }
.lb-step { list-style: none; align-items: center; scroll-margin-top: 120px; }
.lb-step-fig { grid-column: 1 / span 7; }
.lb-step-tx { grid-column: 9 / -1; display: grid; gap: 12px; align-content: start; }
.lb-step:nth-child(even) .lb-step-fig { grid-column: 6 / -1; grid-row: 1; }
.lb-step:nth-child(even) .lb-step-tx { grid-column: 1 / span 4; grid-row: 1; }
.lb-step-fig .phd { width: 100%; }
.lb-step-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lb-step-no { display: block; font: 500 80px/1 var(--f-disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lb-step :is(h3, h4) { font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.lb-step p { font-size: 16px; line-height: 2; color: var(--muted); }
.lb-step .no { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.lb-step .phd.sm { max-width: 240px; margin-top: 8px; }
.lay .lb-tsteps .step { padding: 0; border: 0; opacity: 1; display: grid; }
.lb-planbox .plan-wrap, .lc-planc .plan-wrap { position: static; height: auto; max-height: none; background: none; padding: 0; }
.lb-planbox .plan-wrap svg, .lc-planc .plan-wrap svg { width: 100%; height: auto; max-height: 72vh; }
.lb-why { row-gap: 32px; align-items: end; }
.lb-why > .lb-fig { grid-column: 1 / span 6; }
.lb-why > div { grid-column: 8 / -1; }
.lb-aside { width: min(100%, 360px); margin: 40px 0 0 auto; }
.lb-gal { row-gap: 24px; margin-block: clamp(56px, 7vw, 112px); }
.lb-gal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-gal .g1 { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.lb-gal .g2 { grid-column: 9 / -1; aspect-ratio: 4 / 5; align-self: end; }
.lb-gal .g3 { grid-column: 2 / span 5; aspect-ratio: 4 / 3; }
.lb-gal .g4 { grid-column: 7 / -1; aspect-ratio: 3 / 2; margin-top: 80px; }
.lb-feat-tx { margin-top: 40px; row-gap: 24px; }
.lb-feat-k { grid-column: 1 / -1; display: flex; gap: 16px; align-items: baseline; }
.lb-feat-k .no, .lb-ivc .iv-k .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lb-feat-nm { grid-column: 1 / span 5; font-size: 40px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; }
.lb-feat-d { grid-column: 6 / -1; display: grid; gap: 20px; }
.lb-feat-d .iv-go, .lb-ivc .iv-go { justify-self: start; font-size: 14px; }
.lb-iv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(80px, 9vw, 144px); padding-top: 32px; border-top: 1px solid var(--line-strong); }
.lb-ivc { display: grid; gap: 14px; align-content: start; }
.lb-ivc .phd { width: 100%; margin-bottom: 8px; }
.lb-ivc h3 { font-size: 24px; font-weight: 500; letter-spacing: .06em; }
.lb-ivc .iv-d { font-size: 14px; line-height: 1.9; }
.lb-people .iv-p .phd { max-width: none; width: 100%; }
.lb-people { gap: clamp(24px, 4vw, 64px); }
.lb-lead-body { font-size: 24px; line-height: 2; margin: clamp(80px, 9vw, 144px) 0 clamp(56px, 7vw, 96px) 25%; max-width: 30em; }
.lb-arts { border-bottom: 1px solid var(--line); }
.lb-art { padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.lb-art-h { grid-column: 1 / span 4; }
.lb-art-h .lb-step-no { font-size: 48px; }
.lb-art-h h3 { font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; margin-top: 16px; }
.lb-art-b { grid-column: 6 / -1; display: grid; gap: 16px; }
.lb-close { margin-block: clamp(80px, 9vw, 144px) 0; max-width: 24em; }
.lb-filters { gap: 8px 32px; margin-bottom: 40px; }
.lb-filters button { font-size: 24px; }
.lb-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--line-strong); }
.lb-news li { list-style: none; border-bottom: 1px solid var(--line); }
.lb-news li[hidden] { display: none; }
.lb-news a { display: grid; grid-template-columns: minmax(0, 1fr) 1.5em; gap: 10px 16px; padding: 24px 0; color: inherit; text-decoration: none; height: 100%; }
.lb-news .nl-cat { grid-column: 1 / -1; }
.lb-news .nl-t { font-size: 18px; line-height: 1.8; }
.lb-news i { font-style: normal; color: var(--muted); text-align: right; }
.lb-news a:hover .nl-t { text-decoration: underline; text-underline-offset: 4px; }
.lb-ways { display: grid; border-top: 1px solid var(--line-strong); margin-bottom: clamp(80px, 9vw, 144px); }
.lb-ways > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 24px; padding: 32px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.lb-ways .k { font-size: 32px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; }
.lb-ways .d { font: 500 40px/1 var(--f-disp); letter-spacing: -.01em; }
.lb-ways i { font-style: normal; font-size: 32px; }
.lb-ways a:hover .k { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.lb-formwrap { align-items: start; }
.lb-formnote { grid-column: 1 / span 3; margin-top: 0; font-size: 14px; line-height: 1.9; }
.lb-form { grid-column: 5 / -1; gap: 0; border-top: 1px solid var(--line-strong); }
.lb-form > .fld { padding: 24px 0; border-bottom: 1px solid var(--line); }
.lb-form > .fld:not(fieldset) { grid-template-columns: 196px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
.lb-form > :is(.ct-terms, .ct-agree) { margin-top: 24px; }
.lb-form > .ct-send { margin-top: 32px; }
.lb-form > .ct-done { margin-top: 20px; }
@media (max-width: 1199px) {
  .lb-plan-yen { font-size: 32px; }
  .lb-index .t { font-size: 32px; }
}
@media (max-width: 900px) {
  .lb-intro, .lb-split, .lb-greet, .lb-statements li, .lb-step, .lb-art, .lb-feat-tx, .lb-formwrap, .lb-why, .lb-gal, .lb-mosaic { grid-template-columns: minmax(0, 1fr); }
  :is(.lb-intro, .lb-split, .lb-greet, .lb-statements li, .lb-step, .lb-art, .lb-feat-tx, .lb-formwrap, .lb-why, .lb-gal, .lb-mosaic) > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
  .lb-lead { font-size: 24px; }
  .lb-cols, .lb-2c, .lb-co, .lb-arc { columns: 1; }
  .lb-cover img, .lb-cover .phd { aspect-ratio: 4 / 3; }
  .lb-metaline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-pull, .lb-head { font-size: 24px; }
  .lb-index li { grid-template-columns: 48px minmax(0, 1fr); padding: 18px 0; }
  .lb-index .t { font-size: 24px; }
  .lb-index-2 .t { font-size: 18px; }
  .lb-statements li { row-gap: 16px; padding: 32px 0; }
  .lb-statements .no { font-size: 48px; }
  .lb-statements p { font-size: 18px; }
  .lb-iss h4 { font-size: 20px; }
  .lb-wk .lb-wk-fig img { aspect-ratio: 4 / 3; }
  .lb-wk-cap .nm { font-size: 20px; }
  .lb-plans, .lb-iv3, .lb-news { grid-template-columns: minmax(0, 1fr); }
  .lb-plan { padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .lb-plan-yen { font-size: 40px; }
  .lb-qa .qa-i summary, .lb-qa .qa-a { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 10px; }
  .lb-qa .q { font-size: 32px; }
  .lb-qa .qt { font-size: 18px; }
  .lb-qa .qa-a p { font-size: 16px; }
  .lb-step { row-gap: 20px; }
  .lb-step-no { font-size: 48px; }
  .lb-feat-nm { font-size: 32px; }
  .lb-lead-body { margin-left: 0; font-size: 18px; }
  .lb-art { row-gap: 16px; padding: 40px 0; }
  .lb-filters button { font-size: 18px; }
  .lb-ways .k { font-size: 20px; }
  .lb-ways .d { font-size: 32px; }
  .lb-ways i { font-size: 24px; }
  .lb-ways > div { grid-template-columns: minmax(0, 1fr); }
  .lb-form > .fld:not(fieldset) { grid-template-columns: minmax(0, 1fr); }
  .lb-gal > * { aspect-ratio: 4 / 3 !important; }
  .lb-fig figcaption { margin-left: 0; }
  .lb-bleed-l { margin-left: calc(-1 * var(--gutter)); }
}

/* ---------------- C: specification sheet ---------------- */
.lc-top .sec-in { display: block; }
html[data-p="16"] .lc-top .pg-name { margin-top: 32px; }
.lc-headcells { margin-bottom: clamp(64px, 8vw, 128px); }
.lc-h3 { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); }
.lc-h2 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.lc-h1 { grid-template-columns: minmax(0, 420px); }
.lc-blockcell { padding: 0; gap: 0; }
.lc-blockcell .lc-k { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.lc-block > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.lc-block > div:last-child { border-bottom: 0; }
.lc-block dt { padding: 10px 16px; border-right: 1px solid var(--line); font: 400 12px/1.7 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lc-block dd { padding: 10px 16px; font-size: 14px; line-height: 1.7; min-width: 0; }
.lc-block a { color: inherit; text-underline-offset: 3px; }
.lc-cells { display: grid; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.lc-cells + .lc-cells, .lc-ruler + .lc-cells { border-top: 0; }
.lc-cell { display: grid; gap: 14px; align-content: start; padding: 24px; min-width: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); color: inherit; text-decoration: none; margin: 0; }
.lc-c1 { grid-template-columns: minmax(0, 1fr); }
.lc-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lc-c75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lc-c48 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.lc-k { font: 400 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.lc-code { display: block; margin-bottom: 6px; font: 400 12px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--blue); }
.lc-h { font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: .06em; }
.lc-h-lg { font-size: 32px; max-width: 24em; margin-bottom: 40px; }
.lc-lead { font-size: 24px; font-weight: 500; line-height: 1.75; letter-spacing: .06em; }
.lc-txt, .lc-txt p { font-size: 16px; line-height: 2; color: var(--muted); }
.lc-txt p + p { margin-top: 1em; }
.lc-txt a, .lc-cell .pg-more { color: var(--fg); }
.lc-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lc-fig .phd { width: 100%; }
.lc-fig figcaption { font-size: 12px; color: var(--muted); }
.lc-fig .pg-logo { max-width: 560px; }
.lc-sheet { border: 1px solid var(--line-strong); }
.lc-strip { display: grid; grid-template-columns: 8em repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-strong); font: 400 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lc-strip span { padding: 13px 16px; border-right: 1px solid var(--line); min-width: 0; }
.lc-strip span:last-child { border-right: 0; text-align: right; }
.lc-body { padding: clamp(24px, 3vw, 48px); }
.lc-body > * + * { margin-top: 40px; }
.lc-body > .lc-cells + .lc-cells, .lc-body > .lc-ruler + .lc-cells, .lc-body > .lc-cells + .lc-ruler { margin-top: 0; }
.lc-spec > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lc-spec > div:last-child { border-bottom: 0; }
.lc-spec dt { font: 400 12px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lc-spec dd { font-size: 16px; line-height: 1.9; min-width: 0; }
.lc-person { display: grid; gap: 16px; align-items: start; }
.lc-person .phd { width: 140px; }
.lc-table { border: 1px solid var(--line-strong); border-bottom: 0; }
.lc-tr { display: grid; border-bottom: 1px solid var(--line-strong); color: inherit; text-decoration: none; }
.lc-tr > * { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.lc-tr > :last-child { border-right: 0; }
.lc-tr .no { font: 400 12px/1.9 var(--f-mono); letter-spacing: .08em; color: var(--blue); }
.lc-th { font: 400 12px/1.4 var(--f-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lc-th > * { color: var(--muted) !important; }
.lc-tr i { font-style: normal; color: var(--muted); text-align: center; }
a.lc-tr:hover .nm, a.lc-tr:hover .nl-t { text-decoration: underline; text-underline-offset: 4px; }
.lc-arc .lc-tr { grid-template-columns: 4.5em minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 4.5em; font-size: 16px; }
.lc-arc .tp, .lc-arc .tg { font-size: 14px; color: var(--muted); }
.lc-news .lc-tr { grid-template-columns: 4.5em 12em minmax(0, 1fr) 4.5em; }
.lc-news ul li { list-style: none; }
.lc-news li[hidden] { display: none; }
.lc-news .nl-cat { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.lc-news .nl-t { font-size: 16px; line-height: 1.8; }
.lc-iss .lc-tr { grid-template-columns: 5em minmax(0, 2fr) minmax(0, 3fr); }
.lc-iss b { font-size: 16px; font-weight: 500; line-height: 1.7; }
.lc-iss span:last-child { font-size: 14px; line-height: 1.9; color: var(--muted); }
.lc-qa .lc-tr, .lc-art .lc-tr { grid-template-columns: 5.5em minmax(0, 4fr) minmax(0, 7fr); scroll-margin-top: 100px; }
.lc-qa h3, .lc-art .lc-h { font-size: 18px; font-weight: 500; line-height: 1.7; letter-spacing: .04em; }
.lc-qa p, .lc-art .iv-aa { font-size: 16px; line-height: 2; color: var(--muted); }
.lc-art .iv-qq { margin-top: 10px; font-size: 14px; }
.lc-dl { border: 1px solid var(--line-strong); border-bottom: 0; }
.lc-dl > div { display: grid; grid-template-columns: 16em minmax(0, 1fr); border-bottom: 1px solid var(--line-strong); }
.lc-dl dt { padding: 16px; border-right: 1px solid var(--line); font-size: 14px; color: var(--muted); letter-spacing: .06em; }
.lc-dl dd { padding: 16px; font-size: 16px; line-height: 1.9; min-width: 0; }
.lc-dl a { color: var(--fg); text-underline-offset: 4px; }
.lc-check li { list-style: none; display: grid; grid-template-columns: 28px 3em minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.lc-check li:last-child { border-bottom: 0; }
.lc-check .box { width: 14px; height: 14px; border: 1px solid var(--blue); align-self: center; }
.lc-check .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
.lc-scroll { overflow-x: auto; }
.lc-cmp { width: 100%; min-width: 760px; border-collapse: collapse; }
.lc-cmp :is(th, td) { padding: 16px; border: 1px solid var(--line-strong); vertical-align: top; text-align: left; font-size: 14px; line-height: 1.8; }
.lc-cmp thead th { font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.lc-cmp tbody th { width: 9em; font-weight: 400; color: var(--muted); }
.lc-cmp .lc-yen td { font: 500 32px/1.2 var(--f-disp); letter-spacing: -.01em; }
.lc-cmp .plan-li li { font-size: 14px; }
.lc-wk { gap: 12px; }
.lc-wk-fig { overflow: hidden; }
.lc-wk-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.lc-wk:hover .lc-wk-fig img { transform: scale(1.03); }
.lc-wk .nm { font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.lc-wk:hover .nm { text-decoration: underline; text-underline-offset: 4px; }
.lc-wk .go { font-size: 14px; }
.lc-mini > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.lc-mini dt { font: 400 12px/1.9 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-tools { padding: 14px 16px; border: 1px solid var(--line-strong); margin-bottom: 0; }
.lc-tools + .lc-cells { border-top: 0; }
.lc-body > .lc-tools + .lc-cells { margin-top: 0; }
.lc-seg { display: grid; grid-template-columns: 8em minmax(0, 1fr); align-items: center; border: 1px solid var(--line-strong); }
.lc-seg .lc-k { padding: 14px 16px; border-right: 1px solid var(--line); align-self: stretch; }
.lc-filters { padding: 8px 16px; margin-bottom: 0; }
.lc-body > .lc-seg + .lc-table { margin-top: 0; border-top: 0; }
.lc-ruler ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-block: 0; }
.lc-ruler li { list-style: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); min-width: 0; }
.lc-ruler li:nth-child(7n) { border-right: 0; }
.lc-ruler a { display: grid; gap: 6px; padding: 10px 8px 12px; color: inherit; text-decoration: none; font-size: 12px; line-height: 1.5; }
.lc-ruler .no { font: 400 12px/1 var(--f-mono); color: var(--blue); }
.lc-ruler a:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.lc-step { scroll-margin-top: 100px; }
.lc-step .phd { width: 100%; }
.lc-cells .step { padding: 24px; opacity: 1; border-top: 0; display: grid; min-height: 0; align-content: start; }
.lc-stepfig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.lc-cells .step .phd.sm { max-width: 200px; }
.lc-coverrow { padding: 0 var(--gutter); }
.lc-coverrow .lc-cell { border: 1px solid var(--line-strong); max-width: 1680px; margin-inline: auto; }
.lc-coverrow img { aspect-ratio: 21 / 9; }
.lc-form { gap: 0; border: 1px solid var(--line-strong); border-bottom: 0; }
.lc-form > .fld { border-bottom: 1px solid var(--line-strong); }
.lc-form > .fld:not(fieldset) { grid-template-columns: 240px minmax(0, 1fr); gap: 0; align-items: stretch; }
.lc-form > .fld:not(fieldset) > label { padding: 16px; border-right: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lc-form > .fld:not(fieldset) > :is(input, textarea) { margin: 8px 16px; width: auto; }
.lc-form > fieldset.fld { padding: 16px; }
.lc-form > :is(.ct-terms, .ct-agree) { padding: 16px 16px 0; }
.lc-form > .ct-send { margin: 20px 16px; }
.lc-form > .ct-done { margin: 0 16px 16px; }
.lc-form::after { content: ""; display: block; border-bottom: 1px solid var(--line-strong); }
.lc-body > .lc-dl + .pg-note { margin-top: 24px; }
@media (max-width: 1199px) {
  .lc-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-h3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lc-h3 > .lc-text-cell { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .lc-c2, .lc-c3, .lc-c4, .lc-c75, .lc-c48, .lc-h1, .lc-h2, .lc-h3 { grid-template-columns: minmax(0, 1fr); }
  .lc-cell { padding: 20px; }
  .lc-strip { grid-template-columns: 6em minmax(0, 1fr); }
  .lc-strip span:nth-child(n + 3) { display: none; }
  .lc-strip span:nth-child(2) { border-right: 0; }
  .lc-body { padding: 20px; }
  .lc-h-lg { font-size: 24px; }
  .lc-lead { font-size: 20px; }
  .lc-arc .lc-tr { grid-template-columns: 3.4em minmax(0, 1fr) 3em; }
  .lc-arc .tp, .lc-arc .tg { display: none; }
  .lc-news .lc-tr { grid-template-columns: minmax(0, 1fr) 3em; }
  .lc-news .no { display: none; }
  .lc-news .nl-cat { grid-column: 1 / -1; padding-bottom: 0; border-right: 0; }
  .lc-news .lc-th { display: none; }
  .lc-iss .lc-tr, .lc-qa .lc-tr, .lc-art .lc-tr { grid-template-columns: 4.4em minmax(0, 1fr); }
  .lc-iss .lc-tr > :last-child, .lc-qa .lc-tr > :last-child, .lc-art .lc-tr > :last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .lc-dl > div { grid-template-columns: minmax(0, 1fr); }
  .lc-dl dt { border-right: 0; padding-bottom: 0; }
  .lc-dl dd { padding-top: 6px; }
  .lc-seg { grid-template-columns: minmax(0, 1fr); }
  .lc-seg .lc-k { border-right: 0; border-bottom: 1px solid var(--line); }
  .lc-form > .fld:not(fieldset) { grid-template-columns: minmax(0, 1fr); }
  .lc-form > .fld:not(fieldset) > label { border-right: 0; padding-bottom: 0; }
  .lc-person { grid-template-columns: 88px minmax(0, 1fr); }
  .lc-spec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lc-coverrow img { aspect-ratio: 4 / 3; }
}
/* full-bleed figures carry their 15% guide lines past the page edge: clip them without making a scroll box (sticky rails keep working) */
.lay main { overflow-x: clip; }
/* long Japanese phrases break inside narrow cells instead of running out of them */
.lay :is(main, .pg-top) { overflow-wrap: anywhere; }
.la-plan-k .plan-yen { font-size: 32px; }
.lc-headcells .lc-lead { font-size: 20px; }
/* reduced motion forces every scroll-effect child visible: the hidden native checkboxes of the chips stay hidden */
html[data-x="17"] .sec .sx :is(.chip input, .ba input) { opacity: 0 !important; }
.lb-people .iv-p .phd { width: 72%; }
@media (max-width: 900px) {
  /* rail head on phones: crumb, page name and intro first, then the page index */
  .pg-top.la-top .la-rail-top { display: contents; }
  .la-top .pg-crumb { order: 0; margin-top: 24px; }
  .la-top .la-main { order: 1; }
  .la-top .la-pjp { order: 2; padding-top: 16px; border-top: 1px solid var(--line-strong); }
  .la-top :is(.la-toc, .la-meta) { order: 3; }
  html[data-p="16"] .la-top .pg-name { margin-top: 8px; }
}
@media (max-width: 900px) {
  .lc-tr > * { padding: 12px 10px; }
  .lc-arc .lc-th { display: none; }
  .lb-arc-i { grid-template-columns: 2.6em minmax(0, 1fr) 1.4em; }
  .lb-arc-i .tp { display: none; }
}
.lb-arc-i .tg { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* ---- review fixes ---- */
.lb-iss li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
.lb-iss li .no, .lb-iss li:nth-child(2) .no { grid-column: 1; }
.lb-iss li > :last-child, .lb-iss li:nth-child(2) > :last-child { grid-column: 2; }
.lc-th > * { overflow-wrap: normal; white-space: nowrap; }
.lc-arc .lc-tr { grid-template-columns: 5em minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 5em; }
.lc-news .lc-tr { grid-template-columns: 5em 12em minmax(0, 1fr) 5em; }
.arc-row .tg { font-size: 12px; }
.lc-fill { min-height: 1px; }
[data-wl].filtered .lc-fill { display: none; }
.lb-wk:nth-child(5n + 4):last-child { grid-column: 3 / span 8; --a: 16 / 9; }
.lc-plancards { display: none; }
.lc-2c { columns: 2; column-gap: 48px; }
.lc-2c p { break-inside: avoid; }
.lb-bleed .ba-cap { padding-inline: var(--gutter); }
/* forms: chip groups keep their label in the same column as every other field */
.lc-form > fieldset.fld { padding: 0; display: block; background: linear-gradient(var(--line), var(--line)) 240px 0 / 1px 100% no-repeat; }
.lc-form > fieldset.fld > legend { float: left; width: 240px; box-sizing: border-box; padding: 16px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lc-form > fieldset.fld > .chips { padding: 12px 16px; overflow: hidden; }
.lb-form > fieldset.fld { display: block; }
.lb-form > fieldset.fld > legend { float: left; width: 220px; box-sizing: border-box; margin: 0; padding: 10px 0 0; }
.lb-form > fieldset.fld > .chips { overflow: hidden; padding-left: 0; }
@media (max-width: 900px) {
  .lc-cmp, .lc-scroll { display: none; }
  .lc-plancards { display: grid; }
  .lc-2c { columns: 1; }
  .lc-ruler ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-ruler li:nth-child(7n) { border-right: 1px solid var(--line); }
  .lc-ruler li:nth-child(2n) { border-right: 0; }
  .lc-form > fieldset.fld { background: none; }
  .lc-form > fieldset.fld > legend, .lb-form > fieldset.fld > legend { float: none; width: auto; }
  .lc-form > fieldset.fld > legend { padding-bottom: 0; }
  .lb-form > fieldset.fld > .chips { padding-left: 0; margin-top: 12px; }
  .lb-plans { grid-template-rows: none; }
  .lb-plan { grid-row: auto; grid-template-rows: none; }
  .lb-wk:nth-child(5n + 4):last-child { --a: 4 / 3; }
  .la-client { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lc-fill { display: none; }
  /* rail layout on phones: the section's number, name and progress stay pinned under the header */
  .la-sec .la-rail { position: sticky; top: var(--barh, 92px); z-index: 6; background: var(--bg); padding: 10px 0 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-top: 0; box-shadow: 0 1px 0 var(--line); }
  .la-sec .la-rail .la-prog { display: block; grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); }
  .la-sec .la-rail .la-k .no { font-size: 24px; }
}
@media (max-width: 900px) {
  .la-sec .la-rail:has(.la-nf, .la-ways) { position: static; box-shadow: none; margin-inline: 0; padding-inline: 0; }
  .la-sec .la-rail:has(.la-nf, .la-ways) .la-prog { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { html[data-x="17"] .sec .sx .ba .after { clip-path: inset(0 0 0 var(--x)) !important; } }
.lb-iss li { align-items: baseline; }

/* ======================================================================
   Layout D — the rail, refined.
   One rail for the whole page that follows the reading: a rolling chapter
   number, a blue marker that slides to the open chapter, chapter progress
   lines, the sub-index of the open chapter, and a call to the form.
   Phones get a chapter bar under the header that opens the page index.
   ====================================================================== */
.lay-d { --rw: 248px; --rgap: clamp(48px, 6vw, 112px); }
@media (max-width: 1199px) { .lay-d { --rw: 216px; } }
.pg-top.ld-top .sec-in.ld-grid, .ld-wrap { display: grid; grid-template-columns: var(--rw) minmax(0, 1fr); column-gap: var(--rgap); align-items: start; }
.ld-hl { display: grid; gap: 14px; align-content: start; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line-strong); min-width: 0; }
.ld-pjp { font-size: 18px; letter-spacing: .2em; color: var(--muted); }
.ld-meta { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ld-meta b { font-weight: 500; color: var(--fg); margin-right: 4px; }
.ld-hl .la-meta { margin-top: 10px; }
.ld-hr { min-width: 0; }
.ld-intro { padding-bottom: clamp(56px, 7vw, 112px); max-width: 40em; }
.ld-cover { margin-top: 0; }
.ld-wrap { max-width: calc(1680px + 2 * var(--gutter)); margin-inline: auto; padding: var(--secgap) var(--gutter) 0; }
.ld-body { min-width: 0; }
.ld-body > .sec { padding-inline: 0 !important; padding-top: 0 !important; }
.ld-sec { scroll-margin-top: calc(var(--barh, 64px) + 24px); }
.lay-d main [id] { scroll-margin-top: calc(var(--barh, 64px) + 32px); }
.ld-sec > * + * { margin-top: 48px; }
.ld-sec .la-wks > .la-wk + .la-wk, .ld-sec .la-ivs > .la-iv + .la-iv, .ld-sec .la-qas > .la-qa + .la-qa, .ld-sec .la-plans > .la-plan + .la-plan { margin-top: 0; }

/* the rail */
.ld-rail { align-self: stretch; min-width: 0; }
/* 追従レールの止まり位置を本文の終わりに揃え、次のセクション見出しとの間にセクション間隔を確保 */
@media (min-width: 901px) { .ld-rail { padding-bottom: var(--secgap); } }
.ld-rail-in { position: sticky; top: calc(var(--barh, 64px) + 40px); display: flex; flex-direction: column; max-height: calc(100vh - var(--barh, 64px) - 64px); padding-bottom: 8px; }
.ld-rail-in > * { flex: none; }
/* only the index scrolls when it is longer than the screen; the number and the button stay put */
.ld-rail-in > .ld-nav { flex: 0 1 auto; min-height: 120px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ld-rail-in > .ld-nav::-webkit-scrollbar { display: none; }
.ld-nav.ld-scrolls { -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent); }
.ld-cur { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 8px; padding: 16px 0 20px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.ld-roll { display: block; height: 1em; overflow: hidden; font: 500 64px/1 var(--f-disp); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ld-roll-in { display: flex; flex-direction: column; transform: translateY(calc(var(--i, 0) * -1em)); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.ld-roll-in span { display: block; height: 1em; }
.ld-cur .of { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
.ld-cur-j { grid-column: 1 / -1; font-size: 14px; letter-spacing: .16em; color: var(--muted); transition: opacity .3s; }
.ld-nav { position: relative; margin-top: 4px; }
.ld-toc { border-left: 1px solid var(--line); }
.ld-toc > li { list-style: none; }
.ld-toc > li > a { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 6px; align-items: baseline; padding: 14px 0 14px 16px; color: var(--muted); text-decoration: none; transition: color .35s var(--ease); }
.ld-toc > li > a .no { grid-row: 1 / span 2; font: 400 12px/1.6 var(--f-mono); letter-spacing: .06em; }
.ld-toc > li > a .t { font: 500 18px/1.25 var(--f-disp); letter-spacing: -.005em; }
.ld-toc > li > a .j { grid-column: 2; font-size: 12px; letter-spacing: .12em; }
.ld-toc > li > a:hover, .ld-toc > li.on > a { color: var(--fg); }
.ld-toc > li > a:hover .t { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ld-sp { position: absolute; left: 16px; right: 0; bottom: 0; height: 1px; background: var(--line); overflow: hidden; }
.ld-sp::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(var(--sp, 0)); transition: transform .2s linear; }
.ld-ind { position: absolute; left: -.5px; top: 0; width: 2px; height: var(--ih, 0px); background: var(--blue); transform: translateY(var(--iy, 0px)); transition: transform .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1); z-index: 1; }
.ld-subw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.ld-toc > li.on .ld-subw { grid-template-rows: 1fr; }
.ld-sub { overflow: hidden; min-height: 0; padding: 0 0 0 16px; }
.ld-sub li { list-style: none; }
.ld-sub li:first-child { padding-top: 8px; }
.ld-sub li:last-child { padding-bottom: 12px; }
.ld-sub a { position: relative; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 4px; padding: 7px 0; font-size: 12px; line-height: 1.75; letter-spacing: .04em; color: var(--muted); text-decoration: none; transition: color .3s var(--ease); }
.ld-sub .no { font: 400 12px/1.7 var(--f-mono); }
.ld-sub a:hover, .ld-sub a.on { color: var(--fg); }
.ld-sub a.on::before { content: ""; position: absolute; left: -16px; top: 50%; width: 8px; height: 1px; background: var(--blue); }
.ld-extra { margin-top: 28px; }
.ld-extra .la-sub { display: block; }
.ld-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding: 14px 16px; border: 1px solid var(--line-strong); color: var(--fg); text-decoration: none; font-size: 14px; letter-spacing: .08em; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.ld-cta i { font-style: normal; transition: transform .35s var(--ease); }
.ld-cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ld-cta:hover i { transform: translateX(4px); }
.lay-d :is(.ld-rail, .ld-bar, .ld-next) a:focus-visible, .ld-next:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* the end of a chapter points to the next one */
.ld-next { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px 18px; margin-top: clamp(96px, 10vw, 160px) !important; padding: 22px 0 26px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ld-next .label { grid-column: 1 / -1; }
.ld-next .no { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .1em; }
.ld-next b { font: 500 32px/1.1 var(--f-disp); letter-spacing: -.02em; }
.ld-next .j { font-size: 14px; color: var(--muted); letter-spacing: .12em; }
.ld-next i { font-style: normal; font-size: 20px; transition: transform .4s var(--ease); }
.ld-next:hover b { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ld-next:hover i { transform: translateY(4px); }

/* refinements of the rail layout's blocks */
.lay-d .la-list li, .lay-d .la-rows li, .lay-d .la-wk, .lay-d .la-iv, .lay-d .la-qa, .lay-d .la-plan { transition: background-color .35s var(--ease); }
.lay-d a.la-wk:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.lay-d .la-wk { padding-inline: 12px; margin-inline: -12px; }
.lay-d .la-tl li::before { background: var(--blue); border-color: var(--blue); width: 7px; height: 7px; left: -4px; }

/* phones: a chapter bar under the header that opens the page index */
.ld-bar { display: none; }
@media (max-width: 900px) {
  .pg-top.ld-top .sec-in.ld-grid, .ld-wrap { grid-template-columns: minmax(0, 1fr); }
  .pg-top.ld-top .ld-hl { display: contents; }
  .ld-top .pg-crumb { order: 0; margin-top: 24px; }
  .ld-top .ld-hr { order: 1; }
  html[data-p="16"] .ld-top .pg-name { margin-top: 8px; }
  .ld-top .ld-pjp { order: 2; padding-top: 16px; border-top: 1px solid var(--line-strong); }
  .ld-top .ld-meta { order: 3; margin-top: 10px; }
  .ld-top .la-meta { order: 4; }
  .ld-rail-in { position: static; max-height: none; overflow: visible; }
  .ld-rail :is(.ld-cur, .ld-nav, .ld-cta) { display: none; }
  .ld-extra { margin: 0 0 40px; }
  .ld-wrap { row-gap: 0; }
  .ld-bar { display: block; position: sticky; top: var(--barh, 92px); z-index: 8; background: var(--bg); border-block: 1px solid var(--line); margin-top: 48px; }
  .ld-bar summary { list-style: none; position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto 14px; align-items: baseline; gap: 10px; padding: 13px var(--gutter); cursor: pointer; }
  .ld-bar summary::-webkit-details-marker { display: none; }
  .ld-bar-no { font: 500 20px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
  .ld-bar-of { font: 400 12px/1 var(--f-mono); color: var(--muted); }
  .ld-bar-t { font-size: 14px; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ld-bar-m { font: 400 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); }
  .ld-bar summary i { align-self: center; width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
  .ld-bar[open] summary i { transform: translateY(2px) rotate(-135deg); }
  .ld-bar-p { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--blue); transform-origin: left; transform: scaleX(var(--pp, 0)); }
  .ld-bar nav { max-height: 62vh; overflow-y: auto; padding: 0 var(--gutter) 12px; border-top: 1px solid var(--line); }
  .ld-bar nav li { list-style: none; }
  .ld-bar nav a { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; letter-spacing: .06em; }
  .ld-bar nav a .no { font: 400 12px/1.8 var(--f-mono); }
  .ld-bar nav a.on { color: var(--fg); }
  .ld-bar nav ol ol a { padding: 10px 0 10px 2.8em; font-size: 12px; line-height: 1.7; grid-template-columns: 3.4em minmax(0, 1fr); }
  .ld-wrap { padding-top: calc(var(--secgap) - 48px); }
  .ld-next { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ld-next .no { grid-column: 1; grid-row: 2; }
  .ld-next b { grid-column: 2; grid-row: 2; }
  .ld-next i { grid-column: 3; grid-row: 2; }
  .ld-next .j { grid-column: 2 / -1; grid-row: 3; }
  .ld-next b { font-size: 24px; }
  .lay-d .la-wk { padding-inline: 0; margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .ld-roll-in, .ld-ind, .ld-subw { transition: none; } }

.ld-cur-one { grid-template-columns: minmax(0, 1fr); padding-bottom: 16px; }
.ld-cur-one .ld-cur-j { font-size: 16px; color: var(--fg); }
.ld-rail .la-filters { gap: 0; }
.ld-rail .la-filters button { display: flex; justify-content: space-between; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.ld-rail .la-filters button[aria-pressed="true"] { text-decoration: none; color: var(--fg); box-shadow: inset 2px 0 0 var(--blue); padding-left: 12px; }
.ld-rail .la-filters button { transition: padding .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
@media (max-width: 900px) {
  .ld-rail .ld-cur-one { display: none; }
  .ld-rail .la-filters { flex-direction: column; flex-wrap: nowrap; }
  .ld-wrap:not(:has(.ld-nav)) { padding-top: var(--secgap); }
}
.ld-sec > .td { margin: 0 !important; }

/* ======================================================================
   Layout D: five motions for the rail (html[data-rm="1".."5"]; none = the current D)
   ====================================================================== */
.ld-axis, .ld-brk { display: none; }
.ld-toc > li > a .t .ch { display: inline; }
:is([data-rm="1"], [data-rm="2"], [data-rm="3"], [data-rm="4"], [data-rm="5"]) .ld-toc > li > a { transition: color .5s var(--ease); }

/* 1 輪郭から塗りへ — chapters wait as outlines; the open one fills with ink as you read it */
[data-rm="1"] .ld-ind, [data-rm="1"] .ld-sp { display: none; }
[data-rm="1"] .ld-toc { border-left-color: transparent; }
[data-rm="1"] .ld-toc > li { --fill: 0; }
[data-rm="1"] .ld-toc > li.done { --fill: 1; }
[data-rm="1"] .ld-toc > li.on { --fill: max(.06, var(--sp, 0)); }
[data-rm="1"] .ld-toc > li > a { padding-left: 0; grid-template-columns: 2.4em minmax(0, 1fr); }
[data-rm="1"] .ld-toc > li > a .t { font-size: 24px; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: .8px var(--muted);
  background: linear-gradient(90deg, var(--fg) 0 47%, color-mix(in srgb, var(--blue) 70%, var(--fg)) 49.5%, transparent 52% 100%) 0 0 / 210% 100% no-repeat;
  background-position: calc((1 - var(--fill)) * 100%) 0; -webkit-background-clip: text; background-clip: text;
  transition: background-position .45s cubic-bezier(.3, .7, .3, 1), -webkit-text-stroke-color .5s var(--ease); }
[data-rm="1"] .ld-toc > li.on > a .t, [data-rm="1"] .ld-toc > li.done > a .t, [data-rm="1"] .ld-toc > li > a:hover .t { -webkit-text-stroke-color: var(--fg); text-decoration: none; }
[data-rm="1"] .ld-toc > li > a:hover .t { background-position: calc((1 - max(var(--fill), .22)) * 100%) 0; }
[data-rm="1"] .ld-toc > li > a { align-items: start; }
[data-rm="1"] .ld-toc > li > a .no { grid-row: 1; align-self: start; }
[data-rm="1"] .ld-toc > li > a .j { justify-self: start; opacity: .55; transition: opacity .5s var(--ease), color .5s var(--ease); }
[data-rm="1"] .ld-toc > li.on > a .j { opacity: 1; }
[data-rm="1"] .ld-toc > li.on > a .no { color: var(--blue); }

/* 2 フォーカス — the open chapter comes into focus, the others step back out of it */
[data-rm="2"] .ld-sp { display: none; }
[data-rm="2"] .ld-toc > li > a { transition: opacity .7s var(--ease), filter .7s var(--ease), color .5s var(--ease); }
[data-rm="2"] .ld-toc > li:not(.on) > a { opacity: .32; filter: blur(1.4px); }
[data-rm="2"] .ld-toc > li:has(+ li.on) > a, [data-rm="2"] .ld-toc > li.on + li > a { opacity: .55; filter: blur(.6px); }
[data-rm="2"] .ld-toc > li > a:hover { opacity: 1 !important; filter: none !important; }
[data-rm="2"] .ld-toc > li > a .t { display: inline-block; transform-origin: 0 85%; transition: transform .9s cubic-bezier(.2, .9, .25, 1.15), letter-spacing .9s var(--ease); }
[data-rm="2"] .ld-toc > li.on > a .t { transform: scale(1.42); letter-spacing: -.015em; }
[data-rm="2"] .ld-toc > li > a .j { transition: transform .9s cubic-bezier(.2, .9, .25, 1.15); }
[data-rm="2"] .ld-toc > li.on > a .j { transform: translateY(8px); }
[data-rm="2"] .ld-toc > li.on > a { padding-block: 26px 22px; }
[data-rm="2"] .ld-toc > li > a { transition: opacity .7s var(--ease), filter .7s var(--ease), padding .9s cubic-bezier(.2, .9, .25, 1.1); }
[data-rm="2"] .ld-ind { width: 3px; transition: transform .9s cubic-bezier(.2, .9, .25, 1.1), height .9s cubic-bezier(.2, .9, .25, 1.1); }

/* 3 作図ブラケット — a drafting bracket travels to the open chapter and reads out where you are */
[data-rm="3"] .ld-ind { display: none; }
[data-rm="3"] .ld-toc { border-left-color: transparent; background: repeating-linear-gradient(var(--line) 0 1px, transparent 1px 8px) 0 0 / 5px 100% no-repeat; }
[data-rm="3"] .ld-toc > li > a { padding-left: 22px; }
[data-rm="3"] .ld-brk { display: block; position: absolute; left: 10px; right: -2px; top: 0; height: var(--ih, 0px); transform: translateY(var(--iy, 0px)); pointer-events: none; z-index: 1;
  transition: transform .75s cubic-bezier(.65, 0, .35, 1), height .75s cubic-bezier(.65, 0, .35, 1); }
[data-rm="3"] .ld-brk i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--blue); transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
[data-rm="3"] .ld-brk .tl { left: 0; top: 4px; border-width: 1px 0 0 1px; }
[data-rm="3"] .ld-brk .tr { right: 0; top: 4px; border-width: 1px 1px 0 0; }
[data-rm="3"] .ld-brk .bl { left: 0; bottom: 4px; border-width: 0 0 1px 1px; }
[data-rm="3"] .ld-brk .br { right: 0; bottom: 4px; border-width: 0 1px 1px 0; }
[data-rm="3"] .ld-brk.mv .tl { transform: translate(-6px, -6px); }
[data-rm="3"] .ld-brk.mv .tr { transform: translate(6px, -6px); }
[data-rm="3"] .ld-brk.mv .bl { transform: translate(-6px, 6px); }
[data-rm="3"] .ld-brk.mv .br { transform: translate(6px, 6px); }
[data-rm="3"] .ld-brk em { position: absolute; right: 16px; top: 13px; font: 400 10px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; color: var(--blue); font-variant-numeric: tabular-nums; }
[data-rm="3"] .ld-brk::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 1px; background: var(--blue); }
[data-rm="3"] .ld-sp { left: 22px; }
[data-rm="3"] .ld-sp::after { background: repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 5px); }
[data-rm="3"] .ld-toc > li.on > a .no { color: var(--blue); }

/* 4 文字ロール — the letters of the chapter roll over one by one, like a split-flap board */
[data-rm="4"] .ld-toc > li > a .t .ch { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
[data-rm="4"] .ld-toc > li > a .t .ch > span { display: inline-block; }
[data-rm="4"] .ld-toc > li.on > a .t .ch > span { animation: ldFlap .66s cubic-bezier(.7, 0, .2, 1) calc(var(--k) * 32ms) both; }
[data-rm="4"] .ld-toc > li:not(.on) > a:hover .t .ch > span { animation: ldFlap .6s cubic-bezier(.7, 0, .2, 1) calc(var(--k) * 26ms) both; }
@keyframes ldFlap { 0% { transform: translateY(0); } 48% { transform: translateY(-105%); } 49% { transform: translateY(105%); } 100% { transform: translateY(0); } }
[data-rm="4"] .ld-toc > li > a .j { letter-spacing: .12em; transition: letter-spacing .8s var(--ease), opacity .6s var(--ease); }
[data-rm="4"] .ld-toc > li.on > a .j { letter-spacing: .3em; }
[data-rm="4"] .ld-toc > li > a .no { display: inline-block; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
[data-rm="4"] .ld-toc > li.on > a .no { transform: translateX(4px); color: var(--blue); }
[data-rm="4"] .ld-ind { width: 2px; }

/* 5 タイムライン — one axis fills with the whole page; each chapter is a node whose ring fills as you read it */
[data-rm="5"] .ld-ind, [data-rm="5"] .ld-sp { display: none; }
[data-rm="5"] .ld-toc { border-left-color: transparent; }
[data-rm="5"] .ld-axis { display: block; position: absolute; left: 7px; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
[data-rm="5"] .ld-axis i { position: absolute; inset: 0; background: var(--blue); transform-origin: top; transform: scaleY(var(--tp, 0)); transition: transform .2s linear; }
[data-rm="5"] .ld-toc > li > a { padding-left: 32px; }
[data-rm="5"] .ld-toc > li > a::before { content: ""; position: absolute; left: 0; top: 18px; width: 15px; height: 15px; border-radius: 50%; z-index: 1;
  background: conic-gradient(var(--blue) calc(var(--sp, 0) * 360deg), var(--line-strong) 0); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
[data-rm="5"] .ld-toc > li > a::after { content: ""; position: absolute; left: 4.5px; top: 22.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); transition: background .4s var(--ease); z-index: 2; }
[data-rm="5"] .ld-toc > li.done > a::after { background: var(--blue); }
[data-rm="5"] .ld-toc > li.on > a::after { background: var(--blue); animation: ldPulse 2.2s ease-out infinite; }
@keyframes ldPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--blue) 0%, transparent); } }
[data-rm="5"] .ld-toc > li.on > a .no { color: var(--blue); }
[data-rm="5"] .ld-toc > li > a .t { transition: transform .6s var(--ease); display: inline-block; }
[data-rm="5"] .ld-toc > li.on > a .t { transform: translateX(4px); }
[data-rm="5"] .ld-sub { padding-left: 32px; }
@media (prefers-reduced-motion: reduce) {
  [data-rm] .ld-toc .ch > span { animation: none !important; }
  [data-rm="5"] .ld-toc > li.on > a::after { animation: none; }
}
[data-rm="1"] .ld-toc > li > a .t { justify-self: start; }
.la-logo { display: flow-root; }
.la-logo .fa-logo { margin-top: 0; }

/* ===== 文言ABCデモで足した部品（デザインルール：余白・文字サイズ・モーションはそのまま） ===== */
/* 日本語の見出しとリードは文節で折り返し、1文字だけの行をつくらない */
:is(h1, h2, h3, .lead, .cs-lead, .hero-jp strong, .la-h, .svc-row .ct, .svc-row .nm, .f6-line, .ryokan-link b, .la-qa h3) { word-break: auto-phrase; }
:is(.svc-row .ds, .ab-rows li > div p, .ab-items p, .flow5 p) { word-break: auto-phrase; }
:is(.prose p, .hero-jp p, .svc-row .ds, .la-ans, .ab-rows p, .ab-items p, .la-tl-b p, .pg-intro p) { text-wrap: pretty; }
/* 下層ページ：日本語のページ名を h1 に（見た目は従来どおり） */
h1.ld-pjp { font-weight: inherit; }
/* TOP：新しいセクションのリード */
.sec-lead { max-width: 40em; }
.sec-lead + * { margin-top: 48px; }
.sec-lead p + p { margin-top: 14px; }
.sec-more { margin-top: 32px; }
.sec-more .f-btn { display: inline-flex; min-width: min(320px, 100%); color: var(--fg); text-decoration: none; }
/* サービスの行（TOP・サービス一覧・インタビュー） */
.svc-rows { border-top: 1px solid var(--line-strong); }
.svc-rows > li { list-style: none; scroll-margin-top: 120px; }
.svc-row { display: grid; grid-template-columns: 3.4em minmax(0, 12em) minmax(0, 1fr) 24px; grid-template-areas: "no nm ct ar" "no nm ds ar"; column-gap: 24px; row-gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; align-items: baseline; }
.svc-row .no { grid-area: no; font: 400 12px/1.9 var(--f-mono); color: var(--muted); }
.svc-row .nm { grid-area: nm; font-size: 18px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.svc-row .ct { grid-area: ct; font-size: 22px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.svc-row .ds { grid-area: ds; font-size: 15px; line-height: 1.9; color: var(--muted); max-width: 40em; }
.svc-row i { grid-area: ar; font-style: normal; justify-self: end; align-self: center; transition: transform .4s var(--ease); }
.svc-row:hover i { transform: translateX(4px); }
.svc-row:hover .ct, .iv-row2:hover .nm { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.iv-row2 { grid-template-columns: 3.4em minmax(0, 1fr) 24px; grid-template-areas: "no nm ar" "no ds ar"; }
@media (max-width: 700px) {
  .svc-row { grid-template-columns: 2.6em minmax(0, 1fr) 20px; grid-template-areas: "no nm ar" "no ct ar" "no ds ar"; padding: 22px 0; }
  .svc-row .nm { font-size: 14px; color: var(--muted); }
  .svc-row .ct { font-size: 19px; }
  .iv-row2 { grid-template-columns: 2.6em minmax(0, 1fr) 20px; grid-template-areas: "no nm ar" "no ds ar"; }
  .iv-row2 .nm { font-size: 17px; color: var(--fg); }
}
/* 番号つきの項目（Why Rootfor・もたらすこと・Philosophy） */
.ab-items { border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.ab-items li { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 28px 0; border-bottom: 1px solid var(--line); }
.ab-items .no { font: 400 12px/1.9 var(--f-mono); color: var(--muted); }
.ab-items h3 { font-size: 20px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; margin-bottom: 8px; }
.ab-items p { font-size: 15px; line-height: 1.9; color: var(--muted); }
@media (max-width: 900px) { .ab-items { grid-template-columns: minmax(0, 1fr); } }
.ab-rows li { scroll-margin-top: 120px; }
.ab-rows li > div h3 { font-size: 22px; font-weight: 500; letter-spacing: .08em; line-height: 1.6; margin-bottom: 10px; }
.ab-rows li > div p { font-size: 16px; line-height: 2; color: var(--muted); max-width: 36em; }
@media (max-width: 900px) { .ab-rows li > div h3 { font-size: 19px; } }
.ab-tl li { padding-bottom: 48px; }
.ab-h { font-size: 20px; max-width: 34em; }
.ab-kick { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.ab-kick + .la-h { margin-top: 8px; }
/* 代表メッセージ */
.ab-sign { margin-top: 36px; }
.ab-sign .label { font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.ab-profile { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.ab-profile .label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ab-profile .label .jl { margin-left: 10px; letter-spacing: .08em; text-transform: none; }
.ab-profile p:not(.label) { font-size: 14px; line-height: 1.9; }
/* TOP：Process の5段階 */
@media (min-width: 901px) { .flow5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .flow5 { grid-template-columns: minmax(0, 1fr); }
  .flow5 li, .flow5 li + li { grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 0; row-gap: 6px; padding: 18px 0; }
  .flow5 li > .no { grid-row: 1 / span 2; }
  .flow5 li > h3, .flow5 li > p { grid-column: 2; }
}
/* TOP：MVの英字が長い単語でも枠に収まるように（枠の幅を中身で広げない） */
.hero-main, .hero-copy { min-width: 0; }
/* 旅館・ホテル向けページへの導線 */
.ryokan-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; margin-top: 64px; padding: 28px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ryokan-link .label { grid-column: 1 / -1; font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ryokan-link .label .jl { margin-left: 10px; letter-spacing: .08em; }
.ryokan-link b { font-size: 20px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.ryokan-link i { font-style: normal; align-self: center; transition: transform .4s var(--ease); }
.ryokan-link:hover i { transform: translateX(4px); }
.ryokan-link:hover b { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* フォーム */
.ct-form legend .opt-n { margin-left: 8px; font-size: 12px; color: var(--muted); }
.ct-form fieldset[aria-invalid] .chip span { border-color: var(--blue); }
.ct-ways .k small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
/* フッター */
.f6-line { margin: 4px 0 36px; font-size: clamp(20px, 1.4vw + 12px, 28px); font-weight: 500; letter-spacing: .1em; line-height: 1.6; color: var(--fg); }
.f6-more { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 13px; }
.f6-more a { color: inherit; }
.f6-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.f6-ig { color: var(--muted); }
/* TOP：Projects の見出しの下に、リードと絞り込みを横並び */
.proj-row { width: 100%; justify-self: stretch; display: flex; justify-content: space-between; align-items: end; gap: 32px 48px; flex-wrap: wrap; }
.proj-row .proj-lead { margin: 0; }
.proj-row .proj-tools { justify-self: auto; }
.ab-sign .label { text-transform: none; }

/* 見出しとリードの読点ごとのまとまり（統合プレビュー3で使用） */
.ib { display: inline-block; }


/* =====================================================================
   統合プレビュー3 only (appended after abc.css)
   1. English display type: the font's own kerning, also on the letter-by-letter headings
   2. buttons: "Dimension" — a dimension line that closes into a frame and fills black (14px labels)
   ===================================================================== */

/* ---- 1. display type ----
   Page names and the TOP headline are plain text, so the browser applies the font's kerning itself.
   The section headings are split into one inline-block per letter for their motion, which drops kerning;
   p3.js reads each pair's kerning value from the font and puts it back as a margin (class .kern-on).
   The tracking below (a little looser than before) applies on top: +10 / 0 / -10 in Illustrator units. */
:root { --trk-big: .01em; --trk-name: 0em; --trk-hero: -.01em; }
:root[data-p] .big { letter-spacing: var(--trk-big); }
:root[data-p] .pg-name { letter-spacing: var(--trk-name); }
:root[data-p] .hero h1 { letter-spacing: var(--trk-hero); }
:root[data-p] :is(.big, .pg-name, .hero h1) { font-kerning: normal; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }

/* ---- 2. buttons: Dimension ----
   At rest: a black base line with short end ticks, like a dimension line (no frame).
   On hover, in three overlapping steps on one easing curve:
     1) the end ticks rise into the two sides, 2) the top closes from both corners to the middle,
     3) black rises from the base line and the type turns white as the fill passes it.
   On leaving, the same steps run backwards. Lines and fill move by transform only (no repaint of the box).
   Every line is drawn once: a line that appears lies exactly on the pixels of the line it replaces. */
:root .f-btn { padding: 19px 24px; font: 500 14px/1.4 var(--f-jp); letter-spacing: .08em; gap: 24px; }
:root .sec-more .f-btn { min-width: min(280px, 100%); }
:root .ct-send { font-size: 14px; }
:root .ld-cta { font-size: 14px; }
:root .contact-ways > a { font-size: 14px; }
@media (max-width: 600px) { :root .f-btn { padding: 17px 20px; } }

.bx { --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.22, 1, .36, 1);
  position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent;
  border: 0; background: transparent; color: var(--fg); box-shadow: none;
  transition: color .32s var(--io) 0s, padding .7s var(--out), scale .2s var(--out); }
.bx:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.bx:hover { background: transparent; border-color: transparent; }
.bx:active { scale: .985; }
.bx-t, .bx-a { position: relative; z-index: 2; }
.bx-t { transition: transform .7s var(--out); }
.bx-a { display: inline-grid; overflow: hidden; font-style: normal; line-height: 1; }
.bx-a > span { grid-area: 1 / 1; display: block; padding: .12em .05em; transition: transform .6s var(--out); }
.bx-a > span + span { transform: translateX(-180%); }
.bx-a.ext > span + span { transform: translate(-180%, 180%); }

/* the drawing: base line, two sides, two halves of the top, and the fill */
.bx-g { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bx-g > i { position: absolute; display: block; background: var(--fg); will-change: transform; }
.bx-g .b { left: 0; right: 0; bottom: 0; height: 1px; }
.bx-g .l, .bx-g .r { bottom: 0; width: 1px; height: 100%; transform-origin: 50% 100%; transform: scaleY(var(--tick, .15)); }
.bx-g .l { left: 0; } .bx-g .r { right: 0; }
.bx-g .tl, .bx-g .tr { top: 0; height: 1px; width: calc(50% + .5px); transform: scaleX(0); }
.bx-g .tl { left: 0; transform-origin: 0 50%; } .bx-g .tr { right: 0; transform-origin: 100% 50%; }
.bx-g .f { inset: 0; transform: translateY(101%); }
/* leaving: the fill drops first, then the top opens, then the sides sink back into ticks */
.bx-g .f { transition: transform .45s var(--io) 0s; }
.bx-g .tl, .bx-g .tr { transition: transform .4s var(--io) .16s; }
.bx-g .l, .bx-g .r { transition: transform .45s var(--io) .28s; }
/* entering: the sides rise, the top closes, the fill rises — each step starts before the last one ends */
.bx:is(:hover, :focus-visible) .bx-g .l, .bx:is(:hover, :focus-visible) .bx-g .r { transform: none; transition: transform .42s var(--io) 0s; }
.bx:is(:hover, :focus-visible) .bx-g .tl, .bx:is(:hover, :focus-visible) .bx-g .tr { transform: none; transition: transform .4s var(--io) .2s; }
.bx:is(:hover, :focus-visible) .bx-g .f { transform: none; transition: transform .55s var(--io) .38s; }
.bx:is(:hover, :focus-visible) { color: var(--bg); transition: color .3s var(--io) .58s, padding .7s var(--out), scale .2s var(--out); }
.bx:is(:hover, :focus-visible) .bx-t { transform: translateX(4px); transition-delay: .3s; }
.bx:is(:hover, :focus-visible) .bx-a > span:first-child { transform: translateX(180%); transition-delay: .3s; }
.bx:is(:hover, :focus-visible) .bx-a.ext > span:first-child { transform: translate(180%, -180%); }
.bx:is(:hover, :focus-visible) .bx-a > span + span { transform: none; transition-delay: .42s; }

/* rows of the contact band: they keep their grey border lines; the drawing sits 1px out at top and bottom so the black lines lie exactly on those borders (base line only on hover) */
.contact-ways > a.bx { border: 0; border-bottom: 1px solid var(--line); padding-inline: 0; }
.contact-ways > a.bx:hover .k { text-decoration: none; }
.bx.is-row .bx-g { inset: -1px 0; }
.bx.is-row .bx-g .b { transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--io) .1s; }
.bx.is-row:is(:hover, :focus-visible) .bx-g .b { transform: none; transition: transform .42s var(--io) 0s; }
.bx.is-row:is(:hover, :focus-visible) { padding-inline: 18px; }

/* the submit button stays solid black: no extra lines (they would read as a second frame), only the type and arrow move */
.bx.is-solid { background: var(--fg); color: var(--bg); }
.bx.is-solid:hover { background: var(--fg); }
.bx.is-solid .bx-g { display: none; }
.bx.is-solid:is(:hover, :focus-visible) { color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .bx, .bx *, .bx-g > i { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
.bx.is-solid:hover { gap: 28px; }


/* =====================================================================
   統合プレビュー4 only (appended after p3.css)
   Projects page: the four services in short, then every project, with one filter for both lists
   ===================================================================== */
.p4-lead { margin: 0 0 40px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; line-height: 1.75; letter-spacing: .08em; max-width: 30em; }
.p4-svs { margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.p4-sv { list-style: none; display: grid; grid-template-columns: 3.4em minmax(0, 11em) minmax(0, 1fr) auto;
  grid-template-areas: "no nm ct go" "no nm ds go" "no nm bf go"; column-gap: 24px; row-gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; align-items: baseline; }
.p4-sv .no { grid-area: no; font: 400 12px/1.9 var(--f-mono); color: var(--muted); }
.p4-sv .nm { grid-area: nm; display: grid; gap: 4px; }
.p4-sv .nm b { font: 500 22px/1.15 var(--f-disp); letter-spacing: 0; }
.p4-sv .nm span { font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.p4-sv .ct { grid-area: ct; margin: 0; font-size: 20px; font-weight: 500; letter-spacing: .06em; line-height: 1.6; }
.p4-sv .ds { grid-area: ds; margin: 0; font-size: 14px; line-height: 1.9; color: var(--muted); max-width: 38em; }
.p4-sv .bf { grid-area: bf; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; padding: 0; }
.p4-sv .bf li { list-style: none; font-size: 13px; letter-spacing: .06em; }
.p4-sv .bf li::before { content: "—"; margin-right: 6px; color: var(--muted); }
.p4-sv .go { grid-area: go; display: grid; gap: 10px; justify-items: end; align-self: center; text-align: right; }
.p4-sv .go a { color: var(--fg); font-size: 14px; letter-spacing: .06em; text-underline-offset: 5px; text-decoration-thickness: 1px; white-space: nowrap; }
.p4-sv .go a b { font: 500 14px/1 var(--f-mono); margin: 0 4px; }
.p4-sv .go .sub { color: var(--muted); font-size: 13px; }
.p4-sv:target { background: linear-gradient(rgb(var(--fg-rgb) / .04), rgb(var(--fg-rgb) / .04)) no-repeat; }
@media (max-width: 1100px) {
  .p4-sv { grid-template-columns: 2.6em minmax(0, 1fr); grid-template-areas: "no nm" "no ct" "no ds" "no bf" "no go"; padding: 24px 0; }
  .p4-sv .go { justify-items: start; text-align: left; margin-top: 10px; }
}

/* the filter for both lists */
.p4-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: 24px; }
.p4-tools .wfilters button b { font: 400 11px/1 var(--f-mono); margin-left: 4px; color: var(--muted); }
.p4-tools .wcount { margin: 0; }
[data-p4l] [hidden] { display: none !important; }
.p4-empty { padding: 28px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.p4-arcn { margin: -8px 0 20px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.p4-lead, .p4-sv .ct, .p4-sv .ds { word-break: auto-phrase; text-wrap: pretty; }

/* =====================================================================
   Interview article: a conversation — the interviewer's face on the left, the owner's on the right
   (as on the current site), with the words in speech bubbles; the profiles show the same faces
   ===================================================================== */
.iv-say { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; column-gap: 28px; align-items: start; margin-top: 12px; }
.iv-say + .iv-say { margin-top: 28px; }
.iv-q .iv-av { grid-column: 1; grid-row: 1; }
.iv-q .iv-bub { grid-column: 2; grid-row: 1; }
.iv-a .iv-bub { grid-column: 2; grid-row: 1; }
.iv-a .iv-av { grid-column: 3; grid-row: 1; }
.iv-av { margin: 0; display: grid; justify-items: center; gap: 8px; }
.iv-av img { display: block; width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.iv-av figcaption { font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
.iv-bub { position: relative; margin: 0; padding: 26px 30px; background: var(--surface); font-size: 15px; line-height: 2; letter-spacing: .04em; color: var(--fg); }
.iv-bub::before { content: ""; position: absolute; top: 25px; width: 12px; height: 18px; background: inherit; }
.iv-q .iv-bub::before { left: -11px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.iv-a .iv-bub::before { right: -11px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.iv-q .iv-bub { font-weight: 500; }
.iv-pf { margin: 0 0 6px; }
.iv-pf img { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
@media (max-width: 700px) {
  .iv-say { column-gap: 14px; }
  .iv-q { grid-template-columns: 46px minmax(0, 1fr); }
  .iv-a { grid-template-columns: minmax(0, 1fr) 46px; }
  .iv-a .iv-bub { grid-column: 1; } .iv-a .iv-av { grid-column: 2; }
  .iv-av img { width: 46px; height: 46px; }
  .iv-av figcaption { font-size: 11px; }
  .iv-bub { padding: 18px 18px; font-size: 14px; line-height: 1.95; }
  .iv-bub::before { top: 16px; }
  .iv-pf img { width: 80px; height: 80px; }
}

/* =====================================================================
   Interview: "Drafting" (chosen from three proposals) — html[data-ivd="3"], set by p4.js
   ===================================================================== */
/* ---- C. Drafting: black-and-white square portraits, each remark set on a dimension line (base line with end ticks)
   and joined to its speaker by a leader line; questions on the left, answers stepped to the right ---- */
:root[data-ivd="3"] .iv-say + .iv-say { margin-top: 36px; }
/* the question starts under a rule (.iv-q's border): keep the interviewer clear of it */
:root[data-ivd="3"] .iv-q { padding-top: 36px; margin-top: 4px; }
:root[data-ivd="3"] .iv-q { grid-template-columns: 64px minmax(0, 1fr); column-gap: 0; }
:root[data-ivd="3"] .iv-a { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 0; }
:root[data-ivd="3"] .iv-q .iv-av { grid-column: 1; } :root[data-ivd="3"] .iv-q .iv-bub { grid-column: 2; margin-right: 16%; }
:root[data-ivd="3"] .iv-a .iv-bub { grid-column: 1; margin-left: 16%; } :root[data-ivd="3"] .iv-a .iv-av { grid-column: 2; }
:root[data-ivd="3"] .iv-av img { width: 56px; height: 56px; filter: grayscale(1) contrast(1.05); }
:root[data-ivd="3"] .iv-av figcaption { display: grid; gap: 5px; justify-items: center; font-size: 11px; }
:root[data-ivd="3"] .iv-av figcaption::before { content: attr(data-k); font: 400 10px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); order: 2; }
:root[data-ivd="3"] .iv-bub { background: none; padding: 4px 24px 22px;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 100% 100% / 1px 8px no-repeat; }
:root[data-ivd="3"] .iv-bub::before { top: 27px; height: 1px; width: 16px; clip-path: none; background: var(--muted); }
:root[data-ivd="3"] .iv-q .iv-bub::before { left: -8px; } :root[data-ivd="3"] .iv-a .iv-bub::before { left: auto; right: -8px; }
:root[data-ivd="3"] .iv-q .iv-bub { font-size: 17px; font-weight: 500; }
:root[data-ivd="3"] .iv-a .iv-bub { font-size: 16px; line-height: 2.05; }
@media (max-width: 700px) {
  :root[data-ivd="3"] .iv-q { grid-template-columns: 44px minmax(0, 1fr); } :root[data-ivd="3"] .iv-a { grid-template-columns: minmax(0, 1fr) 44px; }
  :root[data-ivd="3"] .iv-a .iv-bub { grid-column: 1; } :root[data-ivd="3"] .iv-a .iv-av { grid-column: 2; }
  :root[data-ivd="3"] .iv-q .iv-bub { margin-right: 0; } :root[data-ivd="3"] .iv-a .iv-bub { margin-left: 0; }
  :root[data-ivd="3"] .iv-av img { width: 40px; height: 40px; }
  :root[data-ivd="3"] .iv-bub { padding: 2px 14px 18px; } :root[data-ivd="3"] .iv-q .iv-bub { font-size: 15px; } :root[data-ivd="3"] .iv-a .iv-bub { font-size: 15px; }
  :root[data-ivd="3"] .iv-bub::before { top: 20px; width: 10px; }
  :root[data-ivd="3"] .iv-q { padding-top: 26px; }
}

/* ---- self-review fixes ---- */
/* the phone number in the contact band never breaks ("080-7125-" / "0809" on phones) */
.contact-ways .v { white-space: nowrap; }
/* tablets and small laptops (rail beside the article): give the words more of the width */
@media (min-width: 701px) and (max-width: 1200px) {
  .iv-say { grid-template-columns: 60px minmax(0, 1fr) 60px; column-gap: 20px; }
  .iv-av img { width: 52px; height: 52px; }
  :root[data-ivd="3"] .iv-q .iv-bub { margin-right: 6%; } :root[data-ivd="3"] .iv-a .iv-bub { margin-left: 6%; }
  :root[data-ivd="3"] .iv-av img { width: 48px; height: 48px; }
}

/* =====================================================================
   Contact page: "Dimension fields" (chosen from five proposals) — html[data-ctd="1"], set by p4.js and in the page
   p4.js adds the parts: field numbers (.fx-no), counters (.fx-cnt), the required-items meter (.fx-prog),
   and the states .is-focus / .is-filled on each field, .has-focus / .is-sent on the form.
   ===================================================================== */
.fx-no, .fx-cnt, .fx-prog { display: none; }
:root[data-ctd="1"] .ct-form .req { border-color: var(--fg); color: var(--fg); }
:root[data-ctd="1"] .ct-form .fld input:focus, :root[data-ctd="1"] .ct-form .fld textarea:focus { border-color: var(--line-strong); }
:root[data-ctd="1"] .ct-done { border-color: var(--fg); }
.ct-form { --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.22, 1, .36, 1); position: relative; }
.fx-prog { align-items: center; gap: 14px; font: 400 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); grid-column: 1 / -1; }
.fx-prog b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.fx-prog .fx-bar { display: flex; gap: 4px; }
.fx-prog .fx-bar i { width: 22px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.fx-prog .fx-bar i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--io); }
.fx-prog .fx-bar i.on::after { transform: none; }
.fx-prog .ok { opacity: 0; transition: opacity .4s; color: var(--fg); }
.fx-prog.done .ok { opacity: 1; }

/* ---- 1. Dimension fields: every field is a dimension line; on focus black runs along it, the label tracks out,
   the field number slides in and the length of what you typed is read off at the end of the line ---- */
:root[data-ctd="1"] .fx-prog { display: flex; }
:root[data-ctd="1"] .ct-form .fld { position: relative; }
:root[data-ctd="1"] .ct-form .fld :is(label, legend) { display: flex; align-items: baseline; gap: 0; transition: letter-spacing .6s var(--out), color .4s; }
:root[data-ctd="1"] .fx-no { display: inline-block; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); max-width: 0; overflow: hidden; opacity: 0; transition: max-width .6s var(--out), opacity .4s, margin .6s var(--out); }
:root[data-ctd="1"] .fld.is-focus .fx-no, :root[data-ctd="1"] .fld.is-filled .fx-no { max-width: 3em; opacity: 1; margin-right: 10px; }
:root[data-ctd="1"] .fld.is-focus :is(label, legend) { letter-spacing: .14em; }
:root[data-ctd="1"] .ct-form .fld :is(input[type="text"], input[type="tel"], input[type="email"], textarea) { border: 0; padding: 12px 2px 16px;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 100% / 1px 8px no-repeat;
  transition: background-size .8s var(--io); }
:root[data-ctd="1"] .ct-form .fld :is(input, textarea):focus { background-size: 100% 1px, 100% 1px, 1px 8px, 1px 8px; }
:root[data-ctd="1"] .ct-form .fld textarea { min-height: 9em; }
:root[data-ctd="1"] .fx-cnt { display: block; position: absolute; right: 0; bottom: 22px; font: 400 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .5s var(--out); pointer-events: none; }
:root[data-ctd="1"] .fld.is-focus .fx-cnt, :root[data-ctd="1"] .fld.is-filled .fx-cnt { opacity: 1; transform: none; }
:root[data-ctd="1"] .chip span { border: 0; padding: 10px 16px; position: relative;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 0 / 8px 1px no-repeat, linear-gradient(var(--fg), var(--fg)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--fg), var(--fg)) 100% 100% / 8px 1px no-repeat, linear-gradient(var(--fg), var(--fg)) 100% 100% / 1px 8px no-repeat;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-size .6s var(--io), color .3s var(--io) .2s, box-shadow .3s; }
:root[data-ctd="1"] .chip span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--io) .25s; }
:root[data-ctd="1"] .chip span { isolation: isolate; }
:root[data-ctd="1"] .chip:hover span { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
:root[data-ctd="1"] .chip input:checked + span { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; background-color: transparent; color: var(--bg); box-shadow: none; }
:root[data-ctd="1"] .chip input:checked + span::before { transform: none; }

/* sent: the form folds away behind a line drawn across, and the reply note opens */
:root[data-ctd="1"] .ct-form.is-sent .ct-done { animation: fx-open .9s var(--out) both; }
@keyframes fx-open { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .ct-form *, .ct-form::before, .ct-form *::before, .ct-form *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---- 旅館・ホテルのページ：日本語の章見出し（h2）と、増えた本文 ----
   The English display line above each chapter stays as type; the Japanese line under it is the real heading. */
.ld-sec .p4-hd > h2.lead { margin: 0; color: var(--fg); }
.ld-sec .p4-hd > .lead + p { margin-top: 2px; }
.ld-sec .p4-hd { max-width: 40em; }
.p4-fact { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 10px 24px; align-items: baseline; max-width: 46em;
  padding: 26px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.p4-fact .k { margin: 0; font: 500 11px/1.9 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.p4-fact .v { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.95; color: var(--fg); text-wrap: pretty; }
.p4-est .ab-kick { margin: 0 0 14px; }
.ld-sec .sec-more { margin-top: 40px; }
@media (max-width: 600px) {
  .p4-fact { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
  .p4-fact .v { font-size: 16px; }
}

/* ---- デザイン顧問のページ：比較表・担当者・モデルケース ---- */
.ld-sec .p4-hd > .p4-sub { margin: -6px 0 0; font-size: 16px; font-weight: 500; letter-spacing: .06em; color: var(--fg); }
.ld-sec .p4-kick + .ab-rows { margin-top: 16px; }
.p4-cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p4-cmp:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
.p4-cmp table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.9; }
.p4-cmp th, .p4-cmp td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-weight: 400; }
.p4-cmp thead th, .p4-cmp thead td { border-bottom: 1px solid var(--line-strong); padding-top: 0; font: 500 14px/1.7 var(--f-jp); letter-spacing: .06em; color: var(--muted); }
.p4-cmp tbody th { width: 9em; font-size: 14px; line-height: 2.1; font-weight: 500; color: var(--fg); }
.p4-cmp tbody td { color: var(--muted); }
.p4-cmp thead th:last-child, .p4-cmp tbody td:last-child { color: var(--fg); font-weight: 500; }
.p4-cmp thead th:last-child { box-shadow: inset 0 -2px 0 var(--fg); }
.p4-person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; align-items: start; max-width: 46em;
  padding-top: 32px; border-top: 1px solid var(--line-strong); }
.p4-person figure { margin: 0; }
.p4-person img { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.p4-person-t { display: grid; gap: 14px; }
.p4-person-t p { margin: 0; font-size: 16px; line-height: 2; color: var(--muted); }
.p4-person-t .p4-role { font: 500 12px/1.6 var(--f-jp); letter-spacing: .06em; color: var(--muted); }
.p4-person-t .p4-nm { margin-top: -10px; font-size: 24px; font-weight: 500; letter-spacing: .12em; line-height: 1.5; color: var(--fg); }
.p4-model { margin: 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.ld-sec .p4-model + .p4-cases { margin-top: 20px; }
.p4-cases { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--line-strong); }
.p4-cases > li { display: grid; gap: 14px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.p4-cases .k { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; color: var(--muted); letter-spacing: .06em; }
.p4-cases .k .no { font: 500 12px/1 var(--f-mono); color: var(--fg); }
.p4-cases .k .pl { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; }
.p4-cases h3 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.6; color: var(--fg); }
.p4-cases dl { margin: 0; display: grid; gap: 10px; max-width: 46em; }
.p4-cases dl > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; }
.p4-cases dt { font-size: 14px; font-weight: 500; line-height: 2.3; color: var(--fg); }
.p4-cases dd { margin: 0; font-size: 16px; line-height: 2; color: var(--muted); text-wrap: pretty; }
@media (max-width: 600px) {
  .p4-person { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .p4-person img { width: 96px; height: 96px; }
  .p4-cases dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .p4-cases h3 { font-size: 20px; }
}
/* phone: one block per row, each answer with its column name, the advisor's answer last and in black */
@media (max-width: 600px) {
  .p4-cmp { overflow: visible; }
  .p4-cmp table, .p4-cmp tbody, .p4-cmp tr, .p4-cmp th, .p4-cmp td { display: block; min-width: 0; width: auto; }
  .p4-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p4-cmp table { border-top: 1px solid var(--line-strong); }
  .p4-cmp tr { padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
  .p4-cmp tbody th, .p4-cmp tbody td { border: 0; padding: 0; }
  .p4-cmp tbody th { margin-bottom: 8px; font-size: 16px; }
  .p4-cmp tbody td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 4px 0; }
  .p4-cmp tbody td::before { content: attr(data-l); font-size: 12px; line-height: 2.5; color: var(--muted); font-weight: 400; }
}

/* =====================================================================
   デザイン顧問の表：3案（html[data-tbd="1|2|3"]、advisor-t1〜t3.html）
   対象はお悩みのリスト（.p4-tchk）と比較表（.p4-cmp）。動きは transform・clip-path・色だけ。
   1 作図：罫線が左から引かれ、文字が線の後を追って現れる。顧問の列は寸法線の枠が立ち上がって囲む
   2 走査：読む位置を示す線がリストを下り、比較表を左から右へ走る。顧問の列に着くと黒く反転する
   3 チェック：お悩みは選べるチェックリスト（数と相談の導線つき）。比較表は画面の中央の行に焦点が合う
   ===================================================================== */
:root { --p4-io: cubic-bezier(.65, 0, .35, 1); --p4-out: cubic-bezier(.22, 1, .36, 1); }
:root[data-tbd] .p4-cmp thead th:last-child { box-shadow: none; }
:root[data-tbd] .p4-tchk li { position: relative; }
:root[data-tbd] .p4-tchk .t, :root[data-tbd] .p4-cmp .c { display: inline-block; }
:root[data-tbd] .p4-cmp { position: relative; padding-top: 40px; }
:root[data-tbd] .ld-sec > .p4-cmp { margin-top: 16px; }
:root[data-tbd] .p4-cmp table { position: relative; z-index: 1; }
:root[data-tbd] .p4-cmp :is(th, td) { position: relative; }

/* ---- 1 作図 ---- */
:root[data-tbd="1"] .p4-tchk { position: relative; border-top-color: transparent; }
:root[data-tbd="1"] .p4-tchk::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-strong);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--p4-io); }
:root[data-tbd="1"] .p4-tchk li { border-bottom-color: transparent; }
:root[data-tbd="1"] .p4-tchk li::after, :root[data-tbd="1"] .p4-tchk li::before,
:root[data-tbd="1"] .p4-cmp :is(th, td)::after, :root[data-tbd="1"] .p4-cmp tbody :is(th, td)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
:root[data-tbd="1"] .p4-tchk li::after { background: var(--line); transition: transform 1s var(--p4-io) calc(.2s + var(--i, 0) * .09s); }
:root[data-tbd="1"] .p4-tchk li::before { z-index: 1; background: var(--fg); transition: transform .55s var(--p4-io); }
:root[data-tbd="1"] .p4-tchk :is(.no, .t) { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--p4-io) calc(.35s + var(--i, 0) * .09s), transform .5s var(--p4-out), color .3s; }
:root[data-tbd="1"] .p4-tchk.is-in::before, :root[data-tbd="1"] .p4-tchk.is-in li::after { transform: none; }
:root[data-tbd="1"] .p4-tchk.is-in :is(.no, .t) { clip-path: inset(0 -1em 0 0); }
:root[data-tbd="1"] .p4-tchk li:hover::before { transform: none; }
:root[data-tbd="1"] .p4-tchk li:hover .t { transform: translateX(8px); }
:root[data-tbd="1"] .p4-tchk li:hover .no { color: var(--fg); }
:root[data-tbd="1"] .p4-cmp :is(th, td) { border-bottom-color: transparent; }
:root[data-tbd="1"] .p4-cmp :is(th, td)::after { background: var(--line); transition: transform .5s cubic-bezier(.45, 0, .55, 1) calc(.1s + var(--i, 0) * .14s + var(--j, 0) * .1s); }
:root[data-tbd="1"] .p4-cmp thead :is(th, td)::after { background: var(--line-strong); }
:root[data-tbd="1"] .p4-cmp tbody :is(th, td)::before { z-index: 1; background: var(--fg); transition: transform .3s linear calc(var(--j, 0) * .07s); }
:root[data-tbd="1"] .p4-cmp .c { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--p4-io) calc(.35s + var(--i, 0) * .14s + var(--j, 0) * .1s), transform .5s var(--p4-out); }
:root[data-tbd="1"] .p4-cmp.is-in :is(th, td)::after { transform: none; }
:root[data-tbd="1"] .p4-cmp.is-in .c { clip-path: inset(0 -1em 0 0); }
:root[data-tbd="1"] .p4-cmp tbody tr:hover > ::before { transform: none; }
:root[data-tbd="1"] .p4-cmp tbody tr:hover th .c { transform: translateX(6px); }
/* the frame around the advisor's column: ticks at the foot, the sides rise, the top closes, a light fill */
.p4-fr { position: absolute; left: var(--fx, 0); top: var(--fy, 0); width: var(--fw, 0); height: var(--fh, 0); pointer-events: none; z-index: 0; }
.p4-fr i { position: absolute; display: block; background: var(--fg); }
.p4-fr .b { left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); }
.p4-fr .l, .p4-fr .r { bottom: 0; width: 1px; height: 100%; transform-origin: 50% 100%; transform: scaleY(0); }
.p4-fr .l { left: 0; } .p4-fr .r { right: 0; }
.p4-fr .tl, .p4-fr .tr { top: 0; height: 1px; width: calc(50% + .5px); transform: scaleX(0); }
.p4-fr .tl { left: 0; transform-origin: 0 50%; } .p4-fr .tr { right: 0; transform-origin: 100% 50%; }
.p4-fr .f { inset: 0; background: rgb(var(--fg-rgb) / .045); transform: scaleY(0); transform-origin: 50% 100%; }
.p4-fr em { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--f-mono); font-style: normal;
  letter-spacing: .16em; color: var(--blue); opacity: 0; transform: translateY(4px); }
.p4-fr em::before, .p4-fr em::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.p4-fr em b { font-weight: 500; }
.p4-cmp.is-in .p4-fr .b { transform: none; transition: transform .6s var(--p4-io) 1s; }
.p4-cmp.is-in .p4-fr .l, .p4-cmp.is-in .p4-fr .r { transform: none; transition: transform .55s var(--p4-io) 1.45s; }
.p4-cmp.is-in .p4-fr .tl, .p4-cmp.is-in .p4-fr .tr { transform: none; transition: transform .5s var(--p4-io) 1.85s; }
.p4-cmp.is-in .p4-fr .f { transform: none; transition: transform .9s var(--p4-io) 2.1s; }
.p4-cmp.is-in .p4-fr em { opacity: 1; transform: none; transition: opacity .5s var(--p4-out) 2.25s, transform .5s var(--p4-out) 2.25s; }

/* ---- 2 走査 ---- */
:root[data-tbd="2"] .p4-tchk-w { position: relative; }
:root[data-tbd="2"] .p4-tchk li { color: rgb(var(--fg-rgb) / .34); transition: color .45s var(--p4-out), padding .6s var(--p4-out); }
:root[data-tbd="2"] .p4-tchk li.ink { color: var(--fg); }
:root[data-tbd="2"] .p4-tchk li .no { position: relative; z-index: 1; transition: color .3s; }
:root[data-tbd="2"] .p4-tchk li .t { position: relative; z-index: 1; }
:root[data-tbd="2"] .p4-tchk li::before { content: ""; position: absolute; inset: 0 0 -1px; background: var(--fg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--p4-io); }
:root[data-tbd="2"] .p4-tchk li:hover { color: var(--bg); padding-inline: 16px; }
:root[data-tbd="2"] .p4-tchk li:hover .no { color: var(--bg); }
:root[data-tbd="2"] .p4-tchk li:hover::before { transform: none; }
.p4-scan { position: absolute; z-index: 3; pointer-events: none; background: var(--fg); opacity: 0; transition: opacity .3s; }
.p4-scan.on { opacity: 1; }
.p4-scan b { position: absolute; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--fg); white-space: nowrap; }
.p4-scan.h { left: 0; right: 0; top: 0; height: 1px; transform: translateY(var(--y, 0)); }
.p4-scan.h b { right: 0; bottom: 8px; }
.p4-scan.v { top: var(--sy, 0); height: var(--sh, 0); width: 1px; left: 0; transform: translateX(var(--x, 0)); }
.p4-scan.v b { left: 8px; top: 0; }
:root[data-tbd="2"] .p4-cmp :is(thead th, td) { color: rgb(var(--fg-rgb) / .3); transition: color .5s var(--p4-out); }
:root[data-tbd="2"] .p4-cmp :is(thead th, td).ink { color: var(--fg); }
:root[data-tbd="2"] .p4-cmp tbody td.ink:not(:last-child) { color: var(--muted); }
:root[data-tbd="2"] .p4-cmp.is-inv tr > :last-child { color: var(--bg); transition: color .4s var(--p4-out) .35s; }
:root[data-tbd="2"] .p4-cmp.is-inv tbody td:last-child { border-bottom-color: rgb(255 255 255 / .22); }
.p4-colf { position: absolute; left: var(--fx, 0); top: var(--fy, 0); width: var(--fw, 0); height: var(--fh, 0); z-index: 0; pointer-events: none;
  background: var(--fg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .75s var(--p4-io); }
.p4-cmp.is-inv .p4-colf { transform: none; }

/* ---- 3 チェック ---- */
:root[data-tbd="3"] .p4-tchk li { grid-template-columns: 34px 3em minmax(0, 1fr); cursor: pointer; border-bottom-color: transparent; -webkit-tap-highlight-color: transparent; }
:root[data-tbd="3"] .p4-tchk li::after, :root[data-tbd="3"] .p4-tchk li::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
:root[data-tbd="3"] .p4-tchk li::after { background: var(--line); }
:root[data-tbd="3"] .p4-tchk li::before { z-index: 1; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--p4-io); }
:root[data-tbd="3"] .p4-tchk li[aria-checked="true"]::before { transform: none; }
:root[data-tbd="3"] .p4-tchk li:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
:root[data-tbd="3"] .p4-tchk .t { color: var(--muted); transition: color .35s, transform .5s var(--p4-out); }
:root[data-tbd="3"] .p4-tchk li:hover .t { transform: translateX(4px); color: var(--fg); }
:root[data-tbd="3"] .p4-tchk li[aria-checked="true"] .t { color: var(--fg); font-weight: 500; }
:root[data-tbd="3"] .p4-tchk li[aria-checked="true"] .no { color: var(--fg); }
.p4-box { width: 18px; height: 18px; align-self: center; margin-top: -1px; }
.p4-box svg { display: block; width: 18px; height: 18px; overflow: visible; }
.p4-box rect { fill: transparent; stroke: var(--line-strong); stroke-width: 1px; stroke-dasharray: 72; stroke-dashoffset: 72; vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .8s var(--p4-io) calc(.15s + var(--i, 0) * .08s), fill .35s var(--p4-io), stroke .3s; }
.p4-box path { fill: none; stroke: var(--bg); stroke-width: 1.6px; stroke-linecap: square; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s var(--p4-io) .12s; }
.p4-tchk.is-in .p4-box rect { stroke-dashoffset: 0; }
li:hover > .p4-box rect { stroke: var(--fg); }
li[aria-checked="true"] > .p4-box rect { fill: var(--fg); stroke: var(--fg); }
li[aria-checked="true"] > .p4-box path { stroke-dashoffset: 0; }
.p4-chk-hint { margin: 0 0 14px; font: 500 12px/1.6 var(--f-jp); letter-spacing: .06em; color: var(--muted); }
.p4-chk-res { display: grid; gap: 14px; margin-top: 22px; }
.p4-chk-res .m { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 12px/1.6 var(--f-jp); letter-spacing: .06em; color: var(--muted); }
.p4-chk-res .m b { font: 500 14px/1 var(--f-mono); color: var(--fg); }
.p4-meter { display: inline-flex; gap: 4px; }
.p4-meter i { width: 22px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.p4-meter i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--p4-io); }
.p4-meter i.on::after { transform: none; }
.p4-chk-res .msg { margin: 0; min-height: 2em; font-size: 16px; line-height: 2; color: var(--fg); }
.p4-chk-res .msg span { display: inline-block; animation: p4-up .5s var(--p4-out); }
.p4-chk-res .go { margin: 0; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .45s var(--p4-out), transform .45s var(--p4-out); }
.p4-chk-res.has .go { opacity: 1; transform: none; pointer-events: auto; }
.p4-chk-res .go .f-btn { display: inline-flex; min-width: min(280px, 100%); color: var(--fg); text-decoration: none; }
@keyframes p4-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the comparison: the row in the middle of the screen is in focus; pointing at a column brings it forward */
:root[data-tbd="3"] .p4-cmp tbody tr > * { transition: opacity .45s var(--p4-out); }
:root[data-tbd="3"] .p4-cmp.is-focus tbody tr:not(.is-on) > * { opacity: .32; }
:root[data-tbd="3"] .p4-cmp tbody td:last-child .c { background: linear-gradient(var(--fg), var(--fg)) 0 100% / 0 1px no-repeat; transition: background-size .7s var(--p4-io); }
:root[data-tbd="3"] .p4-cmp tbody tr.is-on td:last-child .c { background-size: 100% 1px; }
:root[data-tbd="3"] .p4-cmp tbody th .c { transition: transform .5s var(--p4-out); }
:root[data-tbd="3"] .p4-cmp tbody tr.is-on th .c { transform: translateX(6px); }
:root[data-tbd="3"] .p4-cmp thead th::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--p4-io); }
:root[data-tbd="3"] .p4-cmp thead th:last-child::after { transform: none; }
:root[data-tbd="3"] .p4-cmp[data-col] thead th::after { transform: scaleX(0); }
:root[data-tbd="3"] .p4-cmp[data-col="2"] thead th:nth-child(2)::after,
:root[data-tbd="3"] .p4-cmp[data-col="3"] thead th:nth-child(3)::after,
:root[data-tbd="3"] .p4-cmp[data-col="4"] thead th:nth-child(4)::after { transform: none; }
:root[data-tbd="3"] .p4-cmp[data-col] tr > :not(:first-child) { transition: opacity .3s var(--p4-out); }
:root[data-tbd="3"] .p4-cmp[data-col="2"] tr > :is(:nth-child(3), :nth-child(4)),
:root[data-tbd="3"] .p4-cmp[data-col="3"] tr > :is(:nth-child(2), :nth-child(4)),
:root[data-tbd="3"] .p4-cmp[data-col="4"] tr > :is(:nth-child(2), :nth-child(3)) { opacity: .25 !important; }

/* phone: the comparison is one block per row */
@media (max-width: 600px) {
  :root[data-tbd] .p4-cmp :is(th, td)::after, :root[data-tbd] .p4-cmp tbody th::before { display: none; }
  :root[data-tbd="1"] .p4-cmp tbody td::before { content: attr(data-l); position: static; transform: none; height: auto; background: none; z-index: auto; transition: none; }
  :root[data-tbd="1"] .p4-cmp tbody tr { border-bottom-color: transparent; position: relative; }
  :root[data-tbd="1"] .p4-cmp tbody td:last-child { box-shadow: inset 1px 0 0 transparent; }
  :root[data-tbd="1"] .p4-cmp.is-in tbody tr { border-bottom-color: var(--line); transition: border-color .6s calc(.2s + var(--i, 0) * .14s); }
  :root[data-tbd="1"] .p4-cmp tbody td:last-child .c { padding-left: 10px; background: linear-gradient(var(--fg), var(--fg)) 0 0 / 1px 0 no-repeat;
    transition: clip-path .8s var(--p4-io) calc(.35s + var(--i, 0) * .14s + var(--j, 0) * .1s), background-size .6s var(--p4-io) calc(.9s + var(--i, 0) * .14s); }
  :root[data-tbd="1"] .p4-cmp.is-in tbody td:last-child .c { background-size: 1px 100%; }
  .p4-fr, .p4-colf, .p4-scan.v { display: none; }
  :root[data-tbd] .p4-cmp { padding-top: 0; }
  :root[data-tbd="2"] .p4-cmp tbody td:last-child .c { padding: 0 8px; margin-left: -8px; background: linear-gradient(var(--fg), var(--fg)) 0 100% / 100% 0 no-repeat; transition: background-size .6s var(--p4-io), color .4s; }
  :root[data-tbd="2"] .p4-cmp tbody tr.ink td:last-child { color: var(--bg); }
  :root[data-tbd="2"] .p4-cmp tbody tr.ink td:last-child .c { background-size: 100% 100%; }
  :root[data-tbd="3"] .p4-tchk li { grid-template-columns: 30px 2.6em minmax(0, 1fr); }
  :root[data-tbd="3"] .p4-cmp thead th::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-tbd] :is(.p4-tchk, .p4-cmp, .p4-fr, .p4-colf) *, :root[data-tbd] :is(.p4-tchk, .p4-cmp) *::before, :root[data-tbd] :is(.p4-tchk, .p4-cmp) *::after,
  .p4-fr, .p4-colf { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---- page-load opening (the page name drawn in large type) ----
   Same type rules as the page name on the page: the font's own kerning, and no extra tracking
   (it was -4px at 100px = -40 in Illustrator, which made pairs such as "rv" in Service touch). */
:root .pg-glyph { letter-spacing: var(--trk-name, 0); font-kerning: normal; font-feature-settings: "kern" 1; }

/* =====================================================================
   よくある質問：5案（html[data-fqd]、faq-f1〜f5.html）。動きは transform・clip-path・色・グリッドの行の高さだけ
   ===================================================================== */
/* ---- 1 寸法線 ---- */
:root[data-fqd="1"] .fq-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.fq-all { position: relative; display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color .3s; }
.fq-all::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 100% 50%; transition: transform .45s var(--p4-io); }
.fq-all:hover { color: var(--fg); }
.fq-all:hover::after { transform: scaleX(0); transform-origin: 0 50%; }
.fq-all i { position: relative; width: 9px; height: 9px; }
.fq-all i::before, .fq-all i::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: currentColor; transition: transform .45s var(--p4-io); }
.fq-all i::after { transform: rotate(90deg); }
.fq-all.is-on i::after { transform: rotate(0) scaleX(0); }
:root[data-fqd="1"] .la-qas { border-top-color: transparent; position: relative; }
:root[data-fqd="1"] .la-qas::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: 0 50%; animation: fq-draw 1.1s var(--p4-io) .2s forwards; }
@keyframes fq-draw { to { transform: none; } }
:root[data-fqd="1"] .la-qa { position: relative; row-gap: 0; padding: 0; border-bottom-color: transparent; }
:root[data-fqd="1"] .la-qa > .q, :root[data-fqd="1"] .la-qa > h3 { padding-block: 28px; }
.fq-rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--p4-io) var(--d, 0s); pointer-events: none; }
.la-qa.is-in > .fq-rule { transform: none; }
:root[data-fqd="1"] .la-qa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--p4-io); pointer-events: none; }
:root[data-fqd="1"] .la-qa:hover::after, :root[data-fqd="1"] .la-qa.is-open::after { transform: none; }
/* entering */
:root[data-fqd="1"] .la-qa > .q { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--p4-io) calc(var(--d, 0s) + .25s), color .3s; }
:root[data-fqd="1"] .fq-tx { display: inline; }
:root[data-fqd="1"] .fq-t { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--p4-io) calc(var(--d, 0s) + .35s), transform .5s var(--p4-out); }
:root[data-fqd="1"] .la-qa.is-in > .q, :root[data-fqd="1"] .la-qa.is-in .fq-t { clip-path: inset(-10px -40px -10px -10px); }
/* the question button */
.fq-t { all: unset; box-sizing: border-box; display: block; width: 100%; padding-right: 76px; cursor: pointer; position: relative; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
/* no box on the question when it is chosen; the keyboard focus shows as the black rule and the circle, like hover */
.fq-t:focus, .fq-t:focus-visible { outline: none; }
:root[data-fqd="1"] .la-qa:has(.fq-t:focus-visible)::after { transform: none; }
:root[data-fqd="1"] .la-qa:hover .fq-t { transform: translateX(6px); }
.fq-pm { position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; }
.fq-pm::before, .fq-pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fg); transform: scaleX(0); transition: transform .5s var(--p4-io); }
.la-qa.is-in .fq-pm::before { transform: none; transition-delay: calc(var(--d, 0s) + .5s); }
.la-qa.is-in .fq-pm::after { transform: rotate(90deg); transition-delay: calc(var(--d, 0s) + .6s); }
.la-qa.is-in.is-open .fq-pm::after { transform: rotate(0deg) scaleX(0); transition-delay: 0s; }
.la-qa.is-in.is-open .fq-pm::before { transform: rotate(180deg); transition-delay: 0s; }
.fq-pm svg { position: absolute; left: -12px; top: -12px; width: 40px; height: 40px; overflow: visible; transform: rotate(-90deg); }
.fq-pm circle { fill: none; stroke: var(--fg); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--p4-io); }
.la-qa:hover .fq-pm circle, .fq-t:focus-visible .fq-pm circle { stroke-dashoffset: 0; }
/* the number rolls from Q to A */
.fq-sz { position: relative; display: inline-block; visibility: hidden; }
.fq-roll { visibility: visible; position: absolute; left: 0; top: 0; display: grid; height: 2em; overflow: hidden; }
.fq-roll > span { display: block; line-height: 2; transition: transform .6s var(--p4-io); }
.is-open .fq-roll > span { transform: translateY(-100%); }
:root[data-fqd="1"] .la-qa.is-open > .q { color: var(--blue); }
/* the answer */
.fq-a { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--p4-io); }
.is-open > .fq-a { grid-template-rows: 1fr; }
.fq-a-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .65s; }
.is-open > .fq-a .fq-a-in { visibility: visible; transition-delay: 0s; }
.fq-a-g { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); column-gap: 16px; padding-bottom: 32px; }
.fq-aw { position: relative; grid-column: 2; min-width: 0; }
.fq-aw .la-ans { margin: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); transition: clip-path .7s var(--p4-io), transform .7s var(--p4-out); }
.is-open .fq-aw .la-ans { clip-path: inset(0 0 -20% 0); transform: none; transition-delay: .12s; }
.is-ink .fq-aw .la-ans { animation: fq-ink 1.5s var(--p4-io) .1s both; }
@keyframes fq-ink { 0%, 30% { color: var(--blue); } 100% { color: var(--muted); } }
.fq-guide { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 40em; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 23px, rgb(36 72 230 / .38) 23px 24px, transparent 24px 32px); }
.is-ink .fq-guide { animation: fq-guide 1.6s var(--p4-io) .08s both; }
@keyframes fq-guide { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 45% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
/* the dimension line, with the measured height */
.fq-dim { position: relative; display: block; margin-left: 4px; width: 14px; }
.fq-dim i { position: absolute; background: var(--blue); }
.fq-dim .l { left: 6px; top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: 50% 0; transition: transform .65s var(--p4-io); }
.fq-dim .t, .fq-dim .b { left: 0; width: 13px; height: 1px; transform: scaleX(0); transition: transform .35s var(--p4-io); }
.fq-dim .t { top: 0; } .fq-dim .b { bottom: 0; }
.fq-dim b { position: absolute; left: 14px; top: 50%; translate: 0 -50%; transform: translateY(6px); white-space: nowrap; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--blue); opacity: 0; transition: opacity .35s, transform .5s var(--p4-out); }
.is-open .fq-dim .t { transform: none; transition-delay: .05s; }
.is-open .fq-dim .l { transform: none; transition-delay: .1s; }
.is-open .fq-dim .b { transform: none; transition-delay: .62s; }
.is-open .fq-dim b { opacity: 1; transform: none; transition-delay: .4s; }
@media (max-width: 600px) { .fq-dim b { left: 12px; } :root[data-fqd="1"] .la-qa > .q { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-fqd="1"] .la-qas::before { animation: none; transform: none; }
  .is-ink .fq-aw .la-ans, .is-ink .fq-guide { animation: none; }
}

/* ---- 2 絞り込み ---- */
.fq-find { display: grid; gap: 18px; margin-bottom: 28px; }
.fq-search { position: relative; display: block; max-width: 30em; }
.fq-search input { -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 12px 2px; font: 400 16px/1.6 var(--f-jp); color: var(--fg); outline: none; }
.fq-search input::placeholder { color: var(--muted); opacity: .8; }
.fq-search i { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--p4-io); }
.fq-search input:focus + i { transform: none; }
:root[data-fqd="2"] .wfilters button { transition: color .3s; }
mark.fq-hit { background: linear-gradient(var(--fg), var(--fg)) 0 100% / 0 1px no-repeat; color: var(--fg); font-weight: 500; animation: fq-hit .7s var(--p4-io) .1s forwards; }
@keyframes fq-hit { to { background-size: 100% 1px; } }
.fq-empty { margin: 24px 0 0; font-size: 16px; line-height: 2; color: var(--fg); animation: p4-up .5s var(--p4-out); }
.la-qas.is-none { border-top-color: transparent; }

/* ---- 3 対話 ---- */
:root[data-fqd="3"] .la-qas { border-top: 0; display: grid; gap: 8px; }
:root[data-fqd="3"] .la-qa { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 28px 0; border-bottom: 0; }
:root[data-fqd="3"] .la-qa > .q { justify-self: end; display: flex; gap: 10px; align-items: baseline; }
:root[data-fqd="3"] .la-qa > .q .who { font: 500 12px/2 var(--f-jp); letter-spacing: .06em; color: var(--muted); }
:root[data-fqd="3"] .la-qa > h3 { justify-self: end; max-width: min(82%, 34em); padding: 14px 22px; border: 1px solid var(--line-strong); border-radius: 20px 20px 4px 20px; background: var(--bg);
  opacity: 0; transform: translateY(8px) scale(.98); transform-origin: 100% 100%; transition: opacity .35s var(--p4-out), transform .5s var(--p4-out); }
:root[data-fqd="3"] .la-qa.t1 > h3 { opacity: 1; transform: none; }
.fq-c { opacity: 0; }
.t1 .fq-c { opacity: 1; transition: opacity .05s linear calc(.18s + var(--k) * 30ms); }
.fq-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--fg); opacity: 0; }
.t1:not(.t2) .fq-caret { animation: fq-blink .8s steps(1) infinite; }
@keyframes fq-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.fq-dots { justify-self: start; display: flex; gap: 5px; margin: 6px 0 0; padding: 14px 18px; border-radius: 20px 20px 20px 4px; background: rgb(var(--fg-rgb) / .06); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--p4-out); }
.fq-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg); opacity: .25; }
.t2:not(.t3) .fq-dots { opacity: 1; transform: none; }
.t2:not(.t3) .fq-dots i { animation: fq-dot 1s var(--p4-io) infinite; }
.t2:not(.t3) .fq-dots i:nth-child(2) { animation-delay: .15s; } .t2:not(.t3) .fq-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fq-dot { 0%, 100% { opacity: .2; transform: none; } 40% { opacity: .9; transform: translateY(-3px); } }
.t3 .fq-dots { display: none; }
.fq-who { justify-self: start; display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 500 12px/1 var(--f-disp); letter-spacing: .1em; color: var(--muted); opacity: 0; transition: opacity .4s; }
.fq-who .av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--bg); font: 500 12px/1 var(--f-disp); letter-spacing: 0; }
.t3 .fq-who { opacity: 1; }
:root[data-fqd="3"] .la-qa > .la-ans { grid-column: 1; justify-self: start; max-width: min(86%, 38em); margin: 0; padding: 18px 24px; border-radius: 4px 20px 20px 20px; background: rgb(var(--fg-rgb) / .06); color: var(--fg);
  opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0 round 4px 20px 20px 20px); transition: opacity .4s var(--p4-out), transform .6s var(--p4-out), clip-path .7s var(--p4-io); }
:root[data-fqd="3"] .la-qa.t3 > .la-ans { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 4px 20px 20px 20px); }
:root[data-fqd="3"] .la-qa:not(.t1) > .q { opacity: 0; }
:root[data-fqd="3"] .la-qa > .q { transition: opacity .3s; }

/* ---- 4 2画面 ---- */
@media (min-width: 1200px) {
  .fq-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
  .fq-list { position: relative; }
  .fq-split .la-qa { grid-template-columns: 3.4em minmax(0, 1fr); padding: 18px 12px 18px 0; cursor: pointer; outline: none; position: relative; }
  .fq-split .la-qa h3 { font-size: 16px; line-height: 1.8; color: var(--muted); transition: color .35s, transform .5s var(--p4-out); }
  .fq-split .la-qa .q { transition: color .35s; }
  .fq-split .la-qa:hover h3, .fq-split .la-qa.is-act h3 { color: var(--fg); }
  .fq-split .la-qa.is-act h3 { transform: translateX(6px); }
  .fq-split .la-qa.is-act .q { color: var(--fg); }
  .fq-split .la-qa:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
  .fq-split .la-ans { display: none; }
  .fq-ind { position: absolute; left: -14px; top: 0; width: 1px; height: 0; background: var(--fg); transition: transform .55s var(--p4-io), height .55s var(--p4-io); }
  .fq-panel { position: sticky; top: calc(var(--barh, 64px) + 40px); display: grid; min-height: 360px; border-top: 1px solid var(--line-strong); padding-top: 28px; }
  .fq-card { grid-area: 1 / 1; display: grid; align-content: start; gap: 18px; transition: clip-path .7s var(--p4-io), transform .7s var(--p4-out), opacity .5s var(--p4-out); clip-path: inset(0 0 0 0); }
  .fq-card.is-pre { clip-path: inset(100% 0 0 0); transform: translateY(18px); opacity: 0; }
  .fq-card.is-out { clip-path: inset(0 0 100% 0); transform: translateY(-12px); opacity: 0; transition-duration: .45s; }
  .fq-pn { margin: 0; font: 500 48px/1 var(--f-disp); color: var(--fg); }
  .fq-pq { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; color: var(--fg); text-wrap: balance; word-break: auto-phrase; }
  .fq-pa { margin: 0; font-size: 16px; line-height: 2; color: var(--muted); max-width: 34em; text-wrap: pretty; }
  .fq-pc { margin: 6px 0 0; }
}
@media (max-width: 1199px) { .fq-panel, .fq-ind { display: none; } }

/* ---- 5 大きな番号 ---- */
:root[data-fqd="5"] .la-qa { --p: 0; position: relative; grid-template-columns: 168px minmax(0, 1fr); row-gap: 14px; padding: 40px 0; }
:root[data-fqd="5"] .la-qa::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--fg); transform: scaleX(var(--p)); transform-origin: 0 50%; }
:root[data-fqd="5"] .la-qa > .q { grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--barh, 64px) + 32px); display: grid; gap: 8px; margin: 0; }
:root[data-fqd="5"] .la-qa > .q small { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--muted); }
:root[data-fqd="5"] .la-qa > .q b { font: 500 112px/.86 var(--f-disp); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--fg);
  background: linear-gradient(90deg, var(--fg) 0 calc(var(--p) * 100%), var(--blue) calc(var(--p) * 100%), rgb(36 72 230 / 0) calc(var(--p) * 100% + 8%)) no-repeat;
  -webkit-background-clip: text; background-clip: text; font-variant-numeric: tabular-nums; }
:root[data-fqd="5"] .la-qa > h3 { grid-column: 2; padding-top: 16px; color: rgb(var(--fg-rgb) / calc(.28 + var(--p) * .72)); }
:root[data-fqd="5"] .la-qa > .la-ans { grid-column: 2; opacity: calc(.2 + var(--p) * .8); transform: translateY(calc((1 - var(--p)) * 14px)); }
@media (max-width: 700px) {
  :root[data-fqd="5"] .la-qa { grid-template-columns: minmax(0, 1fr); }
  :root[data-fqd="5"] .la-qa > .q { grid-row: auto; position: static; }
  :root[data-fqd="5"] .la-qa > .q b { font-size: 64px; }
  :root[data-fqd="5"] .la-qa > :is(h3, .la-ans) { grid-column: 1; }
  :root[data-fqd="5"] .la-qa > h3 { padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-fqd] .la-qa, :root[data-fqd] .la-qa *, :root[data-fqd] .la-qa *::before, :root[data-fqd] .la-qa *::after, .fq-card { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .fq-c { opacity: 1; }
}
:root[data-fqd] .la-qa[hidden] { display: none; }
:root[data-fqd="5"] .la-qa > .q b { justify-self: start; width: fit-content; }

/* the construction drawing of a heading keeps its own size while the section below it grows or shrinks
   (opening answers, filtering): the drawing is measured in px, so it must not stretch with the section */
:root .td svg { bottom: auto; height: auto; }

/* 2026-10-14: the four service rows (TOP and the service list): the line under the name at 20px, as on the Projects page (was 22px, set to 24px by the type scale) */
.svc-row .ct { font-size: 20px; }
.svc-row .ds { font-size: 14px; }   /* and the description at 14px, as on the Projects page (was 15px, set to 16px by the type scale) */

/* 2026-10-14: the other item lists (a heading over a short description) set like the service rows: heading 20px, description 14px
   (3つの約束, デザイン顧問がお手伝いすること, 旅館の直接予約・支援, TOPのメリット, 制作の流れ, 実績詳細の How) */
.ab-rows li > div h3, .step h3 { font-size: 20px; }
.ab-rows li > div p, .ab-items p, .la-tl-b p, .step p { font-size: 14px; }

/* 2026-10-14: the issue list of a project page — the number is a real element (so it can sit on the heading's line), not the counter */
.issues li::before { content: none; }
.issues .no { font: 400 12px/1.9 var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.issues li > .no { grid-row: 1 / span 2; }
/* measuring the optical centre (p4.js): the reveal's zoom and tilt are lifted for that moment only */
html.oc-measure .sec .sx, html.oc-measure .sec .sx * { transform: none !important; rotate: none !important; scale: none !important; transition: none !important; }

/* 2026-10-14: 完成までの流れ — the dot on the timeline sits on the heading's visual middle (p4.js sets --oc-y beside the number) */
.la-tl li::before { top: var(--oc-y, 12px); transform: translateY(-50%); }

/* 2026-10-14: よくある質問のジャンル見出し（.fq-cat）。見出しの下の罫線が、そのジャンルの最初の質問の上の線になる */
.la-qas:has(> .fq-cat:first-child) { border-top-color: transparent; }
:root[data-fqd="1"] .la-qas:has(> .fq-cat:first-child)::before { display: none; }
.fq-cat { display: flex; align-items: baseline; gap: 16px; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; letter-spacing: .08em; scroll-margin-top: 120px; }
.fq-cat .no { font: 400 12px/1 var(--f-mono); color: var(--muted); letter-spacing: .06em; }
.la-qas > .la-qa + .fq-cat { margin-top: 72px; }
@media (max-width: 900px) { .la-qas > .la-qa + .fq-cat { margin-top: 48px; } }

/* 2026-10-14: よくある質問の質問文は 16px */
:root[data-fqd="1"] .la-qa > h3 { font-size: 16px; line-height: 1.8; }

/* 2026-10-14: フッターのコピー（.f6-line）を外したので、見出しの行と目次の表の間をあける */
.f6-head + .f6-table { margin-top: 24px; }

/* 2026-10-14: フッターの表の下 — 社名と住所を1行で、左端に揃える */
.f6-foot { display: block; }
.f6-foot address { margin: 0; font-style: normal; font-size: 14px; line-height: 1.7; }
.f6-foot .f6-sp { display: inline-block; width: 1.5em; }

/* 2026-10-14: お問い合わせの左のレール — 見出しの下の線と連絡先の上の線が二重になるので、見出しの下の線を外す */
.ld-rail:has(.ct-ways) .ld-cur-one { border-bottom-color: transparent; }

/* ===== Hover underline: 1px everywhere (2026-10-14) =====
   Some list titles took the font's own underline thickness (about 2px in Zen Kaku Gothic New); every hover underline is now 1px */
.news-list a:hover .nl-t, .lb-news a:hover .nl-t, a.arc-row:hover .nm, a.lb-arc-i:hover .nm,
a.lc-tr:hover .nm, a.lc-tr:hover .nl-t, .lc-wk:hover .nm, .contact-ways a:hover .k, .fa-cols li a:hover,
.foot-base a:hover, .tb a:hover, .f14 .f-ways a:hover, .f14 .f-inline a:hover, .f14 .f-col a:hover,
.lc-ruler a:hover .t, .f6-more a:hover, .la-toc a:hover .t { text-decoration-thickness: 1px; }

/* ===== Privacy policy page (privacy.html) — 2026-10-14 ===== */
.pv-list { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pv-list > li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); padding: 32px 0 36px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.pv-list .no { font: 400 12px/1.9 var(--f-mono); color: var(--muted); padding-top: .3em; }
.pv-b { min-width: 0; max-width: 46em; }
.pv-b p { text-wrap: pretty; word-break: auto-phrase; }
.pv-b h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.6; letter-spacing: .06em; font-weight: 500; }
.pv-b p, .pv-b li, .pv-dl dd, .pv-dl dt { font-size: 15px; line-height: 1.9; letter-spacing: .04em; color: var(--muted); }
.pv-b p { margin: 0; }
.pv-b p + p, .pv-b p + ul { margin-top: 12px; }
.pv-b ul { margin: 0; padding: 0; list-style: none; }
.pv-b ul li { position: relative; padding-left: 1.4em; }
.pv-b ul li::before { content: ""; position: absolute; left: .2em; top: 1em; width: .55em; height: 1px; background: currentColor; }
.pv-b a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pv-dl { margin: 0; display: grid; gap: 6px; }
.pv-dl > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 16px; }
.pv-dl dt { color: var(--fg); }
.pv-dl dd { margin: 0; }
@media (max-width: 700px) {
  .pv-list > li { grid-template-columns: 1fr; padding: 28px 0 32px; }
  .pv-list .no { padding: 0 0 8px; }
  .pv-b h3 { font-size: 18px; }
  .pv-dl > div { grid-template-columns: 1fr; gap: 0; }
  .pv-dl > div + div { margin-top: 8px; }
}

/* Next page (2026-10-16): replaces the mid-page "next chapter" links; one block at the end of each page */
.ld-sec > .ld-go { margin-top: clamp(96px, 10vw, 160px); border-top: 1px solid var(--line-strong); }
.ld-go > .label { margin: 0; padding: 22px 0 6px; }
.ld-go > .ld-next { margin-top: 0 !important; border-top: 0; padding: 20px 0 22px; grid-template-columns: auto auto minmax(0, 1fr) auto; }
.ld-go .ld-next b { font-size: 26px; }
.ld-go .ld-next .j .d { margin-left: 1.2em; font-size: 13px; letter-spacing: .06em; }
.ld-go .ld-next:hover i { transform: translateX(4px); }
@media (max-width: 760px) {
  .ld-go > .ld-next { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; padding: 18px 0 20px; }
  .ld-go .ld-next b { font-size: 22px; }
  .ld-go .ld-next .j { line-height: 1.7; }
  .ld-go .ld-next .j .d { display: block; margin: 0; }
}

/* Row and timeline numbers (2026-10-17): 20px on PC and phone, the same size as the row headings, so the numbers no longer lead */
.la-rows .no, .la-tl-no { font-size: 20px; letter-spacing: 0; }
@media (max-width: 760px) { .la-rows .no, .la-tl-no { font-size: 20px; } }

/* Image placeholders on pages 01–06 (KV, pairs, row thumbnails) */
.ph-kv { grid-column: 2; width: 100%; margin: 0 0 8px; }
.ph-duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; margin: 0; }
.ph-duo > .phd:nth-child(2) { margin-top: clamp(48px, 6vw, 96px); }
.ph-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ph-wide { width: 100%; margin: 0; }
.g-tx > :is(.ph-duo, .ph-trio, .ph-wide) { margin-top: 48px; }
.la-rows.ph-rows li { grid-template-columns: 112px minmax(0, 1fr) clamp(168px, 17vw, 240px); }
.la-rows.ph-rows li > .phd { align-self: start; }
.lay-d :is(.ph-rows, .ph-svc, .ph-cases) .phd { overflow: hidden; }
.svc-row.ph-svc { grid-template-columns: 3.4em minmax(0, 12em) minmax(0, 1fr) clamp(140px, 14vw, 200px) 24px; grid-template-areas: "no nm ct th ar" "no nm ds th ar"; }
.svc-row.ph-svc > .phd { grid-area: th; align-self: start; }
.lay-d .svc-row.ph-svc .phd figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.la-rows.ph-rows li { align-items: start; }
.p4-cases.ph-cases > li { grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 280px); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.p4-cases.ph-cases > li > :not(.phd) { grid-column: 1; }
.p4-cases.ph-cases > li > .phd { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 900px) {
  .ph-kv { order: 5; margin-top: 32px; grid-column: 1; }
}
@media (max-width: 760px) {
  .la-rows.ph-rows li { grid-template-columns: 64px minmax(0, 1fr); }
  .la-rows.ph-rows li > .phd { grid-column: 2; width: 72%; }
  .p4-cases.ph-cases > li { grid-template-columns: minmax(0, 1fr); }
  .p4-cases.ph-cases > li > .phd { grid-column: 1; grid-row: auto; width: 72%; }
  .ph-duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ph-duo > .phd:nth-child(2) { margin-top: 0; width: 64%; justify-self: end; }
  .ph-trio .phd figcaption span { display: none; }
}
@media (max-width: 700px) {
  .svc-row.ph-svc { grid-template-columns: 2.6em minmax(0, 1fr) 20px; grid-template-areas: "no nm ar" "no ct ar" "no ds ar" "no th ar"; }
  .svc-row.ph-svc > .phd { width: 72%; margin-top: 8px; }
}

/* Preview 7: placeholders replaced by photos from the current site */
.phd.phd--img { background: var(--surface); }
.phd.phd--img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Case study (preview 7): 3:2 images stacked, one column */
.la-why.la-why--one { grid-template-columns: minmax(0, 1fr); }
.how-grid.how-grid--one { grid-template-columns: minmax(0, 1fr); }
.how-grid.how-grid--one .plan-wrap { position: static; height: auto; max-height: none; background: none; padding: 0; }
.how-grid.how-grid--one .plan-wrap svg { width: 100%; height: auto; max-height: 70vh; }
.step-media.step-media--stack { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.step-media.step-media--stack .phd { width: 100%; justify-self: stretch; }
.la-gal.la-gal--stack { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: clamp(40px, 5vw, 72px); }
.la-gal.la-gal--stack img, .la-cover img, .ld-cover img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }

/* Link titles in "Next project / Back to list": hover proposals (preview 7). The decorative rule lines are removed from these links. */
.next b { position: relative; transition: color .35s var(--ease), letter-spacing .45s var(--ease), transform .45s var(--ease); }
.next b .rl { display: none; }
/* A: one thin underline drawn from the left */
.hvx-a .next b { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 6px; transition: background-size .55s var(--ease), color .35s var(--ease); }
.hvx-a .next a:is(:hover, :focus-visible) b { background-size: 100% 1px; }
/* B: turns blue and an arrow slides in */
.hvx-b .next b::after { content: "→"; display: inline-block; margin-left: .3em; font-size: .6em; vertical-align: .25em; opacity: 0; transform: translateX(-10px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.hvx-b .next a:is(:hover, :focus-visible) b { color: var(--blue); }
.hvx-b .next a:is(:hover, :focus-visible) b::after { opacity: 1; transform: none; }
/* C: the word rolls up and comes back blue */
.hvx-c .next b .rw { display: inline-grid; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.hvx-c .next b .rw > span { grid-area: 1 / 1; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.hvx-c .next b .rw > span + span { transform: translateY(105%); color: var(--blue); }
.hvx-c .next a:is(:hover, :focus-visible) b .rw > span:first-child { transform: translateY(-105%); }
.hvx-c .next a:is(:hover, :focus-visible) b .rw > span + span { transform: none; }
/* D: a short line grows in front and pushes the word along */
.hvx-d .next b { padding-left: 0; transition: padding-left .5s var(--ease); }
.hvx-d .next b::before { content: ""; position: absolute; left: 0; top: 54%; width: 0; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.hvx-d .next a:is(:hover, :focus-visible) b { padding-left: 52px; }
.hvx-d .next a:is(:hover, :focus-visible) b::before { width: 36px; }
/* E: the letters open up slightly and turn blue */
.hvx-e .next a:is(:hover, :focus-visible) b { letter-spacing: .03em; color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .next b, .next b *, .next b::before, .next b::after { transition: none !important; } }

/* Hover proposals F-J (preview 7) */
/* F: a hairline sweeps across the word, left to right */
.hvx-f .next b::after { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.hvx-f .next a:is(:hover, :focus-visible) b::after { animation: hvx-sweep .9s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes hvx-sweep { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 50.1% { transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
/* G: blue ink fills the letters from the left */
.hvx-g .next b { background: linear-gradient(90deg, var(--blue) 0 50%, var(--fg) 50% 100%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .18em; margin-bottom: -.18em; transition: background-position .7s cubic-bezier(.7, 0, .2, 1); }
.hvx-g .next a:is(:hover, :focus-visible) b { background-position: 0 0; }
/* H: the letters become outlines */
.hvx-h .next b { -webkit-text-stroke: 1px transparent; transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease); }
.hvx-h .next a:is(:hover, :focus-visible) b { color: transparent; -webkit-text-stroke-color: var(--fg); }
/* I: a line runs under the word and ends in an arrowhead */
.hvx-i .next b { padding-bottom: 10px; }
.hvx-i .next b::before { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.hvx-i .next b::after { content: ""; position: absolute; right: 0; bottom: -3.5px; width: 8px; height: 8px; border-top: 1px solid var(--fg); border-right: 1px solid var(--fg); transform: rotate(45deg) scale(0); transition: transform .25s var(--ease) 0s; }
.hvx-i .next a:is(:hover, :focus-visible) b::before { transform: none; }
.hvx-i .next a:is(:hover, :focus-visible) b::after { transform: rotate(45deg) scale(1); transition-delay: .45s; }
/* J: crop marks close in on the four corners, as on a drawing sheet */
.hvx-j .next b { padding: .08em .18em; margin-left: -.18em; }
.hvx-j .next b::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: scale(1.12); transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, .8, .2, 1);
  --c: var(--blue); --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat; }
.hvx-j .next a:is(:hover, :focus-visible) b::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hvx-f .next a:hover b::after { animation: none; } }

/* Hover proposals K-L (preview 7): the global menu's faint tint */
/* K: a soft light behind the word, and the word takes a faint tint of it (same as the global menu) */
.hvx-k .next b::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 130%; height: 140%; transform: translate(-50%, -50%) scale(.85); pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(36, 72, 230, .2), rgba(31, 181, 168, .12) 55%, rgba(123, 92, 255, 0) 100%); filter: blur(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.hvx-k .next b, .hvx-l .next b { isolation: isolate; padding-bottom: .16em; margin-bottom: -.16em; }
.hvx-k .next a:is(:hover, :focus-visible) b::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hvx-k .next a:is(:hover, :focus-visible) b, .hvx-l .next a:is(:hover, :focus-visible) b { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, color-mix(in srgb, #2448e6 38%, var(--fg)), color-mix(in srgb, #1fb5a8 38%, var(--fg)) 55%, color-mix(in srgb, #7b5cff 38%, var(--fg))); }
/* L: only the faint tint on the word, no light behind it */
.hvx-l .next b { transition: color .4s var(--ease); }

/* Heading notes: CAP-HEIGHT / X-HEIGHT in the same blue as SET WIDTH (2026-10-30) */
.td text.gl { fill: var(--blue); opacity: 0; }
.td.on text.gl { opacity: .85; }

/* Heading notes: 8px on PC and phones (2026-10-30) */
.td text { font-size: 8px; }
@media (max-width: 900px) { .td text { font-size: 8px; } }

/* Works list: header columns line up with the rows; names 16px, type and header labels 12-14px (2026-11-01) */
.arc-row { grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 24px; }
.arc-row .nm { font-size: 16px; }
.arc-row.arc-head > * { font-size: 12px; }
@media (max-width: 760px) { .arc-row { grid-template-columns: 48px minmax(0, 1fr) 20px; } }

/* =====================================================================
   Global menu (PC) and drawer (phones): five proposals, html[data-nvd] (p4.js builds the drawer) — 2026-10-14
   ===================================================================== */
html.nv header.bar nav { position: relative; }
html.nv header.bar nav a { position: relative; text-decoration: none !important; transition: color .3s; }
html.nv header.bar nav a:hover, html.nv header.bar nav a:focus-visible { color: var(--fg); }
html.nv header.bar nav .nv-en { position: relative; display: inline-block; }
html.nv.nv-open { overflow: hidden; }

/* the button: "Menu" and two lines that turn into a thin cross */
.nv-btn { display: none; align-items: center; gap: 12px; margin: 0; padding: 10px 0; border: 0; background: none; color: var(--fg); cursor: pointer; font: 500 14px/1 var(--f-disp); letter-spacing: .04em; }
.nv-ic { position: relative; display: block; width: 28px; height: 9px; }
.nv-ic i { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease); }
.nv-ic i:first-child { top: 0; }
.nv-ic i:last-child { top: 8px; width: 64%; left: auto; right: 0; }
.nv-btn:hover .nv-ic i:last-child { width: 100%; }
.nv-x .nv-ic i { top: 4px !important; width: 100% !important; }
.nv-x .nv-ic i:first-child { transform: rotate(18deg); }
.nv-x .nv-ic i:last-child { transform: rotate(-18deg); }
html:not(.nv-open) .nv-x .nv-ic i { transform: none; }
html.nv-open .nv-x .nv-ic i { transition-delay: .25s; }
.nv-btn:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
@media (max-width: 900px) {
  html.nv header.bar { flex-wrap: nowrap; }
  html.nv header.bar nav { display: none; }
  html.nv header.bar .nv-menu { display: inline-flex; }
}

/* the drawer: the frame shared by all five */
.nv-dr { position: fixed; inset: 0; z-index: 125; visibility: hidden; pointer-events: none; color: var(--fg); transition: visibility 0s linear .7s; }
html.nv-open .nv-dr { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nv-bg { position: absolute; inset: 0; background: var(--bg); overflow: hidden; }
.nv-bg i { position: absolute; display: block; }
.nv-top { position: relative; display: flex; justify-content: space-between; align-items: center; height: var(--barh, 64px); padding: 0 var(--gutter); }
.nv-logo .logo { width: 88px; }
.nv-in { position: relative; display: flex; flex-direction: column; height: calc(100% - var(--barh, 64px)); overflow-y: auto; padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); }
.nv-k { display: flex; align-items: baseline; margin: 0 0 16px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nv-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.nv-list li { position: relative; }
.nv-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left center; }
.nv-list a { display: grid; grid-template-columns: 2.8em auto minmax(0, 1fr) auto; grid-template-areas: "no en jp i"; align-items: baseline; column-gap: 12px; row-gap: 6px; padding: 13px 0 14px; color: inherit; text-decoration: none; }
.nv-list .no { grid-area: no; font: 400 12px/1 var(--f-mono); color: var(--muted); }
.nv-list .en { grid-area: en; display: inline-flex; width: fit-content; position: relative; font: 500 28px/1.15 var(--f-disp); letter-spacing: -.01em; }
.nv-list .jp { grid-area: jp; min-width: 0; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.nv-list .d { display: none; }
.nv-list i { grid-area: i; align-self: center; font-style: normal; font-size: 16px; color: var(--muted); }
.nv-list .is-cur .no, .nv-list .is-cur i { color: var(--blue); }
.nv-ways { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; font-size: 14px; }
.nv-ways a { color: inherit; text-decoration: none; }
.nv-ways p { display: grid; gap: 2px; margin: 0; }
.nv-ways .note { font-size: 12px; color: var(--muted); }
.nv-in > * { transition: opacity .3s; }
html:not(.nv-open) .nv-in > * { opacity: 0; }

/* ================= 1 寸法線 ================= */
:root[data-nvd="1"] header.bar nav .nv-dim { position: absolute; left: 0; top: calc(100% + 8px); width: var(--dw, 0px); height: 7px; transform: translateX(var(--dx, 0px)); pointer-events: none; opacity: 0;
  border-left: 1px solid var(--blue); border-right: 1px solid var(--blue); background: linear-gradient(var(--blue), var(--blue)) center / 100% 1px no-repeat;
  transition: transform .6s cubic-bezier(.7, 0, .2, 1), width .6s cubic-bezier(.7, 0, .2, 1), opacity .3s; }
:root[data-nvd="1"] header.bar nav.nv-on .nv-dim { opacity: 1; }
:root[data-nvd="1"] header.bar nav.nv-still .nv-dim { transition: none; }
:root[data-nvd="1"] .nv-bg { opacity: 0; transition: opacity .35s; }
html.nv-open:root[data-nvd="1"] .nv-bg { opacity: 1; transition: opacity .45s var(--ease); }
:root[data-nvd="1"] .nv-bg i { top: 0; bottom: 0; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: top; transition: transform .4s; }
:root[data-nvd="1"] .nv-bg i:nth-child(1) { left: var(--gutter); }
:root[data-nvd="1"] .nv-bg i:nth-child(2) { left: calc(var(--gutter) + 2.8em + 12px); }
:root[data-nvd="1"] .nv-bg i:nth-child(3) { right: var(--gutter); }
html.nv-open:root[data-nvd="1"] .nv-bg i { transform: scaleY(1); transition: transform 1.2s var(--ease) .1s; }
:root[data-nvd="1"] .nv-list li::after { transform: scaleX(0); transition: transform .3s; }
html.nv-open:root[data-nvd="1"] .nv-list li::after { transform: scaleX(1); transition: transform 1s var(--ease) calc(.2s + var(--i) * .07s); }
:root[data-nvd="1"] .nv-list a > * { opacity: 0; transform: translateY(18px); transition: opacity .2s, transform .3s; }
html.nv-open:root[data-nvd="1"] .nv-list a > * { opacity: 1; transform: none; transition: opacity .6s calc(.28s + var(--i) * .07s), transform .9s var(--ease) calc(.28s + var(--i) * .07s); }
:root[data-nvd="1"] .nv-list .is-cur .en::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 7px; border-left: 1px solid var(--blue); border-right: 1px solid var(--blue);
  background: linear-gradient(var(--blue), var(--blue)) center / 100% 1px no-repeat; transform: scaleX(0); transition: transform .3s; }
html.nv-open:root[data-nvd="1"] .nv-list .is-cur .en::after { transform: scaleX(1); transition: transform .9s cubic-bezier(.7, 0, .2, 1) .9s; }

/* ================= 2 トンボ（図面の紙） ================= */
:root[data-nvd="2"] header.bar nav .nv-tm { position: absolute; inset: -9px -11px; pointer-events: none; }
:root[data-nvd="2"] header.bar nav .nv-tm b { position: absolute; width: 7px; height: 7px; border: 0 solid var(--blue); opacity: 0; transform: scale(.2); transition: transform .45s var(--ease), opacity .25s; }
:root[data-nvd="2"] header.bar nav .nv-tm b:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; transform-origin: 0 0; }
:root[data-nvd="2"] header.bar nav .nv-tm b:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; transform-origin: 100% 0; transition-delay: .04s; }
:root[data-nvd="2"] header.bar nav .nv-tm b:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; transform-origin: 0 100%; transition-delay: .08s; }
:root[data-nvd="2"] header.bar nav .nv-tm b:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; transform-origin: 100% 100%; transition-delay: .12s; }
:root[data-nvd="2"] header.bar nav a:is(:hover, :focus-visible) .nv-tm b { opacity: 1; transform: scale(1); }
:root[data-nvd="2"] header.bar nav a[aria-current="page"] .nv-tm b { opacity: .45; transform: scale(1); border-color: currentColor; }
:root[data-nvd="2"] header.bar nav a[aria-current="page"]:is(:hover, :focus-visible) .nv-tm b { opacity: 1; border-color: var(--blue); }
:root[data-nvd="2"] .nv-dr { color: #e8eaee; --line: rgba(232, 234, 238, .14); --line-strong: rgba(232, 234, 238, .42); --muted: #8b919c; --blue: #8fa6ff; }
:root[data-nvd="2"] .nv-bg { background: #0a0c11; clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1); }
html.nv-open:root[data-nvd="2"] .nv-bg { clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
:root[data-nvd="2"] .nv-bg::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background-image: linear-gradient(rgba(232, 234, 238, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 234, 238, .05) 1px, transparent 1px); background-size: 24px 24px; background-position: var(--gutter) 0; }
html.nv-open:root[data-nvd="2"] .nv-bg::before { opacity: 1; transition: opacity 1.2s .45s; }
:root[data-nvd="2"] .nv-bg i { width: 14px; height: 14px; border: 0 solid rgba(232, 234, 238, .5); opacity: 0; transition: opacity .2s; }
:root[data-nvd="2"] .nv-bg i:nth-child(1) { left: 12px; top: calc(var(--barh, 64px) + 8px); border-left-width: 1px; border-top-width: 1px; }
:root[data-nvd="2"] .nv-bg i:nth-child(2) { right: 12px; top: calc(var(--barh, 64px) + 8px); border-right-width: 1px; border-top-width: 1px; }
:root[data-nvd="2"] .nv-bg i:nth-child(3) { right: 12px; bottom: 12px; border-right-width: 1px; border-bottom-width: 1px; }
html.nv-open:root[data-nvd="2"] .nv-bg i { opacity: 1; transition: opacity .6s .7s; }
:root[data-nvd="2"] .nv-list li::after { transform: scaleX(0); transition: transform .3s; }
html.nv-open:root[data-nvd="2"] .nv-list li::after { transform: scaleX(1); transition: transform 1s var(--ease) calc(.45s + var(--i) * .06s); }
:root[data-nvd="2"] .nv-list .en { color: transparent; -webkit-text-stroke: 1px rgba(232, 234, 238, .75);
  background: linear-gradient(90deg, #e8eaee 0 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position .3s; }
html.nv-open:root[data-nvd="2"] .nv-list .en { background-position: 0 0; -webkit-text-stroke-color: transparent; transition: background-position 1.1s cubic-bezier(.7, 0, .2, 1) calc(.6s + var(--i) * .08s), -webkit-text-stroke-color .6s calc(1.5s + var(--i) * .08s); }
:root[data-nvd="2"] .nv-list .is-cur .en { -webkit-text-stroke-color: var(--blue); background-image: linear-gradient(90deg, var(--blue) 0 50%, transparent 50%); }
html.nv-open:root[data-nvd="2"] .nv-list .is-cur .en { -webkit-text-stroke-color: transparent; }
html.nv-open:root[data-nvd="2"] .nv-list a:is(:hover, :focus-visible) .en { -webkit-text-stroke-color: var(--blue); background-position: 100% 0; transition: background-position .5s cubic-bezier(.7, 0, .2, 1), -webkit-text-stroke-color .2s; }
:root[data-nvd="2"] .nv-list :is(.no, .jp, i) { opacity: 0; transition: opacity .2s; }
html.nv-open:root[data-nvd="2"] .nv-list :is(.no, .jp, i) { opacity: 1; transition: opacity .6s calc(.7s + var(--i) * .06s); }

/* ================= 3 ロール ================= */
.nv-chs { display: inline-flex; overflow: hidden; line-height: 1.25; }
.nv-ch { display: inline-block; white-space: pre; }
:root[data-nvd="3"] header.bar nav .nv-chs { height: 1.25em; }
:root[data-nvd="3"] header.bar nav .nv-ch { text-shadow: 0 1.25em var(--blue); transition: transform .55s var(--ease) calc(var(--i) * .025s); }
:root[data-nvd="3"] header.bar nav a:is(:hover, :focus-visible) .nv-ch { transform: translateY(-1.25em); }
:root[data-nvd="3"] header.bar nav a[aria-current="page"] .nv-en::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); }
:root[data-nvd="3"] .nv-dr { transform: translateX(100%); transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s; }
html.nv-open:root[data-nvd="3"] .nv-dr { transform: none; transition: transform .75s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
:root[data-nvd="3"] .nv-list .en .nv-chs { height: 1.15em; line-height: 1.15; }
:root[data-nvd="3"] .nv-list .en .nv-ch { transform: translateY(105%); transition: transform .3s; }
html.nv-open:root[data-nvd="3"] .nv-list .en .nv-ch { transform: none; transition: transform .9s var(--ease) calc(.35s + var(--r) * .07s + var(--i) * .025s); }
:root[data-nvd="3"] .nv-list a:is(:hover, :focus-visible) .en .nv-ch { color: var(--blue); }
:root[data-nvd="3"] .nv-list li::after { transform: scaleX(0); transform-origin: right center; transition: transform .3s; }
html.nv-open:root[data-nvd="3"] .nv-list li::after { transform: scaleX(1); transition: transform .9s var(--ease) calc(.3s + var(--r) * .07s); }
:root[data-nvd="3"] .nv-list :is(.no, .jp, i) { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
html.nv-open:root[data-nvd="3"] .nv-list :is(.no, .jp, i) { opacity: 1; transform: none; transition: opacity .6s calc(.5s + var(--r) * .07s), transform .9s var(--ease) calc(.5s + var(--r) * .07s); }
:root[data-nvd="3"] .nv-list .is-cur .en .nv-ch { color: var(--blue); }

/* ================= 4 光 ================= */
:root[data-nvd="4"] header.bar nav .nv-glow { position: absolute; left: var(--gx, 50%); top: 50%; z-index: -1; width: 100px; height: 40px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(36, 72, 230, .2), rgba(31, 181, 168, .12) 55%, rgba(123, 92, 255, 0) 100%); filter: blur(6px); transition: opacity .5s, left .35s var(--ease); }
/* the English of the item under the pointer takes a faint tint of the same light (about 1/4 of the first size, 2026-10-14) */
:root[data-nvd="4"] header.bar nav a .nv-en { transition: color .4s; }
:root[data-nvd="4"] header.bar nav a:is(:hover, :focus-visible) .nv-en { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, color-mix(in srgb, #2448e6 38%, var(--fg)), color-mix(in srgb, #1fb5a8 38%, var(--fg)) 55%, color-mix(in srgb, #7b5cff 38%, var(--fg))); }
:root[data-nvd="4"] header.bar nav:is(:hover, :focus-within) .nv-glow { opacity: 1; }
:root[data-nvd="4"] header.bar nav a[aria-current="page"] .nv-en::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2448e6, #1fb5a8, #7b5cff); }
:root[data-nvd="4"] .nv-dr { color: #e8eaee; --line: rgba(232, 234, 238, .14); --line-strong: rgba(232, 234, 238, .4); --muted: #9aa1ad; --blue: #8fa6ff; }
:root[data-nvd="4"] .nv-bg { background: #05070b; clip-path: circle(0 at var(--ox, 90%) var(--oy, 32px)); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
html.nv-open:root[data-nvd="4"] .nv-bg { clip-path: circle(150vmax at var(--ox, 90%) var(--oy, 32px)); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); }
:root[data-nvd="4"] .nv-bg i { width: 80vmax; height: 80vmax; border-radius: 50%; filter: blur(70px); opacity: .55; animation: nv-drift 16s ease-in-out infinite alternate; }
:root[data-nvd="4"] .nv-bg i:nth-child(1) { right: -40vmax; top: -30vmax; background: radial-gradient(closest-side, #2448e6, transparent); }
:root[data-nvd="4"] .nv-bg i:nth-child(2) { right: -50vmax; top: 10vmax; background: radial-gradient(closest-side, #1fb5a8, transparent); animation-duration: 21s; animation-direction: alternate-reverse; }
:root[data-nvd="4"] .nv-bg i:nth-child(3) { left: -45vmax; bottom: -45vmax; background: radial-gradient(closest-side, #7b5cff, transparent); opacity: .4; animation-duration: 18s; }
@keyframes nv-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vmax, 6vmax) scale(1.12); } }
html:not(.nv-open):root[data-nvd="4"] .nv-bg i { animation-play-state: paused; }
:root[data-nvd="4"] .nv-list a > * { opacity: 0; filter: blur(10px); transform: translateY(10px); transition: opacity .2s, filter .2s, transform .2s; }
html.nv-open:root[data-nvd="4"] .nv-list a > * { opacity: 1; filter: blur(0); transform: none; transition: opacity .9s calc(.35s + var(--i) * .07s), filter 1s var(--ease) calc(.35s + var(--i) * .07s), transform 1s var(--ease) calc(.35s + var(--i) * .07s); }
:root[data-nvd="4"] .nv-list .is-cur .en::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2448e6, #1fb5a8, #7b5cff); }
:root[data-nvd="4"] .nv-list a:is(:hover, :focus-visible) .en { text-shadow: 0 0 24px rgba(143, 166, 255, .6); }

/* ================= 5 目次 ================= */
:root[data-nvd="5"] header.bar nav { display: none !important; }
:root[data-nvd="5"] header.bar .nv-menu { display: inline-flex; }
:root[data-nvd="5"] header.bar { flex-wrap: nowrap; }
.nv-here { display: flex; align-items: baseline; gap: 10px; margin: 0 32px 0 auto; font: 500 14px/1 var(--f-disp); }
.nv-here .no { font: 400 12px/1 var(--f-mono); color: var(--muted); }
:root[data-nvd="5"] .nv-bg { opacity: 0; transition: opacity .3s; }
html.nv-open:root[data-nvd="5"] .nv-bg { opacity: 1; transition: opacity .4s; }
:root[data-nvd="5"] .nv-list { border-top-color: transparent; position: relative; }
:root[data-nvd="5"] .nv-list::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
html.nv-open:root[data-nvd="5"] .nv-list::before { transform: scaleX(1); transition: transform 1s var(--ease) .1s; }
:root[data-nvd="5"] .nv-list li { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
html.nv-open:root[data-nvd="5"] .nv-list li { grid-template-rows: 1fr; transition: grid-template-rows .8s var(--ease) calc(.2s + var(--i) * .06s); }
:root[data-nvd="5"] .nv-list li > a { min-height: 0; overflow: hidden; }
:root[data-nvd="5"] .nv-list li::after { opacity: 0; transition: opacity .2s; }
html.nv-open:root[data-nvd="5"] .nv-list li::after { opacity: 1; transition: opacity .4s calc(.3s + var(--i) * .06s); }
:root[data-nvd="5"] .nv-list a { grid-template-areas: "no en jp i" ". d d i"; }
:root[data-nvd="5"] .nv-list .d { display: block; grid-area: d; font-size: 12px; line-height: 1.7; color: var(--muted); }
:root[data-nvd="5"] .nv-list a:is(:hover, :focus-visible) .en { color: var(--blue); }
:root[data-nvd="5"] .nv-list a i { transition: transform .4s var(--ease); }
:root[data-nvd="5"] .nv-list a:is(:hover, :focus-visible) i { transform: translateX(6px); color: var(--blue); }
@media (min-width: 901px) {
  :root[data-nvd="5"] .nv-in { padding-top: 48px; }
  :root[data-nvd="5"] .nv-list a { grid-template-columns: 3.5em minmax(0, 14em) minmax(0, 12em) minmax(0, 1fr) 2em; grid-template-areas: "no en jp d i"; align-items: center; padding: 18px 0 19px; }
  :root[data-nvd="5"] .nv-list .no { align-self: center; padding-top: 0; }
  :root[data-nvd="5"] .nv-list .en { font-size: 28px; }
  :root[data-nvd="5"] .nv-list .d { font-size: 14px; }
  :root[data-nvd="5"] .nv-ways { grid-template-columns: repeat(3, max-content); column-gap: 40px; align-items: start; }
}
@media (max-width: 900px) { .nv-here { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nv-dr, .nv-dr *, .nv-dr *::before, .nv-dr *::after, html.nv header.bar nav * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* works8: 実績詳細の全件反映 */
.la-gal.la-gal--stack figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.la-gal.la-gal--stack figure.w8-nat img, .step-media.step-media--stack img.w8-nat { aspect-ratio: auto; object-fit: contain; height: auto; }
.la-gal.la-gal--stack figure.w8-pt { width: 100%; }
.la-gal.la-gal--stack figure.w8-pt img, .step-media.step-media--stack img.w8-pt { display: block; aspect-ratio: 2 / 3; width: min(100%, 560px); margin-inline: auto; }
.w8-how .steps { margin-top: clamp(32px, 4vw, 56px); }
.role.w8-credit, .role.w8-link { margin-top: 28px; }
.role.w8-credit ul { display: block; } .role.w8-credit li { font-size: 13px; line-height: 1.9; color: var(--muted); }
.role.w8-link a { text-decoration: underline; text-underline-offset: 3px; }
.arc-row.is-soon, .wk-it.is-soon { pointer-events: none; cursor: default; }
.arc-row.is-soon .nm { color: var(--muted); }
/* /works8 */

/* review7: スマホメニューの閉じるボタンを表示 */
.nv-dr .nv-x { display: inline-flex; }
/* /review7 */

/* articles: コラム・お知らせの記事ページ */
.art-title { margin: 0; font-size: 24px; line-height: 1.6; font-weight: 700; letter-spacing: .04em; text-wrap: pretty; }
.art-kind { margin: 0; }
.art-body { max-width: 720px; }
.art-body > * { margin: 0; }
.art-body > * + * { margin-top: 1.4em; }
.art-body p { font-size: 16px; line-height: 2; }
.art-body h3 { font-size: 24px; line-height: 1.6; font-weight: 700; margin-top: 2.4em; padding-top: 24px; border-top: 1px solid var(--line-strong); scroll-margin-top: 120px; }
.art-body h4 { font-size: 20px; line-height: 1.6; font-weight: 700; margin-top: 2em; }
.art-body h5 { font-size: 18px; line-height: 1.6; font-weight: 700; margin-top: 1.8em; }
.art-body figure { margin-block: 2.2em; }
.art-body figure img { display: block; width: 100%; height: auto; }
.art-body figcaption { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.art-body ul, .art-body ol { padding-left: 1.4em; }
.art-body li { font-size: 16px; line-height: 1.9; margin-top: .3em; }
.art-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art-body strong { font-weight: 700; }
.art-body + .next { margin-top: clamp(64px, 8vw, 112px); }
@media (max-width: 760px) { .art-title { font-size: 20px; } .art-body h3 { font-size: 20px; } .art-body h4 { font-size: 18px; } .art-body h5 { font-size: 16px; } }
/* /articles */
/* size8 */
html[data-p] .pj .pj-name, .la-wk .nm { font-size: 20px; }
.next b { font-size: 24px; }
@media (max-width: 760px) { html[data-p] .pj .pj-name, .la-wk .nm { font-size: 18px; } .next b { font-size: 20px; } }
/* /size8 */
/* meta8 */
.la-meta dd { line-height: 1.7; word-break: auto-phrase; }
.la-meta .lm-i { display: inline-block; white-space: nowrap; }
.la-meta .lm-sep .lm-i:not(:last-child)::after { content: "・"; }
.la-meta .lm-list .lm-i { display: block; }
@media (min-width: 761px) {
  .la-meta div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0 13px; }
  .la-meta dt { font-size: 11px; line-height: 1.6; }
}
/* 基本情報・リード文と、その下のメイン画像のあいだに余白 */
.ld-top + :is(.la-cover, .ld-cover) { margin-top: clamp(40px, 5.5vw, 80px); }
/* /meta8 */
/* office8 */
.ph-solo { max-width: 400px; }
.ph-solo .phd { width: 100%; }
/* /office8 */
/* photos8 */
.ph-one { margin: 0; max-width: 640px; }
.ph-one > .phd[style*="4/5"] { max-width: 400px; }
.g-tx > .ph-one { margin-top: 48px; }
.ld-sec > .ph-one, .ld-sec ol + .ph-one { margin-top: clamp(32px, 4vw, 56px); }
.phd.phd--img.ph-movie > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* /photos8 */
/* works9 */
.arc-row { grid-template-columns: 56px 120px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 24px; }
.arc-row .th { display: block; width: 120px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ph, #eee); }
.arc-row.arc-head .th { background: none; aspect-ratio: auto; }
.arc-row .th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease, ease); }
a.arc-row:not(.is-soon):hover .th img { transform: scale(1.05); }
.arc-row.is-soon .th img { opacity: .75; }
@media (max-width: 760px) {
  .arc-row { grid-template-columns: 30px 84px minmax(0, 1fr) 16px; gap: 12px; }
  .arc-row .th { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .arc-row .th img { transition: none; } }
/* /works9 */
/* iv8 */
.iv-av img, :root[data-ivd="3"] .iv-av img, .iv-pf img { filter: none; }
.iv-flow { display: grid; gap: 28px; }
.iv-flow > .iv-say, .iv-flow > .iv-say + .iv-say { margin-top: 0; }
.iv-ph, .iv-ph2 { margin: 0; }
/* 冒頭の写真：本文の写真と同じ幅（右の本文の列）・元の比率 */
.ld-cover.iv-cv { display: grid; grid-template-columns: var(--rw) minmax(0, 1fr); column-gap: var(--rgap); max-width: calc(1680px + 2 * var(--gutter)); margin-inline: auto; }
.ld-cover.iv-cv img { grid-column: 2; justify-self: center; width: 80%; aspect-ratio: auto; height: auto; max-width: 100%; }
@media (max-width: 900px) { .ld-cover.iv-cv { grid-template-columns: minmax(0, 1fr); } .ld-cover.iv-cv img { grid-column: 1; } }
.iv-ph img, .iv-ph2 img { display: block; width: 100%; height: auto; }
.iv-flow > .iv-ph, .iv-flow > .iv-phs { margin-block: 12px; }
.iv-phs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.iv-txt8 { display: grid; gap: 1em; }
.iv-txt8 p, .iv-flow .iv-close p { margin: 0; font-size: 16px; line-height: 2; color: var(--fg); }
.iv-flow .iv-close { display: grid; gap: 1em; margin-top: 16px; }
@media (max-width: 560px) { .iv-phs { grid-template-columns: 1fr; } .iv-txt8 p, .iv-flow .iv-close p { font-size: 15px; } }
/* /iv8 */

/* nav9-e1 — ドロワーメニュー E1 ナイト・グリッド（すべての画面幅）。ヘッダーの横並びは英語のみ（2026-11-02） */
:root[data-nvdr="e1"] header.bar { justify-content: flex-start; }
:root[data-nvdr="e1"] header.bar nav { margin-left: auto; }
:root[data-nvdr="e1"] header.bar .nv-menu { display: inline-flex; margin-left: clamp(22px, 2.4vw, 40px); }
@media (max-width: 900px) { :root[data-nvdr="e1"] header.bar .nv-menu { margin-left: auto; } }
:root[data-nvdr="e1"] .nv-dr { --e-fg: #eef0f5; --e-mut: #8c94a6; --e-dim: rgba(238, 240, 245, .26); --e-line: rgba(255, 255, 255, .11); --e-acc: #7b93ff; --e-no: 44px; --e-gap: 48px;
  color: var(--e-fg); opacity: 0; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
html.nv-open:root[data-nvdr="e1"] .nv-dr { opacity: 1; transition: opacity .6s var(--ease), visibility 0s; }
:root[data-nvdr="e1"] .nv-bg { clip-path: none !important; transition: none !important;
  background: radial-gradient(55% 60% at 84% 78%, rgba(46, 98, 255, .40), transparent 62%), radial-gradient(32% 38% at 94% 26%, rgba(60, 210, 200, .20), transparent 60%), #0a0c12; }
:root[data-nvdr="e1"] .nv-bg i { display: none; }
:root[data-nvdr="e1"] .nv-top { height: var(--nvh, 64px); }
:root[data-nvdr="e1"] .nv-x { display: inline-flex; color: var(--e-fg); }
.e1 { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100% - var(--nvh, 64px)); padding: 0 var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px)); }
.e1-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; scrollbar-width: none; }
.e1-body::-webkit-scrollbar { display: none; }
.e1-in { margin-block: auto; padding-block: 12px 28px; }
.e1 a { color: inherit; text-decoration: none; }
.e1 a:focus-visible { outline: 2px solid var(--e-acc); outline-offset: 3px; border-radius: 2px; }
.e1 .no { font: 400 11px/1 var(--f-mono); color: var(--e-mut); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.e1 a > i { font-style: normal; color: var(--e-mut); justify-self: end; transition: transform .35s var(--ease), color .35s; }
.e1-main, .e1-subs, .e1-ft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-gap); }
.e1-col, .e1-sub { display: grid; align-content: start; }
.e1-row { display: grid; grid-template-columns: var(--e-no) minmax(0, 1fr) auto 28px; align-items: baseline; padding: 13px 0 12px; border-bottom: 1px solid var(--e-line); }
.e1-row:first-child { border-top: 1px solid var(--e-line); }
.e1-row .en { font: 500 clamp(28px, min(3.1vw, 5.4vh), 44px)/1.1 var(--f-disp); letter-spacing: -.018em; transition: color .35s var(--ease); }
.e1-row .jp { padding-right: 14px; font-size: 12px; letter-spacing: .1em; color: var(--e-mut); transition: color .35s; }
.e1-main:hover .e1-row:not(:hover) .en { color: var(--e-dim); }
.e1-row:is(:hover, :focus-visible) .jp { color: var(--e-fg); }
.e1 :is(.e1-row, .e1-sr):is(:hover, :focus-visible) > i { transform: translateX(5px); color: var(--e-acc); }
.e1 .is-cur .no, .e1 .is-cur > i { color: var(--e-acc); }
.e1-subs { margin-top: clamp(26px, 4.2vh, 44px); }
.e1-lbl { display: grid; grid-template-columns: var(--e-no) minmax(0, 1fr) auto; align-items: baseline; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--e-line); font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--e-mut); }
.e1-lbl span:last-child { padding-right: 42px; }
.e1-sr { display: grid; grid-template-columns: var(--e-no) minmax(0, 1fr) auto 28px; align-items: baseline; padding: 11px 0 10px; border-bottom: 1px solid var(--e-line); }
.e1-sr .no { opacity: .7; }
.e1-sr b { font: 500 17px/1.5 var(--f-jp); letter-spacing: .04em; transition: color .35s; }
.e1-sr small { padding-right: 14px; font: 400 12.5px/1.4 var(--f-disp); letter-spacing: .06em; color: var(--e-mut); transition: color .35s; }
.e1-sub:hover .e1-sr:not(:hover) b { color: var(--e-mut); }
.e1-sr:is(:hover, :focus-visible) small { color: var(--e-fg); }
.e1-ft { align-items: center; padding-top: 18px; border-top: 1px solid var(--e-line); }
.e1-ad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--e-mut); }
.e1-ad b { font-weight: 500; color: var(--e-fg); }
.e1-ac { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.e1-line { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--e-line); font-size: 13px; white-space: nowrap; transition: border-color .3s; }
.e1-line:hover { border-color: var(--e-fg); }
.e1 .e1-cta { display: inline-flex; align-items: center; gap: 18px; padding: 12px 18px; border-radius: 2px; background: var(--e-fg); color: #0a0c12; font: 500 14px/1.4 var(--f-jp); white-space: nowrap; }
.e1 .e1-cta > i { font-style: normal; color: inherit; transition: transform .3s var(--ease); }
.e1-cta:hover i { transform: translateX(4px); }
:is(.e1-row, .e1-subs, .e1-ft) { opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; }
html.nv-open :is(.e1-row, .e1-subs, .e1-ft) { opacity: 1; transform: none; transition: opacity .5s var(--ease) calc(.12s + var(--i, 0) * 45ms), transform .7s var(--ease) calc(.12s + var(--i, 0) * 45ms); }
@media (max-width: 760px) {
  :root[data-nvdr="e1"] .nv-dr { --e-no: 34px; }
  .e1-main, .e1-subs, .e1-ft { grid-template-columns: minmax(0, 1fr); }
  .e1-col + .e1-col .e1-row:first-child { border-top: 0; }
  .e1-row { padding: 11px 0 10px; }
  .e1-row .en { font-size: 28px; }
  .e1-subs { row-gap: 26px; margin-top: 30px; }
  .e1-sr b { font-size: 16px; }
  .e1-ft { row-gap: 14px; padding-top: 16px; }
  .e1-ad { display: none; }
  .e1-ac { gap: 12px; }
  .e1 .e1-cta { gap: 12px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { :is(.e1-row, .e1-subs, .e1-ft) { transition: none !important; transform: none !important; } }
/* /nav9-e1 */

/* dec9 — 公開前の判断の反映（2026-11-02）：フルール・ジラフの工事前の写真 */
.ld-sec .w8-b4 { width: 100%; max-width: none; margin: 40px 0 0; }
.w8-b4 img { display: block; width: 100%; height: auto; }
.w8-b4 figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
/* /dec9 */

/* qa9 — 公開前の総点検の修正（2026-11-02） */
body { line-break: strict; }
.jw { word-break: keep-all; overflow-wrap: anywhere; }
p.jw, dd.jw, li.jw, figcaption.jw { text-wrap: pretty; }
.w8-how .step { opacity: 1; }
.iv-av figcaption { white-space: nowrap; letter-spacing: .04em; }
.br-g .g-no { flex: none; white-space: nowrap; }
.next b { line-height: 1.25; }
header.topbar nav { font-size: 14px; }
.art-cover img[style*="max-width"], .art-body img[style*="max-width"] { display: block; margin-inline: auto; }
@media (max-width: 760px) {
  .pg-crumb a, .foot-base a, .foot-base .totop { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* /qa9 */
/* qa9b — 総点検2：改行の細部 */
@media (min-width: 901px) and (max-width: 1279px) { .ld-pjp.art-kind { letter-spacing: .12em; } }
/* /qa9b */
/* dec10 — 公開前の判断2 */
.news-list.nl-dated a { grid-template-columns: 6.5em 11em minmax(0, 1fr) 1.5em; }
.news-list.nl-dated .nl-d { order: -1; font: 400 13px/1.8 var(--f-mono); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .news-list.nl-dated a { grid-template-columns: auto minmax(0, 1fr) 1.2em; gap: 4px 14px; }
  .news-list.nl-dated .nl-d { grid-column: 1; grid-row: 1; font-size: 12px; }
  .news-list.nl-dated .nl-cat { grid-column: 2 / -1; grid-row: 1; }
  .news-list.nl-dated .nl-t { grid-column: 1 / 3; grid-row: 2; }
  .news-list.nl-dated i { grid-column: 3; grid-row: 2; }
}
html[data-edge] main :is(figure, .phd, .gal, .step-media, .la-gal, .ba) img { outline: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); outline-offset: -1px; }
/* /dec10 */
/* perf11 — スマホ：ボタンのタッチ操作・フッター */
/* タッチではホバーの演出を止め、押している間だけ黒く塗る（押した後に黒いまま残らない） */
@media (hover: none) {
  .bx:hover:not(:focus-visible) { color: var(--fg); transition: color .28s var(--io) 0s, padding .7s var(--out), scale .2s var(--out); }
  .bx.is-solid:hover:not(:focus-visible) { color: var(--bg); }
  .bx:hover:not(:focus-visible) .bx-g .l, .bx:hover:not(:focus-visible) .bx-g .r { transform: scaleY(var(--tick, .15)); transition: transform .3s var(--io) 0s; }
  .bx:hover:not(:focus-visible) .bx-g .tl, .bx:hover:not(:focus-visible) .bx-g .tr { transform: scaleX(0); transition: transform .3s var(--io) 0s; }
  .bx:hover:not(:focus-visible) .bx-g .f { transform: translateY(101%); transition: transform .3s var(--io) 0s; }
  .bx:hover:not(:focus-visible) .bx-t { transform: none; }
  .bx:hover:not(:focus-visible) .bx-a > span:first-child { transform: none; }
  .bx:hover:not(:focus-visible) .bx-a > span + span { transform: translateX(-180%); }
  .bx:hover:not(:focus-visible) .bx-a.ext > span + span { transform: translate(-180%, 180%); }
  .bx.is-row:hover:not(:focus-visible) { padding-inline: 0; }
  .bx.is-row:hover:not(:focus-visible) .bx-g .b { transform: scaleX(0); }
  .bx:hover:active .bx-g .f, .bx:active .bx-g .f { transform: none; transition: transform .16s var(--out) 0s; }
  .bx:hover:active, .bx:active { color: var(--bg); transition: color .1s linear 0s, scale .2s var(--out); }
  .bx.is-row:hover:active, .bx.is-row:active { padding-inline: 12px; transition: color .1s linear 0s, padding .25s var(--out); }
  .totop:hover { background: none; color: inherit; border-color: currentColor; }
}
/* 括弧が行末・行頭で泣き別れないように */
.kh { white-space: nowrap; }
/* Page top：文字と矢印を分ける（PC は枠の中に並べる） */
.totop { display: inline-flex; align-items: center; gap: 8px; }
.totop i { font-style: normal; }
/* iPhone が住所や番号に付ける自動リンクの見た目を消す */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; }
@media (max-width: 760px) {
  .f6-foot address .f6-co { display: block; margin-bottom: 4px; }
  .f6-foot address .f6-sp { display: none; }
  .f6-foot address .f6-ad { display: block; }
  .f6-foot address .f6-zip { display: block; }
  .f14 .f-baserow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 16px; }
  .f14 .f-baserow .foot-base { display: contents; }
  .f14 .f-baserow .f-mini { grid-column: 1; grid-row: 1; }
  .f14 .f-baserow .totop { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; margin: 0; padding: 0; border: 0; background: none; color: var(--fg);
    gap: 12px; font: 500 12px/1 var(--f-disp); letter-spacing: .1em; }
  .f14 .f-baserow .totop i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; font-size: 15px; line-height: 1; }
  .f14 .f-baserow .totop:active i { background: var(--fg); color: var(--bg); }
  .f14 .f-baserow small { grid-column: 1; grid-row: 2; align-self: center; }
  .f14 .f-baserow .foot-base > a { grid-column: 2; grid-row: 2; justify-self: end; }
}
/* /perf11 */
/* perf11b — スマホの動きを軽く・ロード */
/* ページ切り替えの幕とオープニング：方眼をなくし、幕は短く */
.pt, .opening { background-image: none; }
html.pt-enter.pt-go .pt { transition: transform .6s var(--ease) 0s; }
html.pt-leave .pt { transition: transform .45s var(--ease); }
@media (hover: none), (max-width: 900px) {
  /* スクロールのたびに毎フレーム書き換えていた演出 → 画面に入ったとき一度だけ */
  html[data-x="17"] .sec .sx { will-change: auto; }
  html[data-x="17"][data-sfx="3"] .sec .sx:not(.big) { transform: translate3d(0, 22px, 0); opacity: 0; filter: none;
    transition: opacity .7s var(--ease), transform .8s var(--ease); }
  html[data-x="17"][data-sfx="3"] .sec .sx.sx-in:not(.big) { transform: none; opacity: 1; }
  html[data-x="17"][data-sfx="3"] .sec .phd.sx > *, html[data-x="17"][data-sfx="3"] .sec .pj.sx .pj-fig img { transform: none; }
  html[data-p="16"][data-mo="2"] .big .lt { color: rgb(var(--fg-rgb) / 0); -webkit-text-stroke-color: var(--blue);
    transition: color .7s var(--ease) calc(var(--i, 0) * 45ms + .2s), -webkit-text-stroke-color .6s var(--ease) calc(var(--i, 0) * 45ms); }
  html[data-p="16"][data-mo="2"] .big.lt-in .lt { color: rgb(var(--fg-rgb)); -webkit-text-stroke-color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) and (hover: none), (prefers-reduced-motion: reduce) and (max-width: 900px) {
  html[data-x="17"][data-sfx="3"] .sec .sx:not(.big) { transform: none; opacity: 1; transition: none; }
  html[data-p="16"][data-mo="2"] .big .lt { color: rgb(var(--fg-rgb)); -webkit-text-stroke-color: var(--fg); transition: none; }
}
/* 見出しの「光」：流し終えたら普通の文字色に（iPhone で白黒反転の後に文字が白いまま残るため） */
:root[data-jhd="4"] .jh-t.jh-done { color: var(--fg) !important; background: none !important; -webkit-background-clip: border-box; background-clip: border-box; }
/* 暗い背景（トップの冒頭・暗い章・フッター）：光の上でも本文が読めるように */
@media (max-width: 900px) {
  .hero-jp p { color: var(--fg); }
  .hero-foot .news .kind { color: rgb(var(--fg-rgb) / .8); }
  :is(.hero-jp, .hero-foot .news) { text-shadow: 0 0 14px color-mix(in srgb, var(--bg) 75%, transparent), 0 0 3px color-mix(in srgb, var(--bg) 60%, transparent); }
}
/* /perf11b */
/* dec11b — 代表の名前の英語表記 */
.ab-sign .ab-en { font: 500 12px/1.4 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ab-profile p.jw + p.jw { margin-top: .6em; }
/* /dec11b */
/* dec11c — スマホのセクション間の余白 */
@media (max-width: 900px) { html[data-p="16"] { --secgap: 128px; } }
/* /dec11c */
/* dec11e — スマホのメニューボタン（03 細い円と2本線） */
@media (max-width: 900px) {
  header.bar .nv-menu, .nv-dr .nv-x, .hero-side .menu-btn { position: relative; width: 44px; height: 44px; min-width: 44px; padding: 0; gap: 0; justify-content: center; align-items: center;
    border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--fg); -webkit-tap-highlight-color: transparent; }
  header.bar .nv-menu::before, .nv-dr .nv-x::before, .hero-side .menu-btn::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--blue);
    clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease); pointer-events: none; }
  header.bar .nv-menu:active::before, html.nv-open .nv-dr .nv-x::before, .hero-side .menu-btn:active::before { clip-path: inset(0 0 0 0); }
  header.bar .nv-menu .nv-bt, .nv-dr .nv-x .nv-bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header.bar .nv-menu .nv-ic, .nv-dr .nv-x .nv-ic { width: 18px; height: 8px; }
  header.bar .nv-menu .nv-ic i:last-child { top: 7px; width: 62%; }
  header.bar .nv-menu:hover .nv-ic i:last-child { width: 62%; }
  .nv-dr .nv-x .nv-ic i { top: 3.5px !important; }
  html.nv-open .nv-dr .nv-x .nv-ic i:first-child { transform: rotate(45deg); }
  html.nv-open .nv-dr .nv-x .nv-ic i:last-child { transform: rotate(-45deg); }
  /* トップ冒頭のボタン（文字の「Menu」を2本線に置き換える） */
  .hero-side .menu-btn { display: inline-flex; }
  .hero-side .menu-btn .mb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-side .menu-btn > i { position: absolute; height: 1px; background: currentColor; }
  .hero-side .menu-btn > i:first-of-type { left: 13px; width: 18px; top: 17.5px; }
  .hero-side .menu-btn > i:last-of-type { left: 20px; width: 11px; top: 24.5px; }
}
/* /dec11e */
/* dec11f — 番号を見出しの1行目にそろえる */
:is(.la-rows li, .ld-bar nav a, li.jw) > .no { align-self: baseline; }
:is(.la-rows li, .ld-bar nav a, li.jw) > .no + :is(div, span, h3, p) { align-self: baseline; }
/* /dec11f */
/* dec11h — トップ冒頭：お知らせの下の書籍掲載 */
.hero-foot { flex-direction: column; align-items: flex-end; gap: 30px; }
.hero-pub { width: min(440px, 100%); display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.hp-k { margin: 0 0 2px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hp-k .jl { margin-left: 10px; font-family: var(--f-jp); letter-spacing: .06em; text-transform: none; }
.hp-i { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; color: var(--fg); text-decoration: none; }
.hp-i img { grid-row: 1 / 3; width: 30px; height: auto; display: block; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hp-t { grid-column: 2; font-size: 13px; line-height: 1.5; letter-spacing: .04em; }
.hp-d { grid-column: 2; font-size: 11px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
.hp-i i { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-family: var(--f-disp); color: var(--muted); transition: transform .4s var(--ease), color .3s; }
.hp-i:hover i, .hp-i:focus-visible i { transform: translateX(3px); color: var(--fg); }
.hp-i:hover .hp-t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hp-i:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
/* 光の上でも読めるように（冒頭の本文と同じ扱い） */
.hero-pub { text-shadow: 0 0 14px color-mix(in srgb, var(--bg) 75%, transparent), 0 0 3px color-mix(in srgb, var(--bg) 60%, transparent); }
.hp-k, .hp-d, .hp-i i { color: rgb(var(--fg-rgb) / .8); }
@media (max-width: 900px) { .hero-foot { align-items: flex-start; gap: 26px; } }
/* /dec11h */
/* dec11i — メニュー一覧：番号と日本語を上下の線の中心に */
.e1-row > .no, .e1-row > .jp, .e1-sr > .no { align-self: center; position: relative; top: var(--e1-oy, .5px); }
.e1-row > .jp { line-height: 1; }
/* 矢印は文字ではなく線で描く（端末の書体によって上下位置が変わらないように） */
:is(.e1-row, .e1-sr) > i { align-self: center; position: relative; display: block; width: 16px; height: 9px; overflow: hidden; text-indent: 40px; white-space: nowrap; }
:is(.e1-row, .e1-sr) > i::before { content: ""; position: absolute; left: 0; right: 1px; top: 4px; height: 1px; background: currentColor; }
:is(.e1-row, .e1-sr) > i::after { content: ""; position: absolute; right: 1px; top: 1px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: center; }
:is(.e1-row, .e1-sr) > i::after { top: 1.5px; right: 1.2px; }
/* /dec11i */
/* dec11j — 所在地（神戸・埼玉の2拠点） */
.f6-foot address .f6-co { display: block; margin-bottom: 4px; }
.f6-foot address .f6-sp { display: none; }
.f6-foot address .f6-ad { display: block; }
.f6-foot address .f6-zip { display: inline; }
.f6-foot address .f6-of { margin-right: .3em; }
.ad-l { display: block; }
@media (max-width: 760px) {
  .f6-foot address .f6-ad + .f6-ad { margin-top: 8px; }
  .f6-foot address .f6-of { display: block; margin: 0; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
  .ad-l + .ad-l { margin-top: 6px; }
}
/* /dec11j */
/* dec11n — フッター（住所の左揃え・最下部の配置） */
.f6-foot address .f6-zip { margin-right: 1em; }
.nw { white-space: nowrap; }
@media (max-width: 760px) {
  .f6-foot address .f6-ad { text-align: left; }
  .f6-foot address .f6-zip { display: block; margin: 0; }
  .f14 .f-baserow { row-gap: 20px; }
  .f14 .f-baserow .foot-base > a { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .f14 .f-baserow small { grid-column: 1 / -1; grid-row: 3; justify-self: start; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
}
/* /dec11n */
/* dec11o — 書籍掲載（PC）：表紙を大きく（A案） */
@media (min-width: 901px) {
  .hero-pub { gap: 16px; }
  .hp-i { grid-template-columns: 90px minmax(0, 1fr) auto; column-gap: 22px; }
  .hp-i img { width: 90px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
  .hp-t { align-self: end; }
  .hp-d { align-self: start; }
}
/* /dec11o */
/* dec11p — スマホ：見出し3行・電話の受付時間 */
.spbr { display: none; }
@media (max-width: 900px) {
  .sp3l .spbr { display: inline; }
  .contact-ways .k .hrs { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
  .contact-ways .k .pr { display: none; }
}
/* /dec11p */
/* dec11q — PCのみの改行 */
.pcbr { display: none; }
@media (min-width: 901px) { .pcbr { display: inline; } }
/* /dec11q */
/* dec11r — トップ About／Mission：画像と文章の間隔（PC） */
@media (min-width: 901px) {
  #about > .sec-in.two, #mission > .sec-in.two { grid-template-columns: minmax(0, 560px) minmax(0, 560px); justify-content: start; column-gap: clamp(80px, 8vw, 160px); }
  #about .ph-solo { max-width: 480px; }
  #mission .ph-think { width: 100%; }
}
/* /dec11r */
/* dec11s — 実績詳細の冒頭画像を本文の画像幅に揃える（PC） */
@media (min-width: 901px) {
  .la-cover.ld-cover:not(.iv-cv) { display: grid; grid-template-columns: var(--rw) minmax(0, 1fr); column-gap: var(--rgap); max-width: calc(1680px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
  .la-cover.ld-cover:not(.iv-cv) img { grid-column: 2; }
}
/* /dec11s */
/* dec11t — 実績詳細：キャッチを1行に（PC） */
@media (min-width: 901px) {
  .ld-top:has(.la-meta) .ld-intro { max-width: none; }
  .ld-top:has(.la-meta) .ld-intro > :not(.cs-lead) { max-width: 600px; }
  .ld-top:has(.la-meta) .ld-intro { container-type: inline-size; }
  .ld-top:has(.la-meta) .ld-intro .cs-lead { font-size: min(32px, calc(100cqw / (var(--n, 20) * 1.18))); }
}
/* /dec11t */
/* dec11u — 実績詳細：余白・縦長写真・担当範囲・次の実績 */
.step > .step-media { margin-top: clamp(28px, 2.8vw, 44px); }
@media (min-width: 901px) {
  .step:has(> .step-media--stack > img.w8-pt:only-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .step:has(> .step-media--stack > img.w8-pt:only-child) > :not(.step-media) { grid-column: 1; }
  .step:has(> .step-media--stack > img.w8-pt:only-child) > .step-media { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
  .step:has(> .step-media--stack > img.w8-pt:only-child) > .step-media img.w8-pt { width: 100%; }
}
.role { margin-top: clamp(64px, 7vw, 112px); padding-block: clamp(26px, 2.4vw, 36px); align-items: center; }
.role .label { line-height: 1; padding-top: .1em; }
.role ul { line-height: 1.5; }
.role + .next { margin-top: 0; }
/* /dec11u */
/* dec11v — デザイン顧問：担当者の写真をカラーに */
.p4-person img { filter: none; }
/* /dec11v */
/* dec11w — インタビュー一覧：紹介文の改行位置 */
.la-iv .iv-d { word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty; }
/* /dec11w */
/* dec11x — ブランディング本文の改行位置 */
html body p.g-body.g-more.jw { word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty; }
/* /dec11x */
/* dec11y — ブランディング進め方：成果物ラベル（日本語） */
.g-steps .o .mono.ok { font-family: var(--f-jp); letter-spacing: .06em; text-transform: none; }
/* /dec11y */
/* dec11z — ブランディング：本文（g-body）を行末がそろう組み方に */
html body p.g-body.jw { word-break: normal; overflow-wrap: normal; line-break: strict; text-wrap: pretty; }
/* /dec11z */
/* dec11za — TOP：ヒーロー左列のロゴをナビの上に */
@media (min-width: 901px) {
  .hero .hero-side { justify-content: flex-start; }
  .hero .hero-side .side-logo { order: -1; margin: 0 0 clamp(40px, 5vh, 64px); }
}
/* /dec11za */
/* dec11zb — 下層オープニング：ページ名の塗りを0.8秒に */
.pgop .build.done .pg-glyph { transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) var(--d, 0s), transform 1.4s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), fill-opacity .8s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0s) * 1.4), stroke-opacity 1s ease calc(var(--d, 0s) * 1.4 + .3s); }
/* /dec11zb */
/* dec11zc — TOP About：横長画像は左カラムの幅いっぱいに */
#about .ph-solo { max-width: none; }
/* /dec11zc */
/* dec11zd — 言語切り替え（JA / EN）と英語ページの書体 */
.lsw { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; white-space: nowrap; }
.lsw a { color: var(--muted); text-decoration: none !important; transition: color .3s; padding: 6px 2px; }
.lsw a[aria-current], .lsw a:hover, .lsw a:focus-visible { color: var(--fg); }
.lsw i { font-style: normal; color: var(--muted); opacity: .7; }
header.bar .lsw { margin-left: 28px; }
html.nv header.bar nav { margin-left: auto; }
.side-sub .lsw { margin-top: 10px; }
.side-sub .lsw a { color: var(--muted); }
.side-sub .lsw a[aria-current] { color: var(--fg); }
.lsw-sp { display: none; }
@media (max-width: 900px) {
  header.bar .lsw { margin-left: auto; margin-right: 4px; }
  header.bar .lsw ~ .nv-menu { margin-left: 0 !important; }
  .lsw a { padding: 12px 4px; }
  .hero-side .side-wrap .lsw { display: none; }
  .hero-side .lsw-sp { display: inline-flex; margin-left: auto; margin-right: 10px; }
}
html[lang="en"] .gnav .jp, html[lang="en"] .f6-row .jp { display: none; }
html[lang="en"] { --f-jp: var(--f-disp); }
html[lang="en"] body { letter-spacing: .005em; }
html[lang="en"] .jw { word-break: normal; overflow-wrap: break-word; line-break: auto; }
/* /dec11zd */
/* dec11ze — ドロワー：英語ページの補足ラベル重複を消す／言語切り替え */
html[lang="en"] .e1-row .jp, html[lang="en"] .e1-sr small { display: none; }
.nv-top .lsw-dr { margin-left: auto; margin-right: clamp(16px, 2.4vw, 32px); }
.nv-dr .lsw-dr a { color: rgba(233, 236, 242, .5); }
.nv-dr .lsw-dr a[aria-current], .nv-dr .lsw-dr a:hover { color: #e9ecf2; }
.nv-dr .lsw-dr i { color: rgba(233, 236, 242, .4); }
/* /dec11ze */

/* drawer_1104 */
/* E1：下の帯は会社名と住所だけ（相談フォームは Support の3行目） */
.e1-ft { grid-template-columns: minmax(0, 1fr); }
/* ドロワーを開いている間のカーソル：明るい点と輪＋細い影（白いボタンの上でも見える） */
html.nv-open .cur { --fg: rgba(233, 236, 242, 1); --fg-rgb: 233 236 242; }
html.nv-open[data-cur="2"] .cur .c-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 1px rgb(10 12 18 / .55); }
html.nv-open[data-cur="2"] .cur .c-ring { border-color: rgb(233 236 242 / .85); box-shadow: 0 0 0 1px rgb(10 12 18 / .35), inset 0 0 0 1px rgb(10 12 18 / .2); }
html.nv-open[data-cur="2"] .cur:is([data-kind="link"],[data-kind="ext"],[data-kind="btn"]) .c-ring { background: rgb(233 236 242 / .1); }

/* portrait_1104 */
@media (min-width: 901px) {
  .la-greet { grid-template-columns: minmax(0, 1.8fr) minmax(0, 5fr); gap: clamp(32px, 4.4vw, 72px); }
  .la-greet .pg-portrait { position: sticky; top: calc(var(--barh, 64px) + 40px); }
  .la-greet .la-prose { max-width: 42em; }
}
@media (max-width: 900px) {
  .la-greet .pg-portrait { width: 60%; }
}

/* thumbs_1104 */
/* 背景が白い実績サムネイル（Webのモックアップなど）に約6%のグレーを敷いて、枠をわかりやすく */
:is(img[src*="/wc-taisei-web"], img[src*="/wc-saikyouya-web"], img[src*="/wc-ikki-web"], img[src*="/wc-hakurei"], img[src*="/w-takt"], img[src*="/w-saikyouya"], img[src*="/w-hakurei"]) { filter: brightness(.94); }
.wk6-card .fig :is(img[src*="/wc-taisei-web"], img[src*="/wc-saikyouya-web"], img[src*="/wc-ikki-web"], img[src*="/wc-hakurei"], img[src*="/w-takt"], img[src*="/w-saikyouya"], img[src*="/w-hakurei"]) { filter: brightness(calc(.94 - var(--dim, 0))); }

/* links_1104 */
/* トップの「一覧へ」リンク：英字ラベル＋日本語（言葉の重なりをなくす） */
.flow-note .fn-b { display: inline-flex; align-items: baseline; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); color: var(--fg); text-decoration: none; transition: border-color .3s; }
.flow-note .fn-b b { font: 500 15px/1.2 var(--f-disp); letter-spacing: .02em; }
.flow-note .fn-b span { font-size: 12.5px; letter-spacing: .08em; color: var(--muted); }
.flow-note .fn-b i { font-style: normal; transition: transform .3s var(--ease); }
.flow-note .fn-b:hover { border-color: var(--fg); }
.flow-note .fn-b:hover i { transform: translateX(4px); }

/* btnfill_1104 */
/* ボタンのホバー：枠が閉じたあと、黒ではなく淡いグレー（文字色の5%）が満ちる。文字は黒のまま。送信ボタン（is-solid）は対象外 */
.bx-g .f { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.bx:not(.is-solid):is(:hover, :focus-visible, :active) { color: var(--fg); }