/* ============================================================
   White Shindan — 業界別ホワイト企業マッチ診断 [white_shindan]
   namespace: .ws-*（すべて .ws-app 配下）
   結果ゲートは white-finder.css の .wf-gate-* をそのまま流用する（承認済みデザイン）。
   ============================================================ */

.ws-app{
	--ws-teal:      #12a99d;
	--ws-teal-d:    #0e8e84;
	--ws-teal-dk:   #17544d;
	--ws-hero:      #107a69;  /* ヒーローの濃ティール（承認モック準拠） */
	--ws-mint:      #b6e9e4;
	--ws-mint2:     #8fd8cf;  /* コピー両脇の点線装飾 */
	--ws-mint-pale: #E4F8F6;
	--ws-field:     #f0faf8;
	--ws-orange:    #FF9902;
	--ws-orange-d:  #CC7A02;
	--ws-ink:       #1f2328;
	--ws-ink-soft:  #6b7a78;
	--ws-red:       #e04e4e;

	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: var(--ws-ink);
	max-width: 400px;
	margin: 30px auto;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}
.ws-app *, .ws-app *::before, .ws-app *::after { box-sizing: border-box; }
.ws-app button, .ws-app input { font-family: inherit; }
.ws-app .ws-screen[hidden] { display: none; }

/* SANGO 本文スタイル（.entry-content p = 詳細度 0,1,1）を打ち消すリセット。
   🚨 詳細度の三つ巴に注意（2026-07-27 に実際に踏んだ）：
     SANGO `.entry-content p`(0,1,1) > 自前 `.ws-note`(0,1,0)
     自前リセット `.ws-app p`(0,1,1) > 自前 `.ws-note`(0,1,0)
   どちらに負けても **p に書いた margin が全部無効**になる（注記がボタンの影に張り付いて発覚）。
   → リセットは `.ws-app p` のまま（SANGOに勝つ）／**個別の余白指定は必ず `.ws-app .ws-xxx`(0,2,0) で書く**。
   このファイル内の margin 指定は全て `.ws-app` 前置に統一済み。新規追加時も同じにすること。 */
.ws-app p{ margin: 0; padding: 0; }
.ws-app .ws-h1, .ws-app .ws-kicker{ margin: 0; padding: 0; border: 0; background: none; }

/* ---------- 記事への自動注入ラッパー（.ws-guide） ----------
   h2セクションの末尾に「h3見出し＋京香の会話＋診断」を差し込む器。就職偏差値診断（nkh-guide）と
   同じ置き方に揃えてある。見出し・吹き出しは記事の地の文なので **テーマの見た目のまま**にし、
   ここでは余白とアンカー位置だけ面倒を見る（記事から浮かせない）。 */
.ws-guide { margin: 34px 0; }
.ws-guide > .ws-app { margin-top: 18px; }
/* 診断のすぐ下に本文が続くので、下だけ少し空ける。 */
.ws-guide > .ws-app:last-child { margin-bottom: 6px; }

/* ---------- ① 開始画面 ---------- */

/* 承認モック（2026-07-27）準拠。濃ティールのヒーロー＋端末モック → 白地のコピー＋CTA。 */
.ws-screen-fv {
	background: #fff;
	border: 1px solid var(--ws-mint);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(16, 122, 105, .14);
}
.ws-ic { width: 1em; height: 1em; display: block; flex: none; }

