:root{ --navy-d:#26324f; }
body{margin:0;background:var(--paper);font-family:var(--serif-jp);}

/* ── ヘッダー（コミュニケーションを創造する） ── */
.svc-head{max-width:1000px;margin:0 auto;padding:var(--sp-lg) 6vw var(--sp-xl);text-align:center;}
.hero-band{width:100%;height:clamp(240px,32vw,400px);background:var(--cream);position:relative;overflow:hidden;margin:var(--sp-lg) 0 var(--sp-2xl);}
.hero-band image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.svc-h1{font-family:var(--serif-jp);font-weight:200;font-size:clamp(1.6rem,3.1vw,2.3rem);letter-spacing:0.08em;color:var(--navy);line-height:1.3;}
.svc-h1en{font-family:var(--serif-en);font-style:italic;font-size:1rem;letter-spacing:0.1em;color:var(--gold-soft);margin-top:0.5rem;}
.svc-h1body{font-size:0.94rem;color:var(--ink-soft);line-height:2.1;letter-spacing:0.03em;margin:var(--sp-lg) auto 0;max-width:680px;}

/* ── 業務フロー タブ ── */
.flow-wrap{max-width:1000px;margin:0 auto;padding:0 6vw var(--sp-2xl);}
.flow-sec-h{display:flex;align-items:baseline;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:var(--sp-lg);}
.flow-sec-no{font-family:var(--serif-en);font-style:italic;font-size:1.1rem;color:var(--gold);}
.flow-sec-h h2{font-family:var(--serif-jp);font-weight:300;font-size:1.4rem;color:var(--navy);letter-spacing:0.08em;margin:0;}
/* 縦の工程譜 */
.od-list{position:relative;}
.od-step{position:relative;display:grid;grid-template-columns:96px 1fr;gap:28px;padding:0 0 30px 0;}
.od-step:last-child{padding-bottom:0;}
.od-rail{position:relative;display:flex;justify-content:center;}
.od-rail::before{content:'';position:absolute;top:8px;bottom:-22px;width:1px;background:var(--line);}
.od-step:last-child .od-rail::before{display:none;}
.od-node{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif-en);font-size:1.1rem;color:var(--gold);}
.od-body{padding-top:6px;}
.od-phase{font-family:var(--serif-jp);font-weight:500;font-size:1.18rem;color:var(--navy);letter-spacing:0.06em;margin:0;}
.od-catch{font-family:var(--serif-jp);font-size:0.86rem;color:var(--gold);margin:5px 0 7px;letter-spacing:0.06em;}
.od-desc{font-size:0.8rem;color:var(--ink-soft);line-height:1.95;max-width:560px;margin:0;}

