:root{
  --ground:#F7F6F4;
  --surface:#FFFFFF;
  --surface-2:#EFEDEA;
  --ink:#423334;
  --ink-2:#6E6062;
  --ink-3:#948A8B;
  --line:#DDD8D5;
  --line-strong:#C3BCB8;
  --teal-tint:#E6F4F4;
  --teal-soft:#C8E7E7;
  --teal-brand:#069494;
  --teal:#057676;
  --teal-deep:#045F5F;
  --teal-light:#6FC1C1;
  --brand-orange:#EC672E;
  --orange:#CA4A12;
  --dark:#2E2526;

  --font-sans:'Inter','Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  --wrap:1180px;
  --sec-pad:96px;
  --header-h:75px;   /* ヘッダー74px + 下線1px。アンカーの飛び先を下げるのに使う */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none;margin:0;padding:0}
figure,figcaption,dl,dd,blockquote,fieldset{margin:0;padding:0}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:.02em;line-height:1.55}
a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--teal-deep)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.on-dark :focus-visible{outline:2px solid var(--teal-light);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 許可番号・電話番号など、途中で折り返してはいけない番号。
   本文中の「派13-311512」「03-5817-8244」はこれで囲むこと。 */
.nw-num{white-space:nowrap;font-family:'Inter','Noto Sans JP',sans-serif;letter-spacing:.03em}

.wrap{width:min(var(--wrap),calc(100% - 64px));margin-inline:auto}
.sec{padding:var(--sec-pad) 0}
.sec-flush{padding-top:0}
.sec-head{max-width:46em;margin-bottom:44px}
.eyebrow{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;line-height:1;color:var(--ink-2);text-transform:uppercase;margin-bottom:18px}
h2{font-size:clamp(21px,2.3vw,29px)}
.sec-lead{margin-top:18px;color:var(--ink-2);font-size:16px}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:70;background:var(--surface);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:36px;height:74px}

/* ヘッダーが固定のため、アンカーで飛んだ先の見出しがヘッダーの下に隠れます。
   飛び先を --header-h の分だけ手前で止めます。ページ内目次のチップ、
   フォームのエラーサマリ、スキップリンクのいずれにも効きます。 */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.logo{display:inline-flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;flex:none}
.logo-mark{height:28px;width:auto;display:block;flex:none}
.logo-name{font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1;white-space:nowrap}
.logo:hover .logo-name{color:var(--teal-deep)}
.gnav ul{display:flex;gap:28px}
.gnav a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.gnav a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:6px}
.gnav a[aria-current="page"]{
  font-weight:700;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:7px;text-decoration-color:var(--teal);
}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:20px}
.lang{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-2);text-decoration:none}
.lang:hover{color:var(--teal-deep)}
.menu-btn{display:none;align-items:center;gap:8px;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:2px;height:42px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.08em}
.drawer{display:none}


/* ================================================================
   グローバルナビ — S02 モバイルのアコーディオン（S01のメガメニューは廃止）
   ================================================================ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--ink);padding:12px 18px;
  border:1px solid var(--teal);border-radius:2px;font-size:14px;font-weight:700;
}
.skip:focus{left:16px;top:16px}

/* メガメニューは廃止しました。デスクトップのナビは4つのリンクだけです。
   ホバーで開く方式は、開いている間 overflow:hidden がかかるためカーソルが
   ヘッダーの上にあるとスクロールが止まり、また「お問い合わせ」へ向かう
   途中で通過するだけでも開いて画面全体が暗幕で覆われていました。
   下位ページへは各区分のトップページとフッターから到達できます。
   （削除したクラス：.gnav-item .gnav-more .chev .mega .mega-inner
     .mm-title .mm-desc .mm-draft .mega-cards .mm-card） */

/* スクロール固定はモバイルのドロワー専用として残します。ボタンを押して
   明示的に開いたときだけで、画面全体がドロワーに置き換わるためです。 */
html.nav-locked,html.nav-locked body{overflow:hidden}

/* ハンバーガー ⇄ × */
.menu-icon{position:relative;display:inline-block;width:20px;height:14px}
.menu-icon span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform .18s ease,opacity .12s ease,top .18s ease,bottom .18s ease;
}
.menu-icon span:nth-child(1){top:0}
.menu-icon span:nth-child(2){top:6.25px}
.menu-icon span:nth-child(3){bottom:0}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1){top:6.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3){bottom:6.25px;transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border:1px solid transparent;border-radius:2px;
  font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.4;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{color:var(--teal-deep);border-color:var(--teal)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--teal-tint);color:var(--teal-deep)}
.btn-sm{min-height:42px;padding:0 18px;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---------- 開閉の記号（＋／−） ----------
   募集要項の行（/recruit/）とモバイルナビのアコーディオンで共有します。
   開くと縦棒が消えて − になります。装飾なので当たり判定からは外します
   （position:relative があるぶん、外さないと当たり判定の上に乗ります）。 */
.toggle-mark{position:relative;flex:none;width:16px;height:16px;pointer-events:none}
.toggle-mark::before,.toggle-mark::after{
  content:"";position:absolute;background:var(--ink-2);
  transition:opacity .15s ease,background-color .16s ease;
}
.toggle-mark::before{left:0;right:0;top:7.25px;height:1.5px}
.toggle-mark::after{top:0;bottom:0;left:7.25px;width:1.5px}
/* 押しているボタンの位置が2か所で違うので、開いている条件だけ分けています。 */
.job-head:has(.job-toggle[aria-expanded="true"]) .toggle-mark::after,
.acc-btn[aria-expanded="true"] .toggle-mark::after{opacity:0}

/* ---------- hero ---------- */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:72px;align-items:center;padding:92px 0 96px}
.crumb + main .hero-grid{padding-top:44px;align-items:start}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.45;margin-top:22px}
.hero-lead{margin-top:28px;color:var(--ink-2);max-width:33em}

