/* ============================================================
   SINCEED Co.,Ltd. — TOP（FV-2「データが動く」を全体へ展開）
   方眼＝計器・設計図のメタファー。数値が主役。実装時は
   見出しを見出ゴMB31、本文をTBUDゴシックRへ差し替え可能。
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}

:root{
  --bg:#0C1116;
  --bg-2:#0A0E13;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --ink:#F2F5F8;
  --ink-2:#93A0AC;
  --ink-3:#7B8894;   /* 背景#0C1116に対し5.18:1。旧#5F6C79は3.53:1でAA未達だった */
  --accent:#39E0B0;
  --accent-dim:rgba(57,224,176,.16);
  --line:rgba(242,245,248,.13);
  --line-soft:rgba(242,245,248,.07);
  --btn-bg:#39E0B0;
  --btn-ink:#04211A;
  --error:#FF8A8A;
  --grid:64px;

  --sans:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,3.4vw,52px);
  --max:1440px;
  color-scheme:dark;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.85;letter-spacing:.01em;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#04211A}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* 全セクション共通のラベル */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;
}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none}

.sec{padding-block:clamp(46px,6.2vw,88px);position:relative}

/* ============================================================
   ライト面（.tone-light）
   「黒で惹きつけ、白で理解・信頼させる」役割分担の白側。
   全コンポーネントがトークン経由で塗られているため、スコープ内で
   変数を差し替えるだけで文字・カード・罫線・ボタンが一括で追従する。
   構造のミソ：--bg は「カード面」として白に差し替え、セクションの地は
   別トークン --ground（オフホワイト）で塗る。これでダーク面の
   「地＋1px罫線グリッド」の構造がそのまま「白カード＋薄罫線」になる。
   ダーク面は hover で明るく持ち上がり、ライト面は淡く沈む＝同じ変数で
   両方の正しいイディオムになる。
   ============================================================ */
.tone-light{
  --ground:#F4F6F5;            /* セクションの地。純白にしない */
  --bg:#FFFFFF;                /* カード・入力欄の面 */
  --bg-2:#ECF0EE;              /* 一段沈む面（表ヘッダ・数値タイル） */
  --panel:#EDF2F0;             /* hover・トーン付きパネル */
  --panel-2:#E3EAE7;
  --ink:#111820;
  --ink-2:#4C575F;             /* 地#F4F6F5に対し7.0:1 */
  --ink-3:#5D6870;             /* 地#F4F6F5に対し5.4:1 */
  --accent:#087968;            /* 明ティールは白地の小さい文字で読めないため濃ティールへ */
  --accent-dim:rgba(8,121,104,.12);
  --line:#D5DDDA;
  --line-soft:#E4E9E7;
  --btn-bg:#087968;            /* 白文字で5.3:1 */
  --btn-ink:#FFFFFF;
  --error:#B3261E;
  background:var(--ground);
  color:var(--ink);
  color-scheme:light;
}
/* 明ティール地に濃緑文字の選択色はライト面では潰れる */
.tone-light ::selection{background:var(--accent);color:#FFFFFF}
/* 入力欄はライト面では白面＋濃い文字。基底は var(--bg-2) だが
   情報入力の面はカードと同じ「白」に揃える */
.tone-light .entry-body input[type="text"],
.tone-light .entry-body input[type="email"],
.tone-light .entry-body input[type="tel"],
.tone-light .entry-body input[type="url"],
.tone-light .entry-body input[type="number"],
.tone-light .entry-body input[type="search"],
.tone-light .entry-body textarea,
.tone-light .entry-body select{background-color:var(--bg);border-color:#7E8A85}
.tone-light .entry-body ::placeholder{color:#68737D;opacity:1}
/* 図版は紙地（#E8ECEE）なのでライトの地に溶ける。薄枠で領域を定義する */
.tone-light .entry-body img{border:1px solid var(--line-soft)}
/* stickyヘッダー(62px)の下にアンカー先が潜らないように */
section[id],div[id]{scroll-margin-top:78px}
.sec-head{margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{
  font-size:clamp(24px,3.6vw,44px);font-weight:800;letter-spacing:-.015em;
  line-height:1.32;margin-top:16px;text-wrap:balance;
}
.sec-head h2 em{font-style:normal;color:var(--accent)}

/* ---- 日本語の改行位置 ----
   既定では日本語は文字単位で折れる。そのため「どちら」が「どち／らで」に、
   「逆算」が「逆／算」に割れる。読めはするが、語の塊が壊れると一瞬つまずく。
   word-break:auto-phrase は語の切れ目で折るのでこれが起きない。

   見出しだけに掛けると、比較表のセル・ボタン・箇条書きが取り残される
   （実際に事業ページの表で 37 セルが文字単位のまま折れていた）。
   セレクタを足して回るより、body に一度掛けて継承させるほうが漏れない。
   欧文には影響しない（非日本語では normal と同じ挙動になる）。

   対応しないブラウザは無視して従来どおり折るだけなので、実害なく足せる。 */
body{
  word-break:auto-phrase;
}
/* auto-phrase の無いブラウザ（Safari）向け。theme.js が Intl.Segmenter で
   語境界に <wbr> を入れてから、この class を付ける。keep-all で
   「入れた場所以外では折らない」を作る。1語が行より長いときだけ
   anywhere で逃がす（これが無いと枠から溢れる）。 */
.jp-phrase{word-break:keep-all;overflow-wrap:anywhere}

/* 行数の少ない見出しは行長も揃える。auto-phrase と併用して問題ない。 */
.sec-head h2, .page-head h1, .cta-band h2, .words, .fv h1,
.col-ttl, .card-item .ttl, .biz-link .ttl,
.svc h2, .svc h3, .step h3, .fit h3,
.entry-body h2, .entry-body h3{
  text-wrap:balance;
}

.sec-head .lead{margin-top:16px;color:var(--ink-2);max-width:52em;font-size:clamp(13.5px,1.4vw,16px)}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.7}

/* ============================================================
   header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hd{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);height:62px}
.logo{font-family:var(--mono);font-weight:700;font-size:16.5px;letter-spacing:.24em;flex:none}
.gnav{margin-left:auto;display:flex;gap:clamp(14px,2vw,30px)}
.gnav a{font-size:14.5px;color:var(--ink-2);position:relative;padding:4px 0;transition:color .3s}
.gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.gnav a:hover{color:var(--ink)}
.gnav a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:14px;letter-spacing:.02em;
  padding:12px 22px;background:var(--btn-bg);color:var(--btn-ink);
  transition:filter .25s,transform .25s var(--ease);flex:none;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn:active{filter:brightness(.96);transform:translateY(0)}
.btn:disabled,.btn[aria-disabled="true"]{filter:grayscale(.6) opacity(.55);pointer-events:none}
.btn--lg{font-size:15px;padding:16px 30px}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.menu-btn{display:none;width:34px;height:34px;position:relative;flex:none;margin-left:auto}
.menu-btn i{position:absolute;left:7px;right:7px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-btn i:nth-child(1){top:14px}
.menu-btn i:nth-child(2){top:20px}
body.nav-open .menu-btn i:nth-child(1){transform:translateY(3px) rotate(20deg)}
body.nav-open .menu-btn i:nth-child(2){transform:translateY(-3px) rotate(-20deg)}
/* padding ショートハンドだと .wrap の左右余白を 0 で上書きしてしまい
   項目が画面端に張り付く。上下だけ指定する */
.mnav{display:none;border-bottom:1px solid var(--line-soft);padding-top:8px;padding-bottom:22px}
body.nav-open .mnav{display:block}
/* 項目は右寄せ。右手の親指で操作する位置に近く、開閉ボタン（右上）とも
   視線・動線が揃う */
.mnav a{display:block;font-size:17px;font-weight:700;padding:13px 0;border-bottom:1px solid var(--line-soft);text-align:right}
.mnav .btn{margin-top:18px;width:100%;justify-content:center}
@media(max-width:900px){
  .gnav,.site-header .btn{display:none}
  .menu-btn{display:block}
}

/* ============================================================
   FV
   ============================================================ */
.fv{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
/* 方眼＝計器・設計図。中央から外へ薄れる */
.fv::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(120% 88% at 68% 26%,#000 0%,transparent 74%);
  mask-image:radial-gradient(120% 88% at 68% 26%,#000 0%,transparent 74%);
}
.fv-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4.4vw,72px);align-items:center;
  padding-block:clamp(34px,4.6vw,68px);
  min-height:clamp(420px,62vh,586px);
}
@media(max-width:960px){.fv-in{grid-template-columns:1fr;gap:30px;min-height:0}}

.fv h1{
  font-size:clamp(30px,5vw,62px);font-weight:800;line-height:1.26;
  letter-spacing:-.02em;margin-top:20px;
}
.fv h1 .ln{display:block;overflow:hidden;padding-block:.04em;margin-block:-.04em}
.fv h1 .ln > span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
.fv h1 .ln:nth-child(1) > span{animation-delay:.18s}
.fv h1 .ln:nth-child(2) > span{animation-delay:.28s}
.fv h1 em{font-style:normal;color:var(--accent)}
@keyframes rise{to{transform:none}}

.fv .lead{margin-top:22px;color:var(--ink-2);max-width:34em;font-size:clamp(13.5px,1.45vw,16.5px)}
.fv .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vw,34px)}
/* 幅がバラバラの2ボタンが縦に並ぶと雑に見えるので揃える */
@media(max-width:560px){.fv .cta .btn{width:100%;justify-content:center}}
.fade-up{opacity:0;transform:translateY(12px);animation:fadeUp .9s var(--ease) forwards}
.fv .eyebrow{animation-delay:.1s}
.fv .lead{animation-delay:.62s}
.fv .cta{animation-delay:.74s}
.fv .scroll{animation-delay:.9s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* 数値パネル */
.panel{border:1px solid var(--line);background:var(--panel);opacity:0;animation:fadeUp 1s .38s var(--ease) forwards}
.panel-h{
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.panel-h .live{margin-left:auto;color:var(--accent);opacity:.8}
.panel .row{
  display:flex;align-items:center;gap:14px;
  padding:clamp(13px,1.7vw,20px) 18px;border-bottom:1px solid var(--line-soft);
}
.panel .row:last-of-type{border-bottom:0}
.panel .v{
  font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;min-width:4.6em;
}
.panel .v i{font-style:normal;font-size:.46em;font-weight:700;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.panel .k{font-size:13px;color:var(--ink-2);margin-left:auto;text-align:right;line-height:1.5}
.panel .foot{padding:11px 18px;border-top:1px solid var(--line)}

.scroll{
  display:flex;align-items:center;gap:10px;margin-top:clamp(22px,3vw,34px);
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3);
}
.scroll::after{content:"";width:1px;height:20px;background:currentColor;animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:960px){.scroll{display:none}}

/* ============================================================
   事業案内 — 5列均等だと1枠267pxで日本語が窮屈になるため、
   台帳（＝計器の世界観）のような横長の行で組む
   ============================================================ */
.svcs{border-top:1px solid var(--line)}
.svc{
  display:grid;
  /* 和名カラムを実測の最長行（商品テストマーケティング＋NEWタグ）に寄せて固定し、
     説明文を近づける。可変(.8fr)だと1440で470pxまで伸びて視線が飛んだ */
  grid-template-columns:clamp(40px,4vw,58px) clamp(190px,21vw,310px) 1fr 26px;
  align-items:center;gap:clamp(14px,2vw,28px);
  padding:clamp(18px,2.1vw,26px) clamp(4px,1vw,14px);
  border-bottom:1px solid var(--line);position:relative;isolation:isolate;
  transition:padding-left .45s var(--ease);
}
/* hover時に左から色が差し込む。背景一律ハイライトより移動感が出る */
.svc::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--panel-2);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{padding-left:clamp(12px,1.8vw,26px)}
.svc .n{font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:.1em;color:var(--accent)}
.svc .ttl{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.svc h2,.svc h3{font-size:clamp(17px,1.6vw,20px);font-weight:800;line-height:1.45;letter-spacing:.005em}
.svc .en{
  flex-basis:100%;font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--ink-3);margin-top:5px;
}
.svc p{font-size:clamp(14px,1.1vw,15px);color:var(--ink-2);line-height:1.8}
.svc .go{
  font-family:var(--mono);font-size:14px;color:var(--ink-3);text-align:right;
  transition:color .3s,transform .4s var(--ease);
}
.svc:hover .go{color:var(--accent);transform:translateX(5px)}
@media(max-width:820px){
  .svc{grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;padding-block:20px}
  .svc .n{grid-row:1;padding-top:.15em}
  .svc .ttl{grid-column:2}
  .svc p{grid-column:2;margin-top:8px}
  .svc .go{position:absolute;top:20px;right:0}
  .svc:hover{padding-left:10px}
}
.tag{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--btn-ink);background:var(--btn-bg);padding:2px 7px;align-self:center;
}

/* ============================================================
   実績
   ============================================================ */
.results{background:var(--bg-2);border-block:1px solid var(--line-soft)}
/* KPI帯（4値）は CASE 01〜04 と同じ数字を二度出していたため廃止し、
   見出しの直後から導入事例そのものを見せる */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,18px)}
