/* トップページ専用（index.html だけが読む）: ヒーローの現場スケッチ／ご相談の入口／お知らせ1行／
   ミッション文／その他のプロダクトのカルーセル操作／業務改善のギミック（書き写しの回数）。 */
/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--line);padding-top:var(--hd)}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:56px var(--gut) 44px;display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:40px 56px;align-items:center}
.hero h1{font-size:clamp(32px,3.5vw,52px);line-height:1.36;letter-spacing:.02em}
.hero h1 .l2{display:block;white-space:nowrap}
.hero-lead{margin-top:26px;font-size:17px;line-height:1.95;color:var(--ink-2);max-width:30em}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.scene{margin:0}
.scene[hidden]{display:none}
.sk-wrap{position:relative;padding-right:56px}
.scene .sk{width:100%;height:auto;aspect-ratio:4/3;color:var(--ink)}
.inset{position:absolute;right:0;bottom:-8px;width:150px;margin:0}
.inset img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 34px rgba(22,33,58,.16)}
.inset.card img{border-radius:8px;transform:rotate(3deg)}
.inset figcaption{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.scene-cap{margin-top:18px;display:grid;gap:4px;border-top:1px solid var(--line);padding-top:14px}
.scene-cap .place{font-weight:700;font-size:15px}
.scene-cap p{font-size:14px;color:var(--ink-2);line-height:1.8}
.scene-cap a{justify-self:start;margin-top:6px;font-size:14px}
.tabs{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}
.tab{position:relative;border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);min-height:44px;padding:0 14px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;overflow:hidden;transition:border-color var(--t0) var(--ease),color var(--t0) var(--ease)}
.tab[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.tab .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.tab[aria-pressed="true"] .bar.run{animation:tabbar var(--dur,9s) linear forwards}
@keyframes tabbar{to{transform:scaleX(1)}}
/* mission */
.mission{padding:96px 0 0}
.mission-text{font-size:clamp(24px,3vw,42px);font-weight:600;line-height:1.75;letter-spacing:.03em;max-width:24em;font-feature-settings:"palt" 1}
.js .mission-text .c{color:#737f90;transition:color var(--t0) var(--ease)}
.js .mission-text .c.on{color:var(--ink)}
.car-ctl{display:none}
/* ── ヒーロー: ご用件から探す（見る人ごとの入口）と、最新のお知らせ1行 ── */
.routes{margin-top:30px;border-top:1px solid var(--ink);max-width:480px}
.routes-h{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.06em;padding:12px 0 2px}
.routes a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 6px 12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding var(--t0) var(--ease),background-color var(--t0) var(--ease)}
.routes b{display:block;font-size:16px;font-weight:700;line-height:1.5}
.routes .ds{display:block;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.routes .ar{color:var(--blue-ink);transition:transform var(--t0) var(--ease)}
.routes a:focus-visible{padding-left:10px;background:var(--panel-2)}
@media (hover:hover){
  .routes a:hover{padding-left:10px;background:var(--panel-2)}
  .routes a:hover .ar{transform:translateX(4px)}
}
.routes a:focus-visible .ar{transform:translateX(4px)}
/* 背の低い PC 画面: 入口が4本でも、お知らせの1行が最初の画面に残るように詰める */
@media (min-width:981px) and (max-height:820px){
  .hero-in{padding-top:40px}
  .routes a{padding-top:9px;padding-bottom:9px}
}
.hero-ask{display:inline-flex;margin-top:18px}
.hero-news{border-top:1px solid var(--line)}
.hn-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:18px;min-height:52px}
.hn-label{flex:none;font-size:12px;font-weight:600;color:var(--blue-ink);letter-spacing:.06em}
.hn-list{list-style:none;margin:0;padding:0;flex:1;min-width:0}
.hn-list a{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);font-size:14px;min-height:44px}
.hn-list time{flex:none;font-size:13px;color:var(--ink-3)}
.hn-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-list a:hover span{text-decoration:underline;text-underline-offset:3px}
/* 切り替えの動きは transform だけ（止まっても文字は見える） */
.hn-list li.enter{animation:hnIn var(--t1) var(--ease)}
@keyframes hnIn{from{transform:translateY(45%)}}
.hn-all{flex:none;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.hn-all:hover{color:var(--blue-ink)}
@media (max-width:640px){
  .routes{margin-top:22px;max-width:none}
  .routes a{gap:8px;padding:10px 0}
  .routes b{font-size:15px}
  .routes .ds{font-size:12px}
  .routes-h{padding-top:10px}
  .hero-ask{margin-top:12px}
  .hn-in{gap:12px}
  .hn-label{display:none}
  .hn-list a{gap:10px;font-size:13px}
  .hn-list time{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .hn-list li.enter{animation:none}
}
/* ── 書き写しの回数（業務改善のギミック）: 同じ名前を何回書くかを、手書きの転記と Seeker で比べる ── */
.kz{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 56px;align-items:start}
.kz .sec-h{margin-bottom:0}
.kz-body{margin-top:18px;color:var(--ink-2);max-width:30em}
.kz-in{margin-top:26px}
.kz-in label{display:block;font-size:13px;font-weight:500;color:var(--ink-3)}
.kz-in input{margin-top:6px;width:100%;max-width:320px;font:600 21px/1.4 var(--font);letter-spacing:.04em;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;min-height:54px}
.kz-in input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:transparent}
.kz-mode{display:inline-flex;gap:6px;margin-top:14px;max-width:100%}
.kz-mode button{min-height:46px;padding:0 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);font:600 14px/1.3 var(--font);color:var(--ink-2);cursor:pointer}
.kz-mode button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.kz-count{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.kz-count dt{font-size:13px;font-weight:500;color:var(--ink-3)}
.kz-count dd{margin:2px 0 0;display:flex;align-items:baseline;gap:6px}
.kz-num{font:700 clamp(64px,7vw,96px)/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.02em}
.kz-unit{font-size:20px;font-weight:600;color:var(--ink)}
.kz.is-seeker .kz-num{color:var(--blue-ink)}
.kz-count dd{align-items:center}
.kz-tally{width:58px;height:58px;margin-left:16px;overflow:visible;flex:none}
.kz-tally path{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .4s ease}
.kz-tally path.on{stroke-dashoffset:0}
.kz.is-seeker .kz-tally path{stroke:var(--blue-ink)}
.kz-pay{margin-top:10px;font-size:17px;font-weight:700;color:var(--ink)}
.kz-pay span{display:none}
.kz:not(.is-seeker) .kz-pay .m,.kz.is-seeker .kz-pay .s{display:inline}
.kz-foot{margin-top:14px;display:flex;gap:6px 18px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.kz-replay{background:none;border:0;border-bottom:1px solid var(--ink-3);padding:6px 0;min-height:32px;font:500 13px/1 var(--font);color:var(--ink-2);cursor:pointer}
.desk{position:relative;height:548px}
.doc{position:absolute;width:44%;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(22,33,58,.06),0 10px 22px -14px rgba(22,33,58,.28);padding:12px 16px 14px;font-size:13px;line-height:1.7;transition:transform .3s ease,box-shadow .3s ease}
.doc header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:7px;margin-bottom:6px;border-bottom:1.5px solid var(--ink)}
.doc header b{font-size:14.5px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.doc header span{font-size:11.5px;color:var(--ink-3)}
.doc dl{margin:0}
.doc dl div{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:8px;padding:3px 0;border-bottom:1px dotted var(--line)}
.doc dt{color:var(--ink-3);font-size:12px}
.doc dd{margin:0;color:var(--ink-2)}
.doc table{width:100%;border-collapse:collapse;font-size:12px}
.doc th,.doc td{border:1px solid var(--line-2);padding:3px 5px;text-align:center;font-weight:400;color:var(--ink-2)}
.doc th{color:var(--ink-3);font-size:11px;background:var(--panel-2)}
.doc td.l{text-align:left}
.d1{left:4%;top:24px;transform:rotate(-1.1deg)}
.d2{left:52%;top:40px;transform:rotate(.8deg)}
.d3{left:6%;top:232px;transform:rotate(.7deg)}
.d4{left:53%;top:246px;transform:rotate(-.9deg)}
.d5{left:27%;top:416px;transform:rotate(.4deg)}
.doc.is-writing{box-shadow:0 2px 4px rgba(22,33,58,.08),0 18px 30px -16px rgba(22,33,58,.4);z-index:2}
.d1.is-writing{transform:rotate(-1.1deg) translateY(-6px)}
.d2.is-writing{transform:rotate(.8deg) translateY(-6px)}
.d3.is-writing{transform:rotate(.7deg) translateY(-6px)}
.d4.is-writing{transform:rotate(-.9deg) translateY(-6px)}
.d5.is-writing{transform:rotate(.4deg) translateY(-6px)}
.w{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;min-width:6.5em;min-height:1.5em;padding:0 2px;border-bottom:1px dashed var(--ink-3);font:600 17px/1.45 "Klee One",var(--font);letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.is-done .w{border-bottom-style:solid;border-bottom-color:var(--ink)}
.kz.is-seeker .w{font:700 14px/1.6 var(--font);color:var(--blue-ink);border-bottom-color:var(--blue)}
.w.caret::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--ink);animation:kzblink 1s steps(1) infinite}
@keyframes kzblink{50%{background:transparent}}
@keyframes kzsync{from{box-shadow:0 0 0 5px rgba(48,128,255,.35)}}
.kz-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.kz-lines path{fill:none;stroke:var(--blue);stroke-width:1.4}
.kz-lines circle{fill:var(--blue)}
@media (max-width:980px){
  .kz{grid-template-columns:minmax(0,1fr);gap:0}
  /* スマホ・タブレットでは「入力 → 帳票 → 回数」の順に並べ、帳票を見ながら回数が目に入るようにする */
  .kz-side{display:contents}
  .kz-side>*{order:1}
  .kz>.desk{order:2;margin-top:24px}
  .kz-side>.kz-count,.kz-side>.kz-pay,.kz-side>.kz-foot{order:3}
  .kz-mode{justify-self:start}
  .kz-count{position:sticky;bottom:0;z-index:4;margin-top:16px;padding:10px 0 12px;background:var(--bg);border-top:1px solid var(--line)}
  .kz-count dt{font-size:12px}
  .kz-num{font-size:46px}
  .kz-tally{width:40px;height:40px}
  .desk{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .doc{position:static;width:auto;transform:none!important}
  .d5{grid-column:1/-1}
  .kz-lines{display:none}
  .kz.is-seeker .doc{border-color:var(--blue)}
  .doc.sync{animation:kzsync .9s var(--ease)}
}
@media (max-width:640px){
  .desk{gap:10px}
  .doc{padding:10px 10px 12px;font-size:12px}
  .doc header{flex-direction:column;gap:0}
  .doc header b{font-size:14px}
  .doc .sub{display:none}
  .doc dl div{grid-template-columns:1fr;gap:0}
  .w{min-width:0;width:100%;font-size:16px}
  .kz.is-seeker .w{font-size:13px}
  .kz-mode{display:flex;width:100%}
  .kz-mode button{flex:1;padding:0 10px;font-size:13.5px}
  .kz-in input{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .kz-tally path{transition:none}
  .w.caret::after{animation:none}
  .doc{transition:none}
}
@media (max-width:980px){
  .scene-cap{min-height:140px}
  .hero-in{grid-template-columns:1fr;padding:44px var(--gut) 32px}
}
@media (max-width:760px){
  /* 右下の「上へ戻る」と重ならないよう、操作は左に置く */
  .car-ctl{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:14px}
  .car-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
  .car-btn:disabled{color:var(--ink-faint);cursor:default}
  .car-pos{order:3;font-size:13px;color:var(--ink-2);min-width:3.5em;text-align:center;margin-left:6px}
  .car-pos b{color:var(--ink)}
}
@media (max-width:640px){
  .hero-in{padding:28px var(--gut) 24px;gap:24px}
  .hero-lead{font-size:15px;margin-top:16px;line-height:1.85}
  .hero-cta{margin-top:22px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .sk-wrap{padding-right:36px}
  .inset{width:92px;bottom:-14px}
  .inset figcaption{font-size:12px}
  .scene-cap{margin-top:14px;padding-top:12px;min-height:158px}
  .scene-cap p{font-size:13.5px}
  .tabs{flex-wrap:nowrap;gap:4px;margin-top:14px}
  .tab{flex:1 1 auto;padding:0 6px;font-size:12px}
  .mission{padding-top:64px}
  .mission-text{font-size:21px;line-height:1.7}
}

/* 業務改善（スマホ）: 長い名前でも帳票の列が広がらないように */
@media (max-width:980px){
  .desk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc{min-width:0}
}

/* サービスの見出し: スマホで「手が／けています」と語の途中で折れないよう、句ごとに折る（行ごとの演出 data-mask はタグを剥がすので付けない） */
#services-h span{display:inline-block}