/* ---------- placeholders ---------- */
.ph{
  background:var(--surface-2);
  border:1px dashed var(--line-strong);
  border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:28px;color:var(--ink-2);font-size:13px;line-height:1.9;
}
.ph .ph-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.ph-visual{aspect-ratio:4 / 3}

.ph svg{color:var(--ink-2)}

/* ---------- 実写・地図・図版 ---------- */
.photo{width:100%;object-fit:cover;border-radius:2px;display:block}
.map-embed{width:100%;border:0;border-radius:2px;display:block}
.fig-img{width:100%;height:auto;display:block}
.draft{
  border:1px dashed var(--line-strong);background:var(--surface);border-radius:2px;
  padding:26px 28px;color:var(--ink-2);font-size:14px;line-height:1.95;
}
.draft b{color:var(--ink);font-weight:700}
.draft p + p{margin-top:12px}

/* ---------- trust band ---------- */
.trust{background:var(--teal-tint);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:34px 0}
.trust-item{display:flex;gap:18px;align-items:flex-start;padding:6px 40px 6px 0}
.trust-item + .trust-item{border-left:1px solid var(--teal-soft);padding-left:48px;padding-right:0}
.trust-item svg{flex:none;color:var(--teal);margin-top:5px}
.trust-name{font-size:15px;font-weight:700;line-height:1.7}
.trust-meta{font-size:13.5px;color:var(--ink-2);line-height:1.8}
.trust-meta .num{font-family:'Inter',sans-serif;letter-spacing:.03em}

/* ---------- service cards ---------- */
.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:22px}
.card{
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:22px 22px 24px;color:inherit;text-decoration:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
a.card:hover{border-color:var(--teal);box-shadow:0 2px 0 0 var(--teal-soft)}
.card-fig{height:96px;background:var(--teal-tint);border-radius:2px;display:flex;align-items:center;justify-content:center}
.card-fig svg{color:var(--teal)}
.card-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.card-title h3,.card-title h2,.card-title h4{font-size:17px;line-height:1.6;font-weight:700;margin:0;letter-spacing:.02em}
.badge{
  display:inline-block;background:var(--surface);border:1px solid var(--orange);color:var(--orange);
  font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.7;padding:1px 8px;border-radius:2px;
}
.card-desc{font-size:14px;line-height:1.9;color:var(--ink-2);flex:1 1 auto}
.card-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--teal);margin-top:2px}
.card-link svg{flex:none;transition:transform .16s ease}
a.card:hover .card-link,a.info-card:hover .card-link{color:var(--teal-deep)}
a.card:hover .card-link svg,a.info-card:hover .card-link svg{transform:translateX(3px)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:20px 22px 18px}
.stat .num{font-family:'Inter','Noto Sans JP',sans-serif;font-size:31px;font-weight:700;line-height:1.25;letter-spacing:.01em;color:var(--ink);display:block}
.stat .num .unit{font-size:16px;margin-left:2px}
.stat .lab{display:block;margin-top:8px;font-size:13px;line-height:1.7;color:var(--ink-2)}

/* ---------- info cards (DX / SECURITY) ---------- */
/* grid-auto-rows:1fr は行の高さを揃えるためです。カードは同じ行なら自動で
   揃いますが、2行以上になると行ごとに高さが変わり、2×2が「2組」に見えます。
   2行になるのは cards-2 に4枚置いたとき（/services/ /dx/ /en/security/
   /security/ai-policy/）と、cards-4 が2列に落ちる 768〜1023px です。 */
.cards-2{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:22px}
.info-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--teal-tint);border:1px solid var(--teal-soft);border-radius:3px;
  padding:34px 34px 32px;color:inherit;text-decoration:none;
  transition:border-color .16s ease;
}
a.info-card:hover{border-color:var(--teal)}
.info-card h2{font-size:clamp(19px,1.8vw,23px)}
.info-card p{font-size:14.5px;color:var(--ink-2)}

