@charset "UTF-8";
/**
 * shigo-toiro.css — /forthecompany/shigo-toiro（SHIGO十色）
 *
 * ==================================================================
 * 一次資料
 * ==================================================================
 *   1. 移植元HTML
 *      outputs/全社/WordPress移行/抽出データ/shigo_toiro_lp/index.html（649行）
 *   2. 移植元CSS ★index.html にインラインの <style> は無い。外部 styles.css
 *      index.html は `<link rel="stylesheet" href="styles.css">` で外部参照している。
 *      抽出データのフォルダに styles.css が入っていなかったため、公開中のLP
 *      https://shigo-toiro-lp.pages.dev/styles.css から取得した（HTTP 200・882行・60,509バイト）。
 *      本ファイルの数値はすべてその実CSSからの逐語。丸めや「だいたい同じ」で置き換えていない。
 *   3. theme/assets/css/tokens.css（フォント／カラートークン）
 *   4. theme/assets/css/base.css（リセット・BP運用規約・--o-header-h）
 *   5. memory/reference_mirevalue_brand.md（ブランド体系：SHIGO十色＝社内向け）
 *
 * ==================================================================
 * ブレークポイント — LP は別の値だったので当て直している（重要）
 * ==================================================================
 * 全ページ共通BPは 1140 / 840 / 540 / 320（すべて max-width・base.css 第0章）。
 * LP側の実測MQは **1000 / 920 / 680 / 640** の4本で、1本も一致しない。対応表:
 *
 *   LP @1000px → 本CSS @1140px
 *       中身: グリッドの段組み解除（hero / cards-3 / cost / criteria / diffs /
 *             compare / proc / company / contact）＋ section padding 104→80px。
 *       1140 へ繰り上げたことで、1001〜1140px の範囲が LP より1段早く
 *       1カラムになる。段組みが崩れる方向の変化ではないため許容した。
 *
 *   LP @920px  → 移植対象外（.part-deco の非表示指定のみ。後述「移植しなかったもの」3）
 *
 *   LP @680px  → 本CSS @840px（.st-sgroup の 220px+1fr → 1カラム）
 *       681〜840px でも1カラムになる。LP では 220px 固定列＋タグ列が
 *       この幅でかなり窮屈だったため、@tablet で落とす方が素直と判断した。
 *
 *   LP @640px  → 本CSS @540px
 *       中身: モバイル用のタイポ縮小と1カラム化。
 *       ★541〜840px の帯では LP の @640 ブロックが効かなくなる。
 *         この帯で2カラムのまま残るのは .st-esurvey__grid と .st-failgrid の2つ。
 *         実寸では 700px 幅で1カラムあたり約300px／約330px を確保できるため
 *         そのままにした。**推測で新しいMQを足していない。**
 *
 *   @320px …… LP に該当ブロックは無い。base.css 規約R2（display の切替は
 *              狭い側にも明示的に書く）を満たすためだけに置いている。
 *
 * 規約R1（1140→840→540→320 の順に並べる）・R3（1セレクタのMQを分散させない）に従う。
 *
 * ==================================================================
 * フォント
 * ==================================================================
 * ・LP の `--font-num`（数字・欧文）は
 *     "Inter","Noto Sans JP",system-ui,sans-serif
 *   tokens.css の --s-font-3d9f8c45（Inter, "Noto Sans JP", sans-serif）と
 *   実質同一（差は system-ui の有無のみ・Inter と Noto Sans JP は両方読込済み）なので
 *   **トークンを使う**。
 *
 * ・LP の `--font`（和文本文）は
 *     "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",system-ui,sans-serif
 *   tokens.css に同等のスタックが無い（--s-font-aca0103b は Zen Maru Gothic、
 *   --s-font-f88553ee は Inter+Zen Kaku Gothic New で、どちらも別書体）。
 *   LP のヒラギノ／游ゴシックへのフォールバック順が見た目を作っているため
 *   **そのまま残す**（--st-font）。トークンに寄せると書体が変わる。
 *
 * ★TODO(親セッション/CEO確認): inc/enqueue.php の Noto Sans JP は
 *   `wght@400;500;700` しか積んでいない。本ページは和文に **600 と 800** を使う
 *   （s-lead・pcard__title・head-pill 等）。このままだと CSS フォントマッチングで
 *   600 も 800 も 700 字形に丸められ、見出しと本文のウェイト差が消える。
 *   `Noto+Sans+JP:wght@400;500;600;700;800;900` へ増やすこと。
 *   enqueue.php は本タスクの編集対象外のため、こちらでは触っていない。
 *
 * ★font-weight 底上げ規則（300→400 / 400→500 / 500→700）について
 *   移植元CSS全882行を走査した結果、font-weight は 600 / 700 / 800 の3値しか無く、
 *   300・400・500 の指定は `.logo__type .ten { font-weight:500 }` の**1件のみ**。
 *   これは LP フッターのロゴ文字組み用で、フッターごと移植対象外（下記1）。
 *   ＝ **底上げ規則の適用対象が0件**。規則を無視したのではなく、当たる箇所が無い。
 *   600→700 等の繰り上げは規則に含まれないため行っていない（勝手に太らせない）。
 *
 * ==================================================================
 * 移植しなかったもの
 * ==================================================================
 * 1. LP の `.site-header` / `.site-footer` とその中のナビ一式
 *    テーマの get_header() / get_footer() が出す共通パーツを使うため。
 *    これに伴い LP 独自のグローバルナビ（#problem / #esurvey / #survey /
 *    #dashboard / #pricing / #company / #contact への7リンク）と
 *    フッターリンク（#solution・privacy.html 等）も落ちている。
 *    ★アンカー先の id はセクション側に全部残してあるので、導線を足すなら
 *      リンクを置くだけで機能する。どこに置くかはCEO判断なので足していない。
 *
 * 2. `.deco` `.deco-1` `.deco-2` `.deco-c1` `.deco-c2` `.hero__visual::before`
 *    `.failcard__arrow`
 *    いずれも移植元CSSで `display:none`（LP側で既に見えていない装飾）。
 *    CEO決定 2026-09-13「非表示ブロックは実装しない」に従い、CSSもマークアップも出さない。
 *
 * 3. `.part-deco`（セクション隅にロゴパーツをランダム散布する装飾）
 *    LP末尾のインラインJSが assets/part1.png 〜 part9.png を動的に生成していた。
 *    この9点は**移植指示で渡された画像7点に含まれておらず**、抽出データの
 *    assets/ にも入っていない（公開LP側には存在する）。
 *    素材の取り込み可否はこちらで決められないため、CSS・JS とも移植していない。
 *
 * 4. `.reveal` のスクロール連動フェードイン
 *    本テーマの既定方針（page-service.php §・assets/css/reblue.css 2章）で
 *    IntersectionObserver は入れないことになっている。
 *    `.reveal` は JS が `.in` を付けるまで opacity:0 のままなので、
 *    CSSだけ移植すると本文が永久に見えなくなる。クラスごと落とした。
 *
 * 5. 移植元CSSにあってマークアップが存在しないブロック
 *    `.steps` `.step*` `.quote-pill` `.banner-line` `.lgbtq*` `.dash-wrap`
 *    `.dash-top` `.dash-kpis` `.kpi*` `.dash-note` `.dash-grid` `.dpanel*`
 *    `.donut-wrap` `.risk-leg*` `.struct-row*` `.effect*` `.roi-box`
 *    `.survey__cats` `.scat`（`.scat2` とは別物） `.survey__table` `.survey__row*`
 *    `.plans` `.plan*` `.pricing__banner` `.criteria__box` `.crit-item*`
 *    `.odinary*` `.honne*` `.hero__eyebrow` `.hero__chip*` `.hero__trust`
 *    `.contact__intro .tag` `.contact__meta`
 *    および手組みフォーム用の `.form__row` `.form label` `.form input`
 *    `.form__choices` `.form__consent` `.form__submit` `.form__success`
 *    （移植元LPのフォームは第三者の埋め込みに置き換わっており、手組み版のDOMは
 *    既に存在しなかった。本テーマは自前フォームに差し替えたため、22章で
 *    `st-iq-form*` として起こし直している。移植元のクラス名は使わない）。
 *    index.html の class を全件突き合わせて未使用と確認済み。出さない。
 *
 * 6. `html { scroll-behavior:smooth; scroll-padding-top:84px }` と body への指定
 *    base.css が html / body の責務を持つ（scroll-padding-top は --o-header-h）。
 *    ページCSSから html / body を触らない。
 *
 * ==================================================================
 * 命名
 * ==================================================================
 * 他ページと衝突させないため、LPのクラス名すべてに `st-` を付けている
 *   例) .hero__grid → .st-hero__grid ／ .s-title → .st-s-title
 * CSSカスタムプロパティも `--st-` 接頭辞へ改名し、`.st-main` にスコープしている
 * （LP は :root に置いていた。他ページへ漏らさないため）。
 * ★2026-09-13 以前は、第三者フォーム埋め込みが注入するクラスとターゲットIDだけが
 *   改名できず例外になっていた。埋め込みを撤去して自前フォームへ差し替えたため
 *   **例外は1つも無くなった**。このファイルのセレクタは全て `st-` 接頭辞で始まる。
 *
 * ★スタイルを1つも持たないクラスが6つある（バグではない）
 *   .st-analysis / .st-cost / .st-improve / .st-pricing /
 *   .st-esurvey__copy / .st-hero__copy
 *   移植元CSSでもこの6つには規則が存在しない（機械的に全882行を走査して確認済み）。
 *   マークアップ上の構造フックとして置かれているだけなので、移植元と対応を
 *   取りやすくするためクラスだけ残してある。
 *   （`.st-cost__grid` `.st-esurvey__grid` 等の子孫クラスは別物で、規則を持つ）
 */

/* ============================================================
 * 1. ページ土台とトークン
 * ============================================================ */

