/* Hallmark · genre: playful · macrostructure: Map / Diagram · nav: N2 · footer: Ft5
 * theme: custom · vibe: "生成りの紙・手書きの工程表・付箋・マーカー" · paper: oklch(96.8% 0.014 85) · accent: oklch(47% 0.12 252)
 * display: Zen Maru Gothic · body: Noto Sans JP · outlier: Klee One（図の書きこみ・付箋の見出しだけ）
 * axes: light / rounded-sans / cool · enrichment: E5 hand-built（HTML の付箋＋CSS の点線。画像は使わない）
 * tone: soft · audience: 中小の工場の現場責任者 · use: 無料ではじめる · context: user-provided
 * motion: 最初の地図の付箋が順に現れる・カードに乗せると少し浮く（動きを減らす設定では止める）
 * honest: 証言・顧客ロゴ・実績数値は載せていない。補助金の欄は未定のため外した（2026-09-27）
 * 前回（2026-09-04 · Narrative Workflow · modern-minimal · N1b · Ft1）と骨組み・書体・ナビ・フッターが違う
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 * contrast: pass — 163要素をライト・ダーク両方で実測 · mobile: pass — 320 / 375 / 414 / 768px で実測（横はみ出し・札の2行なし）
 * tokens: 色と書体はすべて :root の名前付きの値から（別の tokens.css は作らず、この先頭にまとめた）
 * ランディングと問い合わせだけで使う。アプリ本体の app.css は読まない（共通の部品名がぶつかったため）
 * ============================================================ */

/* ===== 決まった値（色・書体・間隔・動き）。ここ以外に色や書体を直接書かない ===== */
:root{
    /* 紙と墨：生成りの紙に、少し茶を含んだ墨 */
    --color-paper:oklch(96.8% 0.014 85);
    --color-paper-2:oklch(93.6% 0.02 83);
    --color-paper-3:oklch(99% 0.006 85);
    --color-ink:oklch(30% 0.018 65);
    --color-ink-2:oklch(46% 0.02 65);
    --color-muted:oklch(52% 0.02 70);
    --color-rule:oklch(85% 0.024 78);
    --color-rule-2:oklch(90% 0.02 80);
    --color-rule-strong:oklch(66% 0.03 72);
    --color-dot:oklch(86% 0.022 80);

    /* マーカーの青（アプリ本体と同じ系統）。塗りは CTA と線だけ */
    --color-accent:oklch(47% 0.12 252);
    --color-accent-hover:oklch(42% 0.12 252);
    --color-accent-ink:oklch(98.5% 0.008 85);
    --color-accent-soft:oklch(92.5% 0.03 245);
    --color-focus:oklch(52% 0.19 252);

    /* 付箋：黄（今日から使える・目印）と桃（困りごと）。付箋の上の文字は暗い墨のまま */
    --color-note:oklch(91.5% 0.095 96);
    --color-note-alt:oklch(92% 0.045 22);
    --color-note-edge:oklch(78% 0.1 90);
    --color-note-ink:oklch(30% 0.03 75);

    /* 意味のある色：不良の戻り（赤）と、使える（緑） */
    --color-ng:oklch(53% 0.16 32);
    --color-ok:oklch(46% 0.1 150);
    --color-ok-soft:oklch(92.5% 0.05 150);

    --shadow-note:0 10px 22px -14px oklch(35% 0.05 70 / 0.5);
    --shadow-lift:0 16px 28px -16px oklch(35% 0.05 70 / 0.55);

    --font-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
    --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    --font-hand:"Klee One","Zen Maru Gothic",cursive;

    /* 4pt を基準にした間隔 */
    --space-3xs:0.125rem;
    --space-2xs:0.25rem;
    --space-xs:0.5rem;
    --space-sm:0.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2.5rem;
    --space-2xl:4rem;
    --space-3xl:6rem;

    /* 文字の大きさ（1.25 の比） */
    --text-sm:0.875rem;
    --text-base:1rem;
    --text-md:1.125rem;
    --text-lg:1.375rem;
    --text-xl:clamp(1.6rem, 2.4vw + 0.9rem, 2.25rem);
    --text-display:clamp(2.2rem, 4.6vw + 0.9rem, 3.9rem);

    --radius-note:6px;
    --radius-card:16px;
    --radius-input:12px;
    --radius-pill:999px;

    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:cubic-bezier(0.7, 0, 0.84, 0);
    --dur-micro:120ms;
    --dur-short:220ms;
    --dur-long:480ms;

    --z-chip:200;
    --page-max:1120px;
    --page-gutter:clamp(1rem, 4vw, 2rem);
    --dash:2.5px dashed var(--color-accent);
}