/* ---------- cta ---------- */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px}
.cta{border-radius:3px;padding:40px 40px 42px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta h2{font-size:clamp(20px,2vw,26px)}
.cta p{font-size:14.5px}
.cta .btn{margin-top:18px}
.cta-dark{background:var(--dark);color:#fff}
.cta-dark p{color:rgba(255,255,255,.80)}
.cta-light{background:var(--surface-2);color:var(--ink)}
.cta-light p{color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:#fff;padding:72px 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.foot-h{font-size:14px;font-weight:700;line-height:1.7;margin-bottom:14px;color:#fff}
.site-footer li + li{margin-top:2px}
.site-footer a{font-size:14px;color:rgba(255,255,255,.82);text-decoration:none;line-height:1.95}
.site-footer a:hover{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}
/* 下段は「ラベル＋値」の組を並べます。以前は4つの事実を「・」で一本に連ねて
   いましたが、性質の違うものが同じ見た目で続くだけで読み取る手がかりがなく、
   英語版では折り返して3行になっていました（区切りの「・」も英文では不自然です）。
   ラベルを小さく暗く、値を明るくして、組で読めるようにしてあります。
   dl の箱を外しているのは、組とコピーライトを1つの折り返しの流れに入れるためです。
   別々の箱だと、英語版でコピーライトが次の行に押し出されます。 */
.foot-bottom{
  margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 30px;
}
.foot-facts{display:contents}
.foot-facts > div{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.foot-facts dt{
  font-size:11px;letter-spacing:.08em;line-height:2.1;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.foot-facts dd{font-size:12.5px;line-height:2.1;color:rgba(255,255,255,.72)}
.foot-copy{
  margin-left:auto;
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.04em;line-height:2.1;
  color:rgba(255,255,255,.5);white-space:nowrap;
}
.foot-facts .num{font-family:'Inter',sans-serif;letter-spacing:.03em;white-space:nowrap}
/* 電話番号の tel: リンク。周りの文字と同じ大きさ・同じ色にして、見た目は変えずに
   タップだけできるようにします（.site-footer a の 14px が効くと番号だけ大きくなります）。 */
.foot-facts a{font-size:inherit;line-height:inherit;color:inherit;text-decoration:none}
.foot-facts a:hover{color:var(--teal-light);text-decoration:underline;text-underline-offset:3px}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{display:none}


/* ================================================================
   下層ページ共通 — /dx/ の実装時に新規定義。以降のページはこれを使う
   ================================================================ */
.crumb{background:var(--surface)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;padding:14px 0;font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.crumb li{display:flex;align-items:center}
.crumb li + li::before{content:"／";padding:0 10px;color:var(--line-strong)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.crumb [aria-current="page"]{color:var(--ink)}

.page-head{background:var(--surface);border-bottom:1px solid var(--line);padding:44px 0 58px}
.page-head h1{font-size:clamp(28px,4vw,44px);line-height:1.45;margin-top:20px}
.page-head .lead{margin-top:26px;color:var(--ink-2);max-width:38em}
/* リード文中の強調。許認可番号など、表示してよい確定事実にだけ使う。 */
.lead strong{font-weight:700;color:var(--ink)}
.updated{
  display:inline-flex;align-items:center;gap:9px;margin-top:34px;
  border:1px solid var(--line);border-radius:2px;padding:7px 14px;
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
}
.updated svg{flex:none;color:var(--ink-2)}

.sec-title{margin-bottom:34px}
.sec-title .note{margin-top:16px;color:var(--ink-2);font-size:15px;max-width:44em}


/* ---------- /dx/ 固有：全体像の図版 ---------- */
.flow{display:flex;align-items:stretch}
.flow-step{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:24px 20px 26px;
}
.flow-num{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--teal)}
.flow-label{font-size:15px;font-weight:700;line-height:1.75}
.flow-arrow{flex:none;width:38px;display:flex;align-items:center;justify-content:center;color:var(--teal-brand)}

/* ---------- 長文本文（/dx/vision/ /dx/strategy/ など公文書ページ共通） ---------- */
.prose{max-width:38.5em}
/* 段落の1字下げ。対象は文章本文（.prose）だけ。
   リード文・カードの説明文・表のセルは下げない。
   箇条書き・見出し・署名ブロックも対象外（下の打ち消しを参照）。 */
.prose p{font-size:16px;line-height:1.9;letter-spacing:.02em;text-indent:1em}
.prose .sign p,.prose .fields dd,.prose li p,.prose .dummy-note{text-indent:0}
.prose > * + *{margin-top:1.7em}
.prose .num{counter-reset:num;display:flex;flex-direction:column;gap:1em}
.prose .num > li{
  counter-increment:num;display:grid;grid-template-columns:2.4em 1fr;
  font-size:16px;line-height:1.9;letter-spacing:.02em;
}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--teal-deep)}
.prose strong{font-weight:700;color:var(--ink)}
.prose .bul{display:flex;flex-direction:column;gap:.85em}
.prose .bul > li{
  display:grid;grid-template-columns:1.4em 1fr;
  font-size:16px;line-height:1.9;letter-spacing:.02em;
}
.prose .bul > li::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  margin-top:.78em;
}
.prose h3{font-size:16px;font-weight:700;line-height:1.75;color:var(--ink);margin-top:1.9em}
.prose h3:first-child{margin-top:0}
.prose .fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55em 1.4em;margin-top:.9em}
.prose .fields dt{
  font-size:13px;font-weight:700;line-height:2.3;letter-spacing:.04em;color:var(--teal);
  white-space:nowrap;
}
.prose .fields dd{font-size:16px;line-height:1.9;letter-spacing:.02em;color:var(--ink-2);margin:0}
.prose .num > li::before{
  content:counter(num) ".";
  font-family:'Inter',sans-serif;font-weight:700;color:var(--teal);letter-spacing:.02em;
}

/* ---------- 表示確認用ダミー：公開前に削除するブロック ---------- */
.dummy{margin-top:38px;border-top:2px solid var(--orange);padding-top:18px}
.dummy-note{
  font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.8;
  color:var(--orange);margin-bottom:20px;
}
.dummy--tight{margin-top:16px;padding-top:14px}


/* ================================================================
   公文書ページ（/dx/vision/ で新規定義。/dx/strategy/ 等で使い回す）
   ================================================================ */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start}
.doc-aside{position:sticky;top:98px;display:flex;flex-direction:column;gap:18px}

.doc-main{min-width:0}
.doc-main section + section{margin-top:60px}
.doc-main h2{font-size:clamp(20px,2.2vw,26px);line-height:1.6;margin-bottom:26px}
.h-num{font-family:'Inter',sans-serif;font-weight:700;margin-right:.45em}
.doc-main .draft + .draft{margin-top:14px}
.doc-main .dummy + .draft{margin-top:38px}

/* 日付バッジの並び */
.meta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.meta-row .updated{margin-top:0}

/* サイドバーの箱 */
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:22px 22px 24px}
.side-box h2{font-size:15px;line-height:1.7;margin-bottom:14px}
.toc{display:flex;flex-direction:column;gap:9px}
.toc a{font-size:13.5px;line-height:1.75;color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.side-links{display:flex;flex-direction:column;gap:13px}
.side-links a{font-size:13.5px;line-height:1.7;color:var(--teal);text-decoration:none}
.side-links a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}

