/* 全体の色（2026-10-05 本人：案2「明るい緑に墨の文字」を採用）。
 * page.html の <style> より後に読み込む（同じ強さの指定を上書きするため）。
 * 文字と灰色から緑みを抜く（緑がかった暗い色がどんよりの元になっていたため）。
 * 緑の面を明るく（#3fd08f）して、上に載る文字を白から墨に替える（白では読めない：コントラスト比1.98）。
 */
html:root{--ink:#1a1f1c;--sub:#5b625e;--paper:#ffffff;--line:#e1e6e3;
  --green:#3fd08f;--on-green:#0b2418;--line-on-green:rgba(11,36,24,.22);--pat-l:rgba(255,255,255,.3);--logo:#0b2418;
  --mint:#eef8f3;--gray:#f1f3f2}
html .lead{color:#0b2418}
html .btn--light{background:#0b2418;color:#fff}
html .btn--light:hover{background:#1d3a2c}
@media (max-width:860px){
  html .head .nav{color:#0b2418}
  html.e-wipe.m-c .hero.pre #tsukuru{color:#0b2418}
  html.bg-1 .why{background:#dcefe4}   /* スマホは面を出さず節全体を薄い緑に */
}

/* 節の背景の並び：内容がつながらない節どうしで同じ色が続かないようにする（2026-10-05 本人）
 * 2026-10-06 本人：営業代行をヒーローのすぐ下へ。ヒーロー（緑｜白）→ 営業代行（淡い緑）→ 活用場面（白：淡い緑が続かないよう ?g=pale で白に）
 * （以下は入れ替え前の記録）ヒーロー（緑｜白）→ 活用場面（薄い緑）→ 営業代行（緑）
 * → 自社開発の理由・IT部門（白：内容が続いているので同じ色）→ メディア（薄い緑）
 * → 代表メッセージ（薄い灰色）＋会社情報（白）→ お問い合わせ（緑） */
html .issues{background:var(--mint)}
html .why{--pl:#dcefe4}   /* 下の Caltiva の節（--mint）と続いて見えないよう、一段濃い緑（2026-10-06 本人） */
html .media{background:var(--mint)}
html .company{background:var(--white);--msg-bg:var(--gray);--msg-fg:var(--ink)}

/* 方眼：明るい緑の上では白い線が見えにくいので、墨に近い緑の線にする。白い節の線も少し濃く */
html.p-soft .sec{--pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2256%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22h%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2256%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.3%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.035%22%2F%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.035%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.3%22%2F%3E%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2256%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.3%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.035%22%2F%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.035%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23088654%22%20stop-opacity%3D%220.3%22%2F%3E%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2256%22%20height%3D%221%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2256%22%20fill%3D%22url%28%23v%29%22%2F%3E%3C%2Fsvg%3E")}
html.p-soft :is(.sales,.contact,.sec--green){--pat:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2256%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22h%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2256%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.2%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.03%22%2F%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.03%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%2256%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.2%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.03%22%2F%3E%0A%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.03%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230b2418%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2256%22%20height%3D%221%22%20fill%3D%22url%28%23h%29%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%2256%22%20fill%3D%22url%28%23v%29%22%2F%3E%3C%2Fsvg%3E")}

/* イラスト（Tech Pic・2026-10-06 試し）：本文の補足として、節の見出しの横・下に置く。色は元の絵のまま */
.illust{display:block;height:auto;max-width:100%}
.has-illust{align-items:center}
.illust--sales{width:min(100%,380px);justify-self:end;margin:-40px 0 -40px}
.why-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,17vw,300px);gap:clamp(24px,3vw,56px);align-items:center}
.illust--why{width:100%;margin:-24px 0}
.media-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.media-in .rows{margin-top:clamp(20px,2vw,32px)}
.illust--media{width:min(100%,320px);justify-self:center;margin:-32px 0}
#sales-h{font-size:clamp(36px,3.8vw,80px)}   /* 大きすぎる（2026-10-06 本人）。h2--xl の 5.6vw から下げる */
.biz .yomi{display:inline;margin-left:.45em;font-size:.32em;font-weight:500;letter-spacing:.06em;opacity:.75}
.issues-head{margin-bottom:0;grid-template-columns:minmax(0,1fr) clamp(160px,15vw,240px)}   /* 見出しに幅を譲り、絵は右に小さく */
.illust--issues{width:100%;justify-self:end;margin:-48px 0 -16px}
.it-head{margin-bottom:clamp(24px,2.4vw,40px)}
.it-head .h2{margin-bottom:0}
.illust--it{width:min(100%,260px);justify-self:end;margin:-48px 0 -24px}
@media (max-width:860px){
  .has-illust{grid-template-columns:minmax(0,1fr)}
  .illust--sales,.illust--it,.illust--issues{width:200px;justify-self:start;margin:8px 0 0}
  .why-body{grid-template-columns:minmax(0,1fr)}
  .illust--why{width:200px;margin:0}
  .illust--media{width:200px;justify-self:start;margin:8px 0 0}
}

/* Caltiva の節（2026-10-06 朝礼の指摘：Caltiva をもっと前に出す。造語なので読みを添える） */
ruby{ruby-align:start}
ruby rt{font-size:.26em;font-weight:500;letter-spacing:.06em;opacity:.75;ruby-align:start}   /* 字間を広げず、左に寄せて詰める */
.biz ruby rt{font-size:.32em}
.caltiva{background:var(--mint)}
.cv-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,4vw,96px);align-items:center}
.cv-name{line-height:1.3}
.cv-lead{margin:clamp(16px,1.6vw,28px) 0 0;font-size:clamp(20px,1.7vw,34px);font-weight:700;line-height:1.55}
.caltiva .intro{margin-top:clamp(16px,1.6vw,24px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#33403a}
/* 画面は2枚を少しずらして重ねる（後ろ：架電リスト、手前：担当者ごとのトークスクリプト） */
.cv-shots{position:relative;padding:0 0 18% 14%}
.cv-shot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;box-shadow:0 18px 48px rgba(16,36,26,.14)}
.cv-shot--front{position:absolute;left:0;bottom:0;width:62%;box-shadow:0 24px 56px rgba(16,36,26,.22)}
.cv-points{list-style:none;margin:clamp(48px,5vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,64px)}
.cv-points li{border-top:2px solid var(--ink);padding-top:clamp(14px,1.4vw,22px)}
.cv-points .no{color:var(--accent-ink,#088654);font-weight:700;font-variant-numeric:tabular-nums}
.cv-points h3{margin:8px 0 0;font-size:clamp(18px,1.35vw,26px)}
.cv-points p{margin:10px 0 0;color:var(--sub);font-size:clamp(15px,.95vw,19px);line-height:1.85}
.cv-facts{margin-top:clamp(40px,4vw,72px);border-color:var(--line)}
.cv-facts div + div{border-color:var(--line)}
.cv-facts dd{color:var(--accent-ink,#088654)}
@media (max-width:860px){
  .cv-head,.cv-points{grid-template-columns:minmax(0,1fr)}
  .cv-shots{padding:0 0 16% 10%}
}

/* 進め方（2026-10-06 本人：番号でなく、進んでいく様子を目で見せる）
 * 番号の代わりに点を置き、点と点を線でつなぐ。画面に入ると左の点から順に塗られ、線が次の点へ伸びる。
 * 最後は矢印で「その先も続く」を示す。1280px 未満は縦に並べ、線も縦に伸ばす。 */
.steps--track{--gap:clamp(16px,1.6vw,32px);--T:.5s;position:relative;column-gap:var(--gap)}
.steps--track li{position:relative}
.steps--track .dot{position:relative;z-index:1;display:block;box-sizing:border-box;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--fill,var(--on-green));background:var(--green);transition:background .25s}
.steps--track li::before,.steps--track li::after{content:"";position:absolute;top:8px;left:18px;right:calc(-1 * var(--gap));height:2px}
.steps--track li::before{background:var(--line-on-green)}
.steps--track li::after{background:var(--fill,var(--on-green));transform:scaleX(0);transform-origin:left;transition:transform calc(var(--T) - .1s) linear}
.steps--track li:last-child::before,.steps--track li:last-child::after{right:12px}
/* 終点の矢印 */
.steps--track::after{content:"";position:absolute;top:2px;right:0;border-left:12px solid var(--fill,var(--on-green));
  border-top:7px solid transparent;border-bottom:7px solid transparent;opacity:0;transition:opacity .2s}
.steps--track h4,.steps--track p{transition:opacity .3s}
.steps--track:not(.go) h4{opacity:.5}
.steps--track:not(.go) p{opacity:.45}
.steps--track.go .dot{background:var(--fill,var(--on-green))}
.steps--track.go li::after{transform:none}
.steps--track.go::after{opacity:1;transition-delay:calc(var(--T) * 5)}
.steps--track li:nth-child(2) :is(.dot,h4,p){transition-delay:calc(var(--T) * 1)}
.steps--track li:nth-child(3) :is(.dot,h4,p){transition-delay:calc(var(--T) * 2)}
.steps--track li:nth-child(4) :is(.dot,h4,p){transition-delay:calc(var(--T) * 3)}
.steps--track li:nth-child(5) :is(.dot,h4,p){transition-delay:calc(var(--T) * 4)}
.steps--track li:nth-child(1)::after{transition-delay:.1s}
.steps--track li:nth-child(2)::after{transition-delay:calc(var(--T) * 1 + .1s)}
.steps--track li:nth-child(3)::after{transition-delay:calc(var(--T) * 2 + .1s)}
.steps--track li:nth-child(4)::after{transition-delay:calc(var(--T) * 3 + .1s)}
.steps--track li:nth-child(5)::after{transition-delay:calc(var(--T) * 4 + .1s)}
.steps--track h4{margin-top:20px}
/* 縦並び：点は左、線は下の点へ伸びる。最後の項目の下には線を引かない */
@media (max-width:1279px){
  .steps--track{--gap:28px}
  .steps--track li{padding-left:36px}
  .steps--track .dot{position:absolute;left:0;top:5px}
  .steps--track h4{margin-top:0}
  .steps--track li::before,.steps--track li::after{top:23px;left:8px;right:auto;bottom:calc(-1 * var(--gap) + 5px);width:2px;height:auto}
  .steps--track li::after{transform:scaleY(0);transform-origin:top}
  .steps--track li:last-child::before,.steps--track li:last-child::after,.steps--track::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .steps--track *,.steps--track::after,.steps--track li::after{transition:none!important}
}

/* 緑の節の色（2026-10-06 本人：ヒーローの明るい緑は良いが、通常の節に使うと読みづらい）。
 * 淡い緑（g-pale）で確定（2026-10-06）。index.html の <html> に class として直接書いてある。ヒーローは変えない */
html.g-pale :is(.sales,.contact){--green:#e2f5eb;--on-green:#10241a;--line-on-green:rgba(16,36,26,.16);--fill:#13a263}
html.g-pale .issues{background:var(--white)}   /* 上の節と淡い緑が続かないように */
html.g-pale .sales .facts dd{color:#088654}
html.g-pale .contact :is(input,textarea){border-color:var(--line)}

/* 自社開発の節（2026-10-06 本人：営業代行を淡い緑にしたので、この節の色を調整）。
 * 今までの左の面 #dcefe4 は、淡い緑の営業代行（#e2f5eb）とほぼ同じ色で、2節が続いて見える。
 * ?w=bright 左の面をヒーローと同じ明るい緑に（面に載るのは大きな見出しだけなので読める）／gray 薄い灰の面／white 面なし。
 * スマホは面を出さず節全体に色を敷くため、明るい緑は使わず白にする（本文まで明るい緑に載ると読みづらい） */
html.w-bright .why{--pl:#3fd08f;background:#dcefe4}   /* 上の「依頼の場面」（白）と続いて見えないよう、本文側にも一段濃い緑を敷く（2026-10-06 本人「同色で繋がって見える」） */
@media (max-width:860px){
  html.bg-1.w-bright .why{background:#dcefe4}
}
/* 営業コンサルティングの文：広い画面では2行に収める（2026-10-06 本人：3行目を2行目へ） */
@media (min-width:1280px){ .consult p{max-width:46em} }