@charset "UTF-8";
/* ============================================================
   1分診断（/shindan/）用の追加スタイル
   本体の style.css・fix.css の上に足すだけ。色・書体・角丸は本体の変数を使う
   新しい部品：進み具合バー／選択肢ボタン／結果カード／「そう判断した理由」／無料チェック
   ============================================================ */

/* ---------- 導入（画面1） ---------- */
.shindan-hero { padding-bottom: clamp(56px, 8vw, 96px); }
.shindan-hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 0.45em; }
.shindan-hero .lead { margin-bottom: 1.6em; }
.shindan-hero .fv__stats { margin-block: 0 2.2em; }
.shindan-hero__note { margin: 1.2em 0 0; font-size: 0.85rem; color: var(--color-text-sub); }

/* ---------- 1画面のわく ---------- */
.shindan-screen { padding-block: clamp(48px, 8vw, 96px); }
.shindan-screen .container { max-width: 800px; }

/* ---------- 進み具合バー ---------- */
.shindan-progress { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 28px); margin-bottom: clamp(20px, 3vw, 28px); }
.shindan-progress__no {
  margin: 0;
  font-family: var(--font-en); font-weight: 800; line-height: 0.82;
  font-size: clamp(3.6rem, 8vw, 6rem); letter-spacing: -0.04em;
}
.shindan-progress__no small { font-size: 0.28em; letter-spacing: 0; color: var(--color-text-sub); margin-left: 0.2em; }
.shindan-progress__bar { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding-bottom: 0.5em; }
.shindan-progress__bar i { display: block; height: 4px; border-radius: 2px; background: var(--color-line); }
.shindan-progress__bar i.is-done { background: var(--color-dark); }
.shindan-progress__bar i.is-now { background: var(--color-dark); animation: shindan-now 1.6s ease-in-out infinite; }
@keyframes shindan-now { 50% { opacity: 0.35; } }

.shindan-q {
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 900; line-height: 1.35;
  letter-spacing: -0.02em; margin: 0 0 clamp(24px, 4vw, 40px);
}

