:root{
    --brown-deep:#4e332c;    /* ボタン・Qアイコン */
    --brown:#6b4a3e;         /* 見出し文字 */
    --brown-mid:#b38c6f;     /* 「あと○つ」タグ・必須 */
    --brown-line:#bf9e85;    /* 選択肢の枠線 */
    --beige-line:#ddccbf;    /* 入力欄の枠線 */
    --beige-bg:#f8f1ea;      /* 淡いベージュ */
    --beige-dot:#e1d5ca;     /* 未到達ドット */
    --line-green:#06C755;
    --ink:#3d2a24;
    --gray:#8a766b;
    --card:#ffffff;
    --shadow:0 10px 30px rgba(110,80,60,.10);
    --round:22px;
    --W:min(100vw,500px);    /* ステージ幅（画像の拡縮基準） */
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"Zen Maru Gothic","Zen Kaku Gothic New","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    background:#efe5db;
    color:var(--ink);
    display:flex;justify-content:center;align-items:flex-start;
    min-height:100vh;
  }
  .stage{
    width:100%;max-width:500px;min-height:100vh;position:relative;
    background:#fcf9f5 url("background.png") no-repeat top center / 100% auto;
    padding:0 0 30px;
    overflow:hidden;
  }

  @media(min-width:520px){
    body{align-items:center;padding:24px 0;}
    .stage{min-height:642px;border-radius:20px;box-shadow:0 24px 60px rgba(90,60,40,.18);}
  }

  /* ---------- header（ロゴ・吹き出し・アドバイザー） ---------- */
  .topline{position:relative;height:calc(var(--W) * .35);}
  .brand{position:absolute;left:calc(var(--W) * .02);top:calc(var(--W) * .016);width:calc(var(--W) * .308);}
  .brand img{width:100%;height:auto;display:block;}
  .advisor{
    position:absolute;right:calc(var(--W) * .06);top:calc(var(--W) * .004);
    width:calc(var(--W) * .40);height:auto;z-index:1;
  }
  .bubble{
    position:absolute;left:calc(var(--W) * .02);top:calc(var(--W) * .116);
    width:calc(var(--W) * .59);aspect-ratio:294/89;
    background:url("bubble.png") no-repeat center / 100% 100%;
    display:flex;align-items:center;
    padding:0 calc(var(--W) * .075) 0 calc(var(--W) * .03);
    font-weight:700;color:var(--ink);
    font-size:calc(var(--W) * .034);line-height:1.5;
    z-index:2;
  }

  /* ---------- card ---------- */
  .card{
    position:relative;z-index:3;
    background:var(--card);border-radius:var(--round);box-shadow:var(--shadow);
    margin:calc(var(--W) * -.012) calc(var(--W) * .064) 0 calc(var(--W) * .06);
    padding:24px 22px 26px;
  }
  @media(max-width:380px){ .card{padding:20px 16px 22px;} }

  /* progress */
  .progress{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px;}
  .progress.left{justify-content:flex-start;}
  .count{
    display:inline-flex;align-items:baseline;gap:2px;
    background:var(--brown-mid);color:#fff;border-radius:8px;
    padding:4px 14px 5px;font-weight:700;font-size:15px;white-space:nowrap;line-height:1.3;
  }
  .count b{font-size:24px;margin:0 2px;line-height:1;}
  .count.done{font-size:16px;padding:6px 16px;}
  .dots{display:flex;align-items:center;}
  .dot{width:14px;height:14px;border-radius:50%;background:var(--beige-dot);position:relative;transition:.2s;}
  .dot + .dot{margin-left:15px;}
  .dot + .dot::before{content:"";position:absolute;right:100%;top:50%;width:15px;height:2px;margin-top:-1px;background:var(--beige-dot);}
  .dot.on,.dot.done{background:var(--brown-mid);}
  .dot.on::before,.dot.done::before{background:var(--brown-mid);}

  /* question head */
  .qhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px;}
  .qicon{
    flex:0 0 auto;width:40px;height:40px;border-radius:50%;margin-top:3px;
    background:var(--brown-deep);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:900;font-size:20px;
  }
  .qtext{font-weight:700;font-size:24px;line-height:1.45;color:var(--ink);}
  @media(max-width:380px){ .qtext{font-size:21px;} }

  /* options */
  .opts{display:grid;gap:16px;}
  .opts.two{grid-template-columns:1fr 1fr;}
  .opts.one{grid-template-columns:1fr;}
  .opt{
    appearance:none;border:1.6px solid var(--brown-line);background:#fff;
    border-radius:8px;padding:22px 10px;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:20px;color:var(--ink);
    transition:.16s;text-align:center;line-height:1.35;
  }
  .opts.one .opt{padding:17px 12px;font-size:17px;}
  @media(max-width:380px){ .opt{font-size:18px;padding:18px 8px;} }
  .opt:hover{background:var(--beige-bg);transform:translateY(-1px);}
  .opt:active{transform:translateY(0);}
  .opt.sel{background:var(--brown-deep);border-color:var(--brown-deep);color:#fff;}

  /* back（カード外） */
  .back{display:flex;justify-content:flex-start;margin:22px calc(var(--W) * .064) 0 calc(var(--W) * .034);position:relative;z-index:3;}
  .back:empty{display:none;}
  .backbtn{
    display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--brown-deep);
    border-radius:999px;padding:7px 18px;color:var(--ink);font-size:14px;font-weight:700;
    cursor:pointer;font-family:inherit;
  }
  .backbtn:hover{background:var(--beige-bg);}
  .backbtn[disabled]{opacity:.45;cursor:default;}

  /* ---------- form ---------- */
  .req{display:inline-block;background:var(--brown-mid);color:#fff;font-size:12px;font-weight:700;
    border-radius:5px;padding:3px 9px;margin-right:12px;vertical-align:middle;}
  .flabel{font-weight:700;color:var(--ink);font-size:15px;margin:18px 0 8px;display:flex;align-items:center;}
  .fin{width:100%;border:1.6px solid var(--beige-line);border-radius:6px;padding:12px 14px;font-size:16px;
    color:var(--ink);font-family:inherit;background:#fff;transition:.15s;}
  .fin:focus{outline:none;border-color:var(--brown-mid);box-shadow:0 0 0 3px rgba(179,140,111,.18);}
  .fin::placeholder{color:#c4b5aa;}
  .telrow{display:flex;align-items:center;gap:10px;}
  .telrow .fin{text-align:center;}
  .telrow span{color:var(--ink);font-weight:700;}
  .err{color:#d0392b;font-size:12.5px;margin-top:6px;display:none;font-weight:700;}
  .err.show{display:block;}

  .note{font-size:11.5px;color:var(--ink);line-height:1.6;margin:14px 0 12px;padding-left:1em;text-indent:-1em;}
  .terms{display:flex;gap:14px;align-items:center;background:var(--beige-bg);border:1px solid #eee2d8;border-radius:6px;
    padding:12px 14px;font-size:12.5px;color:var(--ink);line-height:1.6;}
  .terms input{
    appearance:none;-webkit-appearance:none;flex:0 0 auto;margin:0;cursor:pointer;
    width:26px;height:26px;border:1.6px solid var(--brown-mid);border-radius:4px;background:#fff;position:relative;
  }
  .terms input:checked{background:var(--brown-deep);border-color:var(--brown-deep);}
  .terms input:checked::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;
    border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);}
  .terms a{color:var(--ink);text-decoration:underline;}

  .intro{font-weight:700;color:var(--ink);font-size:20px;line-height:1.5;margin-bottom:4px;text-align:center;}
  .intro small{display:block;font-weight:500;font-size:13px;color:var(--gray);margin-top:6px;}

  /* method choice */
  .methods{display:grid;gap:12px;margin-top:10px;}
  .mbtn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    border:none;border-radius:999px;padding:16px 14px;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:18px;color:#fff;
    transition:.15s;box-shadow:0 6px 14px rgba(60,40,30,.14);
  }
  .mbtn.line{background:var(--line-green);}
  .mbtn.mail{background:var(--brown-deep);}
  .mbtn:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .mbtn .ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.22);border-radius:50%;font-size:14px;}
  .mbtn.sel{outline:3px solid rgba(78,51,44,.2);outline-offset:2px;}

  .panel{border:1.5px solid #eee2d8;border-radius:12px;padding:16px 14px;margin-top:14px;background:#fffdfb;
    animation:pop .2s ease;}
  @keyframes pop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .panel h4{margin:0 0 4px;color:var(--ink);font-size:16px;}
  .panel p{margin:0 0 12px;font-size:12.5px;color:var(--gray);line-height:1.55;}
  .panel .flabel:first-of-type{margin-top:4px;}

  .submit{
    width:100%;border:none;border-radius:999px;padding:17px 46px;cursor:pointer;margin-top:4px;position:relative;
    font-family:inherit;font-weight:700;font-size:22px;letter-spacing:.06em;color:#fff;
    display:flex;align-items:center;justify-content:center;transition:.15s;
    box-shadow:0 6px 14px rgba(60,40,30,.16);
  }
  .submit.line{background:var(--line-green);font-size:18px;letter-spacing:0;}
  .submit.mail{background:var(--brown-deep);font-size:18px;letter-spacing:0;}
  .submit:hover{filter:brightness(1.08);}
  .submit[disabled]{opacity:.55;cursor:default;box-shadow:none;}
  .arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;line-height:1;}

  /* summary chips */
  .summary{margin-top:18px;border-top:1px dashed #e6d9ce;padding-top:14px;}
  .summary h5{margin:0 0 10px;font-size:13px;color:var(--gray);font-weight:700;}
  .chips{display:flex;flex-wrap:wrap;gap:7px;}
  .chip{background:var(--beige-bg);border:1px solid #eee2d8;border-radius:999px;
    padding:5px 12px;font-size:12.5px;color:var(--ink);font-weight:700;}

  /* thank you */
  .thanks{text-align:center;padding:20px 6px;}
  .thanks .big{font-weight:900;font-size:24px;color:var(--ink);margin:12px 0 8px;}
  .thanks p{font-size:14px;color:var(--ink);line-height:1.8;}
  .checkmark{width:74px;height:74px;border-radius:50%;background:var(--brown-deep);
    margin:0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;}
  .spin{width:44px;height:44px;border:4px solid var(--beige-dot);border-top-color:var(--brown-deep);border-radius:50%;
    margin:14px auto;animation:sp 1s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}

  /* ---------- footer ---------- */
  .foot{
    position:relative;z-index:3;
    margin:34px calc(var(--W) * .064) 0 calc(var(--W) * .06);
    padding-top:18px;border-top:1px solid #e6d9ce;
    text-align:center;
  }
  .foot-links{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:8px 0;font-size:12px;line-height:1.6;
  }
  .foot-links a{color:var(--gray);text-decoration:none;padding:0 10px;}
  .foot-links a + a{border-left:1px solid #d6c5b8;}
  .foot-links a:hover{color:var(--ink);text-decoration:underline;}
  .foot-copy{margin-top:12px;font-size:11px;color:var(--gray);letter-spacing:.04em;}

  .fade{animation:fade .28s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}