/* =========================================================
   v5 (2026-11-02)：洗練。一森「洗練された感欲しい」
   - 色：明るい青をやめ、ロゴの紺1色＋細い朱の線だけ（ココナラの表紙と同じ組み）
   - 字：見出しの明朝は太さ800→600、字間を少し開ける。本文は行間を広く
   - 引く：キーワードの流れる帯・網点の絵・案内の点は出さない（動きは見出しの入れ替えとせり上がりだけ）
   - 余白：章の上下を広げ、線は細く薄く
   v4.css の後に読む。v4.css は触っていない。
   ========================================================= */
body.v4{--navy:#16294a;--navy-deep:#0f1a2e;--navy-2:#2a3b5c;--ink:#3a3f4a;--muted:#7a808b;--muted-2:#7a808b;--line:#e6e8ec;--bg:#ffffff;--bg-soft:#f6f6f4;--pop:#16294a;--pop-d:#0f1a2e;--char:#0f1a2e;--accent:#c8102e}

/* 本文：行間と字間を広く、色を少し柔らかく */
body.v4{letter-spacing:.02em}
body.v4 p,body.v4 li,body.v4 .a{line-height:2}
body.v4 .section-head p,body.v4 .page-hero p,body.v4 .hv-lead{color:var(--ink);font-size:15.5px}

/* 見出し：明朝600・字間を開ける */
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 .fact .v{font-weight:600!important;letter-spacing:.06em!important}
body.v4 .section-head h2{font-size:clamp(26px,3.4vw,44px);line-height:1.55}
body.v4 .page-hero h1{font-size:clamp(30px,4.6vw,60px);line-height:1.45}
body.v4 .cta h2{line-height:1.6}

/* 大見出し：細く・少し小さく・字間を開ける。入れ替わる語は紺 */
.hv-title{font-weight:600!important;font-size:clamp(44px,7.6vw,116px)!important;line-height:1.28!important;letter-spacing:.04em!important}
@media (max-width:860px){.hv-title{font-size:clamp(34px,10vw,60px)!important}}
.hv-title .swap-word{color:var(--navy)}
.hv-title .hv-ai{position:relative}
.hv-title .hv-ai::after{content:"";position:absolute;left:0;bottom:-.18em;width:64px;height:2px;background:var(--accent)}

/* 小さなラベル：紺の細字、番号の線は朱 */
body.v4 .meta .num{color:var(--navy);font-weight:500}
body.v4 .meta .bar{background:var(--accent);height:1px}
body.v4 .lbl,body.v4 .meta .lbl,body.v4 .hv-mono{color:var(--muted);letter-spacing:.12em!important}
body.v4 .progress{background:var(--accent);height:2px}

/* 引く物 */
body.v4 .marquee,.v4-halftone,.v4-guide{display:none!important}

/* 余白を広く */
body.v4 .section{padding-top:clamp(88px,11vw,150px);padding-bottom:clamp(88px,11vw,150px)}
body.v4 .section-head{margin-bottom:clamp(44px,5vw,72px)}

/* 事実の帯：紺の面に細い区切り線 */
body.v4 .fact-bar{background:var(--navy-deep)}
body.v4 .fact .v{font-size:clamp(16px,1.5vw,20px);line-height:1.7}
body.v4 .fact .v b,body.v4 .closing h2 .phrase:last-child{color:#c9d3e6}
body.v4 .fact .k{color:rgba(255,255,255,.55)}

/* サービス一覧：線を細く、ホバーは面でなく朱の細線 */
body.v4 .fact-bar,body.v4 .section.soft:has(.rows),body.v4 .closing,body.v4 .section.cta-dark{background:var(--navy-deep)}
body.v4 .rows .row{border-color:rgba(255,255,255,.12)!important}
body.v4 .rows .row::before{background:transparent!important}
body.v4 .rows .row .ttl{font-size:clamp(19px,2vw,26px)!important}
body.v4 .rows .row .desc{color:rgba(255,255,255,.62);line-height:1.9}
body.v4 .rows .row:hover .ttl{color:#fff}
body.v4 .rows .row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
body.v4 .rows .row{position:relative}
body.v4 .rows .row:hover::after{width:100%}

/* 手順：漢数字は紺の細字、絵の線は細く */
body.v4 .flow3 .fig{color:var(--accent);font-weight:600}
body.v4 .flow3 .verb{font-size:clamp(30px,3.4vw,46px)!important}
body.v4 .flow3 .pict *{stroke-width:1.4}

/* カード：枠を薄く、影を消す */
body.v4 .feature,body.v4 .fit{box-shadow:none!important;border-color:var(--line)!important}
body.v4 .feature .n{color:var(--accent)}

/* ボタン：紺の四角、ホバーで朱の下線 */
body.v4 .btn-v4{background:var(--navy);border-radius:0;letter-spacing:.12em!important;font-weight:500}
body.v4 .btn-v4:hover{background:var(--navy-deep);box-shadow:inset 0 -2px 0 var(--accent)}
body.v4 .closing .btn-v4,body.v4 .cta-dark .btn-v4{background:#fff;color:var(--navy)}
body.v4 .closing .btn-v4:hover,body.v4 .cta-dark .btn-v4:hover{background:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
body.v4 .cta-dark .lnk:hover{color:#c9d3e6}

/* 値段の札：枠だけの細い札 */
body.v4 .price-chip{background:transparent!important;border:1px solid var(--line);color:var(--ink);border-radius:0}

/* ヘッダー：細い下線 */
body.v4 .site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line)}

/* 11-02 字を減らした後：事実の帯は2つだけなので2列 */
@media (min-width:561px){body.v4 .fact-bar .wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* =========================================================
   11-02 一森「もっとアニメーションというかグラフィック的な」
   細い線の絵（紺1色＋朱のチェック）。動きを止める設定では描き終えた静止画
   ========================================================= */
.v5-flow{position:relative;z-index:1;width:min(1100px,92vw);margin:clamp(28px,6vh,70px) auto 0}
.v5-flow svg{display:block;width:100%;height:auto;overflow:visible}
.v5-flow .sh{fill:#fff;stroke:var(--navy);stroke-width:1.1}
.v5-flow .sk{fill:none;stroke:#b9c0cc;stroke-width:1.1;stroke-linecap:round}
.v5-flow .rail{fill:none;stroke:#d5d9e0;stroke-width:1;stroke-dasharray:2 6}
.v5-flow .ring{fill:#fff;stroke:var(--navy);stroke-width:1.1}
.v5-flow .ai{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:17px;fill:var(--navy);letter-spacing:.06em}
.v5-flow .dot{fill:var(--navy)}
.v5-flow .ln{fill:none;stroke:var(--navy);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.v5-flow .chk{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.v5-flow .cap{font-family:"Zen Kaku Gothic New",sans-serif;font-size:12px;fill:var(--muted);letter-spacing:.14em}
@media (max-width:640px){.v5-flow .cap{font-size:18px}}

body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .left .j{animation:v5-jitter 7s ease-in-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .left > g:nth-child(2) .j{animation-delay:-.6s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .left > g:nth-child(3) .j{animation-delay:-1.3s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .left > g:nth-child(4) .j{animation-delay:-2s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .d1{animation:v5-d1 7s cubic-bezier(.6,0,.3,1) infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .d2{animation:v5-d2 7s cubic-bezier(.6,0,.3,1) infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ring{animation:v5-ring 7s ease-in-out infinite;transform-origin:450px 90px}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ln{animation:v5-ln 7s ease-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ln1{animation-delay:.12s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ln2{animation-delay:.24s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ln3{animation-delay:.36s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .ln4{animation-delay:.48s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .chk{animation:v5-chk 7s ease-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .sr0,body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .sr1{animation:v5-sr 7s ease-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-flow .sr1{animation-delay:.15s}
@keyframes v5-jitter{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-4px)}}
@keyframes v5-d1{0%{transform:translateX(0);opacity:0}5%{opacity:1}30%{transform:translateX(200px);opacity:1}33%,100%{transform:translateX(200px);opacity:0}}
@keyframes v5-d2{0%,36%{transform:translateX(0);opacity:0}40%{opacity:1}58%{transform:translateX(200px);opacity:1}61%,100%{transform:translateX(200px);opacity:0}}
@keyframes v5-ring{0%,30%,40%,100%{transform:scale(1)}34%{transform:scale(1.08)}}
@keyframes v5-ln{0%,58%{stroke-dashoffset:1}72%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes v5-chk{0%,76%{stroke-dashoffset:1}84%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes v5-sr{0%,56%{opacity:0;transform:translateY(6px)}62%,96%{opacity:1;transform:none}100%{opacity:0}}

/* サービス一覧の紺の面の大きな曲線 */
body.v4 .section.soft:has(.rows){position:relative;overflow:hidden}
body.v4 .section.soft:has(.rows) > .wrap{position:relative;z-index:1}
.v5-sweep{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.v5-sweep path{fill:none;stroke:rgba(201,211,230,.28);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.v5-sweep path.thin{stroke:rgba(200,16,46,.45)}

/* 章の頭の朱の線が、出てくる時に伸びる */
body.motion-enabled:not(.motion-paused):not(.wd) .section-head.rv .meta .bar{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s}
body.motion-enabled:not(.motion-paused):not(.wd) .section-head.rv.on .meta .bar{transform:scaleX(1)}
/* 大見出しの下の朱の線も、読み込みで伸びる */
body.motion-enabled:not(.motion-paused):not(.wd) .hv-title .hv-ai::after{animation:v5-bar 1.2s cubic-bezier(.2,.7,.2,1) .6s both}
@keyframes v5-bar{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
/* 大切にしていること：カードの上に細い線が描かれる */
body.v4 .feature{position:relative}
body.v4 .feature::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
body.v4 .rv-st.on .feature::before{transform:scaleX(.18)}
body.v4 .feature:hover::before{transform:scaleX(1)}

/* ---------- 11-02 大見出しの入れ替え：弾む1文字ずつをやめ、静かに入れ替える（一森「変すぎる」） ---------- */
.hv-title .swap{overflow:visible!important;transition:width .9s cubic-bezier(.4,0,.2,1)!important}
.hv-title .swap-word .ch{display:inline!important;transform:none!important;transition:none!important}
.hv-title .swap-word{opacity:0;transform:translateY(.1em)!important;transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)!important}
.hv-title .swap-word.is-on{opacity:1;transform:none!important}
.hv-title .swap-word.is-out{opacity:0;transform:translateY(-.1em)!important;transition:opacity .5s ease,transform .7s ease!important}
body.motion-paused .hv-title .swap-word,body.wd .hv-title .swap-word{transition:none!important}
@media (prefers-reduced-motion:reduce){.hv-title .swap-word{transition:none!important}}

/* ---------- 11-02 下層ページの見出しの右の線の絵 ---------- */
.v5-page-art{position:absolute;right:max(4vw,calc((100vw - 1200px)/2));top:50%;transform:translateY(-38%);width:min(34vw,440px);z-index:1;pointer-events:none}
.v5-page-art svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:1000px){.v5-page-art{display:none}}
.v5-page-art .sh{fill:#fff;stroke:var(--navy);stroke-width:1.1}
.v5-page-art .base{fill:none;stroke:#d5d9e0;stroke-width:1}
.v5-page-art .ln{fill:none;stroke:var(--navy);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.v5-page-art .up,.v5-page-art .trace{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0}
.v5-page-art .tip{fill:var(--accent)}
.v5-page-art .node{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.v5-page-art .t1{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:15px;fill:var(--navy);letter-spacing:.06em}
.v5-page-art .cap{font-family:"Zen Kaku Gothic New",sans-serif;font-size:11px;fill:var(--muted);letter-spacing:.12em}
.v5-page-art .rail{fill:none;stroke:#d5d9e0;stroke-width:1;stroke-dasharray:2 6}
.v5-page-art .dot{fill:var(--navy)}
.v5-page-art .chk{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
@media (min-width:1001px){body.v4 .page-hero .wrap > p,body.v4 .page-hero .wrap > h1{max-width:min(58%,720px)}}

/* 動き（止める設定では描き終えた静止画のまま） */
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .mo{animation:v5-mo .9s cubic-bezier(.2,.7,.2,1) both}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .mo1{animation-delay:.25s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .mo2{animation-delay:.5s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .mo3{animation-delay:.75s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .mo4{animation-delay:1s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .up{animation:v5-draw 1.6s cubic-bezier(.4,0,.2,1) 1.2s both}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .tip{animation:v5-fade .4s ease 2.7s both}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .trace{animation:v5-draw 3.2s cubic-bezier(.4,0,.2,1) .4s both}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st{animation:v5-fade .6s ease both}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st0{animation-delay:.4s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st1{animation-delay:1.4s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st2{animation-delay:2.4s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st3{animation-delay:3.4s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .st3 .node{animation:v5-node 2.4s ease-in-out 4s infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .page-contact .v5-page-art .ln{animation:v5-ln2 6s ease-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .page-contact .v5-page-art .ln1{animation-delay:.2s}
body.motion-enabled:not(.motion-paused):not(.wd) .page-contact .v5-page-art .ln2{animation-delay:.4s}
body.motion-enabled:not(.motion-paused):not(.wd) .page-contact .v5-page-art .ln3{animation-delay:.6s}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .d3{animation:v5-d3 6s cubic-bezier(.6,0,.3,1) infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .v5-page-art .reply{animation:v5-reply 6s ease-out infinite}
body.motion-enabled:not(.motion-paused):not(.wd) .page-contact .v5-page-art .chk{animation:v5-chk2 6s ease-out infinite}
@keyframes v5-mo{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes v5-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes v5-fade{from{opacity:0}to{opacity:1}}
@keyframes v5-node{0%,100%{fill:#fff}50%{fill:#c8102e}}
@keyframes v5-ln2{0%{stroke-dashoffset:1}25%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes v5-d3{0%,30%{transform:translateX(0);opacity:0}34%{opacity:1}52%{transform:translateX(46px);opacity:1}55%,100%{transform:translateX(46px);opacity:0}}
@keyframes v5-reply{0%,52%{opacity:0;transform:translateY(6px)}60%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes v5-chk2{0%,62%{stroke-dashoffset:1}72%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

/* サービスの各項目・下層の見出しの朱の線も伸びる */
body.motion-enabled:not(.motion-paused):not(.wd) .svc-detail.rv-st .meta .bar{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s}
body.motion-enabled:not(.motion-paused):not(.wd) .svc-detail.rv-st.on .meta .bar{transform:scaleX(1)}
body.motion-enabled:not(.motion-paused):not(.wd) .page-hero .meta .bar{animation:v5-bar 1.1s cubic-bezier(.2,.7,.2,1) .3s both}
body.v4 .section.cta-dark{position:relative;overflow:hidden}
body.v4 .section.cta-dark > .wrap{position:relative;z-index:1}

/* 11-02 一森「は の動きめんどい」→ 入れ替わる語を行の最後に置き、後ろに何も続かない形に。枠の幅も動かさない */
.hv-title .swap{transition:none!important}