/* STAILOR Harness LP 共通スタイル
 * tokens.css（デザイントークン）とセットで全ページから読み込む。
 * 2026-07-24: 1ページLPを4ページ構成（/ ・ /how-it-works/ ・ /pricing/ ・ /company/）へ分離した際に
 * index.htmlのインラインCSSから共通部分を抽出。ページ固有のスタイルのみ各ページの<style>に残す。
 * デザインDNA・監査履歴の来歴コメントは git history の index.html を参照。
 */

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:5rem}
body{overflow-x:clip;font-family:var(--font-body);background:var(--color-paper);color:var(--color-ink);line-height:1.85;font-size:var(--text-base);padding-inline:max(0px, env(safe-area-inset-left))}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.ph{display:inline-block;width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.125em}
.container{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:900;overflow-wrap:anywhere;min-width:0}
h2.sec-title{font-size:var(--text-display-s);line-height:1.45;letter-spacing:.005em;margin-bottom:var(--space-lg)}
.sec-lead{color:var(--color-muted);max-width:44em;font-size:var(--text-base)}
.sec-head{text-align:center;margin-bottom:var(--space-xl)}
.sec-head .sec-title{margin-bottom:var(--space-2xs)}
.sec-eyebrow{display:block;font-family:var(--font-outlier);font-weight:700;font-size:var(--text-xs);letter-spacing:.24em;color:var(--color-accent-deep);margin-bottom:var(--space-md)}
.sec-head .sec-lead{margin-inline:auto;margin-top:var(--space-md);text-align:left}
@media(min-width:48rem){.sec-head .sec-lead.center{text-align:center}}
.band{background:var(--color-paper-2)}

/* ---------- buttons · ink pill = conversion, accent pill = section CTA ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-weight:700;font-family:var(--font-body);border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-xl);font-size:var(--text-base);line-height:1.5;white-space:nowrap;cursor:pointer;border:none;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
.btn-primary{background:var(--color-ink);color:var(--color-paper)}
.btn-primary::after{content:"→";font-family:var(--font-body)}
.btn-accent{background:var(--color-accent-deep);color:var(--color-paper)}
.btn-accent::after{content:"→";font-family:var(--font-body)}
.btn-white{background:var(--color-paper);color:var(--color-accent-deep)}
.btn-white::after{content:"→";font-family:var(--font-body)}
.btn-ghost{background:var(--color-paper);color:var(--color-ink);border:1.5px solid var(--color-rule-2)}
@media(hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--color-ink-2)}
  .btn-accent:hover{background:var(--color-accent)}
  .btn-white:hover{background:var(--color-paper-2)}
  .btn-ghost:hover{border-color:var(--color-ink)}
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.inverse .btn:focus-visible,.cta-band .btn:focus-visible{outline-color:var(--color-ink-inv)}
.btn[disabled],.btn[aria-busy="true"]{background:var(--color-muted);opacity:.55;cursor:not-allowed;transform:none}
@media(pointer:coarse){.btn{min-height:48px}}
@media(max-width:26rem){.btn{padding:var(--space-sm) var(--space-lg);font-size:var(--text-sm)}}
.micro{font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-md)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- nav · N1b logo-left / links + pill right, frost on scroll ---------- */
header.site{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in oklch, var(--color-paper) 92%, transparent);border-bottom:1px solid transparent;
  transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
header.site.is-scrolled{background:color-mix(in oklch, var(--color-paper) 80%, transparent);backdrop-filter:blur(16px) saturate(160%);border-bottom-color:var(--color-rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);height:4.25rem}
.brand{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-outlier);font-weight:700;font-size:var(--text-md);letter-spacing:-0.02em;white-space:nowrap}
.brand-mark{width:22px;height:22px;border-radius:7px;background:var(--color-accent);position:relative;flex:0 0 auto}
.brand-mark::after{content:"";position:absolute;inset:6px;background:var(--color-paper);border-radius:3px}
.brand-sub{font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--color-muted);letter-spacing:.01em;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:var(--space-lg)}
.nav-center{display:flex;gap:var(--space-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-muted)}
.nav-center a{white-space:nowrap;padding:var(--space-2xs) var(--space-2xs)}
.nav-center a:hover,.nav-center a:active{color:var(--color-ink)}
.nav-center a[aria-current="page"]{color:var(--color-ink);font-weight:700}
.nav-center a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
.nav-cta{padding:var(--space-xs) var(--space-lg);font-size:var(--text-sm)}
.nav-cta .cta-short{display:none}
@media(max-width:56.25rem){.nav-center{display:none}}
@media(max-width:34rem){.nav-cta .cta-full{display:none}.nav-cta .cta-short{display:inline}}
@media(max-width:26rem){
  .nav{gap:var(--space-sm)}
  .brand{font-size:var(--text-base)}
  .brand-sub{display:none}
  .nav-cta{padding:var(--space-xs) var(--space-md)}
}

