/* DataCo preview — reading LP (05, 2026-10-06).
   One person talking, one column, paper and ink.
   Three rules for the whole page:
   1. One picture subject: a line. Same weight and drawing everywhere (--line).
   2. Vermilion once per block. Important words are bold ink, not highlighter.
   3. No rows of same-size white boxes. Notes on the real thing are written on the paper (serif, thin vermilion leaders). */
:root {
  --paper: #f4f1ea;
  --paper-2: #ece7dc;
  --ink: #1d1d1b;
  --ink-2: #3d3a34;
  --ink-3: #5e5a52;
  --rule: #d8d1c3;
  --accent: #a8401c;
  --line: 3px;
  --col: 36rem;
  --gutter: clamp(20px, 5vw, 56px);
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --slots: "2";   /* the one place to change "あと2社" */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 2; letter-spacing: .03em; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, label:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 700; color: var(--ink); }
p { margin: 0 0 1.25em; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.col { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ib { display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 12px; }
.slots::after { content: var(--slots); }

/* header */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 30; background: rgba(244, 241, 234, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.logo { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-decoration: none; }
.nav { display: flex; gap: clamp(14px, 2.6vw, 30px); align-items: center; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.nav .cta { color: #fff; background: var(--ink); padding: 7px 16px; border-radius: 2px; }
.nav .cta:hover { background: var(--accent); text-decoration: none; }
@media (max-width: 380px) { .nav { gap: 10px; font-size: 14px; } .nav .cta { padding: 6px 10px; } .logo { font-size: 18px; } }

/* type */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; letter-spacing: .02em; word-break: keep-all; }
h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.6; margin-bottom: 1.1em; }
h3 { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.55; margin-bottom: .8em; }
.kicker { font-family: var(--serif); font-size: 15px; color: var(--ink-3); letter-spacing: .12em; margin: 0 0 14px; }

/* the line: one drawing for the whole page */

/* ① first screen: see LP 07 at the end of this file */
.btn { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 36px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; padding: 16px 28px; border-radius: 2px; line-height: 1.5; }
.btn:hover { background: var(--ink); }
.slots-note { font-weight: 500; font-size: 16px; }
@media (max-width: 640px) { .slots-note { display: block; } }

/* chapters */
.chapter { padding: clamp(80px, 12vw, 150px) 0; background: var(--paper); }
.chapter + .chapter { border-top: 1px solid var(--rule); }
#why { padding-top: 120px; border-top: 0; }
.chapter p { color: var(--ink-2); }
.turn { font-size: clamp(19px, 2vw, 22px); line-height: 1.9; margin-top: 2em; padding-left: 1em; border-left: var(--line) solid var(--ink); }
@media (max-width: 640px) { #why { padding-top: 72px; } }

/* ② the five steps as one broken line (PC across, phone down) */
.wide-col { max-width: calc(576px + 2 * var(--gutter)); }
.path { list-style: none; margin: 8px 0 44px; padding: 0; display: flex; }
.path li { flex: 1; position: relative; padding-top: 22px; font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); }
.path li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--line); background: #8a8578; border-radius: 2px; }
.path li + li { margin-left: 46px; }
.path li + li::after { content: "待ち"; position: absolute; left: -44px; width: 42px; top: -10px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--accent); line-height: 1; }
@media (max-width: 640px) {
  .path { flex-direction: column; margin-left: 4px; }
  .path li { padding: 0 0 0 20px; font-size: 16px; }
  .path li::before { left: 0; right: auto; top: 4px; bottom: 4px; width: var(--line); height: auto; }
  .path li + li { margin: 24px 0 0; }
  .path li + li::after { left: -6px; top: -21px; width: auto; text-align: left; }
}
.log { margin-top: 2.4em; padding: 4px 0 4px 22px; border-left: var(--line) solid var(--ink); }
.log-lead { color: var(--ink) !important; font-family: var(--serif); }
.log ol { list-style: none; margin: 0 0 1em; padding: 0; }
.log li { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; align-items: baseline; padding: 4px 0; }
.log time { font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 700; }
.log li span { color: var(--ink); }
.log-note { font-size: 16px; margin: 0; }

/* ③ */
.night { background: var(--paper-2); }
.night h2 { font-size: clamp(24px, 3vw, 32px); }
.punch { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.5; color: var(--ink) !important; margin: 1.2em 0 .9em; }


.ask { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); color: var(--accent) !important; font-weight: 700; margin: 1.6em 0 0; line-height: 1.7; }