@media(max-width:820px){.cases{grid-template-columns:1fr}}
.case{border:1px solid var(--line);background:var(--panel);padding:clamp(20px,2.4vw,28px);
  transition:border-color .3s,transform .4s var(--ease)}
.case:hover{border-color:var(--accent);transform:translateY(-2px)}
.case-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.case-h .no{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.case-h h3{font-size:18px;font-weight:800;letter-spacing:.01em}
.case-h .biz{font-size:12.5px;color:var(--ink-3);margin-left:auto}
/* スマホ幅では CASE 01/04 のようにタイトルが長いと業界ラベルだけが折り返して
   孤立していた。折り返しを禁止し、字を幅連動で縮めて必ず1行に収める */
@media(max-width:600px){
  .case-h{flex-wrap:nowrap;gap:8px}
  .case-h .no{flex:none;font-size:11px}
  .case-h h3{font-size:clamp(12px,3.7vw,18px);white-space:nowrap}
  .case-h .biz{flex:none;white-space:nowrap;font-size:clamp(10px,2.8vw,12.5px)}
}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-bottom:18px}
.case dt{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3);padding-top:.35em}
.case dd{font-size:14.5px;color:var(--ink-2);line-height:1.75}
.case-v{display:flex;gap:clamp(18px,2.6vw,36px);flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-soft)}
.case-v div{display:flex;flex-direction:column}
.case-v b{font-size:clamp(20px,2.4vw,29px);font-weight:800;color:var(--accent);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.case-v span{font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ============================================================
   課題（こんな経営者に）
   ============================================================ */
.issues{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.issues{grid-template-columns:1fr}}
/* 1行あたり670px幅に13.5pxだと、行の高さに対して文字が小さく右に空白が余って
   セクション全体が薄く見えた。文字を上げ、左右の余白を詰めて密度を作る */
.issue{background:var(--bg);padding:clamp(15px,1.75vw,20px) clamp(14px,1.6vw,20px);
  display:flex;gap:14px;align-items:flex-start;
  font-size:clamp(14px,1.06vw,15.5px);line-height:1.7;transition:background-color .3s}
.issue:hover{background:var(--panel-2)}
/* 静止時も「チェックリスト」だと分かるよう薄いレ点を常時入れ、
   hoverでミントが満ちる＝自分で当てはめる操作感 */
.issue::before{
  content:"✓";flex:none;width:18px;height:18px;margin-top:.28em;
  display:grid;place-items:center;line-height:1;font-size:12px;
  border:1px solid var(--accent);color:var(--line);
  transition:background-color .3s var(--ease),color .3s,box-shadow .3s;
}
.issue:hover::before{background:var(--btn-bg);color:var(--btn-ink);box-shadow:0 0 0 3px var(--accent-dim)}
.issue i{position:absolute;display:none}
.conclusion{
  margin-top:clamp(24px,3vw,38px);padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--accent);background:var(--accent-dim);
  font-size:clamp(15px,1.8vw,20px);font-weight:700;line-height:1.7;
}
/* 狭幅で「SINCEEDが力になれ／る。」と割れていた。塊で折り返させる */
/* 淡い緑地に --accent(#087968) を乗せると 4.17:1。文字が大きい
   PC幅なら大文字扱いで3:1に緩むが、スマホでは15pxまで縮んで
   通常文字の 4.5:1 が要る。この一箇所だけ暗い緑にして満たす。 */
.conclusion em{font-style:normal;color:#06695A;display:inline-block}

/* ============================================================
   お客様の成果（ビフォー→アフター）
   ============================================================ */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(12px,1.6vw,18px)}
@media(max-width:820px){.outcomes{grid-template-columns:1fr}}
.outcome{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;
}
/* outcome は gap:14px の縦 flex なので、case-h 側の margin-bottom と二重にしない */
.outcome .case-h{margin-bottom:0}
.outcome .ba{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,22px);flex-wrap:wrap}
.outcome .from{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.outcome .arw{color:var(--accent);font-family:var(--mono);font-size:15px;flex:none}
.outcome .to{
  font-size:clamp(24px,3vw,36px);font-weight:800;color:var(--accent);line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;
}
.outcome .to i{font-style:normal;font-size:.42em;font-weight:700;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.outcome p{font-size:14.5px;color:var(--ink-2);line-height:1.75}

/* ============================================================
   なぜ結果を出せるのか
   ============================================================ */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.reasons{grid-template-columns:1fr}}
/* 本文2行に対してカード高188pxはセクション（566px）の中で頼りなく見えた。
   情報は増やせない（事実ベース）ので、余白でカードそのものに重量を持たせる */
.reason{
  background:var(--bg);padding:clamp(26px,3.1vw,40px) clamp(20px,2.3vw,30px);
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background-color .35s;
}
.reason:hover{background:var(--panel-2)}
/* 上辺のミント罫が hover で左から伸びる */
.reason::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.reason:hover::after{transform:scaleX(1)}
.reason .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent)}
.reason h3{font-size:clamp(16px,1.7vw,21px);font-weight:800;line-height:1.5;letter-spacing:.005em}
.reason p{font-size:clamp(14.5px,1.1vw,15.5px);color:var(--ink-2);line-height:1.9}

/* ============================================================
   無料市場分析の3点（CTAバンドに内包。独立セクションだと
   文言がCTAと重複し、カード3枚に1行ずつで薄く見えた）
   ============================================================ */
.offer{margin-top:clamp(22px,2.8vw,32px);border-top:1px solid var(--line)}
.offer-item{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);
  padding:clamp(11px,1.4vw,15px) 0;border-bottom:1px solid var(--line-soft);
}
.offer-item .n{
  width:26px;height:26px;display:grid;place-items:center;flex:none;
  border:1px solid var(--accent);color:var(--accent);
  font-family:var(--mono);font-size:12px;font-weight:700;
}
.offer-item h3{font-size:clamp(15px,1.4vw,16.5px);font-weight:700;line-height:1.55}

/* ============================================================
   会社案内
   ============================================================ */
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.co-grid{grid-template-columns:1fr}}

/* 社名の由来。SINCERE × SUCCEED ＝ SINCEED */
.naming{
  /* 社名の由来は「式」なので、行の流れに置くより中央に据えたほうが
     ひとつの見せ場として読める。 */
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  padding-bottom:clamp(22px,2.6vw,30px);margin-bottom:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--line);text-align:center;
}
.naming-w{
  display:flex;flex-direction:column;font-family:var(--mono);
  font-size:clamp(12.5px,1.35vw,16px);letter-spacing:.14em;color:var(--ink-2);
}
.naming-w b{
  font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.16em;
  color:var(--ink-3);margin-top:5px;
}
.naming-x,.naming-eq{font-family:var(--mono);font-size:14px;color:var(--ink-3);
  align-self:flex-start;padding-top:3px}
.naming-brand{
  font-family:var(--mono);font-size:clamp(14px,1.6vw,19px);font-weight:700;
  letter-spacing:.2em;color:var(--accent);padding-bottom:1px;
}

.co-links{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,34px)}
.co-links a{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);
  padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.co-links a span{font-family:var(--mono);font-size:12px;color:var(--ink-3);transition:.3s}