/* 対比カードのラベル（現在／目指す方向） */
.card-label{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.card-fields{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;
  margin-top:6px;align-self:start;
}

/* 4枚のカードで行の高さを共有し、区切り罫線を同じ高さに揃える。
   行は 番号／見出し／説明／項目 の4つ。カードの子要素を増減したら
   ここの数も合わせること（合わないと高さの共有が外れる）。 */
@supports (grid-template-rows: subgrid) {
  .menu-grid{grid-template-rows:repeat(4,auto)}
  .menu-grid > .card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:16px}
}
.card-fields dt{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;line-height:1.95;
  color:var(--teal);white-space:nowrap;
}
.card-fields dd{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink-2)}




/* ---------- FAQ（/services/ai/ で新規定義） ---------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:26px 0 28px}
.faq-item h3{font-size:16.5px;line-height:1.75;margin-bottom:12px}
.faq-item p{font-size:15px;line-height:1.95;color:var(--ink-2);max-width:46em}

.cta-wide{display:block;padding:44px 44px 46px}
.cta-wide p{max-width:44em}

/* ---------- 代表メッセージ（/company/message/ で新規定義） ---------- */
.msg{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.msg-side{min-width:0}
.msg-main{min-width:0}
.msg-photo{aspect-ratio:4 / 5}
.name-card{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:18px 20px 20px;margin-top:16px;
}
.name-card .role{font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.name-card .name{font-size:20px;font-weight:700;line-height:1.6;margin-top:5px;color:var(--ink)}
.msg-main > h2{font-size:clamp(20px,2.4vw,28px);line-height:1.6;margin-bottom:28px}
.sign{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--dark);
  padding:22px 26px 24px;margin-top:26px;
}
.sign .label{font-size:12px;line-height:1.8;color:var(--ink-2);margin-bottom:12px}
.sign p{font-size:16px;line-height:2;letter-spacing:.02em;color:var(--ink)}
.sign p.who{font-weight:700}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:22px}

/* ---------- グラフの並び（/dx/kpi/ で新規定義） ---------- */
.charts{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ---------- 表（/dx/strategy/ で新規定義。/haken/ /dx/kpi/ 等で使い回す） ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.85}
.tbl th,.tbl td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;letter-spacing:.02em}
.tbl thead th{background:var(--surface-2);font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.tbl tbody th{font-weight:700;color:var(--ink);background:var(--surface);white-space:nowrap}
.tbl .nw{white-space:nowrap}
.tbl .wide{min-width:270px}
.tbl .wide-s{min-width:220px}
.tbl .th-sub{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--ink-2);letter-spacing:.02em}
.status{
  display:inline-block;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
  padding:2px 10px;font-size:12px;line-height:1.8;color:var(--ink-2);white-space:nowrap;
}
.tbl tbody td{color:var(--ink-2);background:var(--surface)}
.tbl-note{margin-top:13px;font-size:13px;line-height:1.95;color:var(--ink-2)}
.doc-main h3{font-size:16px;line-height:1.7;margin:38px 0 16px}
.doc-main .card-title h3{margin:0}   /* 上の行が .card-title h3{margin:0} を上書きするため */

/* ---------- 本文＋掲出枠の2カラム（/security/ で新規定義） ---------- */
.aside-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.aside-grid > *{min-width:0}
.aside-col{display:flex;flex-direction:column;gap:16px}

/* ---------- 実施回数の並び（/security/ で新規定義） ---------- */
.stats-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.stats-3 .stat{padding:24px 26px 22px}

/* ---------- 関連方針カード（/security/ で新規定義） ---------- */
.link-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  padding:30px 32px 32px;color:inherit;text-decoration:none;
  transition:border-color .16s ease;
}
a.link-card:hover{border-color:var(--teal)}
a.link-card:hover .card-link{color:var(--teal-deep)}
a.link-card:hover .card-link svg{transform:translateX(3px)}
.link-card h3{font-size:19px;line-height:1.6}
.link-card p{font-size:14.5px;line-height:1.9;color:var(--ink-2);flex:1 1 auto}

/* ---------- 問い合わせ枠（/security/ で新規定義） ---------- */
.contact-box{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:28px 32px 30px}
.contact-box h2{font-size:17px;line-height:1.75}
.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:12px;font-size:15px;line-height:1.9;color:var(--ink-2)}
.contact-line > span:not(:last-child)::after{content:"／";padding:0 14px;color:var(--line-strong)}
.tel,.mail{font-family:'Inter',sans-serif;letter-spacing:.04em}
/* 封筒と受話器のアイコン。ラベルの語（MAIL / TEL）の代わりです。日英で同じ形が
   使えて、英語で mail が郵便を指す問題も起きません。読み上げ用の語は .sr-only。 */
.mail svg,.tel svg{margin-right:8px;vertical-align:-4px;color:var(--ink-2)}

/* ---------- /services/ の「サービス」節 ----------
   独自クラスは置いていません。4件なので .cards-2 の 2×2 でちょうど埋まります。

   各カードの上に図版枠（.card-ph）を置いていましたが、SI・ERP・AI・ラボ型は
   写真でもアイコンでも見分けがつかないため外しました。アイコンを付けると
   このページだけが例外になります（カードにアイコンがあるのは日本語トップの
   .card-fig 4枚だけで、他の16ページ・87枚は文字のみ）。
   経緯は docs/DESIGN-NOTES.md の /services/ の項にあります。 */