/* 暗い表示：夜のホワイトボード。付箋は明るい紙のまま（書かれた文字は暗い墨） */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --color-paper:oklch(22% 0.012 70);
        --color-paper-2:oklch(26% 0.014 70);
        --color-paper-3:oklch(29% 0.014 70);
        --color-ink:oklch(93% 0.012 85);
        --color-ink-2:oklch(80% 0.015 80);
        --color-muted:oklch(72% 0.015 80);
        --color-rule:oklch(38% 0.015 75);
        --color-rule-2:oklch(33% 0.014 75);
        --color-rule-strong:oklch(58% 0.02 75);
        --color-dot:oklch(32% 0.014 75);
        --color-accent:oklch(74% 0.11 250);
        --color-accent-hover:oklch(80% 0.1 250);
        --color-accent-ink:oklch(20% 0.02 250);
        --color-accent-soft:oklch(32% 0.04 250);
        --color-focus:oklch(80% 0.14 250);
        --color-note:oklch(86% 0.09 95);
        --color-note-alt:oklch(86% 0.05 22);
        --color-note-edge:oklch(70% 0.09 90);
        --color-ng:oklch(72% 0.14 32);
        --color-ok:oklch(76% 0.1 150);
        --color-ok-soft:oklch(32% 0.04 150);
        --shadow-note:0 10px 22px -14px oklch(5% 0 0 / 0.7);
        --shadow-lift:0 16px 28px -16px oklch(5% 0 0 / 0.75);
    }
}
:root[data-theme="dark"]{
    --color-paper:oklch(22% 0.012 70);
    --color-paper-2:oklch(26% 0.014 70);
    --color-paper-3:oklch(29% 0.014 70);
    --color-ink:oklch(93% 0.012 85);
    --color-ink-2:oklch(80% 0.015 80);
    --color-muted:oklch(72% 0.015 80);
    --color-rule:oklch(38% 0.015 75);
    --color-rule-2:oklch(33% 0.014 75);
    --color-rule-strong:oklch(58% 0.02 75);
    --color-dot:oklch(32% 0.014 75);
    --color-accent:oklch(74% 0.11 250);
    --color-accent-hover:oklch(80% 0.1 250);
    --color-accent-ink:oklch(20% 0.02 250);
    --color-accent-soft:oklch(32% 0.04 250);
    --color-focus:oklch(80% 0.14 250);
    --color-note:oklch(86% 0.09 95);
    --color-note-alt:oklch(86% 0.05 22);
    --color-note-edge:oklch(70% 0.09 90);
    --color-ng:oklch(72% 0.14 32);
    --color-ok:oklch(76% 0.1 150);
    --color-ok-soft:oklch(32% 0.04 150);
    --shadow-note:0 10px 22px -14px oklch(5% 0 0 / 0.7);
    --shadow-lift:0 16px 28px -16px oklch(5% 0 0 / 0.75);
}

/* ===== 土台 ===== */
*,*::before,*::after{box-sizing:border-box;}
/* 横スクロールだけ止める。hidden ではなく clip（固定表示を壊さないため） */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{
    overflow-x:clip;margin:0;
    background:var(--color-paper);color:var(--color-ink);
    font-family:var(--font-body);font-size:var(--text-base);line-height:1.85;
    -webkit-font-smoothing:antialiased;
}
.lp h1,.lp h2,.lp h3{
    font-family:var(--font-display);font-weight:700;font-style:normal;
    letter-spacing:0.01em;line-height:1.4;margin:0;
    overflow-wrap:anywhere;min-width:0;
    /* 日本語は文節で折り返し、行の長さをそろえる（1文字だけ次の行に落ちるのを防ぐ） */
    word-break:auto-phrase;text-wrap:balance;
}
/* 土台の決まりは :where で強さを0にする（部品ごとの余白や色の指定が必ず勝つように） */
:where(.lp) p{margin:0;}
:where(.lp) a{color:var(--color-accent);text-underline-offset:0.2em;}
:where(.lp) a:hover{color:var(--color-accent-hover);}
.lp :focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;border-radius:6px;}
ol,ul{margin:0;padding:0;}

