/* =====================================================================
 * shukatsu-type.css  —  [shukatsu_type] 16就活タイプ診断
 * 記事埋め込み前提（reset は入れずテーマ本文に馴染ませる）。
 * ゲート本体は career-match-gate.css。ここは選択グリッド／予告／結果のみ。
 * ブランド緑 #26A69A（濃 #1f8a80 / 淡 #E4F8F6）、アクセント青 #4a7fd0。
 * ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');
.st-app {
  --st-green: #26A69A;
  --st-green-dark: #1f8a80;
  --st-green-tint: #E4F8F6;
  --st-blue: #4a7fd0;
  --st-ink: #2b3a38;
  --st-sub: #6b7a78;
  --st-line: #d7e7e4;
  --st-warn: #e0783c;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, Meiryo, sans-serif;
  color: var(--st-ink);
  width: 100%;
  max-width: 640px;
  margin: 28px auto;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.st-app * { box-sizing: border-box; }

/* ゲート入力欄：テーマの input padding(!important)やキャッシュ済み gate CSS に負けないよう、
   ここ（毎回新しく読まれる .css）で確実にロック分の左padding を確保（重なり防止） */
.st-app .spi-mini-gate-field .spi-mini-gate-input {
  padding: 0 46px 0 48px !important;
  background: transparent !important; border: 0 !important;
}

/* テーマが .entry-content ul/ol に付ける枠・背景・パディングを、ツール内では無効化（箱を出さない） */
.st-app ul, .st-app ol {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0; margin: 0; list-style: none;
}

/* このツールでは汎用ブラーカードは隠す（予告リストで代替） */
.st-app .spi-mini-gate-blur-card { display: none !important; }

/* ---- 見出し ---- */
.st-head { text-align: center; margin-bottom: 18px; }
.st-title {
  font-size: 1.4rem; font-weight: 800; color: var(--st-green-dark);
  letter-spacing: .01em; margin: 0 0 6px;
}
.st-lead { font-size: .95rem; color: var(--st-sub); margin: 0; }