/* ---------- 選択肢ボタン（指で押しやすい高さ・縦に並べる） ---------- */
.shindan-opts { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.shindan-opt {
  width: 100%; min-height: 72px;
  display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 16px;
  padding: 14px 22px 14px 18px;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.5; text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.shindan-opt__key {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 0.85rem; font-weight: 800;
  border: 1px solid var(--color-line); color: var(--color-text-sub);
  transition: inherit;
}
.shindan-opt small { display: block; font-size: 0.82rem; font-weight: 500; color: var(--color-text-sub); margin-top: 2px; }
.shindan-opt::after { content: "→"; font-family: var(--font-en); color: var(--color-text-sub); transition: transform 0.25s var(--ease-out); }
.shindan-opt:hover, .shindan-opt:focus-visible, .shindan-opt.is-hover { border-color: var(--color-dark); }
.shindan-opt:hover::after, .shindan-opt.is-hover::after { transform: translateX(4px); color: var(--color-text); }
.shindan-opt:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* 押した瞬間（0.25秒見せてから次の質問へ） */
.shindan-opt.is-picked { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.shindan-opt.is-picked small, .shindan-opt.is-picked::after { color: rgba(255, 255, 255, 0.7); }
.shindan-opt.is-picked .shindan-opt__key { background: #fff; border-color: #fff; color: var(--color-text); }

.shindan-back { margin: 28px 0 0; font-size: 0.9rem; }
.shindan-back .arrow-link::after { content: none; }
.shindan-back .arrow-link::before { content: "←"; font-family: var(--font-en); }

/* ---------- 結果カード（黒パネル・4つとも同じ形） ---------- */
.shindan-result { padding-block: clamp(56px, 9vw, 112px); }
.shindan-result .container { max-width: 960px; }
.shindan-result__head { display: flex; align-items: center; gap: 1em; margin-bottom: 1.6em; }
.shindan-result__head .label { margin: 0; }
.shindan-result__no {
  font-family: var(--font-en); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 0.2em 0.9em;
}
.shindan-result__title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.2; margin-bottom: 0.5em; }
.shindan-result__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(255, 255, 255, 0.8); max-width: 34em; margin: 0; }

.shindan-after { padding-block: clamp(24px, 4vw, 48px) 0; }
/* JSで画面を切り替えたとき、追従ヘッダーの下に頭が隠れないように */
.shindan-screen, .shindan-result { scroll-margin-top: calc(var(--header-h) + 16px); }
.shindan-after .container { max-width: 960px; }

/* ---------- 「そう判断した理由」 ---------- */
.shindan-why { background: var(--color-bg-gray); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); margin-bottom: clamp(32px, 5vw, 48px); }
.shindan-why__title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1em; }
.shindan-why ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.shindan-why li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.shindan-why__q {
  height: 28px; border-radius: 999px; background: var(--color-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 0.78rem; font-weight: 800;
}
.shindan-why li p { margin: 0; line-height: 1.7; }
.shindan-why li p b { display: block; }
.shindan-why li p span { font-size: 0.9rem; color: var(--color-text-sub); }

/* 金額（既存の .price-eq をそのまま使う。見出しだけ足す） */
.shindan-total__head { font-weight: 700; margin-bottom: 0.8em; }
/* 960px幅でも1行に収まるよう、数字だけ一段小さく */
.shindan-after .price-eq { justify-content: space-between; }
.shindan-after .price-eq__item .num { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.shindan-after .price-eq__item--total .num { font-size: clamp(2.1rem, 3.8vw, 3rem); }
.shindan-total__note { font-size: 0.9rem; margin-top: -1.6em; margin-bottom: 0; }

/* 次の一歩（メインは1つだけ） */
.shindan-next { text-align: center; padding-top: clamp(32px, 5vw, 48px); }
.shindan-next .btn { min-width: min(100%, 360px); }
.shindan-next__sub { margin: 1.2em 0 0; font-size: 0.95rem; }

/* ---------- 今のサイトの無料チェック（Q1＝あるけど古い のときだけ） ---------- */
.shindan-check { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 56px); margin-top: clamp(48px, 7vw, 80px); }
.shindan-check__img { position: relative; padding: 8px 12px 20px; }
.shindan-check__img img {
  width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: rotate(-2.5deg);
}
.shindan-check__img figcaption { position: absolute; left: 12px; bottom: -6px; font-size: 0.75rem; color: var(--color-text-sub); }
.shindan-check h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; }
.shindan-check .check-list { margin-bottom: 1.2em; }
.shindan-check .check-list li { margin-bottom: 0.5em; }
.shindan-check__note { font-size: 0.85rem; color: var(--color-text-sub); margin: 1em 0 0; }

/* ---------- やり直し・注意 ---------- */
.shindan-foot { text-align: center; padding-block: clamp(48px, 7vw, 80px) clamp(64px, 9vw, 112px); }
.shindan-foot p { margin-inline: auto; }
.shindan-foot .note { margin-bottom: 1.2em; }

/* ---------- 画面の切り替え（shindan.js） ---------- */
.shindan [hidden] { display: none !important; }
/* 見出しへのフォーカスは読み上げのため。押せる場所ではないので枠は出さない */
.shindan-q:focus, .shindan-result__title:focus { outline: none; }
.shindan-back__btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.shindan-back__btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }
/* 次の質問は右から、戻るは左から（24px＋フェード 0.35秒）。動きの途中で横にはみ出さないよう clip */
.shindan-screen { overflow-x: clip; }
.shindan-screen .container.is-in-next { animation: shindan-in-next 0.35s var(--ease-out) both; }
.shindan-screen .container.is-in-prev { animation: shindan-in-prev 0.35s var(--ease-out) both; }
@keyframes shindan-in-next { from { opacity: 0; transform: translateX(24px); } }
@keyframes shindan-in-prev { from { opacity: 0; transform: translateX(-24px); } }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .shindan-opt { min-height: 68px; grid-template-columns: 32px 1fr 16px; gap: 12px; padding: 12px 16px 12px 14px; font-size: 1rem; }
  .shindan-opt__key { width: 32px; height: 32px; }
  .shindan-check { grid-template-columns: 1fr; }
  .shindan-check__img { max-width: 280px; margin-inline: auto; }
  .shindan-next .btn { width: 100%; }
  /* 「〜かもしれません。」（12文字）が390px幅で1行に入る大きさ */
  .shindan-result__title { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shindan-progress__bar i.is-now { animation: none; }
  .shindan-opt, .shindan-opt::after { transition: none; }
  .shindan-screen .container.is-in-next, .shindan-screen .container.is-in-prev { animation: none; }
}