/* 画面には出さず、読み上げにだけ渡すラベル */
.visually-hidden{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter);}

/* 区画の余白は区画ごとに変える（全部同じにしない） */
.sec{padding-block:var(--space-2xl);}
.sec--paper2{background:var(--color-paper-2);}
.head{max-width:34em;padding-block-end:var(--space-xl);}
.head h2{font-size:var(--text-xl);}
.head p{margin-top:var(--space-md);color:var(--color-ink-2);}

/* ===== ボタン：丸いマーカーの札 ===== */
.lpbtn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;padding:0 var(--space-lg);border-radius:var(--radius-pill);
    border:1.5px solid var(--color-ink);background:transparent;color:var(--color-ink);
    font-family:var(--font-display);font-weight:700;font-size:var(--text-base);
    text-decoration:none;white-space:nowrap;cursor:pointer;
    transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out);
}
.lp a.lpbtn{color:var(--color-ink);}
.lpbtn--pri,.lp a.lpbtn--pri{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);}
.lpbtn--lg{min-height:52px;padding:0 var(--space-xl);font-size:var(--text-md);}
.lpbtn--sm{min-height:40px;padding:0 var(--space-md);font-size:var(--text-sm);}
@media (hover:hover) and (pointer:fine){
    .lpbtn:hover{transform:translateY(-1px);background:var(--color-paper-2);}
    .lpbtn--pri:hover,.lp a.lpbtn--pri:hover{background:var(--color-accent-hover);color:var(--color-accent-ink);}
}
.lpbtn:active{transform:translateY(1px);}
.lpbtn:disabled{opacity:0.55;cursor:not-allowed;transform:none;}

/* ===== N2 ナビ：角に置く2枚の小さな付箋 ===== */
.chips{
    position:fixed;inset:var(--space-sm) var(--space-sm) auto;z-index:var(--z-chip);
    display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm);
    pointer-events:none;
}
.chip{
    pointer-events:auto;display:inline-flex;align-items:center;gap:var(--space-sm);
    min-height:48px;padding:var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
    background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius-pill);
    box-shadow:var(--shadow-note);
}
.lp a.chip--brand{
    padding-inline:var(--space-sm);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
    color:var(--color-ink);text-decoration:none;white-space:nowrap;
}
/* 狭い画面では「ログイン」を出さないので、右の札の左の余白もなくす */
.chip--acts{padding-left:var(--space-2xs);}
.lp .chip__link{color:var(--color-ink-2);text-decoration:none;font-size:var(--text-sm);font-weight:500;white-space:nowrap;display:none;}
.lp .chip__link:hover{color:var(--color-ink);}
/* 狭い画面では「無料で」を省いて「はじめる」だけにする（札を2行にしない・はみ出させない） */
.chip__long{display:none;}

/* ===== ヒーロー ===== */
.hero{padding-block:calc(var(--space-3xl) + var(--space-md)) var(--space-2xl);}
.hero__intro{max-width:36em;}
.hero h1{font-size:var(--text-display);line-height:1.3;}
.hero__lede{margin-top:var(--space-xl);font-size:var(--text-md);color:var(--color-ink-2);}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl);}
.hero__note{margin-top:var(--space-md);font-size:var(--text-sm);color:var(--color-muted);}

