:root {
  --pri:#2E70C9;
  --bg:#edf1fa;
  --bd:#e5e7eb;
  --muted:#667085;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"メイリオ",sans-serif;
  background:var(--bg);
  color:#111;
}

/* ===== 全体ラッパー（PCで大きめに） ===== */
.wrap{
  max-width:1120px;          /* ★ 画面全体の幅を広めに */
  margin:32px auto;
  padding:0 24px;            /* 少し余白も広めに */
}

h1{
  font-size:1.7rem;
  margin:0 0 8px;
}

p.lead{
  margin:0 0 18px;
  color:var(--muted);
}

/* ===== カード / フォーム基本 ===== */
.card{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:14px;
  padding:22px;
  box-shadow:0 10px 25px rgba(15,23,42,.04);
}

.progress{
  display:flex;
  gap:8px;
  margin:0 0 16px;
}

.dot{
  flex:1;
  height:6px;
  background:#e5e7eb;
  border-radius:999px;
  position:relative;
}

.dot.active{
  background:var(--pri);
}

.steps-head{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:var(--muted);
  margin:-6px 2px 10px;
  gap:8px;
}

.page{
  display:none;
}

.page.active{
  display:block;
  animation:fade .18s ease-in;
}

@keyframes fade{
  from{opacity:.2;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

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

label{
  display:block;
  margin:0 0 6px;
}

select,
input[type="number"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--bd);
  border-radius:10px;
  background:#fff;
}

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

button{
  cursor:pointer;
  border:none;
  border-radius:10px;
  padding:12px 16px;
  font-weight:600;
  font-size:.95rem;
}

.btn-pri{
  background:var(--pri);
  color:#fff;
}

.btn-sec{
  background:#eef2ff;
  color:#1e40af;
}

.btn-ghost{
  background:#fff;
  border:1px solid var(--bd);
  color:#111;
}

.note{
  font-size:.85rem;
  color:var(--muted);
  margin-top:6px;
}

.review-section{
  border:1px dashed var(--bd);
  border-radius:12px;
  padding:12px;
  margin:8px 0;
}

.review-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.kv{
  display:grid;
  grid-template-columns:180px 1fr;   /* ★ 少し広めに */
  gap:8px;
  margin-top:8px;
}

.result{
  margin-top:14px;
}

pre{
  background:#0c1117;
  color:#cbd5e1;
  padding:10px;
  border-radius:10px;
  overflow:auto;
}

/* ===== 戻るボタンまわり ===== */
.top-bar{
  display:flex;
  justify-content:flex-start;
  margin-bottom:10px;
}

.btn-back{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:999px;
  padding:8px 14px;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}

.btn-back::before{
  content:"←";
  font-size:.9rem;
}

.btn-back:hover{
  background:#f9fafb;
}

/* ===== レイアウト（メイン + サイド） ===== */
.layout{
  display:grid;
  /* 左の質問エリアをかなり広めに、右は細めで右端寄りの印象に */
  grid-template-columns:minmax(0,2.6fr) minmax(260px,0.9fr);
  gap:24px;
  align-items:flex-start;
  margin-top:8px;
}

/* メインカード装飾（うっすら背景） */
.card-main{
  position:relative;
  overflow:hidden;
}

.card-main::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(46,112,201,.08), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,.08), transparent 55%);
  opacity:1;
  pointer-events:none;
  z-index:0;
}

/* コンテンツだけ前面に */
.card-main > *{
  position:relative;
  z-index:1;
}

/* ===== サイドバナー（広告・お知らせエリア） ===== */
.side-banner{
  background:linear-gradient(135deg,#e0ecff,#fdf2ff);
  border-radius:16px;
  padding:16px 16px 18px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  position:relative;
  overflow:hidden;
  font-size:.9rem;
}

.side-banner::before,
.side-banner::after{
  content:"";
  position:absolute;
  border-radius:999px;
  opacity:.22;
  pointer-events:none;
}

.side-banner::before{
  width:160px;
  height:160px;
  background:radial-gradient(circle,rgba(59,130,246,.8),transparent 60%);
  top:-60px;
  right:-40px;
}

.side-banner::after{
  width:120px;
  height:120px;
  background:radial-gradient(circle,rgba(244,114,182,.9),transparent 65%);
  bottom:-40px;
  left:-30px;
}

.side-title{
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#1e3a8a;
  margin:0 0 4px;
}

.side-copy{
  margin:0 0 10px;
  line-height:1.5;
  color:#111827;
}

.side-list{
  margin:0 0 12px 1.1em;
  padding:0;
  color:#374151;
}

.side-list li{
  margin-bottom:4px;
}

.side-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  background:#2563eb;
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.4);
}