.co-links a:hover{color:var(--accent);border-color:var(--accent)}
.co-links a:hover span{color:var(--accent);transform:translateX(3px)}
.words{font-size:clamp(19px,2.5vw,30px);font-weight:800;line-height:1.6;letter-spacing:-.01em;text-wrap:balance}
.words em{font-style:normal;color:var(--accent)}
.by{display:block;margin-top:18px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-3)}
.philosophy{
  margin-top:clamp(24px,3vw,36px);padding-left:20px;border-left:2px solid var(--accent);
  color:var(--ink-2);font-size:15.5px;line-height:1.9;
}
.profile{border-top:1px solid var(--line)}
.profile > div{display:grid;grid-template-columns:clamp(88px,13vw,132px) 1fr;gap:12px;
  padding:14px 2px;border-bottom:1px solid var(--line-soft)}
.profile dt{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-3);padding-top:.5em}
.profile dd{font-size:15px;line-height:1.85;font-variant-numeric:tabular-nums}
@media(max-width:520px){.profile > div{grid-template-columns:1fr;gap:2px}}

/* ============================================================
   NEWS / アクセス
   ============================================================ */
.news-item{display:flex;align-items:baseline;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;
  padding:clamp(18px,2.2vw,24px) 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background-color .3s}
.news-item:hover{background:var(--panel)}
/* 件数が増えたとき罫線が二重にならないように */
.news-item+.news-item{border-top:0}
.news-item time{font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.news-item .cat{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);
  border:1px solid currentColor;padding:2px 8px}
.news-item .ttl{font-size:17px;font-weight:700}
.news-item .go{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink-3);transition:.3s}
.news-item:hover .go{color:var(--accent);transform:translateX(4px)}
/* 折返しで矢印だけが次行に取り残されるのを防ぐ */
@media(max-width:560px){
  .news-item{display:grid;grid-template-columns:auto auto 1fr;gap:6px 14px;align-items:center}
  .news-item .ttl{grid-column:1/-1;font-size:16px;line-height:1.6}
  .news-item .go{grid-row:1;grid-column:3;justify-self:end;margin-left:0}
}

/* NEWSは現在1件しかなく、アクセスと2カラムで並べると左に336pxの空白が出た。
   カラムの底を揃えても空白の量は変わらないので、見出し・記事・一覧リンクを
   横1本の帯に収める。件数が増えたぶんは中央のリストに縦へ積まれる */
.news-band{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,48px);
  align-items:center;border-block:1px solid var(--line);
  padding:clamp(14px,1.8vw,20px) 0;
}
.news-band-h{display:flex;flex-direction:column;gap:7px}
.news-band-h h2{font-size:clamp(17px,1.9vw,23px);font-weight:800;letter-spacing:-.01em;line-height:1.2}
.news-band .news-item{border:0;padding:clamp(9px,1.1vw,13px) clamp(4px,1.2vw,16px)}
.news-band .more{margin-top:0;border-bottom:0;padding-bottom:0;white-space:nowrap}
/* 帯の中では記事の矢印と「一覧→」が並んで紛らわしいので記事側を消す */
.news-band .news-item .go{display:none}
@media(max-width:820px){
  /* 縦積みになると .more が grid で引き伸ばされ、下線が帯の罫線と二重に見える */
  .news-band{grid-template-columns:1fr;gap:14px;align-items:start}
  .news-band .news-item{padding-inline:0}
  .news-band .more{justify-self:start}
}

/* アクセス：見出しの横に住所とTELを流し、地図は全幅の帯にする */
.access-head{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,64px);
  align-items:end;margin-bottom:clamp(20px,2.6vw,30px);
}
.access-info{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px clamp(20px,3vw,44px);padding-bottom:5px}
.access-info .tel{margin-top:0}
@media(max-width:760px){
  .access-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .access-info{gap:14px}
}
.more{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,2.2vw,26px);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-2);
  border-bottom:1px solid var(--line);padding-bottom:6px;transition:color .3s,border-color .3s;
}
.more span{transition:transform .4s var(--ease)}
.more:hover{color:var(--accent);border-color:var(--accent)}
.more:hover span{transform:translateX(4px)}

.addr{font-style:normal;font-size:clamp(15px,1.75vw,19px);line-height:1.8;font-weight:700}
.tel{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:clamp(15px,1.85vw,19px);
  letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:3px;font-variant-numeric:tabular-nums}
.tel:hover{color:var(--accent);border-color:var(--accent)}
/* 地図。iframeが読めない環境（Artifactプレビュー等）では下のプレースホルダが見える */
.map{
  position:relative;
  border:1px solid var(--line);background:var(--panel);aspect-ratio:4/1;overflow:hidden;
}
@media(max-width:900px){.map{aspect-ratio:16/9}}
.map-ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  letter-spacing:.2em;font-family:var(--mono)}
.map-ph span{font-family:var(--sans);letter-spacing:0;font-size:12px}
/* 反転でダーク化。彩度を落とさないと地図側の緑・桃色がミント1色の方針と衝突する */
.map iframe{position:relative;width:100%;height:100%;border:0;
  filter:invert(1) hue-rotate(182deg) saturate(.32) contrast(.94) brightness(.92)}
@media(max-width:560px){.map{aspect-ratio:4/3}}

/* ============================================================
   CTA
   ============================================================ */
.cta-band{
  border:1px solid var(--accent);background:
    radial-gradient(90% 140% at 82% 12%,rgba(57,224,176,.14),transparent 66%),var(--panel);
  padding:clamp(28px,4.4vw,60px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,52px);align-items:center;
}
@media(max-width:860px){.cta-band{grid-template-columns:1fr}}
.cta-band h2{font-size:clamp(21px,3vw,36px);font-weight:800;line-height:1.4;letter-spacing:-.015em;
  margin-top:16px;text-wrap:balance}
.cta-band h2 em{font-style:normal;color:var(--accent)}
/* 日本語は文字単位で折れるため、狭幅では意味の切れ目で明示的に折る */
.brsp{display:none}
@media(max-width:560px){.brsp{display:inline}}
.cta-band p{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:36em}
/* 左カラム338px に対して右が172pxしかなく、中央揃えの結果ボタンの下に
   83pxの空きが見えていた。ボタン自体に高さを持たせて左右を近づける */
.cta-actions{display:flex;flex-direction:column;gap:14px;justify-content:center}
.cta-actions .btn{justify-content:center;padding-block:clamp(18px,2.3vw,27px)}
.cta-actions .note{margin-top:6px;text-align:center}

/* ============================================================
   footer
   ============================================================ */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(28px,3.6vw,56px);padding-top:clamp(44px,6vw,72px)}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3.4vw,56px);
  padding-bottom:clamp(36px,5vw,60px)}
@media(max-width:900px){.f-grid{grid-template-columns:repeat(2,1fr)}.f-brand{grid-column:1/-1}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
.f-brand .logo{display:inline-block;margin-bottom:16px}
.f-brand p{font-size:13px;color:var(--ink-2);max-width:26em}
.f-brand .addr-s{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.9}
.f-col h4,.f-col .footer-title{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);margin-bottom:14px;font-weight:400}
.f-col a{display:block;font-size:13px;color:var(--ink-2);padding:5px 0;transition:color .3s}
.f-col a:hover{color:var(--ink)}
.f-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding:18px 0 26px;border-top:1px solid var(--line-soft)}
.f-bottom .mono{font-size:12px;color:var(--ink-3);letter-spacing:.1em}
.f-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.f-bottom nav a{font-size:12.5px;color:var(--ink-3)}
.f-bottom nav a:hover{color:var(--ink-2)}
.f-bottom .cp{margin-left:auto}

/* ============================================================
   reveal
   ============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}
.rv.d2{transition-delay:.14s}
.rv.d3{transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .fv h1 .ln > span{transform:none}
  .fade-up,.panel{opacity:1;transform:none}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   テーマ化で足した分
   ============================================================ */

/* 本文へ飛ばすリンク。キーボード操作の人にだけ見えればよい */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:10px 18px;background:var(--btn-bg);color:var(--btn-ink);font-weight:700;
}
.skip-link:focus{left:0}

/* ============================================================
   下層ページ
   第3稿はトップだけを想定していたので、ここから先はテーマ化で足した分。
   トップと同じ変数を使い、余白と字送りの基準も揃える。
   ============================================================ */

/* 見出し帯 */
.page-head{
  padding-block:clamp(40px,5.6vw,80px) clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);
  -webkit-mask-image:radial-gradient(90% 120% at 78% 10%,#000 0%,transparent 72%);
  mask-image:radial-gradient(90% 120% at 78% 10%,#000 0%,transparent 72%);
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{
  font-size:clamp(24px,3.6vw,44px);font-weight:800;letter-spacing:-.015em;
  line-height:1.34;margin-top:16px;text-wrap:balance;
}
.page-head .lead{margin-top:16px;color:var(--ink-2);max-width:52em;font-size:clamp(13.5px,1.4vw,16px)}

/* パンくず */
.breadcrumb{border-bottom:1px solid var(--line-soft);padding-block:12px}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.06em}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--ink-2);transition:color .3s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--ink)}

/* 本文 */
/* アイキャッチ。横位置はそのまま、縦位置は高さで抑える。
   幅だけで合わせると、3:4 の人物写真が本文幅いっぱいに伸びて
   1 画面を占有してしまう（代表挨拶で実際に起きた）。 */
.entry-thumb{
  margin-bottom:clamp(24px,3vw,40px);border:1px solid var(--line);
  width:fit-content;max-width:100%;
}
.entry-thumb img{max-height:min(70vh,560px);width:auto;height:auto;max-width:100%}
.entry-body{font-size:17px;line-height:1.85}
.entry-body > * + *{margin-top:1.6em}
.entry-body h2{
  font-size:clamp(19px,2.4vw,28px);font-weight:800;line-height:1.5;letter-spacing:-.01em;
  margin-top:2.4em;padding-bottom:.5em;border-bottom:1px solid var(--line);
}
.entry-body h3{font-size:clamp(16.5px,1.9vw,21px);font-weight:800;line-height:1.6;margin-top:2em}
.entry-body h4{font-size:16px;font-weight:800;margin-top:1.8em}
.entry-body p{color:var(--ink-2)}
.entry-body strong{color:var(--ink);font-weight:700}
.entry-body a{color:var(--accent);border-bottom:1px solid currentColor}
.entry-body a:hover{opacity:.75}
/* URL をそのままリンク文字にした行は、日本語と違って折り返す場所が無い。
   スマホ幅で本文からはみ出すので、そこだけ途中で折る。
   anywhere ではなく break-word にしているのは、前者が最小幅の計算にも
   効いて表の列幅を痩せさせるため。 */