/* 地図：方眼の紙の上に、6枚の付箋を1本の点線でつなぐ（狭い画面では縦につなぐ） */
.map{
    margin-top:var(--space-2xl);padding:var(--space-lg) var(--space-md) var(--space-md);
    border:1px solid var(--color-rule);border-radius:var(--radius-card);
    background-color:var(--color-paper-3);
    background-image:radial-gradient(var(--color-dot) 1.2px, transparent 1.3px);
    background-size:18px 18px;
}
.map__cap{font-size:var(--text-sm);color:var(--color-ink-2);margin-bottom:var(--space-lg);}
.map__row{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
.map__node{position:relative;animation:note-in var(--dur-long) var(--ease-out) both;animation-delay:calc(var(--i) * 90ms);}
.map__node:nth-child(odd) a{transform:rotate(-1.2deg);}
.map__node:nth-child(even) a{transform:rotate(1deg);}
.lp .map__node a{
    position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    column-gap:var(--space-sm);align-items:center;
    min-height:76px;padding:var(--space-sm) var(--space-md);
    background:var(--color-note);color:var(--color-note-ink);text-decoration:none;
    border-radius:var(--radius-note);box-shadow:var(--shadow-note);
    transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);
}
.map__no{
    grid-row:1 / span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
    border:2px solid currentColor;font-family:var(--font-hand);font-size:var(--text-md);line-height:1;
}
.map__node b{font-family:var(--font-display);font-size:var(--text-md);line-height:1.35;}
.map__memo{font-family:var(--font-hand);font-size:var(--text-sm);line-height:1.4;}
/* 付箋の中は文節で折り返す（「集ま/る」のような切れ方をしない） */
.map__node b,.map__memo,.road__prod,.voice__head{word-break:auto-phrase;overflow-wrap:anywhere;min-width:0;}
.map__node a > *{min-width:0;}
/* 見出しの折り返し位置を決めたいときの、ひとまとまり（この中では折り返さない） */
.phrase{display:inline-block;}
/* これからの段階：点線の付箋（色を塗らない） */
.lp .map__node--soon a{
    background:var(--color-paper-3);color:var(--color-ink-2);
    border:2px dashed var(--color-rule-strong);box-shadow:none;
}
/* 付箋どうしをつなぐ点線（狭い画面では縦） */
.map__node:not(:last-child)::after{
    content:"";position:absolute;left:1.95rem;top:100%;height:var(--space-lg);
    border-left:var(--dash);
}
.map__loop{
    margin-top:var(--space-md);text-align:right;
    font-family:var(--font-hand);font-size:var(--text-md);color:var(--color-ng);
}
@media (hover:hover) and (pointer:fine){
    .lp .map__node a:hover{transform:translateY(-3px) rotate(0deg);box-shadow:var(--shadow-lift);}
}

@keyframes note-in{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}

/* ===== 困りごと：桃色の付箋を3枚 ===== */
.voices{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
.voice{
    padding:var(--space-lg);background:var(--color-note-alt);color:var(--color-note-ink);
    border-radius:var(--radius-note);box-shadow:var(--shadow-note);transform:rotate(var(--tilt));
}
.voice__head{display:block;font-family:var(--font-hand);font-size:var(--text-lg);line-height:1.4;margin-bottom:var(--space-xs);}

/* ===== 3つの手順：左の点線に沿って、駅のように並べる ===== */
.line{list-style:none;position:relative;padding-left:3.25rem;}
.line::before{content:"";position:absolute;left:1.05rem;top:0.5rem;bottom:0.5rem;border-left:var(--dash);}
.station{position:relative;padding-block:var(--space-lg) var(--space-2xl);}
.station:last-child{padding-bottom:0;}
.station__dot{
    position:absolute;left:-3.25rem;top:var(--space-lg);
    display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;
    background:var(--color-accent);color:var(--color-accent-ink);
    font-family:var(--font-display);font-weight:700;
}
.station__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:center;}
.station__text h3{font-size:var(--text-lg);}
.station__text > p{margin-top:var(--space-md);color:var(--color-ink-2);}
.station__list{list-style:none;margin-top:var(--space-lg);display:grid;gap:var(--space-xs);}
.station__list li{position:relative;padding-left:1.25rem;font-size:var(--text-sm);line-height:1.75;}
.station__list li::before{
    content:"";position:absolute;left:0;top:0.72em;width:0.6rem;border-top:2px solid var(--color-accent);border-radius:2px;
}
.board{
    margin:0;padding:var(--space-md);background:var(--color-paper-3);
    border:1px solid var(--color-rule);border-radius:var(--radius-card);
}
.board svg{display:block;width:100%;height:auto;}
.board__cap{margin-top:var(--space-xs);font-family:var(--font-hand);font-size:var(--text-sm);color:var(--color-ink-2);text-align:center;}