.side-cta:hover{
  filter:brightness(1.05);
}

.side-note{
  margin-top:10px;
  font-size:.78rem;
  color:#4b5563;
}

/* ボタンの無効化見た目 */
.btn-pri[disabled]{ opacity:.55; cursor:not-allowed; }
.recaptcha-error{ color:#b91c1c; margin-top:8px; font-weight:700; }

/* ★ 必須/任意バッジ */
.field-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.badge-required,
.badge-optional {
  display:inline-block;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  line-height:1.4;
}
.badge-required {
  background:#fee2e2;
  color:#b91c1c;
}
.badge-optional {
  background:#e5e7eb;
  color:#4b5563;
}

/* ★ フリー入力（テキスト/数値）の共通スタイル */
  .card-main input[type="text"],
  .card-main input[type="number"]{
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    border-radius:6px;
    border:1px solid #d1d5db;
    font-size:14px;
    line-height:1.5;
    background-color:#fff;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .card-main input[type="text"]::placeholder,
  .card-main input[type="number"]::placeholder{
    color:#9ca3af;
    font-size:13px;
  }

  .card-main input[type="text"]:focus,
  .card-main input[type="number"]:focus{
    outline:none;
    border-color:#2563eb;          /* 青っぽい枠 */
    box-shadow:0 0 0 1px rgba(37,99,235,0.35);
    background-color:#f9fafb;
  }

  /* スマホでのタップズレ対策（iOSなどのデフォルト影響を減らす） */
  .card-main input[type="text"],
  .card-main input[type="number"]{
    -webkit-appearance:none;
    appearance:none;
  }

/* ============================= */
/*      スマホ / タブレット用     */
/* ============================= */

/* タブレット以下（幅 1024px 以下） */
@media (max-width:1024px){
  .wrap{
    max-width:100%;
    margin:24px auto;
    padding:0 16px;
  }

  .layout{
    grid-template-columns:1.8fr 1.1fr;
    gap:18px;
  }

  .steps-head{
    font-size:.85rem;
  }

  .card{
    padding:18px;
  }
}

/* スマホ縦（幅 768px 以下） */
@media (max-width:768px){
  .wrap{
    margin:18px auto;
    padding:0 12px;
  }

  h1{
    font-size:1.35rem;
  }

  p.lead{
    font-size:.9rem;
  }

  .layout{
    grid-template-columns:1fr;   /* メインとサイドを縦並びに */
    gap:14px;
  }

  .side-banner{
    margin-top:4px;
  }

  .grid{
    grid-template-columns:1fr;   /* 質問の2列だけは1列に */
  }

  .steps-head{
    flex-direction:row;        /* ★ 縦 → 横配置へ */
    align-items:center;        /* 自然に中央寄せ */
    gap:4px;                   /* 横並び用に少し余白 */
    flex-wrap:wrap;            /* ★ 狭い画面で折り返しOKに */
    font-size:.65rem;
  }

  /* ★ レビュー行はスマホでも2カラムのまま */
  .kv{
    grid-template-columns:110px 1fr;  /* PCより少し細いラベル幅 */
  }
}


/* 小さいスマホ（幅 480px 以下） */
@media (max-width:480px){
  .actions{
    flex-direction:column;
    justify-content:flex-start;
  }

  .actions button{
    width:100%;                 /* ボタンを横いっぱい */
    display:flex;
    justify-content:center;
  }

  .btn-back{
    font-size:.8rem;
    padding:7px 12px;
  }

  .card{
    padding:16px;
  }

  .side-banner{
    padding:14px 14px 16px;
  }
}