/* ---------- sections ---------- */
section{padding-block:var(--space-3xl)}
section.tight{padding-block:var(--space-2xl)}
@media(max-width:48rem){section{padding-block:var(--space-2xl)}}

/* ---------- page hero（下層ページ共通の見出し帯） ---------- */
.page-hero{padding-block:var(--space-2xl);background:linear-gradient(180deg, var(--color-paper-2), var(--color-paper))}
.page-hero .crumbs{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-md)}
.page-hero .crumbs a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:2px}
.page-hero h1{font-size:clamp(1.7rem, 2vw + 0.8rem, 2.4rem);line-height:1.4;margin-bottom:var(--space-md)}
.page-hero .sec-lead{max-width:44em}

/* ---------- hero（トップ） ---------- */
.hero{position:relative;padding-block:var(--space-2xl) var(--space-3xl);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42rem 26rem at 78% 12%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--color-paper-2), var(--color-paper) 88%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-2xl);align-items:center}
@media(max-width:56.25rem){.hero-grid{grid-template-columns:1fr}}
.hero-label{display:inline-flex;align-items:center;gap:var(--space-2xs);background:var(--color-accent-wash);border:1px solid color-mix(in oklch, var(--color-accent) 30%, transparent);color:var(--color-accent-deep);font-size:var(--text-xs);font-weight:700;letter-spacing:.05em;padding:var(--space-2xs) var(--space-md);border-radius:var(--radius-pill);margin-bottom:var(--space-lg)}
h1.hero-title{font-size:clamp(1.9rem, 2.6vw + 0.75rem, 3.3rem);line-height:1.34;letter-spacing:0;margin-bottom:var(--space-lg)}
.hero-title .nb{display:inline-block}
h1 .accent{color:var(--color-accent-deep)}
.hero-qualifier{color:var(--color-muted);font-weight:500;margin-bottom:var(--space-xl)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md)}
.btn-hero{font-size:var(--text-md);padding:var(--space-md) var(--space-2xl)}
.btn-hero-sub{font-size:var(--text-sm);padding:var(--space-xs) var(--space-lg)}
@media(max-width:26rem){.btn-hero{font-size:var(--text-base);padding:var(--space-sm) var(--space-lg)}}
.hero-art{position:absolute;right:-3%;top:50%;transform:translateY(-50%);width:62%;max-width:none;height:auto;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 52% 52% at center, #000 50%, transparent 90%);
  mask-image:radial-gradient(ellipse 52% 52% at center, #000 50%, transparent 90%)}
@media(max-width:56.25rem){.hero-art{width:108%;right:-8%;opacity:.32}}
.lr{opacity:0;transform:translateY(8px);animation:lr var(--dur-long) var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes lr{to{opacity:1;transform:none}}

/* ---------- trust strip ---------- */
.trust{padding-block:var(--space-lg);border-block:1px solid var(--color-rule)}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);justify-content:center;align-items:baseline}
.trust-item{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs);font-size:var(--text-sm);font-weight:700;max-width:100%}
.trust-item::before{content:"✓";color:var(--color-accent);font-weight:900}
.trust-item small{font-weight:400;color:var(--color-muted);font-size:var(--text-xs)}
.trust-note{text-align:center;font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-xs)}

/* ---------- 課題カード ---------- */
.p-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
@media(max-width:54rem){.p-grid{grid-template-columns:1fr}}
.p-card{background:var(--color-paper);border:1px solid var(--color-rule);box-shadow:var(--shadow-whisper);border-radius:var(--radius-card);padding:var(--space-lg)}
.p-card h3{font-size:var(--text-base);margin-bottom:var(--space-xs)}
.p-card p{font-size:var(--text-sm);color:var(--color-muted)}
.p-conclusion{margin-top:var(--space-2xl);text-align:center}
.p-conclusion blockquote{font-family:var(--font-display);font-weight:900;font-size:var(--text-md);line-height:2;border:none;max-width:36em;margin-inline:auto}

