/*
 * KnowKnow LP — 紙と朱 (DESIGN.md §5)
 * 色の値は :root だけに置く。値の正本は repo の design/paper-ink-tokens.json (tools/check_site.py が同じ値かを確かめる)。
 * 赤ペン (--ng) は「問題あり」だけ。朱 (--shu) は付箋・判子・上司の囲み・済だけ。青 (--blue) は操作だけ。
 * 例外は資料に質問の根拠の文の光 (--hl。アプリと同じ淡い青の面と紺の下線。導入のメリットの欄 3 と使い方の 4 番だけ)。字・枠・絵の線に青は使わない (DESIGN §5)。
 */
@font-face{font-family:"KK Gothic";font-style:normal;font-weight:400;font-display:swap;src:local("BIZ UDPGothic"),url("/assets/fonts/biz-udpgothic-400.woff2?v=20261107d") format("woff2")}
@font-face{font-family:"KK Gothic";font-style:normal;font-weight:700;font-display:swap;src:local("BIZ UDPGothic Bold"),url("/assets/fonts/biz-udpgothic-700.woff2?v=20261107d") format("woff2")}
@font-face{font-family:"KK Num";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/knowknow-numerals-700.woff2?v=20261107d") format("woff2");unicode-range:U+25,U+28-29,U+2B-3A,U+3D,U+D7,U+2212,U+301C,U+5186}
/* 判子の字だけの太字と、見出しの字だけの細字。細字は OS の明朝が無い端末でだけ読まれる (--f-title の順)。--f-head・--f-title を足す場所を増やしたら tools/subset_fonts.py の STAMP・TITLE も直す */
@font-face{font-family:"KK Mincho";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/biz-udpmincho-400.woff2?v=20261107d") format("woff2")}
@font-face{font-family:"KK Mincho";font-style:normal;font-weight:700;font-display:swap;src:local("BIZ UDPMincho Bold"),url("/assets/fonts/biz-udpmincho-700.woff2?v=20261107d") format("woff2")}

:root{
  color-scheme:light;
  --page:#F2F0EB;
  --desk:#E6E3DC;
  --paper:#FFFFFD;
  --surface:#FFFFFF;
  --sunk:#F6F5F1;
  --ink:#1A1D24;
  --ink-2:#4A4F58;
  --ink-3:#5E626A;
  --rule:#DAD6CE;
  --rule-doc:#9C988F;
  --rule-strong:#7A7F88;
  --navy:#0F2350;
  --blue:#145BFF;
  --blue-hover:#0F4BE0;
  --shu:#C94A0C;
  --shu-text:#B8430A;
  --fusen:#FEF0E6;
  --fusen-glue:#F9DCC8;
  --ng:#B7282E;
  --ng-tint:#FBEAEA;
  --rv-edge:#8A5A00;
  --rv-tint:#FDF3D6;
  --un:#6B6A67;
  --un-tint:#F0EFEC;
  --ok-tint:#E9ECF2;
  --on-blue:#FFFFFF;
  --hl:#145BFF38;
  --leader:#B9B5AC;
  --on-navy-muted:#AEBBD6;
  --clip-metal:#3A3F48;
  --e1:0 1px 2px rgba(15,35,80,.10),0 8px 24px rgba(15,35,80,.08);
  --e2:0 2px 4px rgba(15,35,80,.12),0 16px 40px rgba(15,35,80,.14);
  --shadow-1:rgba(15,35,80,.16);
  /* 動きの長さと曲線 (FE の paper-ink-design-system.md §7.1 と同じ値。DESIGN 決定 22) */
  --t-ui:120ms;
  --t-ui2:180ms;
  --t-settle:280ms;
  --t-draw-ng:520ms;
  --t-draw-rv:420ms;
  --t-draw-un:600ms;
  --t-draw-delay:250ms;
  --t-stagger:60ms;
  --t-stamp:240ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-pen:cubic-bezier(.45,.05,.3,1);
  --ease-stamp-drop:cubic-bezier(.55,0,1,.45);
  --ease-stamp-settle:cubic-bezier(0,.55,.45,1);
  --r:4px;
  --f-ui:"KK Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","YuGothic","Meiryo",sans-serif;
  --f-num:"KK Num","KK Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --f-doc:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP",serif;
  --f-head:"KK Mincho",var(--f-doc);
  --f-title:"BIZ UDPMincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","KK Mincho",serif;
}

/* ---------- 土台 ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.75;letter-spacing:.02em;overflow-wrap:break-word}
h1,h2,h3{margin:0;font-feature-settings:"palt";letter-spacing:.01em}
h1,h2,h3,p,li,dt,dd,summary,.btn{word-break:auto-phrase;line-break:strict;text-wrap:pretty}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-hover)}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.nw{white-space:nowrap}
@media (min-width:400px){.nw-sm{white-space:nowrap}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:8px;top:-64px;z-index:20;padding:8px 14px;background:var(--surface);border-radius:var(--r)}
.skip-link:focus{top:8px;box-shadow:var(--e1)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.g{display:inline-block;width:20px;height:20px;flex:none;overflow:visible;vertical-align:-4px}
.note{font-size:14px;line-height:1.7;color:var(--ink-2)}
[data-cfg]:empty{display:none}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r);border:1.5px solid transparent;font-weight:700;font-size:16px;line-height:1.35;text-align:center;text-decoration:none;cursor:pointer;transition:background-color 120ms}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--blue);color:var(--on-blue)}
.btn-1:hover{background:var(--blue-hover);color:var(--on-blue)}
.btn-2{background:var(--surface);color:var(--navy);border-color:var(--rule-strong)}
.btn-2:hover{background:var(--sunk);color:var(--navy)}
.btn[disabled]{background:var(--sunk);color:var(--ink-2);border-color:var(--rule);cursor:default}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.btn.lg{min-height:56px;padding:0 26px;font-size:17px}
.cta-2l{flex-direction:column;gap:0;line-height:1.3;padding-top:6px;padding-bottom:6px}
.cta-2l small{font-size:14px;font-weight:400;color:var(--ink-2)}

/* ---------- ヘッダーとフッター ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--page);border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:24px;min-height:64px;padding:10px 16px;max-width:1120px;margin:0 auto}
@media (min-width:768px){.header-inner{padding:10px 32px}}
.brand{display:block;flex:none}
.brand img{width:116px;height:auto}
.header-nav{display:none;margin-left:auto}
.header-nav ul{display:flex;gap:24px;font-size:15px}
.header-nav a{color:var(--ink);text-decoration:none}
.header-nav a:hover{color:var(--blue);text-decoration:underline}
.site-header .btn{margin-left:auto}
.back-link{margin-left:auto;font-size:15px;color:var(--ink-2)}
@media (min-width:880px){
  .header-nav{display:block}
  .site-header .btn{margin-left:0}
}
.site-footer{margin-top:0;padding:40px 0 32px;background:var(--surface);border-top:1px solid var(--rule);font-size:14px;color:var(--ink-2)}
.footer-inner{display:grid;gap:24px}
.footer-brand img{width:104px;height:auto;margin-bottom:10px}
.footer-links ul{display:grid;gap:6px}
.footer-links a{color:var(--ink-2)}
.footer-bottom{margin-top:24px}
@media (min-width:768px){
  .footer-inner{grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .footer-links ul{grid-template-columns:repeat(2,auto);gap:6px 40px}
}

/* ---------- 区域の頭: 小さなラベル (見出しだけを拾っても筋が通るように、どの区域も同じ型) ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;line-height:1.5;color:var(--navy);letter-spacing:.06em}
.eyebrow::before{content:"";flex:none;width:24px;height:1.5px;background:currentColor}

/* ---------- ① 最初の画面: 見出し・赤ペン 1 か所・青いボタンの 3 つだけ (DESIGN 決定 18) ---------- */
.hero-grid{display:grid;gap:36px;max-width:1262px;padding-top:36px;padding-bottom:56px}
.hero-text{min-width:0}
.hero .eyebrow{margin-bottom:14px}
.hero h1{font:400 clamp(26px,8.4vw,46px)/1.26 var(--f-title);letter-spacing:.02em}
.hero-sub{margin-top:18px;font-size:16px;line-height:1.9;color:var(--ink-2);max-width:25em}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.hero-link{font-size:15px;font-weight:700;color:var(--navy);text-underline-offset:4px}
.hero-link::after{content:" →"}
.hero-notes{margin-top:20px;font-size:13px;line-height:1.7;color:var(--ink-3)}
.hero-fig{margin:0;min-width:0}
.hero-doc picture,.hero-doc img{display:block;width:100%;height:auto}
.hero-card,.hero-lead,.hero-pen{display:none}
/* スマホ: 金額の列と 02 の項目を、机の地の帯に置く (赤ペンは絵に入っている) */
@media (max-width:767px){
  .hero-grid{padding-bottom:0}
  .hero-doc{margin:0 -16px;padding:20px 16px;background:var(--desk)}
  .hero-doc picture{max-width:480px;margin:0 auto}
}
/* 768px から: 紙の切れ端・チェック票の項目・引き出し線を、% で同じ箱に置く (JS で位置を測らない) */
@media (min-width:768px){
  .hero-fig{position:relative;max-width:680px;aspect-ratio:680/320}
  .hero-doc{position:absolute;left:0;top:0;width:92.35%;padding:14px;background:var(--paper);border-radius:2px;box-shadow:var(--e1)}
  .hero-doc-in{position:relative;display:block}
  .hero-pen{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
  .hero-card{position:absolute;right:0;top:50%;display:block;width:54%;height:auto;padding:8px 10px 10px;background:var(--surface);border-top:2px solid var(--ink);box-shadow:var(--e2)}
  .hero-lead{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
  .hero-lead path{fill:none;stroke:var(--ink-3);stroke-width:1}
  .hero-lead circle{fill:var(--ink-3)}
}
/* 1200px から 2 列。字の左の端はヘッダーと下の区域 (1120px の箱) にそろえ、絵だけ右へ 1262px の箱まで広げる (% は区域の幅) */
@media (min-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,460px) minmax(0,1fr);align-items:center;gap:48px;max-width:none;padding:96px max(32px,calc((100% - 1262px)/2 + 32px)) 112px max(32px,calc((100% - 1120px)/2 + 32px))}
  .hero h1{font-size:clamp(42px,3.3vw,48px);white-space:nowrap}
  .hero-sub{font-size:17px}
  .hero-ctas{margin-top:32px}
  .hero-notes{margin-top:24px}
  .hero-fig{max-width:none}
}
.hero-pen path{fill:none;stroke:var(--ng);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* 最初の画面の動き (読み込みで 1 回): 赤ペン → 引き出し線 → 札。絵が読めるまで site.js が .is-waiting で止める */

/* ---------- 節の共通 ---------- */
.sec{padding:64px 0;border-top:1px solid var(--rule)}
@media (min-width:768px){.sec{padding:96px 0}}
.sec h2{font:400 clamp(25px,5.6vw,34px)/1.4 var(--f-title);letter-spacing:.02em}
.eyebrow+h2{margin-top:14px;font-size:clamp(26px,3.2vw,40px)}
.sec-lead{margin-top:16px;max-width:30em;font-size:16.5px;line-height:1.85;color:var(--ink-2)}
.split{display:grid;gap:24px}
@media (min-width:880px){.split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px}}
.pc-br{display:none}
@media (min-width:880px){.pc-br{display:inline}}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.g-s{width:15px;height:15px;vertical-align:-2px}
.s-ng{--c:var(--ng)}
.s-rv{--c:var(--rv-edge)}
.s-un{--c:var(--un)}
.s-ok{--c:var(--navy)}
/* 手で描いた印の線 (× ○ ✓)。描く動きのために sprite でなくインラインの path で置く */
.gx path,.go path{fill:none;stroke:currentColor;stroke-linecap:round}
.gx path{stroke-width:2.7}
.go path{stroke-width:2.4}

/* 題材の線の絵 (DESIGN §5)。物の輪郭・罫・字の代わりの棒・引き出し線のクラスは、この 4 つと色の付いた線だけ */
.ln-obj{fill:var(--paper);stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ln-rule{fill:none;stroke:var(--rule-doc);stroke-width:1;vector-effect:non-scaling-stroke}
.ln-bar{fill:var(--rule)}
.ln-lead{fill:none;stroke:var(--navy);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.ln-dot{fill:var(--navy)}
.ln-ng{fill:none;stroke:var(--ng);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ln-shu{fill:none;stroke:var(--shu);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ln-hl{fill:var(--hl)}
.ln-ul{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round}
.ln-note{fill:var(--sunk);stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.ln-qbar{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.ln-mark{fill:var(--navy)}

/* 付箋 (朱の丸の番号と文) */
.fusen{position:relative;display:flex;align-items:flex-start;gap:10px;padding:14px 14px 14px 12px;background:var(--fusen);border-top:8px solid var(--fusen-glue);box-shadow:var(--e1);color:var(--ink);font-size:15px;line-height:1.6}
.fz-no{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--shu);color:var(--surface);font:700 13px/1 var(--f-num)}
/* 紙の部品 (画面の字を写した HTML) */
.pp{background:var(--surface);box-shadow:var(--e1);color:var(--ink)}

/* ---------- ② 導入のメリット: 回覧票の欄の形の様式 (出す人 → 上司 → 管理部門)。欄の頭に場面、足に使う機能 ---------- */
.sec-merit{padding:72px 0 80px;background:var(--desk);border-top:0}
@media (min-width:768px){.sec-merit{padding:120px 0 128px}}
.merit-form{margin-top:40px;background:var(--paper);border:1.5px solid var(--ink)}
.merit-col{display:grid;min-width:0}
.merit-col+.merit-col{border-top:1.5px solid var(--ink)}
.merit-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--sunk);border-bottom:1px solid var(--rule-doc)}
.merit-head b{font-size:15px;color:var(--navy)}
.merit-head span{font-size:13px;color:var(--ink-3);text-align:right}
.mfig{position:relative;width:calc(100% - 40px);max-width:320px;aspect-ratio:320/176;margin:24px auto 0}
.mfig>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mtag{position:absolute;font-size:12px;line-height:1.35;white-space:nowrap}
.mt-book{left:79%;top:31%;padding:0 3px;border:1px solid var(--rule-doc);background:var(--paper);font-size:10.5px;color:var(--ink-2);transform:translate(-50%,-50%) rotate(-6deg)}
.mt-ng{left:40%;top:69%;display:flex;align-items:center;gap:2px;padding:0 4px;background:var(--paper);color:var(--ng);font-size:13px;font-weight:700}
.mt-ng .g{width:15px;height:15px}
/* 書類の実物の字 (申請書の表の欄)。表の傾きに合わせる */
.mt-cell{font-size:10px;line-height:1.2;letter-spacing:0;color:var(--ink);transform:translate(-50%,-50%) rotate(1.5deg)}
.mt-c1{left:17.5%;top:58%;color:var(--ink-2)}
.mt-c3{left:48.1%;top:58%}
.mt-c2{left:49.4%;top:59.8%;transform:translate(-50%,-50%) rotate(-1deg)}
.mt-ref{right:0;top:2%;padding:1px 6px;border:1px solid var(--navy);background:var(--paper);color:var(--navy)}
.mt-quote{left:13.5%;top:14%;color:var(--ink-3);transform:rotate(-1deg)}
.mt-reason{left:14.5%;top:74.5%;font-size:11.5px;color:var(--ink-2);transform:rotate(-1deg)}
.fusen-mini{position:absolute;left:59%;top:62%;display:grid;place-items:center;width:18%;aspect-ratio:58/40;background:var(--fusen);border-top:6px solid var(--fusen-glue);box-shadow:var(--e1);transform:rotate(3deg)}
.fusen-mini b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--shu);color:var(--surface);font:700 11px/1 var(--f-num)}
.mt-ask{left:0;top:0;padding:3px 8px;border:1px solid var(--rule);background:var(--surface);font-size:12.5px;transform:rotate(-1.5deg)}
.mt-src{right:0;bottom:0;padding:2px 7px;border:1px solid var(--rule-strong);border-radius:3px;background:var(--surface);color:var(--ink-2)}
.merit-col h3{padding:22px 20px 0;font:400 clamp(22px,2vw,26px)/1.45 var(--f-title);letter-spacing:.02em}
.merit-text{padding:12px 20px 20px;font-size:15.5px;color:var(--ink-2)}
.merit-foot{display:flex;align-items:baseline;gap:12px;margin:0 20px;padding:12px 0 16px;border-top:1px solid var(--rule-doc);font-size:13px}
.merit-foot span{color:var(--ink-3)}
.merit-foot a{font-size:14px;font-weight:700}
.merit-note{display:grid;grid-template-columns:72px minmax(0,1fr);border-top:1.5px solid var(--ink)}
.mn-h{padding:14px 16px;background:var(--sunk);border-right:1px solid var(--rule-doc);font-size:15px;font-weight:700;color:var(--navy)}
.mn-b{padding:14px 20px;font-size:15px;color:var(--ink-2)}
@media (min-width:640px){.merit-note{grid-template-columns:120px minmax(0,1fr)}.mn-h{padding:14px 20px}}
@media (min-width:880px){
  .merit-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto auto}
  .merit-col{grid-row:1/span 5;grid-template-rows:subgrid}
  .merit-col+.merit-col{border-top:0;border-left:1.5px solid var(--ink)}
  .merit-note{grid-column:1/-1;grid-row:6}
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:880px){.merit-col h3{min-height:calc(2.9em + 22px)}.merit-text{min-height:9em}}
}

/* ---------- ③ 書類チェック: 横長の切り抜きに赤ペンと引き出し線 3 本 (959px 以下は 2 枚に分けて番号の丸) ---------- */
.anat{margin:40px 0 0}
.anat figcaption{margin-top:12px;font-size:13px;line-height:1.6;color:var(--ink-3)}
.anat-pc{display:none}
.anat-pair{display:grid;gap:16px}
.anat-slip{padding:12px;background:var(--surface);border-radius:2px;box-shadow:var(--e1)}
.anat-img{position:relative}
.anat-img img{display:block;width:100%;height:auto}
.anat-no{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--surface);font:700 13px/1 var(--f-num)}
.anat-img .anat-no{position:absolute;transform:translate(-50%,-50%)}
.an-n1{left:19%;top:26%}
.an-n2{left:12%;top:60%}
.an-n3{left:12%;top:15%}
.anat-legend{display:grid;gap:8px;margin-top:16px;font-size:14.5px;font-weight:700;color:var(--navy)}
.anat-legend li{display:flex;align-items:center;gap:10px}
@media (min-width:768px){
  .anat-pair{grid-template-columns:minmax(0,45fr) minmax(0,55fr);align-items:start}
  .anat-legend{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 32px}
}
@media (min-width:960px){
  .anat-sp{display:none}
  .anat-pc{display:block;padding:12px;background:var(--surface);border-radius:2px;box-shadow:var(--e1)}
  .anat-box{position:relative;aspect-ratio:1161/469}
  .anat-box img{position:absolute;left:0;top:0;width:100%;height:auto}
  .anat-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .anat-svg .ln-ng{stroke-width:3.2}
  .anat-svg .ln-lead{stroke-width:1.2}
  .anat-tag{position:absolute;font-size:15px;font-weight:700;line-height:1.4;color:var(--navy);white-space:nowrap;transform:translateY(-50%)}
  .at-a{right:48.6%;top:3.6%}
  .at-b{left:70.46%;top:96.2%;transform:translate(-50%,-50%)}
  .at-c{right:0;top:96.2%}
}
/* 入れられる形 (紙の耳の札) と、スマホのブラウザ。960px から右の端にスマホの線の絵が顔を出す */
.check-band{display:grid;align-items:center;gap:24px;margin-top:48px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden}
.cb-text{padding:22px 0;font-size:15.5px;line-height:2;color:var(--ink-2)}
.cb-files{display:inline-flex;flex-wrap:wrap;align-items:baseline;margin:0 0 0 3px;row-gap:6px}
.cb-files .cf{margin-left:-3px;padding:2px 10px 1px;background:var(--paper);border:1px solid var(--rule-strong);border-bottom-color:var(--rule-doc);border-radius:6px 6px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}
.cb-files .cf+.cf,.cb-last .cf{box-shadow:-2px 0 0 var(--page)}
/* 最後の札と「を」は離さない (行の頭に「を」を残さない) */
.cb-last{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.cb-phone{display:none}
@media (min-width:960px){
  .check-band{grid-template-columns:minmax(0,1fr) auto;gap:48px}
  .cb-text{padding:32px 0}
  .cb-phone{display:block;align-self:end;width:156px;height:132px;margin-right:56px;overflow:hidden}
  .phone{width:156px;height:232px;padding:24px 8px 0;background:var(--paper);border:2px solid var(--ink-3);border-radius:22px}
  .phone::before{content:"";display:block;width:34px;height:3px;margin:-12px auto 9px;background:var(--rule);border-radius:2px}
  .phone img{display:block;width:100%;height:auto;border-radius:2px}
}

/* ---------- ④ 結果の見方: HTML のチェック票と余白の凡例・AI の答えの確かめ直し ---------- */
.sec-results{background:var(--paper)}
.res-grid{margin-top:40px}
.sheet{position:relative;max-width:600px;padding:20px 24px 18px;background:var(--surface);border:1.5px solid var(--ink);box-shadow:var(--e1)}
.sheet-kicker{font-size:13px;line-height:1.6;color:var(--ink-3)}
.sheet-title{margin-top:2px;font-size:19px;font-weight:700;line-height:1.5}
.sheet-counts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font-size:14px;line-height:1.6}
.sheet-counts li{display:flex;align-items:center;gap:4px;color:var(--c)}
.sheet-counts .g{width:17px;height:17px}
.sheet-rows{margin-top:14px;border-top:1.5px solid var(--ink)}
.sr{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:minmax(48px,auto);align-items:center;border-bottom:1px solid var(--rule)}
.sr-has-calc{grid-template-rows:minmax(48px,auto) auto}
.sr-no{font:700 16px/1 var(--f-num);color:var(--ink-3)}
.sr-name{display:flex;align-items:center;min-width:0;font-size:16px;line-height:1.4}
.sr-name::after{content:"";flex:1;min-width:12px;margin:0 8px;border-bottom:1px dotted var(--rule-doc)}
@media (max-width:399px){.r2-k{font-size:12px}.sheet{padding:16px 14px 14px}.sr-name{font-size:15px}.sr-v{font-size:13.5px}.so-list{grid-template-columns:minmax(0,1fr)}.cb-files .cf{padding:2px 6px 1px;font-size:12px}}
@media (min-width:400px){.sr{grid-template-columns:36px minmax(0,1fr) auto}.sr-name::after{min-width:14px;margin:0 10px}}
.sr-v{display:flex;align-items:center;gap:4px;font-size:14.5px;color:var(--c);white-space:nowrap}
.sr-v.s-ng{font-weight:700}
.sr-calc{display:grid;grid-column:2/-1;align-content:center;min-height:64px;margin:0 0 10px;padding:8px 12px;background:var(--sunk);font-size:14px;line-height:1.6;color:var(--ink-2)}
.sheet-ok{padding:12px 0 2px}
.so-h{position:relative;display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--c)}
.so-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin-top:6px;padding-left:24px;font-size:14px;color:var(--ink-2)}
.so-list span{margin-right:8px;font-family:var(--f-num);font-weight:700;color:var(--ink-3)}
.sr-ann{display:none}
.res-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:20px}
.res-legend li{display:grid;gap:2px}
.res-legend b,.sr-ann b{display:flex;align-items:center;gap:4px;font-size:14.5px;color:var(--c)}
.res-legend span,.sr-ann span{font-size:14px;color:var(--ink-2)}
@media (min-width:960px){
  .res-grid{max-width:none}
  .sheet{width:560px}
  .sr-ann{position:absolute;left:calc(100% + 25.5px);top:24px;display:flex;align-items:center;gap:12px;white-space:nowrap;transform:translateY(-50%)}
  .sr-ann::before{content:"";flex:none;width:40px;height:1px;background:var(--leader)}
  .sr-ann span{margin-left:6px}
  .so-h .sr-ann{left:calc(100% + 25.5px);top:50%}
  .res-legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
}
@media (min-width:1200px){.sheet{width:600px}}
/* AI の答えの確かめ直し: 3 つの札を → でつなぐ */
.verify{display:grid;gap:28px;margin-top:56px;padding-top:56px;border-top:1px solid var(--rule)}
.verify h3{font:400 clamp(22px,2.4vw,28px)/1.45 var(--f-title);letter-spacing:.02em}
.verify-text p{margin-top:12px;max-width:30em;color:var(--ink-2)}
.verify-text .verify-note{margin-top:16px;font-size:13px;color:var(--ink-3)}
.vflow{position:relative;display:grid;gap:30px}
.vf{position:relative;padding:14px 16px 16px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:4px;font-size:13.5px;line-height:1.6}
.vf:not(:last-child)::after{content:"";position:absolute;left:28px;top:calc(100% + 6px);width:1.5px;height:18px;background:var(--ink-3)}
.vf:not(:last-child)::before{content:"";position:absolute;left:24.75px;top:calc(100% + 20px);border:4px solid transparent;border-top:6px solid var(--ink-3);border-bottom:0}
.vf-h{font-size:14px;font-weight:700;color:var(--navy)}
.vf-tag{display:inline-flex;white-space:nowrap;align-items:center;gap:4px;margin-top:8px;padding:3px 10px 3px 6px;background:var(--ng-tint);color:var(--ng);font-weight:700}
.vf-tag .g{width:17px;height:17px}
.vf-checks{display:grid;gap:6px;margin-top:8px}
.vf-checks li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;color:var(--ink-2)}
.vc-mark{flex:none;width:16px;height:16px}
.vc-mark path{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vc-miss{display:inline-flex;align-items:center;gap:2px;color:var(--ink);font-weight:700}
.vc-dash{flex:none;width:16px;height:16px}
.vc-dash path{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round}
.vf-3{background:var(--rv-tint);border-color:var(--rv-edge)}
.vf-swap{display:grid}
.vf-swap>span{grid-area:1/1;display:flex;align-items:center;gap:4px;color:var(--c)}
.vf-swap .g{width:18px;height:18px}
.vf-from{opacity:0}
.vf-note{margin-top:6px;font-size:13px;color:var(--ink-2)}
@media (min-width:1200px){.verify{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:center}}
@media (min-width:768px){
  .vflow{grid-template-columns:auto minmax(0,1.35fr) minmax(0,1.1fr);gap:30px;align-items:center}
  .vf:not(:last-child)::after{left:calc(100% + 6px);top:50%;width:14px;height:1.5px}
  .vf:not(:last-child)::before{left:calc(100% + 19px);top:calc(50% - 3.25px);border:4px solid transparent;border-left:6px solid var(--ink-3);border-right:0}
}

/* ---------- ⑤ 使い方: 1 枚の申請書の時の流れ (時刻・役・線・中身)。上司の番は幅いっぱいの紺 ---------- */
.flow{border-top:1px solid var(--rule)}
.flow-head{padding-top:72px;padding-bottom:8px}
.flow-head h2{margin-top:14px;font:400 clamp(28px,6.6vw,46px)/1.34 var(--f-title);letter-spacing:.02em}
.flow-lead{margin-top:16px;max-width:30em;font-size:16.5px;line-height:1.85;color:var(--ink-2)}
.tl-step{overflow-x:clip}
.tl-row{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"line when" "line body";column-gap:16px}
.tl-when{grid-area:when;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding-top:56px;color:var(--navy)}
.tl-date{font:700 14px/26px var(--f-num)}
.tl-time{font:700 20px/26px var(--f-num)}
.tl-role{padding:0 7px;border:1px solid currentColor;border-radius:2px;font-size:13px;font-weight:700;line-height:22px}
.tl-line{grid-area:line;position:relative}
.tl-line::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--rule-strong);border-radius:1px}
.tl-dot{position:absolute;left:5px;top:64px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.tl-step:first-child .tl-line::before{top:64px}
.tl-step:last-child .tl-line::before{bottom:auto;height:69px}
.tl-body{grid-area:body;min-width:0;padding:12px 0 56px}
.tl-body h3{font:400 clamp(20px,2vw,22px)/1.45 var(--f-title);letter-spacing:.02em;color:var(--navy)}
.tl-act{margin-top:10px;max-width:26em;font:400 clamp(16.5px,1.6vw,18px)/1.8 var(--f-title);letter-spacing:.02em;color:var(--ink-2)}
.tl-note{margin-top:14px;max-width:34em;font-size:13.5px;line-height:1.7;color:var(--ink-3)}
.tl-fig{margin-top:24px;min-width:0}
/* 1 番と 2 番は同じ日の 33 分違いなので、間を詰める */
.ts-1 .tl-body{padding-bottom:32px}
@media (min-width:960px){.ts-1 .tl-body{padding-bottom:40px}}
.tl-night{background:var(--navy);color:var(--surface)}
.tl-night .tl-when,.tl-night h3{color:var(--surface)}
.tl-night .tl-act{color:var(--surface);opacity:.78}
.tl-night .tl-note{color:var(--on-navy-muted)}
.tl-night .tl-line::before{background:var(--on-navy-muted)}
.tl-night .tl-dot{background:var(--surface)}
@media (min-width:960px){
  .flow-head{padding-top:120px}
  .tl-row{grid-template-columns:176px 28px minmax(0,1fr);grid-template-areas:"when line body";column-gap:0}
  .tl-when{position:relative;display:block;padding-top:96px}
  .tl-date{position:absolute;left:0;top:70px}
  .tl-time{display:block;font-size:28px;line-height:28px}
  .tl-role{display:inline-block;margin-top:12px}
  .tl-line::before{left:13px}
  .tl-dot{left:9px;top:105px}
  .tl-step:first-child .tl-line::before{top:105px}
  .tl-step:last-child .tl-line::before{height:110px}
  .tl-body{padding:96px 0 96px 40px}
  .tl-body h3{font-size:22px;line-height:28px}
}
@media (min-width:1200px){
  .tl-night .tl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
  .tl-night .tl-fig{margin-top:0}
}
/* 1 書類チェック: チェック票の 1 項目 (画面の字のまま。番号・項目・判定と、次にすること) */
.pp-item{max-width:460px;padding:16px 18px 18px;transform:rotate(-1deg)}
.pi-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.pi-no{display:grid;place-items:center;width:30px;height:26px;border-radius:3px;background:var(--navy);color:var(--surface);font:700 14px/1 var(--f-num)}
.pi-name{display:flex;align-items:center;min-width:0;font-size:16px;font-weight:700;line-height:1.4}
.pi-name::after{content:"";flex:1;min-width:12px;margin-left:10px;border-bottom:1px dotted var(--rule-doc)}
.pi-v{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;color:var(--c);white-space:nowrap}
.pi-v .g{width:18px;height:18px}
.pi-next{margin:10px 0 0 42px;padding:10px 14px 12px;background:var(--ng-tint)}
.pi-next-h{font-size:13px;line-height:1.6;color:var(--ink-2)}
.pi-next-b{font-size:15.5px;font-weight:700;line-height:1.6}
@media (max-width:399px){.pi-next{margin-left:0}}
/* 2 上司に出す: 理由の選び札とひとこと */
.pp-reason{max-width:380px;padding:20px}
@media (min-width:960px){.pp-reason{max-width:480px}.chips{flex-wrap:nowrap}.chips li{white-space:nowrap}}
.pp-kicker{font-size:13px;line-height:1.6;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips li{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--rule-strong);border-radius:4px;font-size:15px;line-height:1.4;color:var(--ink-3)}
.chips .is-picked{padding:6px 11px 6px 9px;border:2px solid var(--navy);color:var(--ink);font-weight:700}
.chk{flex:none;width:16px;height:16px}
.chk path{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note-slip{margin-top:14px;padding:10px 14px;background:var(--sunk);border-left:3px solid var(--navy)}
.ns-h{font-size:12px;font-weight:700;line-height:1.6;color:var(--navy)}
.note-slip p+p{margin-top:2px;font-size:15px;line-height:1.65}
/* 3 付箋で返す: 上司の紙 (引用・1 行の表・朱の囲み・付箋) */
.pp-boss{position:relative;max-width:440px;padding:20px 20px 24px;box-shadow:var(--e2)}
.pb-quote{padding-left:12px;border-left:3px solid var(--rule-strong)}
.pb-ref{font-size:13px;line-height:1.6;color:var(--ink-3)}
.pb-q{font-size:15px;line-height:1.7}
.pb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;margin-top:18px;border:1px solid var(--rule-doc);font-size:14px;line-height:1.5}
.pb-row>span{display:flex;align-items:center;padding:9px 8px}
.pb-row>span:first-child{white-space:nowrap}
.pb-row>span+span{border-left:1px solid var(--rule-doc)}
.pb-row>.pb-amt{position:relative;justify-content:center;width:88px;padding:9px 0;white-space:nowrap}
.pb-box{position:absolute;left:50%;top:50%;width:80px;height:30px;margin:-15px 0 0 -40px;overflow:visible}
@media (max-width:399px){.pp-boss{padding:16px 14px 20px}.pb-row{font-size:13px}.pb-row>span{padding:8px 6px}.pb-row>.pb-amt{width:76px;padding:8px 0}.pb-box{width:72px;height:27px;margin:-13.5px 0 0 -36px}}
@media (min-width:400px){.pb-row{font-size:15px}.pb-row>span{padding:9px 12px}.pb-row>.pb-amt{width:100px;padding:9px 0}.pb-box{width:88px;height:33px;margin:-16.5px 0 0 -44px}}
.fusen-boss{width:min(240px,100%);margin:20px 0 0 auto;transform:rotate(-2deg)}
@media (min-width:768px){.pp-boss{padding-bottom:76px;margin-bottom:28px}.fusen-boss{position:absolute;right:-16px;bottom:-28px;margin:0}}
/* 4 資料に質問: 切り抜きと右の注記の列 */
.ask-fig{display:grid;gap:20px}
.ask-shot{position:relative;max-width:400px;border-radius:var(--r);box-shadow:var(--e2);overflow:hidden}
.ask-shot img{display:block;width:100%;height:auto}
.ask-ring{position:absolute;left:25.4%;top:47.6%;width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--navy);border-radius:50%;opacity:0;pointer-events:none}
.ask-cover{position:absolute;left:12.6%;top:87.6%;width:49.2%;height:3.6%;background:var(--surface);transform:scaleX(0);transform-origin:right;pointer-events:none}
.ask-ann{font-size:14px;font-weight:700;line-height:20px;color:var(--navy)}
.ask-room{margin-top:12px;max-width:26em;padding:14px 16px;background:var(--paper);border:1px solid var(--rule);font-size:14px;line-height:1.75;color:var(--ink-2)}
/* 光った 1 行を、読める大きさで写した札 (画面の資料の字のまま) */
.ask-zoom{margin-top:10px;max-width:30em;padding:12px 16px 14px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--e1)}
.az-h{font-size:13px;font-weight:700;line-height:1.6;color:var(--ink-2)}
.az-q{position:relative;z-index:0;margin-top:2px;font-size:15px;line-height:1.8}
.az-hl{background:var(--hl);text-decoration:underline 1.5px var(--navy);text-underline-offset:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 1200px から 2 列 (切り抜き | 注記と写した札・ルームの札)。それより狭いと札の 1 行が入らないので、縦に積む */
@media (min-width:1200px){
  .ask-fig{grid-template-columns:400px minmax(0,1fr);gap:24px 40px;align-items:start}
  .ask-shot{grid-column:1;grid-row:1}
  .ask-side{position:relative;grid-column:2;grid-row:1;align-self:stretch}
  .ask-room{grid-column:2;grid-row:1;margin-top:0}
  /* 札の光った行の高さを、切り抜きの光った行 (400px 幅で上から約 406px) にそろえる */
  .ask-pin{position:absolute;left:0;top:329px}
  .ask-ann{padding-left:4px}
  .ask-zoom{position:relative;width:max-content;max-width:100%}
  .az-hl{position:relative;display:inline-block;white-space:nowrap;background:none;text-decoration:none}
  .az-hl::before{content:"";position:absolute;inset:0 -3px;z-index:-1;background:var(--hl)}
  .az-hl::after{content:"";position:absolute;left:-3px;right:-3px;bottom:1px;height:1.5px;background:var(--navy)}
  .ask-zoom::before{content:"";position:absolute;right:100%;top:48px;width:196px;height:1px;background:var(--navy)}
  .ask-zoom::after{content:"";position:absolute;right:calc(100% + 193.5px);top:46px;width:5px;height:5px;border-radius:50%;background:var(--navy)}
}
/* 5 直して出し直す: 表だけの切り抜きに、2 回目の札・付箋・済を重ねる */
.fix-fig{position:relative;max-width:740px}
.round2{position:relative;z-index:1;display:inline-block;margin:0 0 -10px -6px;padding:8px 14px 9px;background:var(--surface);box-shadow:var(--e1);transform:rotate(-1.5deg)}
.r2-k{font-size:13px;line-height:1.5;color:var(--ink-3)}
.r2-t{font-size:17px;font-weight:700;line-height:1.5}
.fix-slip{display:inline-block;max-width:100%;padding:14px;background:var(--paper);box-shadow:var(--e1)}
.fix-slip picture,.fix-slip img{display:block;max-width:100%;height:auto}
/* スマホでは付箋を右の端から 22px 離す (「済」は付箋の右へ 20px はみ出すので、画面の外で切れないように) */
.fusen-done{width:min(220px,calc(100% - 22px));margin:-10px 22px 0 auto;transform:rotate(2deg)}
.sumi{--tilt:-6deg;position:absolute;right:-20px;top:-28px;width:40px;height:40px;overflow:visible;color:var(--shu);opacity:.95;transform:rotate(var(--tilt))}
.sumi rect{fill:var(--paper);stroke:currentColor;stroke-width:1.5}
.sumi text{font:700 16px/1 var(--f-head);fill:currentColor}
@media (min-width:768px){
  .round2{position:absolute;left:-6px;top:0;margin:0}
  .fix-fig{display:flex;align-items:flex-start;padding-top:44px}
  .fix-slip{flex:0 1 auto;min-width:0}
  .fusen-done{position:relative;z-index:1;flex:none;width:212px;margin:76px 0 0 -32px}
}
/* 6 判子で承認: 回覧票 (上司のマスの「いまここ」と承認の「まだ」は、動きの前の形。終わりの形では出さない) */
.kairan{display:flex;width:100%;max-width:560px;color:var(--ink);background:var(--surface);border:2px solid var(--ink);box-shadow:var(--e2)}
.k-label{display:grid;place-items:center;padding:0 clamp(6px,1.4vw,10px);border-right:1.5px solid var(--ink);font-size:clamp(13px,2.4vw,16px);line-height:1.2;text-align:center}
.kairan ol{display:grid;flex:1;grid-template-columns:repeat(3,minmax(0,1fr))}
.kairan li{display:grid;grid-template-rows:auto clamp(84px,17vw,124px);min-width:0;text-align:center}
.kairan li+li{border-left:1.5px solid var(--ink)}
.kairan b{padding:6px 4px;border-bottom:1.5px solid var(--ink);font-size:clamp(14px,2.6vw,18px);font-weight:400}
.kairan li>span{display:grid;place-items:center;font-size:clamp(17px,3.2vw,24px);font-variant-numeric:tabular-nums}
.kairan li:last-child b{font-weight:700}
.k-cell>span{grid-area:1/1}
.k-now{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;opacity:0}
.k-now i{width:10px;height:10px;border-radius:50%;background:var(--navy)}
.k-yet{font-size:14px;color:var(--ink-3);opacity:0}
.k-stamp{color:var(--shu)}
.k-stamp svg{--tilt:-4deg;width:clamp(66px,14vw,100px);height:auto;overflow:visible;opacity:.95;transform:rotate(var(--tilt))}
.k-stamp text{font-family:var(--f-head);font-weight:700}

/* ---------- ⑥ 自社の書類に合わせる: 見本 → 項目の案に ✓ → 1 文で足す の工程図と、紙の束 ---------- */
.sec-fit{background:var(--desk)}
.fit-steps{display:grid;gap:12px;margin-top:40px}
.fs{min-width:0}
.fs:not(:last-child)::after{content:"";display:block;width:1px;height:32px;margin:16px auto 0;background:var(--leader)}
.fs-stage{position:relative;display:flex;align-items:center;justify-content:center}
.sample{position:relative;width:170px;transform:rotate(-1deg)}
.sample svg{display:block;width:100%;height:auto;filter:drop-shadow(0 1px 2px var(--shadow-1))}
.sample-tag{position:absolute;right:-6px;top:-10px;padding:1px 8px;background:var(--paper);border:1px solid var(--navy);color:var(--navy);font-size:12px;font-weight:700;line-height:1.5}
.items-card{width:100%;max-width:440px;padding:16px;background:var(--surface);box-shadow:var(--e1)}
.ic-h{font-size:13px;font-weight:700;line-height:1.6}
.ic-list{display:grid;gap:8px;margin-top:10px}
.ic-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 12px;border:1.5px solid var(--navy);border-radius:4px}
.ic-box{position:relative;display:grid;place-items:center;width:18px;height:18px;margin-top:2px;background:var(--navy);border-radius:3px}
.ic-box svg{position:relative;width:14px;height:14px}
/* 動きの前の「空の四角」(紺の枠の中を白で覆う)。終わりの形では見えない */
.ic-box::before{content:"";position:absolute;inset:1.5px;border-radius:1.5px;background:var(--surface);opacity:0}
.ic-box path{fill:none;stroke:var(--surface);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ic-t{font-size:15px;line-height:1.55}
.ic-t small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.ic-t .ic-ref{margin-top:0;color:var(--navy)}
.add-card{width:100%;max-width:360px;padding:16px;background:var(--paper);box-shadow:var(--e1)}
.ac-h{font-size:13px;font-weight:700;line-height:1.6;color:var(--navy)}
.ac-line{position:relative;margin-top:8px;padding:6px 0 7px;border-bottom:1px solid var(--rule-doc);font-size:15px;line-height:1.55}
.ac-cover{position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:right}
.ac-try{margin-top:14px}
.ac-try span{display:inline-block;padding:4px 12px;border:1px solid var(--navy);border-radius:4px;font-size:13px;font-weight:700;color:var(--navy)}
.fs-cap{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:18px;font-size:15px;line-height:1.6;text-align:left}
.fit-no{flex:none;font:400 22px/1 var(--f-title);color:var(--navy)}
@media (min-width:960px){
  .fit-steps{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:48px}
  .fs:not(:last-child)::after{display:none}
  .fs-stage{min-height:330px}
  .fs-1 .fs-stage::after,.fs-2 .fs-stage::after{content:"";position:absolute;left:calc(100% + 6px);top:50%;width:30px;height:1px;background:var(--leader)}
  .fs-1 .fs-stage::before,.fs-2 .fs-stage::before{content:"";position:absolute;left:calc(100% + 36px);top:calc(50% - 3.5px);border:4px solid transparent;border-left:6px solid var(--leader);border-right:0}
  .sample{width:180px}
  .fs-cap{justify-content:flex-start}
}
.fit-h3{margin-top:64px;font:400 clamp(20px,2.2vw,24px)/1.5 var(--f-title);letter-spacing:.02em}
.bundle{display:flex;flex-wrap:wrap;justify-content:center;row-gap:20px;margin-top:28px;padding:0 4px}
.bd{position:relative;flex:none;width:calc(25% + 8px);margin:0 -4px;aspect-ratio:3/4;background:var(--paper);box-shadow:var(--e1);transform:translate(0,var(--dy,0px)) rotate(var(--rot,0deg))}
.bd svg{position:absolute;inset:0;width:100%;height:100%}
.bd span{position:absolute;left:7%;right:6%;top:6%;font-size:12px;font-weight:700;line-height:1.3;color:var(--ink)}
.bd-1{--rot:-3deg}
.bd-2{--rot:2deg;--dy:4px}
.bd-3{--rot:-1.5deg;--dy:1px}
.bd-4{--rot:2.5deg;--dy:6px}
.bd-5{--rot:-2deg;--dy:2px}
.bd-6{--rot:1deg;--dy:8px}
.bd-7{--rot:-2.5deg;--dy:3px}
@media (min-width:600px){
  .bundle{flex-wrap:nowrap;padding:0 6px}
  .bd{width:min(136px,calc(100% / 7 + 10px));margin:0 -5px}
}

/* ---------- ⑦ データの扱いとセキュリティ: 机の上の 2 枚の紙 (綴じた紙と、クリップで留めた票) ---------- */
.sec-data{padding:72px 0}
@media (min-width:768px){.sec-data{padding:112px 0}}
.lines li{padding:14px 0;border-top:1px solid var(--rule)}
.lines li:last-child{border-bottom:1px solid var(--rule)}
.after-lines{margin-top:16px}
.sec-data .after-lines{margin-top:32px}
.data-desk{display:grid;gap:40px;margin-top:40px}
.bound{position:relative;padding:24px 20px 28px 48px;background:var(--paper);box-shadow:var(--e1)}
/* 綴じ穴: 左の余白に、真ん中をはさんで 2 つ (机の色が透けて見える) */
.bound::before,.bound::after{content:"";position:absolute;left:18px;width:13px;height:13px;border-radius:50%;background:var(--desk);box-shadow:inset 0 1.5px 2px var(--shadow-1)}
.bound::before{top:calc(50% - 52px)}
.bound::after{top:calc(50% + 40px)}
.bound-h{font-size:13px;font-weight:700;line-height:1.6;color:var(--navy)}
.bound .lines{margin-top:10px}
/* 票の上の縁に留めたゼムクリップ (線の絵) */
.clip-card{position:relative;padding-top:18px}
.clip{position:absolute;right:44px;top:-6px;z-index:1;width:25px;height:66px;overflow:visible;transform:rotate(6deg)}
.clip-wire{fill:none;stroke:var(--clip-metal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.form-table{background:var(--surface);border:1.5px solid var(--ink);box-shadow:var(--e1)}
.form-table-head{padding:16px 16px 10px;border-bottom:1px solid var(--rule-doc);font-size:15px;font-weight:700}
.form-table dl{margin:0}
.form-table dl div{display:grid;grid-template-columns:7.5em minmax(0,1fr)}
.form-table dl div+div{border-top:1px solid var(--rule-doc)}
.form-table dt{padding:12px 14px;background:var(--sunk);border-right:1px solid var(--rule-doc);font-size:15px}
.form-table dd{margin:0;padding:12px 14px;font-size:15px}
@media (min-width:640px){.form-table dl div{grid-template-columns:10.5em minmax(0,1fr)}.bound{padding:28px 32px 28px 64px}.bound::before,.bound::after{left:26px}}
@media (min-width:880px){
  .data-desk{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;align-items:start}
  .clip-card{margin:48px 0 0 -40px;transform:rotate(-1.5deg)}
  /* 票は紙に左へ 40px 重なる (傾きの分も足す)。紙の右の余白を広げ、行の終わりの字が票の下に隠れないように */
  .bound{padding-right:56px}
  .form-table dl div{grid-template-columns:9.5em minmax(0,1fr)}
}

/* ---------- ⑧ 始め方: ご用意いただくもの 2 | 当社が行うこと 4 の様式。番号は朱の判子 ---------- */
.sec-start{padding:72px 0;background:var(--paper)}
@media (min-width:768px){.sec-start{padding:112px 0}}
.start-form{margin-top:40px;background:var(--surface);border:1.5px solid var(--ink)}
.sf-col{display:grid;min-width:0}
.sf-col+.sf-col{border-top:1.5px solid var(--ink)}
.sf-head{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--sunk);border-bottom:1px solid var(--rule-doc);font-size:16px;font-weight:700}
.hanko-no{flex:none;width:40px;height:40px;overflow:visible;color:var(--shu);opacity:.95;transform:rotate(var(--tilt,0deg))}
.hanko-no circle{fill:none;stroke:currentColor;stroke-width:2.4}
.hanko-no text{font:700 26px/1 var(--f-head);fill:currentColor}
.hk-1{--tilt:-4deg}
.hk-2{--tilt:3deg}
.hk-3{--tilt:-2deg}
.sf-items{display:flex;flex-wrap:wrap;gap:20px 36px;padding:24px 20px 28px}
.sf-items li{display:grid;justify-items:center;gap:10px;font-size:14.5px}
.sf-items svg{width:64px;height:78px}
.sf-checks{padding:6px 20px 10px}
.sf-checks li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.sf-checks li:last-child{border-bottom:0}
.sf-checks svg{flex:none;width:16px;height:16px}
.sf-checks path{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-foot{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1.5px solid var(--ink);font-size:16px}
@media (min-width:880px){
  .start-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto 1fr auto}
  .sf-col{grid-row:1/span 2;grid-template-rows:subgrid}
  .sf-col+.sf-col{border-top:0;border-left:1.5px solid var(--ink)}
  .sf-items{align-content:center;justify-content:center}
  .sf-foot{grid-column:1/-1;grid-row:3}
}
/* subgrid が無い端末: 左右の列の頭はどちらも判子 1 つの高さなので、auto と 1fr でそろう */
@supports not (grid-template-rows:subgrid){
  @media (min-width:880px){.sf-col{grid-template-rows:auto 1fr}}
}

/* ---------- ⑨ よくある質問 ---------- */
.faq-list details{border-top:1px solid var(--rule)}
.faq-list details:last-child{border-bottom:1px solid var(--rule)}
.faq-list summary{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 36px 12px 0;font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:var(--ink-3);border-radius:1px}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(180deg)}
.faq-list details p{padding:0 32px 16px 0;color:var(--ink-2)}
.faq-list details .faq-more{margin-top:-8px;font-weight:700}

/* ---------- ⑩ 最後の呼びかけ: 資料の扇と、見出しとボタン ---------- */
.sec-last{background:var(--desk);border-top:0}
.last-grid{display:grid;gap:40px;align-items:center}
.sec-last h2{font-size:clamp(27px,6.2vw,44px)}
.last-text>p{margin-top:10px;color:var(--ink-2)}
.last-ctas{display:grid;gap:10px;margin-top:28px}
.last-form{margin:28px 0 0;border-top:1px solid var(--rule-doc);border-bottom:1px solid var(--rule-doc)}
.last-form div{display:grid;gap:2px;padding:10px 0}
.last-form dt{font-size:13px;font-weight:700;color:var(--navy)}
.last-form dd{margin:0;font-size:14px;color:var(--ink-2)}
.fan{position:relative;width:240px;height:180px;margin:0 auto}
.fan-p{position:absolute;left:12px;top:22px;width:180px;height:auto;padding:2px;background:var(--paper);box-shadow:var(--e1);transform:translate(var(--x),var(--y)) rotate(var(--tilt))}
.fp-4{--x:-12px;--y:0px;--tilt:-7deg}
.fp-9{--x:28px;--y:0px;--tilt:4deg}
.fp-3{--x:8px;--y:14px;--tilt:-1deg}
.last-form div+div{border-top:1px solid var(--rule)}
@media (min-width:640px){
  .last-ctas{display:flex;flex-wrap:wrap;gap:10px 12px}
  .last-form div{grid-template-columns:11.5em minmax(0,1fr);gap:16px;align-items:baseline}
}
@media (min-width:880px){
  .last-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .fan{width:340px;height:250px}
  .fan-p{left:16px;top:28px;width:260px}
  .fp-4{--x:-16px}
  .fp-9{--x:40px}
  .fp-3{--x:12px;--y:22px}
}

/* ---------- 下のページの共通 ---------- */
.page-main{padding:40px 0 72px}
@media (min-width:768px){.page-main{padding:64px 0 96px}}
.page-head h1{font:400 clamp(27px,6.8vw,38px)/1.4 var(--f-title);letter-spacing:.02em}
.page-head .lead{margin-top:10px;font-size:17px;line-height:1.85;color:var(--ink-2);max-width:36em}
.page-head .note{margin-top:10px}
.doc{max-width:760px}
.doc h2{margin-top:44px;padding-top:14px;border-top:1.5px solid var(--ink);font-size:20px;line-height:1.5}
.doc h3{margin-top:24px;font-size:17px;line-height:1.5}
.doc p{margin-top:12px}
.doc ul,.doc ol{margin-top:10px;padding-left:1.4em}
.doc ul{list-style:disc}
.doc ol{list-style:decimal}
.doc li{margin-top:6px}
.doc .table-box{margin-top:14px;overflow-x:auto}
.doc table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.65;background:var(--surface)}
.doc th,.doc td{padding:8px 10px;border:1px solid var(--rule);text-align:left;vertical-align:top}
.doc thead th{background:var(--sunk)}
.doc caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.doc-end{margin-top:40px}
.company-table{margin-top:28px;max-width:760px;background:var(--surface);border:1.5px solid var(--ink)}
.company-table div{display:grid;grid-template-columns:7em minmax(0,1fr)}
.company-table div+div{border-top:1px solid var(--rule-doc)}
.company-table dt{padding:10px 12px;border-right:1px solid var(--rule-doc);background:var(--sunk)}
.company-table dd{margin:0;padding:10px 12px}
.page-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- フォーム ---------- */
.form-layout{display:grid;gap:32px;margin-top:28px}
.form-main,.form-aside{min-width:0}
.audience{margin-top:6px;font-size:14px;color:var(--ink-2)}
.mobile-summary{margin-top:6px;font-size:15px;color:var(--ink-2)}
.form-card{padding:24px 16px;background:var(--paper);box-shadow:var(--e1)}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field-label,.field legend{display:block;padding:0;margin-bottom:6px;font-weight:700}
.req,.opt{margin-left:6px;font-size:14px;font-weight:400}
.req{color:var(--navy)}
.opt{color:var(--ink-3)}
.hint{margin-bottom:6px;font-size:14px;color:var(--ink-2)}
.input,.select,.textarea{display:block;width:100%;min-height:48px;padding:10px 12px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r)}
.textarea{min-height:140px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue)}
[aria-invalid="true"]{border-color:var(--ng)}
.is-invalid{outline:1px solid var(--ng);outline-offset:4px}
.field-error{margin-top:6px;font-size:14px;color:var(--ng)}
.choices{display:grid;gap:6px}
.choice{display:flex;align-items:flex-start;gap:8px;min-height:32px}
.choice input{flex:none;width:18px;height:18px;margin:5px 0 0}
.field-more{margin-bottom:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.field-more summary{min-height:48px;padding:12px 0;font-weight:700;cursor:pointer}
.field-more-body{padding-top:8px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.purpose{margin-bottom:16px;font-size:14px;line-height:1.7}
.submit-row .btn{width:100%}
.form-status{min-height:1.75em;margin-top:8px;font-size:14px;color:var(--ink-2)}
.form-alert{margin-bottom:20px;padding:12px 14px;background:var(--ng-tint);border-left:4px solid var(--ng)}
.noscript-box{margin-bottom:16px;padding:12px 14px;background:var(--rv-tint)}
.form-aside h2{font-size:17px;line-height:1.5}
.form-aside ol{margin-top:10px;padding-left:1.4em;list-style:decimal}
.form-aside p{margin-top:12px;font-size:15px;color:var(--ink-2)}
@media (min-width:640px){.form-card{padding:32px}}
@media (min-width:960px){
  .form-layout{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px}
  .mobile-summary{display:none}
}

/* ---------- 動き (DESIGN 決定 22。長さと曲線は :root の --t-*・--ease-* で、FE の §7.1 と同じ) ----------
 * site.js が [data-reveal] に .is-armed を付け、要素の頭が線 (data-reveal-at。画面の上からの割合。既定は .75) を越えたら .is-in を足す (1 回だけ)。
 * 隠す形は .is-armed:not(.is-in) の下だけに書き、下の @media (画面で、動きを減らさない設定) の中にだけ置く。
 * JS が無い・動きを減らす設定・印刷では、ここの規則はどれも効かず、上の規則 (終わりの形) のまま。
 * 種類 (要素はどれか 1 つ): 描く (pathLength=100 の線を dasharray 100 200 で 101 → 0)・出る (opacity)・消える・寄る (opacity と transform。もとの形は --from)・ずれる (transform だけ)・判子。
 * 遅れは要素ごとの --d (受け継がない) と、欄ずらしの --col (受け継ぐ)。style 属性は CSP で使えないので、ここに書く。
 * 忙しく見えたら、区域の data-reveal を HTML から外せば、その区域は終わりの形で止まる。
 */
@property --d{syntax:"<time>";inherits:false;initial-value:0ms}
@keyframes kk-draw{from{stroke-dashoffset:101}to{stroke-dashoffset:0}}
@keyframes kk-in{from{opacity:0}}
@keyframes kk-rise{from{opacity:0;transform:translateY(6px)}}
/* 判子: 少し大きく浮いた所から落ち、0.96 倍まで沈んで戻る。朱は押したあとに少し濃くなる (なじむ) */
@keyframes kk-stamp{
  0%{opacity:0;transform:translate(0,-12px) rotate(var(--tilt,0deg)) scale(1.35);animation-timing-function:var(--ease-stamp-drop)}
  35%{opacity:.78;transform:translate(0,0) rotate(var(--tilt,0deg)) scale(.96);animation-timing-function:var(--ease-stamp-settle)}
  47%{opacity:.82;transform:translate(0,0) rotate(var(--tilt,0deg)) scale(1);animation-timing-function:var(--ease-out)}
  100%{opacity:.95;transform:translate(0,0) rotate(var(--tilt,0deg)) scale(1)}
}
@keyframes kk-ring{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.4)}}
@keyframes kk-sink{40%{transform:translateY(1px)}}
@keyframes kk-faq{from{opacity:0;transform:translateY(-4px)}}
@media screen and (prefers-reduced-motion:no-preference){
  /* ① 最初の画面 (読み込みで 1 回。JS が無くても動く): 赤ペン → 引き出し線 → 札 */
  .hero-pen path{stroke-dasharray:100 200;animation:kk-draw 460ms var(--ease-pen) 250ms backwards}
  .hero-pen .p2{animation-delay:730ms;animation-duration:110ms}
  .hero-pen .p3{animation-delay:850ms;animation-duration:110ms}
  .hero-lead path{stroke-dasharray:100 200;animation:kk-draw 300ms var(--ease-out) 1000ms backwards}
  .hero-lead circle{animation:kk-in var(--t-ui) linear 1000ms backwards}
  .hero-card{animation:kk-rise var(--t-settle) var(--ease-out) 1100ms backwards}
  .hero-fig.is-waiting :is(.hero-pen path,.hero-lead path,.hero-lead circle,.hero-card){animation-play-state:paused}

  /* 種類ごとの形 (:where で強さを 0 にし、下の要素ごとの長さで上書きできるようにする) */
  .is-armed :where(.mp-pen,.mp-x1,.mp-x2,.mp-lead,.mp-ul,.mp-shu,.an-pen1,.an-pen2,.an-x1a,.an-x1b,.an-x2a,.an-x2b,.an-la,.an-lb,.an-lc,.gx path,.go path,.vc-mark path,.chk path,.pb-box path,.ic-box path,.sf-checks path){stroke-dasharray:100 200}
  .is-armed:not(.is-in) :where(.mp-pen,.mp-x1,.mp-x2,.mp-lead,.mp-ul,.mp-shu,.an-pen1,.an-pen2,.an-x1a,.an-x1b,.an-x2a,.an-x2b,.an-la,.an-lb,.an-lc,.gx path,.go path,.vc-mark path,.chk path,.pb-box path,.ic-box path,.sf-checks path){stroke-dashoffset:101}
  .is-in :where(.mp-pen,.mp-x1,.mp-x2,.mp-lead,.mp-ul,.mp-shu,.an-pen1,.an-pen2,.an-x1a,.an-x1b,.an-x2a,.an-x2b,.an-la,.an-lb,.an-lc,.gx path,.go path,.vc-mark path,.chk path,.pb-box path,.ic-box path,.sf-checks path){transition:stroke-dashoffset var(--t-draw-ng) var(--ease-pen);transition-delay:calc(var(--col,0ms) + var(--d))}
  .is-armed:not(.is-in) :where(.mp-dot,.an-da,.an-db,.an-dc,.anat-tag,.v-un .sr-v .g,.sr-ann b,.sr-ann span,.vc-miss,.vf-note,.k-date,.ask-ann){opacity:0}
  .is-in :where(.mp-dot,.an-da,.an-db,.an-dc,.anat-tag,.v-un .sr-v .g,.sr-ann b,.sr-ann span,.vc-miss,.vf-note,.k-date,.ask-ann){transition:opacity var(--t-ui2) linear;transition-delay:calc(var(--col,0ms) + var(--d))}
  .is-armed:not(.is-in) :where(.k-now,.k-yet,.vf-from){opacity:1}
  .is-in :where(.k-now,.k-yet,.vf-from){transition:opacity var(--t-ui2) linear;transition-delay:calc(var(--col,0ms) + var(--d))}
  .is-armed:not(.is-in) :where(.mt-ng,.mt-ref,.mt-src,.mt-ask,.fusen-mini,.mp-hl,.anat-no,.vf,.vf-to,.v-rv .sr-v .g,.pp-item,.tl-dot,.note-slip,.fusen-boss,.round2){opacity:0;transform:var(--from)}
  .is-in :where(.mt-ng,.mt-ref,.mt-src,.mt-ask,.fusen-mini,.mp-hl,.anat-no,.vf,.vf-to,.v-rv .sr-v .g,.pp-item,.tl-dot,.note-slip,.fusen-boss,.round2){transition:opacity var(--t-ui2) linear,transform var(--t-settle) var(--ease-out);transition-delay:calc(var(--col,0ms) + var(--d))}
  .is-armed:not(.is-in) :where(.phone,.is-picked,.ask-cover,.ac-cover,.bd,.sample){transform:var(--from)}
  .is-in :where(.phone,.is-picked,.ask-cover,.ac-cover,.bd,.sample){transition:transform var(--t-settle) var(--ease-out);transition-delay:calc(var(--col,0ms) + var(--d))}
  .is-armed:not(.is-in) :where(.hanko-no,.sumi,.k-stamp svg){opacity:0}
  .is-in :where(.hanko-no,.sumi,.k-stamp svg){animation:kk-stamp 520ms linear backwards;animation-delay:calc(var(--col,0ms) + var(--d))}
  .is-in :where(.gx path,.mp-x1,.mp-x2,.an-x1a,.an-x1b,.an-x2a,.an-x2b){transition-duration:110ms}
  .is-in :where(.mp-lead,.an-la,.an-lb,.an-lc){transition-duration:400ms;transition-timing-function:var(--ease-out)}
  .is-in :where(.mp-ul,.go path){transition-duration:var(--t-draw-rv);transition-timing-function:var(--ease-out)}
  .is-in :where(.vc-mark path,.chk path,.ic-box path,.sf-checks path){transition-duration:240ms}

  /* ② 導入のメリット: 欄ごとに 1 つ。3 列のときは左から少しずつずらす */
  @media (min-width:880px){.mfig-2{--col:350ms}.mfig-3{--col:700ms}}
  .mp-hl{--from:scaleX(0);transform-box:fill-box;transform-origin:0 50%}
  .is-in .mp-hl{transition-duration:var(--t-draw-rv)}
  .mfig-1 .mp-pen{--d:100ms}
  .mp-x1{--d:640ms}
  .mp-x2{--d:750ms}
  .mfig-1 .mp-lead{--d:880ms}
  .mfig-1 .mp-dot{--d:1260ms}
  .mt-ng,.mt-ref{--from:translateY(4px);--d:1300ms}
  .mp-shu{--d:150ms}
  .fusen-mini{--from:translate(0,-14px) rotate(9deg);--d:720ms}
  .mt-ask{--from:translateY(6px) rotate(-1.5deg);--d:100ms}
  .mt-src{--from:translateY(6px);--d:300ms}
  .mfig-3 .mp-lead{--d:580ms}
  .mfig-3 .mp-dot,.mfig-3 .mp-hl,.mfig-3 .mp-ul{--d:980ms}

  /* ③ 書類チェック: 赤ペン 2 つ → 引き出し線 3 本 → 札。959px 以下は番号の丸 */
  .an-pen1{--d:250ms}
  .an-pen2{--d:310ms}
  .an-x1a{--d:790ms}
  .an-x1b{--d:900ms}
  .an-x2a{--d:850ms}
  .an-x2b{--d:960ms}
  .an-la,.an-da{--d:1100ms}
  .an-lb,.an-db{--d:1260ms}
  .an-lc,.an-dc{--d:1420ms}
  .is-in :where(.an-da,.an-db,.an-dc){transition-duration:var(--t-ui)}
  .at-a{--d:1500ms}
  .at-b{--d:1660ms}
  .at-c{--d:1820ms}
  .anat-img .anat-no{--from:translate(-50%,-50%) scale(.6)}
  .is-in .anat-no{transition-duration:var(--t-ui2)}
  .an-n1{--d:100ms}
  .an-n2{--d:220ms}
  .an-n3{--d:340ms}
  .phone{--from:translateY(28px);--d:120ms}
  .is-in .phone{transition-duration:var(--t-draw-rv)}

  /* ④ 結果の見方: 行ごとに印が付き (凡例の線が伸びる)、AI の答えを確かめ直して × を △ に下げる */
  /* 判定の字は初めから出しておき (欄が空に見えないように)、印だけが順に付く */
  .sr:nth-child(1) .gx path:first-child{--d:250ms}
  .sr:nth-child(1) .gx path+path{--d:360ms}
  .sr:nth-child(2) .gx path:first-child{--d:390ms}
  .sr:nth-child(2) .gx path+path{--d:500ms}
  .v-rv .sr-v .g{--d:530ms}
  .v-un .sr-v .g{--d:670ms}
  .so-h .go path{--d:810ms}
  .is-in .v-un .sr-v .g{transition-duration:240ms}
  .v-rv .sr-v .g{--from:scale(.8)}
  .is-in .v-rv .sr-v .g{transition-duration:var(--t-ui),var(--t-ui2)}
  .sheet.is-armed .sr-ann::before{transform-origin:0 50%}
  .sheet.is-armed:not(.is-in) .sr-ann::before{transform:scaleX(0)}
  .sheet.is-in .sr-ann::before{transition:transform var(--t-ui2) var(--ease-out);transition-delay:var(--d)}
  .sr:nth-child(1) .sr-ann::before{--d:470ms}
  .sr:nth-child(1) .sr-ann :is(b,span){--d:590ms}
  .sr:nth-child(3) .sr-ann::before{--d:710ms}
  .sr:nth-child(3) .sr-ann :is(b,span){--d:830ms}
  .sr:nth-child(4) .sr-ann::before{--d:910ms}
  .sr:nth-child(4) .sr-ann :is(b,span){--d:1030ms}
  .so-h .sr-ann::before{--d:1230ms}
  .so-h .sr-ann :is(b,span){--d:1350ms}
  .vf{--from:translateX(-6px)}
  .vf-2{--d:160ms}
  .vf-3{--d:320ms}
  .is-in .vf{transition-duration:var(--t-ui2)}
  .vf-tag .gx path:first-child{--d:120ms}
  .vf-tag .gx path+path{--d:230ms}
  .vc-ok:first-child .vc-mark path{--d:560ms}
  .vc-miss{--d:760ms}
  .vc-ok:last-child .vc-mark path{--d:900ms}
  .vf-from{--d:1250ms}
  .is-in .vf-from{transition-duration:var(--t-ui)}
  .vf-to{--from:scale(.8);--d:1340ms;transform-origin:0 50%}
  .is-in .vf-to{transition-duration:240ms}
  .vf-note{--d:1520ms}
  /* 3 枚目は白い札から始まり、下げたときに「念のため確認」の地が出る */
  .vflow.is-armed .vf-3::before{content:"";position:absolute;inset:-1px;border:1px solid var(--rule-strong);border-radius:4px;background:var(--surface)}
  .vflow.is-armed .vf-3>*{position:relative}
  .vflow.is-in .vf-3::before{opacity:0;transition:opacity 280ms linear 1290ms}

  /* ⑤ 使い方: 番ごとに線が伸びて点が打たれ、絵の中で 1 つ動く */
  .tl-step.is-armed .tl-line::before{transform-origin:50% 0}
  .tl-step.is-armed:not(.is-in) .tl-line::before{transform:scaleY(0)}
  .tl-step.is-in .tl-line::before{transition:transform 480ms var(--ease-out)}
  .tl-dot{--from:scale(.4);--d:60ms}
  .pp-item{--from:translateY(6px) rotate(-1deg);--d:150ms}
  .pi-v .gx path:first-child{--d:420ms}
  .pi-v .gx path+path{--d:530ms}
  .is-picked{--from:scale(.96);--d:200ms}
  .is-in .is-picked{transition-duration:var(--t-ui2)}
  .is-picked .chk path{--d:260ms}
  .note-slip{--from:translateY(6px);--d:600ms}
  .pb-box path{--d:250ms}
  .fusen-boss{--from:translate(0,-14px) rotate(7deg);--d:850ms}
  .ask-fig.is-in .ask-ring{animation:kk-ring 480ms var(--ease-out) 200ms}
  .ask-cover{--from:none;--d:600ms}
  .is-in .ask-cover{transition-duration:var(--t-draw-rv)}
  .ask-ann{--d:1000ms}
  /* 1200px から: 切り抜きの光った行から札へ線が伸び、札の 1 行に光が左から差す */
  .ask-fig.is-armed .ask-zoom::before{transform-origin:100% 50%}
  .ask-fig.is-armed:not(.is-in) .ask-zoom::before{transform:scaleX(0)}
  .ask-fig.is-armed:not(.is-in) .ask-zoom::after{opacity:0}
  .ask-fig.is-in .ask-zoom::before{transition:transform 400ms var(--ease-out) 1000ms}
  .ask-fig.is-in .ask-zoom::after{transition:opacity var(--t-ui) linear 1400ms}
  @media (min-width:1200px){
    .ask-fig.is-armed .az-hl::before,.ask-fig.is-armed .az-hl::after{transform-origin:0 50%}
    .ask-fig.is-armed:not(.is-in) .az-hl::before,.ask-fig.is-armed:not(.is-in) .az-hl::after{transform:scaleX(0)}
    .ask-fig.is-in .az-hl::before{transition:transform var(--t-draw-rv) var(--ease-out) 1400ms}
    .ask-fig.is-in .az-hl::after{transition:transform var(--t-draw-rv) var(--ease-out) 1520ms}
    .ask-fig.is-in .az-hl2::before{transition-delay:1700ms}
    .ask-fig.is-in .az-hl2::after{transition-delay:1820ms}
  }
  .round2{--from:translateY(10px) rotate(-1.5deg);--d:150ms}
  .sumi{--d:650ms}
  .k-now{--d:300ms}
  .k-date{--d:360ms}
  .k-yet{--d:700ms}
  .is-in .k-yet{transition-duration:var(--t-ui)}
  .k-stamp svg{--d:700ms}
  .kairan.is-in{animation:kk-sink 160ms var(--ease-out) 880ms}

  /* ⑥ 自社の書類に合わせる: 見本を置く → 線 → ✓ が順に付く → 線 → 1 文が書かれる。3 列のときは左からずらす */
  @media (min-width:960px){.fs-2{--col:650ms}.fs-3{--col:1500ms}}
  .sample{--from:translate(0,-10px) rotate(-3.5deg)}
  .fs.is-armed::after{transform-origin:50% 0}
  .fs.is-armed:not(.is-in)::after{transform:scaleY(0)}
  .fs.is-in::after{transition:transform 300ms var(--ease-out);transition-delay:var(--d)}
  .fs-1::after{--d:300ms}
  .fs-2::after{--d:700ms}
  .fs.is-armed .fs-stage::after{transform-origin:0 50%}
  .fs.is-armed:not(.is-in) .fs-stage::after{transform:scaleX(0)}
  .fs.is-armed:not(.is-in) .fs-stage::before{opacity:0}
  .fs.is-in .fs-stage::after{transition:transform 300ms var(--ease-out);transition-delay:calc(var(--col,0ms) + var(--d))}
  .fs.is-in .fs-stage::before{transition:opacity var(--t-ui) linear;transition-delay:calc(var(--col,0ms) + var(--d))}
  .fs-1 .fs-stage::after{--d:300ms}
  .fs-1 .fs-stage::before{--d:580ms}
  .fs-2 .fs-stage::after{--d:700ms}
  .fs-2 .fs-stage::before{--d:980ms}
  /* 空の四角が紺に塗られて ✓ が描かれる (::before は --d を受け継がないので、::before に直に書く) */
  .fs.is-armed:not(.is-in) .ic-box::before{opacity:1}
  .fs.is-in .ic-box::before{transition:opacity var(--t-ui) linear;transition-delay:calc(var(--col,0ms) + var(--d))}
  .ic-list li:nth-child(1) .ic-box path{--d:60ms}
  .ic-list li:nth-child(2) .ic-box::before{--d:200ms}
  .ic-list li:nth-child(2) .ic-box path{--d:260ms}
  .ic-list li:nth-child(3) .ic-box::before{--d:400ms}
  .ic-list li:nth-child(3) .ic-box path{--d:460ms}
  .ac-cover{--from:none}
  .is-in .ac-cover{transition-duration:480ms}
  /* 紙の束: 真ん中に重なった 7 枚が、扇に開く (申請書がいちばん上) */
  .bd{--from:translate(calc(var(--k,0) * (100% - var(--ov,10px))),0) rotate(0deg)}
  .bd-1{--k:3}
  .bd-2{--k:2;--d:50ms}
  .bd-3{--k:1;--d:100ms}
  .bd-4{--d:150ms}
  .bd-5{--k:-1;--d:200ms}
  .bd-6{--k:-2;--d:250ms}
  .bd-7{--k:-3;--d:300ms}
  @media (max-width:599px){.bundle{--ov:8px}.bd-1{--k:1.5}.bd-2{--k:.5}.bd-3{--k:-.5}.bd-4{--k:-1.5}.bd-5{--k:1}.bd-6{--k:0}.bd-7{--k:-1}}
  /* 重なっている間は申請書を上に、開き終えたら (札の字が隠れないよう) もとの重なり順に戻す */
  .is-in .bd{transition:transform 480ms var(--ease-out),z-index 0s linear;transition-delay:calc(var(--col,0ms) + var(--d)),calc(var(--col,0ms) + var(--d) + 200ms)}
  .bundle.is-armed:not(.is-in) .bd-1{z-index:7}
  .bundle.is-armed:not(.is-in) .bd-2{z-index:6}
  .bundle.is-armed:not(.is-in) .bd-3{z-index:5}
  .bundle.is-armed:not(.is-in) .bd-4{z-index:4}
  .bundle.is-armed:not(.is-in) .bd-5{z-index:3}
  .bundle.is-armed:not(.is-in) .bd-6{z-index:2}
  .bundle.is-armed:not(.is-in) .bd-7{z-index:1}
  .bundle.is-in .bd-1{z-index:1}
  .bundle.is-in .bd-2{z-index:2}
  .bundle.is-in .bd-3{z-index:3}
  .bundle.is-in .bd-4{z-index:4}
  .bundle.is-in .bd-5{z-index:5}
  .bundle.is-in .bd-6{z-index:6}
  .bundle.is-in .bd-7{z-index:7}

  /* ⑧ 始め方: 判子 1 → 判子 2 → ✓ が順に → 判子 3 */
  @media (min-width:880px){.sf-us{--col:350ms}}
  .start-form .hanko-no{--d:150ms}
  .sf-checks li:nth-child(1) path{--d:450ms}
  .sf-checks li:nth-child(2) path{--d:570ms}
  .sf-checks li:nth-child(3) path{--d:690ms}
  .sf-checks li:nth-child(4) path{--d:810ms}

  /* ⑨ よくある質問: + の縦の線が寝て − になり、答えが出る */
  .faq-list summary::after{transition:transform 160ms var(--ease-out)}
  .faq-list details[open]>p{animation:kk-faq 160ms var(--ease-out) backwards}

  /* ⑩ 最後の呼びかけ: 資料を請求するボタンに触れると、資料の扇が少し開く */
  .fan-p{transition:transform 200ms var(--ease-out)}
  .sec-last:has(.last-ctas .btn-1:hover,.last-ctas .btn-1:focus-visible) .fp-4{transform:translate(calc(var(--x) - 8px),var(--y)) rotate(calc(var(--tilt) - 3deg))}
  .sec-last:has(.last-ctas .btn-1:hover,.last-ctas .btn-1:focus-visible) .fp-9{transform:translate(calc(var(--x) + 8px),var(--y)) rotate(calc(var(--tilt) + 3deg))}
  .sec-last:has(.last-ctas .btn-1:hover,.last-ctas .btn-1:focus-visible) .fp-3{transform:translate(var(--x),calc(var(--y) - 3px)) rotate(var(--tilt))}
}

/* ---------- 印刷 ---------- */
@media print{
  .site-header,.site-footer,.skip-link,.page-actions{display:none}
  .hero-pen path{animation:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
  body{background:var(--surface);font-size:12pt}
  .doc{max-width:none}
}