/* ④ four tales: same head size, same left edge, room before each */
.wide .big { font-size: clamp(28px, 4vw, 46px); line-height: 1.45; }
.tale { margin-top: 96px; }
@media (max-width: 640px) { .tale { margin-top: 64px; } }
.nt { font-family: var(--serif); font-size: 17px; line-height: 1.75; color: var(--ink) !important; margin: 0 0 10px; }
.ref { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-3); letter-spacing: .04em; margin-bottom: 2px; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders path { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.leaders circle { fill: var(--accent); }

/* (1) note 500 + 64 + notes 504; groups follow the note's order */
.r1-grid { position: relative; display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 504px); gap: 0 64px; justify-content: center; margin-top: 36px; align-items: start; }
.brief-toggle { display: none; }
.brief { grid-column: 1; grid-row: 1 / span 2; margin: 0; background: #fff; border: 1px solid var(--rule); padding: 18px 20px 14px; font-family: "BIZ UDGothic", "Noto Sans JP", monospace; font-size: 15px; line-height: 1.8; color: var(--ink); }
.brief-head { font-weight: 700; margin-bottom: 8px; }
.brief .sec { font-weight: 700; margin-top: 10px; }
.brief .ln { margin: 0; padding: 3px 4px; color: var(--ink) !important; }
.brief .ln.lit { background: var(--paper); }
.brief .mask { background: var(--ink); color: transparent; border-radius: 1px; letter-spacing: -1px; user-select: none; }
.brief figcaption { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
.notes3 { grid-column: 2; display: grid; gap: 30px; padding-top: 70px; }
.grp .xc { display: none; }
.grp.weekly { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--rule); }
@media (max-width: 960px) {
  .r1-grid { display: block; }
  .leaders { display: none; }
  .notes3 { padding-top: 0; gap: 32px; }
  .grp .xc { display: block; font-family: "BIZ UDGothic", "Noto Sans JP", monospace; font-size: 15px; background: #fff; border: 1px solid var(--rule); padding: 8px 12px; margin: 0 0 10px; color: var(--ink) !important; }
  .brief { display: none; margin-top: 16px; }
  .brief-toggle { display: inline-block; margin-top: 28px; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
  #brief-all:checked ~ .brief { display: block; }
  .r1-grid { display: flex; flex-direction: column; }
  .notes3 { order: -1; }
}

/* (2) the conversation; four sentences each with a small drawing beside it */
.chat { margin: 2em 0 0; padding: 22px; background: #fff; border: 1px solid var(--rule); max-width: 576px; }
.chat .q { margin: 0 0 14px auto; width: fit-content; max-width: 85%; padding: 10px 16px; font-size: 16px; color: var(--ink) !important; border: 1.5px solid var(--accent); border-radius: 14px 14px 2px 14px; }
.chat .a { margin: 0 0 22px; padding-left: 14px; border-left: var(--line) solid var(--ink); }
.chat .a p { font-size: 16px; line-height: 1.85; margin: 0 0 .7em; color: var(--ink-2); }
.chat figcaption { font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 10px; }
.pics { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; max-width: 560px; }
.pics li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.pics svg { width: 48px; height: 48px; }
.pics svg * { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pics p { font-family: var(--serif); font-size: 16px; line-height: 1.75; color: var(--ink) !important; margin: 0; }
@media (max-width: 640px) { .pics { grid-template-columns: 1fr; gap: 24px; } .pics li { grid-template-columns: 40px 1fr; } .pics svg { width: 40px; height: 40px; } }

/* (3) three crops in the order of the work; the drawn LP */
.flow3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: 0 44px; margin-top: 32px; }
.flow3 li { position: relative; }
.flow3 li:not(:last-child)::after { content: ""; position: absolute; right: -34px; top: 112px; width: 22px; height: var(--line); background: var(--ink); }
.flow3 .st { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink) !important; margin: 14px 0 4px; }
.flow3 p { font-size: 16px; line-height: 1.8; margin: 0; }
@media (max-width: 760px) { .flow3 { grid-template-columns: minmax(0, 335px); gap: 36px; } .flow3 li::after { display: none; } }
.lp-symbol { position: absolute; }
.lp-wrap { position: relative; display: grid; grid-template-columns: 280px minmax(0, 544px); gap: 24px 72px; justify-content: center; margin-top: 64px; align-items: start; }
.lp-draw { grid-column: 1; grid-row: 1; margin: 0; }
.lp-draw svg, .lp-slices svg { width: 100%; height: auto; display: block; }
.lp-draw svg use, .lp-slices svg use { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.lp-draw .hit { fill: transparent; stroke: none; }
.lp-notes { grid-column: 2; grid-row: 1; display: grid; gap: 0; }
.lp-notes .nt[data-point="lp-head"] { margin-top: 50px; }
.lp-notes .nt[data-point="lp-form"] { margin-top: 130px; }
.lp-notes .nt[data-point="lp-bot"] { margin-top: 30px; }
.lp-notes .nt[data-point="lp-follow"] { margin-top: 26px; }
.lp-whole { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; padding-top: 22px; border-top: 1px dashed var(--rule); max-width: 896px; justify-self: center; width: 100%; }
.lp-slices { display: none; }
@media (max-width: 960px) {
  .lp-wrap { display: block; max-width: calc(335px + 2 * var(--gutter)); }
  .lp-draw, .lp-notes { display: none; }
  .lp-slices { display: grid; gap: 28px; }
  .lp-slices .sl { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
  .lp-whole { grid-template-columns: 1fr; margin-top: 32px; }
}

/* (4) our page, then the drawn search page at the same width */
.r4-stack { display: grid; gap: 40px; justify-content: center; grid-template-columns: minmax(0, 620px); margin-top: 32px; padding: 0 var(--gutter); }
.serp { margin: 0; background: #fff; border: 1px solid var(--rule); padding: 20px 24px; min-height: 0; }
.serp-q { border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 16px; font-size: 15px; margin-bottom: 14px; width: fit-content; min-width: 60%; }
.serp > div { padding: 14px 0; border-bottom: 1px solid #ece7dc; }
.serp > div:last-of-type { border-bottom: 0; }
.serp .tag { display: inline-block; font-size: 14px; color: var(--ink-3); border: 1px solid var(--rule); padding: 0 8px; margin-bottom: 4px; }
.serp-ai { background: var(--paper); padding: 12px 14px !important; }
.serp-ad { color: var(--ink-3); }
.serp .pin { margin: 4px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.7; color: var(--ink) !important; padding-left: 20px; position: relative; }
.serp .pin::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.serp figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; }
@media (max-width: 640px) { .r4-stack { grid-template-columns: minmax(0, 335px); } }
.closer { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.7; color: var(--ink) !important; font-weight: 700; margin-top: clamp(80px, 10vw, 130px); }

/* ⑤ the inequality as a three-line formula; the shared term lines up, only the operator's judgement is circled */

/* ⑥ */
.one { margin: 2.2em 0 0; }
.sign { margin-top: 2.4em; font-size: 15px; color: var(--ink-3) !important; }
.sign span { display: block; font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--ink); letter-spacing: .2em; margin-top: 4px; }

/* ⑦ */
#contact h2 { font-size: clamp(22px, 2.8vw, 30px); }
.after, .first30 { margin: 2em 0; }
.after-h { font-family: var(--serif); font-weight: 700; color: var(--ink) !important; font-size: 19px; margin-bottom: 14px; }
.after ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.after ol::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: var(--line); background: var(--ink); }
.after li { position: relative; padding: 30px 14px 0 0; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.after li::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: var(--line) solid var(--ink); }
@media (max-width: 640px) {
  .after ol { grid-template-columns: 1fr; padding-left: 26px; }
  .after ol::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: var(--line); height: auto; }
  .after li { padding: 0 0 18px; } .after li::before { left: -26px; top: 6px; }
}
.first30 dl { display: grid; grid-template-columns: 9.5em 1fr; margin: 0; border-left: var(--line) solid var(--ink); }
.first30 dt { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); padding: 6px 0 6px 16px; position: relative; }
.first30 dt::before { content: ""; position: absolute; left: -9px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: var(--line) solid var(--ink); box-sizing: content-box; margin-left: -1.5px; }
.first30 dd { margin: 0; padding: 6px 0; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.first30-note { font-size: 14px; color: var(--ink-3) !important; margin-top: 10px; }
@media (max-width: 640px) { .first30 dl { grid-template-columns: 1fr; } .first30 dd { padding: 0 0 12px 16px; } .first30 dd:empty { display: none; } }
#contact .btn { margin-top: 8px; }

/* articles */
.quiet h2 { font-size: 20px; color: var(--ink-2); }
.alist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.alist li { border-bottom: 1px solid var(--rule); }
.alist .row { display: block; padding: 18px 2px; text-decoration: none; }
.alist .ttl { display: block; font-family: var(--serif); font-size: clamp(17px, 1.9vw, 20px); font-weight: 700; line-height: 1.7; color: var(--ink); }
.alist .sub { display: block; color: var(--ink-2); font-size: 16px; margin-top: 6px; line-height: 1.85; }
.alist .no { display: none; }
.alist a.row:hover .ttl { color: var(--accent); }
.more { display: inline-block; margin-top: 22px; font-size: 16px; color: var(--ink-2); }

/* footer */
.site-foot { border-top: 1px solid var(--rule); padding: 36px 0 52px; color: var(--ink-3); font-size: 14px; background: var(--paper); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-foot a { color: var(--ink-2); margin-right: 18px; }

/* inner pages */
.page { padding: 120px 0 80px; }
.page .wrap { max-width: calc(var(--col) + 2 * var(--gutter)); }
.page-head { margin-bottom: 40px; }
.page-head h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.5; }
.label { font-family: var(--serif); font-size: 15px; color: var(--accent); letter-spacing: .1em; margin: 0 0 10px; }
.prose { font-size: 18px; line-height: 2; overflow-wrap: anywhere; color: var(--ink-2); }
.prose h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 2.2em 0 .8em; color: var(--ink); }
.prose ul { padding-left: 1.2em; }
.prose figure { margin: 1.6em 0; padding: 16px; border: 1px solid var(--rule); background: #fff; }
.prose figure svg rect { stroke: var(--rule); }
.prose figcaption { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.provisional { border: 1px dashed var(--accent); color: var(--accent); padding: 10px 14px; font-size: 15px; margin: 0 0 30px; }
.related { margin-top: 64px; }
.section { padding: 56px 0 0; }
.contact { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.dl { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--rule); margin: 0; }
.dl dt, .dl dd { margin: 0; padding: 16px 2px; border-bottom: 1px solid var(--rule); }
.dl dt { color: var(--ink-3); font-size: 15px; }
@media (max-width: 600px) { .dl { grid-template-columns: 1fr; } .dl dt { border-bottom: 0; padding-bottom: 0; } }
.policy { font-size: 16px; color: var(--ink-2); }
.policy h3 { font-size: 17px; margin: 1.4em 0 .4em; }

@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.95; }
  .prose { font-size: 16px; }
  .btn { font-size: 17px; padding: 14px 20px; }
}
.wide .big { font-size: clamp(26px, 3.4vw, 40px); }

/* LP05 checks: shorter gaps between chapters; the phone-only toggle is not in the PC tab order */
.chapter { padding: clamp(72px, 9vw, 112px) 0; }
#why { padding-top: 120px; }
.night h2 { font-size: clamp(22px, 2.5vw, 28px); }
@media (min-width: 961px) { #brief-all { display: none; } }
@media (max-width: 640px) { #why { padding-top: 72px; } }

/* ===== LP 06 (2026-10-06): PC uses the width. The 06 first screen, paper grain and B variant were replaced in LP 07 (see the end of this file). ===== */
:root { --frame: 1068px; }
.r1, .r2, .r3, .r4 { padding: 96px 0; margin-top: 0; }
#reach { padding-bottom: 0; }
#reach > .col:last-child { padding-top: 72px; padding-bottom: 96px; }
.chapter + .chapter { border-top: 0; }
#reach .closer { margin-top: 0; }
@media (max-width: 640px) { .r1, .r2, .r3, .r4 { padding: 64px 0; } }

/* PC (1024px and up): a 4/12 head column that stays while you read, an 8/12 body, pictures across the whole frame */
@media (min-width: 1024px) {
  .chapter, .r1, .r2, .r3, .r4 {
    display: grid; grid-template-columns: [edge-start] minmax(var(--gutter), 1fr) [head-start] minmax(0, 356px) [head-end body-start] minmax(0, 712px) [body-end] minmax(var(--gutter), 1fr) [edge-end];
    align-content: start;
  }
  .chapter .col, .tale .col { display: contents; }
  .chapter .col > *, .tale .col > *, .chapter > .wrap, .tale > .wrap { grid-column: body; }
  .chapter > *, .tale > * { grid-column: body; }
  .chapter .col > *:not(.ch-head) { max-width: 680px; }
  .ch-head { grid-column: head !important; grid-row: 1 / span 30; align-self: start; position: sticky; top: 96px; padding-right: 48px; }
  .ch-head h2 { font-size: clamp(40px, 3.6vw, 48px); line-height: 1.4; margin: 0; }
  .ch-head .kicker { margin-bottom: 14px; }
  .tale .ch-head h3 { font-size: 32px; margin: 0; }
  .full, .chapter > .wrap, .tale > .wrap, .r1-grid, .flow3, .flow-note, .lp-wrap, .r4-stack, .first30 { grid-column: head-start / body-end !important; max-width: var(--frame) !important; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  #reach { display: block; }
  #reach > .col:first-child { max-width: calc(var(--frame) + 2 * var(--gutter)); padding-bottom: 8px; }
  #reach > .col:first-child .ch-head { position: static; padding: 0; }
  #reach .big { font-size: clamp(40px, 3.8vw, 52px); }
  #reach > .col:last-child { display: block; max-width: none; padding-left: max(var(--gutter), calc((100% - var(--frame)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--frame)) / 2)); }
  #reach > .col:last-child .closer { max-width: var(--frame); }
  #articles .alist, #articles .more { grid-column: body; }
  #contact .btn { justify-self: start; }
  .first30 { margin-top: 8px; }
  .first30 dl { grid-template-columns: 14em 1fr; max-width: 900px; }
  /* the five waiting steps get the whole frame so each fits on one line */
  .path li { font-size: 16px; white-space: nowrap; }
  /* the real screens are big enough to read */
  .flow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; justify-content: stretch; }
  .flow3 li:not(:last-child)::after { right: -36px; top: 46%; }
  .r1-grid { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 0 72px; justify-content: stretch; }
  .lp-wrap { grid-template-columns: 300px minmax(0, 1fr); gap: 24px 96px; justify-content: stretch; }
  .lp-whole { max-width: none; }
  .r4-stack { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 48px; align-items: start; justify-content: stretch; }
  .chat, .pics { max-width: 680px; }
}
/* 800–1023px: one column about 640px wide */
@media (min-width: 800px) and (max-width: 1023px) {
  .col { max-width: calc(640px + 2 * var(--gutter)); }
  .ch-head h2 { font-size: 36px; }
}

/* ⑥ the line: each dot sits directly above its label */
.one ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.one ol::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: var(--line); background: var(--ink); }
.one li { position: relative; text-align: center; padding-top: 30px; font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.5; }
.one li::before { content: ""; position: absolute; left: 50%; top: 2px; width: 14px; height: 14px; margin-left: -10px; border-radius: 50%; background: var(--paper); border: var(--line) solid var(--ink); }

/* 任せてもらったら: a wider date column (not on phones) */
@media (min-width: 641px) { .first30 dl { grid-template-columns: 12em 1fr; } .first30 dt { padding-right: 24px; } }

/* phones: the LP drawing as full-width bands, each followed by its note (same pattern as the morning note) */
@media (max-width: 960px) {
  .lp-slices .sl { grid-template-columns: 1fr; gap: 10px; }
  .lp-slices .sl svg { width: 100%; max-width: 335px; height: auto; border-bottom: 1px solid var(--rule); }
}

/* phones: the two routes side by side; the right one passes the LP and form rows and lands on the completion page */


/* ③'s "誰も問い合わせていないのに、です。" is always visible (no reveal) */
.punch { opacity: 1 !important; transform: none !important; }
/* LP06 fix: heads never sit on top of a full-width picture */
@media (min-width: 1024px) {
  .tale .ch-head { grid-row: 1; position: static; }
  .first30 { grid-column: body !important; max-width: 680px !important; }
  .first30 dl { grid-template-columns: 11em 1fr; }
  .path li { white-space: normal; font-size: 16px; }
  #story .ch-head h2 { font-size: 30px; line-height: 1.6; }
  #contact .ch-head h2 { font-size: 36px; }
}
/* LP06: head column 5/12 so a 40px head never runs into the body; body 7/12 = about 34 characters a line */
@media (min-width: 1024px) {
  .chapter, .r1, .r2, .r3, .r4 { grid-template-columns: [edge-start] minmax(var(--gutter), 1fr) [head-start] minmax(0, 445px) [head-end body-start] minmax(0, 623px) [body-end] minmax(var(--gutter), 1fr) [edge-end]; }
  .ch-head { padding-right: 40px; }
  .ch-head h2 { font-size: 40px; }
  .chapter .col > *:not(.ch-head) { max-width: 623px; }
  .first30 { max-width: 623px !important; }
  .chat, .pics { max-width: 623px; }
}
@media (min-width: 1024px) {
  #reach > .col { display: block !important; margin: 0 auto; }
  #reach > .col:first-child { padding: 0 var(--gutter); }
}
@media (min-width: 1024px) { #story { padding-bottom: 88px; } }


/* ===== LP 07 (2026-10-06): the first screen is case 2; the whole page takes its tone =====
   Ink-navy, near-white type, vermilion that may glow. Three grounds, never the same twice in a row:
   D0 darkest / D1 one step lighter / L near-white (ink type). Each ground re-defines the old tokens,
   so every rule above (--paper = ground, --ink = type) follows it. */
:root {
  --serif: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --latin: "Sora", "Avenir Next", sans-serif;
  --ver: #ff6a3d;
  --glow: 0 0 14px rgba(255, 106, 61, .6);
  --fvx: clamp(32px, 4.45vw, 96px);
  color-scheme: dark;
}
body, .hero, .r2, #ai, #contact, .site-foot, .page {
  --paper: #06080c; --paper-2: #06080c; --ink: #eef1f6; --ink-2: #d5dbe6; --ink-3: #b4bccb;
  --rule: rgba(214, 220, 232, .18); --accent: #ff6a3d; --gline: #5d6573;
  background: var(--paper); color: var(--ink);
}
#why, .r4, #reach > .col:last-child, #who, #articles {
  --paper: #10141c; --paper-2: #10141c; --ink: #eef1f6; --ink-2: #d5dbe6; --ink-3: #b4bccb;
  --rule: rgba(214, 220, 232, .18); --accent: #ff6a3d; --gline: #5d6573;
  background: var(--paper); color: var(--ink);
}
#reach, .r1, .r3, #story {
  --paper: #eef0f3; --paper-2: #eef0f3; --ink: #0b0e14; --ink-2: #2a303b; --ink-3: #4b5361;
  --rule: #d3d8df; --accent: #b83a14; --gline: #8b93a0;
  background: var(--paper); color: var(--ink);
}
h1, h2, h3 { font-weight: 500; letter-spacing: .04em; }
.chapter p { color: var(--ink-2); }
a:focus-visible, label:focus-visible { outline-color: var(--ink); }

/* header: transparent over the first screen, a dark band once you scroll (and on inner pages) */
.site-head { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color .25s; }
.site-head .wrap { max-width: none; height: 108px; padding: 0 var(--fvx); transition: height .25s; }
.site-head.is-on, body:not(.lp) .site-head { background: rgba(6, 8, 12, .88); border-bottom-color: rgba(214, 220, 232, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-head.is-on .wrap, body:not(.lp) .site-head .wrap { height: 76px; }
.logo { font-family: var(--latin); font-size: 30px; font-weight: 600; letter-spacing: .04em; color: #eef1f6; }
.nav { gap: 44px; font-size: 17px; font-weight: 500; letter-spacing: .08em; }
.nav a { color: #eef1f6; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav .cta { display: inline-flex; align-items: center; height: 54px; padding: 0 32px; background: transparent; color: #eef1f6; border: 1px solid rgba(238, 241, 246, .6); border-radius: 999px; }
.nav .cta:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 1023px) { .nav { gap: 28px; } }
@media (max-width: 799px) {
  .site-head .wrap, .site-head.is-on .wrap, body:not(.lp) .site-head .wrap { height: 68px; padding: 0 24px; }
  .logo { font-size: 20px; }
  .nav a:not(.cta) { display: none; }
  .nav .cta { height: 44px; padding: 0 20px; font-size: 14px; border-color: rgba(238, 241, 246, .55); }
}
@media (max-width: 380px) { .nav { gap: 10px; font-size: 14px; } .nav .cta { padding: 0 16px; } .logo { font-size: 20px; } }

/* ① first screen. Sizes are the sample's (1440 x 900 / 390 x 844) scaled with the width. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--fvx) clamp(40px, 8.45vh, 96px); background: #06080c; color: #eef1f6; }
.fv-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.fv-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,8,12,.9) 0%, rgba(6,8,12,.62) 30%, rgba(6,8,12,0) 58%), radial-gradient(76.4% 84.4% at 62% 44%, rgba(6,8,12,0) 55%, rgba(3,4,7,.78) 100%); }
.no-js .hero { background: #06080c url("../img/fv_pc.jpg") center / cover no-repeat; }
.fv-in { position: relative; width: min(100%, 59.7vw); min-width: min(100%, 600px); display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 32px); }
.fv-in p { margin: 0; }
.fv-tag { display: flex; align-items: center; gap: 16px; font-size: clamp(19px, 1.806vw, 32px); font-weight: 500; letter-spacing: .14em; color: #eef1f6; line-height: 1.5; }
.fv-tag .bar { display: block; flex: none; width: 48px; height: 2px; background: var(--ver); }
.fv-pre { font-size: clamp(16px, 1.389vw, 24px); letter-spacing: .06em; color: #b4bccb !important; line-height: 1.5; }
.fv-pre span { color: #eef1f6; font-weight: 700; }
.hero h1 { margin: 0; font-size: clamp(46px, min(5.417vw, 8.7vh), 100px); font-weight: 500; line-height: 1.26; letter-spacing: .05em; white-space: nowrap; color: #eef1f6; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .rise { display: inline-block; }
.fv-lead { word-break: keep-all; max-width: 54.2vw; font-size: clamp(17px, 1.528vw, 28px); line-height: 1.85; letter-spacing: .04em; color: #d5dbe6; }
.fv-cta { display: flex; align-items: center; gap: clamp(20px, 1.94vw, 36px); }
.fv-btn { display: flex; flex: none; align-items: center; justify-content: space-between; gap: clamp(32px, 3.33vw, 60px); height: clamp(58px, 4.583vw, 80px); padding: 0 clamp(24px, 2.22vw, 40px); border-radius: 999px; background: var(--ver); color: #0a0c10; font-size: clamp(16px, 1.18vw, 21px); font-weight: 700; letter-spacing: .1em; text-decoration: none; box-shadow: 0 0 44px rgba(255, 106, 61, .45); }
.fv-btn:hover { background: #ff7d55; }
.fv-btn:focus-visible { outline: 2px solid #eef1f6; outline-offset: 4px; }
.fv-btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fv-note { display: flex; flex-direction: column; gap: 4px; font-size: clamp(14px, .903vw, 16px); line-height: 1.7; letter-spacing: .06em; color: #d5dbe6; }
.sp-only { display: none; }
@keyframes fv-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fv-fade { from { opacity: 0; } to { opacity: 1; } }
.hero .rise { animation: fv-rise 1.1s cubic-bezier(.2, .7, .1, 1) .2s both; }
.hero .ln + .ln .rise { animation-delay: .34s; }
.hero .fade { animation: fv-fade 1.6s ease .7s both; }
.no-js .hero .rise, .no-js .hero .fade { animation: none; }
@media (max-width: 1023px) { .fv-in { width: 100%; } .fv-lead { max-width: 640px; } }
@media (max-width: 799px) {
  .hero { justify-content: flex-start; padding: 96px 24px 305px; }
  .fv-shade { background: linear-gradient(180deg, rgba(6,8,12,.92) 0, rgba(6,8,12,.84) calc(var(--fvt, 539px) - 50px), rgba(6,8,12,0) calc(var(--fvt, 539px) + 69px)); }
  .no-js .hero { background-image: url("../img/fv_sp.jpg"); background-position: center bottom; background-size: 100% auto; }
  .fv-in { width: 100%; min-width: 0; gap: 16px; }
  .fv-tag { gap: 12px; font-size: 14px; font-weight: 400; letter-spacing: .04em; color: #b4bccb; }
  .fv-tag .bar { width: 24px; height: 1px; }
  .fv-pre { font-size: 14px; line-height: 1.7; letter-spacing: .03em; }
  .hero h1 { font-size: clamp(38px, 11.8vw, 46px); line-height: 1.28; letter-spacing: .04em; }
  .hero h1 .ln + .ln .rise { display: block; animation-delay: .24s; }
  .hero h1 .ln + .ln .rise.d2 { animation-delay: .48s; }
  .fv-lead { max-width: none; font-size: 14px; line-height: 1.9; letter-spacing: .03em; color: #b4bccb; }
  .fv-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .fv-btn { height: 58px; padding: 0 26px; gap: 16px; font-size: 16px; box-shadow: 0 0 36px rgba(255, 106, 61, .4); }
  .fv-note { font-size: 14px; letter-spacing: .02em; text-align: center; }
  .pc-only { display: none; }
  .sp-only { display: block; }
  br.sp-only { display: inline; }
}

/* buttons elsewhere take the first screen's button */
.btn { background: var(--ver); color: #0a0c10; border-radius: 999px; padding: 16px 32px; box-shadow: 0 0 36px rgba(255, 106, 61, .38); letter-spacing: .08em; }
.btn:hover { background: #ff7d55; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* the line, in the first screen's words: grey lines that stop, a vermilion line that glows and keeps going */
/* ② the five waits: grey segments, each ending in a small stopped light; the step in white, "待ち" in vermilion */
.path li { color: var(--ink); font-weight: 500; }
.path li::before { background: var(--gline); height: 2px; }
.path li + li::after { color: var(--ver); }
.path li .stop { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ff7a52; box-shadow: 0 0 8px rgba(255, 122, 82, .8); }
@media (max-width: 640px) { .path li::before { width: 2px; height: auto; } .path li .stop { top: auto; bottom: 0; right: auto; left: -3px; } }
@keyframes stop-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
html:not(.reduce) .path li .stop { animation: stop-blink 2.4s ease-in-out infinite; }
.turn, .log { border-left: 2px solid var(--ink); }
/* ③ the two routes, grey */

/* ⑥ one line: vermilion, glowing, through all four points */
.one ol::before { background: var(--ver); height: 3px; box-shadow: var(--glow); }
.one li { color: var(--ink); }
.one li::before { background: var(--paper); border-color: var(--ver); box-shadow: var(--glow); }
/* ⑦ after the talk / once it is ours: the same glowing line */
.after ol::before { background: var(--ver); box-shadow: var(--glow); }
.after li::before { background: var(--paper); border-color: var(--ver); box-shadow: var(--glow); }
.first30 dl { position: relative; border-left: 0; }
.first30 dl::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--ver); box-shadow: var(--glow); }
.first30 dt::before { left: -6px; background: var(--paper); border-color: var(--ver); }
/* ⑤ the circled judgement glows */

/* pictures on dark grounds: drawings become dark panels; the real white screen sits in a frame */
.chat { background: rgba(255, 255, 255, .03); border-color: var(--rule); }
.chat .q { border-color: var(--ver); }
.serp { background: #161b24; border-color: var(--rule); }
.serp > div { border-bottom-color: var(--rule); }
.serp-ai { background: rgba(255, 255, 255, .05); }
.serp .tag { border-color: var(--rule); }
.serp-q { border-color: var(--ink-3); }
.lp-whole, .grp.weekly { border-top-color: var(--rule); }

/* ⑥ and ⑦: no tall empty left column. ⑥ keeps its line and signature under the head; ⑦'s head runs the
   whole frame and "相談のあと" stands in the left column. */
@media (min-width: 1024px) {
  #who .ch-head { grid-row: 1 / span 2; position: static; }
  #who .one { grid-column: head !important; grid-row: 3 / span 2; align-self: start; margin: 0; padding-right: 40px; max-width: none; }
  #who .sign { grid-column: head !important; grid-row: 5; margin: 1.6em 0 0; }
  #who .one ol { grid-template-columns: 1fr; padding-left: 26px; }
  #who .one ol::before { left: 7px; right: auto; top: 10px; bottom: 28px; width: 3px; height: auto; }
  #who .one li { text-align: left; padding: 0 0 18px; }
  #who .one li::before { left: -26px; top: 6px; margin-left: 0; }
  #contact .ch-head { grid-column: head-start / body-end !important; grid-row: 1; position: static; }
  #contact .ch-head h2 { font-size: 40px; margin-bottom: 48px; }
  #contact h2 .hl { display: block; }
  #contact .after { grid-column: head !important; grid-row: 2 / span 3; align-self: start; margin: 0; padding-right: 40px; max-width: none; }
  #contact .after ol { grid-template-columns: 1fr; padding-left: 26px; }
  #contact .after ol::before { left: 7px; right: auto; top: 6px; bottom: 24px; width: 3px; height: auto; }
  #contact .after li { padding: 0 0 22px; }
  #contact .after li::before { left: -26px; top: 6px; }
}

/* articles and footer */
.alist a.row:hover .ttl { color: var(--ver); }
.site-foot { border-top: 1px solid rgba(214, 220, 232, .12); }
.site-foot, .site-foot a { color: #b4bccb; }

/* inner pages: the same ground, type and colours; the layout is unchanged */
.page { padding-top: 140px; }
.label { font-family: var(--latin); font-weight: 600; color: var(--ver); letter-spacing: .14em; }
.prose figure { background: #10141c; border-color: var(--rule); }
.provisional { border-color: var(--ver); color: #ff8a63; }
@media (max-width: 799px) { .page { padding-top: 110px; } }
.no-js .site-head { background: rgba(6, 8, 12, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 1024px) { .fv-note { flex: none; white-space: nowrap; } }
.serp > .serp-q { padding: 4px 16px; }

/* the words stay readable where a glowing line passes behind them (narrower PC widths) */
.fv-in p, .fv-in h1 { text-shadow: 0 0 14px rgba(6, 8, 12, .9), 0 0 4px rgba(6, 8, 12, .8); }
@media (max-width: 799px) { .fv-note { letter-spacing: 0; word-break: keep-all; } .fv-pre, .fv-tag span { word-break: keep-all; } }
@media (max-width: 380px) { .fv-btn { font-size: 15px; letter-spacing: .02em; padding: 0 16px; gap: 10px; } }
/* LP08: the glow is its own small canvas under the main one, blurred by CSS (fv.js sets its size and blur) */
.fv-glow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: -3; pointer-events: none; }
@media (max-width: 799px) { .fv-lead .ib { display: inline; } }
/* LP13 line breaks (whole site): break only between phrases, the same in Chromium and Safari.
   The phrase boundaries are <wbr> put in at build time by scripts/dataco_site/insert_wbr.py (BudouX; no runtime JS);
   keep-all stops breaks anywhere else, overflow-wrap is the safety net. Strict kinsoku keeps small kana, ー and
   closing punctuation off the start of a line. text-wrap: pretty is NOT used: with keep-all it crashes WebKit (Safari engine) on these pages (2026-10-07). */
html { line-break: strict; }
body { word-break: keep-all; overflow-wrap: anywhere; }
x-nw { white-space: nowrap; }  /* a phrase kept on one line (put in by insert_wbr.py; a custom element so no `.x span` rule styles it) */
/* LP13: columns wide enough for whole phrases.
   ② the five waits run across only from 1280px (labels 15px, letter-spacing 0); narrower, they stand vertically */
@media (min-width: 1280px) {
  .path li { font-size: 15px; letter-spacing: 0; }
  .path li + li { margin-left: 40px; }
  .path li + li::after { left: -39px; width: 38px; }
}
@media (min-width: 641px) and (max-width: 1279px) {
  .path { flex-direction: column; margin-left: 4px; }
  .path li { padding: 0 0 0 20px; font-size: 16px; }
  .path li::before { left: 0; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; }
  .path li + li { margin: 24px 0 0; }
  .path li + li::after { left: -6px; top: -21px; width: auto; text-align: left; }
  .path li .stop { top: auto; bottom: 0; right: auto; left: -3px; }
}
.site-foot a { display: inline-block; }
/* LP13: short phones (700px tall or less) - tighter first screen so the flowing lines and signs show in the first screen */
@media (max-width: 799px) and (max-height: 700px) {
  .hero { padding-top: 80px; padding-bottom: 240px; }
  .fv-in { gap: 10px; }
  .hero h1 { font-size: clamp(32px, 10vw, 40px); line-height: 1.22; }
  .fv-pre { line-height: 1.55; }
  .fv-lead { line-height: 1.7; }
  .fv-cta { gap: 6px; }
  .fv-btn { height: 50px; }
}
x-tx { display: inline; }  /* the words of a flex/grid box kept in one box (see insert_wbr.py) */