/* lp_chill.html「3つのチェックゲート」（#safe）のスタイル。
 *
 * lp_chill.css の**あとに**読む（後勝ちで、このセクションだけを上書きする）。
 * 別ファイルにしてあるのは lp_chill.css が上限いっぱい（1,929行）だからで、
 * 読み込み順そのものが仕様。<link> の並びを変えないこと。
 *
 * ■ 色の役割
 *   段階が進んだことを、番号だけでなく色でも分かるようにしている。
 *   ただし**色だけで意味を伝えない**。状態には必ずアイコンと文字を添える
 *   （.gstate は「アイコン＋見出し＋短いラベル」の3点セットで1つ）。
 *
 *     CHECK 01 = 水色 / CHECK 02 = 黄色 / CHECK 03 = 明るい緑
 *     通過 = 緑 / 撮り直し = 黄 / 警告・重複候補 = オレンジ〜赤 / 税理士確認済み = ゴールド
 *
 * ■ 動き
 *   演出はすべて装飾レイヤー（.conveyor は aria-hidden、.scan-line は空要素）。
 *   prefers-reduced-motion: reduce と、JSが動かない場合の両方で、
 *   3つのチェックの中身がそのまま読める状態を既定にしている。
 */

.gate-sec {
    /* 追従CTAの実高さ（帯 10px + ボタン 48px + 注記 20px + 10px + safe-area ＝ 実測 107px）に
       余白を足して、最下部の運営者情報・リンクがCTAの下へ潜らないようにする。
       env() はiOSのホームバー分。PC（min-width:900px）はCTAが中央の帯になるが、
       高さは変わらないので同じ計算でよい。 */
    --float-cta-h: 108px;
    --gate: #83dcff;
    padding-bottom: calc(var(--float-cta-h) + 56px + env(safe-area-inset-bottom));
}

/* 演出中は追従CTAを小さくして、ゲートのデモ画面にかぶる面積を減らす。
   消してしまうと「今すぐ始める」への導線が丸ごと無くなるので、押せる大きさは残す。 */
.float-cta.gate-mode { padding-bottom: calc(6px + env(safe-area-inset-bottom)); padding-top: 6px; opacity: .92; }
.float-cta.gate-mode a { font-size: 13.5px; padding: 10px; }
.float-cta.gate-mode .fc-note { display: none; }
@media (prefers-reduced-motion: reduce) {
    .float-cta.gate-mode { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); opacity: 1; }
    .float-cta.gate-mode a { font-size: 16px; padding: 14px; }
    .float-cta.gate-mode .fc-note { display: block; }
}

