/* ============================================================
   RDI サイト共通スタイル（ClaudeDesign「RDI Top.dc.html」由来）
   トップ（index.html）と下層ページで共有。トークンは design_handoff に準拠。

   ⚠️ :hover の指定は必ず @media (hover:hover){ … } の中に書くこと。
      タッチ端末では、指が触れた要素の :hover が「別の場所をタップするまで残る」。
      スワイプしただけでリンクがホバー状態のまま固まって見えるため、
      マウスのある環境だけに限定する。:active / :focus-visible はそのままでよい。
      （ツールページの <style> 内も同じ方針）
   ============================================================ */
:root{
  --teal:#009ca2; --teal-hover:#00868b; --teal-dark:#007a7f; --teal-ink:#0b7a7e; --teal-bright:#37d7db;
  --teal-tint:#e0f5f6;
  --deep:#0b3d3f; --chip:#e6f5f5; --wm:#e8f1f1;
  --ink:#1a1a1a; --body:#2a2620; --body2:#3a362f; --muted:#5a5347; --nav:#3a4443;
  --ivory:#fcfbf8; --line:#ece7de; --line2:#ded8cd;
  /* 淡ティールの罫（目次枠・解決カード・会社概要の折りたたみ等）。
     rdi-base.css にも同名の変数があるが、あちらを読み込むのは jinzai-zo だけなので
     全ページで効くよう当ファイルにも定義する。 */
  --line-teal:rgba(0,156,162,.16);
  --shadow-teal:0 8px 22px rgba(0,156,162,.28);
  --card-shadow:0 1px 2px rgba(20,60,62,.04),0 10px 30px rgba(20,60,62,.06);
  --header-h:78px;
}
*{box-sizing:border-box}
/* タップ時にOSが出すハイライトを、既定の灰色からブランドの淡いティールへ。
   丸や角丸の要素でも灰色の四角が光って安っぽく見えるため色だけ替える。
   transparent にして完全に消すと「押しても反応しない」と感じさせるので消さない。
   （継承するプロパティなので html に一度書けば全体に効く） */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(0,156,162,.14)}
/* 本文の可読性はベイジ(baigie.me)に寄せる：medium(500)・16px・行間1.9・軽い字間・濃い文字色 */
body{margin:0;background:#fff;color:var(--ink);
  font-family:"Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  font-weight:500;font-size:16px;line-height:1.9;letter-spacing:.03em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin:0}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:40px}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}

/* ---- キーワードマーカー ---- */
.kw{color:var(--teal-ink);font-weight:600;padding:0 2px;border-radius:1px;
  background:linear-gradient(transparent 60%,rgba(0,156,162,.22) 60%,rgba(0,156,162,.22) 92%,transparent 92%)}

/* ---- 共通ラベル（英字モノスペース + 日本語） ---- */
.kicker{display:flex;align-items:baseline;gap:16px}
.kicker .en{font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--teal)}
.kicker .jp{font-weight:700;font-size:25px;color:var(--ink)}

/* ---- チップ + 採用/育成ラベル行 ---- */
.chip{width:44px;height:44px;flex:none;background:var(--chip);border-radius:10px;
  display:flex;align-items:center;justify-content:center}
.pill-label{display:flex;align-items:center;gap:13px}
.pill-label .name{display:flex;align-items:baseline;gap:11px}
.pill-label .name b{font-weight:700;font-size:23px;color:var(--ink)}
.pill-label .name .en{font:700 12px ui-monospace,monospace;letter-spacing:.16em;color:var(--teal-ink)}

/* ---- ボタン ---- */
/* ホバー挙動は旧ClaudeCode版に準拠：影が広がる＋濃teal化、押下でtranslateY(1px) */
.btn-solid{display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal);color:#fff;border-radius:6px;font-weight:500;
  box-shadow:var(--shadow-teal);
  transition:transform .18s ease,background .2s ease,box-shadow .2s ease}
@media (hover:hover){
.btn-solid:hover{background:var(--teal-dark);box-shadow:0 12px 28px rgba(0,122,127,.34);transform:translateY(-2px)}
}
.btn-solid:active{transform:translateY(0)}
.btn-line{display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--teal);color:var(--teal);border-radius:8px;font-weight:600;
  transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover){
.btn-line:hover{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-ink)}
}
.btn-line:active{transform:translateY(1px)}

/* ============ ヘッダー（固定） ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06)}
/* ヘッダーのナビ位置・サイズ・ホバーは旧ClaudeCode版に準拠（brand｜中央ナビ｜CTA の3分割） */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:16px}
/* ロゴPNG（740×160）は絵柄が上端から始まり、下に22pxの透明余白が入っている。
   そのため箱としては中央でも、絵柄は上に寄って見える（高さ46px表示で約3.2px分）。
   画像を作り直すと横幅も変わるため、CSS側で半分だけ下げて光学的な中央に合わせる。 */
.site-header .brand img{height:46px;width:auto;display:block;transform:translateY(3.2px)}
.site-nav{display:flex;align-items:center;gap:30px}
.navlink{position:relative;font-size:1rem;font-weight:500;color:var(--nav);transition:color .2s ease;padding:4px 0}
.navlink::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;border-radius:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:right;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.navlink:hover{color:var(--teal-dark)}
.navlink:hover::after{transform:scaleX(1);transform-origin:left}
}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-cta .btn-solid{padding:10px 20px}
/* ナビ5項目＋ロゴ＋CTAを1行に収めるには、内側の幅が約853px必要（＝画面幅で約933px）。
   980px以下ではハンバーガーに切り替える。760pxで切っていた頃は、821〜950pxあたりで
   「コンセプト」が2行に折れるなど窮屈な表示になっていた。 */
@media (max-width:980px){.site-nav{display:none}}

main{padding-top:var(--header-h)}

/* ============ ヒーロー（MISSION） ============ */
.sec-hero{position:relative;background:#fff;padding-bottom:54px}
.sec-hero > .wrap{padding-block:52px 48px;position:relative}
.sec-hero .kicker{margin-bottom:30px}
.hero-motif{position:absolute;top:56px;right:32px;width:230px;height:230px}
.hero-h1{font-weight:900;font-size:clamp(36px,5.2vw,56px);line-height:1.4;letter-spacing:.01em;
  color:var(--ink);margin-bottom:56px}
.hero-h1 .teal{color:var(--teal)}
.hero-pillars{display:grid;grid-template-columns:1fr 1fr;gap:150px;max-width:1060px}
.pillar .tick{width:48px;height:2px;background:var(--teal);margin-bottom:22px}
/* 2本柱のリード文。HTML側の <br> で2行に固定しているので、3行に折れない上限がある。
   最長の行は「活き活きと描けるように。」＝全角12文字で、収まる幅は
   スマホ320px時で約22.6px／PCの列幅422px時で約34px。20→22px・25→28px はその内側。 */
.pillar .lead{font-weight:700;font-size:clamp(22px,2.5vw,28px);line-height:1.55;color:var(--ink);margin:18px 0}
.pillar .body{font-size:18px;line-height:2;color:var(--body)}

/* ---- ヒーロー前置き：何をしている会社か（2026-07-27・トップ紹介文 案B）----
   MISSIONの上に「漢字社名ロゴ＋紹介文」を置く。装飾は下罫1本だけに抑え、
   MISSION（地の上の文章）とも、コンセプト（白いカード）とも別の要素として読ませる。 */
.hero-intro{position:relative;z-index:1;margin-bottom:46px;padding-bottom:28px}
/* 下罫は擬似要素で引く（PCでは右上のモチーフを横切らないよう手前で止めるため） */
.hero-intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(0,156,162,.30)}
@media(min-width:821px){ .hero-intro::after{right:292px} }
.hero-intro .hi-logo{display:block;height:clamp(30px,3vw,36px);width:auto;margin-bottom:18px}
.hero-intro .hi-copy{font-weight:700;font-size:clamp(16px,1.9vw,21px);line-height:2.05;
  letter-spacing:.02em;color:var(--ink)}
.hero-intro .hi-copy .teal{color:var(--teal)}

/* MISSIONの2本柱：柱の間に淡い縦罫を1本（PCのみ）。
   面で囲まず線でつなぐ＝白カードで囲むコンセプトとの描き分けを一段はっきりさせる */
@media(min-width:821px){
  .pillar + .pillar{position:relative}
  .pillar + .pillar::before{content:"";position:absolute;left:-75px;top:6px;bottom:4px;width:1px;
    background:linear-gradient(rgba(0,156,162,.32),rgba(0,156,162,.05))}
}

/* ============ コンセプト（CONCEPT） ============ */
.sec-concept{background:var(--ivory)}
.sec-concept .wrap{padding-block:84px}
/* リード文は改行させず1行で（max-width指定なし）。本文と同じ18px（.tool-lead と揃える） */
.concept-lead{font-size:18px;line-height:2.05;color:var(--body2);margin:12px 0 40px}
/* 2つのコンセプトは白いカードで囲む（2026-07-26・案2）。
   MISSIONの2本柱は地の上に直接置いた文章、こちらは「2枚のカード」。
   同じ採用／育成の並びが2回続いても、面の有無で別のものとして読ませる。
   ラベルもMISSIONの44pxチップとは分け、カードの中の小さな付属要素にする。 */
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.concept-col{position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.6vw,32px);box-shadow:var(--card-shadow)}
.cc-label{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.cc-ic{width:30px;height:30px;border-radius:8px;background:var(--chip);flex:none;
  display:flex;align-items:center;justify-content:center}
.cc-ic svg{width:16px;height:16px;display:block}
.cc-label b{font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--teal-dark)}
/* 2枚のカードでボタンの高さを揃える */
.concept-col .btn-concept{margin-top:auto}
.concept-col h3{min-height:58px;display:flex;align-items:center;
  font-weight:700;font-size:clamp(24px,2.9vw,31px);line-height:1.3;color:var(--ink);margin-bottom:18px}
.concept-col .subteal{font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.7;color:var(--teal);margin-bottom:22px}
/* 2カラム（PC）では、このサブ見出しを1行に収める。
   「発揮と成長を通じて、成果創出サイクルを回す。」は全角22文字あり、21pxのままだと
   どの画面幅でもカードに入らず「す。」だけが2行目に落ちていた。
   カード自身をコンテナにして、カード幅（cqi＝内側の幅の1%）から文字サイズを決める。
   ・22文字 × 4.4cqi ≒ 96.8cqi ＜ 100cqi なので必ず1行に収まる
   ・字間も切る（22文字で約14px＝ほぼ1文字分になるため）
   ・16pxを下限にし、それ以下になる狭い幅では従来どおり折り返す（小さくしすぎない） */
@media(min-width:821px){
  .concept-col{container-type:inline-size}
  .concept-col .subteal{font-size:clamp(16px,4.4cqi,21px);letter-spacing:0}
}
.concept-col .body{font-size:18px;line-height:2.15;color:var(--body);margin-bottom:32px}
.concept-col .btn-line{padding:13px 26px;font-size:14.5px}
.concept-col .btn-line span{font-size:16.5px}
/* コンセプト「詳しく」ボタン：淡ティールのグラデ地＋コンセプト線画＋丸囲み矢印の上品な導線 */
.btn-concept{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:19px 22px 19px 26px;border-radius:14px;
  background:linear-gradient(118deg,#ffffff 0%,#eef7f7 62%,#e6f3f3 100%);
  border:1px solid rgba(0,156,162,.20);
  box-shadow:0 1px 2px rgba(20,60,62,.05);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
@media (hover:hover){
.btn-concept:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 16px 32px rgba(0,156,162,.16)}
}
.btn-concept:active{transform:translateY(-1px)}
/* 背景の線画（右寄り・低彩度でテクスチャとして） */
.btn-concept .bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.btn-concept .bg svg{position:absolute;right:50px;top:50%;transform:translateY(-50%);height:345%;width:auto}
/* 上に重なる罫（設計＝方眼）を仄かに */
.btn-concept::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,156,162,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,156,162,.05) 1px,transparent 1px);
  background-size:22px 22px}
.btn-concept .lbl{position:relative;z-index:1;font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--teal-ink)}
.btn-concept .arc{position:relative;z-index:1;flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--teal);color:var(--teal);font-size:18px;line-height:1;
  box-shadow:0 2px 8px rgba(0,156,162,.12);
  transition:background .22s ease,color .22s ease,transform .22s ease}
@media (hover:hover){
.btn-concept:hover .arc{background:var(--teal);color:#fff;transform:translateX(3px)}
}
/* 狭い画面：線画は等倍のままだとボタン全面を覆ってラベルに重なる。
   モバイルでは元のSVGを使わず、丸囲み矢印を中心にした同心円＋斜線をCSSで描く。
   ・.arc を基準に描くので、ボタンの高さやラベルの折り返しが変わっても中心がずれない
   ・採用／育成で同じ意匠になる（狭い画面では線画の描き分けが読み取れないため） */
@media(max-width:640px){
  .btn-concept{padding:17px 18px 17px 20px}
  .btn-concept .bg svg{display:none}
  .btn-concept .arc{width:42px;height:42px;font-size:17px}
  .btn-concept .arc::before,.btn-concept .arc::after{content:"";position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
  .btn-concept .arc::before{width:64px;height:64px;border:1px solid rgba(0,156,162,.22)}
  .btn-concept .arc::after{width:98px;height:98px;border:1px solid rgba(0,156,162,.15)}
  /* 到達点（矢印）へ左下から伸びる斜線。right:39px＝右padding18px＋矢印の半径21px */
  .btn-concept .bg::before{content:"";position:absolute;top:calc(50% - 1px);right:39px;
    width:78px;height:1.5px;background:rgba(0,156,162,.26);
    transform-origin:right center;transform:rotate(-45deg)}
  /* ラベル側は白のスクリムで抜いて可読性を確保 */
  .btn-concept .bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 42%,rgba(255,255,255,0) 76%)}
}
/* 育成「できる ＝ やったことがある」等式 */
.eq-wrap{min-height:58px;display:flex;align-items:center;margin-bottom:18px}
.eq{display:inline-grid;grid-template-columns:auto auto auto;column-gap:18px;align-items:baseline}
.eq .term{font-weight:700;font-size:clamp(24px,2.9vw,31px);line-height:1.15;color:var(--ink)}
.eq .eqs{font-weight:700;font-size:clamp(24px,2.9vw,31px);line-height:1.15;color:var(--ink);text-align:center}
/* 「成長 ＝ 自分を変えること」は全角11文字。カード幅が狭いと最後の1文字だけが
   2行目に落ちるため、狭い画面では ＝ の前後を詰め、字間を切り、1行を厳守する。
   それでも入らない幅（360px以下など）では文字サイズを必要なぶんだけ落とす。 */