/* ---------- 図版 ---------- */
.diagram-fig{margin:0;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-md);box-shadow:var(--shadow-whisper)}
.diagram-fig img{display:block;width:100%;height:auto;border-radius:var(--radius-inner)}
.diagram-fig figcaption{text-align:center;font-size:var(--text-xs);color:var(--color-muted);margin-top:var(--space-sm)}

/* ---------- これまで/これから panels ---------- */
.shift-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
@media(max-width:51.25rem){.shift-grid{grid-template-columns:1fr}}
.shift-col{border-radius:var(--radius-card);padding:var(--space-xl)}
.shift-col.before{background:var(--color-paper-2)}
.shift-col.after{background:var(--color-paper);border:1px solid var(--color-rule);box-shadow:var(--shadow-whisper)}
.shift-col h3{font-size:var(--text-sm);letter-spacing:.1em;margin-bottom:var(--space-md);color:var(--color-muted);display:flex;align-items:center;gap:var(--space-xs)}
.shift-col.after h3{color:var(--color-accent-deep)}
.shift-col.after h3::before{content:"";width:10px;height:10px;background:var(--color-accent);border-radius:2px}
.shift-col li{display:flex;gap:var(--space-sm);padding-block:var(--space-xs);font-size:var(--text-sm);border-bottom:1px dashed var(--color-rule)}
.shift-col li:last-child{border-bottom:none}
.shift-col.before li::before{content:"-";color:var(--color-muted);font-weight:900}
.shift-col.after li::before{content:"◆";color:var(--color-accent);font-size:var(--text-xs);line-height:2.2}
.shift-quote{margin-top:var(--space-2xl);font-family:var(--font-display);font-weight:900;font-size:var(--text-md);line-height:2;max-width:36em;margin-inline:auto;text-align:center}

/* ---------- 全体像 · 図 + copy split ---------- */
.val-wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--space-2xl);align-items:center}
@media(max-width:56.25rem){.val-wrap{grid-template-columns:1fr}}
.val-fig{margin:0}
.val-fig img{display:block;width:100%;height:auto}
.val-copy .sec-title{margin-bottom:var(--space-md)}
.val-copy .lede{font-weight:700;font-size:var(--text-md);margin-bottom:var(--space-sm)}

/* ---------- 機能カードグリッド (1+3+2モザイク) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
.feat-card{grid-column:span 2;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-whisper)}
.feat-card:nth-child(5),.feat-card:nth-child(6){grid-column:span 3}
.feat-card.feat-lead{grid-column:span 6;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.feat-lead .feat-visual{height:100%;min-height:11rem;border-bottom:none;border-right:1px solid var(--color-rule)}
.feat-lead .feat-body{align-self:center;padding-block:var(--space-md)}
img.feat-visual{display:block;width:100%;height:10rem;object-fit:contain;background:var(--color-paper);border-bottom:1px solid var(--color-rule)}
.feat-card h3{font-size:var(--text-base);padding:var(--space-md) var(--space-lg) 0}
.feat-card p{font-size:var(--text-sm);color:var(--color-muted);padding:var(--space-2xs) var(--space-lg) var(--space-lg)}
@media(max-width:60rem){.feat-card,.feat-card:nth-child(5),.feat-card:nth-child(6){grid-column:span 3}.feat-card.feat-lead{grid-column:span 6}}
@media(max-width:40rem){.feat-card,.feat-card:nth-child(5),.feat-card:nth-child(6){grid-column:span 6}.feat-card.feat-lead{grid-template-columns:1fr}.feat-lead .feat-visual{height:10rem;min-height:0;border-right:none;border-bottom:1px solid var(--color-rule)}}

/* ---------- 提供価値 · definition rows + KPI ---------- */
.iv-list{margin-top:var(--space-xl)}
.iv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:var(--space-xl);align-items:start;padding-block:var(--space-lg);border-top:1px solid var(--color-rule)}
.iv-row:last-child{border-bottom:1px solid var(--color-rule)}
@media(max-width:47.5rem){.iv-row{grid-template-columns:1fr;gap:var(--space-sm)}}
.iv-row h3{font-size:var(--text-md);margin-bottom:var(--space-xs)}
.iv-row p{font-size:var(--text-sm);color:var(--color-muted)}
.iv-kpi{font-size:var(--text-xs);font-weight:700;color:var(--color-accent-deep);background:var(--color-accent-wash);border-radius:var(--radius-inner);padding:var(--space-sm) var(--space-md);line-height:1.8}

