/* =========================================================
     ブランドカラー（指定）
     ========================================================= */
  :root{
    --main:    #ff6a47;  /* メインカラー */
    --sub:     #ffa700;  /* サブカラー   */
    --cream:   #fff1c8;  /* サブカラー   */
    --text:    #505050;  /* 読ませる文字 */

    --main-dark: #e85432;
    --line:    #efe6d6;
    --white:   #ffffff;
    --bg:      #fffaf0;
    --radius:  18px;
    --shadow:  0 10px 30px -12px rgba(255,106,71,.28);
    --shadow-sm: 0 4px 14px -8px rgba(80,80,80,.35);
    --maxw:    560px;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    color:var(--text);
    background:
      radial-gradient(120% 70% at 50% -10%, var(--cream) 0%, rgba(255,241,200,0) 60%),
      var(--bg);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px 18px;
  }

  .stage{ width:100%; max-width:var(--maxw); }

  /* ---------- 仮ロゴ ---------- */
  .site-logo{
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px;
  }
  .site-logo img{
    height:30px; width:auto; display:block;
  }

  /* ---------- ヘッダー / プログレス ---------- */
  .head{
    display:flex; align-items:center; gap:10px;
    margin:0 2px 18px;
  }
  .badge{
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    font-weight:700; font-size:13px; letter-spacing:.04em;
    color:var(--main);
    background:var(--white);
    border:1.5px solid var(--main);
    border-radius:999px;
    padding:5px 14px 8px;
    white-space:nowrap;
  }
  .progress-wrap{ flex:1; }
  .progress-meta{
    display:flex; justify-content:space-between;
    font-size:11.5px; color:#9a9287; margin-bottom:5px; font-weight:500;
  }
  .progress-track{
    height:7px; background:var(--line); border-radius:999px; overflow:hidden;
  }
  .progress-bar{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--sub), var(--main));
    border-radius:999px;
    transition:width .45s cubic-bezier(.22,1,.36,1);
  }

  /* ---------- カード ---------- */
  .card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:30px 26px 28px;
  }

  /* ---------- イントロ ---------- */
  .intro-eyebrow{
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    font-weight:900; font-size:30px; line-height:1.35;
    color:var(--text); margin:0 0 14px;
    text-align: center;
  }
  .intro-eyebrow .mark{ color:var(--main); padding-right: 6px;}
  .intro-lead{ font-size:15.5px; margin:0 0 26px; text-align: center;}
  .intro-meta{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    font-size:12.5px;
    color:#8a8278;
    margin:0 0 26px;
    font-weight:500;
    text-align:center;
  }
  .intro-meta span{ display:inline-flex; align-items:center; gap:6px; }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--sub); }

  /* ---------- 設問 ---------- */
  .q-step{ font-size:12.5px; font-weight:700; color:var(--sub); letter-spacing:.06em; margin:0 0 10px; }
  .q-title{
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    font-weight:700; font-size:21px; line-height:1.55;
    color:var(--text); margin:0 0 22px;
    text-align: center;
  }
  .q-note{ font-size:12.5px; color:#9a9287; font-weight:400; }

  .options{ display:flex; flex-direction:column; gap:12px; }
  .opt{
    appearance:none; -webkit-appearance:none;
    text-align:left; width:100%;
    font-family:inherit; font-size:16px; font-weight:500; color:var(--text);
    background:var(--white);
    border:1.5px solid var(--line);
    border-radius:14px;
    padding:17px 18px;
    cursor:pointer;
    display:flex; align-items:center; gap:14px;
    transition:transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .opt .chev{
    margin-left:auto; color:#cdbfa8; font-size:18px; line-height:1;
    transition:color .18s ease, transform .18s ease;
  }
  .opt .pip{
    width:20px; height:20px; border-radius:50%;
    border:2px solid var(--line); flex:none;
    transition:border-color .18s ease, background .18s ease;
  }
  .opt:hover{
    border-color:var(--main);
    background:#fff7f4;
    box-shadow:var(--shadow);
    transform:translateY(-1px);
  }
  .opt:hover .pip{ border-color:var(--main); background:var(--main); box-shadow:inset 0 0 0 3px #fff; }
  .opt:hover .chev{ color:var(--main); transform:translateX(2px); }
  .opt:focus-visible{ outline:3px solid var(--sub); outline-offset:2px; }
  .opt:active{ transform:translateY(0) scale(.995); }

  /* ---------- 結果 ---------- */
  .result-emblem{
    width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; margin:0 0 18px;
  }
  .result-emblem.ok{
    background:var(--cream);
    color:var(--main);
    border:1px solid rgba(255,106,71,.18);
    margin: 0 auto 24px;
  }
  .result-emblem.info{
    background:var(--cream);
    color:var(--main);
    border:1px solid rgba(255,106,71,.18);
    margin: 0 auto 24px;
  }
  .material-symbols-outlined {
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
  }
  .result-icon-material{
    font-size:34px;
    line-height:1;
    color:var(--main);
  }
  .result-title{
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    font-weight:700; font-size:22px; line-height:1.5;
    color:var(--text); margin:0 0 14px;
    text-align: center;
  }
  .result-body{ font-size:15px; margin:0 0 26px; }
  .result-body p{ margin:0 0 8px; text-align: center;}
  .result-body .accent{ color:var(--main); font-weight:700; }

  .cta{
    appearance:none; -webkit-appearance:none; border:none;
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%;
    font-family:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", system-ui, sans-serif;
    font-weight:700; font-size:17px;
    color:#fff;
    background:linear-gradient(135deg, var(--main), var(--sub));
    border-radius:14px;
    padding:18px 20px;
    cursor:pointer; text-decoration:none;
    box-shadow:var(--shadow);
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  }
  .cta:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 16px 34px -12px rgba(255,106,71,.5); }
  .cta:active{ transform:translateY(0); }
  .cta:focus-visible{ outline:3px solid var(--sub); outline-offset:3px; }
  .cta .arrow{ font-size:18px; transition:transform .18s ease; }
  .cta:hover .arrow{ transform:translateX(3px); }

  .restart{
    display:block; margin:18px auto 0; background:none; border:none;
    font-family:inherit; font-size:12.5px; color:#a59a8b; cursor:pointer;
    text-decoration:underline; text-underline-offset:3px;
  }
  .restart:hover{ color:var(--main); }

  .foot-note{
    text-align:center; font-size:11.5px; color:#b3a999; margin:18px 2px 0;
  }

  /* ---------- アニメーション ---------- */
  .fade-in{ animation:fadeUp .42s cubic-bezier(.22,1,.36,1) both; }
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  @media (max-width:420px){
    .intro-eyebrow{ font-size:26px; }
    .q-title{ font-size:19px; }
    .card{ padding:26px 20px 24px; }
  }
  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
  }