/* ---------- ラボ型の項目ボックス（/services/ で新規定義） ---------- */
.svc-boxes{display:flex;flex-direction:column;gap:16px}
.svc-box{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:22px 24px 24px}
.svc-box h3{font-size:16px;line-height:1.7;margin-bottom:8px}
.svc-box p{font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.aside-grid .btn-row{margin-top:26px}

/* ---------- ワイヤーの確定マーク（/services/ で新規定義） ----------
   ［確定］／［実態に合わせて確定］は制作上の印です。
   公開前に .wf-mark を検索して、残すか外すかを判断してください。 */
.wf-mark{font-size:12.5px;line-height:1.8;color:var(--ink-3);white-space:nowrap}

/* ---------- ページ内目次チップ（/company/ で新規定義） ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{
  display:inline-flex;align-items:center;min-height:42px;padding:0 17px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
  font-size:13.5px;font-weight:500;line-height:1.6;color:var(--ink);text-decoration:none;
  transition:border-color .16s ease,color .16s ease;
}
.chip:hover{border-color:var(--teal);color:var(--teal-deep)}

/* ---------- 理念のステートメント（/company/ で新規定義） ---------- */
/* 理念のステートメント。ワイヤーの placeholder は1行だったので23px相当だったが、
   実際の本文は2文あり、23px/700 だと3行の太字になって重い。20px/500 に落として2行に収める。 */
.statement{font-size:clamp(17px,1.7vw,20px);font-weight:500;line-height:1.85;color:var(--ink);margin-bottom:12px}
/* 出典・採否の注記。橙色＝公開前に判断が必要な箇所（.dummy-note と同じ扱い）。 */
.src-note{margin-bottom:24px}
.sub-h{font-size:16px;line-height:1.7;margin:38px 0 14px}
/* 行動指針カード：番号→見出し→本文の3行を揃える。 */
@supports (grid-template-rows: subgrid) {
  /* 行は subgrid が管理します。cards-3 の grid-auto-rows:1fr を打ち消さないと、
     4枚目以降が入る暗黙行だけ 1fr になり、2段目のカードだけ背が高くなります。 */
  .guide-grid{grid-template-rows:repeat(3,auto);grid-auto-rows:auto}
  .guide-grid > .card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:12px}
}

/* ---------- 沿革（/company/ で新規定義） ---------- */
.timeline{border-top:1px solid var(--line)}
.tl-item{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:26px;
  padding:19px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.tl-year{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)}
.tl-body{font-size:15.5px;font-weight:500;line-height:1.8;color:var(--ink)}

/* ---------- 拠点・認証カードの補助行（/company/ で新規定義） ---------- */
.office-addr{font-size:14.5px;line-height:1.95;color:var(--ink-2)}
/* 地名や番地が途中で折り返すのを防ぐ汎用クラス（.nw-num は数字用の書体指定つき）。 */
.nw{white-space:nowrap}
.cert-meta{font-size:13px;line-height:1.9;color:var(--ink-2)}

/* ---------- 英語版（/en/ で新規定義） ---------- */
/* 英語版も日本語版と同じ Inter を使う（別書体は使わない方針）。

   短い導入文とCTAの本文だけ text-wrap:balance を効かせる。
   最後の1行に2〜3語だけ残る（widow）のを防ぐため。ブラウザが行を
   均等に割り振るので、幅が変わっても破綻しない。<br> による強制改行と違い、
   狭い画面では文の途中で無理に切らない。
   日本語には効かせない（CJK では行が不自然に詰まることがあるため）。 */
html[lang="en"] .cta h2,
html[lang="en"] .cta p,
html[lang="en"] .sec-title .note{text-wrap:balance}
.fact-tiles .stat{padding:24px 26px 22px}
.fact-tiles .num{font-size:clamp(22px,2.1vw,27px);letter-spacing:.02em}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--line)}
.what-item{padding:26px 0 28px;border-bottom:1px solid var(--line);min-width:0}
/* 件数が奇数だと最後の1件の右隣が空き、下の罫線が半分で切れます。
   最後の1件を2列ぶち抜きにして罫線を通します。 */
.what-item:last-child:nth-child(odd){grid-column:1 / -1}
.what-item h3{font-size:17px;line-height:1.6;margin-bottom:10px}
.what-item .card-title{margin-bottom:10px}
.what-item .card-title h3{margin-bottom:0}
.en-drawer li a{
  display:block;min-height:58px;padding:17px 2px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:700;line-height:1.6;color:var(--ink);text-decoration:none;
}
.sticky-cta-en{grid-template-columns:1fr}