/* --- ヒーロー（濃ティール） --- */
.ws-hero { position: relative; background: var(--ws-hero); padding: 24px 18px 0; overflow: hidden; }
.ws-hero-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-hero-head { position: relative; z-index: 1; text-align: center; }
.ws-app .ws-h1 {
	color: #fff; font-size: 27px; font-weight: 900; line-height: 1.26;
	letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

/* --- 端末モック＋結果カード（下端はヒーローで切る＝モック準拠） ---
   🚨 2つを離して置くと「別々の画像が2枚ある」ように見える（2026-07-27 オーナー指摘）。
   ＝ 逆向きに少し傾けて扇状にし、カードの左端を端末の裏に 10px ほど差し込んで
   「ひと組の絵」に見せる。差し込みはカードの padding 幅まで（順位の三角を隠さない）。 */
.ws-hero-visual{ position: relative; z-index: 1; height: 196px; margin-top: 18px; }
.ws-phone {
	position: absolute; left: 0; top: 22px; z-index: 2; width: 152px; height: 210px;
	background: #1d2624; border-radius: 22px; padding: 7px;
	box-shadow: 0 14px 26px rgba(0, 0, 0, .28);
	transform: rotate(-4deg);
}
.ws-phone-notch {
	position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
	width: 42px; height: 9px; background: #1d2624; border-radius: 6px; z-index: 2;
}
.ws-phone-screen {
	width: 100%; height: 100%; background: #fff; border-radius: 16px;
	padding: 20px 9px 8px; overflow: hidden;
}
.ws-mock-top { display: flex; align-items: baseline; justify-content: space-between; }
.ws-mock-q { color: var(--ws-teal); font-size: 17px; font-weight: 900; letter-spacing: .02em; }
.ws-mock-count { color: #9aa8a6; font-size: 9px; font-weight: 700; }
.ws-app .ws-mock-text{ margin: 3px 0 7px; font-size: 10.5px; font-weight: 800; line-height: 1.35; color: var(--ws-ink); }
.ws-app .ws-mock-opt{
	display: flex; align-items: center; gap: 4px;
	background: #f2f7f6; border-radius: 6px; padding: 5px 5px; margin-bottom: 4px;
}
.ws-mock-ic { color: var(--ws-teal); font-size: 11px; }
.ws-mock-opt-t {
	flex: 1; min-width: 0; font-size: 7.6px; font-weight: 700; line-height: 1.25; color: #3c4a47;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ws-mock-radio { flex: none; width: 8px; height: 8px; border: 1.4px solid #c2d3cf; border-radius: 50%; }

.ws-hero-card {
	position: absolute; left: 142px; right: -12px; top: 0; z-index: 1;
	background: #fff; border-radius: 14px; padding: 11px 10px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, .22);
	transform: rotate(2.5deg);
}
.ws-hc-title { font-size: 9.5px; font-weight: 700; color: #6b7a78; text-align: center; line-height: 1.4; }
.ws-hc-title b { display: block; font-size: 11.5px; font-weight: 900; color: var(--ws-teal); }
.ws-app .ws-hc-rows{ display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
/* 結果画面のランキングカードと同じ部品（三角の順位／🔒／相性%）のミニチュア */
.ws-hc-row {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 4px;
	background: #fff; border: 1px solid #e3efec; border-radius: 7px;
	padding: 7px 6px 7px 22px;
}
.ws-hc-corner {
	position: absolute; left: 0; top: 0; width: 22px; height: 100%;
	background: var(--ws-teal-d); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ws-hc-no { position: absolute; left: 4px; top: 5px; z-index: 1; color: #fff; font-size: 8.5px; font-weight: 900; line-height: 1; }
.ws-hc-lockic { flex: none; color: #c3cfcc; font-size: 8px; }
.ws-hc-bar { flex: 1; height: 5px; border-radius: 3px; background: #dfe9e7; filter: blur(.9px); }
.ws-hc-pct { flex: none; color: var(--ws-orange); font-size: 12px; font-weight: 900; line-height: 1; }
.ws-app .ws-hc-pct small{ font-size: .62em; font-weight: 900; margin-left: .5px; }

/* --- 白地の訴求 --- */
.ws-hero-body { padding: 20px 16px 18px; text-align: center; }
.ws-catch { font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--ws-ink); }
.ws-app .ws-catch-main{
	display: inline-block; margin: 2px 0 0;
	font-size: 19.5px; font-weight: 900; line-height: 1.35; color: var(--ws-ink);
}
.ws-catch-main em { font-style: normal; color: var(--ws-teal); }
/* CTAの真上に密着（間に別要素を挟まない）。安心バッジ列は 2026-07-27 に廃止。 */
/* 文字色はキャッチの「ホワイト企業」と同じティール（2026-07-27 オーナー指示）。 */
.ws-app .ws-free{ margin-top: 20px; font-size: 13.5px; font-weight: 900; color: var(--ws-teal); letter-spacing: .02em; }

.ws-app .ws-start-btn{
	display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 3px; border: 0; cursor: pointer;
	background: var(--ws-orange); color: #fff;
	font-size: 16px; font-weight: 900; line-height: 1.4;
	padding: 15px 14px; border-radius: 999px; text-align: left;
	box-shadow: 0 5px 0 var(--ws-orange-d), 0 9px 16px rgba(255, 153, 2, .22);
	transition: transform .08s, box-shadow .08s;
}
.ws-start-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ws-orange-d), 0 5px 12px rgba(255, 153, 2, .25); }
.ws-start-ic { flex: none; font-size: 21px; opacity: .95; }
/* 🚨 CTAは絶対に2行にしない（2026-07-27 オーナー指示）。文言短縮＋nowrap＋狭幅で1段下げの3段構え。 */
.ws-start-label { flex: 1; text-align: center; white-space: nowrap; }
@media (max-width: 359px) { .ws-app .ws-start-btn{ font-size: 14.5px; gap: 6px; padding: 15px 12px; } }
.ws-caret {
	flex: none; width: 22px; height: 22px; border-radius: 50%;
	background: rgba(255, 255, 255, .22); position: relative;
}
.ws-caret::after {
	content: ""; position: absolute; top: 50%; left: 45%; width: 6px; height: 6px;
	border-top: 2px solid #fff; border-right: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.ws-app .ws-note{ margin-top: 34px; font-size: 11.5px; color: #9aa8a6; }


/* ---------- ② 設問 ---------- */

/* FVの端末モック（.ws-phone-screen）と同じ見た目に揃える：
   大きなQ番号＋右に n/N、選択肢はアイコン＋文言＋ラジオ。
   ※プログレスバーは端末モックに無いので廃止し、進捗は「n/N」で示す。 */
.ws-screen-q { padding: 4px 0; }
.ws-qcard {
	background: #fff;
	border: 1px solid var(--ws-mint);
	border-radius: 16px;
	padding: 20px 16px;
	box-shadow: 0 6px 18px rgba(38, 166, 154, .10);
}
.ws-qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ws-qno { font-size: 26px; font-weight: 900; color: var(--ws-teal); letter-spacing: .02em; line-height: 1.1; }
.ws-qcount { font-size: 13px; font-weight: 700; color: #9aa8a6; }
.ws-app .ws-qtext{ margin: 4px 0 12px; font-size: 17px; font-weight: 800; line-height: 1.5; }
.ws-opts { display: flex; flex-direction: column; gap: 8px; }
.ws-opt {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
	background: #f2f7f6; border: 2px solid transparent; border-radius: 11px;
	padding: 13px 13px; color: var(--ws-ink);
	transition: border-color .12s, background .12s;
}
.ws-opt-ic { flex: none; color: var(--ws-teal); font-size: 20px; }
.ws-opt-t { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.ws-opt-radio {
	flex: none; width: 17px; height: 17px; border: 2px solid #c2d3cf; border-radius: 50%;
	transition: border-color .12s, box-shadow .12s;
}
.ws-opt:hover { border-color: var(--ws-mint); }
.ws-opt.is-selected { border-color: var(--ws-teal); background: var(--ws-mint-pale); }
.ws-opt.is-selected .ws-opt-radio { border-color: var(--ws-teal); box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--ws-teal); }

.ws-app .ws-back-row{ text-align: center; margin-top: 12px; }
.ws-back, .ws-redo {
	background: none; border: 0; cursor: pointer; padding: 4px 8px;
	font-size: 13px; font-weight: 700; color: #9aa8a6; text-decoration: underline;
}
.ws-back[hidden] { display: none; }

/* ---------- ③ 解析演出 ---------- */

.ws-loading {
	background: #fff; border: 1px solid var(--ws-mint); border-radius: 16px;
	padding: 40px 20px; text-align: center;
	box-shadow: 0 6px 18px rgba(38, 166, 154, .10);
}
.ws-app .ws-spinner{
	display: block; width: 38px; height: 38px; margin: 0 auto 16px;
	border: 4px solid var(--ws-mint-pale); border-top-color: var(--ws-teal);
	border-radius: 50%; animation: ws-spin .8s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-loading-text { font-size: 15.5px; font-weight: 800; color: var(--ws-teal); }
.ws-loading-text b { color: var(--ws-orange); font-size: 1.2em; font-weight: 900; padding: 0 .1em; }
.ws-app .ws-loading-sub{ margin-top: 6px; font-size: 12.5px; color: var(--ws-ink-soft); }

/* ---------- ④ 結果＋LINEゲート（2026-07-27 承認モック準拠） ---------- */

/* 診断結果カード */
.ws-result-card {
	position: relative; overflow: hidden;
	background: #f2fbf9; border: 1px solid var(--ws-mint); border-radius: 18px;
	padding: 20px 14px 16px; text-align: center;
	box-shadow: 0 10px 24px rgba(16, 122, 105, .10);
}
.ws-result-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-result-inner { position: relative; z-index: 1; }
.ws-result-badge {
	display: inline-block; background: var(--ws-teal-d); color: #fff;
	font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
	padding: 7px 20px; border-radius: 999px;
}
.ws-app .ws-result-badge::before, .ws-app .ws-result-badge::after{ content: "✦"; margin: 0 6px; font-size: .85em; opacity: .9; }
.ws-app .ws-type-lead{ margin-top: 11px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--ws-ink); }
.ws-app .ws-type-name{
	margin: 2px 0 0; font-size: 30px; font-weight: 900; line-height: 1.25; color: var(--ws-teal);
	letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere;
}
.ws-app .ws-type-tags{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 11px; }
.ws-type-tag {
	display: inline-flex; align-items: center; gap: 5px;
	background: #fff; border: 1px solid var(--ws-mint); border-radius: 999px;
	padding: 7px 13px; font-size: 12.5px; font-weight: 800; color: #2f4a45;
}
.ws-type-tag .ws-ic { color: var(--ws-teal); font-size: 15px; }
.ws-app .ws-type-desc{ margin-top: 11px; font-size: 13px; line-height: 1.75; color: #55625f; }

/* ランキング見出し */
.ws-rank-head{ margin-top: 2px; text-align: center; }
.ws-rank-kicker { font-size: 16px; font-weight: 800; color: var(--ws-ink); }
.ws-rank-kicker span { position: relative; padding: 0 26px; }
.ws-rank-kicker span::before, .ws-rank-kicker span::after {
	content: ""; position: absolute; top: 2px; width: 2.5px; height: 15px;
	background: var(--ws-orange); border-radius: 2px;
}
.ws-rank-kicker span::before { left: 6px; transform: rotate(-24deg); box-shadow: 6px 4px 0 -.5px var(--ws-orange); }
.ws-rank-kicker span::after { right: 6px; transform: rotate(24deg); box-shadow: -6px 4px 0 -.5px var(--ws-orange); }
.ws-app .ws-rank-title{
	margin-top: 1px; font-size: 22px; font-weight: 900; line-height: 1.3; color: var(--ws-teal);
	word-break: keep-all; overflow-wrap: anywhere;
}
.ws-rank-title em { font-style: normal; color: var(--ws-orange); padding-left: .12em; }
.ws-app .ws-rank-sub{ margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--ws-teal-d); }

/* TOP3 カード */
.ws-rank-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ws-rank-card {
	position: relative; overflow: hidden;
	background: #fff; border: 1px solid #e3efec; border-radius: 14px;
	padding: 9px 12px 9px 54px;
	box-shadow: 0 8px 18px rgba(16, 122, 105, .10);
}
.ws-rank-corner {
	position: absolute; left: 0; top: 0; width: 54px; height: 100%;
	background: var(--ws-teal-d);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ws-rank-no {
	position: absolute; left: 11px; top: 15px; z-index: 1;
	color: #fff; font-size: 19px; font-weight: 900; line-height: 1;
}
.ws-rank-card.is-top .ws-rank-no { top: 26px; }
.ws-rank-crown {
	position: absolute; left: -1px; top: -17px; color: #ffd257; font-size: 16px; display: block;
}
.ws-rank-top { display: flex; align-items: center; gap: 7px; }
.ws-rank-lock { flex: none; color: #b3c2bf; font-size: 15px; }
.ws-rank-name {
	flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: #b7c3c0;
	filter: blur(1.6px); -webkit-user-select: none; user-select: none; letter-spacing: .06em;
}
.ws-rank-match { flex: none; text-align: right; line-height: 1.1; }
.ws-rank-match i { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ws-orange); }
.ws-rank-match b { font-size: 25px; font-weight: 900; color: var(--ws-orange); }

.ws-app .ws-rank-stats{ display: flex; margin-top: 6px; padding-top: 6px; border-top: 1px solid #eef4f2; }
.ws-rank-stat { flex: 1 1 33.333%; text-align: center; padding: 0 2px; }
.ws-rank-stat + .ws-rank-stat { border-left: 1px solid #eef4f2; }
.ws-rank-stat-l {
	display: flex; align-items: center; justify-content: center; gap: 3px;
	font-size: 10px; font-weight: 700; color: #8a9a97;
}
.ws-rank-stat-l .ws-ic { color: var(--ws-teal); font-size: 12px; }
.ws-rank-stat-l i { font-style: normal; }
.ws-app .ws-rank-stat-v{ display: block; margin-top: 2px; color: var(--ws-ink); }
.ws-rank-stat-v b { font-size: 16px; font-weight: 900; }
.ws-app .ws-rank-stat-v small{ font-size: 10.5px; font-weight: 800; margin-left: 1px; }

/* 4位以下 */
.ws-locked{
	display: flex; align-items: center; gap: 10px; margin-top: 9px;
	background: #f2fbf9; border-radius: 12px; padding: 8px 12px;
}
.ws-locked-say {
	position: relative; flex: none; background: #fff; border: 1px solid var(--ws-mint); border-radius: 9px;
	padding: 8px 10px; font-size: 11.5px; font-weight: 800; line-height: 1.35; color: var(--ws-teal-d);
}
.ws-locked-say::after {
	content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
	border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--ws-mint);
}
.ws-locked-icons { flex: 1; display: flex; align-items: center; justify-content: space-around; gap: 4px; }
.ws-locked-ic {
	width: 30px; height: 30px; border-radius: 50%; background: #e4efec; color: #a9b8b5;
	display: flex; align-items: center; justify-content: center; font-size: 14px; filter: blur(.4px);
}
.ws-locked-dots { color: #a9b8b5; font-size: 11px; letter-spacing: -1px; }

/* CTA */
.ws-app .ws-line-btn{
	max-width: 340px; margin: 0 auto; border-radius: 14px;
}
.ws-line-caret {
	position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
	border-top: 2.4px solid #fff; border-right: 2.4px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* ハードゲート本体（キーワード欄）。結果カードと二重枠にならないよう外枠を消す */
/* 🚨 proof / minute は元々 .wf-gate-card（text-align:center）の中にあった要素。
   カードの外に出したので、このブロック側で中央揃えを持たせないと左に寄る。 */
.ws-gate-block { text-align: center; }
.ws-gate-preview[hidden],
.ws-gate-block[hidden] { display: none; }
.ws-app .wf-gate{ margin-top: 0; padding: 0; }
.ws-app .wf-gate-minute{ margin: 0 0 2px; }
.ws-app .wf-gate-arrow{ margin: 10px auto 0; }
.ws-app .ws-gate-card {
	background: none; border: 0; box-shadow: none; padding: 0; max-width: 100%;
}
/* 🚨 white-finder.css の入力欄スタイルは `.wf-app` 配下にスコープされている。
   診断のゲートは `.ws-app` 直下に置いたので効かず、左padding無しで錠アイコンと文字が重なる。
   同値を .ws-app 用に再宣言する（テーマの .entry-content input にも勝つ詳細度）。 */
.ws-app .wf-gate-field .wf-keyword{
	width: 100%; height: 100%; border: 0; background: transparent; padding: 0 46px 0 48px; margin: 0;
	font: inherit; font-size: 15px; font-weight: 500; color: var(--ws-ink); outline: none; box-shadow: none;
}

/* SPIゲートと同じ比率（CTA 340px／入力欄 291px）で中央にまとめる。 */
.ws-app .wf-gate-field { max-width: 291px; }
.ws-app .wf-line-btn-primary { max-width: 340px; min-height: 60px; }

.ws-app .wf-gate-proof{ margin: 20px 0 16px; }
.ws-app .wf-gate-proof-num,
.ws-app .wf-gate-note{ color: var(--ws-orange); }
.ws-app .wf-gate-proof svg path{ fill: var(--ws-orange); }
.ws-app .wf-gate-note{ margin: 10px 0 0; }

.ws-app .ws-disclaimer{ margin: 20px 4px 0; font-size: 11.5px; line-height: 1.6; color: #9aa8a6; text-align: center; }
.ws-app .ws-redo-row{ text-align: center; margin-top: 8px; }

/* ---------- ⑤ 解除後のランキング ---------- */

.ws-results[hidden] { display: none; }
.ws-app .ws-results{ margin-top: 18px; }
.ws-app .ws-type-card{ margin-bottom: 18px; }
.ws-app .ws-type-label{ font-size: 13px; font-weight: 700; color: var(--ws-teal-d); }
.ws-app .ws-results-head{
	font-size: 14px; font-weight: 700; color: var(--ws-teal); text-align: center; margin-bottom: 12px;
}
.ws-results-head b { color: var(--ws-orange); font-size: 1.5em; font-weight: 900; padding: 0 .12em; }

.ws-app .ws-row{
	display: flex; gap: 11px; align-items: flex-start;
	background: #fff; border: 1px solid #e3efec; border-radius: 12px;
	padding: 13px 14px; margin-bottom: 9px;
}
.ws-row.is-top { border-color: var(--ws-mint); box-shadow: 0 4px 14px rgba(38, 166, 154, .10); }
.ws-row-rank {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	background: var(--ws-mint-pale); color: var(--ws-teal);
	font-size: 13px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.ws-row.is-top .ws-row-rank { background: var(--ws-teal); color: #fff; }
.ws-row-body { flex: 1; min-width: 0; }
.ws-row-namerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-row-name { font-size: 15px; font-weight: 800; color: var(--ws-ink); }

/* 結果カードの企業行に付くタグ列（FVの安心バッジ廃止後はここ専用） */
.ws-app .ws-chips{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; margin-top: 7px; }
.ws-chip {
	font-size: 11.5px; font-weight: 700; color: #4a5654;
	background: #f4f8f7; border: 1px solid #e3efec; border-radius: 6px; padding: 2px 7px;
}
.ws-app .ws-chip-k{ color: #9aa8a6; font-weight: 700; margin-right: 4px; }

.ws-app .ws-reason{
	margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: #55625f;
	background: var(--ws-field); border-radius: 8px; padding: 8px 10px;
}

.ws-app .ws-unlock-done{ margin: 0 auto; }

/* ---------- 幅対応 ---------- */

/* ---------- PC（本文カラムが広がる幅） ----------
   スマホ用の寸法のまま横に広げると、ヒーローの中央が空き文字だけ小さく見える。
   PCでは①端末モックと結果カードを大きくして左右の余白を埋める ②文字を一段上げる
   ③CTAと入力欄は max-width 440px で中央に留める（間延びしたボタンは押しにくい）。 */
@media (min-width: 768px) {
	.ws-app { max-width: 600px; }

	.ws-hero { padding: 32px 28px 0; }
	.ws-app .ws-h1 { font-size: 33px; line-height: 1.24; }

	.ws-app .ws-hero-visual{ height: 272px; margin-top: 26px; }
	.ws-phone { left: 30px; top: 30px; width: 208px; height: 286px; border-radius: 28px; padding: 9px; }
	.ws-phone-notch { top: 16px; width: 56px; height: 11px; }
	.ws-phone-screen { border-radius: 21px; padding: 26px 13px 10px; }
	.ws-mock-q { font-size: 23px; }
	.ws-mock-count { font-size: 12px; }
	.ws-app .ws-mock-text{ margin: 5px 0 10px; font-size: 14px; }
	.ws-app .ws-mock-opt{ gap: 6px; padding: 8px 7px; margin-bottom: 6px; border-radius: 8px; }
	.ws-mock-ic { font-size: 15px; }
	.ws-mock-opt-t { font-size: 10.5px; }
	.ws-mock-radio { width: 11px; height: 11px; }

	.ws-hero-card { left: 226px; right: 6px; padding: 15px 13px; border-radius: 18px; }
	.ws-hc-title { font-size: 12.5px; }
	.ws-hc-title b { font-size: 15px; }
	.ws-app .ws-hc-rows{ gap: 9px; margin-top: 13px; }
	.ws-hc-row { padding: 11px 9px 11px 31px; border-radius: 10px; gap: 6px; }
	.ws-hc-corner { width: 31px; }
	.ws-hc-no { left: 6px; top: 8px; font-size: 12px; }
	.ws-hc-lockic { font-size: 11px; }
	.ws-hc-bar { height: 7px; }
	.ws-hc-pct { font-size: 17px; }

	.ws-hero-body { padding: 28px 28px 26px; }
	.ws-catch { font-size: 19px; }
	.ws-catch-main { font-size: 25px; }
	.ws-app .ws-free{ margin-top: 22px; font-size: 15px; }
	.ws-app .ws-start-btn{
		max-width: 440px; margin-top: 4px; margin-left: auto; margin-right: auto;
		font-size: 18px; padding: 17px 20px;
	}
	.ws-start-ic { font-size: 23px; }
	.ws-caret { width: 26px; height: 26px; }
	.ws-app .ws-note{ margin-top: 36px; font-size: 12.5px; }

	/* 設問・結果もPC幅に合わせて一段上げる */
	.ws-qcard { padding: 26px 22px; }
	.ws-app .ws-qtext { font-size: 19px; }
	.ws-opt { padding: 15px 16px; gap: 12px; }
	.ws-opt-t { font-size: 16px; }
	.ws-opt-ic { font-size: 23px; }
	.ws-opt-radio { width: 19px; height: 19px; }
	.ws-qno { font-size: 31px; }
	.ws-qcount { font-size: 14px; }
	.ws-loading { padding: 52px 24px; }
	.ws-loading-text { font-size: 17px; }
	.ws-app .ws-type-name { font-size: 21px; }
	.ws-type-desc { font-size: 14px; }
	/* 結果ゲートはSPIと同じコンパクトな中央寄せ。PCでも内側余白や横幅を広げない。 */
	.ws-app .wf-gate-card { max-width: 100%; padding: 0; }
	.ws-app .wf-line-btn-primary{ max-width: 340px; margin-left: auto; margin-right: auto; }
	.ws-app .wf-preview-name { font-size: 16px; }
	.ws-app .wf-preview-meta { font-size: 13px; }
	.ws-match b { font-size: 21px; }
	.ws-row-name { font-size: 16px; }
	.ws-reason { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.ws-app .ws-spinner { animation-duration: 2.4s; }
	.ws-app .ws-progress-fill { transition: none; }
}