/* 図の中の部品（アプリの図と同じ組み立てを、紙と付箋の色で描く） */
.sw-lane{fill:var(--color-paper-2);}
.sw-lane-alt{fill:var(--color-paper);}
.sw-head{font-family:var(--font-display);font-size:12px;font-weight:700;fill:var(--color-ink-2);}
.sw-box{fill:var(--color-paper-3);stroke:var(--color-rule-strong);stroke-width:1.2;}
.sw-box-check{fill:var(--color-note);stroke:var(--color-note-edge);stroke-width:1.2;}
.sw-txt{font-family:var(--font-body);font-size:11px;fill:var(--color-ink);}
.sw-box-check + .sw-txt{fill:var(--color-note-ink);}
.sw-no{font-family:var(--font-display);font-size:9.5px;font-weight:700;fill:var(--color-muted);}
.sw-memo{font-family:var(--font-hand);font-size:12.5px;fill:var(--color-ink-2);}
.sw-wire{fill:none;stroke:var(--color-ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.sw-ng{fill:none;stroke:var(--color-ng);stroke-width:1.8;stroke-dasharray:5 4;stroke-linecap:round;}
.sw-arrow{fill:var(--color-ink-2);}
.sw-arrow-ng{fill:var(--color-ng);}
.sw-nglbl{font-family:var(--font-hand);font-size:12.5px;fill:var(--color-ng);}
.sw-oklbl{font-family:var(--font-hand);font-size:12.5px;fill:var(--color-ok);}
.sw-badge{fill:var(--color-ng);}
.sw-badge-txt{font-family:var(--font-display);font-size:10px;font-weight:700;fill:var(--color-paper-3);}
.sw-rule{stroke:var(--color-rule);stroke-width:1;}

/* ===== 現場で使うとき：2枚のカード ===== */
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
.card{
    padding:var(--space-xl) var(--space-lg);background:var(--color-paper-3);
    border:1px solid var(--color-rule);border-radius:var(--radius-card);
}
.card h3{font-size:var(--text-lg);}
.card p{margin-top:var(--space-md);color:var(--color-ink-2);}
.codebox{
    display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);
    margin-top:var(--space-lg);
}
.codebox__code{
    padding:var(--space-xs) var(--space-md);background:var(--color-note);color:var(--color-note-ink);
    border-radius:var(--radius-note);box-shadow:var(--shadow-note);transform:rotate(-1deg);
    font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:0.22em;
    font-variant-numeric:tabular-nums;
}
.codebox__lbl{font-size:var(--text-sm);color:var(--color-muted);}

/* ===== この先：線の続き ===== */
.road{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);}
.road__item{
    display:flex;flex-direction:column;gap:var(--space-xs);
    padding:var(--space-lg);background:var(--color-paper-3);
    border:2px dashed var(--color-rule-strong);border-radius:var(--radius-card);
}
.road__item--now{background:var(--color-note);color:var(--color-note-ink);border:0;box-shadow:var(--shadow-note);}
.road__item h3{font-size:var(--text-md);}
.road__item p{flex:1;font-size:var(--text-sm);line-height:1.8;color:var(--color-ink-2);}
.road__item--now p{color:var(--color-note-ink);}
.road__state{
    align-self:flex-start;padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-pill);
    font-size:12px;font-weight:700;background:var(--color-paper-2);color:var(--color-ink-2);
}
.road__state--now{background:var(--color-ok-soft);color:var(--color-ok);}
.road__prod{padding-top:var(--space-xs);border-top:1px dashed var(--color-rule-strong);font-size:12.5px;font-weight:700;color:var(--color-ink-2);}
.road__item--now .road__prod{color:var(--color-note-ink);border-top-color:var(--color-note-edge);}
.road__prod--ext{color:var(--color-accent);}
.road__loop{margin-top:var(--space-md);font-family:var(--font-hand);font-size:var(--text-md);color:var(--color-ng);}
.road__act{margin-top:var(--space-xl);}

/* ===== 料金：3枚のカード（表にしない。部品名は app.css とぶつからない plan__ で始める）===== */
.plans{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl) var(--space-lg);align-items:stretch;}
.plan{
    position:relative;display:flex;flex-direction:column;
    padding:var(--space-xl) var(--space-lg) var(--space-lg);background:var(--color-paper-3);
    border:1px solid var(--color-rule);border-radius:var(--radius-card);
}
.plan--pick{border:2px solid var(--color-accent);box-shadow:var(--shadow-note);}
/* おすすめの目印：テープで留めた付箋 */
.plan__tape{
    position:absolute;top:-0.9rem;left:50%;transform:translateX(-50%) rotate(-3deg);
    padding:var(--space-3xs) var(--space-md);background:var(--color-note);color:var(--color-note-ink);
    border-radius:4px;box-shadow:var(--shadow-note);
    font-family:var(--font-hand);font-size:var(--text-md);white-space:nowrap;
}
.plan__name{font-size:var(--text-lg);}
.plan__for{margin-top:var(--space-2xs);font-size:var(--text-sm);color:var(--color-ink-2);}
.plan__price{
    margin-top:var(--space-md);font-family:var(--font-display);font-weight:700;
    font-size:clamp(1.9rem, 2vw + 1.2rem, 2.4rem);line-height:1.2;font-variant-numeric:tabular-nums;
}
.plan__price small{display:block;margin-top:var(--space-2xs);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--color-ink-2);}
.plan__spec{margin:var(--space-lg) 0 0;display:grid;}
.plan__spec div{display:flex;justify-content:space-between;gap:var(--space-md);padding-block:var(--space-sm);border-top:1px dashed var(--color-rule);}
.plan__spec dt{flex:none;white-space:nowrap;font-size:var(--text-sm);color:var(--color-ink-2);}
.plan__spec dd{margin:0;text-align:right;font-size:var(--text-sm);font-weight:500;word-break:auto-phrase;}
.plans__more{margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--color-ink-2);}