/* ---------- フォーム（/contact/ で新規定義。S03 の状態表示でも使う） ---------- */
.cform .field{margin-top:28px}
.cform fieldset{border:0}
.flabel{display:block;font-size:14px;font-weight:700;line-height:1.7;color:var(--ink);margin-bottom:9px;padding:0}
.req{
  display:inline-block;margin-left:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--orange);vertical-align:1px;
}
.cform input[type="text"],.cform input[type="email"],.cform input[type="tel"],.cform textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
  padding:13px 14px;font:inherit;font-size:15px;line-height:1.8;color:var(--ink);
  transition:border-color .16s ease;
}
.cform input:hover,.cform textarea:hover{border-color:var(--ink-3)}
.cform input:focus,.cform textarea:focus{border-color:var(--teal)}
.cform textarea{resize:vertical;min-height:150px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field-row .field{margin-top:28px}
.fnote{margin-top:10px;font-size:13px;line-height:1.9;color:var(--ink-2)}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.type-opt{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
  font-size:15px;line-height:1.6;cursor:pointer;transition:border-color .16s ease;
}
.type-opt:hover{border-color:var(--teal)}
.type-opt input{flex:none;width:18px;height:18px;accent-color:var(--teal);margin:0}
.type-opt:has(input:checked){border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.type-opt:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
/* 「資料請求・その他」を選んだときだけ出す補足。資料はメールで送る運用のため、
   その場でダウンロードできると誤解されないようにする。 */
.doc-note{display:none}
.cform:has(input[name="type"][value="document"]:checked) .doc-note{display:block}
.agree{margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:20px 22px}
.agree-label{display:flex;align-items:flex-start;gap:13px;font-size:14.5px;line-height:1.85;cursor:pointer}
.agree-label input{flex:none;width:18px;height:18px;accent-color:var(--teal);margin:3px 0 0}
.tel-big{margin-top:4px;font-size:26px;font-weight:700;line-height:1.4;letter-spacing:.02em}
/* TEL / FAX のラベル。2つが並ぶときだけ付けます（FAXが無い 404・500 では不要）。
   番号は大きいまま残したいのでラベルだけ本文サイズに落とし、ベースラインは
   ずらしません。ずらすと上付き文字に見え、下のFAXの行とも揃わなくなります。 */
.num-lab{font-size:13px;font-weight:400;color:var(--ink-2);margin-right:6px}
/* 番号そのもの。TELの番号（.tel-big a）と同じ太さ・同じ色にし、重要度の差は大きさだけで付けます。 */
.num-val{font-weight:700;color:var(--ink)}
.tel-big a{font-family:'Inter','Noto Sans JP',sans-serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.tel-big a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px}
.aside-col .svc-box h2{font-size:16px;line-height:1.7;margin-bottom:8px}
.aside-col .svc-box p{font-size:14.5px;line-height:1.9;color:var(--ink-2)}

/* ---------- S03 フォームの状態表示（入力エラー・送信完了） ----------
   エラーは色だけで伝えません。色覚に依存しないよう、枠線・アイコン・
   文章の3つで重ねて示します（WCAG 1.4.1）。
   エラー文は「何が起きたか」ではなく「何をすればよいか」を書きます。   */

/* 冒頭のエラーサマリ。送信を止めたあと、ここにフォーカスを移します。 */
.form-error-summary{
  margin-bottom:30px;background:var(--surface);border:1px solid var(--orange);
  border-left:4px solid var(--orange);border-radius:2px;padding:22px 24px;
}
.form-error-summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.form-error-summary h3{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;line-height:1.7;color:var(--orange);
}
.form-error-summary h3 svg{flex:none}
.form-error-summary ol{margin-top:14px;padding-left:20px;list-style:decimal}
.form-error-summary li{font-size:14.5px;line-height:1.95;color:var(--ink)}
.form-error-summary li + li{margin-top:4px}
.form-error-summary a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.form-error-summary a:hover{color:var(--teal-deep)}

/* 各項目のエラー。枠線を橙に変え、ラベル下に1行添えます。 */
.cform input[aria-invalid="true"],
.cform textarea[aria-invalid="true"]{border-color:var(--orange);border-width:2px;padding:12px 13px}
.cform input[aria-invalid="true"]:focus,
.cform textarea[aria-invalid="true"]:focus{border-color:var(--orange)}
.field-error{
  display:flex;align-items:flex-start;gap:7px;margin-top:9px;
  font-size:13.5px;font-weight:500;line-height:1.8;color:var(--orange);
}
.field-error svg{flex:none;margin-top:3px}
.field[data-invalid="true"] .type-opt,
.agree[data-invalid="true"]{border-color:var(--orange)}

/* 送信完了。別URLではなく、フォームと同じ位置に差し替えて表示します。 */
.form-done{
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--teal);
  border-radius:2px;padding:46px 44px;
}
.form-done:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.form-done .done-mark{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:var(--teal-tint);color:var(--teal);margin-bottom:22px;
}
.form-done h2{font-size:clamp(21px,2.2vw,25px);font-weight:700;line-height:1.6;letter-spacing:.02em}
.form-done .done-lead{margin-top:16px;font-size:15.5px;line-height:1.95;color:var(--ink-2)}
.form-done .done-next{
  margin-top:30px;background:var(--surface-2);border-radius:2px;padding:22px 24px;
}
.form-done .done-next h3{font-size:14.5px;font-weight:700;line-height:1.7;margin-bottom:10px}
.form-done .done-next p{font-size:14px;line-height:1.95;color:var(--ink-2)}
.form-done .done-next p + p{margin-top:8px}
.form-done .btn-row{margin-top:30px}

/* ---------- 引用・支援内容リスト（/recruit/development/ で新規定義） ---------- */
.quote{border-left:4px solid var(--teal);padding:8px 0 8px 24px}
.quote p{font-size:clamp(17px,1.6vw,19px);line-height:1.95;letter-spacing:.02em;color:var(--ink)}
/* 引用1文と図版を並べる節では、上揃えだと左側に空白が残るので中央で合わせる。 */
.aside-grid--center{align-items:center}
.plain-list > li{grid-template-columns:1.35em minmax(0,1fr)}
.svc-box .issue-list{gap:9px}
.aside-col .stat{background:var(--surface);border:1px solid var(--line);padding:22px 24px 20px}
.aside-col .stat .num{font-size:28px}

/* ---------- 数値の帯・募集要項（/recruit/ で新規定義） ---------- */
.stat-band{background:var(--surface-2);border-bottom:1px solid var(--line);padding:44px 0 46px}
.stat-plain .stat{background:none;border:0;padding:0}
.stat-band .tbl-note{margin-top:26px}

.card-fill{background:var(--surface-2)}

.job-filter{margin-bottom:12px}
.filter-chip{cursor:pointer;font-family:inherit}
.filter-chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.filter-chip[aria-pressed="true"]:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}