.entry-body a{overflow-wrap:break-word}
.entry-body ul,.entry-body ol{padding-left:1.4em;color:var(--ink-2)}
.entry-body ul li{list-style:disc}
.entry-body ol li{list-style:decimal}
.entry-body li + li{margin-top:.5em}
.entry-body img{height:auto;border:1px solid var(--line)}
.entry-body figure{margin-block:2em}
/* 本文の読み幅は 820px。管理画面のスクリーンショットをここに収めると
   57% まで縮んで、UI の文字が読めなくなる（手順記事では致命的）。
   図版だけ読み幅より外へ出す。文章の行長は変えない。
   画面が狭いときは通常どおり本文幅に収める。 */
@media(min-width:1240px){
  .entry-body figure{width:1100px;margin-left:calc(50% - 550px)}
}
.entry-body figcaption{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:center}
.entry-body blockquote{
  padding-left:20px;border-left:2px solid var(--accent);color:var(--ink-2);
}
.entry-body table{width:100%;border-collapse:collapse;font-size:15px}
.entry-body th,.entry-body td{
  padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.85;
}
.entry-body th{background:var(--bg-2);color:var(--ink);font-weight:700;white-space:nowrap}
/* 比較表は列を減らせないのでスマホ幅には収まらない。素のまま置くと
   表がページ本体を押し広げ、右端の列が画面外に出たうえページ全体が
   横にズレる（2026-08-21に比較記事で発生）。表の中だけで
   横スクロールさせ、ページ本体は動かさない。 */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:2em;
  overscroll-behavior-x:contain;
}
.table-scroll>table{margin-block:0}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* スクロールできることを示す。端に達したら消えるよう
   background-attachment:local と scroll を重ねる古典的な手法。 */
.table-scroll{
  background:
    linear-gradient(to right,var(--bg) 30%,rgba(0,0,0,0)) left center/44px 100% no-repeat local,
    linear-gradient(to left,var(--bg) 30%,rgba(0,0,0,0)) right center/44px 100% no-repeat local,
    linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,0)) left center/16px 100% no-repeat scroll,
    linear-gradient(to left,rgba(0,0,0,.28),rgba(0,0,0,0)) right center/16px 100% no-repeat scroll;
}
/* 端のぼかしだけでは横スクロールに気づかれないので、
   実際にはみ出しているとき（.is-scrollable は theme.js が付ける）に
   限って一言添える。収まっている表には出さない。 */
.table-scroll{position:relative}
/* 表の下に置くと、行数の多い表では読者が最後まで見るまで
   気づけない。読み始める前に見える上側に置く。 */
.table-scroll.is-scrollable::before{
  content:"→ 横にスクロールできます";
  display:block;margin-bottom:8px;font-size:12.5px;color:var(--ink-3);
  font-family:var(--mono);letter-spacing:.04em;
  position:sticky;left:0;
}
/* 狭い画面では見出しの折り返しを許す。多くの表はこれだけで収まり、
   スクロールが要らなくなる。 */
@media(max-width:760px){
  .entry-body th{white-space:normal}
  .entry-body table{font-size:14px}
  .entry-body th,.entry-body td{padding:10px 11px}
}
.entry-body td{color:var(--ink-2)}
/* 旧テーマのボタン記法をそのまま活かす。
   本文中では段落の中に混ぜず単独で置く運用なので、左寄せにせず中央へ寄せる。
   width:fit-content を併用しているのは、flex にすると幅いっぱいに伸びるため。 */
.entry-body .q_button{
  display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;margin:8px auto 0;
  padding:14px 26px;background:var(--btn-bg);color:var(--btn-ink);font-weight:700;
  border-bottom:0;transition:filter .25s,transform .25s var(--ease);
}
.entry-body .q_button:hover{filter:brightness(1.1);transform:translateY(-1px);opacity:1}
/* 本文リンクの指定（.entry-body a = 詳細度0-1-1）が .btn（0-1-0）に勝つため、
   記事の中に置いたボタンは文字色が本文リンクの緑に上書きされ、
   緑地に緑文字＝ラベルが消える。下線も付く。実際に提携CTAが
   緑一色の箱になっていた（2026-08-21 に5記事で発生）。詳細度を揃えて戻す。
   ボタンは本文中では単独で置くので中央に寄せる。 */
.entry-body a.btn{color:var(--btn-ink);border-bottom:0;margin-inline:auto}
.entry-body a.btn:hover{opacity:1}
.entry-body a.btn--ghost{color:var(--ink)}
.entry-body a.btn--ghost:hover{color:var(--accent)}
/* 提携CTAは参照ボックスの中で単独。ボックスごと中央に寄せる */
.sc-solution-ref{text-align:center}
.sc-solution-ref .sc-solution-name{text-align:center}
.entry-body a.sc-outbound{justify-content:center}
.entry-body .check2{padding-left:0}
.entry-body .check2 li{list-style:none;position:relative;padding-left:26px}
.entry-body .check2 li::before{
  content:"✓";position:absolute;left:0;top:.1em;color:var(--accent);font-weight:700;
}
/* ページビルダーから移した分 */
.entry-body .pb-slider{display:grid;gap:clamp(14px,2vw,22px);margin-block:2em}
.entry-body .pb-image img,.entry-body .pb-slide img{width:100%}
.entry-body .lead{font-size:clamp(16px,1.9vw,20px);font-weight:700;color:var(--ink);line-height:1.8}

/* 一覧 */
.list{border-top:1px solid var(--line)}
.list-item{
  display:grid;grid-template-columns:auto 1fr 26px;align-items:center;
  gap:clamp(14px,2.4vw,30px);padding:clamp(18px,2.2vw,26px) 2px;
  border-bottom:1px solid var(--line);transition:background-color .3s,padding-left .45s var(--ease);
}
.list-item:hover{background:var(--panel);padding-left:clamp(8px,1.4vw,18px)}
.list-item .thumb{width:clamp(80px,10vw,132px);flex:none}
.list-item .thumb img{width:100%;height:auto;border:1px solid var(--line)}
.list-item .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.list-item .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.1em}
.list-item .kind{color:var(--accent);border:1px solid currentColor;padding:2px 8px;font-size:12px}
.list-item .ttl{font-size:clamp(17px,1.6vw,18px);font-weight:800;line-height:1.5}
.list-item .ex{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.list-item .go{font-family:var(--mono);font-size:14px;color:var(--ink-3);text-align:right;
  transition:color .3s,transform .4s var(--ease)}
.list-item:hover .go{color:var(--accent);transform:translateX(5px)}
@media(max-width:640px){
  .list-item{grid-template-columns:1fr;gap:10px}
  .list-item .go{text-align:left}
}
.empty{color:var(--ink-2);padding-block:40px}

/* ページ送り */
.pagination{margin-top:clamp(28px,3.6vw,48px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:13px}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding-inline:12px;
  border:1px solid var(--line);color:var(--ink-2);transition:border-color .3s,color .3s;
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink);font-weight:700}

/* 次に読む */
.next-contents{border-top:1px solid var(--line-soft);background:var(--bg-2)}
.next-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.next-item{
  display:flex;flex-direction:column;gap:8px;background:var(--bg);
  padding:clamp(18px,2.2vw,26px);transition:background-color .3s;position:relative;
}
.next-item:hover{background:var(--panel-2)}
.next-item .kind{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.next-item .ttl{font-size:17px;font-weight:700;line-height:1.6}
.next-item .go{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:auto;
  transition:color .3s,transform .4s var(--ease)}
.next-item:hover .go{color:var(--accent);transform:translateX(4px)}

/* ============================================================
   トップ 03：GROWTH LOOP
   円環ではなく横一列＋土台にしている。環の中に AI を入れると
   「AI をやる工程」に見えて、全工程を支えるという役割が消えるため。
   ============================================================ */
.loop-figure{margin-top:clamp(24px,3vw,40px)}
.loop-stages{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media(max-width:1080px){.loop-stages{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.loop-stages{grid-template-columns:repeat(2,1fr)}}
.loop-stage{
  background:var(--bg-2);padding:clamp(16px,2vw,24px) clamp(12px,1.4vw,18px);
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:background-color .35s;
}
.loop-stage:hover{background:var(--panel-2)}
.loop-stage .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3)}
.loop-stage .en{
  font-family:var(--mono);font-size:clamp(12.5px,1.35vw,15px);font-weight:700;
  letter-spacing:.1em;color:var(--ink);
}
.loop-stage .ja{font-size:14px;color:var(--ink-2);line-height:1.6}
.loop-stage .biz{
  margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:12px;
  color:var(--accent);letter-spacing:.08em;
}
/* 担当事業。番号表記は段階番号（01〜06）と同じ見た目の数字が
   2つの意味で混在して読めなくなったため、短縮事業名のリンクにする */
.loop-stage .biz .biz-sep{color:var(--ink-3)}
.loop-stage .biz a{
  color:inherit;padding:2px 1px;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
}
.loop-stage .biz a:hover{text-decoration-color:currentColor}
/* 次の工程へ流れていることを、区切りの上の小さな三角で示す */
.loop-stage:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-7px;z-index:2;
  border-left:6px solid var(--accent);border-block:5px solid transparent;
  transform:translateY(-50%);
}
@media(max-width:1080px){.loop-stage:nth-child(3n)::after{display:none}}
@media(max-width:620px){
  .loop-stage:nth-child(3n)::after{display:block}
  .loop-stage:nth-child(2n)::after{display:none}
}