/* ── 価値創造プロセス（統合・織り図） ── */
.vc-embed{background:#EAE1D0;padding:var(--sp-2xl) 4vw calc(var(--sp-2xl) + 10px);margin-top:var(--sp-lg);}
.vc-embed-head{max-width:1360px;margin:0 auto var(--sp-lg);text-align:center;}
.vc-eyebrow{font-family:var(--serif-en);font-style:italic;font-size:0.9rem;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;}
.vc-etitle{font-family:var(--serif-jp);font-weight:200;font-size:1.9rem;letter-spacing:0.1em;color:var(--navy);margin:8px 0 0;}
.vc-elead{font-size:0.86rem;color:var(--ink-soft);line-height:1.9;margin-top:10px;}
.vc-stage{max-width:1360px;margin:0 auto;}
.vc-figure{position:relative;width:100%;aspect-ratio:1672/941;background:var(--paper);box-shadow:0 12px 40px rgba(27,42,74,0.1);overflow:hidden;container-type:inline-size;}
.vc-figure svg{width:100%;height:100%;display:block;}
.vc-labels{position:absolute;inset:0;}
.L{position:absolute;}
.lbl-title{left:3%;top:7%;}
.lbl-title .en{font-family:var(--serif-en);font-style:italic;letter-spacing:0.22em;color:var(--gold);font-size:1.5cqw;}
.lbl-title .jp{font-family:var(--serif-jp);font-weight:300;color:var(--navy);font-size:3.4cqw;letter-spacing:0.08em;line-height:1.1;margin-top:0.4cqw;}
.lbl-title .sub{font-family:var(--serif-jp);font-weight:400;color:var(--gold);font-size:1.25cqw;letter-spacing:0.06em;margin-top:0.5cqw;}
.hd{position:absolute;}
.hd .jp{font-family:var(--serif-jp);font-weight:400;color:var(--navy);font-size:1.45cqw;letter-spacing:0.08em;}
.hd .en{font-family:var(--serif-en);font-style:italic;color:var(--gold);font-size:1.0cqw;letter-spacing:0.08em;}
.hd-warp{left:7%;top:29%;}
.hd-weft{left:46.4%;top:16.5%;transform:translateX(-50%);text-align:center;}
.hd-value{left:73%;top:17%;}
.col{position:absolute;top:24.5%;transform:translateX(-50%);text-align:center;}
.col .jp{font-family:var(--serif-jp);font-weight:400;color:var(--navy);font-size:1.18cqw;letter-spacing:0.05em;white-space:nowrap;}
.col .en{font-family:var(--serif-en);font-style:italic;color:var(--gold-soft);font-size:0.86cqw;letter-spacing:0.06em;}
.cap{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:0.7cqw;left:2.6%;width:16.5%;}
.cap .ic{flex:0 0 auto;width:2.4cqw;height:2.4cqw;border:1px solid var(--gold-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.cap .ic svg{width:1.3cqw;height:1.3cqw;stroke:var(--gold);fill:none;stroke-width:1.6;}
.cap .tx{display:flex;flex-direction:column;}
.cap .tx .jp{font-family:var(--serif-jp);font-weight:400;color:var(--navy);font-size:1.08cqw;letter-spacing:0.03em;white-space:normal;line-height:1.3;}
.cap .tx .en{font-family:var(--serif-en);font-style:italic;color:var(--gold);font-size:0.82cqw;letter-spacing:0.06em;}
.stk{position:absolute;transform:translateY(-50%);left:73%;display:flex;align-items:flex-start;gap:0.6cqw;width:15%;}
.stk .ic{flex:0 0 auto;width:2.4cqw;height:2.4cqw;border:1px solid var(--gold-soft);border-radius:50%;margin-top:0.2cqw;display:flex;align-items:center;justify-content:center;}
.stk .ic svg{width:1.3cqw;height:1.3cqw;stroke:var(--gold);fill:none;stroke-width:1.6;}
.stk .tx{display:flex;flex-direction:column;}
.stk .tx .jp{font-family:var(--serif-jp);font-weight:500;color:var(--navy);font-size:1.18cqw;letter-spacing:0.04em;line-height:1.2;}
.stk .tx .sub{font-family:var(--serif-jp);font-weight:400;color:var(--ink-soft);font-size:0.82cqw;letter-spacing:0.02em;line-height:1.4;margin-top:0.2cqw;}
.vision{position:absolute;right:0;top:6%;height:88%;width:11.5%;background:var(--gold);border-radius:46% 0 0 46% / 50% 0 0 50%;display:flex;align-items:center;justify-content:center;gap:0.6cqw;}
.vision .vt{writing-mode:vertical-rl;font-family:var(--serif-jp);font-weight:300;color:#FFFCF7;font-size:1.5cqw;letter-spacing:0.12em;line-height:1.8;}
.vision .vl{writing-mode:vertical-rl;font-family:var(--serif-en);font-style:italic;color:#F0E6D6;font-size:0.7cqw;letter-spacing:0.24em;opacity:0.65;}
.vc-note{max-width:1360px;margin:var(--sp-md) auto 0;font-family:var(--serif-en);font-style:italic;font-size:0.72rem;letter-spacing:0.06em;color:rgba(245,240,235,0.5);text-align:right;}
/* 織り上がりアニメ＋経糸ホバー */
.vc-figure .warp,.vc-figure .weft{stroke-dasharray:2200;stroke-dashoffset:2200;}
.vc-figure.in .warp{animation:vcDraw 2.6s ease forwards;}
.vc-figure.in .weft{animation:vcDraw 2.6s ease 1s forwards;}
@keyframes vcDraw{to{stroke-dashoffset:0;}}
.vc-figure .warp.hot{stroke:var(--gold) !important;stroke-width:4.5;}
.vc-figure .noderow.hot circle{fill:var(--gold) !important;}
.cap[data-warp]{cursor:pointer;}
.cap[data-warp]:hover .tx .jp{color:var(--gold);}
@media(prefers-reduced-motion:reduce){.vc-figure .warp,.vc-figure .weft{stroke-dashoffset:0 !important;animation:none !important;}}

@media(max-width:760px){
  .od-step{grid-template-columns:60px 1fr;gap:16px;}
  .vc-figure{aspect-ratio:auto;min-height:520px;}
}