/* ---------- 運用ループ · cycle + assets table ---------- */
.cycle-fig{margin:var(--space-2xl) auto 0;max-width:54rem;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-md)}
.cycle-fig img{display:block;width:100%;height:auto;border-radius:var(--radius-inner)}
.cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);margin-block:var(--space-xl) var(--space-sm);counter-reset:step}
@media(max-width:60rem){.cycle{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:37.5rem){.cycle{grid-template-columns:1fr}}
.cyc{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-inner);padding:var(--space-md) var(--space-sm);text-align:center}
.cyc b{display:block;font-size:var(--text-sm);margin-bottom:var(--space-2xs)}
.cyc span{font-size:var(--text-xs);color:var(--color-muted);line-height:1.6;display:block}
.cyc::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-outlier);font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--color-accent-deep);margin-bottom:var(--space-xs)}
.cycle-loop{font-size:var(--text-xs);color:var(--color-accent-deep);margin-bottom:var(--space-2xl);text-align:center}
.assets{width:100%;border-collapse:collapse;background:var(--color-paper);border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-rule)}
.assets th,.assets td{padding:var(--space-sm) var(--space-lg);text-align:left;font-size:var(--text-sm);border-bottom:1px solid var(--color-rule)}
.assets th{color:var(--color-accent-deep);font-weight:700;width:11em;white-space:nowrap}
.assets td{color:var(--color-muted)}
.assets tr:last-child th,.assets tr:last-child td{border-bottom:none}
.ev-quote{margin-top:var(--space-2xl);font-family:var(--font-display);font-weight:900;font-size:var(--text-md);line-height:2;max-width:36em;margin-inline:auto;text-align:center}

/* ---------- hitl table ---------- */
.hitl-table{width:100%;border-collapse:collapse;margin-top:var(--space-xl);background:var(--color-paper);border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-rule)}
.hitl-table th{padding:var(--space-md) var(--space-lg);font-size:var(--text-sm);text-align:left}
.hitl-table th.ai{background:var(--color-accent-wash);color:var(--color-accent-deep)}
.hitl-table th.hu{background:var(--color-paper-2);color:var(--color-ink)}
.hitl-table td{padding:var(--space-sm) var(--space-lg);font-size:var(--text-sm);border-top:1px solid var(--color-rule)}
.hitl-note{margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted);text-align:center}

/* ---------- scenarios · border-top text blocks 3col ---------- */
.scn-group{margin-top:var(--space-2xl)}
.scn-group h3{font-size:var(--text-base);letter-spacing:.06em;margin-bottom:var(--space-2xs)}
.scn-group h3::after{content:"";display:block;width:28px;height:3px;background:var(--color-accent);margin-top:var(--space-xs)}
.scn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-xl);margin-top:var(--space-md)}
@media(max-width:54rem){.scn-grid{grid-template-columns:1fr}}
.scn-item{border-top:1px solid var(--color-rule);padding-block:var(--space-md) var(--space-lg)}
.scn-item b{display:block;font-size:var(--text-sm);margin-bottom:var(--space-2xs)}
.scn-item p{font-size:var(--text-xs);color:var(--color-muted)}