@media(max-width:820px){
  .eq{column-gap:9px;letter-spacing:0}
  .eq .term,.eq .eqs{white-space:nowrap;font-size:min(24px,calc((100vw - 112px) / 11))}
}

/* コンセプト下部：書籍紹介（書影の影なし） */
.concept-book{display:flex;gap:32px;align-items:center;margin-top:clamp(44px,5vw,64px);
  padding:34px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-shadow)}
.concept-book .cover{flex:none;width:116px}
.concept-book .cover img{width:100%;border-radius:3px;display:block}
.concept-book .blabel{font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--teal);margin-bottom:10px}
.concept-book .btitle{font-weight:700;font-size:19px;color:var(--ink);margin-bottom:6px}
.concept-book .bauthor{font-size:14px;color:var(--muted);margin-bottom:14px}
.concept-book .bdesc{font-size:16px;line-height:2;color:var(--body);margin-bottom:18px}
.concept-book .bmore{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--teal);
  border:1px solid var(--teal);border-radius:8px;padding:11px 22px;
  transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease}
@media (hover:hover){
.concept-book .bmore:hover{background:var(--teal-tint);color:var(--teal-ink);border-color:var(--teal)}
}
.concept-book .bmore:active{transform:translateY(1px)}
@media(max-width:640px){.concept-book{flex-direction:column;align-items:flex-start;gap:22px}}

/* ============ サービス（SERVICE） ============ */
.sec-service{background:#fff}
.sec-service .wrap{padding-block:84px}
.sec-service .kicker{margin-bottom:32px}
/* サービスの中タイトル（採用サービス／育成サービス）：先頭にコンセプトのアイコン */
.svc-group{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.svc-group .ic{flex:none;width:36px;height:36px;background:var(--chip);border-radius:9px;
  display:flex;align-items:center;justify-content:center}
.svc-group .ic svg{width:21px;height:21px;display:block}
.svc-group .jp{font-weight:800;font-size:19px;color:var(--ink);letter-spacing:.02em}
.svc-group .en{font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--teal)}
.svc-group.is-dev{margin-top:46px}   /* 2つ目のグループ（育成）は上に余白 */
/* 各グループの一覧を2列の表組みに。罫線で区切る作法は他の一覧（お知らせ・会社概要）に合わせる */
.svc-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2)}
.svc-row{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;
  padding:24px;border-bottom:1px solid var(--line);transition:background .2s ease,color .2s ease}
.svc-row:nth-child(odd){border-right:1px solid var(--line)}   /* 左右列の間の縦罫 */
@media (hover:hover){
.svc-row:hover{background:#f2f6f6}
.svc-row:hover .ttl{color:var(--teal-dark)}
}
.svc-row .no{font:700 30px ui-monospace,Menlo,monospace;letter-spacing:.02em;color:var(--teal);line-height:1}
.svc-row .ttl{font-weight:700;font-size:16.5px;line-height:1.5;margin-bottom:5px;color:var(--ink);transition:color .2s ease}
.svc-row .desc{font-size:16.5px;color:var(--body);line-height:1.8}
.svc-row .arrow{color:var(--teal);font-size:14px;transition:transform .2s ease}
@media (hover:hover){
.svc-row:hover .arrow{transform:translateX(3px)}
}

/* ============ 設計バナー（「自分で選考を設計してみる」への格調高い導線） ============ */
/* 深いティール下地＋ブループリント（製図）SVGを背景に敷いた横長バナー。他のボタンと差別化。 */
/* ヒーロー内のニュースティッカー（最新1件・ヒーロー下端に配置） */
.news-ticker-wrap{background:transparent;margin-block:24px}  /* 背景グリッド1マス（24px）分を上下に追加 */
.news-ticker-wrap .wrap{padding-block:0}
.news-ticker{display:flex;align-items:center;gap:18px;padding:18px 24px;
  border:1px solid var(--line2);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(20,40,45,.05);
  transition:border-color .2s ease,box-shadow .2s ease}
@media (hover:hover){
.news-ticker:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(0,156,162,.1)}
}
.news-ticker .nt-label{flex:none;display:inline-flex;align-items:center;gap:8px;
  font:700 14.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.13em;color:var(--teal);
  padding-right:18px;border-right:1px solid var(--line)}
/* 更新中を示すドット（design-banner のキッカーと同じ意匠）。輪だけが脈打つ */
.news-ticker .nt-label::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--teal)}
.news-ticker .nt-date{flex:none;font:600 14.5px/1 ui-monospace,Menlo,monospace;color:var(--muted)}
.news-ticker .tag{font-size:12.5px;padding:6px 13px}
/* タイトルは幅に関わらず全文を表示する（…での省略はしない）。
   入りきらない幅では折り返して2行以上になる。 */
.news-ticker .nt-ttl{flex:1;min-width:0;white-space:normal;line-height:1.6;
  font-size:17px;font-weight:600;color:var(--ink)}
.news-ticker .nt-arrow{flex:none;color:var(--teal);font-weight:700;font-size:16px;transition:transform .2s ease}
@media (hover:hover){
.news-ticker:hover .nt-arrow{transform:translateX(3px)}
}
/* 中間幅以下：タイトルを独立した行に落として全幅で読ませる。
   横に並べたまま折り返すと、タイトルの列だけが細長くなって読みにくいため。 */
@media(max-width:820px){
  .news-ticker{flex-wrap:wrap;gap:11px 14px;padding:16px 18px}
  .news-ticker .nt-ttl{flex-basis:100%;order:5;font-size:16px}
}

.designbanner-wrap{background:#fff}
.designbanner-wrap .wrap{padding-block:8px}
.sec-service .designbanner-wrap{padding:0}          /* サービス内配置時は余白を親に委ねる */
.design-banner{position:relative;display:flex;align-items:center;gap:30px;overflow:hidden;isolation:isolate;
  border-radius:20px;padding:40px 46px;
  background:linear-gradient(105deg,#082a2c 0%,var(--deep) 44%,#0c6367 100%);
  box-shadow:0 18px 42px rgba(11,61,63,.26);
  transition:transform .24s ease,box-shadow .24s ease}
@media (hover:hover){
.design-banner:hover{transform:translateY(-3px);box-shadow:0 26px 56px rgba(11,61,63,.34)}
}
.design-banner:active{transform:translateY(-1px)}
/* 左側の可読性を担保する暗幕（右のモチーフへ向けて透過） */
.design-banner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,36,38,.94) 0%,rgba(6,36,38,.62) 46%,rgba(6,36,38,0) 88%)}
.design-banner__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.design-banner__bg svg{position:absolute;right:-20px;top:50%;transform:translateY(-50%);height:230%;width:auto;opacity:.9}
.design-banner__body{flex:1 1 auto;min-width:0}
.design-banner__kick{display:inline-flex;align-items:center;gap:11px;
  font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--teal-bright);margin-bottom:13px}
.design-banner__kick .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 0 4px rgba(55,215,219,.18)}
.design-banner__ttl{font-weight:900;font-size:clamp(21px,2.9vw,31px);line-height:1.4;color:#fff;letter-spacing:.01em}
.design-banner__ttl .teal{color:var(--teal-bright)}
.design-banner__sub{margin-top:13px;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.84)}
.design-banner__go{flex:none;align-self:center;display:inline-flex;align-items:center;gap:11px;
  color:#fff;font-weight:700;font-size:14.5px;white-space:nowrap;
  border:1.5px solid rgba(255,255,255,.55);border-radius:999px;padding:14px 26px;
  transition:background .2s ease,border-color .2s ease}
.design-banner__go .ar{transition:transform .2s ease}
@media (hover:hover){
.design-banner:hover .design-banner__go{background:rgba(255,255,255,.14);border-color:#fff}
.design-banner:hover .design-banner__go .ar{transform:translateX(4px)}
}
@media(max-width:720px){
  .design-banner{flex-direction:column;align-items:flex-start;gap:22px;padding:30px 26px;border-radius:16px}
  /* 暗幕は下ほど濃く。CTAが最下部（全幅）に来るため、そこを最も落ち着かせる */
  .design-banner::before{background:linear-gradient(180deg,rgba(6,36,38,.78) 0%,rgba(6,36,38,.88) 62%,rgba(6,36,38,.94) 100%)}
  /* 製図モチーフは右上へ。CTAの上に線が乗ると押せる感じが損なわれるので、濃度も落とす */
  .design-banner__bg svg{height:auto;width:132%;right:-36%;top:-26%;bottom:auto;transform:none;opacity:.68}
  /* テクスチャの上でもボタンとして読めるよう、うっすら地を敷く */
  .design-banner__go{align-self:stretch;justify-content:center;
    background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.72)}
}

/* ============ ツール（TOOL） ※他セクションと同じ明色に統一 ============ */
.sec-platform{background:var(--ivory)}
.sec-platform .wrap{padding-block:84px}
.tool-lead{font-size:18px;line-height:2.05;color:var(--body2);margin:12px 0 40px}

/* 主力ツール（モギセン）＝フィーチャー枠 */
.tool-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:34px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--card-shadow);margin-bottom:24px}
/* サービス個別ページ内に置く場合は、本文との行間をサービス01の .svc-tool に合わせる */
.svc-block .tool-feature{margin-top:16px}
.tool-feature .cat{font:700 11px ui-monospace,monospace;letter-spacing:.16em;color:var(--teal)}
/* h3.shead の配下に置くページ（サービス11）では h4 になる。見た目は同じ */
.tool-feature h3,.tool-feature h4{font-weight:700;font-size:26px;line-height:1.5;color:var(--ink);margin:12px 0 16px}
/* 読み幅は制限せず、カラム幅いっぱいまで（1行の文字数を稼いで端数行を減らす） */
.tool-feature p{font-size:17px;line-height:2.05;color:var(--body);margin-bottom:24px}
.tool-feature .btn-line{padding:13px 26px;font-size:15px}
/* プロダクト画像（実キャプチャをはめ込む枠） */
.product-shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fbfaf7}
.product-shot img{display:block;width:100%;height:auto}