.st-main {
	/* --- ink / neutrals（移植元 :root より逐語） --- */
	--st-navy: #1c3c5c;       /* regulation Brand Navy */
	--st-navy2: #294a6a;
	--st-ink: #294159;
	--st-ink-soft: #46586f;
	/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
	   移植元の実値は --st-muted #6b7e92 ／ --st-faint #93a3b4 だったが、
	   いずれも本文補足として 11〜13px で使われており基準（要 4.5）に届かなかった。
	     #6b7e92 / 白 = 4.18（16件）・/ #f5f8fa = 3.92（4件）
	     #93a3b4 / #f5f8fa = 2.42（2件。実描画の地は #eff2f5 でさらに不利）
	   どちらもブランド色ではないニュートラル（文字色としてしか使っていない＝
	   ロゴ・帯・グラデーションには波及しない）ため、色相そのままに黒方向へ
	   11% / 32% 混ぜた値へ置き換える。実描画の地 #eff2f5 でも 4.53 / 4.56。 */
	--st-muted: #5f7082;      /* 移植元実値 #6b7e92 を 11% 暗く */
	--st-faint: #646f7a;      /* 移植元実値 #93a3b4 を 32% 暗く */
	--st-line: #e4eaf1;
	--st-line-soft: #eef3f8;

	/*
	 * --- brand ---
	 * 移植元の注記をそのまま引き継ぐ:
	 *   「PRIMARY THEME = red/coral family (regulation Coral #DC7464).
	 *     --teal* token names retained for compatibility but repurposed to coral.」
	 * ＝ 変数名は teal だが中身はコーラル。紛らわしいが、移植元と名前を揃えておかないと
	 *    後から実CSSと突き合わせられなくなるため改名しない。
	 */
	--st-teal: #dc7464;       /* Coral — primary theme */
	--st-teal-d: #c2543f;     /* deep coral — 文字・アイコン・ボタンのコントラスト用 */
	--st-teal-l: #e89c8e;     /* light coral */
	--st-teal-50: #fcede9;    /* coral 50 tint（淡い地色） */
	--st-teal-100: #f6d8d0;   /* coral 100 tint（罫） */
	--st-coral: #dc7464;

	/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）で追加。
	   コーラル #dc7464 を面に使い白文字を載せている箇所（.st-criteria__hl /
	   .st-cost__banner）は、中の 13px .st-small（opacity .92）との比が 2.88 しかない
	   （ピクセル実測）。白文字側は上げようがないため、色相そのままに 24% 暗くした
	   面用の派生を足す。同 surface で 22px の白見出しは 5.07。
	   ★ --st-coral / --st-grad-accent 自体は変えない。ロゴ帯（--st-grad-band）や
	     背景クリップ文字（.st-pcard__metric）まで濃くなってしまうため。 */
	--st-coral-surface: #a7584c;

	/* --- surfaces --- */
	--st-bg-soft: #f5f8fa;

	/*
	 * --- rainbow band ---
	 * 移植元注記「reserved for SHIGO logo band accents only」。
	 * 使用箇所は .st-surveycard__bar / .st-price-hero::before / .st-company の3つ。
	 */
	--st-grad-band: linear-gradient(118deg, #54acb4 0%, #60a0c0 18%, #34a494 38%, #64ac6c 56%, #e49c3c 78%, #dc7464 100%);
	--st-grad-band-soft: #f6f3ec;
	/* 移植元注記「all other former gradients replaced with brand solid coral」
	   ＝ grad-teal / grad-accent はグラデーションではなく単色。名前だけ残っている。 */
	--st-grad-teal: #c2543f;
	--st-grad-accent: #dc7464;

	--st-radius: 16px;
	--st-radius-lg: 22px;
	--st-radius-xl: 30px;
	--st-pill: 999px;

	--st-shadow-sm: 0 2px 10px rgba(22, 49, 78, .06);
	--st-shadow: 0 14px 38px -16px rgba(22, 49, 78, .18), 0 2px 8px rgba(22, 49, 78, .05);
	--st-shadow-lg: 0 30px 70px -28px rgba(22, 49, 78, .24);

	/* 和文本文。tokens.css に同等スタックが無いため移植元のまま（冒頭「フォント」参照） */
	--st-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;
	/* 数字・欧文。移植元 --font-num と実質同一のトークンへ寄せた */
	--st-font-num: var(--s-font-3d9f8c45);

	/* 移植元 --container: 1160px。テーマ標準の --o-container(1080px) より広いが、
	   LP の .st-cards-3 / .st-dtable(max-width:1080px) 等がこの幅前提で組まれているため
	   LP の値を使う。ここを 1080 に落とすと表とカードが再調整必要になる。 */
	--st-container: 1160px;

	font-family: var(--st-font);
	font-size: 16px;
	line-height: 1.8;
	color: var(--st-ink);
	background: #fff;
}

.st-container {
	max-width: var(--st-container);
	margin: 0 auto;
	padding: 0 28px;
}

.st-center {
	text-align: center;
}

/* 移植元 `section { position:relative; padding:104px 0 }`。
   素の要素セレクタは共通ヘッダー／フッター内の <section> にも当たるため、
   クラスへ置き換えて各セクションに付ける。 */
/*
 * isolation:isolate は移植元に無い追加（2026-09-14）。
 * セクションを独立した重ね合わせコンテキストにして、装飾パーツ（.st-part-deco）の
 * z-index:-1 がこのセクションの中だけで効くようにするためのもの。
 * これでパーツは「セクションの背景より前・中身より後ろ」に固定され、
 * 本文やボタンの上に乗ることが原理的に無くなる（詳細は節22のコメント）。
 * 本ページの z-index は .st-head-pill(2) / .st-surveycard__float(2) / .st-contact__grid(1)
 * の3つだけで、いずれも同じセクション内で完結しているため閉じ込めても影響しない（実測確認済み）。
 */
.st-section {
	position: relative;
	isolation: isolate;
	padding: 104px 0;
}

/*
 * ★ ここに `.st-main img { max-width:100%; display:block }` を置かないこと（2026-09-14 修正）
 *   `.st-main a`（下記）とまったく同じ事故が img でも起きていた。
 *   移植元は素の `img { max-width:100%; display:block }`（詳細度 0,0,1）で、
 *   `@media(max-width:920px){ .part-deco{display:none} }`（0,1,0）が勝っていた。
 *   それを .st-main にスコープすると (0,1,1) に上がり、下の
 *   `@media(max-width:840px){ .st-part-deco{display:none} }`（0,1,0）を**上回る**。
 *   結果、タブレット以下で出さないはずの装飾パーツ（ロゴのパズルピース）が
 *   375/430/768 のすべてで表示され、z-index:0 の絶対配置で本文の上に描かれていた。
 *     実測 375px: .st-part-deco の computed display = block（29個すべて可視）
 *          → #method の強調文「原因が特定できていないまま、打ち手だけが先行している」が
 *            パーツに覆われて読めない状態（スクショで確認）
 *   base.css L183 が既に `img,picture,video,canvas,svg { display:block; max-width:100% }`
 *   を素の要素セレクタ（0,0,1）で持っているので、ここで重ねる必要はない。
 *   削除することで移植元と同じ詳細度関係に戻る。
 */

/*
 * ★ ここに `.st-main a { color: inherit }` を置かないこと（2026-09-13 修正）
 *   移植元は素の `a { color:inherit }`（詳細度 0,0,1）だった。それを .st-main に
 *   スコープすると詳細度が (0,1,1) に上がり、あとに来る .st-btn-primary { color:#fff }
 *   (0,1,0) を**上回って**しまう。結果、全ボタンの文字色が --st-ink に潰れていた。
 *     実測 プライマリ: rgb(255,255,255) であるべきところ rgb(41,65,89)
 *          ゴースト  : rgb(28,60,92)   であるべきところ rgb(41,65,89)
 *   base.css が既に素の `a { color: inherit; text-decoration: none }` を持っているので、
 *   ここで重ねる必要はない。削除することで移植元と同じ詳細度関係に戻る。
 */

/* ============================================================
 * 2. ロゴ（ヒーローのロックアップ画像のみ）
 * ============================================================ */

.st-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.st-logo__lockup {
	height: 40px;
	width: auto;
	display: block;
}

.st-hero__logo .st-logo__lockup {
	height: 58px;
}

/* ============================================================
 * 3. ボタン
 * ============================================================ */

.st-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 30px;
	border-radius: var(--st-pill);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: transform .15s ease, box-shadow .2s ease, background .2s;
}

.st-btn .st-chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}

.st-btn-primary {
	background: var(--st-grad-teal);
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(220, 116, 100, .6);
}

.st-btn-primary .st-chev {
	background: rgba(255, 255, 255, .22);
}

.st-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(220, 116, 100, .68);
}

.st-btn-ghost {
	background: #fff;
	color: var(--st-navy);
	border: 1.5px solid var(--st-navy);
}

.st-btn-ghost .st-chev {
	border: 1.5px solid var(--st-navy);
}

.st-btn-ghost:hover {
	background: var(--st-bg-soft);
}

/* ============================================================
 * 4. 共通の見出しパーツ
 * ============================================================ */

.st-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}

.st-eyebrow .st-bar {
	width: 50px;
	height: 2px;
	background: var(--st-teal-l);
	border-radius: 2px;
}

.st-eyebrow .st-tag {
	font-family: var(--st-font-num);
	font-size: 12px;
	letter-spacing: .26em;
	font-weight: 700;
	color: var(--st-teal-d);
}

.st-s-title {
	font-size: 38px;
	line-height: 1.45;
	font-weight: 800;
	color: var(--st-navy);
	margin: 0 0 14px;
	letter-spacing: .01em;
	text-wrap: balance;
}

.st-s-title .st-em {
	color: var(--st-teal-d);
}

/* 移植元は background-clip:text でグラデ文字。
   ただし --grad-accent は単色 #DC7464 に差し替え済みなので実質ベタ塗り。
   仕組みごと残す（将来グラデに戻す想定の書き方のため）。 */
