@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@600;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
/* v4 (2026-10-08): 裏方×AI。色は地の色1つ＋差し色1つ（--pop）まで。発光・ぼかし・粒子・紫のグラデは使わない。 */

/* ---------- 「＿＿を、AIに。」 空欄の入れ替え ---------- */
.swap-line{margin:30px 0 0;font-family:var(--serif);font-size:clamp(26px,3.6vw,40px);line-height:1.4;color:var(--navy);display:flex;flex-wrap:wrap;align-items:baseline;gap:0}
.swap{position:relative;display:inline-grid;vertical-align:baseline;overflow:hidden;padding:0;margin-right:.04em;transition:width .55s cubic-bezier(.2,.8,.2,1)}
body.motion-paused .swap,body.wd .swap{transition:none}
.swap-word{grid-area:1/1;justify-self:start;white-space:nowrap;color:var(--pop);transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.swap-word.is-on{transform:translateY(0)}
.swap-word.is-out{transform:translateY(-105%)}
.swap-bar{position:absolute;left:0;bottom:.08em;height:2px;background:var(--pop);width:var(--swap-w,100%);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.swap-rest{white-space:nowrap}
.swap-note{display:block;margin-top:10px;font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.18em!important;color:var(--muted)}
body.motion-paused .swap-word,body.wd .swap-word{transition:none}
@media (prefers-reduced-motion:reduce){.swap-word,.swap-bar{transition:none}}

.hero .acts-v4{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:34px}
.btn-v4{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;background:var(--navy);color:#fff;font-weight:700;font-size:15px;border-radius:4px;transition:background .2s}
.btn-v4:hover{background:var(--pop)}
.btn-v4 small{font-family:var(--en);font-size:10px;font-weight:600;opacity:.75}

/* ---------- 事実の帯（数字は事実だけ） ---------- */
.fact-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.fact-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:22px 20px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact .k{display:block;font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.2em!important;text-transform:uppercase;color:var(--muted)}
.fact .v{display:block;margin-top:6px;font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--navy)}
.fact .v b{color:var(--pop);font-weight:600}
@media (max-width:860px){.fact .v{font-size:16px}.fact{padding:18px 12px 18px 0}.fact-bar .wrap{grid-template-columns:1fr 1fr}.fact{border-left:0;border-top:1px solid var(--line);padding-left:0}.fact:nth-child(-n+2){border-top:0}}

/* ---------- 配線図：LINE → 記録係 → 台帳 → 月報 ---------- */
.wire-sec{background:var(--navy-deep,#0e1118);color:#e8ecf3}
.wire-sec .section-head h2,.wire-sec .section-head p{color:#fff}
.wire-sec .section-head p{color:#b9c2d0}
.wire-sec .meta .lbl,.wire-sec .meta .num{color:#8f9bb0}
.wire{position:relative;list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.wire::before{content:"";position:absolute;left:4%;right:4%;top:23px;height:1px;background:rgba(232,236,243,.22)}
.wire::after{content:"";position:absolute;left:4%;right:4%;top:23px;height:1px;background:var(--pop);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
.wire.on::after{transform:scaleX(1)}
.wire-dot{position:absolute;top:18px;left:4%;width:11px;height:11px;border-radius:50%;background:var(--pop);opacity:0}
body.motion-enabled .wire.on .wire-dot{opacity:1;animation:wire-run 6s cubic-bezier(.45,0,.2,1) 1.8s infinite}
@keyframes wire-run{0%{left:4%}80%{left:calc(96% - 11px)}100%{left:calc(96% - 11px);opacity:0}}
.node{position:relative;padding:0 14px 0 0}
.node .pin{position:relative;z-index:1;display:block;width:47px;height:47px;border:1px solid rgba(232,236,243,.35);border-radius:50%;background:var(--navy-deep,#0e1118);display:grid;place-items:center;font-family:var(--en);font-size:11px;font-weight:600;color:#fff}
.node .step{display:block;margin-top:18px;font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.18em!important;color:#8f9bb0}
.node h3{margin:6px 0 0;font-size:18px;line-height:1.5;color:#fff}
.node p{margin:8px 0 0;font-size:13.5px;line-height:1.8;color:#b9c2d0}
.node .tag{display:inline-block;margin-top:12px;padding:3px 8px;border:1px solid var(--pop);border-radius:3px;font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.12em!important;color:#fff}
.node.is-human .tag{border-color:#e8ecf3}
.wire-note{margin-top:40px;font-size:13px;color:#8f9bb0}
.wire-note a{color:#fff;border-bottom:1px solid var(--pop)}
@media (max-width:980px){
  .wire{grid-template-columns:1fr;gap:26px;padding-left:64px}
  .wire::before,.wire::after{left:23px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .wire::after{transform:scaleY(0);transform-origin:top}
  .wire.on::after{transform:scaleY(1)}
  .wire-dot{display:none}
  .node{padding:0}
  .node .pin{position:absolute;left:-64px;top:0}
  .node .step{margin-top:0}
}
body.wd .wire::after{transition:none;transform:none}

/* ---------- 3つの手順（見る→写す→回す） ---------- */
.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--line)}
.flow3 .f{padding:30px 28px 10px 0;border-right:1px solid var(--line)}
.flow3 .f:last-child{border-right:0}
.flow3 .f+.f{padding-left:28px}
.flow3 .fig{font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.2em!important;color:var(--muted)}
.flow3 .verb{display:block;margin-top:10px;font-family:var(--serif);font-size:30px;line-height:1.3;color:var(--navy)}
.flow3 .verb em{font-style:normal;color:var(--pop)}
.flow3 p{margin-top:12px;font-size:14.5px}
@media (max-width:860px){.flow3{grid-template-columns:1fr}.flow3 .f{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}.flow3 .f+.f{padding-left:0}}

/* ---------- サービス価格の小札・やらないこと ---------- */
.price-chip{display:inline-block;margin-top:14px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--navy);background:#fff}
.price-chip b{color:var(--pop)}
.notdo{margin-top:18px;padding:16px 18px;border-left:2px solid var(--pop);background:var(--bg-soft);font-size:13.5px;line-height:1.85}
.notdo b{color:var(--navy)}
@media (max-width:560px){.fact-bar .wrap{grid-template-columns:1fr}.fact{border-top:1px solid var(--line)!important;padding:14px 0}.fact:first-child{border-top:0!important}.fact .v br{display:none}}

/* ---------- v4 動きの追加（10-08 一森「動き多くしていい」）。発光・ぼかし・粒子は使わない。動きを止める設定では全部止まる ---------- */
@media (prefers-reduced-motion:no-preference){
  /* 見出し：下から1行ずつせり上がる */
  body.motion-enabled .section-head.rv h2{clip-path:inset(0 0 100% 0);transform:translateY(18px);transition:clip-path .9s cubic-bezier(.2,.8,.2,1) .05s,transform .9s cubic-bezier(.2,.8,.2,1) .05s}
  body.motion-enabled .section-head.rv.on h2{clip-path:inset(0 0 -10% 0);transform:none}
  body.motion-enabled .section-head.rv .meta .bar{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .2s}
  body.motion-enabled .section-head.rv.on .meta .bar{transform:scaleX(1)}

  /* 事実の帯：順番に上がり、差し色の語に下線が引かれる */
  body.motion-enabled .fact{opacity:0;transform:translateY(14px);animation:v4-up .7s cubic-bezier(.2,.8,.2,1) forwards}
  body.motion-enabled .fact:nth-child(1){animation-delay:1.1s}
  body.motion-enabled .fact:nth-child(2){animation-delay:1.22s}
  body.motion-enabled .fact:nth-child(3){animation-delay:1.34s}
  body.motion-enabled .fact:nth-child(4){animation-delay:1.46s}
  body.motion-enabled .fact .v b{background:linear-gradient(var(--pop),var(--pop)) 0 100%/0 2px no-repeat;animation:v4-line .6s cubic-bezier(.2,.8,.2,1) forwards 1.9s}

  /* 3つの手順：番号の線が伸び、動詞が下から出る */
  body.motion-enabled .flow3 .f{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
  body.motion-enabled .flow3.on .f{opacity:1;transform:none}
  body.motion-enabled .flow3.on .f:nth-child(2){transition-delay:.14s}
  body.motion-enabled .flow3.on .f:nth-child(3){transition-delay:.28s}
  body.motion-enabled .flow3 .verb em{display:inline-block;background:linear-gradient(var(--pop),var(--pop)) 0 100%/0 3px no-repeat;transition:background-size .7s cubic-bezier(.2,.8,.2,1) .5s}
  body.motion-enabled .flow3.on .verb em{background-size:100% 3px}

  /* 配線図：点が通るたびに丸が差し色で塗られる（6秒で一周・80%で右端） */
  body.motion-enabled .wire .node{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
  body.motion-enabled .wire.on .node{opacity:1;transform:none}
  body.motion-enabled .wire.on .node:nth-child(2){transition-delay:.12s}
  body.motion-enabled .wire.on .node:nth-child(3){transition-delay:.24s}
  body.motion-enabled .wire.on .node:nth-child(4){transition-delay:.36s}
  body.motion-enabled .wire.on .node:nth-child(5){transition-delay:.48s}
  body.motion-enabled .wire.on .node:nth-child(6){transition-delay:.6s}
  body.motion-enabled .wire.on .node .pin{animation:v4-pin 6s linear infinite}
  body.motion-enabled .wire.on .node:nth-child(1) .pin{animation-delay:1.8s}
  body.motion-enabled .wire.on .node:nth-child(2) .pin{animation-delay:2.76s}
  body.motion-enabled .wire.on .node:nth-child(3) .pin{animation-delay:3.72s}
  body.motion-enabled .wire.on .node:nth-child(4) .pin{animation-delay:4.68s}
  body.motion-enabled .wire.on .node:nth-child(5) .pin{animation-delay:5.64s}
  body.motion-enabled .wire.on .node:nth-child(6) .pin{animation-delay:6.6s}
  body.motion-enabled .wire.on .node .tag{animation:v4-tag 6s linear infinite;animation-delay:inherit}
  body.motion-enabled .wire.on .node:nth-child(1) .tag{animation-delay:1.8s}
  body.motion-enabled .wire.on .node:nth-child(2) .tag{animation-delay:2.76s}
  body.motion-enabled .wire.on .node:nth-child(3) .tag{animation-delay:3.72s}
  body.motion-enabled .wire.on .node:nth-child(4) .tag{animation-delay:4.68s}
  body.motion-enabled .wire.on .node:nth-child(5) .tag{animation-delay:5.64s}
  body.motion-enabled .wire.on .node:nth-child(6) .tag{animation-delay:6.6s}

  /* サービス一覧：左から順に入り、ホバーで番号が差し色に・矢印が進む */
  body.motion-enabled .rows .row{opacity:0;transform:translateX(-18px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
  body.motion-enabled .rows.on .row{opacity:1;transform:none}
  body.motion-enabled .rows.on .row:nth-child(2){transition-delay:.08s}
  body.motion-enabled .rows.on .row:nth-child(3){transition-delay:.16s}
  body.motion-enabled .rows.on .row:nth-child(4){transition-delay:.24s}
  body.motion-enabled .rows.on .row:nth-child(5){transition-delay:.32s}
  body.motion-enabled .rows .row .no{transition:color .25s,transform .25s}
  body.motion-enabled .rows .row:hover .no{color:var(--pop);transform:translateX(6px)}
  body.motion-enabled .rows .row .arrow{transition:transform .25s}
  body.motion-enabled .rows .row:hover .arrow{transform:translate(4px,-4px)}

  /* 無料診断ボタン：数秒おきに軽く押される（クリックの手触り） */
  body.motion-enabled .btn-v4{animation:v4-press 5.5s ease-in-out infinite 3s}
  body.motion-enabled .btn-v4:hover{animation:none}

  /* サービスページ：価格の小札と「行わないこと」 */
  body.motion-enabled .svc-detail .price-chip{opacity:0;transform:translateY(8px);transition:opacity .6s .3s,transform .6s cubic-bezier(.2,.8,.2,1) .3s}
  body.motion-enabled .svc-detail.on .price-chip{opacity:1;transform:none}
  body.motion-enabled .svc-detail .notdo{border-left-color:transparent;background:linear-gradient(var(--pop),var(--pop)) 0 0/2px 0 no-repeat,var(--bg-soft);transition:background-size .8s cubic-bezier(.2,.8,.2,1) .5s}
  body.motion-enabled .svc-detail.on .notdo{background-size:2px 100%,auto}
}
@keyframes v4-up{to{opacity:1;transform:none}}
@keyframes v4-line{to{background-size:100% 2px}}
@keyframes v4-pin{0%{background:var(--pop);border-color:var(--pop)}12%{background:var(--pop);border-color:var(--pop)}20%,100%{background:var(--navy-deep,#0e1118);border-color:rgba(232,236,243,.35)}}
@keyframes v4-tag{0%,12%{background:var(--pop)}20%,100%{background:transparent}}
@keyframes v4-press{0%,92%,100%{transform:none}95%{transform:scale(.97)}}
body.wd .fact,body.wd .flow3 .f,body.wd .wire .node,body.wd .rows .row,body.wd .svc-detail .price-chip{opacity:1!important;transform:none!important;animation:none!important}
body.wd .section-head.rv h2{clip-path:none!important;transform:none!important}

/* =========================================================
   v4.1 デザイン刷新（10-08 一森「デザインのほうをアップデート」）
   方針：大見出しは1つを画面いっぱいに・他は小さく／等幅の小さな注記／白と炭色の切り替え／差し色は1つ
   ========================================================= */
body.v4{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--heavy:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;--char:#0e1118}

/* 見出しは極太のゴシックに */
body.v4 .section-head h2,body.v4 .page-hero h1,body.v4 .cta h2,body.v4 .svc-detail h2 .jp-keep{font-family:var(--heavy);font-weight:900;letter-spacing:-.01em!important}
body.v4 .section-head h2{font-size:clamp(30px,4.4vw,58px);line-height:1.22}
body.v4 .page-hero h1{font-size:clamp(34px,6vw,84px);line-height:1.12}
body.v4 .meta .num{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--pop)}
body.v4 .meta .lbl,body.v4 .lbl{font-family:var(--mono);letter-spacing:.08em!important}

/* ---------- ヒーロー ---------- */
.hero-v4{padding:118px 0 34px!important;min-height:calc(100svh - 0px);display:flex!important;flex-direction:column;justify-content:space-between}
.hero-v4 .time-field{opacity:.28}
.hero-v4 .wrap{position:relative;z-index:1}
.hv-top{display:flex;gap:28px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hv-mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em!important;color:var(--muted)}
.hv-top .hv-mono:last-child{margin-left:auto}
.hv-title{margin:clamp(28px,5vh,60px) 0 0;font-family:var(--heavy)!important;font-weight:900!important;font-size:clamp(58px,11.5vw,176px)!important;line-height:1.02!important;letter-spacing:-.035em!important;color:var(--char)}
.hv-row{display:flex;align-items:baseline;flex-wrap:nowrap}
.hv-title .swap{padding-bottom:.06em}
.hv-title .swap-word{color:var(--pop)}
.hv-title .swap-bar{height:.06em;bottom:0}
.hv-ai{color:var(--char)}
.hv-bottom{display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:28px 60px;align-items:end;margin-top:clamp(26px,4vh,48px);padding-top:24px;border-top:1px solid var(--line)}
.hv-lead{margin:0;max-width:560px;font-size:16px;line-height:1.95;color:var(--ink)}
.hv-lead b{color:var(--char)}
.hv-acts{display:flex;gap:16px 26px;align-items:center;flex-wrap:wrap}
.hv-brand{margin:28px 0 0;font-family:var(--serif);font-size:15px;color:var(--muted)}
.hv-brand span{color:var(--pop)}
@media (max-width:860px){
  .hero-v4{min-height:0}
  .hv-hide-sp{display:none}
  .hv-title{font-size:clamp(46px,14vw,80px)!important}
  .hv-row{flex-wrap:wrap}
  .hv-bottom{grid-template-columns:1fr}
}

/* ---------- 事実の帯を炭色の細帯に ---------- */
body.v4 .fact-bar{background:var(--char);border:0}
body.v4 .fact{border-color:rgba(255,255,255,.12)!important}
body.v4 .fact .k{font-family:var(--mono);color:#8f9bb0}
body.v4 .fact .v{color:#fff;font-family:var(--heavy);font-weight:900;font-size:18px}
body.v4 .fact .v b{color:#8fb0ff}

/* ---------- キーワード帯を大きく ---------- */
body.v4 .marquee b{font-family:var(--heavy);font-weight:900;font-size:clamp(22px,3vw,40px);color:var(--char)}
body.v4 .marquee .mq-en{font-family:var(--mono);font-size:13px}

/* ---------- 見る→写す→回す ---------- */
body.v4 .flow3 .verb{font-family:var(--heavy);font-weight:900;font-size:clamp(40px,5vw,72px);letter-spacing:-.03em!important}
body.v4 .flow3 .fig{font-family:var(--mono)}

/* ---------- サービス一覧を炭色の面に ---------- */
body.v4 .section.soft:has(.rows){background:var(--char)}
body.v4 .section.soft:has(.rows) .section-head h2{color:#fff}
body.v4 .section.soft:has(.rows) .section-head p{color:#b9c2d0}
body.v4 .rows .row{border-color:rgba(255,255,255,.12)!important;color:#fff;padding:30px 0!important;position:relative;overflow:hidden}
body.v4 .section.soft:has(.rows) .rows .row .ttl{font-family:var(--heavy);font-weight:900;font-size:clamp(20px,2.4vw,30px);color:#fff}
body.v4 .section.soft:has(.rows) .rows .row .en{font-family:var(--mono);color:#8f9bb0}
body.v4 .section.soft:has(.rows) .rows .row .desc{color:#b9c2d0}
body.v4 .section.soft:has(.rows) .rows .row .no{font-family:var(--mono);color:#8f9bb0}
body.v4 .section.soft:has(.rows) .rows .row .arrow{color:#fff}
body.v4 .rows .row::before{content:"";position:absolute;inset:0;background:var(--pop);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:0}
body.v4 .rows .row>*{position:relative;z-index:1}
body.v4 .rows .row:hover::before{transform:scaleY(1)}
body.v4 .section.soft:has(.rows) .rows .row:hover .desc,body.v4 .section.soft:has(.rows) .rows .row:hover .en,body.v4 .section.soft:has(.rows) .rows .row:hover .no{color:#fff}
body.v4 .section.soft:has(.rows) .meta .lbl{color:#8f9bb0}

/* ---------- 実績：画像を少し寄せる ---------- */
body.v4 .home-work .media{overflow:hidden}
body.v4 .home-work .media img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
body.v4 .home-work:hover .media img{transform:scale(1.04)}

/* ---------- 選ばれる理由：大きな番号 ---------- */
body.v4 .feature .n{font-family:var(--mono);font-size:13px;color:var(--pop)}
body.v4 .feature h3{font-family:var(--heavy);font-weight:900;font-size:22px}

/* ---------- 締め：白と黒を切り替える大きな2行 ---------- */
body.v4 .closing{background:var(--char)}
body.v4 .closing h2{font-size:clamp(36px,6.4vw,96px);line-height:1.12;color:#fff}
body.v4 .closing h2 .phrase:last-child{color:#8fb0ff}

/* ---------- ボタン ---------- */
body.v4 .btn-v4{border-radius:0;padding:17px 26px;background:var(--char)}
body.v4 .closing .btn-v4{background:#fff;color:var(--char)}
body.v4 .closing .btn-v4:hover{background:var(--pop);color:#fff}

/* ---------- 下層ページの見出し ---------- */
body.v4 .page-hero .meta .num{font-family:var(--mono)}
body.v4 .svc-detail h2 .jp-keep{font-size:clamp(26px,3.4vw,44px);line-height:1.25}

/* ---------- スクロールで大見出しが少し沈む（JSで--hv） ---------- */
body.v4.motion-enabled .hv-title{transform:translateY(calc(var(--hv,0) * 40px));opacity:calc(1 - var(--hv,0) * .35)}
body.wd .hv-title{transform:none!important;opacity:1!important}

/* 10-08 一森「アンダーバーはダサい」→ 下線の演出を全部外す */
.swap-bar{display:none!important}
body.motion-enabled .fact .v b,body.v4 .fact .v b{background:none!important;animation:none!important}
body.motion-enabled .flow3 .verb em,body.v4 .flow3 .verb em{background:none!important}

/* =========== v4.2 モーショングラフィック =========== */
/* ① 1文字ずつ弾む（少し行き過ぎて戻る曲線） */
.hv-title .swap-word{transform:none!important;transition:none!important}
.hv-title .swap-word .ch{display:inline-block;transform:translateY(112%);transition:transform .62s cubic-bezier(.34,1.56,.64,1)}
.hv-title .swap-word.is-on .ch{transform:none}
.hv-title .swap-word.is-out .ch{transform:translateY(-112%);transition:transform .3s cubic-bezier(.5,0,.75,0);transition-delay:0s!important}
body.motion-paused .hv-title .swap-word .ch,body.wd .hv-title .swap-word .ch{transition:none}

/* ② 網点の絵（右半分） */
.hero-v4 .time-field{display:none}
.v4-halftone{position:absolute;z-index:0;pointer-events:none}
.hero-v4 .hv-bottom,.hero-v4 .hv-top{position:relative;z-index:1;background:linear-gradient(90deg,#fff 70%,rgba(255,255,255,0))}
@media (max-width:860px){.v4-halftone{display:none}}

/* ③ 案内する点 */
.v4-guide{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--pop);z-index:60;pointer-events:none;opacity:0;transition:opacity .3s}
@media (max-width:860px){.v4-guide{display:none}}

/* ④ 手順の線画 */
.flow3 .pict{display:block;width:64px;height:64px;margin-top:14px;overflow:visible}
.flow3 .pict *{fill:none;stroke:var(--pop);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.motion-enabled .flow3 .pict *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) .35s}
body.motion-enabled .flow3.on .pict *{stroke-dashoffset:0}
body.motion-enabled .flow3.on .f:nth-child(2) .pict *{transition-delay:.55s}
body.motion-enabled .flow3.on .f:nth-child(3) .pict *{transition-delay:.75s}
body.motion-enabled .flow3.on .pict.p-see .pupil{animation:v4-look 4s ease-in-out infinite 1.6s}
body.motion-enabled .flow3.on .pict.p-copy .sheet2{animation:v4-copy 3.2s cubic-bezier(.34,1.56,.64,1) infinite 1.6s}
body.motion-enabled .flow3.on .pict.p-run .loop{transform-origin:32px 32px;animation:v4-spin 3.6s cubic-bezier(.65,0,.35,1) infinite 1.8s}
@keyframes v4-look{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
@keyframes v4-copy{0%,15%{transform:translate(-14px,0);opacity:.2}45%,100%{transform:none;opacity:1}}
@keyframes v4-spin{0%,20%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
/* 10-08 見出しを「＿＿は、AIで回す。」に（語が長くなったので少し小さく） */
.hv-title{font-size:clamp(46px,8.6vw,132px)!important}
@media (max-width:860px){.hv-title{font-size:clamp(30px,9.4vw,60px)!important}.hv-row{flex-wrap:nowrap!important}}

/* =========================================================
   v4.3 「AI感を出さない」（10-08 一森「字体とか、全ページ」）
   紙と墨：生成りの地・墨の文字・朱の差し色1つ。見出しは明朝、本文はゴシック。
   等幅フォント・英字の大文字ラベル・幾何学の線画（.time-field）は使わない。
   ========================================================= */
body.v4{--navy:#22201c;--navy-deep:#22201c;--navy-2:#3a3631;--ink:#3b3732;--muted:#857d71;--muted-2:#857d71;--line:#e2dbcd;--bg:#f8f5ef;--bg-soft:#f1ece2;--pop:#b8402a;--pop-d:#9a3321;--char:#22201c;
  --mono:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;--heavy:"Shippori Mincho B1","Shippori Mincho","Noto Serif JP",serif;
  background:var(--bg);color:var(--ink)}
body.v4 .hero,body.v4 .page-hero,body.v4 .section,body.v4 .site-header,body.v4 .fact-bar{background-color:var(--bg)}
body.v4 .section.soft{background:var(--bg-soft)}
body.v4 .site-header.scrolled{background:rgba(248,245,239,.92)}
body.v4 .time-field{display:none!important}
body.v4 .progress{background:var(--pop)}

/* 文字：英字の大文字・字間・等幅をやめる */
body.v4 .lbl,body.v4 .meta .lbl,body.v4 .meta .num,body.v4 .hv-mono,body.v4 .fact .k,body.v4 .flow3 .fig,body.v4 .nav-links a,body.v4 .feature .n,body.v4 .rows .row .no,body.v4 .site-footer h4,body.v4 .cat,body.v4 .scope{font-family:var(--mono);text-transform:none!important;letter-spacing:.04em!important;font-weight:500}
body.v4 .nav-links a{font-size:13.5px}
body.v4 .meta .num{color:var(--pop);font-size:13px}
body.v4 .meta .bar{background:var(--pop)}

/* 見出しは明朝（太め）に */
body.v4 .section-head h2,body.v4 .page-hero h1,body.v4 .cta h2,body.v4 .svc-detail h2 .jp-keep,body.v4 .feature h3,body.v4 .flow3 .verb,body.v4 .rows .row .ttl,body.v4 .marquee b,body.v4 .fact .v{font-family:var(--heavy)!important;font-weight:800!important;letter-spacing:.01em!important}
.hv-title{font-family:var(--heavy)!important;font-weight:800!important;letter-spacing:0!important;line-height:1.12!important;color:var(--char)}
.hv-title .swap-word{color:var(--pop)}
.hv-brand{display:none}
.hv-lead b{color:var(--char)}

/* 墨の面（事実の帯・サービス一覧・締め） */
body.v4 .fact-bar,body.v4 .section.soft:has(.rows),body.v4 .closing{background:var(--char)}
body.v4 .fact .v b{color:#e9a48f}
body.v4 .closing h2 .phrase:last-child{color:#e9a48f}
body.v4 .rows .row::before{background:var(--pop)}

/* ボタン：角は少しだけ丸く、墨→朱 */
body.v4 .btn-v4{background:var(--char);border-radius:2px;font-family:var(--mono);letter-spacing:.06em!important}
body.v4 .btn-v4 small{font-size:11px;padding:2px 6px;border:1px solid rgba(255,255,255,.5);border-radius:2px;opacity:1}
body.v4 .btn-v4:hover{background:var(--pop)}

/* 網点の絵・案内の点も朱に（印刷の網点の見え方） */
.v4-guide{background:var(--pop)}

/* 手順の番号を漢数字で大きく */
body.v4 .flow3 .fig{font-family:var(--heavy);font-size:22px;color:var(--pop);letter-spacing:0!important}
body.v4 .flow3 .pict *{stroke:var(--char)}
body.v4 .hero-v4 .hv-bottom,body.v4 .hero-v4 .hv-top{background:linear-gradient(90deg,var(--bg) 70%,rgba(248,245,239,0))}

/* 10-08 一森「色味は前のでもいい」→ 色は元の白・紺・青に戻す（字体・日本語ラベルはv4.3のまま） */
body.v4{--navy:#172032;--navy-deep:#0e1118;--navy-2:#25334e;--ink:#363c48;--muted:#687180;--muted-2:#687180;--line:#e1e5eb;--bg:#ffffff;--bg-soft:#f5f6f8;--pop:#2455db;--pop-d:#1840b1;--char:#0e1118}
body.v4 .site-header.scrolled{background:rgba(255,255,255,.92)}
body.v4 .fact .v b,body.v4 .closing h2 .phrase:last-child{color:#8fb0ff}
body.v4 .hero-v4 .hv-bottom,body.v4 .hero-v4 .hv-top{background:linear-gradient(90deg,#fff 70%,rgba(255,255,255,0))}

/* 10-10 公開前検品の不具合修正（デザインは変えない）
   ① 会社概要・制作実績の締め（.cta-dark）が v4.3 の地色で白になり、白い見出しが見えなかった → 締めと同じ墨の面に戻す
   ② 締めの「そのほかのご相談 →」が紺で墨の地に沈んでいた／ボタンが本文に接していた／白いボタンの「無料」の枠が見えなかった */
body.v4 .section.cta-dark{background:var(--char)}
body.v4 .cta-dark .acts-v4{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center;margin-top:34px}
body.v4 .cta-dark .lnk{margin-top:0;color:#fff}
body.v4 .cta-dark .lnk:hover{color:#8fb0ff}
body.v4 .closing .btn-v4 small{border-color:currentColor}