/* ============ お知らせ（NEWS） ============ */
.sec-news{background:#fff}
.sec-news .wrap{padding-block:84px}
.news-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
/* 「すべてのお知らせを見る」＝一覧の下に中央寄せ。他の導線と同じ枠線ボタン（.btn-line） */
.news-more-wrap{display:flex;justify-content:center;margin-top:clamp(32px,4vw,44px)}
.news-more-wrap .btn-line{padding:14px 30px;border-radius:8px;font-size:15px}

.news-list{border-top:1px solid var(--line2)}
.news-item{display:grid;grid-template-columns:112px 108px 1fr 22px;gap:20px;align-items:start;
  padding:22px 8px;border-bottom:1px solid var(--line)}
.news-item .date{font:600 13px/26px ui-monospace,Menlo,monospace;letter-spacing:.03em;color:var(--muted)}
.news-item .tag{justify-self:start;align-self:start;border-radius:999px;padding:5px 12px;white-space:nowrap}
.news-item .ttl{font-size:16px;font-weight:500;color:var(--ink);line-height:26px}
.news-item .arrow{justify-self:end;align-self:center;color:var(--teal);font-size:14px;line-height:26px}
a.news-item{transition:background .2s ease,color .2s ease}
@media (hover:hover){
a.news-item:hover{background:#f6faf9}
a.news-item:hover .ttl{color:var(--teal-dark)}
}

/* ===== お知らせのバッジ（5種）=====
   日本語なので等幅フォントは使わず、字間も詰める。
   ティールはブランド色＝件数の最も多い「お知らせ」に割り当てる。 */
.tag{display:inline-block;font-weight:700;font-size:11.5px;letter-spacing:.02em;line-height:1;
  border-radius:999px;padding:6px 12px;white-space:nowrap}
.tag-info{color:var(--teal-ink);background:var(--chip)}          /* お知らせ：ティール */
.tag-media{color:#8a5a1f;background:#fbf1e2}                     /* 掲載：アンバー */
.tag-seminar{color:#4a5fa5;background:#eaeefb}                   /* セミナー：ブルー */
.tag-feature{color:#3f7a45;background:#e9f4ea}                   /* 新機能：グリーン */
.tag-other{color:var(--muted);background:#f0eee9}                /* その他：グレー */

/* ============ 下層ページ共通 ============ */
.page-hero{background:var(--ivory);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .wrap{padding-block:46px 42px;position:relative;z-index:1}
/* 下層ページヘッダー右側の設計図モチーフ（rdi-motion.js が注入） */
.ph-blueprint{position:absolute;top:50%;right:-26px;transform:translateY(-50%);
  width:clamp(230px,25vw,350px);height:auto;pointer-events:none;z-index:0}
@media(max-width:860px){.ph-blueprint{display:none}}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:var(--muted);transition:color .18s}
@media (hover:hover){
.breadcrumb a:hover{color:var(--teal)}
}
.breadcrumb .sep{margin:0 9px;color:var(--line2)}
.breadcrumb .cur{color:var(--body2)}
.page-en{display:block;font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--teal);margin-bottom:12px}
/* 語の途中で折り返さない。区切りたい位置には HTML 側でゼロ幅スペース（&#8203;）を入れる。
   1語が幅に収まらない場合だけ anywhere で逃がす（はみ出し防止） */
.page-title{font-weight:900;font-size:clamp(30px,4.4vw,48px);line-height:1.35;color:var(--ink);
  word-break:keep-all;overflow-wrap:anywhere}

.page-body{padding-block:64px 84px}

/* お知らせ一覧：左カテゴリサイドバー＋右一覧の2カラム */
.news-archive{max-width:1000px;margin-inline:auto;display:grid;grid-template-columns:186px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.news-main{min-width:0}
.news-side{position:sticky;top:96px}
.news-side .ns-h{display:block;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--teal);margin-bottom:15px;padding-left:12px}
.news-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.news-side .ns-cat{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:700;color:var(--body);padding:9px 12px;border-radius:8px;transition:background .18s,color .18s}
@media (hover:hover){
.news-side .ns-cat:hover{background:var(--chip);color:var(--teal-dark)}
}
.news-side .ns-cat.is-on{background:var(--teal);color:#fff}
.news-empty{padding:38px 8px;color:var(--muted);font-size:15px}
@media(max-width:820px){
  .news-archive{grid-template-columns:1fr;gap:22px}
  .news-side{position:static}
  .news-side .ns-h{padding-left:0}
  .news-side ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .news-side .ns-cat{width:auto;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px}
}

/* 記事（個別ページ） */
.article{max-width:760px;margin-inline:auto}
.article .meta{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.article .meta .date{font:600 13px ui-monospace,monospace;color:var(--muted)}
/* .tag の色は .tag-info / .tag-media などの共通クラスに従う */
.article h1{font-weight:900;font-size:clamp(23px,3.2vw,32px);line-height:1.55;color:var(--ink);margin-bottom:30px}
.article-body p{font-size:17px;line-height:2.15;color:var(--body);margin-bottom:1.6em}
.article-body h2{font-weight:700;font-size:19px;color:var(--ink);margin:2.2em 0 .9em;padding-left:14px;border-left:3px solid var(--teal)}
.article-body ul{margin:0 0 1.6em;padding-left:1.3em}
.article-body li{font-size:17px;line-height:2.05;color:var(--body);margin-bottom:.4em}
.article-figure{margin:30px 0}
.article-figure img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.article-figure figcaption{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.back-wrap{max-width:760px;margin:48px auto 0;padding-top:26px;border-top:1px solid var(--line)}
.back-link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--teal);
  transition:gap .2s ease,color .2s ease}
@media (hover:hover){
.back-link:hover{color:var(--teal-dark);gap:12px}
}

/* ============ 下層ページ 共通（リード文・図の仮置き） ============ */
/* ページヘッダーのリード文 */
.page-lead{margin-top:22px;font-size:18px;line-height:2.05;color:var(--body2)}
/* 図の仮置き（破線ストライプ） */
.ph{background:repeating-linear-gradient(135deg,#efece6,#efece6 11px,#f5f2ec 11px,#f5f2ec 22px);
  border:1px dashed #cbc4b6;border-radius:12px;display:flex;align-items:center;justify-content:center;
  gap:6px;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#a99d89;text-align:center;padding:20px}
.ph .sub{font-weight:400;color:#c2bbad}

/* ---- 下層ページ 本文（実コンテンツ用） ---- */
.sub-intro{font-size:18px;line-height:2.05;color:var(--body);margin-bottom:clamp(48px,6vw,72px)}
.sub-intro b{color:var(--ink);font-weight:700}
.sub-sec{margin-bottom:clamp(56px,7vw,88px)}
.sub-sec:last-of-type{margin-bottom:0}
.sub-sec .snum{font:900 clamp(28px,3.6vw,38px)/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--teal);margin-bottom:12px}
.sub-sec h2{font-weight:900;font-size:clamp(22px,3vw,29px);line-height:1.45;color:var(--ink)}
.sub-sec h2 .teal{color:var(--teal)}
/* セクション内の小見出し（h2と本文の中間）。直前の本文とは十分に離す */
.sub-sec h3.shead{margin-top:clamp(34px,3.6vw,46px);padding-left:14px;border-left:4px solid var(--teal);
  font-weight:900;font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--ink)}
.sub-sec h3.shead + .stext{margin-top:14px}
/* コラム：セクション内の掘り下げを枠で区切る。枠が本文の読み幅(800px)を包む形にし、左寄せ */
.ccol{--cpad:clamp(20px,3.2vw,40px);
  margin-top:clamp(30px,3.4vw,42px);margin-inline:0;
  padding:clamp(28px,3.2vw,40px) var(--cpad);
  max-width:calc(800px + var(--cpad) * 2);
  background:var(--ivory);border:1px solid var(--line);border-radius:16px}
.sub-sec .ccol h3.shead{margin-top:0}   /* 枠の先頭では上の余白を消す（.sub-sec h3.shead と同じ詳細度で上書き） */
/* サービス個別ページでコラムとして使うとき：枠の先頭の余白を消し、枠のあとは本文をしっかり離す */
.svc-block .ccol > h3.shead:first-child{margin-top:0}
.svc-block .ccol + .lead-t{margin-top:clamp(36px,4.4vw,54px)}
/* 2カラムの本文が中タイトルで始まる場合、上の余白を消して図の上端と揃える */
.csplit-body > h3.shead:first-child{margin-top:0}
.sub-sec .stext{font-size:18px;line-height:2.05;color:var(--body);margin-top:16px}
.sub-sec .stext b{color:var(--ink);font-weight:700}
.sub-sec .stext a{color:var(--teal-ink);font-weight:700;border-bottom:1px solid var(--teal-bright);transition:color .18s,border-color .18s}
@media (hover:hover){
.sub-sec .stext a:hover{color:var(--teal-dark);border-color:var(--teal-dark)}
}
/* 本文中：シミュレーションの設定条件などを囲む枠 */
.sbox{margin-top:18px;padding:18px 22px;background:#fafcfc;border:1px solid var(--line);border-radius:10px}
.sbox ul{margin:0;padding:0;list-style:none}
.sbox li{font-size:17px;line-height:1.9;color:var(--body);padding-left:1.15em;text-indent:-1.15em}
.sbox li::before{content:"・"}
.sbox li + li{margin-top:5px}
.sbox .res{color:var(--teal-ink);font-weight:700}
/* 枠のすぐ下に置く注釈（上は枠に寄せ、下は次の段落と離す） */
.snote{margin:9px 0 28px;font-size:12.5px;line-height:1.8;color:var(--muted)}
/* 本文中：中黒の箇条書き */
.slist{margin-top:10px;padding:0;list-style:none}
.slist li{font-size:18px;line-height:2.05;color:var(--body);padding-left:1.15em;text-indent:-1.15em}
.slist li::before{content:"・"}
.slist li b{color:var(--ink);font-weight:700}
/* 文頭が「落とし穴①」のように番号を含む語で始まる箇条書き。中黒は重複するので出さない */
.slist.is-num{margin-top:14px}
.slist.is-num li{padding-left:0;text-indent:0}
.slist.is-num li::before{content:none}
.slist.is-num li b{color:var(--teal-ink);font-weight:800}

/* 会社概要ページ */
.co-table{margin-top:24px;border-top:2px solid var(--teal)}
.co-table .row{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:20px 10px;border-bottom:1px solid var(--line);align-items:start;transition:background .18s ease}
@media (hover:hover){
.co-table .row:hover{background:#f8fdfd}
}
.co-table .k{font-weight:700;font-size:15px;color:var(--ink);position:relative;padding-left:15px}
.co-table .k::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:1.02em;border-radius:2px;background:var(--teal)}
.co-table .v{font-size:17px;line-height:1.95;color:var(--body)}
/* 研修要項など、見出し語が短く値が長い表。左を詰めて右へ回す（640px以下は1列になるので効かない） */
.co-table.is-narrow-k .row{grid-template-columns:150px 1fr;gap:22px}
.co-link{color:var(--teal);font-weight:600}
@media (hover:hover){
.co-link:hover{color:var(--teal-dark)}
}
.co-people{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.co-person{border:1px solid var(--line);border-radius:14px;padding:28px 30px;background:#fff;box-shadow:var(--card-shadow)}
.co-person .role{font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.13em;color:var(--teal);margin-bottom:12px}
.co-person .pname{font-weight:900;font-size:22px;color:var(--ink)}
.co-person .roma{font-size:12.5px;letter-spacing:.08em;color:var(--muted);margin-top:5px}
.co-person .pbio{font-size:16.5px;line-height:1.95;color:var(--body);margin-top:16px}
.co-person .pcred{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.co-person .pcred li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.65;color:var(--body2)}
.co-person .pcred li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.6}
.co-clients{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.co-clients span{border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-size:14.5px;color:var(--body2);background:#fff}
.co-note{margin-top:16px;font-size:13px;color:var(--muted)}

/* 事業内容の箇条書き */
.co-biz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.co-biz li{position:relative;padding-left:20px;font-size:16px;line-height:1.8;color:var(--body)}
.co-biz li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:.65}
.co-biz b{color:var(--ink);font-weight:700}

/* 過去の掲載執筆・講演・取材（折りたたみ） */
.co-history{margin-top:26px;border:1px solid var(--line-teal);border-radius:14px;background:#fbfefe;overflow:hidden}
.co-history > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 22px;
  font-weight:700;font-size:16px;color:var(--ink);transition:background .18s ease}
.co-history > summary::-webkit-details-marker{display:none}
@media (hover:hover){
.co-history > summary:hover{background:#f2fbfb}
}
.co-history > summary .cho{margin-left:auto;flex:none;width:12px;height:12px;color:var(--teal);
  border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);transition:transform .22s ease}
.co-history[open] > summary .cho{transform:rotate(-135deg)}
.co-hist-body{padding:2px 22px 24px}
.co-hist-group{margin-top:20px}
.co-hist-group h4{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--teal-dark);margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line-teal)}
.co-hist-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.co-hist-group li{position:relative;padding-left:16px;font-size:14px;line-height:1.7;color:var(--body)}
.co-hist-group li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.5}

/* 会社概要 04：コンセプトバナー2枚（トップと同デザイン） */
.co-concepts{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.co-concepts{grid-template-columns:1fr}}

@media(max-width:640px){
  .co-table .row{grid-template-columns:1fr;gap:6px;padding:16px 2px}
  /* 値は <dd>。ブラウザ標準の margin-left:40px が効いて見出しより大きくずれるので、
     見出しテキストの開始位置（.k の padding-left と同じ15px）に揃える */
  .co-table .v{margin-left:15px}
  .co-people{grid-template-columns:1fr}
}

/* お問い合わせページ
   左＝ご案内（送信をためらう人向けの後押し）／右＝フォーム。
   DOM順も左→右なので、スマホでは「ご案内 → フォーム」の順に積まれる。
   align-items は既定の stretch のままにする。start にすると左カラムの高さが内容分で
   止まり、中の position:sticky が動く余地を失う（旧実装がそうなっていた）。 */
/* 左は .95fr＝約486px。ご案内のリード「お問い合わせ内容を確認し、…差し上げます。」29字＝464px が
   1行に収まる幅。これより狭めると「す。」だけが3行目に落ちる */
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px}
.contact-intro .ci-inner{position:sticky;top:96px}
.contact-intro .ci-lead{font-size:16px;line-height:2.05;color:var(--body)}
.contact-intro .ci-box{margin-top:26px;padding:24px 26px;background:var(--ivory);border:1px solid var(--line);border-radius:16px}
.contact-intro .ci-h{font-weight:800;font-size:15.5px;line-height:1.75;color:var(--ink)}
.contact-intro .ci-list{margin:16px 0 0;padding:0;list-style:none}
.contact-intro .ci-list li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.9;color:var(--body)}
.contact-intro .ci-list li + li{margin-top:12px}
.contact-intro .ci-list li::before{content:"";position:absolute;left:2px;top:.7em;width:7px;height:7px;border-radius:2px;background:var(--teal)}
.contact-intro .ci-note{margin-top:24px;font-size:14.5px;line-height:1.9;color:var(--body)}
.cform .field{margin-bottom:22px}
.cform label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px}
.cform label.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--body);line-height:1.75;margin-bottom:0}
.cform .req{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#b23b3b;background:#fbeceb;border-radius:4px;padding:2px 7px;vertical-align:middle}
.cform .opt{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:var(--muted);background:var(--ivory);border-radius:4px;padding:2px 7px;vertical-align:middle}
/* font-size は 16px を下回らないこと。iOS Safari は16px未満の入力欄にフォーカスすると
   自動で画面を拡大し、ユーザーがピンチで戻す羽目になる。 */
.cform input,.cform select,.cform textarea{width:100%;border:1px solid var(--line2);border-radius:9px;padding:13px 15px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.cform input::placeholder,.cform textarea::placeholder{color:#b7b1a5}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.cform textarea{min-height:168px;resize:vertical;line-height:1.75}
/* 同意のチェックボックス。OS標準のままだと13px前後で本文14pxに対して小さく、
   縦位置も1行目の中心から外れる。appearance:none で自前に描いて大きさと位置を合わせる。
   （input は置換要素なので ::before が効かない。チェックマークは background-image のSVG） */
.cform .consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:19px;height:19px;                 /* 本文の1行分＝14px×1.75＝24.5px に対して */
  padding:0;                              /* ★共通の input 規則の padding:13px 15px を打ち消す
                                             （box-sizing:border-box なので付いたままだと32×28pxになる） */
  margin:2.75px 0 0;                      /* (24.5-19)/2＝1行目の中心に合わせる */
  border:1px solid var(--line2);border-radius:5px;background:#fff;cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.cform .consent input[type=checkbox]:checked{
  background-color:var(--teal);border-color:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px}
.cform .consent input[type=checkbox]:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.cform .hint{margin:-1px 0 8px;font-size:12.5px;line-height:1.8;color:var(--muted)}
.cform .err{display:none;color:#b23b3b;font-size:12.5px;margin-top:7px}
.cform .field.invalid .err{display:block}
.cform .field.invalid input,.cform .field.invalid select,.cform .field.invalid textarea{border-color:#b23b3b}
.cform .actions{margin-top:28px}
.cform .actions .btn-solid{padding:15px 40px;font-size:15px;font-weight:600;border:none;cursor:pointer}
/* ===== 送信後の状態（完了パネル／失敗の通知） =====
   ★[hidden] を display で打ち消さないための明示。UA の [hidden]{display:none} は
   詳細度0なので、.contact-grid{display:grid} や .cdone{display:flex} に負ける。
   ここを書き忘れると hidden を付けても消えない。 */
.contact-grid[hidden],.cdone[hidden],.cerr[hidden]{display:none}

/* 送信が失敗したとき。送信ボタンの直上に出す（押した場所の近くで気づけるように） */
.cerr{margin-top:26px;padding:20px 22px;border:1px solid #f0d8d5;border-radius:12px;background:#fdf6f5}
.cerr h3{font-weight:800;font-size:15px;line-height:1.7;color:#8f2f2f;margin-bottom:8px}
.cerr p{font-size:14.5px;line-height:1.95;color:var(--body)}

/* 送信完了。フォームと2カラムごと差し替わるので、1カラムで組む */
.cdone{display:flex;flex-direction:column;align-items:flex-start;outline:none}
.cdone .cd-head{display:flex;align-items:center;gap:15px}
.cdone .cd-check{flex:none;display:block}
.cdone .cd-head h2{font-weight:800;font-size:clamp(21px,2.6vw,26px);line-height:1.55;color:var(--ink)}
.cdone .cd-lead{margin-top:20px;font-size:16.5px;line-height:2.05;color:var(--body)}
.cdone .cd-box{margin-top:30px;padding:26px 28px;border:1px solid var(--line);border-radius:16px;background:var(--ivory)}
.cdone .cd-box h3{font-weight:800;font-size:15.5px;line-height:1.75;color:var(--ink)}
.cdone .cd-box p{margin-top:12px;font-size:14.5px;line-height:1.95;color:var(--body)}
.cdone .cd-actions{margin-top:34px}
.cdone .cd-actions .btn-solid{padding:15px 36px;font-size:15px;font-weight:600}

@media(max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-intro .ci-inner{position:static}
}
@media(max-width:640px){
  .cdone .cd-head{gap:12px}
  .cdone .cd-check{width:34px;height:34px}
  .cdone .cd-box{padding:22px 20px}
}
/* スマホでは枠の左右余白を詰める。既定の26pxだと見出し19字＝約295pxが入らず
   「ん。」だけが2行目に落ちる */
@media(max-width:640px){
  .contact-intro .ci-box{padding:22px 20px}
}
/* 図版 */
/* ===== 長文コンセプト用：本文と図版の2カラム（本文の行長を抑えて読みやすく） =====
   1セクション内に .csplit を必要なだけ並べられる。.rev を付けると図版が左に来る（左右交互用）。
   全幅の図を使うセクションでは .csplit の代わりに .ctext（本文のみ幅を絞る）＋通常の .cfig を使う。 */
.csplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,3.4vw,44px);align-items:start;margin-top:clamp(20px,2.6vw,28px)}
.csplit + .csplit{margin-top:clamp(32px,4vw,52px)}
/* 本文が中タイトルで始まる2カラム（.hd）は、見出しの上余白を消して図と揃える分、
   ブロック自体を十分に離す。.csplit + .csplit より後ろに置いて確実に上書きする */
.csplit.hd{margin-top:clamp(46px,5vw,68px)}
.csplit.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}  /* 図版側を広いままに保つ */
.csplit.rev .csplit-fig{order:-1}            /* 図版を左に寄せる（交互配置用） */
/* 全幅の図を置くセクションの本文（幅はコンテナいっぱい＝読み幅を制限しない） */
.ctext{max-width:none}
.csplit-body .stext:first-child{margin-top:0}
/* 図は追従させない。図の列にツール等を併置すると、sticky だと図がずり下がって重なるため */
.csplit-fig .cfig{margin:0;max-width:none}
.csplit-fig .cfig figcaption{text-align:left;max-width:none;margin-inline:0}
@media (max-width:820px){
  /* .rev も併記する（メディアクエリは詳細度を上げないため、.csplit だけだと .csplit.rev に負ける） */
  /* minmax(0,1fr) にしないと、中身（min-width を持つ表など）が列幅を押し広げて横スクロールが出る */
  .csplit,.csplit.rev{grid-template-columns:minmax(0,1fr);gap:24px}
  .csplit.rev .csplit-fig{order:0}
}

/* 全幅ブロック（.csplit を使わず中タイトルから始まるブロック）は .csplit.hd と同じ間隔に */
.ctext.hd{margin-top:clamp(46px,5vw,68px)}
.ctext.hd > h3.shead:first-child{margin-top:0}

.cfig{margin:clamp(32px,4vw,44px) 0 0;max-width:920px}
.cfig.is-wide{max-width:none}   /* 横幅を使い切る図（4列の対応表など） */
.cfig svg{width:100%;height:auto;display:block}
.cfig svg text,.cfig svg tspan{letter-spacing:normal}  /* 図内テキストは字間を素のままに（配置ズレ防止） */
.cfig figcaption{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.85;text-align:center;max-width:760px;margin-inline:auto}
.cfig figcaption b{color:var(--teal-ink);font-weight:700}
/* ===== セクション下部のアクション：ツール／サービスを中央寄せ・520px・縦2段で ===== */
.actions{margin-top:clamp(34px,4vw,48px);display:flex;flex-direction:column;gap:16px;
  max-width:520px;margin-inline:auto}

.act-box{border-radius:16px;padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column}
.act-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.act-ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center}
.act-ic svg{width:20px;height:20px;display:block}
.act-hd .tt{display:flex;flex-direction:column;line-height:1.3}
.act-hd .tt .jp{font-weight:700;font-size:15px;letter-spacing:.02em}
.act-hd .tt .en{font:700 10px ui-monospace,Menlo,monospace;letter-spacing:.14em;margin-top:2px}
/* ツール見出し：カテゴリ「RDIツール」＋ツール名 */
.act-hd .tt .cat{font-weight:700;font-size:11px;letter-spacing:.1em;line-height:1;margin-bottom:5px}
.act-hd .tt .nm{font-weight:800;font-size:16px;letter-spacing:.01em;line-height:1.3}
.act-tool .tt .cat{color:var(--teal-dark)}
.act-tool .tt .nm{color:var(--ink)}
.act-note{font-size:14px;line-height:1.9;margin:0 0 18px}
.act-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.act-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 20px;border-radius:9px;font-weight:600;font-size:15px;text-align:center;line-height:1.4;
  transition:transform .18s ease,background .2s,color .2s,border-color .2s,box-shadow .2s}
.act-btn:active{transform:translateY(1px)}

/* ツール（体験）：淡ティール地・塗りボタン */
.act-tool{background:#eaf6f6;border:1px solid rgba(0,156,162,.22)}
.act-tool .act-ic{background:var(--teal);color:#fff}
.act-tool .tt .jp{color:var(--ink)}
.act-tool .tt .en{color:var(--teal-dark)}
.act-tool .act-note{color:var(--body)}
.act-tool .act-btn{background:var(--teal);color:#fff;box-shadow:var(--shadow-teal)}
@media (hover:hover){
.act-tool .act-btn:hover{background:var(--teal-dark)}
}

/* サービス（情報）：白地・アウトラインボタン */
.act-service{background:#fff;border:1px solid var(--line)}
.act-service .act-ic{background:var(--chip);color:var(--teal-dark)}
.act-service .tt .jp{color:var(--ink)}
.act-service .tt .en{color:var(--muted)}
.act-service .act-note{color:var(--body)}
.act-service .act-btn{background:#fff;border:1px solid var(--teal);color:var(--teal)}
@media (hover:hover){
.act-service .act-btn:hover{background:var(--teal-tint);color:var(--teal-ink)}
}

/* ============ フッター ============ */
/* 直前のセクション（記事末尾等）とフッターが近づきすぎないよう、全ページ共通で上に余白 */
.site-footer{background:#0a0a0a;color:#f0f0ee;margin-top:clamp(44px,5.5vw,72px)}
/* ただし全幅のCTA（アイボリー地）で終わるページは、白い帯が継ぎ目に見えるため余白を消す。
   その分の間はCTA側の padding-bottom が受け持つ（.sec-contact .wrap 参照） */
main:has(.sec-contact) + .site-footer{margin-top:0}
/* 4列目「サイトについて」＝プライバシーポリシー等の法務系ページ置き場。
   今後 特定商取引法に基づく表記・利用規約が増えてもここに足せる（著作権行だと増やせない）。
   ブランド列はタグライン1行分（全角21文字＝約314px）を必ず確保しつつ、
   リンクの3列は等幅にして見出しの左端を等間隔に並べる。
   ・auto（中身の幅）にすると列幅がバラバラになり、見出しの間隔が不揃いに見える
   ・均等割り（1fr）だけだとブランド列が305pxまで痩せ、タグラインが折り返す */
.site-footer .grid{max-width:1160px;margin-inline:auto;padding:60px 40px;
  display:grid;grid-template-columns:minmax(360px,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,40px)}
/* 中間幅では、ブランド列(360px)とリンク3列を横一列に置くと各列が窮屈になる。
   この幅ではブランドを上段に全幅で置き、リンク3列を下段に回す。 */
@media (min-width:821px) and (max-width:1119px){
  .site-footer .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer .footer-brand{grid-column:1 / -1;margin-bottom:12px}
}
.site-footer .brand-mark{width:58px;height:58px;display:block;border-radius:0;margin-bottom:20px}
.site-footer .brand-en{font-size:10.5px;letter-spacing:.16em;color:#b4b4b0}
.site-footer .brand-jp{font-size:15px;font-weight:700;color:#f5f5f3;margin-top:12px;letter-spacing:.02em}
/* 改行位置は HTML の <br> で決めている。max-width で読み幅を絞ると、その1行がさらに折り返す */
.site-footer .brand-note{font-size:14.5px;line-height:1.95;color:#d4d4d0;margin-top:16px}
.site-footer .col{font-size:14.5px;line-height:2.35}
/* 見出しは #fff だとリンク(#ededeb)より明るく、主従が逆転して見分けがつかない。
   ラベルは一段落とす（.brand-en / 著作権行と同じ #b4b4b0）。押せるリンク側を明るく残す。 */
.site-footer .col h4{font-weight:700;color:#b4b4b0;margin:0 0 12px;font-size:14px;letter-spacing:.02em}
.site-footer .col a{display:block;color:#ededeb;transition:color .18s}
@media (hover:hover){
.site-footer .col a:hover{color:var(--teal-bright)}
}
/* お知らせ下の設計導線（他メニューとやや異なる・控えめ強調） */
.site-footer .col a.foot-design{display:inline-block;margin-top:16px;
  color:var(--teal-bright);font-size:13.5px;font-weight:700;letter-spacing:.01em}
@media (hover:hover){
.site-footer .col a.foot-design:hover{color:#fff}
}
.site-footer .copy{border-top:1px solid rgba(255,255,255,.12)}
.site-footer .copy .inner{max-width:1160px;margin-inline:auto;padding:18px 40px;font-size:12.5px;color:#b4b4b0}

/* ============ レスポンシブ ============ */
@media (max-width:820px){
  .wrap{padding-inline:20px}
  /* ヘッダーの実高を70px＋境界線1pxに固定し、main の上余白（--header-h）と一致させる。
     padding だけだと中身（ロゴ46px／CTAボタン50.4px）で高さが変わり、
     78px との差がヒーローとの間の隙間として見えていた。 */
  :root{--header-h:71px}
  .site-header .wrap{padding-block:0;min-height:70px}
  /* 狭い画面ではモチーフを「背景の透かし」にする（2026-07-26・案3）。
     流し込みで最上部に置くと、それだけで108pxを使って見出しの開始位置が296pxまで下がるため、
     大きく薄く敷いて高さの消費をゼロにし、見出しを188pxから始める。
     ・文字より前に出ないよう、本文側に z-index を与えて上に重ねる（下の .kicker 等）
     ・右端は画面外へ逃がし、はみ出しは .sec-hero の overflow-x:clip で断つ */
  .sec-hero{overflow-x:clip}
  .hero-motif{position:absolute;top:-8px;right:-26px;width:214px;height:214px;
    margin:0;opacity:.2;z-index:0;pointer-events:none}
  .sec-hero > .wrap > .hero-intro,
  .sec-hero > .wrap > .kicker,
  .sec-hero > .wrap > .hero-h1,
  .sec-hero > .wrap > .hero-pillars{position:relative;z-index:1}
  .sec-hero .wrap{padding-block:32px 56px}
  .hero-pillars{grid-template-columns:1fr;gap:44px}
  /* 前置き：ロゴを小さく、紹介文の改行は自然な折り返しに任せる */
  .hero-intro{margin-bottom:32px;padding-bottom:22px}
  .hero-intro .hi-logo{height:32px;margin-bottom:12px}
  .hero-intro .hi-copy br{display:none}
  /* .sec-contact はこのブロックより後ろで定義しているため、ここに書いても効かない。
     モバイル指定はファイル末尾の CONTACT セクション内に置くこと */
  .sec-concept .wrap,.sec-service .wrap,.sec-news .wrap{padding-block:60px}
  /* サービスは2列だと窮屈なので1列に戻し、縦罫も消す */
  .svc-list{grid-template-columns:1fr}
  .svc-row:nth-child(odd){border-right:none}
  .svc-row{padding:22px 4px}
  .concept-grid{grid-template-columns:1fr;gap:20px}   /* カード同士なので間隔は詰める */
  .sec-platform .wrap{padding-block:60px}
  .tool-feature{grid-template-columns:1fr;gap:28px}
  .site-footer .grid{grid-template-columns:1fr;gap:32px;padding:48px 20px}
  .site-footer .copy .inner{padding:18px 20px}
  .page-body{padding-block:48px 64px}
}
@media (max-width:640px){
  .news-item{grid-template-columns:auto 1fr 20px;gap:10px 12px;padding:20px 4px}
  .news-item .date{grid-row:1;grid-column:1;align-self:center}
  .news-item .tag{grid-row:1;grid-column:2;justify-self:start}
  .news-item .ttl{grid-row:2;grid-column:1/-1}
  .news-item .arrow{grid-row:1;grid-column:3;align-self:center}
}
@media (max-width:560px){
  .site-nav{display:none}
}
/* ============ CONTACT（トップ最下部CTA） ============ */
.sec-contact{background:var(--ivory)}
/* 下は厚めに。フッターの margin-top を消した分をここで受け、地色をフッターまで繋げる */
.sec-contact .wrap{padding-block:84px 104px;text-align:center}
.sec-contact .en{font:700 12px ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--teal);margin-bottom:20px}
.sec-contact h2{font-weight:900;font-size:clamp(26px,3.6vw,38px);line-height:1.5;margin-bottom:20px;color:var(--ink)}
.sec-contact h2 .teal{color:var(--teal)}
.sec-contact p{max-width:560px;margin:0 auto 34px;font-size:18px;line-height:2.05;color:var(--body2)}
.contact-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact-btns .btn-solid{padding:15px 34px;border-radius:7px;font-weight:600;font-size:15px}
.contact-btns .btn-line{padding:15px 34px;border-radius:7px;font-weight:600;font-size:15px}
@media (max-width:820px){
  .sec-contact .wrap{padding-block:60px 76px}   /* 下はフッターの余白を消した分を受ける */
}
/* 見出しは1行に収める。既定の 26px だと最長「ご相談・お問い合わせはこちら。」（全角15字）が
   画面幅に入らず、句点だけが2行目に落ちてしまうため、画面幅に追従させて折り返させない。
   字間もここでは詰める（.03em は15字で約1文字分になるため）。 */
@media (max-width:520px){
  .sec-contact h2{font-size:clamp(18px,5.6vw,26px);letter-spacing:0;white-space:nowrap}
}

/* ============================================================
   モーション（控えめ）: スクロール連動リビール＋ヒーローSVGの組み上がり
   ・要素を隠すのは <html class="js-motion"> のときだけ（JS無効/reduced-motionでは全表示）
   ・prefers-reduced-motion: reduce では一切動かさない
   ============================================================ */

/* C1: ヘッダーのスクロール影（浮遊感） */
.site-header{transition:box-shadow .3s ease,background .3s ease}
.site-header.scrolled{background:rgba(255,255,255,.82);box-shadow:0 6px 24px rgba(20,60,62,.08)}

@media (prefers-reduced-motion: no-preference){

  /* A1: セクション／ブロックのフェード＋せり上がり */
  .js-motion [data-reveal]{opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .js-motion [data-reveal].in{opacity:1;transform:none}

  /* A2: リスト／グリッドの時間差登場（子要素を順に） */
  .js-motion .reveal-stagger > *{opacity:0;transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  .js-motion .reveal-stagger.in > *{opacity:1;transform:none}
  .js-motion .reveal-stagger.in > :nth-child(1){transition-delay:.00s}
  .js-motion .reveal-stagger.in > :nth-child(2){transition-delay:.08s}
  .js-motion .reveal-stagger.in > :nth-child(3){transition-delay:.16s}
  .js-motion .reveal-stagger.in > :nth-child(4){transition-delay:.24s}
  .js-motion .reveal-stagger.in > :nth-child(5){transition-delay:.32s}
  .js-motion .reveal-stagger.in > :nth-child(6){transition-delay:.40s}

  /* A3/A4: ヒーロー採用×育成モチーフが“組み上がる”
     土台の丸 → 破線リング → 採用の3点 → 育成の成長線 → 到達の丸 の順 */
  .js-motion .hero-motif :is(.m-bg,.m-ring,.m-dot,.m-dest,.m-dest-ring){
    transform-box:fill-box;transform-origin:center}
  .js-motion .hero-motif .m-bg{animation:motifFade .6s ease .15s both}
  .js-motion .hero-motif .m-ring{animation:motifFade .6s ease .28s both}
  .js-motion .hero-motif .m-dot{animation:motifPop .55s cubic-bezier(.34,1.56,.64,1) both}
  .js-motion .hero-motif .m-dot-1{animation-delay:.46s}
  .js-motion .hero-motif .m-dot-2{animation-delay:.54s}
  .js-motion .hero-motif .m-dot-3{animation-delay:.62s}
  .js-motion .hero-motif .m-grow{stroke-dasharray:1;stroke-dashoffset:1;
    animation:motifDraw .55s ease .78s both}
  .js-motion .hero-motif .m-dest-ring{animation:motifPop .5s cubic-bezier(.34,1.56,.64,1) 1.28s both}
  .js-motion .hero-motif .m-dest{animation:motifPop .5s cubic-bezier(.34,1.56,.64,1) 1.34s both}

  @keyframes motifFade{from{opacity:0}to{opacity:1}}
  @keyframes motifPop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}
  @keyframes motifDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  /* ニュースティッカーの「NEWS」を目立たせる（控えめに）
     ・ドットの輪が脈打つ＝更新がある合図
     ・文字の上を光が3秒に一度だけ流れる（常時光らせない） */
  .news-ticker .nt-label::before{animation:ntPulse 2.4s ease-out infinite}
  @keyframes ntPulse{
    0%{box-shadow:0 0 0 0 rgba(0,156,162,.5)}
    60%{box-shadow:0 0 0 8px rgba(0,156,162,0)}
    100%{box-shadow:0 0 0 0 rgba(0,156,162,0)}
  }
  /* background-size:260% のとき、地色が文字全体を覆うのは background-position 0〜100% の間だけ。
     この範囲を外すと覆われない文字が透明になって欠けるため、必ず 100%→0% で動かす。
     （100%＝光が文字の左外、0%＝右外。ループの戻りは画面外で起きるので目立たない） */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .news-ticker .nt-label{
      /* 白地では淡い色に振ると「薄れた」ように見えるので、光の頂点は彩度の高い方へ振る */
      background-image:linear-gradient(100deg,
        var(--teal) 0%,var(--teal) 42%,var(--teal-bright) 50%,var(--teal) 58%,var(--teal) 100%);
      background-size:260% 100%;background-repeat:no-repeat;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:ntShine 3s ease-in-out infinite}
    /* 3秒周期。うち 55%→95%（＝1.2秒）が実際に光が流れる時間で、残りは静止 */
    @keyframes ntShine{
      0%,55%{background-position:100% 0}
      95%,100%{background-position:0 0}
    }
  }
  /* ホバー時はもう一度光らせる（クリックできることの合図） */
  @media (hover:hover){ .news-ticker:hover .nt-label{animation-duration:1.5s} }

  /* 図版（下層ページの構造図など）が視界に入ると左→右に“描かれる” */
  .js-motion .reveal-draw svg{clip-path:inset(0 100% 0 0);
    transition:clip-path 1.5s cubic-bezier(.45,.05,.15,1)}
  .js-motion .reveal-draw.in svg{clip-path:inset(0 0 0 0)}
}

/* ============================================================
   方眼グリッド（“データ・設計”の含意を空気感で）
   トップのヒーローと、下層ページのタイトル部（クリーム地）にのみ適用。
   各要素の背景色は保持し、その上に淡い ink-teal のグリッド線を重ねる。
   ============================================================ */
.sec-hero,.page-hero{
  background-image:
    linear-gradient(rgba(11,61,63,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,61,63,.055) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:center top;
}

/* ===== モバイル：ハンバーガーメニュー（rdi-motion.js が要素を生成） ===== */
/* flex-direction:column が無いと3本の線が横並びになって「ハンバーガー」に見えない（要指定） */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;width:42px;height:42px;
  background:none;border:0;cursor:pointer;padding:0;margin-left:6px;flex:none}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle span+span{margin-top:5px}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm-overlay{position:fixed;inset:0;background:rgba(18,28,28,.42);display:none;z-index:190}
.mm-overlay.open{display:block;animation:mm-fade-in .22s ease}
/* 閉じている時は display:none でレイアウトから除外（画面外への transform 配置は fixed でも横スクロール領域を広げてしまうため） */
/* overscroll-behavior:contain＝パネル内のスクロールが端まで行っても、背後のページへ
   引き継がせない。body{overflow:hidden} は iOS Safari では無視されることがあり、
   メニューの上で指を動かすと裏のページが動いてしまうため、こちらで押さえる。 */
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);background:#fff;
  box-shadow:-10px 0 40px rgba(20,60,62,.14);
  z-index:200;display:none;flex-direction:column;padding:78px 26px 28px;
  overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.open{display:flex;animation:mm-fade-in .22s ease}
@keyframes mm-fade-in{from{opacity:0}to{opacity:1}}
.mobile-menu a{padding:15px 4px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);transition:color .18s}
@media (hover:hover){
.mobile-menu a:hover{color:var(--teal)}
}
.mobile-menu a.mm-cta{margin-top:22px;border:0;text-align:center;color:#fff;border-radius:8px;padding:15px}
body.mm-lock{overflow:hidden}
/* メニューを開いている間はヘッダーをパネルより前面に。でないと×ボタン（元ハンバーガー）が
   パネルの下に隠れて閉じられない。パネル側の padding-top:78px がヘッダー分の逃げ */
body.mm-lock .site-header{z-index:210}
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  /* ナビが消えると「ロゴ｜CTA｜ハンバーガー」の3つが均等に散り、CTAが中央に浮く。
     余白をすべてCTAの左に寄せて、CTAとハンバーガーを右にまとめる。 */
  .site-header .nav-cta{margin-left:auto}
}
@media (max-width:560px){ .site-header .nav-cta{display:none} }

/* ============ サービス個別ページ：2カラム（左＝サービス一覧ナビ／右＝本文） ============ */
.svc-detail{background:#fff}
.svc-detail-wrap{max-width:1160px;margin-inline:auto;padding:36px 40px 20px}
.svc-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:54px;align-items:start}

/* 左サイドナビ（採用/育成グループ・現在ページをハイライト） */
.svc-nav{position:sticky;top:calc(var(--header-h) + 18px)}
.svc-nav .grp{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-weight:800;font-size:15px;color:var(--ink);letter-spacing:.02em}
.svc-nav .grp.is-dev{margin-top:28px}
.svc-nav .grp .ic{flex:none;width:26px;height:26px;background:var(--chip);border-radius:7px;display:flex;align-items:center;justify-content:center}
.svc-nav .grp .ic svg{width:15px;height:15px;display:block}
.svc-nav ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line2)}
.svc-nav li a{display:flex;gap:9px;align-items:baseline;padding:8px 10px 8px 15px;margin-left:-1px;
  border-left:2px solid transparent;font-size:14.5px;line-height:1.55;color:var(--body);
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.svc-nav li a .n{flex:none;font:700 11px ui-monospace,Menlo,monospace;color:var(--muted)}
@media (hover:hover){
.svc-nav li a:hover{color:var(--teal-dark);background:#f5fafa}
}
.svc-nav li a.is-active{color:var(--teal-dark);font-weight:700;border-left-color:var(--teal)}
/* 最長ラベル「02 ビジネスシミュレーション開発」だけは1行維持のため据え置き（他は14.5px） */
.svc-nav li a[href="/service/business-simulation/"]{font-size:13.5px}
.svc-nav li a.is-active .n{color:var(--teal)}

/* 右本文 */
.svc-main{min-width:0}
.svc-main .breadcrumb{margin-bottom:14px}
.svc-main .sub-sec:first-of-type{margin-top:clamp(40px,4.5vw,58px)}
.svc-more{margin-top:8px;font-size:15px;color:var(--body)}
.svc-more a{color:var(--teal-ink);font-weight:700;border-bottom:1px solid var(--teal-bright)}
@media (hover:hover){
.svc-more a:hover{color:var(--teal-dark);border-color:var(--teal-dark)}
}

/* サービス提供の流れ（6ステップ・縦ステッパー） */
.svc-flow{list-style:none;margin:30px 0 0;padding:0}
.svc-flow li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:18px;padding-bottom:26px}
.svc-flow li:last-child{padding-bottom:0}
.svc-flow li:not(:last-child)::before{content:"";position:absolute;left:20px;top:46px;bottom:-4px;width:2px;background:var(--line2)}
.svc-flow .num{width:42px;height:42px;border-radius:50%;background:var(--chip);border:2px solid var(--teal);
  display:flex;align-items:center;justify-content:center;font:800 16px ui-monospace,Menlo,monospace;color:var(--teal);z-index:1}
.svc-flow .bd{padding-top:7px}
.svc-flow .bd b{display:block;font-size:17.5px;font-weight:800;color:var(--ink);line-height:1.45;margin-bottom:2px}
.svc-flow .bd .role{margin-top:6px;font-size:15px;color:var(--body);line-height:1.9}

@media(max-width:900px){
  .svc-detail-wrap{padding:28px 22px 16px}
  .svc-layout{grid-template-columns:1fr;gap:0}
  /* 横に並べられない幅では、サービス一覧ナビは本文の前に長々と積み上がるだけなので出さない。
     他サービスへはパンくずの「サービス」／ハンバーガーメニューから辿れる。 */
  .svc-nav{display:none}
}

/* ============ サービス個別ページ：中タイトルの6セクション構成 ============ */
.svc-block{margin-top:clamp(44px,5vw,64px);padding-top:clamp(38px,4.2vw,52px);border-top:1px solid var(--line)}
.svc-block:first-of-type{margin-top:clamp(38px,4vw,50px);padding-top:0;border-top:0}
.svc-h .en{display:block;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--teal);margin-bottom:9px}
.svc-h .jp{font-weight:900;font-size:clamp(21px,2.7vw,27px);line-height:1.4;color:var(--ink)}
.svc-h .jp .teal{color:var(--teal)}
.svc-block .lead-t{margin-top:14px;font-size:18px;line-height:2.05;color:var(--body)}
.svc-block .lead-t b{color:var(--ink);font-weight:700}

/* Googleスライド等の埋め込み（アスペクト比維持のレスポンシブ枠） */
.svc-slide{position:relative;width:100%;margin-top:26px;aspect-ratio:1280/749;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,45,.07);background:#f4fbfb}
.svc-slide iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.svc-slide-cap{margin-top:12px;font-size:13px;line-height:1.7;color:var(--muted,#7a8a8c)}
/* 埋め込みの下に置く「別タブで開く」ボタン。
   Googleスライドの埋め込みは「⋮ → 全画面表示に変更」で全画面にできるが、
   iPhone の Safari は要素の全画面API（Fullscreen API）に非対応なので効かない。
   そこで、全画面にできない環境だけにこのボタンを残す（rdi-motion.js が判定して
   .can-fullscreen を付けたら隠す）。JSが動かない環境では表示したまま＝逃げ道を消さない。 */
.svc-slide-open{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:11px 17px;border:1px solid var(--teal);border-radius:9px;background:#fff;
  font-size:14.5px;font-weight:700;line-height:1.4;color:var(--teal-dark)}
.svc-slide-cap + .svc-slide-open{margin-top:10px}
/* 全画面にできる環境（PC・Android・iPad）では出さない。
   ↓の狭幅指定より詳細度を高くしてあるので、スマホ幅でも確実に隠れる */
html.can-fullscreen .svc-slide-open{display:none}
@media (hover:hover){
.svc-slide-open:hover{background:var(--teal-tint);border-color:var(--teal-dark)}
}
/* 狭い画面では全幅の押しやすいボタンにする */
@media (max-width:560px){
  .svc-slide-open{display:flex;width:100%;justify-content:center;padding:13px 16px}
}
@supports not (aspect-ratio:1/1){.svc-slide{height:0;padding-top:58.5%}}

/* サービス個別ページ 冒頭のセクション目次（rdi-motion.js が生成） */
.svc-toc{margin-top:22px;padding:17px 20px 19px;background:#f4fbfb;border:1px solid var(--line-teal);border-radius:14px}
.svc-toc .toc-h{display:block;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;color:var(--teal);margin-bottom:13px}
/* 3列等幅グリッド（文字長によらず同幅・各セルにブロックとして目次項目） */
.svc-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(18px,2.6vw,36px)}
.svc-toc li{min-width:0}
.svc-toc a{display:flex;align-items:center;gap:11px;padding:13px 2px;
  border-bottom:1px solid var(--line-teal);font-size:15px;font-weight:700;color:var(--teal-dark);
  transition:color .2s ease,border-color .2s ease}
.svc-toc a .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-toc a .chev{width:13px;height:13px;flex:none;color:var(--teal);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.svc-toc .sec-no{width:22px;height:22px;font-size:11px}
@media (hover:hover){
.svc-toc a:hover{border-color:rgba(0,156,162,.5)}
.svc-toc a:hover .chev{transform:translateY(2px)}
.svc-toc a:hover .sec-no{background:var(--teal);color:#fff}
}
/* 下層ページ本文の先頭に置く目次（コンセプトページ）。前後に本文との間隔を取る。
   見出しが長いので2列にし、収まらないものは省略せず折り返す（3列だと大半が「…」になる） */
.svc-toc.is-page{margin-top:clamp(26px,3vw,34px);margin-bottom:clamp(48px,6vw,72px)}
.svc-toc.is-page ul{grid-template-columns:repeat(2,1fr)}
.svc-toc.is-page .tname{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55}
/* 折り返して高さが変わっても、同じ行の下罫を揃える */
.svc-toc.is-page li{display:flex}
.svc-toc.is-page li > a{flex:1}
@media(max-width:640px){.svc-toc.is-page ul{grid-template-columns:1fr}}
@media(max-width:720px){.svc-toc ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc-toc ul{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.svc-toc a .chev{transition:none}}

/* セクション項番バッジ（ティール枠の丸数字・目次と見出しで共用） */
.sec-no{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;border:1.5px solid var(--teal);background:#fff;
  font:800 12.5px ui-monospace,Menlo,monospace;color:var(--teal);transition:background .2s,color .2s}
/* 見出しに項番が付く場合：英字ラベルは左端のまま、丸数字は日本語タイトルの真左に置く */
.svc-h.has-no{display:grid;grid-template-columns:auto 1fr;column-gap:12px}
.svc-h.has-no .en{grid-column:1 / -1;grid-row:1}
.svc-h.has-no .sec-no{grid-column:1;grid-row:2;align-self:center}
.svc-h.has-no .jp{grid-column:2;grid-row:2}

/* 課題と解決（2カラムカード） */
.ps-grid{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.ps-grid{grid-template-columns:1fr}}
.ps-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,30px);box-shadow:var(--card-shadow)}
.ps-solution{border-color:var(--line-teal);background:#fbfefe}
.ps-lb{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;padding:4px 16px;border-radius:999px;margin-bottom:16px}
.ps-challenge .ps-lb{color:var(--body2);border:1px solid var(--line2);background:#faf9f7}
.ps-solution .ps-lb{color:#fff;background:var(--teal);border:1px solid var(--teal)}
.ps-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ps-card li{position:relative;padding-left:22px;font-size:17px;line-height:1.85;color:var(--body)}
.ps-challenge li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--muted)}
.ps-solution li::before{content:"";position:absolute;left:2px;top:.66em;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.ps-card li.ps-ph{color:var(--muted)}
.ps-card li.ps-ph::before{opacity:.5}
/* 成果物チップ */
/* FAQ（アコーディオン） */
.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:18px 4px;
  font-weight:700;font-size:17px;line-height:1.6;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:none;font:800 16px/1.7 ui-monospace,Menlo,monospace;color:var(--teal)}
.faq summary .mk{margin-left:auto;flex:none;align-self:flex-start;width:20px;height:20px;position:relative;margin-top:2px}
.faq summary .mk::before,.faq summary .mk::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--teal);border-radius:2px;transition:transform .22s ease}
.faq summary .mk::before{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq summary .mk::after{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq details[open] summary .mk::before{transform:translate(-50%,-50%) scaleY(0)}
.faq .a{padding:0 4px 20px 32px;font-size:17px;line-height:1.95;color:var(--body)}
.faq .a b{color:var(--ink);font-weight:800}
/* お問い合わせ（右カラム内CTA） */
.svc-contact-box{margin-top:22px;background:linear-gradient(118deg,#f3f9f9,#eaf6f6);
  border:1px solid rgba(0,156,162,.18);border-radius:16px;padding:clamp(24px,3vw,34px);text-align:center}
.svc-contact-box p{font-size:15.5px;line-height:1.95;color:var(--body);margin-bottom:20px}
.svc-contact-box .btn-solid{padding:15px 38px}
.svc-block .actions{margin-top:22px;margin-inline:0}

/* .svc-block 内でも .shead / .stext を使えるように（.sub-sec と同一スタイル） */
.svc-block h3.shead{margin-top:clamp(46px,5vw,64px);padding-left:14px;border-left:4px solid var(--teal);
  font-weight:900;font-size:clamp(18px,2.1vw,22px);line-height:1.5;color:var(--ink)}
.svc-block h3.shead + .stext{margin-top:12px}
/* スライド埋め込みの直後に中タイトルが来る場合は、区切りを明確にするため余白を広げる */
.svc-slide + h3.shead{margin-top:clamp(52px,5.6vw,76px)}
.svc-block .stext{font-size:18px;line-height:2.05;color:var(--body);margin-top:16px}
/* 図や表の直後に本文が続くと 16px では詰まって見える。キャプションがある図は
   figcaption 自身が間隔を作るので対象外（:has が効かない環境は従来どおり16px） */
.svc-block .cfig:not(:has(figcaption)) + .stext,
.svc-block .svc-tbl-wrap + .stext{margin-top:clamp(26px,3.2vw,38px)}
.svc-block .stext b{color:var(--ink);font-weight:700}
.svc-block .stext a,
.svc-block .faq .a a:not([class]),
.svc-block .svc-flow .role a:not([class]),
.svc-block .svc-deflist a:not([class]){color:var(--teal-ink);font-weight:700;border-bottom:1px solid var(--teal-bright);transition:color .18s,border-color .18s}
@media (hover:hover){
.svc-block .stext a:hover,
.svc-block .faq .a a:not([class]):hover,
.svc-block .svc-flow .role a:not([class]):hover,
.svc-block .svc-deflist a:not([class]):hover{color:var(--teal-dark);border-color:var(--teal-dark)}
}

/* 定義リスト（用語＋説明）：観点1の4定義・収集情報の種類 など */
.svc-deflist{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.svc-deflist li{position:relative;padding-left:22px;font-size:17px;line-height:1.95;color:var(--body)}
.svc-deflist li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;border-radius:2px;
  background:var(--teal);transform:rotate(45deg)}
.svc-deflist li b{color:var(--ink);font-weight:700;margin-right:.6em}
/* 「用語＋説明」ではなく、文中を強調しただけのリスト。bのうしろに空きを作らない */
.svc-deflist.is-plain li b{margin-right:0}
/* 見出し語を独立した行にする（説明が長く、用語と地の文が続くと読みにくいとき）。
   ブロックにするのは li の中の1つ目の b だけ＝文中の強調（2つ目以降の b）は行内のまま。
   margin-right は全部の b から外す（行内の強調のうしろに半角スペース状の空きが出るため） */
.svc-deflist.is-stack li b{margin-right:0}
.svc-deflist.is-stack li > b:first-child{display:block}

/* 定義など、本文から少し浮かせて見せたい短いかたまり */
.svc-defbox{margin-top:18px;background:#f4fbfb;border:1px solid var(--line-teal);border-left:4px solid var(--teal);
  border-radius:12px;padding:17px 22px 19px}
.svc-defbox .dt{font-size:14.5px;font-weight:800;letter-spacing:.02em;color:var(--teal-dark)}
.svc-defbox p{margin-top:7px;font-size:17px;line-height:1.95;color:var(--body)}
.svc-deflabel{margin-top:22px;font-size:16.5px;font-weight:800;color:var(--teal-dark);letter-spacing:.02em;
  padding-left:12px;border-left:3px solid var(--teal);line-height:1.6}
/* ティールの縦棒は .shead と同じ形なので、節見出しに見えてほしくない場所（表や図の題）では外す。
   縦棒つきの見出しが階層内に何度も出ると、どれが上位か読めなくなる（2026-08-03） */
.svc-deflabel.is-plain{padding-left:0;border-left:0}
/* 節の見出しとして使うとき。既定は「用語ラベル」なので本文（18px）より小さい。
   .shead の下にもう一段の見出しが要る場合だけ is-lg を付ける（06 インターン設計） */
.svc-defbox.is-lg .dt{font-size:20px}
/* 定義の原語併記（サービス14のマネジメントの定義など） */
.svc-defbox .en-quote{display:inline-block;margin-top:4px;font-size:16px;letter-spacing:.01em;color:var(--body2);font-style:italic}
.svc-defbox.is-lg .dt + *{margin-top:12px}
/* 図を入れる派生。.shead と同じティールの縦棒を持つ .svc-deflabel で見出しを立てると
   同じ節レベルに見えてしまうため、図ごと枠に入れて一段下だと分かるようにする（2026-08-03）。
   地は白：図の面（白・淡ティール）が defbox の淡ティール背景に沈むため。
   枠は装飾なし＝ティールの左罫を出さず、地の罫線1本だけにする（2026-08-03 ユーザー指示） */
.svc-defbox.is-fig{background:#fff;padding-bottom:14px;border:1px solid var(--line)}
.svc-defbox.is-fig .cfig{margin-top:10px}

/* サービスボックスを横並びに（観点2の関連サービス 03/04/05 等）。
   右カラムの全幅を使う（.actions の max-width:520px を打ち消す） */
.actions.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:none;margin-inline:0}
/* 関連サービスへの導線が2枚のとき（面接設計→選考設計・面接官トレーニング等） */
.actions.is-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:none;margin-inline:0;margin-top:24px}
/* 関連サービスへの導線が1枚だけのとき（12↔13の相互リンク等）。左寄せ・本文幅の半分強 */
.actions.is-single{margin-top:24px;max-width:520px;margin-inline:0}
.actions.is-grid .act-box,.actions.is-pair .act-box{padding:22px 20px}
.actions.is-grid .act-hd,.actions.is-pair .act-hd{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px}
.actions.is-grid .act-hd .tt .jp,.actions.is-pair .act-hd .tt .jp{font-size:16.5px}
.actions.is-grid .act-note,.actions.is-pair .act-note{font-size:15px;line-height:1.85;margin-bottom:16px}
.actions.is-grid .act-btn,.actions.is-pair .act-btn{padding:11px 12px;font-size:14.5px}
@media(max-width:760px){
  .actions.is-grid,.actions.is-pair{grid-template-columns:1fr}
  .actions.is-grid .act-hd,.actions.is-pair .act-hd{flex-direction:row;align-items:center}
}

/* レベル基準表（行動特性の評価基準・観点1「評価基準の設計」）。狭幅では横スクロール */
.lvl-rubric{margin:24px 0 0}
.lvl-scroll{overflow-x:auto}
.lvl-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:660px}
.lvl-table thead td.corner{border:none;width:36px}
.lvl-table thead th{text-align:center;vertical-align:top;padding:0 8px 14px;border:none}
.lvl-table thead th .lv{display:block;font-weight:900;font-size:15px;color:var(--teal-dark);letter-spacing:.02em}
.lvl-table thead th .nm{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5}
.lvl-table tbody th.rowlabel{width:36px;border:none;vertical-align:middle;
  writing-mode:vertical-rl;white-space:nowrap;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.lvl-table tbody td{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  border-left:1.2px dashed #aeb4b4;padding:14px 9px;font-size:13.5px;line-height:1.95;color:var(--body);vertical-align:top}
.lvl-table tbody td:nth-of-type(1){border-left:1.5px solid var(--ink)}
.lvl-table tbody td:last-child{border-right:1.5px solid var(--ink)}
.lvl-rubric figcaption{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}

/* 見出し階層：中（.svc-h＝区切り線つきの大セクション）＞ 小（.svc-point＝観点1/2）＞
   小小（.shead＝各観点の中の見出し）。.is-sub は観点を概要セクションに従属させる（区切り線なし） */
.svc-block.is-sub{margin-top:clamp(28px,3vw,40px);padding-top:0;border-top:0}
.svc-point{margin-top:clamp(28px,3.2vw,40px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-weight:900;font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--ink)}
.svc-point .pt{flex:none;font:800 13px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.03em;color:#fff;
  background:var(--teal);border-radius:8px;padding:6px 12px}
/* 記号だけの観点（A・B…）はバッジではなく丸印にする */
.svc-point.is-mark{align-items:center;gap:14px}
.svc-point.is-mark .pt{width:38px;height:38px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:900 18px/1 "Noto Sans JP",system-ui,sans-serif;letter-spacing:0}
.svc-block.is-sub > .lead-t:first-of-type,.svc-point + .lead-t{margin-top:14px}

/* Aさん・Bさんのステータス値比較（採用基準の決定） */
.persona-cmp{margin:22px 0 0;display:flex;flex-direction:column;gap:26px}
.persona-cmp .pcmp-hd{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.persona-cmp .pcmp-ic{width:42px;height:42px;flex:none;display:block}
.persona-cmp .pcmp-nm{font-size:15.5px;color:var(--body);font-weight:600}
.persona-cmp .pcmp-nm b{color:var(--ink);font-weight:800;font-size:16.5px;margin-right:.1em}
.stat-table{border-collapse:collapse;width:100%;table-layout:fixed}
.stat-table th{background:#eef4f4;border:1px solid var(--line);padding:11px 6px;font-size:13.5px;font-weight:700;color:var(--ink);text-align:center}
.stat-table td{border:1px solid var(--line);padding:15px 6px;font-size:22px;font-weight:900;color:var(--teal-dark);text-align:center;line-height:1}
.persona-cmp figcaption{margin-top:4px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}

/* RDIの特徴：コンセプトボタン（トップと同デザイン）／書籍ボックス／成果物画像 */
.svc-block .btn-concept{max-width:440px;margin-top:16px}
.svc-block .concept-book{margin-top:16px}
.doc-figure{margin-top:16px}
.doc-figure .doc-img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 2px 12px rgba(20,60,62,.09)}
.doc-figure figcaption{margin-top:13px;font-size:12.5px;color:var(--muted);text-align:center}


/* 一覧表（研修の構成案・要項など、行数のある表）。
   狭幅では横スクロールし、rdi-motion.js が data-hscroll にヒントを差し込む */
.svc-tbl-wrap{margin-top:22px;overflow-x:auto}
.svc-table{border-collapse:collapse;width:100%;min-width:660px;background:#fff}
.svc-table thead th{background:#eef4f4;border:1px solid var(--line);padding:12px 14px;
  font-size:14px;font-weight:800;color:var(--ink);text-align:left;white-space:nowrap}
.svc-table td{border:1px solid var(--line);padding:12px 14px;font-size:15.5px;line-height:1.75;
  color:var(--body);vertical-align:top}
.svc-table td.ttl{font-weight:700;color:var(--ink);white-space:nowrap}
.svc-table td.sty{font-size:14.5px;white-space:nowrap}
.svc-table td.num{text-align:right;white-space:nowrap}
.svc-table td.lv{white-space:nowrap;text-align:center}
@media (hover:hover){
.svc-table tbody tr:hover{background:#f8fdfd}
}
/* 表内の難易度バッジ（易しい／やや難しい／難しい） */
.lv-pill{display:inline-block;font-size:13px;font-weight:800;line-height:1;padding:7px 12px;border-radius:999px;
  background:#eef4f4;color:var(--body)}
.lv-pill.is-2{background:#cfeaeb;color:#0e4a4d}
.lv-pill.is-3{background:#00686d;color:#fff}
.svc-table tfoot td{background:#f4fbfb;font-weight:700;color:var(--teal-dark)}
.svc-tbl-note{margin-top:11px;font-size:13px;color:var(--muted);line-height:1.85}
/* 定義や引用の出典（サービス14のマネジメントの定義など）。枠の直下に小さく置く */
.svc-src{margin-top:9px;padding-left:2px;font-size:13.5px;color:var(--muted);line-height:1.8}

/* 3つ横並びの説明カード（講義／個人ワーク／グループ共有 など）。狭幅で1列。
   順番のある手順ではないので番号は振らない（`.st` を付けたときだけラベルが出る） */
.svc-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-steps li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px;
  box-shadow:var(--card-shadow)}
.svc-steps .st{display:inline-block;font:800 11px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.12em;
  color:#fff;background:var(--teal);border-radius:7px;padding:5px 10px}
.svc-steps b{display:block;margin-top:12px;font-size:17px;font-weight:800;color:var(--ink);line-height:1.6}
.svc-steps li > b:first-child{margin-top:0}
.svc-steps p{margin-top:9px;font-size:15px;line-height:1.85;color:var(--body)}
@media(max-width:760px){.svc-steps{grid-template-columns:1fr}}
/* A・B・C を図と同じ○囲みで示す派生（06 インターン設計）。
   マークは左上に単独で置き（display:flex でブロック化）、タイトルは次の行に落ちる。
   .svc-steps b の margin-top:12px が、b が :first-child でなくなることで自動的に効く */
.svc-steps .mk{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:#eef2f2;border:1px solid var(--line);font:700 18px/1 'Noto Sans JP',sans-serif;color:#5b6b78}
.svc-steps .mk.is-key{background:#fff;border-color:#0aa0a6;color:var(--teal-dark)}
/* 表の中で同じ A・B・C を示すときの小型版（06 の構成例）。行内に置くので inline-flex。
   vertical-align は数値でずらさず middle にする（数値だと文字サイズが変わるたびに合わなくなる） */
.svc-table .mk{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;
  border-radius:50%;background:#eef2f2;border:1px solid var(--line);
  font:700 13.5px/1 'Noto Sans JP',sans-serif;color:#5b6b78;margin-right:9px;vertical-align:middle}
.svc-table .mk.is-key{background:#fff;border-color:#0aa0a6;color:var(--teal-dark)}
.svc-steps.is-abc li{padding:20px 18px 22px}
.svc-steps.is-abc b{font-size:16px;letter-spacing:-.01em}
/* 3列のままだとタイトルが折り返す幅では1列にする。
   901px 未満はサイドバーが消えて本文が広がるため、3列に戻して問題ない */
@media(min-width:901px) and (max-width:1134px){.svc-steps.is-abc{grid-template-columns:1fr}}

/* 図キャプションを本文並みに読ませたいとき（説明を兼ねるキャプション） */
.cfig figcaption.is-lg{font-size:15.5px;line-height:1.95;max-width:none}
/* PCでは1行に収めたいキャプション。狭い画面では素直に折り返す */
@media(min-width:900px){ .cfig figcaption.is-oneline{white-space:nowrap;font-size:15px} }


/* サービス個別ページ「自分で設計してみる」ツールカード
   （説明文=全幅／下段2カラム：左=できること・右=スクショ／ラベルはベージュ枠の外） */
.svc-tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;box-shadow:var(--card-shadow)}
.svc-block .svc-tool{margin-top:16px}
.svc-block .svc-tool + .svc-tool{margin-top:22px}   /* カードを続けて置くときは少し離す */
.svc-tool .cat{display:inline-block;font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--teal);margin-bottom:8px}
.svc-tool h3{font-weight:700;font-size:clamp(19px,2.3vw,23px);line-height:1.4;color:var(--ink);margin-bottom:6px}
.svc-tool .role{font-weight:700;font-size:15px;color:var(--teal-dark);margin-bottom:14px}
.svc-tool .desc{font-size:17px;line-height:1.95;color:var(--body)}
.svc-tool-cols{display:grid;grid-template-columns:1fr minmax(250px,330px);gap:28px;align-items:start;margin-top:20px}
.svc-tool-left{min-width:0}
.svc-tool .gain-lb{display:inline-block;margin-bottom:9px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  color:var(--teal-dark);background:var(--teal-tint);border-radius:6px;padding:4px 10px;line-height:1.5}
.svc-tool .gain-box{background:var(--ivory);border-radius:10px;padding:14px 16px;font-size:14.5px;line-height:1.85;color:var(--body2)}
.svc-tool .go{margin-top:18px;padding:12px 24px}
.svc-tool .go span{font-size:15px}
.svc-tool-shot{min-width:0}
.svc-tool-shot img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(20,60,62,.10)}
@media(max-width:760px){ .svc-tool-cols{grid-template-columns:1fr;gap:20px} }

/* ===== 能力と適した評価手法の対応表（採用コンセプト 4-1）=====
   列が多く文字量も多いため、狭幅では横スクロールさせる。
   最右列「適した評価手法」＝この表の結論なので、ティールで色分けして際立たせる。 */
.cap-scroll{overflow-x:auto}
.cap-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:920px}
/* 列幅とフォントサイズは実測で決定：16.5px／この配分が、各行の行数が最小のまま入る最大サイズ */
.cap-table col.c-cat{width:11%}
.cap-table col.c-ex{width:15%}
.cap-table col.c-desc{width:47%}
.cap-table col.c-method{width:27%}
.cap-table th,.cap-table td{border:1px solid var(--line2);padding:14px 15px;
  text-align:left;vertical-align:top;font-size:16.5px;line-height:1.85}
.cap-table thead th{background:#f4f2ec;color:var(--ink);font-weight:800;line-height:1.5;white-space:nowrap}
.cap-table tbody th{background:#faf9f6;color:var(--ink);font-weight:800}
.cap-table tbody td{color:var(--body)}
/* 最右列（結論） */
.cap-table thead th:last-child{background:var(--teal);color:#fff;border-color:var(--teal)}
.cap-table td.method{background:#f2fbfb;color:var(--teal-dark);font-weight:700;
  border-left:2px solid var(--teal);border-right:2px solid var(--teal)}
.cap-table tbody tr:last-child td.method{border-bottom:2px solid var(--teal)}

/* ===== 面接の誤認の落とし穴／行動観察で回避できる理由（採用コンセプト 4-2）=====
   2カラム本文の図版側（約550px）に入るため、フォントと列幅は実測で調整。 */
.pit-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:420px}
/* 14px／32% は実測で決定：1つ目の表の高さが左の本文とほぼ揃う（546px 対 536px） */
.pit-table col.c-pit{width:32%}
.pit-table col.c-body{width:68%}
.pit-table th,.pit-table td{border:1px solid var(--line2);padding:11px 13px;
  vertical-align:middle;font-size:14px;line-height:1.75}
.pit-table thead th{background:#f4f2ec;color:var(--ink);font-weight:800;text-align:center;line-height:1.5}
.pit-table tbody th{background:#faf9f6;color:var(--ink);font-weight:700;text-align:center}
.pit-table tbody td{color:var(--body);text-align:left;vertical-align:top}
/* 回避できる理由の表：結論側の列をティールで色分け（4-1 の表と同じ考え方） */
.pit-table.is-answer thead th:last-child{background:var(--teal);color:#fff;border-color:var(--teal)}
.pit-table.is-answer tbody td{background:#f2fbfb;color:var(--teal-dark);font-weight:700;
  border-left:2px solid var(--teal);border-right:2px solid var(--teal)}
.pit-table.is-answer tbody tr:last-child td{border-bottom:2px solid var(--teal)}

/* ===== 設計書の目次例（採用コンセプト 4-3）=====
   実際のドキュメントの目次に見えるよう、白いカードに連番付きで並べる。 */
.doc-toc{list-style:none;counter-reset:dt;margin:0;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow)}
.doc-toc li{counter-increment:dt;position:relative;padding-left:2.5em;
  font-size:15.5px;line-height:1.75;color:var(--body)}
.doc-toc li + li{margin-top:10px}
.doc-toc li::before{content:counter(dt) ".";position:absolute;left:0;width:1.9em;
  text-align:right;font:700 14px/1.95 ui-monospace,Menlo,monospace;color:var(--teal)}

/* 記事本文内のボタン列（プレスリリース／Amazon 等） */
.article-btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 34px}
.article-btns .btn-solid,.article-btns .btn-line{padding:13px 26px;font-size:15.5px}

/* 記事本文中：外部記事へのカード型リンク（共通部品）
   既定は画像を使わず、サイト名・タイトル・URLで構成。ニュース記事で使い回す。
   書影など「見せたほうがクリックにつながる」ものだけ .has-thumb を足す（下部に定義）。
   ※左のティール縦棒は中タイトル(.article-body h2)の縦棒と重なるため付けない。
     サイト名はチップ、枠は全周1pxで落ち着かせ、ホバーで浮かせる。 */
.article-linkcard{display:block;position:relative;margin:16px 0 30px;
  padding:24px 26px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(160deg,#ffffff 0%,#f7fbfb 100%);
  box-shadow:var(--card-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media (hover:hover){
.article-linkcard:hover{transform:translateY(-2px);border-color:var(--line-teal);
  box-shadow:0 14px 32px rgba(0,156,162,.15)}
}
/* サイト名はチップ（バッジ）で存在感を出す */
.article-linkcard .lc-site{display:inline-flex;align-items:center;gap:6px;margin-bottom:13px;
  padding:5px 12px;border-radius:999px;background:var(--chip);
  font:700 11.5px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--teal-ink)}
.article-linkcard .lc-site svg{width:14px;height:14px;flex:none}
.article-linkcard .lc-title{display:block;font-size:clamp(16.5px,2vw,18.5px);font-weight:800;
  line-height:1.55;color:var(--ink);transition:color .2s ease}
@media (hover:hover){
.article-linkcard:hover .lc-title{color:var(--teal-dark)}
}
.article-linkcard .lc-sub{display:block;margin-top:7px;font-size:14px;font-weight:500;
  line-height:1.8;color:var(--body2)}
.article-linkcard .lc-foot{display:flex;align-items:center;gap:10px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.article-linkcard .lc-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--muted)}
.article-linkcard .lc-arrow{flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--chip);color:var(--teal);font-size:14px;transition:background .2s ease,color .2s ease,transform .2s ease}
@media (hover:hover){
.article-linkcard:hover .lc-arrow{background:var(--teal);color:#fff;transform:translateX(2px)}
}
/* 書影つきの派生。DOMの順序は lc-thumb → lc-site → lc-title → lc-sub → lc-foot。
   ⚠️ Amazon等の画像を直リンクせず、自社に置いた画像を使うこと。 */
/* 3行目を 1fr にして、書影のほうが背が高いときの余りを「サブテキストの下」に
   逃がす。これをしないと余白が行間に配られ、タイトルとサブが離れて見える。 */
.article-linkcard.has-thumb{display:grid;grid-template-columns:104px 1fr;
  grid-template-rows:auto auto 1fr auto;column-gap:24px}
.article-linkcard.has-thumb .lc-thumb{grid-column:1;grid-row:1 / span 3;align-self:start}
.article-linkcard.has-thumb .lc-site{grid-column:2;grid-row:1;justify-self:start}
.article-linkcard.has-thumb .lc-title{grid-column:2;grid-row:2}
.article-linkcard.has-thumb .lc-sub{grid-column:2;grid-row:3;align-self:start}
.article-linkcard.has-thumb .lc-foot{grid-column:1 / -1;grid-row:4}
.article-linkcard .lc-thumb img{display:block;width:100%;height:auto;border-radius:4px;
  border:1px solid var(--line);box-shadow:0 4px 14px rgba(26,26,24,.12)}
@media(max-width:600px){
  .article-linkcard.has-thumb{grid-template-columns:74px 1fr;column-gap:16px}
}
@media(max-width:640px){.article-linkcard{padding:20px 18px}}

/* 記事本文中の引用（外部記事からの引用囲み・引用符つき） */
.article-quote{margin:14px 0 30px;padding:30px 32px 26px;
  background:#fafcfc;border:1px solid var(--line);border-radius:12px;position:relative}
/* 左上に大きな引用符 */
.article-quote::before{content:"\201C";position:absolute;top:2px;left:18px;
  font:900 60px/1 Georgia,"Times New Roman",serif;color:var(--teal);opacity:.28}
.article-quote blockquote{margin:0;position:relative;z-index:1}
.article-quote blockquote p{font-size:16px;line-height:2;color:var(--body2);margin-bottom:1.4em}
.article-quote blockquote p:last-child{margin-bottom:0}
.article-quote figcaption{margin-top:16px;font-size:12px;color:var(--muted);text-align:right;opacity:.85}
@media(max-width:640px){.article-quote{padding:24px 20px 20px}}

/* 記事末尾のロゴ署名（周年のお知らせ等） */
.brand-sign{text-align:center;margin-top:44px}
.brand-sign .lockup{display:inline-block;width:340px;max-width:80%;height:auto}

/* ============================================================
   ツールカード（.tool-feature ／ .svc-tool）＝「押せる」ことを伝える
   ・カード全体をクリック可能に（ボタンの ::after を全面へ伸ばす＝HTML変更なし。
     どちらのカードもリンクは1つだけなので、この方法が使える）
   ・PC＝カード全体のホバーで浮き上がり、ボタンも同時に反応する
   ・スマホ＝ホバーが無いので、CTAを全幅の塗りボタンにして3.4秒ごとに脈打たせる
   ※ .tool-feature は data-reveal を持つ。モーション定義（.js-motion [data-reveal]）と
     同じ詳細度なので、後ろに書かないと transform / transition を上書きされる。
     このブロックを必ずファイル末尾側に置くこと。
   ============================================================ */
.sec-platform .tool-feature,.svc-block .tool-feature,.svc-tool{position:relative;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
/* 当たり判定をカード全面に広げる */
.tool-feature .btn-line::after,.svc-tool .go::after{content:"";position:absolute;inset:0;z-index:2}
/* ★重要：ボタン自身に transform を掛けないこと。
   transform が付いた要素は、その子（::after）の絶対配置の基準ボックスになる。
   .btn-line:active{transform:translateY(1px)} のままだと、マウスを押した瞬間に
   全面へ広げた当たり判定がボタンサイズまで縮み、指を離す位置が別要素になって
   クリックが成立しない（＝ボタン以外を押しても遷移しない）。
   押した感触はカード側の :active で出しているので、ボタンは動かさない。 */
.tool-feature .btn-line:active,.svc-tool .go:active{transform:none}
@media (hover:hover){
.sec-platform .tool-feature:hover,.svc-block .tool-feature:hover,.svc-tool:hover{
  transform:translateY(-3px);border-color:rgba(0,156,162,.28);box-shadow:0 18px 38px rgba(20,60,62,.12)}
}
.sec-platform .tool-feature:active,.svc-block .tool-feature:active,.svc-tool:active{transform:translateY(-1px)}
/* カードのどこにホバーしてもボタンが反応する＝押せる場所だと分かる */
@media (hover:hover){
.tool-feature:hover .btn-line,.svc-tool:hover .go{background:var(--teal-tint);
  border-color:var(--teal);color:var(--teal-ink)}
}

@media(max-width:820px){
  /* 縦積みになると枠線だけのボタンは埋もれるので、全幅の塗りボタンにする */
  .tool-feature .btn-line,.svc-tool .go{display:flex;width:100%;justify-content:center;
    padding:15px 20px;font-size:15.5px;
    background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:var(--shadow-teal)}
}
/* 3.4秒に一度だけ、輪が広がって「ここが押せる」と知らせる（常時は光らせない） */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .tool-feature .btn-line,.svc-tool .go{animation:toolCtaPulse 3.4s ease-out infinite}
}
@keyframes toolCtaPulse{
  0%,70%{box-shadow:0 8px 22px rgba(0,156,162,.28),0 0 0 0 rgba(0,156,162,.42)}
  88%,100%{box-shadow:0 8px 22px rgba(0,156,162,.28),0 0 0 12px rgba(0,156,162,0)}
}

/* ============================================================
   サービス／ツールのバナー（.act-box）＝カード全体を押せるようにする
   ・上のツールカードと同じ手法（ボタンの ::after を全面へ伸ばす＝HTML変更なし）
   ・ただし当たり判定を全面に広げられるのは「リンクが1本だけ」のカードに限る。
     採用コンセプト05の「サービス」カードだけはボタンが2本あり、どちらへ飛ぶか
     決められないので :has(:only-child) で除外する（従来どおりボタンだけが当たり判定）。
     senko-shindan の JS 生成カードは必ず1本なので、この指定で自動的に対象になる。
   ・ボタン自身には transform を掛けない（理由は上のツールカードのコメント参照）
   ============================================================ */
.act-box:has(.act-actions > .act-btn:only-child){position:relative;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.act-box:has(.act-actions > .act-btn:only-child) .act-btn::after{content:"";position:absolute;inset:0;z-index:2}
.act-box:has(.act-actions > .act-btn:only-child) .act-btn:active{transform:none}
@media (hover:hover){
.act-box:has(.act-actions > .act-btn:only-child):hover{
  transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,60,62,.12)}
}
.act-box:has(.act-actions > .act-btn:only-child):active{transform:translateY(-1px)}
/* カードのどこにホバーしてもボタンが反応する＝押せる場所だと分かる */
@media (hover:hover){
.act-service:has(.act-actions > .act-btn:only-child):hover{border-color:rgba(0,156,162,.28)}
.act-service:has(.act-actions > .act-btn:only-child):hover .act-btn{
  background:var(--teal-tint);color:var(--teal-ink)}
.act-tool:has(.act-actions > .act-btn:only-child):hover{border-color:rgba(0,156,162,.45)}
.act-tool:has(.act-actions > .act-btn:only-child):hover .act-btn{background:var(--teal-dark)}
}

@media(max-width:820px){
  /* ホバーが無いので、白地のサービスカードのボタンは塗りにして「押せる」ことを示す */
  .act-service:has(.act-actions > .act-btn:only-child) .act-btn{
    background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:var(--shadow-teal)}
}

/* ============================================================
   横スクロールのヒント（画面幅に収まらない表・図）
   rdi-motion.js が、実際に横へはみ出している要素にだけ差し込む。
   対象＝.cap-scroll / .lvl-scroll / .chart-wrap ／ 任意の要素は data-hscroll を付ける。
   ・スクロール枠の中に position:sticky で置くので、横スクロールしても位置がずれない
   ・1度でも横に動かしたら消える（用が済んだら邪魔しない）
   ============================================================ */
.scroll-hint{position:sticky;left:0;z-index:4;width:100%;height:0;
  display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.scroll-hint .sh-pill{display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px 9px 13px;border-radius:999px;
  background:rgba(11,61,63,.86);color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 6px 18px rgba(20,60,62,.28);
  opacity:0;transform:translateY(-16px) scale(.94);
  transition:opacity .35s ease,transform .35s ease}
.scroll-hint.on .sh-pill{opacity:1;transform:translateY(-16px) scale(1)}
.scroll-hint .sh-ic{width:36px;height:20px;flex:none;display:block}
@media (prefers-reduced-motion: no-preference){
  .scroll-hint.on .sh-ic{animation:shSwipe 2.2s ease-in-out infinite}
  @keyframes shSwipe{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
}

/* ============================================================
   上に戻る（スマホのみ・rdi-motion.js がボタンを生成）
   ・長い下層ページは目次が先頭にしかないため、下まで読んだ後に戻る手段がない
   ・PCはスクロールバーで戻れるので出さない（820px以下だけ）
   ・1.5画面ぶん下へ動いたら現れる（JS が .on を付ける）
   ・iPhone のホームバーに重ならないよう env(safe-area-inset-bottom) を足す
   ・唯一の強い塗りボタンは「お問い合わせ」に残したいので、こちらは白地＋ティール枠
   ============================================================ */
.to-top{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;padding:0;border:1px solid var(--teal);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(20,60,62,.16);cursor:pointer;z-index:150;
  display:none;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease}
.to-top svg{width:20px;height:20px;fill:none;stroke:var(--teal-dark);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top.on:active{transform:translateY(1px)}
@media (hover:hover){
.to-top:hover{background:#fff;border-color:var(--teal-dark)}
}
@media (max-width:820px){ .to-top{display:inline-flex} }
/* ハンバーガーを開いている間は隠す（パネルの手前に浮いて見えないように） */
body.mm-lock .to-top{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .to-top{transition:none} }

/* ============ 利用規約の出典表記ブロック（/terms/ 第4条） ============ */
.tm-cite{background:var(--tint,#f5fbfb);border:1px solid var(--line-teal);border-radius:14px;padding:20px 22px;margin:0 0 1.6em}
.tm-cite-lb{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--teal-dark);margin:0 0 8px}
.tm-cite-ex{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.8}
.tm-cite-nt{font-size:13.5px;line-height:1.9;color:var(--body2);margin:0}

/* ============ コピーボタン（サイト共通・rdi-copy.js とセット） ============
   考え方は .btn-line と同じ＝ティールの輪郭＋ホバーでわずかに浮く。
   押すと塗りに反転して「コピーしました」に変わる（アイコンも切り替わる）。
   :hover は必ず (hover:hover) の中に置く＝タッチ端末で押しっぱなしに見えるのを防ぐ。 */
.rdi-copy{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-teal);background:#fff;color:var(--teal-dark);
  border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:7px 12px;cursor:pointer;white-space:nowrap;flex:0 0 auto;-webkit-appearance:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease,
             transform .18s ease,box-shadow .2s ease}
.rdi-copy .ic{width:14px;height:14px;flex:0 0 auto}
.rdi-copy .ic-d,.rdi-copy .tx-done{display:none}
@media (hover:hover){
  .rdi-copy:hover{background:var(--teal-tint);border-color:var(--teal);color:var(--teal);
    box-shadow:0 6px 16px rgba(0,156,162,.16);transform:translateY(-1px)}
}
.rdi-copy:active{transform:translateY(0)}
.rdi-copy:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* コピー完了 */
.rdi-copy.is-done{background:var(--teal);border-color:var(--teal);color:#fff;
  box-shadow:var(--shadow-teal);transform:translateY(0)}
.rdi-copy.is-done .ic-c,.rdi-copy.is-done .tx{display:none}
.rdi-copy.is-done .ic-d,.rdi-copy.is-done .tx-done{display:inline}
@media (hover:hover){ .rdi-copy.is-done:hover{background:var(--teal);color:#fff} }
/* 大きい版（「すべてまとめてコピー」など、単独で置くとき） */
.rdi-copy.is-lg{font-size:14px;padding:11px 20px;border-radius:10px;gap:8px}
.rdi-copy.is-lg .ic{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){ .rdi-copy{transition:none} }

/* ============ ツール結果画面の出典表記（規約 第4条とセット） ============
   社外公表・商用利用のときにコピーして使ってもらう。社内利用では不要なので、
   結果を邪魔しないよう控えめに置く（コピーボタンは共通の .rdi-copy）。 */
.rdi-attrib{margin:26px auto 0;max-width:860px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.rdi-attrib .at-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.rdi-attrib .at-lb{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--teal-dark)}
.rdi-attrib .at-txt{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.7}
.rdi-attrib .at-note{font-size:12.5px;line-height:1.85;color:var(--body2);margin:0}
.rdi-attrib .at-note a{color:var(--teal);font-weight:600}