.st-s-title .st-coral {
	background: var(--st-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* text-wrap: balance は .st-s-title（上）と同じ処置（2026-09-14 追加）。
   375px でリード文の最終行が1〜2文字だけ落ちていた。
     実測 375px:「「とりあえずやる施策」が、効果を打ち消して／いる」（最終行2文字）
               「11カテゴリ・51問で「組織の真因」を炙り出／す」（1文字）
               「「誰が何と答えたか」が分からない形で集め／ます」（2文字）
   文言・<br> は移植元逐語のまま。非対応ブラウザは無視するだけで崩れない。 */
.st-s-lead {
	font-size: 18px;
	font-weight: 600;
	color: var(--st-ink-soft);
	margin: 0 0 52px;
	text-wrap: balance;
}

.st-s-lead.st-is-center {
	text-align: center;
}

/* 移植元インラインstyle `margin-bottom:0`（#cost のリード）をクラス化 */
.st-s-lead--flush {
	margin-bottom: 0;
}

/* 移植元インラインstyle `margin-bottom:40px`（#dashboard 直下のリード）をクラス化 */
.st-s-lead--40 {
	margin-bottom: 40px;
}

.st-head-pill {
	display: inline-block;
	margin: 0 auto 8px;
	padding: 14px 46px;
	background: #fff;
	border-radius: var(--st-pill);
	font-size: 26px;
	font-weight: 800;
	color: var(--st-navy);
	box-shadow: var(--st-shadow-sm);
	position: relative;
	z-index: 2;
}

/* ============================================================
 * 5. 01 HERO
 * ============================================================ */

.st-hero {
	padding: 70px 0 110px;
	overflow: hidden;
}

.st-hero__grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: 56px;
	align-items: center;
}

.st-hero__logo {
	margin-bottom: 30px;
}

.st-hero h1 {
	font-size: 40px;
	line-height: 1.5;
	font-weight: 800;
	color: var(--st-navy);
	margin: 0 0 24px;
	letter-spacing: .01em;
}

.st-hero h1 .st-em {
	color: var(--st-teal-d);
}

/* 430px で4行目が1文字だけ（「…改善・定着まで／を。」「…実現しま／す。」）になるため
   .st-s-title と同じ balance を入れる（2026-09-14 追加）。実測 430px: lastLineW=18px / fs=14px */
.st-hero__sub {
	font-size: 16px;
	line-height: 2;
	color: var(--st-ink-soft);
	margin: 0 0 36px;
	max-width: 540px;
	text-wrap: balance;
}

.st-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.st-hero__visual {
	position: relative;
	width: 100%;
	max-width: 540px;
	margin-left: auto;
	aspect-ratio: 1 / 1;
}

.st-hero__photo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 40px 90px -34px rgba(22, 49, 78, .28);
}

.st-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
 * 6. 02 PROBLEM
 * ============================================================ */

.st-problem {
	background: var(--st-bg-soft);
}

.st-cards-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.st-pcard {
	background: #fff;
	border-radius: var(--st-radius-lg);
	padding: 34px 30px 30px;
	box-shadow: var(--st-shadow);
	display: flex;
	flex-direction: column;
}

.st-pcard__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.st-pcard__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--st-navy);
	line-height: 1.45;
}

.st-pcard__title small {
	font-size: 16px;
	color: var(--st-ink-soft);
	font-weight: 700;
}

.st-pcard__ic {
	flex: 0 0 52px;
}

/* 移植元はSVGに inline style="color:var(--teal-d)" を直書きしていた。
   PHP側からインラインstyleを追い出してここへ寄せている（描画結果は同じ）。 */
.st-pcard__ic svg {
	color: var(--st-teal-d);
}

.st-pcard__hr {
	height: 1px;
	background: var(--st-line);
	margin: 4px 0 22px;
}

.st-pcard__klabel {
	text-align: center;
	font-size: 14px;
	color: var(--st-ink-soft);
	font-weight: 700;
	margin-bottom: 6px;
}

.st-pcard__sub {
	text-align: center;
	font-size: 17px;
	font-weight: 800;
	color: var(--st-navy);
	margin-bottom: 6px;
}

.st-pcard__metric {
	text-align: center;
	font-family: var(--st-font-num);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	background: var(--st-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.st-pcard__metric .st-big {
	font-size: 62px;
}

.st-pcard__metric .st-jp {
	font-family: var(--st-font);
	font-size: 30px;
}

.st-pcard__metric .st-pct {
	font-size: 40px;
}

.st-pcard__metric .st-note-inline {
	font-family: var(--st-font);
	font-size: 17px;
	color: var(--st-ink-soft);
	-webkit-text-fill-color: var(--st-ink-soft);
	font-weight: 700;
}

/* 出典表記。ここは数字の裏付けなので、文言も改行位置も移植元から1文字も変えていない。 */
.st-pcard__src {
	margin-top: auto;
	padding-top: 18px;
	text-align: center;
	font-size: 11.5px;
	color: var(--st-faint);
	line-height: 1.6;
}

/* ============================================================
 * 7. 03 COST
 * ============================================================ */

.st-cost__grid {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 52px;
	align-items: center;
}

.st-cost__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 24px;
	background: var(--st-grad-teal);
	color: #fff;
	border-radius: var(--st-pill);
	font-size: 14px;
	font-weight: 700;
	margin: 14px 0 28px;
	box-shadow: 0 12px 24px -12px rgba(220, 116, 100, .5);
}

.st-cost__icons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	text-align: center;
	margin-bottom: 24px;
}

.st-cost__ic svg {
	width: 50px;
	height: 50px;
	margin: 0 auto 8px;
	color: var(--st-teal-d);
}

/* 375px では3カラム各113pxに対しラベルが 9〜10 文字あり、「1人あたり100万円／超」
   「不満を出さずに退／職」と最終行1文字で折れていた（実測 lastLineChars=1・fs=13px）。
   font-size を下げるとアイコン列の見た目が変わるので、balance で2行を均す（2026-09-14 追加）。 */
.st-cost__ic .st-l {
	font-size: 13px;
	color: var(--st-ink-soft);
	font-weight: 600;
	text-wrap: balance;
}

.st-cost__hr {
	height: 1px;
	background: var(--st-line);
	margin: 6px 0 20px;
}

.st-cost__formula {
	font-size: 16px;
	font-weight: 700;
	color: var(--st-navy2);
	margin-bottom: 8px;
}

.st-cost__total {
	font-size: 26px;
	font-weight: 800;
	color: var(--st-navy);
	margin-bottom: 30px;
}

.st-cost__total .st-red {
	font-family: var(--st-font-num);
	font-size: 40px;
	background: var(--st-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.st-cost__total .st-red .st-jp {
	font-family: var(--st-font);
	font-size: 26px;
}

.st-cost__visual {
	position: relative;
}

.st-cost__photo {
	width: 100%;
	aspect-ratio: 1 / 1.04;
	border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
	overflow: hidden;
	box-shadow: var(--st-shadow-lg);
}

.st-cost__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.st-cost__banner {
	position: absolute;
	right: -10px;
	bottom: 24px;
	max-width: 250px;
	background: var(--st-coral-surface);  /* 2026-09-15 コントラスト調整・トークン定義の注記参照 */
	color: #fff;
	border-radius: 18px;
	padding: 22px 24px;
	box-shadow: 0 20px 44px -18px rgba(239, 106, 147, .6);
}

.st-cost__banner .st-big {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.5;
}

.st-cost__banner .st-small {
	font-size: 13px;
	opacity: .92;
	margin-top: 6px;
}

/* ============================================================
 * 8. 2カラム表（#gap / #analysis / #improve で共用）
 * ============================================================ */

.st-dtable {
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-lg);
	overflow: hidden;
	box-shadow: var(--st-shadow-sm);
	margin: 0 auto;
	max-width: 940px;
}

.st-dtable .st-thr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--st-navy);
}

.st-dtable .st-thr > div {
	padding: 16px 28px;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
}

.st-dtable .st-thr > div:first-child {
	border-right: 1px solid rgba(255, 255, 255, .16);
}

.st-dtable .st-tr {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--st-line-soft);
}

.st-dtable .st-tr:last-child {
	border-bottom: none;
}

.st-dtable .st-tr > div {
	padding: 18px 28px;
	font-size: 15.5px;
	font-weight: 600;
}

.st-dtable .st-tr > .st-c-left {
	color: var(--st-ink-soft);
	border-right: 1px solid var(--st-line-soft);
	display: flex;
	align-items: center;
	gap: 12px;
}

.st-dtable .st-tr > .st-c-right {
	color: var(--st-navy);
	font-weight: 700;
}

.st-dtable .st-num-dot {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--st-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	font-family: var(--st-font-num);
}

/*
 * 移植元では #analysis / #improve の各セルに
 *   style="justify-content:center;font-weight:700;color:var(--navy)"（左列）
 *   style="text-align:center"（右列）
 * がインラインで入っていた。値はそのままクラス化している。
 */
.st-dtable .st-tr > .st-c-left.st-is-centered {
	justify-content: center;
	font-weight: 700;
	color: var(--st-navy);
}

.st-dtable .st-tr > .st-c-right.st-is-centered {
	text-align: center;
}

/* 移植元インラインstyle margin-bottom:40px（#analysis の表） */
.st-dtable--mb40 {
	margin-bottom: 40px;
}

/* 移植元インラインstyle max-width:1000px（#improve の表） */
.st-dtable--w1000 {
	max-width: 1000px;
}

/* #gap の表だけ一回り大きい（移植元 `.gap .dtable` 系） */
.st-gap .st-dtable {
	max-width: 1080px;
}

.st-gap .st-dtable .st-thr > div {
	padding: 22px 36px;
	font-size: 19px;
}

.st-gap .st-dtable .st-tr > div {
	padding: 26px 36px;
	font-size: 18px;
}

.st-gap .st-dtable .st-num-dot {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	font-size: 15px;
}

/* ============================================================
 * 9. 04 GAP のフロー図
 * ============================================================ */