/* ── 事業ページの Growth Loop 帯（旧・画像KVの置き換え） ── */
.biz-loop{padding-block:clamp(26px,3.6vw,48px);border-bottom:1px solid var(--line-soft)}
.bl-ttl{font-size:clamp(17px,2.1vw,23px);font-weight:800;letter-spacing:.01em;margin-top:10px;line-height:1.5}
.loop-stages--biz{margin-top:clamp(14px,2vw,22px)}
.loop-stages--biz .loop-stage{padding:clamp(12px,1.6vw,18px) clamp(10px,1.3vw,16px);gap:4px}
.loop-stages--biz .loop-stage .ja{font-size:13px}
/* 担当外は一段沈め、担当局面はアクセントで持ち上げる（色だけに依存せず●印も付く） */
.loop-stages--biz .loop-stage:not(.is-on) .en{color:var(--ink-3)}
.loop-stages--biz .loop-stage:not(.is-on) .ic{color:var(--ink-3)}
.loop-stages--biz .loop-stage.is-on{background:var(--accent-dim);box-shadow:inset 0 0 0 1px var(--accent)}
.loop-stages--biz .loop-stage.is-on .en{color:var(--accent)}
/* 緑の地（accent-dim）に乗せると ink-3 / ink-2 では 4.5:1 に届かない */
.loop-stages--biz .loop-stage.is-on .n{color:var(--accent)}
.loop-stages--biz .loop-stage.is-on .ja{color:var(--ink)}
.loop-stages--biz .loop-stage.is-on .ic{color:var(--accent)}
.loop-stages--biz .loop-stage .on-mark{
  position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
/* 基盤ページ：特定の局面ではなく全体を支える＝全カードを均等に薄くともす。
   ★ここは .is-on も付くので地が accent-dim になる。上の注意書きのとおり
   ink-2 では 3.57:1 で AA に届かないため（実測）、文字は ink に戻す。
   accent にすると「担当局面」と同じ見え方になり、区別が消える。 */
.loop-stages--biz .loop-stage.is-base{box-shadow:inset 0 0 0 1px var(--accent-dim)}
.loop-stages--biz .loop-stage.is-base .en{color:var(--ink)}
.bl-cap{margin-top:14px;font-size:14px;color:var(--ink-2);line-height:1.8}
/* 事業ハブに残る画像KVは、スマホでは文字が読めないため出さない */
@media(max-width:700px){.biz-kv{display:none}}

.loop-return{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:14px;color:var(--accent);font-family:var(--sans);
}
.loop-return .arw{font-size:17px;line-height:1}

.loop-base{
  margin-top:clamp(18px,2.2vw,28px);padding:clamp(20px,2.6vw,30px);
  border:1px dashed var(--accent);background:var(--accent-dim);
}
.loop-base .base-label{
  display:block;font-family:var(--mono);font-size:clamp(13px,1.4vw,16px);
  font-weight:700;letter-spacing:.2em;color:var(--accent);text-align:center;
}
.base-items{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(16px,2vw,22px);background:var(--line-soft);
}
@media(max-width:820px){.base-items{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.base-items{grid-template-columns:1fr}}
.base-items li{
  background:var(--bg);padding:clamp(12px,1.6vw,18px);
  display:flex;flex-direction:column;gap:4px;
}
.base-items b{font-size:15px;font-weight:700;color:var(--ink)}
.base-items span{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.base-note{margin-top:16px;font-size:13px;color:var(--ink-2);text-align:center}

/* ============================================================
   トップ 04：BUSINESS（4事業）
   ============================================================ */
.biz-list{border-top:1px solid var(--line)}
.biz-row{
  display:grid;
  grid-template-columns:clamp(38px,3.6vw,54px) clamp(190px,21vw,290px) 1fr auto 26px;
  align-items:center;gap:clamp(12px,1.8vw,26px);
  padding:clamp(18px,2.2vw,28px) clamp(4px,1vw,14px);
  border-bottom:1px solid var(--line);position:relative;isolation:isolate;
  transition:padding-left .45s var(--ease);
}
.biz-row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--panel-2);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.biz-row:hover::before{transform:scaleX(1)}
.biz-row:hover{padding-left:clamp(12px,1.8vw,26px)}
.biz-row .n{font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:.1em;color:var(--accent)}
.biz-row .ttl{display:flex;flex-direction:column;gap:5px}
.biz-row .ttl .en{
  font-family:var(--mono);font-size:clamp(12.5px,1.35vw,15px);font-weight:700;
  letter-spacing:.06em;color:var(--ink);
}
.biz-row .ttl .ja{font-size:clamp(16px,1.5vw,18px);font-weight:800;letter-spacing:.005em}
.biz-row .desc{font-size:clamp(14px,1.1vw,15px);color:var(--ink-2);line-height:1.8}
.biz-row .stage{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);
  border:1px solid currentColor;padding:4px 9px;white-space:nowrap;
}
.biz-row .go{font-family:var(--mono);font-size:14px;color:var(--ink-3);text-align:right;
  transition:color .3s,transform .4s var(--ease)}
.biz-row:hover .go{color:var(--accent);transform:translateX(5px)}
@media(max-width:960px){
  .biz-row{grid-template-columns:auto 1fr;gap:6px 16px;align-items:start;padding-block:22px}
  .biz-row .n{grid-row:1}
  .biz-row .ttl{grid-column:2}
  .biz-row .desc{grid-column:2;margin-top:6px}
  .biz-row .stage{grid-column:2;justify-self:start;margin-top:10px}
  .biz-row .go{position:absolute;top:22px;right:0}
  .biz-row:hover{padding-left:10px}
}

/* ============================================================
   トップ 07：AI & DATA の数値
   ============================================================ */
.data-assets{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media(max-width:820px){.data-assets{grid-template-columns:repeat(2,1fr)}}
.asset{background:var(--bg-2);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px}
.asset .v{
  font-size:clamp(24px,3.2vw,40px);font-weight:800;color:var(--accent);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;
}
.asset .v i{font-style:normal;font-size:.4em;font-weight:700;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.asset .k{font-size:13px;color:var(--ink-2)}

/* ============================================================
   トップ 08〜11：カード一覧（中身があるときだけ現れる）
   ============================================================ */
.card-list{
  /* auto-fill は「入るだけ枠を作る」ので、1〜2件のとき空の列が残る。
     auto-fit なら余った枠が畳まれ、件数どおりの見た目になる。
     さらに件数クラスで上限を決め、2件を画面いっぱいに引き伸ばさない。 */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.card-list--1{grid-template-columns:1fr}
.card-list--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.card-list--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
/* 1件のときは横長の注目枠として見せる */
.card-list--1 .card-item{padding:clamp(24px,3vw,40px)}
.card-list--1 .card-item .ttl{font-size:clamp(19px,2.2vw,25px)}
.card-item{
  background:var(--bg);padding:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column;gap:9px;transition:background-color .3s;
}
.card-item:hover{background:var(--panel-2)}
.card-item .badge{
  align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--accent);border:1px solid currentColor;padding:3px 8px;
}
.card-item .ttl{font-size:17px;font-weight:700;line-height:1.6}
.card-item .ex{font-size:14.5px;color:var(--ink-2);line-height:1.85}
.card-item .go{
  margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:13.5px;color:var(--ink-3);
  transition:color .3s,transform .4s var(--ease);
}
.card-item:hover .go{color:var(--accent);transform:translateX(4px)}

/* ============================================================
   読み物ページの幅
   ------------------------------------------------------------
   1440px の器のまま本文だけ 44em に収めると、見出しは左端、本文も
   左端、右側だけが大きく空く。読み物として不自然なので、読み物系の
   ページは見出し・パンくず・本文を同じ幅の器に入れて中央に置く。
   左端が 3 つとも揃うのはそのため。
   ============================================================ */
.wrap--read{max-width:calc(820px + var(--pad) * 2)}
body.is-read .page-head .wrap,
body.is-read .breadcrumb .wrap,
body.is-read .pagination{max-width:calc(820px + var(--pad) * 2)}
.entry-body{max-width:none}

/* 本文の直前・直後の余白をページ間で揃える */
.entry{padding-top:clamp(34px,4.4vw,60px)}
.page-head{padding-block:clamp(30px,4vw,54px)}

/* フォーム。iOS は 16px 未満の入力欄で拡大するので下限を決める */
.entry-body input[type="text"],
.entry-body input[type="email"],
.entry-body input[type="tel"],
.entry-body input[type="url"],
.entry-body input[type="number"],
.entry-body input[type="search"],
.entry-body textarea,
.entry-body select{
  width:100%;font-family:inherit;font-size:16px;line-height:1.7;
  padding:13px 14px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.entry-body select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.entry-body textarea{min-height:170px}
.entry-body input:focus,.entry-body textarea:focus,.entry-body select:focus{border-color:var(--accent);outline:none}
.entry-body input[type="submit"],.entry-body button[type="submit"]{
  font-size:16px;font-weight:700;padding:15px 32px;background:var(--btn-bg);color:var(--btn-ink);
  border:0;cursor:pointer;transition:filter .25s;
}
.entry-body input[type="submit"]:hover{filter:brightness(1.1)}
.entry-body input[type="checkbox"],.entry-body input[type="radio"]{width:17px;height:17px;accent-color:var(--accent)}
.entry-body .wpcf7-list-item{margin-left:0;margin-right:16px}
.entry-body .wpcf7-not-valid-tip{font-size:13px;color:var(--error)}
.entry-body .wpcf7-response-output{font-size:14px;margin-inline:0;border-color:var(--line)}
.entry-body label{display:block;font-size:15px;font-weight:700;color:var(--ink)}
/* CF7 はラベルと入力欄の間の改行を <br> にするため、block のラベルと
   合わさって余計な空行ができていた。<br> を消し、間隔は margin で持つ */
.entry-body .wpcf7 label+br{display:none}
.entry-body .wpcf7 label{margin-bottom:8px}
/* 同意チェックと送信ボタンは中央揃え */
.entry-body .wpcf7 p:has(.wpcf7-acceptance){text-align:center}
.entry-body .wpcf7 p:has(> .wpcf7-submit){text-align:center}
.entry-body .wpcf7 input[type="submit"]{display:block;margin-inline:auto}
.entry-body .req,.entry-body .required{font-size:12px;color:var(--accent);border:1px solid currentColor;padding:1px 7px;margin-left:8px}

/* ============================================================
   役割の注記（新旧ページの関係を示す小さな帯）
   ============================================================ */
.role-note{
  border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px);background:var(--panel);
}
.role-note p{font-size:15px;color:var(--ink-2);line-height:1.85}
.role-note a{color:var(--accent);border-bottom:1px solid currentColor}

/* ============================================================
   会社案内のカード
   ============================================================ */
.co-intro{font-size:clamp(16px,1.7vw,18.5px);line-height:1.95;color:var(--ink-2)}
.co-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.co-card{
  display:flex;flex-direction:column;gap:9px;background:var(--bg);
  padding:clamp(22px,2.6vw,32px);transition:background-color .3s;
}
.co-card:hover{background:var(--panel)}
.co-card .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3)}
.co-card .en{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.co-card .ttl{font-size:19px;font-weight:800;line-height:1.5}
.co-card .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:13.5px;color:var(--ink-3);
  transition:color .3s,transform .4s var(--ease)}
.co-card:hover .go{color:var(--accent);transform:translateX(4px)}
.co-more{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px)}