.job-list{border-top:1px solid var(--line)}
.job{border-bottom:1px solid var(--line)}
.job-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:start;padding:22px 0 24px;position:relative}
.job-tag{
  display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:30px;
  border:1px solid var(--line-strong);border-radius:2px;
  font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:2px;
}
.job-main h3{font-size:17px;line-height:1.65}
.job-meta{margin-top:7px;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
/* 行のどこを押しても開きます。button の中に h3 は入れられないので、
   WAI-ARIA の Disclosure のとおり h3 > button にして、::after を行いっぱいに
   広げて当たり判定にしています。読み上げのラベルが職種名になるのも利点です
   （以前は3つとも「開く」で、どれを開くのか音声では分かりませんでした）。 */
.job-toggle{
  background:none;border:0;margin:0;padding:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;
}
.job-toggle::after{content:"";position:absolute;inset:0}
.job-head:hover .job-toggle{color:var(--teal-deep)}
/* 記号そのものは .toggle-mark（共有）。ここでは行の中での位置だけ合わせます。 */
.job-head .toggle-mark{margin-top:6px}
.job-head:hover .toggle-mark::before,.job-head:hover .toggle-mark::after{background:var(--teal)}
.job-panel{padding:2px 0 28px}
.job-fields{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 26px}
.job-fields dt{
  font-size:13px;font-weight:700;line-height:1.9;letter-spacing:.04em;
  color:var(--teal);white-space:nowrap;
}
.job-fields dd{margin:0;font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.req-note{font-size:12.5px;color:var(--orange)}
/* ---------- サイトマップ（/sitemap/ で新規定義） ---------- */
.sm-top{
  font-size:14.5px;line-height:1.9;
  padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:36px;
}
.sm-top a{color:var(--ink);text-decoration:none}
.sm-top a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px}
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px}
.sm-group h3{
  font-size:15px;font-weight:700;line-height:1.7;padding-bottom:12px;
  border-bottom:1px solid var(--line-strong);margin-bottom:14px;
}
.sm-group li{font-size:14.5px;line-height:1.9}
.sm-group li + li{margin-top:9px}
.sm-group a{color:var(--ink);text-decoration:none}
.sm-group a:hover{color:var(--teal-deep);text-decoration:underline;text-underline-offset:4px}

/* ---------- S05 空状態（絞り込みの結果が0件） ----------
   「ありません」だけで終えず、次の行動を必ず添えます。灰色一色にせず、
   カードと同じ面として扱い、行き止まりに見えないようにしています。 */
.job-empty{
  margin-top:26px;background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:2px;padding:44px 40px;text-align:center;
}
.job-empty > svg{color:var(--ink-3);margin-bottom:16px}
.job-empty .empty-lead{font-size:16px;font-weight:700;line-height:1.8;color:var(--ink)}
.job-empty .empty-note{
  max-width:38em;margin:12px auto 0;font-size:14.5px;line-height:1.95;color:var(--ink-2);
}
.job-empty .btn-row{margin-top:26px;justify-content:center}
.job-common-link{margin-top:16px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}

/* ---------- 許可番号・集計期間の2枠（/haken/ で新規定義） ---------- */
.fact-row{margin-top:34px;gap:16px}
.fact-row .svc-box h2{font-size:16px;line-height:1.7;margin-bottom:8px}
.fact-val{font-size:15.5px;line-height:1.9;color:var(--ink-2)}

/* ---------- 役割の一覧（/services/labo/ で新規定義） ---------- */
.role-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px;align-items:baseline}
.role-list dt{
  font-size:13px;font-weight:700;line-height:1.85;letter-spacing:.04em;
  color:var(--teal);white-space:nowrap;
}
.role-list dd{margin:0;font-size:14.5px;line-height:1.85;color:var(--ink-2)}