.st-flow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: center;
	gap: 6px;
	margin: 44px auto 0;
	max-width: 1000px;
}

.st-flow__node {
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1.5px solid var(--st-teal-100);
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-align: center;
	padding: 10px;
	box-shadow: 0 8px 18px -10px rgba(220, 116, 100, .3);
}

.st-flow__node svg {
	width: 30px;
	height: 30px;
	color: var(--st-teal-d);
}

.st-flow__node .st-t {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--st-navy);
	line-height: 1.35;
}

.st-flow__arr {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--st-teal);
}

.st-flow__arr svg {
	width: 18px;
	height: 18px;
}

/* ノード（子要素1,3,5,7）だけ枠線色を変える。移植元末尾の多色アクセント指定 */
.st-flow .st-flow__node:nth-child(1) { border-color: #bfe2db; }
.st-flow .st-flow__node:nth-child(3) { border-color: #c5dcef; }
.st-flow .st-flow__node:nth-child(5) { border-color: #cfe7c8; }
.st-flow .st-flow__node:nth-child(7) { border-color: #f3e1c0; }

/* ============================================================
 * 10. 強調バナー（#method / #improve で共用）
 * ============================================================ */

/* 430px で「打ち／手だけが先行」と強調語が語中で折れていた（実測 span.st-coral
   lastLineChars=2・fs=17px）。.st-s-title と同じ balance を入れる（2026-09-14 追加）。 */
.st-emphasis {
	max-width: 940px;
	margin: 44px auto 0;
	background: #fff;
	border-radius: var(--st-radius-xl);
	padding: 28px 36px;
	text-align: center;
	box-shadow: var(--st-shadow);
	font-size: 24px;
	font-weight: 800;
	color: var(--st-navy);
	text-wrap: balance;
}

.st-emphasis .st-coral {
	background: var(--st-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.st-emphasis__ic {
	display: inline-flex;
	vertical-align: -5px;
	margin-right: 10px;
	width: 26px;
	height: 26px;
	color: var(--st-coral);
}

.st-emphasis__ic svg {
	width: 26px;
	height: 26px;
}

/* ============================================================
 * 11. 05 METHOD（なぜ従来施策では解決しないのか）
 * ============================================================ */

.st-method {
	background: var(--st-bg-soft);
}

.st-failgrid {
	max-width: 940px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

/*
 * 移植元は grid-template-areas: "ic name" "ic fail" の3領域だが、
 * "fail" を含む .failcard__arrow が display:none のため実質2領域。
 * arrow を落としたぶんだけ areas 定義も2行に整理している（見た目は同一）。
 */
.st-failcard {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-areas:
		"ic name"
		"ic fail";
	align-items: center;
	gap: 4px 18px;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-lg);
	padding: 24px 26px;
	box-shadow: var(--st-shadow-sm);
	position: relative;
}

.st-failcard__ic {
	grid-area: ic;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--st-teal-50);
	color: var(--st-teal-d);
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-failcard__ic svg {
	width: 32px;
	height: 32px;
}

.st-failcard__name {
	grid-area: name;
	font-size: 18px;
	font-weight: 800;
	color: var(--st-navy);
}

/*
 * 移植元 styles.css L313 は `display:flex; align-items:center; gap:9px`。
 * ただしこの要素の中身は [span.st-x][テキスト][b] の3つで、flex にすると
 * テキストと <b> が別々のフレックスアイテムになり、狭い幅では「2段組」に割れる。
 * 実測 375px: 「✕ 上司のスキルが追い／つかず」＋別カラムに「形骸／化」（要素高 50px＝2行）、
 *             「「誰の・何の課／題」を」＋「解いているか不／明」。768px の2カラムでも同様。
 * 1行に収まる 1440px では起きないため、元LPでも狭い幅でだけ出る不具合。
 * flex をやめて通常のインライン流し（display:block）に戻し、アイコンだけ
 * inline-flex で行中に置く。これで文は1つの流れになり語中で切れない（2026-09-14 修正）。
 */
.st-failcard__fail {
	grid-area: fail;
	display: block;
	line-height: 1.6;
	font-size: 14px;
	color: var(--st-ink-soft);
	font-weight: 600;
}

/* 強調語（4枚とも最長8文字＝14px で約112px）は語の途中で折らない。
   flex をやめて1つの流れにしたあとも「形／骸化」「解いてい／るか不明」と
   赤字が割れて読みにくかったため（2026-09-14 追加）。
   カード内のテキスト幅は最も狭い 320px でも 200px 以上あり、はみ出さないことを実測で確認。 */
.st-failcard__fail b {
	/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。
	   --st-coral #dc7464 は白地で 3.12（14px/800＝要 4.5・全16件）。
	   同じコーラルで「文字・アイコン・ボタンのコントラスト用」として
	   移植元が既に持っている --st-teal-d #c2543f（白地 4.53）へ寄せる。 */
	color: var(--st-teal-d);
	font-weight: 800;
	white-space: nowrap;
}

/* 親が flex でなくなったので flex アイテム前提の指定（flex:0 0 20px）を外し、
   行中に置けるよう inline-flex にする。gap 9px 相当は margin-right で保つ。
   （2026-09-14 修正・上の .st-failcard__fail のコメント参照） */
.st-failcard__fail .st-x {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fde6ec;
	/* 2026-09-15: 隣の b が --st-teal-d になったので ✕ アイコンも合わせる
	   （同じ赤が2種類並んで見えるのを防ぐ。#fde6ec 地で 3.82 → アイコンなので
	    文字の基準は掛からないが、色をそろえる目的で同値にする）。 */
	color: var(--st-teal-d);
	display: inline-flex;
	vertical-align: -4px;
	margin-right: 9px;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
}

/* カードごとのアイコン色（移植元末尾の多色アクセント指定） */
.st-failgrid .st-failcard:nth-child(1) .st-failcard__ic { background: #ecf6f4; color: #277f72; }
.st-failgrid .st-failcard:nth-child(2) .st-failcard__ic { background: #e7f0f9; color: #4f86c4; }
.st-failgrid .st-failcard:nth-child(3) .st-failcard__ic { background: #e8f3ea; color: #5aa566; }
.st-failgrid .st-failcard:nth-child(4) .st-failcard__ic { background: #f9eed9; color: #d98e2f; }

.st-method__bridge {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 30px 0 0;
	color: var(--st-teal-l);
}

.st-method__bridge-line {
	width: 2px;
	height: 26px;
	background: var(--st-teal-l);
}

.st-method__bridge-chev {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--st-teal-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--st-teal-d);
	box-shadow: var(--st-shadow-sm);
	margin-top: -2px;
}

/* ============================================================
 * 12. 06 ESURVEY（エンゲージメントサーベイ）
 * ============================================================ */

.st-esurvey {
	overflow: hidden;
}

.st-esurvey__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.st-esurvey__lead {
	font-size: 16px;
	line-height: 1.95;
	color: var(--st-ink-soft);
	font-weight: 600;
	margin: 0 0 26px;
}

.st-esurvey__points {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	display: grid;
	gap: 16px;
}

.st-esurvey__points li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 14.5px;
	color: var(--st-ink-soft);
	line-height: 1.7;
}

.st-esurvey__points .st-ic {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--st-teal-50);
	color: var(--st-teal-d);
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-esurvey__points .st-ic svg {
	width: 22px;
	height: 22px;
}

.st-esurvey__points b {
	display: block;
	color: var(--st-navy);
	font-size: 15.5px;
	font-weight: 800;
	margin-bottom: 2px;
}

/* 箇条書き3つのアイコン色（移植元末尾の多色アクセント指定） */
.st-esurvey__points li:nth-child(1) .st-ic { background: #e7f0f9; color: #4f86c4; }
.st-esurvey__points li:nth-child(2) .st-ic { background: #e8f3ea; color: #5aa566; }
.st-esurvey__points li:nth-child(3) .st-ic { background: #f9eed9; color: #d98e2f; }

.st-esurvey__visual {
	position: relative;
}

/*
 * padding-bottom だけ移植元（styles.css L335 の `30px 30px 26px`）から 56px に広げた
 * （2026-09-14 修正）。
 * 理由: 隣の `.st-surveycard__float`（「次の一手が明確に」バッジ）は
 *   .st-esurvey__visual 基準の absolute（bottom:-16px・高さ62px）なので、カードの下端に
 *   62-16=46px 食い込む。元の padding-bottom 26px では 20px 足りず、棒グラフ最終行
 *   「人事部」の数値がバッジの下に完全に隠れていた（全幅で発生・移植元LPからの不具合）。
 *     実測 375px: span.st-vv「35」 y=6914-6937 / float top=6918 → 23px 中 19px が被覆
 *          1440px: 「35」 y=4566-4589 / float top=4569 → 20px 被覆
 *   46px（食い込み）＋10px（余白）= 56px にすると最終行がバッジの上に出る。
 *   カード自体は 30px 高くなるだけで、色・枠・影・レイアウトの骨格は変えていない。
 */
.st-surveycard {
	position: relative;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-xl);
	padding: 30px 30px 56px;
	box-shadow: var(--st-shadow-lg);
	overflow: hidden;
}

.st-surveycard__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--st-grad-band);
}

.st-surveycard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.st-surveycard__title {
	font-size: 16px;
	font-weight: 800;
	color: var(--st-navy);
}

.st-surveycard__chip {
	font-family: var(--st-font-num);
	font-size: 12px;
	font-weight: 600;
	color: var(--st-muted);
	background: var(--st-bg-soft);
	padding: 5px 12px;
	border-radius: 999px;
}

.st-surveycard__score {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 22px;
	align-items: center;
	margin-bottom: 22px;
}

.st-gauge {
	position: relative;
	width: 130px;
	height: 130px;
}

.st-gauge svg {
	width: 130px;
	height: 130px;
}

.st-gauge__num {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--st-font-num);
	font-size: 36px;
	font-weight: 800;
	color: var(--st-navy);
	line-height: 1;
}

.st-gauge__num span {
	font-size: 13px;
	color: var(--st-muted);
	font-weight: 600;
	margin-top: 2px;
}

.st-surveycard__kpis {
	display: grid;
	gap: 10px;
}

.st-skpi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px dashed var(--st-line);
	padding-bottom: 8px;
	font-size: 13px;
}

.st-skpi:last-child {
	border-bottom: none;
}

.st-skpi .st-k {
	color: var(--st-ink-soft);
	font-weight: 600;
}

.st-skpi .st-v {
	font-family: var(--st-font-num);
	font-weight: 800;
	color: var(--st-navy);
	display: flex;
	align-items: center;
	gap: 6px;
}

.st-skpi .st-v i {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 5px;
}

/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。10px の増減チップ（要 4.5）。
   移植元実値は #3f9a63 / #e9f5ee = 3.12、#c25744 / #fbe7e2 = 3.72。
   地の淡い色はそのまま、文字だけ色相を保って 20% / 12% 暗くした（4.60 / 4.57）。
   ★ これは汎用の増減インジケータで、下の "regulation group colors" とは別系統。 */
.st-skpi .st-v.st-up i { color: #327b4f; background: #e9f5ee; }
.st-skpi .st-v.st-down i { color: #ab4d3c; background: #fbe7e2; }

.st-surveycard__bars {
	display: grid;
	gap: 11px;
}

.st-sbar {
	display: grid;
	grid-template-columns: 52px 1fr 28px;
	gap: 12px;
	align-items: center;
	font-size: 12.5px;
}

.st-sbar .st-nm {
	color: var(--st-ink-soft);
	font-weight: 600;
}

.st-sbar .st-track {
	height: 9px;
	background: var(--st-bg-soft);
	border-radius: 999px;
	overflow: hidden;
}

/* 伸び幅と色は1本ずつ違うのでインラインstyleで渡す（PHP側の配列が正） */
.st-sbar .st-track i {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.st-sbar .st-vv {
	font-family: var(--st-font-num);
	font-weight: 700;
	color: var(--st-navy);
	text-align: right;
}

.st-surveycard__float {
	position: absolute;
	right: -14px;
	bottom: -16px;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--st-shadow);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 2;
}

.st-surveycard__float .st-ic {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--st-grad-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-surveycard__float .st-ic svg {
	width: 20px;
	height: 20px;
}

.st-surveycard__float .st-tx {
	font-size: 13px;
	color: var(--st-ink-soft);
	font-weight: 600;
}

.st-surveycard__float .st-tx b {
	color: var(--st-navy);
	font-weight: 800;
}

/* ============================================================
 * 13. 07 SURVEY（11カテゴリ・6グループ）＋ 診断イメージ
 * ============================================================ */

.st-survey {
	background: var(--st-bg-soft);
}

.st-survey__groups {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	gap: 14px;
}

.st-sgroup {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--st-line);
	border-left: 5px solid var(--st-g);
	border-radius: var(--st-radius);
	padding: 18px 24px;
	box-shadow: var(--st-shadow-sm);
}

.st-sgroup__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.st-sgroup__ltr {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--st-g);
	color: #fff;
	font-family: var(--st-font-num);
	font-weight: 800;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-sgroup__name {
	font-size: 18px;
	font-weight: 800;
	color: var(--st-g);
	line-height: 1.3;
}

.st-sgroup__name small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--st-muted);
	letter-spacing: .04em;
}

.st-sgroup__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.st-scat2 {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #f4f7fa;
	border: 1px solid var(--st-line);
	border-radius: 999px;
	padding: 8px 16px 8px 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--st-navy);
}

.st-scat2 i {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--st-g);
	color: #fff;
	font-family: var(--st-font-num);
	font-weight: 700;
	font-size: 12px;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* グループ色（移植元注記 "regulation group colors"） */
.st-sgroup.st-gA { --st-g: #8a95a1; }
.st-sgroup.st-gB { --st-g: #4a90d9; }
.st-sgroup.st-gC { --st-g: #5baa63; }
.st-sgroup.st-gD { --st-g: #8c7cc0; }
.st-sgroup.st-gE { --st-g: #c99700; }
.st-sgroup.st-gF { --st-g: #dc6c94; }

.st-survey__foot {
	text-align: center;
	color: var(--st-muted);
	font-size: 13px;
	margin-top: 24px;
}

/* 移植元インラインstyle color:var(--faint)（サンプルレポート注記） */
.st-survey__foot--faint {
	color: var(--st-faint);
}

.st-merge-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 64px auto 14px;
	max-width: 760px;
}

.st-merge-divider::before,
.st-merge-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--st-line);
}

.st-merge-divider span {
	font-size: 22px;
	font-weight: 800;
	color: var(--st-navy);
	letter-spacing: .04em;
	white-space: nowrap;
}

.st-dash-preview {
	max-width: 1080px;
	margin: 0 auto;
	border-radius: var(--st-radius-xl);
	overflow: hidden;
	box-shadow: var(--st-shadow-lg);
	background: #e8eaf0;
	border: 1px solid var(--st-line);
}

.st-dash-preview img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
 * 14. 09 ANALYSIS の強調ボックス
 * ============================================================ */

.st-criteria {
	display: grid;
	grid-template-columns: 1.3fr .9fr;
	gap: 28px;
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}

/* 移植元は2カラム構成だが、左の .criteria__box が本ページのDOMに無いため
   `.criteria--solo`（1カラム・max-width 780px）だけが実際に効いている。 */
.st-criteria--solo {
	grid-template-columns: 1fr;
	max-width: 780px;
}

.st-criteria__hl {
	background: var(--st-coral-surface);  /* 2026-09-15 コントラスト調整・トークン定義の注記参照 */
	color: #fff;
	border-radius: var(--st-radius-lg);
	padding: 30px 28px;
	box-shadow: 0 18px 40px -18px rgba(220, 116, 100, .5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

/* 430px で「離職リスク指数を独自ロジックで数／値化」と最終行2文字になっていた
   （実測 lastLineW=44px・fs=22px・w=338px）。balance で均す（2026-09-14 追加）。 */
.st-criteria__hl .st-big {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.6;
	text-wrap: balance;
}

.st-criteria__hl .st-small {
	font-size: 13px;
	opacity: .92;
	margin-top: 12px;
}

/* ============================================================
 * 15. 12 COMPARE（他社との違い）
 * ============================================================ */

.st-compare {
	background: var(--st-bg-soft);
}

.st-compare__table {
	max-width: 1000px;
	margin: 0 auto 40px;
	border-radius: var(--st-radius-lg);
	overflow: hidden;
	box-shadow: var(--st-shadow);
	border: 1px solid var(--st-line);
	background: #fff;
}

.st-compare__row {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr 1fr;
}

.st-compare__row.st-head > div {
	padding: 15px;
	font-weight: 700;
	text-align: center;
	font-size: 14.5px;
	color: #fff;
}

.st-compare__row.st-head .st-c0 { background: var(--st-navy); }
/* 2026-09-15 コントラスト調整（CEO決定「直してOK」）。移植元実値 #7d8a97 に白文字で
   比 3.53（要 4.5）。色相そのままに 13% 暗くした #6d7883 へ（4.50）。 */
.st-compare__row.st-head .st-c1 { background: #6d7883; }
.st-compare__row.st-head .st-c2 { background: #6d7883; }
.st-compare__row.st-head .st-c3 { background: var(--st-grad-teal); }

.st-compare__row:not(.st-head) {
	border-bottom: 1px solid var(--st-line-soft);
}

.st-compare__row:not(.st-head):last-child {
	border-bottom: none;
}

.st-compare__row:not(.st-head) > div {
	padding: 16px;
	text-align: center;
	font-weight: 700;
}

.st-compare__row .st-rowlbl {
	color: var(--st-navy);
}

.st-compare__row .st-own {
	background: var(--st-teal-50);
}

.st-mk {
	font-size: 20px;
	font-weight: 800;
}

.st-mk.st-o { color: var(--st-teal-d); }
.st-mk.st-tri { color: #d99a3e; }
.st-mk.st-x { color: #c2cdd8; }
.st-mk.st-dbl { color: var(--st-teal-d); font-size: 22px; }

.st-diffs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}

.st-diff {
	background: #fff;
	border-radius: var(--st-radius-lg);
	padding: 28px 26px 24px;
	box-shadow: var(--st-shadow-sm);
	border: 1px solid var(--st-line);
	position: relative;
}

.st-diff .st-n {
	position: absolute;
	top: -18px;
	left: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--st-grad-accent);
	color: #fff;
	font-family: var(--st-font-num);
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px -8px rgba(239, 106, 147, .5);
}

.st-diff .st-t {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 800;
	color: var(--st-navy);
	line-height: 1.5;
}

/* ============================================================
 * 16. 13 PROC（導入ステップ）
 * ============================================================ */

.st-proc {
	background: var(--st-grad-band-soft);
}

.st-proc .st-head-pill {
	color: var(--st-navy);
}

.st-proc__lead {
	text-align: center;
	color: var(--st-navy2);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 48px;
}

.st-proc__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1040px;
	margin: 0 auto;
}

.st-proc__card {
	background: #fff;
	border-radius: var(--st-radius-lg);
	padding: 26px 22px 28px;
	box-shadow: var(--st-shadow);
	text-align: center;
	position: relative;
}

.st-proc__step {
	font-family: var(--st-font-num);
	font-size: 22px;
	font-weight: 800;
	color: var(--st-teal-d);
	margin-bottom: 14px;
}

.st-proc__ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	color: var(--st-teal-d);
}

.st-proc__t {
	font-size: 19px;
	font-weight: 800;
	color: var(--st-navy);
	line-height: 1.45;
	margin-bottom: 10px;
}

.st-proc__meta {
	font-size: 12px;
	color: var(--st-muted);
	font-weight: 600;
}

.st-proc__foot {
	text-align: center;
	margin: 44px auto 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--st-navy);
}

/* 移植元インラインstyle color:var(--teal-d)
   ★2026-09-15 コントラスト調整（CEO決定「直してOK」）。ここだけ地が
     --st-grad-band-soft #f6f3ec（白ではない）ため、--st-teal-d #c2543f では 4.09 で
     基準（狭い幅で 22px→小さくなり 要 4.5 判定）に届かない。この1箇所だけ
     色相そのままにさらに 7% 暗くした #b44e3b を使う（4.63）。
     --st-teal-d 自体は他所（白地 4.53）で足りているので変えない。 */
.st-proc__foot .st-teal-d {
	color: #b44e3b;
}

/* ステップごとの色（移植元末尾の多色アクセント指定） */
.st-proc__grid .st-proc__card:nth-child(1) .st-proc__step,
.st-proc__grid .st-proc__card:nth-child(1) .st-proc__ic { color: #277f72; }
.st-proc__grid .st-proc__card:nth-child(2) .st-proc__step,
.st-proc__grid .st-proc__card:nth-child(2) .st-proc__ic { color: #4582b0; }
.st-proc__grid .st-proc__card:nth-child(3) .st-proc__step,
.st-proc__grid .st-proc__card:nth-child(3) .st-proc__ic { color: #4f9559; }
.st-proc__grid .st-proc__card:nth-child(4) .st-proc__step,
.st-proc__grid .st-proc__card:nth-child(4) .st-proc__ic { color: #c47f28; }

/* ============================================================
 * 17. 14 PRICING（料金）
 * ============================================================ */

.st-price-hero {
	max-width: 680px;
	margin: 0 auto;
	background: #fff;
	border-radius: var(--st-radius-xl);
	padding: 52px 40px 46px;
	text-align: center;
	box-shadow: var(--st-shadow-lg);
	border: 1px solid var(--st-line);
	position: relative;
	overflow: hidden;
}

.st-price-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: var(--st-grad-band);
}

.st-price-hero__label {
	display: inline-block;
	font-size: 18px;
	font-weight: 800;
	color: var(--st-navy);
	letter-spacing: .04em;
	background: var(--st-teal-50);
	padding: 8px 24px;
	border-radius: var(--st-pill);
	margin-bottom: 18px;
}

.st-price-hero__main {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	line-height: 1;
	margin-bottom: 14px;
}

.st-price-hero__main .st-num {
	font-family: var(--st-font-num);
	font-size: 96px;
	font-weight: 800;
	color: var(--st-navy);
	letter-spacing: -.02em;
}

.st-price-hero__main .st-unit {
	font-size: 34px;
	font-weight: 800;
	color: var(--st-navy);
}

.st-price-hero__main .st-from {
	font-size: 44px;
	font-weight: 800;
	color: var(--st-teal-d);
	margin-left: 2px;
}

.st-price-hero__desc {
	font-size: 16px;
	font-weight: 600;
	color: var(--st-ink-soft);
	margin-bottom: 30px;
}

.st-price-hero__cta {
	margin: 0 auto;
}

/* ============================================================
 * 18. 15 COMPANY（運営会社）
 * ============================================================ */

.st-company {
	background: var(--st-grad-band);
	color: #fff;
}

.st-company .st-head-pill {
	color: var(--st-navy);
}

.st-company__lead {
	text-align: center;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 48px;
}

.st-company__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	max-width: 940px;
	margin: 0 auto;
}

.st-company__card {
	background: #fff;
	border-radius: var(--st-radius-xl);
	padding: 38px 34px;
	box-shadow: var(--st-shadow-lg);
	text-align: center;
}

.st-company__logo {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}

/* 移植元は <img style="height:44px;width:auto"> / <img style="height:76px;width:auto">。
   ロゴごとに高さが違う（比率が違うため揃えると片方が小さく見える）ので値はそのまま。 */
.st-company__logo img {
	width: auto;
}

.st-company__logo--odinary img { height: 44px; }
.st-company__logo--honne img { height: 76px; }

.st-company__sub {
	font-family: var(--st-font-num);
	font-size: 13px;
	color: var(--st-ink-soft);
	letter-spacing: .14em;
	margin-top: 4px;
	/* 移植元インラインstyle text-align:center; margin-bottom:18px */
	text-align: center;
	margin-bottom: 18px;
}

.st-company__desc {
	font-size: 14.5px;
	color: var(--st-ink-soft);
	font-weight: 600;
	line-height: 1.85;
	text-align: left;
}

/* ============================================================
 * 19. 16 CONTACT（セクションの外枠・左カラム・フォームの白カード）
 *
 * ★2026-09-13: ここにあった第三者フォーム埋め込み用の規則（約120行）を削除した。
 *   埋め込みJSが注入するDOMに当てるためのもので、埋め込みごと撤去したため
 *   当たる要素が1つも無くなっている。
 *   自前フォームの見た目は 22章（`st-iq-form*`）に書いた。
 *   `.st-form`（白いカード）は自前マークアップの外枠なので残している。
 * ============================================================ */

.st-contact {
	background: var(--st-navy);
	color: #fff;
	overflow: hidden;
}

.st-contact__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: .92fr 1.08fr;
	gap: 56px;
	align-items: start;
}

/* 1440px でも「…始めません／か？」と最終行2文字になる見出し
   （実測 lines=3・lastLineW=57px・fs=34px・w=482px）。balance で均す（2026-09-14 追加）。 */
.st-contact__intro h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.5;
	margin: 0 0 18px;
	color: #fff;
	text-wrap: balance;
}

.st-contact__intro p {
	color: #b9c8d8;
	font-size: 15px;
	line-height: 1.9;
	margin: 0 0 28px;
}

.st-contact__list {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
}

.st-contact__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	color: #d7e2ee;
	font-size: 14.5px;
	font-weight: 600;
}

.st-contact__list li svg {
	flex: 0 0 22px;
	color: var(--st-teal-l);
}

.st-form {
	background: #fff;
	border-radius: var(--st-radius-xl);
	padding: 36px 36px 32px;
	box-shadow: var(--st-shadow-lg);
	color: var(--st-ink);
}

/* ============================================================
 * 20. レスポンシブ
 *     base.css 規約R1: 1140 → 840 → 540 → 320 の順に並べる。
 *     対応表と繰り上げ理由は冒頭「ブレークポイント」を参照。
 * ============================================================ */

/* ---- @small（移植元 @1000px からの繰り上げ） ---- */
@media screen and (max-width: 1140px) {

	.st-section {
		padding: 80px 0;
	}

	.st-s-title {
		font-size: 30px;
	}

	.st-hero__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.st-hero h1 {
		font-size: 32px;
	}

	.st-cards-3 {
		grid-template-columns: 1fr;
	}

	.st-cost__grid {
		grid-template-columns: 1fr;
	}

	/*
	 * 移植元 styles.css @1000 は `.flow{grid-template-columns:1fr 1fr 1fr}` だが、ノードは4つ。
	 * 3カラムだと4つ目だけが2段目の左に取り残され、右に大きな空白が空く
	 * （768px のスクショで確認・移植元LPも同じ挙動）。矢印はこの帯では既に非表示で
	 * 4ノードがそのまま4カラムに収まるので 4 に直す（2026-09-14 修正）。
	 *   実測 ノード径: 541px→111px / 768px→168px / 1140px→239px（いずれも文字はみ出しなし）
	 */
	.st-flow {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}

	/* 折返しが無くなっても矢印は幅が足りないため落とす（移植元と同じ判断） */
	.st-flow__arr {
		display: none;
	}

	.st-criteria {
		grid-template-columns: 1fr;
	}

	.st-compare__row {
		grid-template-columns: 1.2fr 1fr 1fr 1fr;
		font-size: 13px;
	}

	.st-diffs {
		grid-template-columns: 1fr;
	}

	.st-proc__grid {
		grid-template-columns: 1fr 1fr;
	}

	.st-company__grid {
		grid-template-columns: 1fr;
	}

	.st-contact__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- @tablet（移植元 @680px の .sgroup からの繰り上げ） ---- */
@media screen and (max-width: 840px) {

	.st-sgroup {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/*
	 * 540 ブロックから繰り上げた（2026-09-14 修正）。規約R3（1セレクタのMQを分散させない）
	 * に従い、追加ではなく移動。.st-sgroup を 840 に繰り上げたのと同じ判断。
	 * 理由: 541〜840px では2カラムのままで、各カラムが 328px しかない。
	 *   実測 768px: h2.st-s-title が幅328pxで4行・最終行1文字（「…エンゲージメントサーベ／イ」）、
	 *   右のレポートカードでも KPI ラベルが「エンゲー／ジメント」「離職リス／ク指数」
	 *   「心理的安全／性」「要改／善」と全部語中で折れ、モックが崩れて見えていた。
	 *   1カラムにすればどちらも解消する。
	 */
	.st-esurvey__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	/* 規約R2: display の切替は狭い側にも明示する */
	.st-flow__arr {
		display: none;
	}
}

/* ---- @mobile（移植元 @640px からの繰り下げ） ---- */
@media screen and (max-width: 540px) {

	.st-container {
		padding: 0 18px;
	}

	.st-flow__arr {
		display: none;
	}

	.st-s-title {
		font-size: 24px;
		line-height: 1.45;
	}

	/* 移植元は @640 内で .head-pill を2回指定している（26→20→16px）。
	   後勝ちの 16px が実効値なので 16px を採る。 */
	.st-head-pill {
		font-size: 16px;
		padding: 10px 22px;
		line-height: 1.5;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	/* 同じく .hero h1 は @640 内で 27px → 24px の2回指定。実効値は 24px */
	.st-hero h1 {
		font-size: 24px;
		line-height: 1.5;
	}

	.st-hero__sub {
		font-size: 14px;
	}

	/*
	 * ★移植元 @640 の `.hero__logo .logo__type { font-size:32px }` は
	 *   文字組みロゴ（.logo__type）用で、本ページのヒーローは画像ロックアップ
	 *   （.st-logo__lockup）を使っているため対応する指定が無い。
	 *   モバイルでのロゴ高さは base（58px）のまま。勝手に縮めていない。
	 */

	/* .st-esurvey__grid の1カラム化はここにあったが、840 ブロックへ移した
	   （2026-09-14・規約R3「1セレクタのMQを分散させない」。値は同じ 1fr / gap 44px で、
	   840 の指定が ≤540 にもそのまま効くため挙動は変わらない）。理由は移動先のコメント参照。 */

	.st-failgrid {
		grid-template-columns: 1fr;
	}

	/* 表（汎用） */
	.st-dtable .st-thr > div {
		padding: 12px 10px;
		font-size: 13.5px;
	}

	.st-dtable .st-tr > div {
		padding: 14px 10px;
		font-size: 13.5px;
		word-break: break-word;
	}

	/* 表（#gap だけ別値） */
	.st-gap .st-dtable .st-thr > div {
		padding: 12px 10px;
		font-size: 13.5px;
	}

	.st-gap .st-dtable .st-tr > div {
		padding: 14px 10px;
		font-size: 13.5px;
		line-height: 1.55;
		word-break: break-word;
	}

	.st-gap .st-dtable .st-num-dot {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		font-size: 11.5px;
	}

	.st-gap .st-dtable .st-tr > .st-c-left {
		gap: 8px;
	}

	/* フロー図を縦並びの帯へ */
	.st-flow {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.st-flow__node {
		aspect-ratio: auto;
		border-radius: 14px;
		padding: 16px 18px;
		flex-direction: row;
		gap: 14px;
		justify-content: flex-start;
	}

	.st-flow__node svg {
		width: 26px;
		height: 26px;
		flex: 0 0 26px;
	}

	.st-flow__node .st-t {
		text-align: left;
		font-size: 14px;
	}

	/* コスト */
	.st-cost__formula {
		font-size: 14px;
		line-height: 1.7;
	}

	.st-cost__total {
		font-size: 20px;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.st-cost__total .st-red {
		font-size: 30px;
	}

	.st-cost__total .st-red .st-jp {
		font-size: 20px;
	}

	.st-cost__banner {
		position: static;
		max-width: none;
		margin-top: 18px;
	}

	/* 比較表 */
	.st-compare__table {
		font-size: 11px;
	}

	.st-compare__row {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}

	.st-compare__row.st-head > div {
		padding: 10px 4px;
		font-size: 11px;
		line-height: 1.35;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	.st-compare__row:not(.st-head) > div {
		padding: 12px 4px;
		font-size: 12px;
	}

	.st-mk { font-size: 16px; }
	.st-mk.st-dbl { font-size: 18px; }

	/* 料金 */
	.st-price-hero {
		padding: 36px 22px 30px;
	}

	.st-price-hero__label {
		font-size: 14px;
		padding: 6px 18px;
	}

	.st-price-hero__main {
		flex-wrap: nowrap;
		gap: 2px;
	}

	/* 移植元は @640 内で .num を 72px → 64px の2回指定。実効値は 64px */
	.st-price-hero__main .st-num {
		font-size: 64px;
	}

	.st-price-hero__main .st-unit {
		font-size: 24px;
	}

	.st-price-hero__main .st-from {
		font-size: 30px;
	}

	.st-price-hero__desc {
		font-size: 14px;
	}

	/* 導入ステップ */
	.st-proc__grid {
		grid-template-columns: 1fr;
	}

	.st-proc__lead {
		font-size: 14px;
		margin-bottom: 30px;
		line-height: 1.7;
	}

	.st-proc__foot {
		font-size: 16px;
		line-height: 1.6;
	}

	/* 運営会社 */
	.st-company__lead {
		font-size: 18px;
		margin-bottom: 30px;
		line-height: 1.6;
	}

	.st-company__card {
		padding: 28px 22px;
	}

	.st-company__desc {
		font-size: 13.5px;
	}

	/* 強調バナー */
	.st-emphasis {
		font-size: 17px;
		padding: 22px 20px;
		line-height: 1.6;
	}

	/* お問い合わせ */
	.st-contact__intro h2 {
		font-size: 22px;
		line-height: 1.55;
	}

	.st-contact__list li {
		font-size: 14px;
	}

	.st-form {
		padding: 26px 22px;
	}
}

/* ---- @mini ----
 * 移植元に 320px 相当のMQは無い。base.css 規約R2（display の切替は狭い側にも
 * 明示的に書く）を満たすためだけのブロック。数値の変更は一切していない。 */
@media screen and (max-width: 320px) {

	.st-flow__arr {
		display: none;
	}
}

/* ============================================================
 * 21. 匿名性について（#anonymity）
 *
 * ★このセクションだけ移植元LPに対応するブロックが無い（新規追記）。
 *   移植元 styles.css に .anon* 系の規則は存在しないため、値は本ページ内の
 *   既存規則から借りている。新しい色・新しい角丸・新しい影は1つも作っていない:
 *     地色     … --st-teal-50（.st-esurvey__points .st-ic 等と同じコーラル淡色）
 *     罫       … --st-teal-100（.st-method__bridge-chev と同じ）
 *     アイコン … 40px / border-radius 12px / svg 22px
 *                ＝ .st-esurvey__points .st-ic と同値
 *     カード   … #fff ＋ --st-radius-lg ＋ --st-shadow-sm（.st-pcard / .st-sgroup 準拠）
 *     本文     … 14.5px / font-weight 600 / line-height 1.85（.st-company__desc と同値）
 *     見出し   … font-weight 800 / --st-navy（.st-pcard__title / .st-sgroup__name 準拠）
 *     横幅     … max-width 1000px（.st-survey__groups / .st-criteria と同値）
 *
 * ★背景に --st-teal-50 を使った理由
 *   直前の #survey が --st-bg-soft、直後の #analysis が白。同じ --st-bg-soft だと
 *   #survey と地続きに見え、白だと #analysis と繋がってセクションの切れ目が消える。
 *   ページ内で既に使われているコーラル淡色を充てて区切りを作った。
 *
 * ★font-weight 底上げ規則（300→400 / 400→500 / 500→700）について
 *   本セクションで使う値は 600 / 800 のみ。規則の対象（300/400/500）に当たる
 *   指定が無いため、繰り上げは発生しない（冒頭「font-weight 底上げ規則」と同じ状況）。
 *
 * ★MQ をこの章の中に置いている理由
 *   本タスクの指示が「既存規則は変更しない・追記のみ」のため、上の「20. レスポンシブ」
 *   ブロックには手を入れていない。規約R1（1140→840→540→320の順）は本章内で守り、
 *   R3（1セレクタのMQを分散させない）も .st-anon* が他章に出てこないため満たしている。
 *   20章へ統合したい場合は、本章末尾の3ブロックをそのまま移すだけでよい。
 * ============================================================ */

.st-anon {
	background: var(--st-teal-50);
}

.st-anon__intro {
	max-width: 820px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.95;
	color: var(--st-ink-soft);
}

.st-anon__intro p {
	margin: 0;
}

.st-anon__grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.st-anon__card {
	background: #fff;
	border: 1px solid var(--st-teal-100);
	border-radius: var(--st-radius-lg);
	padding: 30px 30px 28px;
	box-shadow: var(--st-shadow-sm);
}

.st-anon__ic {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--st-teal-50);
	color: var(--st-teal-d);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.st-anon__ic svg {
	width: 22px;
	height: 22px;
}

.st-anon__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--st-navy);
	margin-bottom: 10px;
}

.st-anon__desc {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.85;
	color: var(--st-ink-soft);
	margin: 0;
}

/* アクセスログについての注記。本文より一段落とした扱い（.st-survey__foot と同じ muted）。 */
.st-anon__note {
	max-width: 1000px;
	margin: 24px auto 0;
	background: #fff;
	border-left: 4px solid var(--st-teal-l);
	border-radius: 12px;
	padding: 18px 22px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--st-muted);
}

/* ---- @small ---- */
@media screen and (max-width: 1140px) {

	.st-anon__intro {
		margin-bottom: 34px;
	}
}

/* ---- @tablet ---- */
@media screen and (max-width: 840px) {

	.st-anon__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ---- @mobile ---- */
@media screen and (max-width: 540px) {

	.st-anon__intro {
		font-size: 14px;
		line-height: 1.85;
		text-align: left;
	}

	.st-anon__card {
		padding: 24px 22px 22px;
	}

	.st-anon__title {
		font-size: 17px;
	}

	.st-anon__desc {
		font-size: 13.5px;
	}

	.st-anon__note {
		padding: 16px 18px;
		font-size: 12.5px;
	}
}

/*
 * ロゴパーツの散布（.st-part-deco）の定義は、このファイル末尾（節22）に一本化した
 * （2026-09-14 整理）。
 *   ここにあった同名の定義一式（.st-part-deco 本体／opacity 上書き／
 *   @keyframes st-part-float ／非表示MQ）は、末尾の定義と同じ宣言を後勝ちで
 *   丸ごと上書きされる死にコードだった。実測でも computed animation-name は
 *   末尾側の `stPartFloat`。
 *   さらにここの @keyframes は旧名 `var(--rot)` を参照していて、JS が実際に入れるのは
 *   `--st-rot`。並び順が変わった瞬間に transform が無効になる時限爆弾だったため削除する。
 *   非表示ブレークポイントも末尾側（1140px）が正。ここに 840px の記述を残すと
 *   実挙動と食い違って読み手を誤らせる。
 */

/* ============================================================
 * 22. 16 CONTACT — 自前フォーム（`st-iq-form*`）
 *
 * ★このブロックは移植ではなく、2026-09-13 の差し替えで新規に起こした。
 *   経緯: #contact は外部フォームSaaSの埋め込みを出していた。
 *   CEO指示「これもNotionにしても良さそうですね」で自前フォーム
 *   （theme/inc/inquiry.php の ordinary_inquiry_form()）＋Notion台帳に差し替え、
 *   埋め込みJSへのリクエストがブラウザから出ない状態にした。
 *
 * ★数値の出どころ（勝手に作っていない）
 *   ここに書いた padding / border / radius / font-size / color / shadow は、
 *   19章にあった旧・埋め込みフォーム用規則の値を**そのまま引き継いだもの**。
 *   埋め込みが吐いていたDOMと自前フォームのDOMは構造が違うためセレクタは
 *   書き直しているが、見た目の数値は1つも変えていない。役割の対応:
 *     旧「入力欄1つ分のラッパ」     → .st-iq-form__field
 *     旧「項目ラベル」              → .st-iq-form__label
 *     旧「必須マーク」              → .st-iq-form__required
 *     旧「入力欄（共通）」          → .st-iq-form__input / __select / __textarea
 *     旧「送信ボタン」              → .st-iq-form__submit
 *     旧「エラーメッセージ」        → .st-iq-form__error
 *     旧「同意文ブロック」          → .st-iq-form__consent-text / __consent-link
 *     旧「同意チェックボックス行」  → .st-iq-form__checkbox
 *   新しく足した値は「既に本ファイル内で使われている値」だけを充てている
 *   （同意欄の区切り罫 = --st-line-soft、エラー帯の地色 = --st-teal-50、
 *     エラー帯の padding/radius = 入力欄と同値の 12px 14px / 10px）。
 *
 * ★メディアクエリを足していない理由
 *   フォームは1カラムで、入力欄は width:100% の流動幅。狭い画面での縮小は
 *   20章 @mobile の `.st-form { padding: 26px 22px; }` が既に効く。
 *   足す必要が無いので、推測でBPを増やしていない。
 *
 * ★JavaScript は1行も関与しない。必須チェックは required 属性（ブラウザ内蔵）で、
 *   最終判定はサーバー側（inc/inquiry.php）。CSSだけで成立する。
 *
 * ★`.st-iq-form__hp`（ハニーポット）にはここで規則を書かない。
 *   inc/inquiry.php が要素自身の inline style で画面外へ退避させている。
 *   外部CSSに隠蔽を依存させると、CSSの読み込みが失敗したときに欄が見えてしまい、
 *   親切な利用者が埋めて「破棄」に落ちる。意図的に二重化していない。
 * ============================================================ */

.st-iq-form__field {
	margin-bottom: 16px;
}

.st-iq-form__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--st-navy);
	margin-bottom: 7px;
}

.st-iq-form__required {
	/* 2026-09-15 コントラスト調整。必須マークは白地の 14px 相当なので
	   --st-coral（3.12）ではなく --st-teal-d（4.53）を使う。上の .st-failcard__fail b 参照。 */
	color: var(--st-teal-d);
	margin-left: 4px;
}

/* 入力欄3種。旧「入力欄（共通）」と同値（!important は自前DOMでは不要なので落とした）。 */
.st-iq-form__input,
.st-iq-form__select,
.st-iq-form__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1.5px solid var(--st-line);
	border-radius: 10px;
	font-size: 14.5px;
	font-family: var(--st-font);
	color: var(--st-ink);
	background: #fff;
}

.st-iq-form__textarea {
	min-height: 96px;
	resize: vertical;
}

/*
 * フォーカス。
 * ★旧規則は `:focus { outline: none }` だったが、base.css の :focus-visible
 *   リング（キーボード操作時のみ出る）まで消してしまうため踏襲しない。
 *   リングは残したまま色だけコーラルに寄せ、内側の薄いリングを足す。
 *   色の値は旧規則の rgba(220,116,100,.15) をそのまま使っている。
 */
.st-iq-form__input:focus-visible,
.st-iq-form__select:focus-visible,
.st-iq-form__textarea:focus-visible {
	border-color: var(--st-teal);
	box-shadow: 0 0 0 3px rgba(220, 116, 100, .15);
	outline-color: var(--st-teal-d);
}

/* 同意欄。上の入力群と切り離して見せるための罫（色は本ファイル既出の --st-line-soft）。 */
.st-iq-form__consent {
	border-top: 1px solid var(--st-line-soft);
	padding-top: 16px;
}

.st-iq-form__consent-text {
	font-size: 12px;
	color: var(--st-muted);
	line-height: 1.7;
	margin: 0 0 6px;
}

.st-iq-form__consent-link {
	font-size: 12px;
	line-height: 1.7;
	margin: 0 0 6px;
}

/* base.css が a{color:inherit;text-decoration:none} を当てているので明示で戻す。 */
.st-iq-form__consent-link a {
	color: var(--st-teal-d);
	text-decoration: underline;
}

.st-iq-form__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--st-ink-soft);
	cursor: pointer;
}

.st-iq-form__checkbox input[type="checkbox"] {
	width: auto;
	accent-color: var(--st-teal);
	flex: 0 0 auto;
}

.st-iq-form__submit {
	width: 100%;
	border: none;
	cursor: pointer;
	padding: 16px 30px;
	border-radius: var(--st-pill);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--st-grad-teal);
	margin-top: 6px;
	box-shadow: 0 14px 30px -12px rgba(220, 116, 100, .6);
	transition: transform .15s;
}

.st-iq-form__submit:hover {
	transform: translateY(-2px);
}

/*
 * 検証に落ちて戻ってきたときの案内（フォーム先頭・role="alert"）。
 * 文字色・字送りは旧「エラーメッセージ」と同値。帯の地色と余白は本ファイル既出の値
 * （--st-teal-50 ／ 入力欄と同じ 12px 14px・radius 10px）。
 */
.st-iq-form__error {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--st-teal-50);
	color: #c0392b;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}

/* 動きを減らす設定を尊重する（他ページCSSと同じ方針）。 */
@media (prefers-reduced-motion: reduce) {

	.st-iq-form__submit {
		transition: none;
	}

	.st-iq-form__submit:hover {
		transform: none;
	}
}

/* ============================================================
 * 22. ロゴパーツの散布（#st-part-deco）
 *
 * 移植元 https://shigo-toiro-lp.pages.dev/styles.css の .part-deco 節から逐語。
 * セクションの隅にロゴのパズルパーツをランダムに置く装飾。
 * 配置は assets/js/shigo-parts.js が行う（座標・サイズ・角度をインラインstyleで与える）。
 *
 * ★ 当初の移植で落とされていた（2026-09-13 復元）
 *   素材 part1〜9.png が抽出データに含まれていなかったため、移植担当が
 *   「素材を勝手に増やさない」方針でCSS・JSとも不移植にしていた。
 *   公開LPから9点とも取得できたので復元した（透過も保持）。
 *
 * ★ --rot は --st-rot に改名（他ページのカスタムプロパティと衝突させないため）
 * ============================================================ */

/*
 * z-index は移植元の 0 から -1 に変えた（2026-09-14 修正）。
 * 0 のままだと「位置指定あり」の要素として通常フローの本文より前に描かれ、
 * 装飾パーツが文字やボタンの上に乗る。ランダム配置なので当たる回と当たらない回があり、
 * 実描画のヒットテスト（パーツ上の9点で elementFromPoint を取る）では
 * 1141px で4点・1200px で5点が本文の上だった
 * （p.st-anon__note「回答ページを開いたという記録は…」／p.st-survey__foot「※実際のサンプル…」）。
 * -1 にし、.st-section 側に isolation:isolate を入れてセクション内に閉じ込めると
 * 「セクション背景より前・中身より後ろ」に固定される。
 *   修正後: 1141/1200/1280/1440/1600px いずれも本文の上に乗る点は0。
 * パーツ自体は余白に置かれるので見た目の印象は変わらない。
 */
.st-part-deco {
	position: absolute;
	z-index: -1;
	width: 96px;
	height: auto;
	opacity: .85;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 10px 20px rgba(22, 49, 78, .14));
	will-change: transform;
}

/* 移植元: .contact / .company / .lgbtq / .proc だけ少し濃い */
.st-contact .st-part-deco,
.st-company .st-part-deco,
.st-proc .st-part-deco {
	opacity: .9;
}

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

	.st-part-deco {
		animation: stPartFloat 7s ease-in-out infinite;
	}
}

@keyframes stPartFloat {

	0%,
	100% {
		transform: var(--st-rot) translateY(0);
	}

	50% {
		transform: var(--st-rot) translateY(-12px);
	}
}

/*
 * 移植元は 920px 以下で非表示。当初は共通BPに寄せて 840px にしていたが、
 * 1140px に引き上げた（2026-09-14 修正）。
 *
 * 理由: このルールの目的はコメントのとおり「幅が狭いと本文に重なるので出さない」。
 *   840px では足りず、841〜1140px の帯で装飾が本文の上に乗ったままだった。
 *   パーツは position:absolute / z-index:0 なので、通常フローの本文より上に描かれる。
 *   幾何計測（パーツ矩形と本文テキスト矩形の重なりを1ロードぶん数えたもの）:
 *     841px …10件（例「「見えている課題」と「実際の課題」のズレ」に 140x32px、
 *                   送信ボタン「送信する」に 72x57px）
 *     1140px … 9件（例「※実際のサンプルレポートより抜粋」に 138x23px＝ほぼ全面）
 *     1200px … 3件 / 1280px … 2件 / 1366px … 0件 / 1600px … 0件
 *   本文カラム（--st-container）の外側に十分な余白ができる 1141px 以上では
 *   パーツが左右の余白に落ちるため、ほぼ重ならない＝元LPが意図した見え方になる。
 *   配置は毎ロードランダムなので、重なる帯を残すと「読めない回」が確率で出てしまう。
 *
 * 共通BP（1140/840/540/320）の中では 1140 が該当する境界。移植元の 920 より広く隠すが、
 * 装飾を出す方より本文が読める方を優先する（装飾は enqueue.php のコメントどおり
 * 「読み込みに失敗してもページは完全に成立する」性格のもの）。
 */
@media (max-width: 1140px) {

	.st-part-deco {
		display: none;
	}
}