/* ===== よくある質問 ===== */
.faq{max-width:48em;border-top:1px solid var(--color-rule);}
.faq details{border-bottom:1px solid var(--color-rule);}
.faq summary{
    display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);
    min-height:56px;padding-block:var(--space-md);cursor:pointer;list-style:none;
    font-family:var(--font-display);font-weight:700;font-size:var(--text-md);line-height:1.5;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
    content:"+";flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
    border:1.5px solid var(--color-ink-2);color:var(--color-ink-2);font-family:var(--font-body);font-weight:400;
    transition:transform var(--dur-short) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{padding-bottom:var(--space-lg);color:var(--color-ink-2);}

/* ===== はじめる ===== */
.start{padding-block:var(--space-2xl) var(--space-3xl);}
.start__grid{
    display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:center;
    padding:var(--space-xl) var(--space-lg);background:var(--color-accent-soft);
    border-radius:calc(var(--radius-card) + 4px);
}
.start h2{font-size:var(--text-xl);}
.start p{margin-top:var(--space-md);color:var(--color-ink-2);}
.startform{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);}
.startform .lpbtn{width:100%;}
.start__hint{font-size:var(--text-sm);}

/* 入力欄（はじめる・問い合わせで共通） */
.fl{display:block;margin-bottom:var(--space-xs);font-size:var(--text-sm);font-weight:700;}
.inp{
    width:100%;min-height:52px;padding:0 var(--space-md);
    background:var(--color-paper-3);color:var(--color-ink);
    border:1.5px solid var(--color-rule-strong);border-radius:var(--radius-input);
    font:inherit;font-size:var(--text-base);
}
.inp::placeholder{color:var(--color-muted);}
.inp:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent);}
.inp[aria-invalid="true"]{border-color:var(--color-ng);}

/* ===== Ft5 フッター：ひとこと大きく締める ===== */
.foot{padding-block:var(--space-2xl) var(--space-xl);border-top:var(--dash);}
.foot__line{word-break:auto-phrase;text-wrap:balance;font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem, 4vw + 0.6rem, 2.75rem);line-height:1.35;max-width:22em;}
.foot__meta{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);
    margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule);
}
.foot__name{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:700;}
.foot__tag{font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--color-ink-2);}
.foot__links{display:flex;flex-wrap:wrap;gap:0 var(--space-lg);}
.lp .foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-ink);text-decoration:none;font-size:var(--text-sm);white-space:nowrap;}
.lp .foot__links a:hover{color:var(--color-accent);text-decoration:underline;}
.foot__fine{margin-top:var(--space-md);font-size:12.5px;color:var(--color-muted);}

/* ===== 問い合わせフォーム ===== */
.contact{padding-block:calc(var(--space-3xl) + var(--space-md)) var(--space-2xl);}
.contact h1{font-size:var(--text-xl);}
.cform{
    display:grid;gap:var(--space-lg);max-width:38em;
    padding:var(--space-xl) var(--space-lg);background:var(--color-paper-3);
    border:1px solid var(--color-rule);border-radius:var(--radius-card);
}
.cform textarea.inp{min-height:12em;padding:var(--space-sm) var(--space-md);line-height:1.75;resize:vertical;}
.cform select.inp{appearance:auto;}
.cform__req{margin-left:var(--space-2xs);font-size:11px;font-weight:700;color:var(--color-ng);}
.cform__err{margin-top:var(--space-2xs);font-size:13px;color:var(--color-ng);}
.cform__hint{margin-top:var(--space-2xs);font-size:12.5px;color:var(--color-ink-2);}
.cform__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.cform__done{
    max-width:38em;padding:var(--space-xl) var(--space-lg);background:var(--color-ok-soft);
    border-radius:var(--radius-card);
}
.cform__done h2{font-size:var(--text-lg);}
.cform__done p{margin-top:var(--space-sm);}
.cform__alert{max-width:38em;margin-bottom:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-input);border:1.5px solid var(--color-ng);color:var(--color-ng);font-size:var(--text-sm);}

