:root{
    --blue:#6886cc;          /* Qアイコン・矢印・ドット・戻るボタン */
    --blue-deep:#4f6fbe;
    --blue-bg:#ebf2fd;       /* 選択肢の背景 */
    --blue-line:#d5e1f6;
    --coral:#e0907d;         /* 「あと○つ」の数字 */
    --dot-off:#d2d3d3;
    --line-green:#06C755;
    --ink:#111111;
    --gray:#7a8499;
    --W:min(100vw,500px);    /* ステージ幅 */
    --u:calc(var(--W) / 500);/* デザイン(500px)の1pxに相当 */
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
    background:#e6edf9;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:#fdfdfd url("background.png") no-repeat top center / 100% auto;
    padding:0 0 calc(var(--u) * 16);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(50,80,160,.18);}
  }

  /* ---------- header ---------- */
  .topline{position:relative;height:calc(var(--u) * 208);}
  .brand{position:absolute;left:calc(var(--u) * 4);top:calc(var(--u) * 3);width:calc(var(--u) * 170);z-index:2;}
  .brand img{width:100%;height:auto;display:block;}
  .advisor{position:absolute;left:calc(var(--u) * 250);top:calc(var(--u) * 27);width:calc(var(--u) * 249);height:auto;z-index:1;}
  .bubble{
    position:absolute;left:calc(var(--u) * 23);top:calc(var(--u) * 88);z-index:2;
    font-weight:700;color:var(--ink);font-size:calc(var(--u) * 25);line-height:1.42;letter-spacing:.01em;
    text-shadow:0 0 6px rgba(255,255,255,.8);
  }

  /* ---------- card（白い箱なし・背景に直置き） ---------- */
  .card{position:relative;z-index:3;padding:0 calc(var(--u) * 16);}

  /* progress */
  .progress{display:flex;align-items:center;gap:calc(var(--u) * 40);margin:0 0 calc(var(--u) * 16);}
  .count{
    display:inline-flex;align-items:center;justify-content:center;
    width:calc(var(--u) * 129);height:calc(var(--u) * 51);border-radius:999px;background:#fff;
    box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0,0,0,.16);
    font-weight:700;font-size:calc(var(--u) * 24);color:var(--ink);white-space:nowrap;
  }
  .count b{color:var(--coral);font-size:calc(var(--u) * 34);margin:0 calc(var(--u) * 5);line-height:1;font-weight:900;}
  .dots{display:flex;align-items:center;}
  .dot{width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;background:var(--dot-off);position:relative;flex:0 0 auto;}
  .dot + .dot{margin-left:calc(var(--u) * 19);}
  .dot + .dot::before{content:"";position:absolute;right:100%;top:50%;width:calc(var(--u) * 19);height:2px;margin-top:-1px;background:#dadadc;}
  .dot.on,.dot.done{background:var(--blue);}
  .dot.on::before,.dot.done::before{background:var(--blue);}
  .progress.center{justify-content:center;margin-top:calc(var(--u) * 10);}

  /* question head */
  .qhead{display:flex;align-items:center;gap:calc(var(--u) * 10);margin:0 0 calc(var(--u) * 12) calc(var(--u) * 11);}
  .qicon{
    flex:0 0 auto;width:calc(var(--u) * 52);height:calc(var(--u) * 52);border-radius:50%;background:var(--blue);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:900;font-size:calc(var(--u) * 30);font-family:Arial,"Helvetica Neue",sans-serif;
  }
  .qtext{font-weight:500;font-size:calc(var(--u) * 26);line-height:1.4;color:var(--ink);}
  .qtext.oneline{font-size:calc(var(--u) * 24.5);white-space:nowrap;letter-spacing:-.02em;}
  .qtext.oneline br{display:none;}

  /* options */
  .opts{display:grid;gap:calc(var(--u) * 5);margin:0 calc(var(--u) * 39);}
  .opts.two{grid-template-columns:1fr 1fr;gap:calc(var(--u) * 6);}
  .opts.one{grid-template-columns:1fr;}
  .opt{
    appearance:none;border:none;background:var(--blue-bg);cursor:pointer;
    border-radius:calc(var(--u) * 14);min-height:calc(var(--u) * 65);
    display:flex;align-items:center;gap:calc(var(--u) * 10);
    padding:calc(var(--u) * 8) calc(var(--u) * 11) calc(var(--u) * 8) calc(var(--u) * 15);
    font-family:inherit;font-weight:500;font-size:calc(var(--u) * 25);color:var(--ink);
    text-align:left;line-height:1.35;transition:.15s;
  }
  .opt .oico{flex:0 0 auto;width:calc(var(--u) * 47);height:calc(var(--u) * 47);display:block;margin-right:calc(var(--u) * 26);}
  .opt .olabel{flex:1 1 auto;}
  .opt .oarrow{
    flex:0 0 auto;width:calc(var(--u) * 45);height:calc(var(--u) * 45);border-radius:50%;background:var(--blue);position:relative;
  }
  .opt .oarrow::after{
    content:"";position:absolute;left:50%;top:50%;width:calc(var(--u) * 10);height:calc(var(--u) * 10);
    border:solid #fff;border-width:2px 2px 0 0;transform:translate(-65%,-50%) rotate(45deg);
  }
  .opts.two .opt{font-size:calc(var(--u) * 23);padding-left:calc(var(--u) * 18);}
  .opts.two .opt .oarrow{width:calc(var(--u) * 34);height:calc(var(--u) * 34);}
  .opts.two .opt .oarrow::after{width:calc(var(--u) * 8);height:calc(var(--u) * 8);}
  .opts.one.long .opt{font-size:calc(var(--u) * 21.5);min-height:calc(var(--u) * 60);padding-left:calc(var(--u) * 20);}
  .opt:hover{background:#dde8fb;}
  .opt.sel{background:var(--blue);color:#fff;}
  .opt.sel .oarrow{background:#fff;}
  .opt.sel .oarrow::after{border-color:var(--blue);}

  /* back */
  .back{display:flex;justify-content:flex-start;margin:calc(var(--u) * 40) 0 0 calc(var(--u) * 10);position:relative;z-index:3;}
  .back:empty{display:none;}
  .backbtn{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:calc(var(--u) * 156);height:calc(var(--u) * 38);padding:0 calc(var(--u) * 12);
    background:var(--blue);border:none;border-radius:999px;color:#fff;
    font-family:inherit;font-size:calc(var(--u) * 17);font-weight:500;cursor:pointer;
  }
  .backbtn:hover{background:var(--blue-deep);}
  .backbtn[disabled]{opacity:.45;cursor:default;}

  /* ---------- 最終フォーム ---------- */
  .req{display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:700;
    border-radius:5px;padding:3px 9px;margin-right:10px;vertical-align:middle;}
  .flabel{font-weight:700;color:var(--ink);font-size:15px;margin:16px 0 8px;display:flex;align-items:center;}
  .fin{width:100%;border:1.5px solid var(--blue-line);border-radius:10px;padding:12px 14px;font-size:16px;
    color:var(--ink);font-family:inherit;background:#fff;transition:.15s;}
  .fin:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(104,134,204,.18);}
  .fin::placeholder{color:#aab3c5;}
  .telrow{display:flex;align-items:center;gap:8px;}
  .telrow .fin{text-align:center;}
  .telrow span{font-weight:700;}
  .err{color:#d0392b;font-size:12.5px;margin-top:6px;display:none;font-weight:700;}
  .err.show{display:block;}

  .intro{font-weight:700;font-size:21px;line-height:1.5;margin:6px 0 4px;text-align:center;}
  .intro small{display:block;font-weight:500;font-size:13px;color:var(--gray);margin-top:6px;}
  .note{font-size:11.5px;color:#444;line-height:1.6;margin:12px 0;padding-left:1em;text-indent:-1em;}
  .terms{display:flex;gap:12px;align-items:center;background:var(--blue-bg);border-radius:12px;
    padding:12px 14px;font-size:12.5px;line-height:1.6;}
  .terms input{appearance:none;-webkit-appearance:none;flex:0 0 auto;margin:0;cursor:pointer;
    width:24px;height:24px;border:1.6px solid var(--blue);border-radius:5px;background:#fff;position:relative;}
  .terms input:checked{background:var(--blue);}
  .terms input:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
    border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);}
  .terms a{color:var(--blue-deep);text-decoration:underline;font-weight:700;}

  .flabel.method{margin-top:6px;}
  .methods{display:grid;gap:10px;margin-top:8px;}
  .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 5px 12px rgba(50,80,160,.16);}
  .mbtn.line{background:var(--line-green);}
  .mbtn.mail{background:var(--blue);}
  .mbtn:hover{filter:brightness(1.06);}
  .mbtn .ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.25);border-radius:50%;font-size:14px;}
  .mbtn.sel{outline:3px solid rgba(104,134,204,.3);outline-offset:2px;}

  .panel{border-radius:14px;padding:16px 14px;margin-top:14px;background:#fff;border:1.5px solid var(--blue-line);animation:pop .2s ease;}
  @keyframes pop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .panel h4{margin:0 0 6px;font-size:16px;display:flex;align-items:center;}
  .panel p{margin:0 0 10px;font-size:12.5px;color:var(--gray);line-height:1.55;}
  .panel .flabel:first-of-type{margin-top:4px;}
  .hico{width:28px;height:28px;margin-right:8px;flex:0 0 auto;}

  .submit{width:100%;border:none;border-radius:999px;padding:16px 46px;cursor:pointer;margin-top:4px;position:relative;
    font-family:inherit;font-weight:700;font-size:18px;color:#fff;display:flex;align-items:center;justify-content:center;
    transition:.15s;box-shadow:0 6px 14px rgba(50,80,160,.2);}
  .submit.line{background:var(--line-green);}
  .submit.mail{background:var(--blue);}
  .submit:hover{filter:brightness(1.06);}
  .submit[disabled]{opacity:.55;cursor:default;box-shadow:none;}
  .arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:20px;}
  @media(max-width:400px){ .submit{font-size:16px;} }

  .summary{margin-top:18px;border-top:1px dashed var(--blue-line);padding-top:14px;}
  .summary h5{margin:0 0 10px;font-size:14px;display:flex;align-items:center;}
  .chips{display:flex;flex-wrap:wrap;gap:7px;}
  .chip{background:var(--blue-bg);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;color:#333;}

  .thanks{text-align:center;padding:30px 6px;}
  .thanks .big{font-weight:900;font-size:24px;margin:12px 0 8px;}
  .thanks p{font-size:14px;line-height:1.8;}
  .checkmark{width:74px;height:74px;border-radius:50%;background:var(--blue);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(--blue-bg);border-top-color:var(--blue);border-radius:50%;margin:14px auto;animation:sp 1s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}

  .fade{animation:fade .28s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  /* ---------- footer ---------- */
  .foot{position:relative;z-index:3;margin-top:calc(var(--u) * 40);padding:calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 4);
    border-top:1px solid var(--blue-line);text-align:center;}
  .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12px;line-height:1.6;}
  .foot-links a{color:var(--gray);text-decoration:none;}
  .foot-links a:hover{color:var(--blue-deep);text-decoration:underline;}
  .foot-copy{margin-top:10px;font-size:11px;color:var(--gray);}