/* ============================================================
   コラム
   ============================================================ */
.col-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,34px)}
.col-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;letter-spacing:.02em;color:var(--ink-2);
  padding:8px 15px;border:1px solid var(--line);transition:color .3s,border-color .3s,background-color .3s;
}
.col-chip .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.col-chip:hover{color:var(--ink);border-color:var(--accent)}
.col-chip.is-current{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.col-chip.is-current .n{color:var(--btn-ink);opacity:.7}

.col-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.col-list--sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* 事業ページの関連ノウハウはスマホのみ横レール。縦4枚で本筋（事例・CTA）への
   到達を遅らせないための圧縮。次カードを約2割見切れさせるのが「横に続きがある」
   と伝える要（peek）。全幅ピッタリだとスワイプ可能なこと自体に気づかれない。
   PCはマウスの横スクロールが億劫なので通常グリッドのまま */
@media(max-width:820px){
  .col-list--rail{
    display:flex;overflow-x:auto;gap:12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* 右は .wrap の余白を突き抜けて画面端でカードが切れる＝続きの気配 */
    margin-right:calc(var(--pad) * -1);
    padding:1px 1px 4px; /* box-shadow の枠線1pxがoverflowで欠けないように */
    padding-right:var(--pad);
    scrollbar-width:none;
  }
  .col-list--rail::-webkit-scrollbar{display:none}
  .col-list--rail > *{flex:0 0 78%;scroll-snap-align:start}
}
.col-card{background:var(--bg)}
.col-card-link{display:flex;flex-direction:column;height:100%;transition:background-color .3s}
.col-card-link:hover{background:var(--panel)}
.col-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line)}
.col-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.col-card-link:hover .col-thumb img{transform:scale(1.04)}
.col-thumb-none{
  display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--ink-3);
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:32px 32px;
}
.col-body{display:flex;flex-direction:column;gap:9px;padding:clamp(18px,2.2vw,26px)}
.col-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.06em}
.col-cat{color:var(--accent);border:1px solid currentColor;padding:2px 8px;font-family:var(--sans);
  font-size:12px;letter-spacing:.04em}
a.col-cat:hover{background:var(--accent-dim)}
.col-upd{color:var(--ink-3)}
.col-ttl{font-size:17.5px;font-weight:800;line-height:1.55}
.col-ex{font-size:14.5px;color:var(--ink-2);line-height:1.85}

/* 記事 */
.col-head{margin-bottom:clamp(20px,2.6vw,30px)}
.col-head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);letter-spacing:.06em}
.col-byline{margin-top:12px;display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--ink-3)}
.toc{
  display:block;margin-bottom:clamp(26px,3.2vw,40px);
  border:1px solid var(--line);background:var(--panel);padding:clamp(18px,2.2vw,26px);
}
.toc-h{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);margin-bottom:12px}
.toc ol{display:flex;flex-direction:column;gap:9px}
.toc li.lv3{padding-left:20px}
.toc a{font-size:14.5px;color:var(--ink-2);line-height:1.6;transition:color .3s}
.toc li.lv2 > a{font-weight:700;color:var(--ink)}
.toc a:hover{color:var(--accent)}

/* ============================================================
   事業ページ
   ============================================================ */
.biz-cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,25vw,330px);gap:clamp(28px,4vw,64px);align-items:start}
.biz-main .entry-body{max-width:44em}
.biz-side{position:sticky;top:86px;display:flex;flex-direction:column;gap:18px;
  border:1px solid var(--line);background:var(--panel);padding:clamp(20px,2.4vw,28px)}
.side-block h2{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);
  font-weight:400;margin-bottom:7px;border:0;padding:0}
.side-block p{font-size:14.5px;color:var(--ink-2);line-height:1.85}
.side-cta{justify-content:center;text-align:center}
@media(max-width:900px){
  /* 1fr は min-width:auto を含むので、中に幅の要る要素があると
     グリッドの列そのものが広がり、body の overflow-x:clip で
     右端が切り落とされる。minmax(0,1fr) にして列を親幅に固定する
     （PC側の指定は元から minmax(0,1fr) で、モバイル側だけ抜けていた）。 */
  .biz-cols{grid-template-columns:minmax(0,1fr)}
  .biz-main,.biz-side{min-width:0}
  .biz-side{position:static}
  .biz-main .entry-body{max-width:none}
}

.sec-head--sm{margin-bottom:clamp(20px,2.6vw,32px)}
.sec-head--sm h2{font-size:clamp(20px,2.6vw,30px)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
/* 番号と工程名は「01 成果の定義」と1行で読ませる。説明文は全幅に落とす */
.step{background:var(--bg);padding:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:8px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent)}
.step p{grid-column:1/-1}
.step h3{font-size:17px;font-weight:800;line-height:1.5}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.85}

.ticks{display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2);line-height:1.8}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}

.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.fit{background:var(--bg);padding:clamp(20px,2.4vw,30px)}
.fit h3{font-size:16px;font-weight:800;margin-bottom:14px}
.fit--yes h3{color:var(--accent)}
.fit--no h3{color:var(--ink-3)}
.fit ul{display:flex;flex-direction:column;gap:10px}
.fit li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2);line-height:1.8}
.fit--yes li::before{content:"○";position:absolute;left:0;color:var(--accent);font-size:13px;top:.25em}
.fit--no li::before{content:"×";position:absolute;left:0;color:var(--ink-3);font-size:13px;top:.25em}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;list-style:none;
  padding:clamp(16px,2vw,22px) 2px;font-size:16px;font-weight:700;line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--mono);color:var(--accent);flex:none;font-size:14px;line-height:1.7}
.faq summary::after{content:"＋";margin-left:auto;color:var(--ink-3);flex:none;font-size:14px;line-height:1.7}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 2px clamp(16px,2vw,22px) 26px;font-size:15px;color:var(--ink-2);line-height:1.9}

/* 事業どうし・記事から事業への行き来 */
.biz-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.biz-link{display:flex;flex-direction:column;gap:8px;background:var(--bg);
  padding:clamp(20px,2.4vw,28px);transition:background-color .3s}
.biz-link:hover{background:var(--panel)}
.biz-link .ttl{font-size:17px;font-weight:800;line-height:1.5}
.biz-link .ex{font-size:14.5px;color:var(--ink-2);line-height:1.8}
.biz-link .go{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:13.5px;color:var(--ink-3);
  transition:color .3s,transform .4s var(--ease)}
.biz-link:hover .go{color:var(--accent);transform:translateX(4px)}
.biz-link--base .ttl{color:var(--accent)}

/* 事業ハブから基盤ページへの帯 */
.base-band{
  display:grid;grid-template-columns:clamp(240px,26vw,330px) 1fr;gap:clamp(20px,3vw,44px);
  align-items:center;border:1px solid var(--line);background:var(--panel);
  padding:clamp(24px,3vw,40px);transition:border-color .3s,background-color .3s;
}
.base-band:hover{border-color:var(--accent);background:var(--panel-2)}
.base-band-h{display:flex;flex-direction:column;gap:12px}
.base-band-h .ttl{font-family:var(--mono);font-size:clamp(15px,1.8vw,21px);font-weight:700;letter-spacing:.06em;line-height:1.45}
.base-band-b{font-size:15px;color:var(--ink-2);line-height:1.9}
.base-band .go{grid-column:1/-1;font-family:var(--mono);font-size:13.5px;color:var(--accent);letter-spacing:.1em}
@media(max-width:820px){.base-band{grid-template-columns:1fr}}

/* CTA セクションの上余白は前のブロックと重ならないように */
.cta-sec{padding-top:0}

/* 現在地はリンクにしない。見た目はリンクと揃える */
.gnav .is-current{font-size:14.5px;color:var(--ink);padding:4px 0;position:relative}
.gnav .is-current::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent)}
.mnav .is-current{display:block;font-size:17px;font-weight:700;padding:13px 0;color:var(--accent);border-bottom:1px solid var(--line-soft);text-align:right}
.f-col .is-current{display:block;font-size:13px;color:var(--ink-3);padding-block:1px}
.f-bottom nav .is-current{font-size:12.5px;color:var(--ink-3)}
span.logo{display:inline-block}

/* ============================================================
   グリッドの余りセル
   ------------------------------------------------------------
   枠線を「器の背景 + 1px の隙間」で描くと、最終行が埋まらないとき
   （5 件を 4 列に並べたときの 5 件目の隣など）に、器の背景色が
   四角い塊として残る。中身が無いのに枠があるように見えるので、
   線は器ではなく各セルに持たせる。
   ============================================================ */
.steps,.co-cards,.col-list,.card-list,.next-list,.biz-links,.fit-grid{
  background:none;border:0;gap:1px;
}
.steps > *,.co-cards > *,.col-list > *,.card-list > *,.next-list > *,.biz-links > *,.fit-grid > *{
  box-shadow:0 0 0 1px var(--line);
}

/* ============================================================
   ロゴ
   ------------------------------------------------------------
   画像はサイト設定（カスタムロゴ）から読む。テーマの中に置くと、
   テーマを差し替えたときにロゴだけ消える。
   ============================================================ */
.logo img{height:32px;width:auto;display:block}
.site-footer .logo img{height:34px}
.mnav .logo img{height:28px}
@media(max-width:520px){.logo img{height:27px}}

/* 代表挨拶の署名 */
.entry-body .sign{
  margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line);
  font-size:15px;line-height:2;color:var(--ink);letter-spacing:.04em;
}