/* ===== 40rem 以上：タブレット ===== */
@media (min-width:40rem){
    .lp .chip__link{display:inline-flex;}
    .chip--acts{padding-left:var(--space-md);}
    .lp a.chip--brand{padding-inline:var(--space-md);font-size:var(--text-base);}
    .chip__long{display:inline;}
    .map{padding:var(--space-xl) var(--space-lg) var(--space-lg);}
    /* 3枚ずつ2段。段の中は横の点線でつなぎ、段の終わりはつながない */
    .map__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl) var(--space-lg);}
    .map__node:not(:last-child)::after{
        left:100%;top:50%;width:var(--space-lg);height:0;border-left:0;border-top:var(--dash);
    }
    .map__node:nth-child(3n)::after{display:none;}
    .road{grid-template-columns:repeat(2,minmax(0,1fr));}
    .startform{grid-template-columns:minmax(0,1fr) auto;}
    .startform .lpbtn{width:auto;}
    .sec{padding-block:var(--space-3xl);}
}

/* ===== 56rem 以上 ===== */
@media (min-width:56rem){
    .plans{grid-template-columns:repeat(3,minmax(0,1fr));}
    .voices{grid-template-columns:repeat(3,minmax(0,1fr));}
    .field{grid-template-columns:repeat(2,minmax(0,1fr));}
    .start__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--space-2xl) var(--space-xl);}
}

/* ===== 64rem 以上：パソコン ===== */
@media (min-width:64rem){
    .hero{padding-top:calc(var(--space-3xl) + var(--space-xl));}
    .road{grid-template-columns:repeat(4,minmax(0,1fr));}
    .station__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-2xl);}
    .line{padding-left:4rem;}
    .station__dot{left:-4rem;}
}

/* ===== 76rem 以上：広い画面。地図の6枚を1列に並べ、線で左から右へつなぐ ===== */
@media (min-width:76rem){
    .map__row{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-lg);}
    .map__node:nth-child(3n)::after{display:block;}
    .map__node:last-child::after{display:none;}
    .lp .map__node a{grid-template-columns:1fr;grid-template-rows:auto;row-gap:var(--space-2xs);min-height:132px;align-content:start;}
    .map__no{grid-row:auto;}
}

/* 動きを減らす設定のときは、付箋を最初から見せ、傾きも浮きもやめる */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .map__node{animation:none;}
    .lpbtn,.lp .map__node a,.faq summary::after{transition:none;}
    .lpbtn:hover,.lp .map__node a:hover{transform:none;}
}

/* ===== 法的なページ（利用規約・プライバシーポリシー・特定商取引法）===== */
.legal{max-width:46rem;}
.legal__title{font-size:var(--text-2xl, 1.75rem);margin:0 0 var(--space-md);}
.legal h2{font-size:1.15rem;margin:var(--space-xl) 0 var(--space-xs);padding-top:var(--space-xs);border-top:1px solid var(--color-rule-2);}
.legal p,.legal li{line-height:1.9;}
.legal ul,.legal ol{padding-left:1.4em;}
.legal__draft{border:2px dashed var(--color-note-edge);background:var(--color-note);color:var(--color-note-ink);padding:var(--space-sm) var(--space-md);border-radius:6px;font-weight:700;}
.legal__date,.legal__note{color:var(--color-muted);font-size:.9rem;margin-top:var(--space-xl);}
.legal__table{width:100%;border-collapse:collapse;margin:var(--space-sm) 0;}
.legal__table th,.legal__table td{border:1px solid var(--color-rule);padding:var(--space-xs) var(--space-sm);text-align:left;vertical-align:top;line-height:1.8;}
.legal__table thead th,.legal__table--spec th{background:var(--color-paper-2);white-space:nowrap;}
.legal__table--spec th{width:11em;}