/* ===== 相談ボタンの手前の「選ぶ・チェックする」一歩（2026-10-13 実装・未公開） =====
   依頼 R261013043401（石田）／★72 TONY様「はい」2026-10-12 20:58
   設計 marketing/pepper/runs/2026-10-12/cycle-2030/work/sodan_button_3an_sentaku_check.md

   置き場所（3ページ）
     ① /agency-self-check/        第4章の末尾（中盤の相談帯の直前）＝3項目のチェック欄＋チェック数
     ② /insurance-leads-company/  第3章（5社比較）の末尾（中盤の相談ボタンの直前）＝いま使っている会社を1つ選ぶ
     ③ /                          ファーストビューの説明文と既存の2ボタンの間＝いまの状況を1つ選ぶ

   🔴 守っていること
     ・既存の相談ボタンの文言・行き先・見た目には一切触れない。ここに相談リンクは置かない
     ・選択肢は「ボタンに見えない」形にする（白地＋細い枠）。橙・緑の塗りを使うと
       主CTA（橙）・副CTA（緑）と同格に見えてしまう（DESIGN_SYSTEM §3-2）
     ・文字は 16px 以上（DESIGN_SYSTEM §4.2）。押せる高さは 48px 以上（§8-5 の 44×44 目標）
       🔴 文字の大きさは rem ではなく px で書く。トップは 600px 以下で html{font-size:15px} に
         下げているため、rem だと 16px のつもりが 15px になる（2026-10-13 実測で踏んだ）
     ・セレクタは必ず .pk- のクラス2つ以上で書く。記事の .section p / .section li 等より強くするため
     ・動きは控えめ。prefers-reduced-motion では止める
   ⚠️ このファイルを直したら、3ページの pick-step.css?v= を必ず上げる（/assets/ は7日キャッシュ） */

.pk-step.pk-box{
  display:block;box-sizing:border-box;min-width:0;max-width:720px;
  margin:2.2rem 0 0;padding:1.15rem 1.25rem 1.3rem;
  border:1px solid rgba(6,199,85,.45);border-radius:14px;
  background:linear-gradient(135deg,#fff 0%,#f0fdf4 100%);
  font-family:inherit;text-align:left;color:#0f1b2d
}
.pk-step .pk-h{
  display:block;margin:0 0 .85rem;padding:0;
  font-size:17px;font-weight:800;line-height:1.6;color:#0f1b2d;
  word-break:keep-all;overflow-wrap:anywhere
}
.pk-step .pk-opts{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0}

/* 選択肢1つ分。label の中に本物の input を置く（キーボード・読み上げはブラウザ標準のまま） */
.pk-step .pk-opt{
  display:inline-flex;align-items:center;gap:.6rem;
  box-sizing:border-box;max-width:100%;min-height:48px;margin:0;
  padding:.55rem 1.15rem .55rem .9rem;
  border:1.5px solid #b9c4d2;border-radius:100px;background:#fff;
  font-size:16px;font-weight:700;line-height:1.5;color:#0f1b2d;
  text-align:left;cursor:pointer;
  word-break:keep-all;overflow-wrap:anywhere;
  transition:border-color .2s ease,background-color .2s ease
}
.pk-step .pk-opt:hover{border-color:#06814a}
.pk-step .pk-opt input{
  flex:none;width:19px;height:19px;margin:0;padding:0;
  accent-color:#06C755;cursor:pointer
}
/* 選んだ状態は色だけで示さない（枠を太く＋地色＋本物のチェック表示） */
.pk-step .pk-opt.is-on{border-color:#06814a;background:#eafbf0;box-shadow:inset 0 0 0 1px #06814a}

/* ① チェック欄：3項目を横に3つ（スマホは縦1列）。入力欄に近い見た目なので角は 8px */
.pk-step .pk-opts.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.pk-step .pk-grid .pk-opt{display:flex;width:100%;border-radius:8px;padding:.6rem .9rem}
.pk-step .pk-count{
  display:block;margin:.9rem 0 0;padding:0;
  font-size:16px;font-weight:700;line-height:1.6;color:#0f1b2d
}
.pk-step .pk-count[hidden]{display:none}
.pk-step .pk-n{
  font-family:'DM Sans',sans-serif;font-size:21px;font-weight:800;
  color:#06814a;margin:0 .15em
}

/* ③ トップのファーストビュー内：背景が淡い緑のグラデーションなので白を少し透かす
   🔴 既存の2ボタンはファーストビューの中にあるので、この欄の高さがそのまま2ボタンを押し下げる。
      読める大きさ（文字16px・押せる高さ44px）は保ったまま、余白だけ詰めてある。
      上の余白は説明文（.hero-sub）の下余白に食い込ませて取り戻す（負の margin-top） */
.hero-content .pk-step.pk-box{
  max-width:38rem;margin:-12px 0 22px;padding:12px 16px 14px;
  background:rgba(255,255,255,.78);border-color:rgba(6,199,85,.3);
  animation:fadeInUp .8s ease-out .25s both
}
.hero-content .pk-step .pk-h{margin-bottom:8px}
.hero-content .pk-step .pk-opts{gap:8px}
.hero-content .pk-step .pk-opt{min-height:44px;padding:6px 16px 6px 13px}

@media (max-width:900px){
  .hero-content .pk-step.pk-box{margin-left:auto;margin-right:auto;text-align:center}
  .hero-content .pk-step .pk-opts{justify-content:center}
}
@media (max-width:640px){
  .pk-step.pk-box{padding:1rem 1rem 1.1rem}
  .pk-step .pk-opts.pk-grid{grid-template-columns:1fr}
  .hero-content .pk-step.pk-box{padding:12px 12px 14px}
}
@media (max-width:600px){
  .hero-content .pk-step.pk-box{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .pk-step.pk-box,.pk-step .pk-opt{animation:none !important;transition:none !important}
}