/* Growth Loop のアイコン。
   セルの右上に置く。文字より前に目に入らないよう、既定は落として
   置き、その局面を見ているときだけ明るくする。 */
.loop-stage .ic{
  position:absolute;top:clamp(14px,1.8vw,20px);right:clamp(12px,1.4vw,18px);
  width:clamp(30px,2.8vw,36px);height:auto;
  color:var(--accent);opacity:.6;transition:opacity .35s,transform .5s var(--ease);
}
.loop-stage:hover .ic{opacity:1;transform:translateY(-2px)}
/* アイコンと文字が重ならないよう、見出し側に逃げ幅を持たせる */
.loop-stage .n,.loop-stage .en{padding-right:clamp(28px,3vw,38px)}

/* 本文中の帯状の挿絵。
   節の変わり目に置く。16:9 のまま入れると 1 枚で画面の半分を占め、
   読み物のリズムが切れるので、横長に切って帯として扱う。 */
.entry-body .band{margin-block:clamp(26px,3.4vw,44px);border:1px solid var(--line)}
.entry-body .band img{width:100%;height:auto;border:0}
/* 節見出しの直後に来たときは、見出しとの間を詰めて一組に見せる */
.entry-body h2 + .band{margin-top:clamp(18px,2.2vw,28px)}

/* 事業ページのキービジュアル。
   紙の図版なので、暗い地の上で 1 枚の板として見えるよう枠を付ける。 */
.biz-kv{margin-top:clamp(26px,3.4vw,44px)}
.biz-kv img{width:100%;height:auto;border:1px solid var(--line);display:block}

/* reCAPTCHA の注記。旧テーマの白地ブロックをやめて、他の注記と同じ扱いに */
.entry-body .recaptcha-note{
  margin-top:14px;font-size:13px;color:var(--ink-3);line-height:1.9;
}
.entry-body .recaptcha-note a{color:var(--ink-2);border-bottom:1px solid currentColor}

/* 沿革の年表 */
.entry-body .history-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.entry-body .history-list dt{
  font-family:var(--mono);font-size:17px;letter-spacing:.1em;color:var(--accent);
  padding-top:clamp(18px,2.2vw,26px);
}
.entry-body .history-list dd{
  font-size:16.5px;color:var(--ink);padding-bottom:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--line);margin-top:6px;
}

/* ============================================================
   スマートフォンでの調整（実機確認からの反映）
   ============================================================ */

/* Growth Loop：2 列になる幅では 1 セルが大きいのに、文字とアイコンが
   PC 前提のサイズのままで小さかった。セルの広さに合わせて上げる。 */
@media(max-width:620px){
  .loop-stage{padding:22px 18px;gap:9px}
  .loop-stage .n{font-size:14px}
  .loop-stage .en{font-size:17px}
  .loop-stage .ja{font-size:15.5px}
  .loop-stage .biz{font-size:14px;padding-top:12px}
  .loop-stage .ic{width:38px;top:18px;right:16px;opacity:.75}
}

/* 社名の由来：狭い幅では flex の折返しで「= SINCEED」だけが落ち、
   数式として読めなくなっていた。縦に積むと今度は式に見えないので、
   サイズを絞って 1 行の数式のまま収める（390px でも約 300px に収まる）。 */
@media(max-width:620px){
  .naming{gap:8px 10px;flex-wrap:nowrap}
  .naming-w{font-size:12.5px;letter-spacing:.1em}
  .naming-w b{font-size:11.5px;letter-spacing:.12em}
  .naming-x,.naming-eq{font-size:13px}
  /* 語group は英字＋和訳の 2 段。答えの SINCEED だけ 1 段なので、
     下端揃えのままだと宙に浮く。英字の行に頭を揃える。 */
  .naming-brand{font-size:16.5px;align-self:flex-start;margin-top:-1px}
}

/* 会社案内のリンク：4 本のうち 1 本だけが折り返して段差に見えていた。
   狭い幅では 2×2 の格子に固定して、並びとして読めるようにする。 */
@media(max-width:640px){
  .co-links{display:grid;grid-template-columns:repeat(2,1fr);gap:8px clamp(16px,4vw,26px)}
  .co-links a{font-size:15px;justify-content:space-between;border-bottom:1px solid var(--line-soft);padding:10px 2px}
}

/* ============================================================
   ボタンの発光と、スマートフォンでの中央配置
   ------------------------------------------------------------
   光らせるのは GIF ではなく CSS で行う。画像より軽く、Retina でも
   滲まず、色をサイトのミントに正確に揃えられ、reduced-motion の
   設定にも追従できる。

   発光は「主要な申し込みボタン」だけに付ける。全部を光らせると
   どれも目立たなくなる。ghost（枠だけ）のボタンは脈動のみ。
   ============================================================ */

/* ゆっくり脈打つグロー */
@keyframes btn-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(57,224,176,0),0 6px 22px rgba(57,224,176,.28)}
  50%{box-shadow:0 0 0 5px rgba(57,224,176,.14),0 6px 38px rgba(57,224,176,.6)}
}
/* 数秒おきに走るハイライト */
@keyframes btn-shine{
  0%{transform:translateX(-180%) skewX(-18deg)}
  46%,100%{transform:translateX(320%) skewX(-18deg)}
}

.btn--lg:not(.btn--ghost),
.side-cta,
.entry-body .q_button{
  position:relative;overflow:hidden;isolation:isolate;
  animation:btn-glow 2.6s ease-in-out infinite;
}
.btn--lg:not(.btn--ghost)::after,
.side-cta::after,
.entry-body .q_button::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:34%;z-index:-0;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55) 50%,transparent);
  transform:translateX(-180%) skewX(-18deg);
  animation:btn-shine 3.4s ease-in-out infinite;
  pointer-events:none;
}
/* 枠だけのボタンは、枠の色が静かに強まる程度に留める */
@keyframes btn-ghost-pulse{
  0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(57,224,176,0)}
  50%{border-color:rgba(57,224,176,.7);box-shadow:0 0 16px rgba(57,224,176,.18)}
}
.btn--lg.btn--ghost{animation:btn-ghost-pulse 2.6s ease-in-out infinite}

/* ヘッダーの「無料で相談する」は常時視界に入るので光らせない。
   スクロール中ずっと明滅していると、本文を読む邪魔になる。 */

/* ---- スマートフォンでは、ボタンは全幅・中央 ---- */
@media(max-width:640px){
  .fv .cta{flex-direction:column}
  .fv .cta .btn,
  .cta-actions .btn,
  .side-cta{width:100%;justify-content:center;text-align:center}
  .entry-body .q_button{display:flex;width:100%;justify-content:center;text-align:center}
  /* 本文中の単独ボタン（旧テーマの q_button 記法）も中央へ */
  .entry-body p:has(> .q_button){text-align:center}
  /* 一覧・関連の「すべて見る」も中央に寄せて押しやすく */
  .more{display:flex;justify-content:center;width:100%}
  .mnav .btn{justify-content:center}
}

/* コラムカードの「続きを読む」。
   カード全体がリンクだが、どこを押せばよいかが分かる明示的な
   ボタンを置く（とくにスマートフォンでは押す場所の合図になる）。 */
.col-more{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--accent);
  border:1px solid rgba(57,224,176,.5);padding:10px 18px;
  transition:background-color .3s,border-color .3s;
}
.col-more .arw{font-family:var(--mono);transition:transform .35s var(--ease)}
.col-card-link:hover .col-more{background:var(--accent-dim);border-color:var(--accent)}
.col-card-link:hover .col-more .arw{transform:translateX(4px)}
@media(max-width:640px){
  .col-more{width:100%;justify-content:center;padding-block:12px;font-size:14.5px}
}

/* カード類の矢印。
   縦積みのカードでは matgin-top:auto の矢印が「矢印だけの行」として
   孤立して見えていた。狭幅では右端の中央に置き、行を増やさない。 */
@media(max-width:640px){
  .co-card,.biz-link,.next-item{position:relative;padding-right:52px}
  .co-card .go,.biz-link .go,.next-item .go{
    position:absolute;right:18px;top:50%;transform:translateY(-50%);
    margin:0;padding:0;
  }
  /* 会社案内のカードは 1 行の帯として組み直す。
     縦積みのままだと 4 枚で画面 2 枚ぶんを占有していた。 */
  .co-card{
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n en" "n ttl";
    align-items:center;column-gap:16px;row-gap:3px;padding:18px 52px 18px 18px;
  }
  .co-card .n{grid-area:n;font-size:15px}
  .co-card .en{grid-area:en}
  .co-card .ttl{grid-area:ttl;font-size:18px}
}

/* 視覚的に隠して読み上げには残す */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 印刷では確実に最終値を出す（アニメ用の表示を隠し、読み上げ用を見せる） */
@media print{
  .num .cnt{display:none}
  .num .sr-only{position:static;width:auto;height:auto;margin:0;clip:auto;white-space:normal;overflow:visible}
  /* 紙は白地が前提。トークンをライト値へ倒し、インク全塗りを避ける。
     /growth/・/testmarketing/（blank-slateテンプレート）は固有デザインの
     ため body:not() で丸ごと除外する */
  body:not(.page-template-blank-slate-template){
    --bg:#FFFFFF;--bg-2:#F0F3F1;--panel:#FFFFFF;--panel-2:#F0F3F1;
    --ink:#111820;--ink-2:#3A444C;--ink-3:#56616A;
    --accent:#087968;--accent-dim:rgba(8,121,104,.12);
    --line:#C9D2CE;--line-soft:#E0E6E3;
    --btn-bg:#087968;--btn-ink:#FFFFFF;
    background:#FFFFFF;
  }
  body:not(.page-template-blank-slate-template) .site-header,
  body:not(.page-template-blank-slate-template) .mnav,
  body:not(.page-template-blank-slate-template) .menu-btn{display:none}
  body:not(.page-template-blank-slate-template) :is(.rv,.fade-up,.ln span){opacity:1!important;transform:none!important}
}

/* 320px 級の狭い端末 */
@media(max-width:380px){
  /* 社名の式：1 行維持のまま、さらに絞る */
  .naming{gap:6px 8px}
  .naming-w{font-size:11px;letter-spacing:.06em}
  .naming-w b{font-size:10.5px}
  .naming-brand{font-size:14px}
  /* 表の見出しの折返しを許す。nowrap のままだと表がはみ出す */
  .entry-body th{white-space:normal}
}