/* ---------- 「こういう課題に」（/services/labo/ で新規定義） ---------- */
.issue-box{background:var(--teal-tint);border:1px solid var(--teal-soft);border-radius:3px;padding:22px 24px 24px}
.issue-box h3{font-size:16px;line-height:1.7;margin-bottom:14px}
.issue-list{display:flex;flex-direction:column;gap:12px}
.issue-list > li{
  display:grid;grid-template-columns:1.35em minmax(0,1fr);
  font-size:14px;line-height:1.85;color:var(--ink-2);
}
.issue-list > li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:.72em}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{gap:48px}
  .about-grid{gap:40px}
}
@media (max-width:767px){
  :root{--sec-pad:64px}
  body{padding-bottom:92px}
  .wrap{width:calc(100% - 40px)}
  .gnav,.header-actions{display:none}
  .menu-btn{display:inline-flex}
  .header-inner{height:66px;gap:16px}
  :root{--header-h:67px}
  .logo{gap:10px}
  .logo-mark{height:24px}
  .logo-name{font-size:13.5px;letter-spacing:.04em}
  .menu-btn{min-height:44px;min-width:44px;gap:9px}
  .menu-btn[aria-expanded="true"] .menu-label{display:none}
  .drawer[data-open="open"]{
    display:block;position:fixed;left:0;right:0;top:66px;bottom:0;z-index:65;
    background:var(--surface);overflow-y:auto;border-top:1px solid var(--line);
  }
  .drawer-inner{padding:0 20px 120px}
  .acc-btn{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:58px;padding:0 2px;background:none;border:0;border-bottom:1px solid var(--line);
    font-size:16px;font-weight:700;line-height:1.6;color:var(--ink);text-align:left;cursor:pointer;
  }
  .acc-btn[aria-current="true"]{color:var(--teal-deep)}
  .acc-panel li a{
    display:block;min-height:52px;padding:15px 0 15px 20px;
    border-bottom:1px solid var(--line);
    font-size:15px;line-height:1.6;color:var(--ink-2);text-decoration:none;
  }
  .acc-panel li a.is-strong{font-weight:700;color:var(--ink)}
  .drawer-cta{
    margin:26px -20px 0;padding:22px 20px;background:var(--surface-2);
    display:flex;flex-direction:column;gap:12px;
  }
  .drawer-cta .btn{width:100%}
  .drawer-sub{display:flex;flex-wrap:wrap;align-items:baseline;padding-top:24px;font-size:13px;line-height:2.1}
  .drawer-sub a{color:var(--ink-2);text-decoration:none}
  .drawer-sub a:not(:last-child)::after{content:"／";padding:0 9px;color:var(--line-strong)}

  .hero-grid{grid-template-columns:1fr;gap:36px;padding:52px 0 60px}
  .crumb + main .hero-grid{padding-top:36px}
  .hero h1{line-height:1.5}
  .hero-lead{max-width:none}
  .btn-row{margin-top:28px;flex-direction:column;gap:12px}
  .btn-row .btn{width:100%}

  .trust-grid{grid-template-columns:1fr;gap:22px;padding:26px 0}
  .trust-item{padding:0}
  .trust-item + .trust-item{border-left:0;border-top:1px solid var(--teal-soft);padding-left:0;padding-top:22px}

  /* 1カラムでは行の高さを揃える意味がなく、揃えると全カードが最も高いものに
     合わせられて余白だけ増えます。 */
  .cards-4,.cards-2,.cta-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .stats{grid-template-columns:1fr}
  .info-card,.cta{padding:28px 24px 30px}
  .cta .btn{width:100%}

  .crumb ol{padding:12px 0;font-size:12px}
  .crumb li + li::before{padding:0 8px}
  .page-head{padding:36px 0 42px}
  .page-head .lead{max-width:none}
  .sec-title{margin-bottom:26px}
  .updated{margin-top:26px}
  .doc{grid-template-columns:1fr;gap:44px}
  .doc-aside{position:static;top:auto}
  .doc-main section + section{margin-top:46px}
  .meta-row{gap:10px}
  .meta-row .updated{width:100%}
  .charts{grid-template-columns:1fr}
  .aside-grid{grid-template-columns:1fr;gap:32px}
  .stats-3{grid-template-columns:1fr;gap:14px}
  .link-card{padding:26px 24px 28px}
  .link-card h3{font-size:17.5px}
  .contact-box{padding:24px 22px 26px}
  .contact-line{display:block}
  .contact-line > span{display:block}
  .contact-line > span:not(:last-child)::after{content:none}
  .stat-band{padding:32px 0 34px}
  .stats-3.stat-plain{grid-template-columns:1fr 1fr;gap:24px 16px}
  /* 狭い幅では区分タグを1行目に出し、2行目を 職種名 ｜ ＋ の2列にします。 */
  .job-head{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:20px 0 22px}
  .job-tag{grid-column:1 / -1;justify-self:start}
  .job-head .toggle-mark{margin-top:3px}
  .job-fields{grid-template-columns:1fr;gap:2px}
  .job-fields dd{margin-bottom:12px}
  .chip-row{gap:8px;margin-top:24px}
  .chip{min-height:44px;padding:0 14px;font-size:13px}
  .statement{margin-bottom:20px}
  .sub-h{margin:30px 0 14px}
  .tl-item{grid-template-columns:1fr;gap:3px;padding:16px 0}
  .what-grid{grid-template-columns:1fr;gap:0}
  .fact-tiles{gap:14px}
  .field-row{grid-template-columns:1fr;gap:0}
  .type-grid{grid-template-columns:1fr;gap:12px}
  .cform .btn{width:100%}
  .form-error-summary{padding:18px 18px 18px 20px}
  .form-done{padding:32px 22px}
  .role-list{grid-template-columns:1fr;gap:2px}
  .role-list dd{margin-bottom:12px}
  .svc-box{padding:20px 20px 22px}
  .aside-grid .btn-row{margin-top:22px}
  .job-empty{padding:32px 20px}
  .sm-grid{grid-template-columns:1fr;gap:34px}
  .cta-wide{padding:28px 24px 30px}
  .faq-item{padding:22px 0 24px}
  .msg{grid-template-columns:1fr;gap:26px}
  .msg-side{max-width:380px}
  .msg-main > h2{margin-bottom:22px}
  .cards-3{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .flow{flex-direction:column}
  .flow-arrow{width:auto;height:34px}
  .flow-arrow svg{transform:rotate(90deg)}
  .prose{max-width:none}
  .prose .num > li{grid-template-columns:2em 1fr}
  .prose .fields{grid-template-columns:1fr;gap:.15em}
  .prose .fields dt{line-height:1.9}
  .prose .fields dd{margin-bottom:.7em}

  .foot-grid{grid-template-columns:1fr;gap:30px}
  .site-footer{padding:56px 0 36px}
  /* 狭い幅では組を縦に積み、ラベルを値の上に置きます。
     英語の住所は1行に収まらないので折り返しを許します。 */
  .foot-bottom{margin-top:40px;display:block}
  .foot-facts{display:block}
  .foot-facts > div{display:block;white-space:normal;margin-top:14px}
  .foot-facts dt{line-height:1.7}
  .foot-facts dd{line-height:1.8}
  .foot-copy{margin-top:20px}

  .sticky-cta{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    padding:10px 16px;
  }
  .sticky-cta .btn{min-height:52px;padding:0 10px;font-size:14px;width:100%}
}