/* ---------- AI提案サンプル · 1 featured + 2 stacked ---------- */
.ai-badge{display:inline-flex;align-items:center;gap:var(--space-2xs);background:var(--color-accent-wash);color:var(--color-accent-deep);font-size:var(--text-xs);font-weight:700;padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-pill)}
.mock-btn{font-size:var(--text-xs);font-weight:700;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);border:1px solid var(--color-rule-2);background:var(--color-paper);color:var(--color-muted);white-space:nowrap;cursor:default;user-select:none}
.mock-btn.ok{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.aia-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-lg);margin-top:var(--space-xl)}
@media(max-width:56.25rem){.aia-grid{grid-template-columns:1fr}}
.aia-card{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column}
.aia-card.feat{grid-row:span 2;box-shadow:var(--shadow-whisper)}
@media(max-width:56.25rem){.aia-card.feat{grid-row:auto}}
.aia-head{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-rule);display:flex;align-items:center;gap:var(--space-xs)}
.aia-body{padding:var(--space-lg);flex:1}
.aia-body h3{font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--space-md)}
.aia-card.feat .aia-body h3{font-size:var(--text-base)}
.aia-rows{display:grid;gap:var(--space-xs)}
.aia-row{display:flex;gap:var(--space-sm);font-size:var(--text-xs)}
.aia-row b{flex:0 0 5.5em;color:var(--color-accent-deep)}
.aia-row span{color:var(--color-muted)}
.aia-foot{padding:var(--space-md) var(--space-lg);border-top:1px dashed var(--color-rule);display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.aia-note{margin-top:var(--space-lg);font-size:var(--text-xs);color:var(--color-muted);text-align:center}

/* ---------- gradient CTA band ---------- */
.cta-band{position:relative;background:var(--grad-cta);border-radius:var(--radius-band);color:var(--color-ink-inv);padding:var(--space-2xl);box-shadow:var(--shadow-lift);overflow:clip}
.cta-band::before{content:"";position:absolute;inset:0;background:url("/img/cta-flow.webp") center/cover no-repeat}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, color-mix(in oklch, var(--color-paper-inv) 80%, transparent), color-mix(in oklch, var(--color-paper-inv) 30%, transparent) 65%, transparent)}
.cta-inner{position:relative;z-index:var(--z-base);max-width:34em}
@media(max-width:51.25rem){
  .cta-band{padding:var(--space-xl);text-align:center}
  .cta-band::after{background:color-mix(in oklch, var(--color-paper-inv) 78%, transparent)}
  .cta-inner{margin-inline:auto}
}
.cta-band h2{font-size:var(--text-lg);line-height:1.6;margin-bottom:var(--space-sm);color:var(--color-ink-inv)}
.cta-band p{font-size:var(--text-sm);color:color-mix(in oklch, var(--color-ink-inv) 92%, transparent);margin-bottom:var(--space-lg)}

/* ---------- about · cred stats + profile rows ---------- */
.cred-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin-block:var(--space-xl)}
@media(max-width:40rem){.cred-stats{grid-template-columns:1fr}}
.cred{border-top:2px solid var(--color-ink);padding-top:var(--space-md)}
.cred b{display:block;font-family:var(--font-outlier);font-weight:700;font-size:var(--text-2xl);line-height:1.1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.cred b small{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;margin-left:var(--space-3xs)}
.cred span{display:block;margin-top:var(--space-2xs);font-size:var(--text-xs);color:var(--color-muted)}
.about-profile{margin-top:var(--space-xl);max-width:44em}
.about-profile > div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-sm);border-top:1px solid var(--color-rule)}
.about-profile > div:last-child{border-bottom:1px solid var(--color-rule)}
.about-profile dt{font-weight:700;font-size:var(--text-sm)}
.about-profile dd{font-size:var(--text-sm);color:var(--color-muted)}
@media(max-width:40rem){.about-profile > div{grid-template-columns:1fr;gap:var(--space-3xs)}}

/* ---------- 提供モデルの思想 ---------- */
.wf-list{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xl)}
.wf-list li{background:var(--color-paper-2);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-lg);font-size:var(--text-sm);font-weight:600;white-space:nowrap}
.wf-quote{margin-block:var(--space-2xl) var(--space-lg);font-family:var(--font-display);font-weight:900;font-size:var(--text-md);line-height:2;max-width:36em}
.note-box{background:var(--color-paper-2);border-radius:var(--radius-inner);padding:var(--space-md) var(--space-lg);font-size:var(--text-xs);color:var(--color-muted);max-width:48em}