/* =================== 見出し・導入 =================== */
.gate-hl {
    color: #dfff55;
    text-decoration: underline;
    text-decoration-thickness: .16em;
    text-underline-offset: .14em;
}
/* 見出しの下線はこの1本にする（lp_chill.css の .sec-title::after と二重に引かない）。 */
.gate-intro .sec-title::after { display: none; }
.gate-intro .sec-lead { margin-top: 16px; color: #d8e9df; line-height: 1.9; }
.gate-manifesto {
    display: inline-block; margin-top: 18px; padding: 11px 20px;
    border: 1px dashed #dfff55; border-radius: 14px;
    color: #fff; font-weight: 900; line-height: 1.7;
}

/* =================== 全体像（ゲートの地図） =================== */
.gate-map {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 1000px; margin: 32px auto 0;
}
.gate-map li {
    flex: 1 1 auto; padding: 9px 13px; border-radius: 12px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
    color: #eaf5ee; font-size: 12.5px; font-weight: 700; line-height: 1.5;
}
@media (min-width: 860px) { .gate-map li { flex: 1 1 0; padding: 11px 14px; } }
.gate-map .gm-n {
    display: block; font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 10px; letter-spacing: .1em; color: #9fe0b1;
}
.gate-map li em { display: inline-block; margin-left: 6px; font-style: normal; font-size: 10.5px; color: #f0d489; }
.gate-map .gm-edge { background: rgba(255, 255, 255, .03); color: #b3c9bd; }
.gate-map li[data-gate-map="1"] { border-color: #83dcff; }
.gate-map li[data-gate-map="2"] { border-color: #ffe15a; }
.gate-map li[data-gate-map="3"] { border-color: #9aee87; }
.gate-map li.is-current { background: rgba(255, 255, 255, .16); }

/* =================== ベルトコンベア＋ゲート本体 =================== */
.gate-journey { max-width: 1060px; margin: 32px auto 0; }
@media (min-width: 900px) {
    .gate-journey {
        display: grid; grid-template-columns: 118px minmax(0, 1fr);
        gap: clamp(20px, 2.6vw, 34px);
    }
}

.conveyor {
    position: relative; display: none;
    border: 2px dashed rgba(255, 255, 255, .25); border-radius: 100px;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 18px, rgba(0, 0, 0, .06) 18px 36px);
    color: #dfff55; font: 700 10px 'Roboto Mono', ui-monospace, monospace; letter-spacing: .1em;
}
@media (min-width: 900px) {
    /* PCは横並びなので、レシートが縦に流れていく1本のレーンにする。 */
    .conveyor {
        display: flex; flex-direction: column; align-items: center; justify-content: space-between;
        position: sticky; top: 110px; align-self: start;
        height: 62vh; min-height: 420px; padding: 18px 6px;
    }
}
.cv-cap { flex: none; }
.moving-receipt {
    width: 96px; padding: 14px 8px; background: #fffdf4; color: #173d31;
    text-align: center; border-radius: 5px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
    font-size: 11px; transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.moving-receipt b { font-family: 'Roboto Mono', ui-monospace, monospace; letter-spacing: .12em; }
.moving-receipt small { display: block; margin-top: 10px; padding-top: 10px; border-top: 2px dashed #b8b8aa; font-size: 9.5px; line-height: 1.8; }
.cv-goat { width: 50px; height: auto; }
/* ゲートに入ると、その色に光ってから次へ進む（案内役のヤギはレーンの下で見ている）。 */
.gate-journey[data-current="1"] .moving-receipt { transform: translateY(-96px); box-shadow: 0 0 30px #83dcff; }
.gate-journey[data-current="2"] .moving-receipt { transform: translateY(0); box-shadow: 0 0 30px #ffe15a; }
.gate-journey[data-current="3"] .moving-receipt { transform: translateY(96px); box-shadow: 0 0 30px #d2ac32; }

.gate-list { list-style: none; display: grid; gap: 26px; }
@media (min-width: 900px) { .gate-list { gap: 36px; } }

.check-gate {
    --gate: #83dcff;
    position: relative; padding: clamp(18px, 2.6vw, 30px);
    border: 2px solid var(--gate); border-radius: 24px;
    background: rgba(249, 255, 252, .96); color: #12372c;
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--gate) 55%, transparent);
}
.gate-two { --gate: #ffe15a; }
.gate-three { --gate: #9aee87; }

/* PCでは「読む列（gate-say）」と「見る列（gate-show）」を横に並べる。
   縦積みのままだと1ゲートで画面1つ分を超えてしまい、3つを順に追う前に飽きる。
   スマホでは上下に積む（宣言しないので既定のブロック並び）。 */
@media (min-width: 900px) {
    .check-gate { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 26px; align-items: start; }
}
.gate-show { display: grid; gap: 12px; }

/* JSが動いているときだけ、見えたゲートを手前に出す演出を有効にする。
   `gates-enhanced` が付かない＝JS無効なら、3枚とも最初から等しく読める。 */
.gates-enhanced .check-gate { opacity: .74; transition: opacity .4s, transform .4s; }
.gates-enhanced .check-gate.is-active { opacity: 1; transform: translateY(-4px); }

.gate-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; }
.gate-label b {
    padding: 7px 12px; border-radius: 999px; background: var(--gate); color: #12372c;
    font-family: 'Roboto Mono', ui-monospace, monospace; font-weight: 700; letter-spacing: .08em;
}
.gate-label span { font-weight: 900; color: #2c5545; }
.gate-plan {
    margin-left: auto; padding: 7px 11px; border-radius: 8px;
    background: #174c39; color: #ffe9a8; font-style: normal; font-weight: 900; font-size: 11.5px;
}
.check-gate h3 { margin: 14px 0 10px; font-size: clamp(22px, 2.5vw, 30px); font-weight: 900; line-height: 1.4; }
.gate-text { font-size: 13.5px; line-height: 1.85; color: #2c5545; }
.gate-copy {
    margin: 14px 0; padding-left: 13px; border-left: 5px solid var(--gate);
    font-size: clamp(15px, 1.9vw, 17px); font-weight: 900; line-height: 1.6;
}
.gate-note {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: #eef4ef; font-size: 12.5px; line-height: 1.85;
}

/* --- 展開して読む詳細（キーボードでも開閉できる素の <details>） --- */
.gate-more { margin-top: 12px; border-top: 1px dashed #9baca5; padding-top: 4px; }
.gate-more summary {
    display: flex; align-items: center; min-height: 44px;
    cursor: pointer; font-size: 13px; font-weight: 900; color: #176b45;
}
.gate-more summary::marker { color: var(--gate); }
.gate-more p { padding: 4px 0 12px; font-size: 12.5px; line-height: 1.95; color: #2c5545; }

/* =================== デモ画面（各ゲートのモック） =================== */
.gate-demo {
    position: relative; margin-top: 14px; padding: 14px; border-radius: 18px;
    background: #e8eee9; display: grid; gap: 10px;
}
@media (min-width: 900px) {
    /* CHECK 03 の①〜⑤は、この幅では5列にすると1列が70pxを切って読めない。 */
    .final-flow { grid-template-columns: 1fr 1fr 1fr; }
    .final-flow li { border-right: 1px solid #e2e6e1; border-bottom: 1px solid #e2e6e1; }
    .final-flow li:nth-child(3n) { border-right: 0; }
    .final-flow li:nth-last-child(-n+2) { border-bottom: 0; }
    /* ⑤で右端まで埋める（3列だと6つめのマスが空いて、抜けたように見える）。 */
    .final-flow .ff-last { grid-column: 2 / -1; border-right: 0; }
}
.demo-cap { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 900; color: #3c6152; }
.demo-ic { font-size: 15px; }

.receipt-stack { position: relative; display: flex; justify-content: center; padding: 4px 0; }
.receipt-stack i {
    width: 86px; height: 100px; margin: 0 -4px; padding: 12px 6px;
    background: #fff; border: 1px solid #bbb; border-radius: 3px;
    color: #555; font: 700 10px 'Roboto Mono', ui-monospace, monospace; font-style: normal;
    line-height: 1.6; transform: rotate(-5deg);
}
.receipt-stack i:nth-child(2) { transform: rotate(4deg); }
/* 読み取れなかった1枚。暗さそのものと、読めなかった箇所の黄色マーカーで示す
   （色だけに頼らないよう、本文側にも理由をそのまま書いてある）。 */
.receipt-stack i.unreadable { position: relative; filter: brightness(.5); transform: rotate(-2deg); }
.receipt-stack i.unreadable::after {
    content: ''; position: absolute; left: 8%; right: 8%; bottom: 26%; height: 14px;
    background: rgba(255, 225, 90, .72); border-radius: 2px;
}
.scan-line {
    position: absolute; left: 6%; right: 6%; top: 0; height: 4px;
    background: #62d9ff; box-shadow: 0 0 12px #62d9ff; opacity: 0; border-radius: 4px;
}
.gates-enhanced .is-seen .scan-line { animation: gateScan 2.2s ease-in-out both; }

.demo-result,
.duplicate-alert,
.ai-card,
.line-correction { padding: 13px; border-radius: 12px; background: #fff; font-size: 12.5px; line-height: 1.7; }

/* 状態の1行。色は補助で、アイコン（gs-ic）と短いラベル（em）が本体。 */
.gstate { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-weight: 900; }
.gstate + .demo-rows,
.gstate + .demo-notes,
.gstate + .demo-dl { margin-top: 6px; }
.gstate em {
    font-style: normal; font-size: 10.5px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px; background: #eceee9; color: #47554e;
}
.gstate--ok { color: #197b43; }
.gstate--ok em { background: #dff4e5; color: #14663a; }
.gstate--warn { color: #92610a; }
.gstate--warn em { background: #fff2b5; color: #7a5100; }
.gstate--stop { color: #b34010; }
.gstate--stop em { background: #ffe0d9; color: #96350d; }
.gstate--sign { color: #8d6710; }
.gstate--sign em { background: #fbeecb; color: #7a5806; }

.demo-rows,
.demo-notes { list-style: none; display: grid; gap: 5px; }
.demo-rows li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e2e6e1; }
.demo-rows li b { margin-left: auto; font-family: 'Roboto Mono', ui-monospace, monospace; }
.demo-rows li em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #eef4ef; color: #3c6152; }
.demo-notes li { padding-left: 16px; position: relative; color: #55635c; }
.demo-notes li::before { content: '・'; position: absolute; left: 0; }

.duplicate-alert { border: 2px solid #f17835; background: #fff5ee; }
.da-foot { margin-top: 8px; font-weight: 900; color: #b34010; }
/* 重複候補では、ゲートそのものが赤く光って止まる。 */
.gates-enhanced .gate-one.is-active { box-shadow: 8px 8px 0 rgba(241, 120, 53, .5); }

.demo-dl { display: grid; gap: 4px; }
.demo-dl > div { display: grid; grid-template-columns: 5.6em 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #e2e6e1; }
.demo-dl dt { color: #6d7a73; font-size: 11.5px; }
.demo-dl dd { font-weight: 700; }

.ai-conf { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ai-conf span { font-family: 'Roboto Mono', ui-monospace, monospace; font-weight: 700; }
.ai-conf small { color: #6d7a73; font-size: 10.5px; line-height: 1.7; }

.legend-cap { font-size: 11.5px; line-height: 1.7; color: #47554e; }
.status-legend { list-style: none; display: grid; gap: 6px; }
.status-legend li {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 10px; font-size: 12px; font-weight: 700;
}
.status-legend b { font-size: 12.5px; }
.status-legend em { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .65); font-style: normal; font-size: 10.5px; font-weight: 700; }
.status-legend .is-ok { background: #dff4e5; color: #14663a; }
.status-legend .is-warn { background: #fff2b5; color: #7a5100; }
.status-legend .is-stop { background: #ffe0d9; color: #96350d; }

.line-correction { background: #dff9e7; display: grid; gap: 10px; }
.lc-me { justify-self: end; max-width: 88%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: #06c755; color: #fff; font-weight: 700; }
.lc-ai { padding: 10px 13px; border-radius: 4px 16px 16px 16px; background: #fff; }
.gates-enhanced .lc-me,
.gates-enhanced .lc-ai { opacity: 0; }
.gates-enhanced .gate-two.is-seen .lc-me { animation: gateReveal .45s .5s both; }
.gates-enhanced .gate-two.is-seen .lc-ai { animation: gateReveal .45s 1.3s both; }

/* --- CHECK 03：1冊のファイルと、税理士のスタンプ --- */
.final-flow { list-style: none; display: grid; margin-top: 14px; border: 1px solid #b7c8bd; border-radius: 14px; overflow: hidden; }
.final-flow li { padding: 10px 12px; background: #fff; font-size: 11.5px; line-height: 1.6; border-bottom: 1px solid #e2e6e1; }
.final-flow li:last-child { border-bottom: 0; }
.final-flow .ff-last { background: #e6f9df; }
.final-flow b { display: block; margin-bottom: 4px; font-size: 13px; }

.tax-file { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px; background: #fff; }
.tf-name { font-weight: 900; line-height: 1.6; }
.tf-stamp {
    /* スタンプを押すのは税理士。ヤギ（案内役）は押さない。 */
    margin-left: auto; padding: 12px 10px; border: 3px double #b88918; border-radius: 50%;
    color: #8d6710; font-size: 11px; font-weight: 900; line-height: 1.35; text-align: center;
    transform: rotate(-8deg);
}
.gates-enhanced .gate-three .tf-stamp { opacity: 0; }
.gates-enhanced .gate-three.is-seen .tf-stamp { animation: gateStamp .5s .7s both; }

/* =================== プランの違い =================== */
.plan-paths { max-width: 900px; margin: 40px auto 0; text-align: center; color: #fff; }
.plan-paths h3 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 900; margin-bottom: 18px; }
.plan-path-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .plan-path-grid { grid-template-columns: 1fr 1fr; } }
.plan-path-grid article { padding: 20px; border-radius: 20px; border-top: 8px solid #83dcff; background: #fff; color: #173d31; text-align: left; }
.plan-path-grid article.tax-plan { border-top-color: #d2ac32; }
.plan-path-grid b { display: block; font-size: 18px; margin-bottom: 12px; }
.plan-path-grid ol { list-style: none; display: grid; gap: 6px; counter-reset: pp; }
.plan-path-grid li { position: relative; padding: 5px 0 5px 26px; font-size: 13.5px; line-height: 1.65; counter-increment: pp; }
.plan-path-grid li::before {
    content: counter(pp); position: absolute; left: 0; top: 8px;
    width: 18px; height: 18px; border-radius: 50%; background: #e6efe9; color: #3c6152;
    font: 700 10px 'Roboto Mono', ui-monospace, monospace; display: grid; place-items: center;
}
.plan-path-grid .pp-last { font-weight: 900; }
.plan-path-grid .pp-last::before { background: #12372c; color: #fff; }
.plan-paths > small { display: block; margin-top: 14px; color: #d5e5dc; font-size: 12px; line-height: 1.8; }

/* =================== 信頼情報（データ／聞ける相手／運営者） ===================
 * もとは3枚を横に等分していたが、中身の量が違いすぎて（03の会社情報だけ倍近い）
 * 3枚とも高さがバラバラに見えていた。**中身の形に合わせて置き場所を分ける**。
 *   - 01と02は読みものなので、上の段に2枚。grid の stretch で同じ高さの箱になり、
 *     箱の中は縦の flex。最後の .tc-foot を margin-top:auto で下端へ寄せるので、
 *     終わりの線も揃う。頭は .tc-kicker → h4 → .tc-lead の行間を共通にして揃える。
 *   - 03は会社の身元（読むというより控えるもの）なので、下いっぱいの帯にする。
 * 高さを詰めるために字を小さくしない。読めなくなるほうが損。 */
.trust-area { max-width: 1100px; margin: 44px auto 0; }
.trust-head { max-width: 640px; margin: 0 auto 20px; text-align: center; }
.trust-head h3 { margin-top: 2px; font-size: clamp(20px, 2.8vw, 26px); font-weight: 900; line-height: 1.5; color: #fff; }
.trust-head p { margin-top: 10px; font-size: 13.5px; line-height: 1.9; color: #b9d3c6; }

/* PCは2列＋下の帯。01は縦に長く、02は横に広いほうが行数が減るので、幅の比を 1 : 1.2 にしている。
   3列に等分すると、01がスカスカで02がぎゅうぎゅうになった（幅を分けるほうが高さが揃う）。 */
.trust-grid { display: grid; gap: 14px; }
@media (min-width: 760px) {
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .tc--wide { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .trust-grid { grid-template-columns: 1fr 1.2fr; gap: 18px; } }

.trust-card {
    display: flex; flex-direction: column;
    padding: 22px 20px; border-radius: 18px;
    background: rgba(250, 255, 252, .95); color: #173d31;
    box-shadow: 0 14px 30px rgba(4, 26, 18, .18);
}
/* 01 / DATA の「番号」と「分類」。番号だけ大きくして、3枚の並び順を目で追えるようにする。 */
.tc-kicker { display: flex; align-items: center; gap: 8px; color: #36745d; }
.tc-kicker b { font: 900 20px 'Roboto Mono', ui-monospace, monospace; line-height: 1; color: #9dc3b1; }
.tc-kicker span { font: 700 10px 'Roboto Mono', ui-monospace, monospace; letter-spacing: .12em; }
.trust-card h4 { margin: 10px 0 0; font-size: 19px; font-weight: 900; line-height: 1.5; }
.tc-lead { margin-top: 10px; font-size: 12.5px; line-height: 1.85; color: #3c5b4f; }
.tc-lead b { color: #173d31; }

/* 足もと。3枚とも同じ位置に線が来るので、カードの終わりが揃って見える。 */
.tc-foot { margin-top: auto; padding-top: 14px; }
.tc-foot::before { content: ''; display: block; height: 1px; margin-bottom: 10px; background: #dfe9e3; }
.tc-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; line-height: 1.5; color: #176b45; font-size: 13px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.tc-link span { transition: transform .18s ease; }
.tc-link:hover span { transform: translateX(3px); }
.tc-inline { color: #176b45; font-weight: 900; text-decoration: underline; }
.tc-foot small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.8; color: #5b7a6d; }

/* ---- 01 / DATA：確認できた5つのこと ----
   隣の02のほうが背が高いので、余った分はカード下部の空白にせず、
   5項目の間隔に配る（flex:1 ＋ align-content:space-between）。 */
.tc-sub { margin-top: 14px; font-size: 12px; font-weight: 900; color: #36745d; }
.tm-list { margin-top: 8px; display: grid; align-content: start; gap: 10px; font-size: 12px; line-height: 1.8; }
@media (min-width: 760px) { .tm-list { flex: 1; align-content: space-between; } }
.tm-list > div { display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid #cfe3d8; }
.tm-list dt { font-weight: 900; color: #36745d; }
.tm-list dd { margin: 0; color: #466054; }

/* ---- 02 / SUPPORT：聞きたいこと → 答える人 ----
   利用者の口ぐせ（.ar-q）を先に、答える相手（.ar-a）をその下に置く。
   相手はアイコン・名前・役割の3点セットで1つ。**絵文字だけで意味を伝えない**。 */
.ask-routes { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.ask-routes li { padding: 11px 12px 12px; border-radius: 13px; background: #fff; border: 1px solid #e2ece6; }
.ar-q {
    position: relative; padding-left: 20px;
    font-size: 13px; font-weight: 900; line-height: 1.6; color: #173d31;
}
.ar-q::before {
    content: '“'; position: absolute; left: 0; top: -2px;
    font: 900 20px/1 'Zen Maru Gothic', sans-serif; color: #9dc3b1;
}
.ar-a { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding-top: 8px; border-top: 1px dashed #e2ece6; }
.ar-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9f4ee; font-size: 14px; font-style: normal; }
.ar-a b { flex: none; font-size: 12.5px; font-weight: 900; color: #176b45; }
.ar-a span { font-size: 11.5px; line-height: 1.55; color: #5b7a6d; }
/* 横幅があるときだけ「聞きたいこと｜答える人」を1行に並べる。
   縦に積むと4件で350pxを超え、隣の01カードが間延びする。
   ただし900px台では1列あたりが狭く、役割の説明が折り返すので 1024px から。 */
@media (min-width: 1024px) {
    .ask-routes li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 10px; padding: 9px 12px; }
    .ar-a { margin-top: 0; padding-top: 0; padding-left: 12px; border-top: 0; border-left: 1px dashed #dbe8e1; }
}
.ar-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #eef4f0; font-size: 11.5px; line-height: 1.85; color: #466054; }
.ar-note b { color: #173d31; }

/* ---- 03 / WHO WE ARE（下いっぱいの帯） ---- */
.who-list { margin-top: 12px; display: grid; gap: 7px; font-size: 12.5px; line-height: 1.7; }
.who-list > div { display: grid; gap: 1px; padding-bottom: 6px; border-bottom: 1px dashed #e2ece6; }
.who-list dt { font-weight: 900; font-size: 11px; color: #36745d; }
.who-list dd { margin: 0; }
.who-list dd small { display: block; color: #5b7a6d; font-size: 11px; }
.responsibility { margin-top: 12px; padding: 11px 12px; border-radius: 10px; background: #e8f2ec; font-size: 11.5px; line-height: 1.85; }
/* 幅が足りるところから、見出しと中身を左右に並べて行数を減らす。
   スマホでは詰めない（1項目1行のまま。リンクの当たり判定を44pxで残す）。 */
@media (min-width: 600px) {
    .who-list > div { grid-template-columns: 6.6em 1fr; gap: 3px 8px; align-items: baseline; }
}
/* PCは名乗り（左）と項目（右2列）を横に並べて、下いっぱいの帯にする。 */
@media (min-width: 900px) {
    .tc--wide { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; column-gap: 34px; align-items: start; }
    .tcw-lead { grid-column: 1; grid-row: 1 / span 2; }
    .tcw-lead .responsibility { margin-top: 14px; }
    .who-list { grid-column: 2; grid-row: 1; margin-top: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; row-gap: 8px; }
    .tc--wide .tc-foot { grid-column: 2; grid-row: 2; margin-top: 16px; }
}
/* 3本のリンクを縦に積むと、それだけで130px以上になっていた。
   横に流して折り返す（1つずつが44pxの高さを持つので、指でも押せる）。 */
.who-links { display: flex; flex-wrap: wrap; gap: 6px; }
.who-links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    border: 1px solid #cfe3d8; border-radius: 999px; background: #f4faf6;
    font-size: 11.5px; font-weight: 900; line-height: 1.4; color: #176b45; text-decoration: none;
}
.who-links a:hover { background: #e6f3ec; }
/* 縦持ちのスマホでは、3本を縦に積んで押しやすくする（横に3つ並べると1つが100px未満になる）。 */
@media (max-width: 599px) { .who-links a { flex: 1 1 100%; justify-content: center; } }

/* =================== 動き =================== */
@keyframes gateScan {
    0% { top: 0; opacity: 0; }
    12% { opacity: 1; }
    70% { top: calc(100% - 4px); opacity: 1; }
    100% { top: calc(100% - 4px); opacity: 0; }
}
@keyframes gateReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes gateStamp {
    from { opacity: 0; transform: rotate(-40deg) scale(2.2); }
    to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* =================== スマホ =================== */
@media (max-width: 899px) {
    /* 横のベルトコンベアは出さない。上から下へ1列で流れる縦型のゲートにする
       （横スクロールを作らないため、はみ出す要素をここで全部畳む）。 */
    .gate-sec { padding-bottom: calc(var(--float-cta-h) + 64px + env(safe-area-inset-bottom)); }
    .gate-journey { margin-top: 24px; }
    .gate-list { gap: 18px; }
    .check-gate { padding: 18px 15px; border-radius: 20px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--gate) 55%, transparent); }
    .gate-label { font-size: 11.5px; }
    .gate-plan { margin-left: 0; }
    .gate-demo { padding: 12px; gap: 9px; }
    /* デモの文字は、これ以上小さくしない（読めなくなる）。 */
    .demo-result,
    .duplicate-alert,
    .ai-card,
    .line-correction { font-size: 12.5px; }
    .demo-dl > div { grid-template-columns: 5em 1fr; }
    .receipt-stack i { width: 74px; height: 92px; font-size: 9.5px; }
    .trust-area { margin-top: 34px; }
    .trust-head { margin-bottom: 16px; text-align: left; }
    /* 運営者情報を横2列（項目そのものを2列に並べる）に詰めるのは900px以上だけ。
       ここでは1項目1行のまま。リンクは44px確保する。 */
    .trust-card { padding: 18px 16px; }
    .plan-paths { margin-top: 34px; }
    /* ①〜⑤は番号が振ってあるので、2列に畳んでも順番を見失わない。 */
    .final-flow { grid-template-columns: 1fr 1fr; }
    .final-flow li { border-right: 1px solid #e2e6e1; }
    .final-flow li:nth-child(2n) { border-right: 0; }
    .final-flow .ff-last { grid-column: 1 / -1; }
}

/* 動きを減らす設定では、演出を止めたうえで**中身は全部見える**ようにする。 */
@media (prefers-reduced-motion: reduce) {
    .moving-receipt,
    .check-gate,
    .scan-line,
    .lc-me,
    .lc-ai,
    .tf-stamp {
        animation: none !important;
        transition: none !important;
    }
    .gates-enhanced .check-gate { opacity: 1; transform: none; }
    .gates-enhanced .lc-me,
    .gates-enhanced .lc-ai,
    .gates-enhanced .gate-three .tf-stamp { opacity: 1; }
    .gates-enhanced .is-seen .scan-line { animation: none; }
    .scan-line { display: none; }
    .conveyor { position: static; height: auto; min-height: 0; }
}