/* ---- 選択セクション（クリーム背景＋ブロブ装飾） ---- */
.st-select {
  position: relative; overflow: hidden;
  background: #fffdf6; border: 1px solid #f0ead9; border-radius: 24px;
  padding: 28px 24px 26px;
}
.st-blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .5; z-index: 0; pointer-events: none; }
.st-blob--mint   { width: 190px; height: 190px; background: #d6f3ee; top: -60px; left: -50px; }
.st-blob--pink   { width: 160px; height: 160px; background: #fde3ec; bottom: -55px; right: -40px; }
.st-blob--yellow { width: 130px; height: 130px; background: #fdf1cf; top: 42%; right: 6%; }
.st-dot { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.st-dot--1 { width: 9px; height: 9px; background: var(--st-green); opacity: .28; top: 84px; right: 46px; }
.st-dot--2 { width: 7px; height: 7px; background: #e7a3c0; opacity: .45; bottom: 90px; left: 54px; }
.st-select .st-head { position: relative; z-index: 1; }

/* ---- 選択グリッド（横長カード：左アイコン＋右テキスト） ---- */
.st-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 6px 0 18px;
}
.st-card {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 14px; min-height: 64px;
  background: #fff; border: 1.5px solid var(--st-line); border-radius: 18px;
  cursor: pointer; text-align: center; font-family: inherit;
  box-shadow: 0 4px 12px rgba(31,41,51,.05);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.st-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(31,41,51,.12); }
.st-card:active { transform: translateY(-1px); }
.st-card-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gt); color: var(--g);
}
.st-card-ic svg { width: 22px; height: 22px; }
.st-card-body { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.3; }
.st-card-code { font-size: 1.05rem; font-weight: 800; color: var(--g); letter-spacing: .03em; }
.st-card-nick { font-size: .78rem; color: #57615f; font-weight: 600; }
.st-card-check {
  position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid #e2d8f0; color: transparent; background: #fff;
  display: flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.st-card-check svg { width: 11px; height: 11px; }
.st-card:hover .st-card-check { background: #8e6fb0; border-color: #8e6fb0; color: #fff; }

.st-help { position: relative; z-index: 1; text-align: center; font-size: .82rem; color: var(--st-sub); margin: 10px 0 0; }
.st-help a { color: var(--st-green-dark); font-weight: 700; }

/* 結果：適職グループ */
.st-group-num { color: var(--st-green-dark); margin-right: 4px; }
.st-jobs { list-style: none; padding: 0; margin: 0; }
.st-reason {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--st-line);
  font-size: .95rem; line-height: 1.85; color: var(--st-ink);
}

/* 16Personalities の4グループ配色（分析家=紫/外交官=緑/番人=青/探検家=黄。アイコン丸とコードに反映） */
.st-card--nt { --g: #7e57a8; --gt: #f2ecf8; }
.st-card--nf { --g: #1f8a80; --gt: #e2f6f2; }
.st-card--sj { --g: #3f86c4; --gt: #e9f2fa; }
.st-card--sp { --g: #c88f1f; --gt: #fbf2d8; }
.st-card--nt:hover, .st-card--nf:hover, .st-card--sj:hover, .st-card--sp:hover { border-color: var(--g); }

/* ---- 下部の補足バナー（ピル型・白地＋ティール枠＋電球） ---- */
.st-cta-banner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto; max-width: 560px;
  background: #fff; border: 1.5px solid var(--st-green); border-radius: 999px;
  padding: 11px 20px; box-shadow: 0 4px 12px rgba(38,166,154,.12);
}
.st-cta-ic { color: var(--st-green); display: flex; }
.st-cta-ic svg { width: 20px; height: 20px; }
.st-cta-txt { color: var(--st-green-dark); font-weight: 800; font-size: .95rem; }
.st-cta-line { flex: 0 0 16px; height: 2px; background: var(--st-green); opacity: .3; border-radius: 2px; }

/* ---- 予告（ゲート前） ---- */
.st-reveal {
  text-align: center; background: var(--st-green-tint);
  border: 1.5px solid var(--st-line); border-radius: 16px;
  padding: 20px 18px; margin-bottom: 14px;
}
.st-reveal-kicker { font-size: .92rem; color: var(--st-green-dark); font-weight: 700; }
.st-reveal-title { font-size: 1.28rem; font-weight: 800; color: var(--st-ink); margin: 4px 0 14px; }
.st-lock { font-size: 1.2rem; }
.st-teaser {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: inline-block; max-width: 340px;
}
.st-teaser li {
  position: relative; padding: 7px 0 7px 28px; font-size: .92rem;
  border-bottom: 1px dashed rgba(38,166,154,.25);
}
.st-teaser li:last-child { border-bottom: 0; }
.st-teaser li b { color: var(--st-green-dark); }
.st-reselect {
  display: inline-block; margin-top: 12px; background: none; border: 0;
  color: var(--st-sub); font-size: .84rem; cursor: pointer; font-family: inherit;
  text-decoration: underline;
}

/* ---- 結果 ---- */
.st-result-head { text-align: center; margin-bottom: 16px; }
.st-result-badge {
  display: inline-block; background: var(--st-green-dark); color: #fff;
  font-size: .82rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; letter-spacing: .03em;
}
.st-result-kicker { font-size: .9rem; color: var(--st-sub); margin-top: 10px; }
.st-result-name {
  font-size: 1.5rem; font-weight: 800; color: var(--st-green-dark);
  line-height: 1.4; margin: 2px 0 4px;
}
.st-result-catch { font-size: .95rem; color: var(--st-sub); }
.st-result-rarity {
  display: inline-block; margin-top: 10px; background: #fff5ec; color: var(--st-warn);
  border: 1px solid #f3d7bf; font-size: .82rem; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
}

/* 箱で囲まず、見出し＋中身が流れる素直な構成に */
.st-card2 {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 22px 0 0;
}
.st-card2-title {
  font-size: 1rem; font-weight: 800; color: var(--st-green-dark);
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--st-line);
}
.st-card2 ul { list-style: none; padding: 0; margin: 0; }
.st-card2 ul li {
  position: relative; padding: 5px 0 5px 20px; font-size: .93rem; line-height: 1.78;
}
.st-card2 ul li::before {
  content: ""; position: absolute; left: 3px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--st-green);
}
.st-card2 > p:not(.st-card2-title) { font-size: .93rem; line-height: 1.8; margin: 0; }
.st-card2-warn .st-card2-title { color: var(--st-warn); border-bottom-color: #f0d8c6; }
.st-card2-warn ul li::before { background: var(--st-warn); }

/* 天職業界 */
.st-ind { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--st-line); }
.st-ind:last-child { border-bottom: 0; }
.st-ind-rank {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--st-green); color: #fff; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.st-ind-body { display: flex; flex-direction: column; }
.st-ind-name { font-weight: 800; font-size: .98rem; color: var(--st-ink); }
.st-ind-why { font-size: .87rem; color: var(--st-sub); }

/* 相性 */
.st-avoid { font-size: .88rem; color: var(--st-sub); margin-top: 8px; }
.st-ally { margin-top: 12px; background: var(--st-green-tint); border-radius: 12px; padding: 12px 14px; }
.st-ally-label {
  display: inline-block; font-size: .76rem; font-weight: 800; color: var(--st-green-dark);
  background: #fff; border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.st-ally p { margin: 0; font-size: .92rem; }

.st-again {
  display: block; width: 100%; margin: 8px 0 4px; padding: 12px;
  background: #fff; border: 1.5px solid var(--st-green); border-radius: 12px;
  color: var(--st-green-dark); font-weight: 700; font-size: .95rem; cursor: pointer;
  font-family: inherit; transition: background .12s ease;
}
.st-again:hover { background: var(--st-green-tint); }

/* ---- 適職診断（quiz）: YES/NO 診断(dt)と同じ見た目 ---- */
/* 診断中の文字は career-match と同じ Noto Sans JP に（トップの丸ゴシックとは別） */
.st-quiz-body, .st-quiz-body * { font-family: 'Noto Sans JP', sans-serif; }

/* 質問カード上端に乗るタイトルタブ（career-match [diagnosis_tree] の .dt-head と同じ見た目） */
.st-q-tab {
  display: inline-flex; align-items: center; width: fit-content; max-width: calc(100% - 16px);
  margin: 0 0 0 16px; padding: 8px 18px;
  background: linear-gradient(90deg, var(--st-green) 0%, var(--st-green-dark) 100%);
  color: #fff; border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 10px rgba(38,166,154,.18);
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
  position: relative; z-index: 1;
}
.st-quiz-head { text-align: center; margin-bottom: 16px; }
.st-quiz-chip {
  display: inline-block; background: var(--st-green-dark); color: #fff;
  font-size: .8rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; letter-spacing: .03em;
}
.st-quiz-kicker { font-size: .95rem; color: var(--st-green-dark); font-weight: 700; margin-top: 10px; }

.st-quiz-body { max-width: 520px; margin: 0 auto; }
.st-q-card {
  background: #fff; border: 1px solid var(--st-line); border-radius: 12px;
  padding: 28px 24px 24px; box-shadow: 0 6px 18px rgba(31,41,51,.06); text-align: left;
}
.st-q-progress {
  display: inline-block; margin: 0 0 16px; padding: 4px 12px;
  color: var(--st-green-dark); background: var(--st-green-tint); border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.st-q-text {
  margin: 0 0 22px; color: var(--st-ink); font-size: 1.12rem; font-weight: 900; line-height: 1.7;
}
.st-q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-q-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 18px; font-family: inherit; font-size: 1rem; font-weight: 800;
  line-height: 1.3; border-radius: 10px; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.st-q-btn--yes {
  color: #fff; background: var(--st-green); border: 2px solid var(--st-green);
  box-shadow: 0 6px 14px rgba(38,166,154,.32);
}
.st-q-btn--yes:hover { background: var(--st-green-dark); border-color: var(--st-green-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(38,166,154,.38); }
.st-q-btn--no {
  color: var(--st-green-dark); background: #fff; border: 2px solid var(--st-green);
}
.st-q-btn--no:hover { background: var(--st-green-tint); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(38,166,154,.2); }
.st-q-btn:active { transform: translateY(0); }
.st-q-back {
  display: inline-flex; align-items: center; gap: 4px; margin: 18px 0 0; padding: 8px 14px;
  color: var(--st-sub); background: transparent; border: 1px solid var(--st-line); border-radius: 999px;
  font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.st-q-back:hover { background: #f5f7f6; color: var(--st-ink); border-color: #c1cac4; }

/* ---- 結果：適職→MBTIキャラのブリッジ・区切り ---- */
.st-bridge {
  margin: 12px 0 0; padding: 10px 12px; background: var(--st-green-tint);
  border-radius: 10px; font-size: .86rem; color: var(--st-green-dark); font-weight: 600;
}
.st-section-label {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  font-size: .8rem; font-weight: 800; color: var(--st-green-dark);
  letter-spacing: .12em; margin: 30px 0 14px;
}
.st-section-label::before, .st-section-label::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--st-line));
}
.st-section-label::after { transform: scaleX(-1); }

/* キャラの二つ名（箱で囲まず、見出しとして素直に見せる） */
.st-card2-hero { text-align: center; background: none; border: 0; box-shadow: none; padding: 0; margin: 14px 0 0; }
.st-hero-name { font-size: 1.24rem; font-weight: 800; color: var(--st-green-dark); line-height: 1.44; }
.st-hero-catch { font-size: .9rem; color: var(--st-sub); margin-top: 6px; }
.st-card2-hero .st-result-rarity {
  display: block; margin-top: 10px; background: none; border: 0; padding: 0;
  color: var(--st-sub); font-weight: 600; font-size: .84rem; line-height: 1.7;
}

/* ---- モバイル ---- */
@media (max-width: 600px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .st-title { font-size: 1.24rem; }
  .st-result-name { font-size: 1.3rem; }
  .st-select { padding: 22px 14px 20px; }
  .st-card { padding: 11px 11px; gap: 10px; }
  .st-card-ic { width: 34px; height: 34px; }
  .st-card-ic svg { width: 19px; height: 19px; }
  .st-card-code { font-size: 1rem; }
  .st-card-nick { font-size: .72rem; }
  .st-cta-txt { font-size: .84rem; }
  .st-q-text { font-size: 1.04rem; }
  .st-q-btn { min-height: 52px; font-size: .98rem; }
}

/* ゲート：eyebrow を出さないぶん、タイトル上の余白を足す（.st-app 限定） */
.st-app .spi-mini-gate-title { margin-top: 24px; }

/* =====================================================================
 * MBTIグループ別テーマ（質問カード）
 * 選択タイプの4グループ色（.st-card--* と同配色）で質問画面を着色する。
 * JS が section[data-role="quiz"] に .st-quiz--nt|nf|sj|sp を付与する。
 * ===================================================================== */
.st-quiz--nt { --stq: #7e57a8; --stq-dark: #64438c; --stq-tint: #f2ecf8; --stq-line: #dccfec; --stq-sh: rgba(126,87,168,.32); --stq-sh-soft: rgba(126,87,168,.18); }
.st-quiz--nf { --stq: #26a69a; --stq-dark: #1f8a80; --stq-tint: #e2f6f2; --stq-line: #bfe6e1; --stq-sh: rgba(38,166,154,.32);  --stq-sh-soft: rgba(38,166,154,.18); }
.st-quiz--sj { --stq: #3f86c4; --stq-dark: #2f6da6; --stq-tint: #e9f2fa; --stq-line: #c8ddf0; --stq-sh: rgba(63,134,196,.32);  --stq-sh-soft: rgba(63,134,196,.18); }
.st-quiz--sp { --stq: #c88f1f; --stq-dark: #a87716; --stq-tint: #fbf2d8; --stq-line: #ecd9a8; --stq-sh: rgba(200,143,31,.32);  --stq-sh-soft: rgba(200,143,31,.18); }

/* タイトルタブ：虫めがねアイコン付きの大きめピルで目立たせ、ピルの2/3をカードに重ねる */
[class*="st-quiz--"] .st-q-tab {
  display: flex; /* inline-flexだと負マージンが行ボックスに吸われて重ならない */
  gap: 8px; padding: 10px 20px;
  font-size: 1.02rem;
  background: linear-gradient(90deg, var(--stq) 0%, var(--stq-dark) 100%);
  border-radius: 12px;
  box-shadow: 0 5px 14px var(--stq-sh);
  margin-bottom: -28px;
}
.st-q-tab-ic { width: 17px; height: 17px; flex: 0 0 auto; }

[class*="st-quiz--"] .st-q-card {
  border: 1.5px solid var(--stq-line);
  background: linear-gradient(180deg, var(--stq-tint) 0%, #fff 56%);
  padding-top: 38px;
}
[class*="st-quiz--"] .st-q-progress { color: var(--stq-dark); background: #fff; border: 1px solid var(--stq-line); margin: 0 0 10px; }

/* 質問文（左）＋グループ色スクエアイラスト（右）の2カラム */
.st-q-main { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.st-q-main .st-q-text { margin: 0; flex: 1 1 auto; }
.st-q-illust {
  display: block; width: 42%; max-width: 190px; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 12px; margin: 0; flex: 0 0 auto;
  mix-blend-mode: multiply; /* JPGの白背景をカード地色に溶け込ませ、境目を消す */
}

[class*="st-quiz--"] .st-q-btn--yes {
  background: var(--stq); border-color: var(--stq);
  box-shadow: 0 6px 14px var(--stq-sh);
}
[class*="st-quiz--"] .st-q-btn--yes:hover { background: var(--stq-dark); border-color: var(--stq-dark); box-shadow: 0 10px 20px var(--stq-sh); }
[class*="st-quiz--"] .st-q-btn--no { color: var(--stq-dark); background: #fff; border-color: var(--stq); }
[class*="st-quiz--"] .st-q-btn--no:hover { background: var(--stq-tint); box-shadow: 0 8px 16px var(--stq-sh-soft); }

@media (max-width: 600px) {
  [class*="st-quiz--"] .st-q-tab { font-size: .95rem; padding: 9px 16px; }
}