/* ---------- comparison table ---------- */
.cmp-scroll{overflow-x:auto;margin-top:var(--space-xl);border-radius:var(--radius-card);border:1px solid var(--color-rule)}
.cmp{width:100%;border-collapse:collapse;background:var(--color-paper);min-width:47.5rem}
.cmp th,.cmp td{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);border-bottom:1px solid var(--color-rule);text-align:center;font-variant-numeric:tabular-nums}
.cmp th{background:var(--color-paper-2);font-weight:700}
.cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:600}
.cmp .hl{background:var(--color-accent-wash);font-weight:700;color:var(--color-accent-deep)}
.cmp th.hl{background:var(--color-ink);color:var(--color-paper)}
.cmp tr:last-child td{border-bottom:none}
.mark-ok{color:var(--color-accent-deep);font-weight:900}
.mark-tri{color:var(--color-muted)}
.mark-no{color:var(--color-neg)}
.cmp-note{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--color-muted)}

/* ---------- steps · vertical numbered ---------- */
.step-list{margin-top:var(--space-2xl)}
.step{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-lg);border-top:1px solid var(--color-rule)}
.step-num{font-family:var(--font-outlier);font-weight:700;font-size:var(--text-lg);color:var(--color-accent);line-height:1.2;font-variant-numeric:tabular-nums}
.step h3{font-size:var(--text-md);margin-bottom:var(--space-2xs)}
.step p{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-xs)}
.step-out{display:inline-block;font-size:var(--text-xs);font-weight:700;color:var(--color-accent-deep);background:var(--color-accent-wash);border-radius:var(--radius-inner);padding:var(--space-2xs) var(--space-sm)}

/* ---------- 効果の測定 ---------- */
.roi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);margin-top:var(--space-xl)}
@media(max-width:51.25rem){.roi-grid{grid-template-columns:1fr}}
.roi-col h3{font-size:var(--text-base);margin-bottom:var(--space-md)}
.roi-col li{display:flex;gap:var(--space-sm);padding-block:var(--space-xs);font-size:var(--text-sm);border-bottom:1px dashed var(--color-rule)}
.roi-col li::before{content:"✓";color:var(--color-accent);font-weight:900}
.roi-note{margin-top:var(--space-md);font-size:var(--text-xs);color:var(--color-muted);line-height:2}

/* ---------- plan ---------- */
.plan-card{max-width:48em;margin-inline:auto;margin-top:var(--space-xl);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);box-shadow:var(--shadow-lift);overflow:hidden}
.plan-head{padding:var(--space-xl) var(--space-xl) var(--space-lg);background:var(--grad-cta);color:var(--color-ink-inv)}
.plan-price{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-2xl)}
.plan-price div b{display:block;font-size:var(--text-xs);color:color-mix(in oklch, var(--color-ink-inv) 80%, transparent);font-weight:600;margin-bottom:var(--space-3xs)}
.plan-price div span{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.plan-body{padding:var(--space-xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}
@media(max-width:42.5rem){.plan-body{grid-template-columns:1fr;padding:var(--space-lg)}}
.plan-body h3{font-size:var(--text-sm);letter-spacing:.06em;margin-bottom:var(--space-sm);color:var(--color-accent-deep);font-family:var(--font-display);font-weight:700}
.plan-body li{display:flex;gap:var(--space-xs);font-size:var(--text-sm);padding-block:var(--space-2xs)}
.plan-body .std li::before{content:"✓";color:var(--color-accent);font-weight:900}
.plan-body .opt li::before{content:"＋";color:var(--color-accent-deep);font-weight:900}
.plan-foot{padding:0 var(--space-xl) var(--space-xl)}
.plan-return{font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-md)}
.plan-return b{color:var(--color-accent-deep)}

/* ---------- fit ---------- */
.fit-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-lg);margin-top:var(--space-xl)}
@media(max-width:54rem){.fit-grid{grid-template-columns:1fr}}
.fit-col{border-radius:var(--radius-card);padding:var(--space-xl)}
.fit-col.yes{background:var(--color-paper);border:1px solid var(--color-rule);box-shadow:var(--shadow-whisper)}
.fit-col.no{background:var(--color-paper-2)}
.fit-col h3{font-size:var(--text-base);margin-bottom:var(--space-md)}
.fit-col.yes h3{color:var(--color-accent-deep)}
.fit-col.no h3{color:var(--color-muted)}
.fit-col li{display:flex;gap:var(--space-sm);font-size:var(--text-sm);padding-block:var(--space-2xs);align-items:baseline}
.fit-col.yes li::before{content:"✓";color:var(--color-accent);font-weight:900}
.fit-col.no li::before{content:"−";color:var(--color-muted);font-weight:900}