/* Growth Loop：320px 級では 2 列でも収まらないため 1 列に */
@media(max-width:380px){
  .loop-stages{grid-template-columns:1fr}
}

/* ── 広告表記（コラム冒頭）とソリューション参照 ── */
.sc-disclosure{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(14px,1.8vw,20px);margin-bottom:clamp(22px,3vw,32px);
  font-size:13.5px;line-height:1.8;color:var(--ink-2);
}
.sc-disclosure-title{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:6px;
  display:flex;align-items:center;gap:8px}
.sc-ad-badge{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1;
  padding:3px 7px;border:1px solid var(--ink-3);color:var(--ink-2);flex:none;
}
.sc-disclosure p+p{margin-top:6px}
.sc-solution-ref{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(14px,1.8vw,20px);margin-block:18px;
}
.sc-solution-name{font-weight:700;margin-bottom:10px}
.sc-badge{
  display:inline-block;font-size:11px;font-weight:400;font-family:var(--mono);
  letter-spacing:.06em;padding:2px 8px;border:1px solid var(--line);
  color:var(--ink-2);margin-left:6px;vertical-align:middle;
}
.sc-badge--rel{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   サービス紹介ページ（page-service-lab.php）
   ------------------------------------------------------------
   事業ページのような 2 カラムにしない。読み手は「依頼するか」ではなく
   「これは何で、誰がやっていて、何を保証しないのか」を確かめに来る。
   本文を .entry-body（読み物）に入れず、トップと同じ「節」の並びで
   組むのは、行長より見通しを優先するため。

   節どうしの余白は、同じ地色が続くときだけ詰める（.sec--flush）。
   地色が変わる境目で詰めると、切り替わりが唐突に見える。
   ============================================================ */
.sec--flush{padding-top:0}

/* ---- ヒーロー ---- */
/* 見出し帯（.page-head）と地続きの暗い面。ここまでが「掴み」で、
   以降のライト面が「理解・信頼」という役割分担を崩さない。 */
.lab-hero{padding-top:clamp(24px,3.2vw,44px)}
.lab-hero-in{max-width:54em}

/* 運営者の明示。バッジ形にしているのは、本文に混ぜると読み流されるため。
   認証マークに見せないよう、チェック記号や緑の丸は使わない。 */
.lab-run{
  display:inline-flex;align-items:center;
  font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--accent);
  border:1px solid currentColor;padding:6px 14px;
}

/* 本文は .entry-body（17px）と同じ大きさに揃える。clamp で絞ると
   スマホで 15px まで落ちて、サイトの他ページより小さい文字になる。 */
.lab-prose{color:var(--ink-2);font-size:17px;line-height:1.95;max-width:46em}
.lab-prose + .lab-prose{margin-top:1.1em}
.lab-run + .lab-prose{margin-top:clamp(18px,2.2vw,26px)}
.lab-prose strong{color:var(--ink);font-weight:700}
.lab-prose a{color:var(--accent);border-bottom:1px solid currentColor}
.lab-prose a:hover{opacity:.75}

/* ボタンは中央に置く。テーマの他の単独ボタン（.entry-body a.btn の
   margin-inline:auto、.more、スマホ幅の .cta-actions）と揃える。 */
.lab-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,3vw,32px)}
/* ヒーローだけは本文（.lab-prose の 46em）と中心軸を合わせる。器の
   54em で中央に置くと、左寄せの本文に対してボタンだけ右にずれて見える。 */
.lab-hero .lab-actions{max-width:46em}
@media(max-width:560px){
  .lab-actions{flex-direction:column}
  .lab-actions .btn{width:100%;justify-content:center;text-align:center}
}

/* ---- 仕様表（サービス基本情報・LINE・運営会社） ---- */
/* 会社概要ページと同じ .profile を使う。同じ性質の情報が別の見た目で
   出ると、どちらが正なのか分からなくなる。 */
.lab-spec{margin-top:clamp(4px,1vw,10px)}
/* 単独で置かれるリンク（電話・メール・URL）。本文中のリンクと違って
   前後に文が無いぶん、指で押す面積を確保しておく。下線を border で
   引くと余白のぶん文字から離れるので、text-decoration 側で引く。 */
.lab-spec dd a{
  display:inline-block;padding-block:4px;color:var(--accent);word-break:break-all;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.lab-spec dd a:hover{opacity:.75}

/* ---- 注記 ---- */
/* .note（12.5px）だと、保証しない旨のような「読ませる必要のある注記」に
   使うには小さい。読める大きさで、本文より一段落とす。 */
.lab-note{
  margin-top:clamp(18px,2.2vw,26px);
  font-size:15px;line-height:1.95;color:var(--ink-2);max-width:52em;
}
.lab-note + .lab-note{margin-top:.9em}

/* ---- ツールの図解 ---- */
/* 実物のスクリーンショットは、顧客の数字が写り込む危険と、UI が変わると
   古くなる問題がある。ここでは「どういう形のものか」だけを線で示す。
   中身のある画面に見せない（架空の数字を描かない）ことが要件。 */
.lab-fig{
  border:1px solid var(--line);background:var(--bg-2);
  padding:clamp(13px,1.7vw,17px);margin-top:2px;
}
.lab-fig--check{display:flex;flex-direction:column;gap:9px}
.lab-fig-row{display:flex;align-items:center;gap:11px}
.lab-fig-row i{
  flex:none;width:14px;height:14px;border:1px solid var(--accent);
  display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1;color:var(--accent);
}
.lab-fig-row i::before{content:"✓"}
/* 「これから着手する項目」を空欄で表す。全部埋まった図にすると
   「終わった状態」を売っているように見える。 */
.lab-fig-row:nth-child(n+4) i{border-color:var(--ink-3);color:transparent}
.lab-fig-row b{display:block;height:7px;background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.lab-fig-row:nth-child(n+4) b{background:color-mix(in srgb,var(--ink-3) 18%,transparent)}
.lab-fig-row:nth-child(1) b{width:76%}
.lab-fig-row:nth-child(2) b{width:58%}
.lab-fig-row:nth-child(3) b{width:67%}
.lab-fig-row:nth-child(4) b{width:44%}
.lab-fig-row:nth-child(5) b{width:62%}

/* 表のほう。チェックのほうと図の高さを揃える（4 行）。枠は器ではなく
   セルに持たせる（器の背景で描くと、行数が変わったとき余りが残る）。 */
.lab-fig--sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px}
.lab-fig--sheet span{display:block;background:var(--bg);height:26px;box-shadow:0 0 0 1px var(--line)}
.lab-fig--sheet span:nth-child(4n){background:var(--accent-dim)}
.lab-fig--sheet span:nth-child(-n+4){background:var(--panel-2)}

/* ---- 手順 ---- */
/* .steps は本文幅（820px）だと 4 枚が 3+1 に割れる。全幅の器に置く。 */
.lab-steps{margin-top:clamp(4px,1vw,10px)}

/* ---- CTA の補助リンク ---- */
/* ボタンを 3 つ並べるとどれが主か分からなくなるので、文字リンクで添える。 */
.cta-sub{
  display:inline-flex;align-items:center;gap:8px;align-self:center;
  margin-top:2px;padding-bottom:5px;
  font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line);
  transition:color .3s,border-color .3s;
}
.cta-sub span{font-family:var(--mono);transition:transform .4s var(--ease)}
.cta-sub:hover{color:var(--accent);border-color:var(--accent)}
.cta-sub:hover span{transform:translateX(4px)}
.lab-note a{color:var(--accent);border-bottom:1px solid currentColor}
.lab-note a:hover{opacity:.75}
/* 注記が複数段落になるとき。これまで 1 段落しか置いていなかったので
   間隔が無く、続き物に見えていた。 */
.role-note p + p{margin-top:1em}


/* 対象者の一覧。.issues は「器の背景＋1px の隙間」で罫線を描くので、
   奇数件のとき最終行の空きセルに器の色が四角く残る（5 件で実際に出た）。
   トップの .issues は偶数前提なので触らず、この用途にだけ線をセルへ移す。 */
.lab-issues{background:none;border:0;gap:1px}
.lab-issues > *{box-shadow:0 0 0 1px var(--line)}

/* 事業ページから無料ツールのページへの帯。基盤への帯（.base-band）と
   同じ形を使うが、名前が日本語なので等幅は当てない（CJK は等幅の
   フォールバックで字面が揃わず、かえって不揃いに見える）。 */
/* 地色と同じ薄いグレーの帯だと、長い事業ページの中で完全に埋もれる
   （実測で 61% 地点＝7 画面ぶん下）。ミントの枠と淡い地で「別の入口」
   として立たせる。ただし最終CTA ほど強くはしない——この事業ページの
   主導線は無料相談であって、無料ツールはその手前の軽い入口だから。 */
.biz-tool{border-color:var(--accent);background:var(--accent-dim)}
.biz-tool:hover{background:var(--accent-dim);border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)}
.biz-tool .ttl{font-family:var(--sans);font-size:clamp(17px,1.9vw,22px);letter-spacing:.01em}
/* 淡い緑地の上では ink-2 のコントラストが落ちるので本文色を一段濃くする */
.biz-tool .base-band-b{color:var(--ink)}
/* 行き先を「押せるもの」として見せる。帯全体がリンクだが、
   どこを押すのかの合図が無いと文字の羅列に見える。 */
.biz-tool .go{
  justify-self:start;display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border:1px solid var(--accent);background:var(--bg);
  font-weight:700;transition:background-color .3s,color .3s;
}
.biz-tool:hover .go{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
/* ラベルと導線の文言も日本語。等幅＋大きな字間は欧文の見出し用の設定で、
   日本語に当てると間延びして読みにくい。 */
/* 淡い緑地の上では --accent(#087968) が 4.17:1 で 12.5px の文字には足りない
   （.conclusion em と同じ現象）。ここだけ暗い緑にして 5.19:1 を満たす。 */
.biz-tool .eyebrow{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:none;color:#06695A}
.biz-tool .go{font-family:var(--sans);font-size:14.5px;letter-spacing:.02em}