/* ---------- safety ---------- */
.safe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-xl) var(--space-lg);margin-top:var(--space-xl)}
.safe-card h3{font-size:var(--text-sm);margin-bottom:var(--space-2xs);display:flex;align-items:center;gap:var(--space-xs)}
.safe-card h3 .ph{color:var(--color-accent);font-size:var(--text-md)}
.safe-card p{font-size:var(--text-xs);color:var(--color-muted)}

/* ---------- faq ---------- */
.faq-list{max-width:52em;margin-inline:auto;margin-top:var(--space-xl)}
.faq-item{border-bottom:1px solid var(--color-rule)}
.faq-item:first-child{border-top:1px solid var(--color-rule)}
.faq-item summary{cursor:pointer;list-style:none;padding:var(--space-md) var(--space-2xs);font-weight:700;font-size:var(--text-sm);display:flex;gap:var(--space-sm);align-items:baseline}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";color:var(--color-accent-deep);font-family:var(--font-outlier);font-weight:700}
.faq-item summary::after{content:"＋";margin-left:auto;color:var(--color-muted);font-weight:400;transition:transform var(--dur-short) var(--ease-in-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
.faq-item .a{padding:0 var(--space-2xs) var(--space-lg) 2em;font-size:var(--text-sm);color:var(--color-muted)}

/* ---------- 解説記事カード ---------- */
.ans-wrap{max-width:52em;margin-inline:auto;margin-top:var(--space-xl)}
.ans-wrap>h3{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--color-ink-2);margin:0 0 var(--space-md)}
.ans-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.ans-card{display:flex;gap:var(--space-md);align-items:center;text-decoration:none;
  border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-sm) var(--space-md);
  transition:border-color var(--dur-short) var(--ease-in-out)}
.ans-card:hover{border-color:var(--color-accent)}
.ans-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.ans-card b{display:block;font-size:var(--text-sm);font-weight:700;color:var(--color-ink-2);line-height:1.5}
.ans-card span{display:block;font-size:var(--text-xs);color:var(--color-muted);margin-top:0.3em;line-height:1.7}
.ans-more{text-align:right;font-size:var(--text-sm);margin-top:var(--space-sm)}
@media(max-width:40rem){.ans-cards{grid-template-columns:1fr}.ans-card img{width:56px;height:56px}}

/* ---------- 下層ページ案内カード ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-xl)}
@media(max-width:54rem){.guide-grid{grid-template-columns:1fr}}
.guide-card{display:block;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-lg);box-shadow:var(--shadow-whisper);transition:border-color var(--dur-short) var(--ease-in-out)}
.guide-card:hover{border-color:var(--color-accent)}
.guide-card:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-card)}
.guide-card b{display:block;font-family:var(--font-display);font-weight:900;font-size:var(--text-md);margin-bottom:var(--space-2xs)}
.guide-card p{font-size:var(--text-sm);color:var(--color-muted)}
.guide-card .more{display:inline-block;margin-top:var(--space-sm);font-size:var(--text-sm);font-weight:700;color:var(--color-accent-deep)}

/* ---------- inverse close (最終CTA + form) ---------- */
.inverse{background:var(--color-paper-inv);color:var(--color-ink-inv)}
.inverse .sec-title{color:var(--color-ink-inv)}
.inverse .sec-lead{color:var(--color-muted-inv)}
.inverse .micro{color:var(--color-muted-inv)}
.inverse .btn-primary{background:var(--color-ink-inv);color:var(--color-ink)}
@media(hover:hover) and (pointer:fine){.inverse .btn-primary:hover{background:var(--color-paper)}}
.final-points{max-width:40em;margin-block:var(--space-xl) var(--space-xs)}
.final-points li{display:flex;gap:var(--space-lg);align-items:baseline;padding-block:var(--space-md);border-bottom:1px solid var(--color-rule-inv);font-size:var(--text-base);font-weight:600}
.final-points li:last-child{border-bottom:none}
.final-points li b{font-family:var(--font-outlier);font-weight:700;color:var(--color-accent-inv);font-variant-numeric:tabular-nums}

.form-card{max-width:42.5em;margin-top:var(--space-2xl);background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-card);padding:var(--space-2xl);box-shadow:var(--shadow-lift)}
@media(max-width:37.5rem){.form-card{padding:var(--space-lg)}}
.form-card h3{font-size:var(--text-md);margin-bottom:var(--space-2xs)}
.form-card .sub{font-size:var(--text-xs);color:var(--color-muted);margin-bottom:var(--space-lg)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media(max-width:37.5rem){.f-grid{grid-template-columns:1fr}}
.f-field{display:flex;flex-direction:column;gap:var(--space-2xs)}
.f-field.wide{grid-column:1/-1}
.f-field label{font-size:var(--text-xs);font-weight:700}
.f-field label .req{color:var(--color-neg);font-size:var(--text-xs);margin-left:var(--space-2xs);border:1px solid currentColor;border-radius:4px;padding:0 var(--space-2xs)}
.f-field label .opt{color:var(--color-muted);font-size:var(--text-xs);margin-left:var(--space-2xs);border:1px solid var(--color-rule-2);border-radius:4px;padding:0 var(--space-2xs)}
.f-field input,.f-field select,.f-field textarea{font-family:inherit;font-size:var(--text-sm);padding:var(--space-sm) var(--space-md);border:1.5px solid var(--color-rule-2);border-radius:var(--radius-inner);background:var(--color-paper);color:var(--color-ink);transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.f-field ::placeholder{color:var(--color-muted)}
.f-field input:focus-visible,.f-field select:focus-visible,.f-field textarea:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}
.f-field input:user-invalid,.f-field select:user-invalid,.f-field textarea:user-invalid{border-color:var(--color-neg)}
.f-err{display:block;min-height:1.5em;min-height:1lh;visibility:hidden;font-size:var(--text-xs);color:var(--color-neg)}
.f-field :user-invalid ~ .f-err{visibility:visible}
.f-consent{margin-top:var(--space-lg);font-size:var(--text-xs);color:var(--color-muted)}
.f-consent a{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:2px}
.f-consent a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
.form-card .btn{width:100%;margin-top:var(--space-md)}
.form-err{margin-top:var(--space-md);background:var(--color-neg-wash);color:var(--color-neg);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-inner);padding:var(--space-sm) var(--space-md)}
.turnstile-container{margin:0 0 16px}
.form-thanks{display:none;text-align:center;padding:var(--space-xl) var(--space-sm)}
.form-thanks .ok-mark{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--color-accent-wash);color:var(--color-accent-deep);font-size:var(--text-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-md)}
.form-thanks p{font-size:var(--text-sm);color:var(--color-muted)}

/* ---------- 代表メッセージ ---------- */
.msg{max-width:44em}
.msg p{margin-bottom:var(--space-lg);font-size:var(--text-base);color:var(--color-muted)}
.msg p.strong{font-family:var(--font-display);font-weight:900;font-size:var(--text-md);color:var(--color-ink);line-height:2}
.msg-sign{margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--color-ink);font-weight:700}
.msg-sign small{display:block;font-weight:400;color:var(--color-muted);font-size:var(--text-xs)}

/* ---------- footer · Ft2 inline single line (dark) ---------- */
footer.site{background:var(--color-paper-inv-2);color:var(--color-muted-inv);padding-block:var(--space-xl);font-size:var(--text-xs);border-top:1px solid var(--color-rule-inv)}
.foot-line{display:flex;justify-content:space-between;gap:var(--space-md) var(--space-lg);flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:var(--space-lg);flex-wrap:wrap}
.foot-links a{white-space:nowrap;color:var(--color-muted-inv);text-decoration:underline;text-underline-offset:2px}
.foot-links a:hover,.foot-links a:active{color:var(--color-ink-inv)}
.foot-links a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
footer .brand{color:var(--color-ink-inv);font-size:var(--text-base)}
footer .brand-sub{color:var(--color-muted-inv)}
footer .brand-mark::after{background:var(--color-paper-inv-2)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:150ms !important;animation-iteration-count:1 !important;transition-duration:150ms !important}
  .lr{animation:lr-r 150ms linear forwards}
  @keyframes lr-r{to{opacity:1;transform:none}}
  .btn:hover,.btn:active{transform:none}
}