:root{
  --brand:#2C7A7B; --accent:#E07A5F;
  --ink:#23201D; --ink-soft:#6E675F; --line:#E8E3DB;
  --bg:#F6F4EF; --card:#FFFFFF;
  --radius:20px;
  --shadow:0 10px 40px rgba(35,32,29,.08), 0 2px 6px rgba(35,32,29,.04);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(120% 60% at 15% -10%, color-mix(in srgb,var(--brand) 10%, transparent), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, color-mix(in srgb,var(--accent) 8%, transparent), transparent 55%);
  background-attachment:fixed;
  min-height:100dvh;
  display:flex; justify-content:center; align-items:flex-start;
  padding:max(22px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
  line-height:1.8; letter-spacing:.01em;
}
.card{
  width:100%; max-width:480px; background:var(--card);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.hd{
  padding:36px 26px 24px; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%, #fff), #fff);
  border-bottom:1px solid color-mix(in srgb,var(--brand) 12%, var(--line));
}
.hd-eyebrow{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:11px;letter-spacing:.42em;color:var(--brand);margin-bottom:12px;}
.hd h1{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:27px;line-height:1.3;letter-spacing:.02em;}
.hd-sub{font-size:13px;color:var(--ink-soft);margin-top:13px;line-height:1.85;}
.progress{height:3px;background:var(--line);}
.progress .bar{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 70%,var(--accent)));transition:width .55s cubic-bezier(.4,0,.2,1);}
.step{display:none;padding:30px 26px 32px;}
.step.active{display:block;animation:fadeUp .5s cubic-bezier(.2,.7,.2,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.step-label{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:11px;letter-spacing:.3em;color:var(--brand);margin-bottom:10px;}
.step h2{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:20px;line-height:1.5;}
.lead{font-size:13px;color:var(--ink-soft);margin:9px 0 20px;}
textarea{
  width:100%;border:1.5px solid var(--line);border-radius:14px;padding:15px;
  font:inherit;font-size:16px;line-height:1.8;resize:vertical;background:#FCFBF8;color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%, transparent);background:#fff;}
.voice-btn{display:inline-flex;align-items:center;gap:8px;margin:13px 0 0;padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--brand);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;}
.voice-btn:hover{border-color:var(--brand);}
.voice-btn .mic-ico{color:var(--brand);transition:color .2s;}
.voice-btn.recording{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%, #fff);}
.voice-btn.recording .mic-ico{color:var(--accent);animation:micpulse 1.2s ease-in-out infinite;}
@keyframes micpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(1.18);}}
.voice-btn.hero{width:100%;justify-content:center;margin:4px 0 14px;padding:14px;font-size:15px;background:color-mix(in srgb,var(--brand) 8%, #fff);border-color:color-mix(in srgb,var(--brand) 35%, var(--line));}
.voice-btn.hero:hover{background:color-mix(in srgb,var(--brand) 13%, #fff);border-color:var(--brand);}
.tags-label{font-size:12px;color:var(--ink-soft);margin:2px 2px 10px;}
/* アンケート（2026-08-31 選択式化）。設問ごとにひとかたまりにして、タップ位置を迷わせない。 */
.q{margin-bottom:4px;}
.q-label{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:15px;color:var(--ink);margin:0 2px 11px;line-height:1.5;}
.q-label.optional{font-weight:500;color:var(--ink-soft);font-size:14px;}
.meter{font-size:12px;color:var(--ink-soft);text-align:right;margin:10px 2px 18px;}
.meter-hint{font-weight:700;color:var(--accent);}
.btn{
  display:block;width:100%;border:none;border-radius:999px;
  background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:16px;
  padding:16px;cursor:pointer;
  transition:transform .12s ease, box-shadow .25s, opacity .2s, background .2s;
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 32%, transparent);
}
.btn:hover{box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 40%, transparent);}
.btn:active{transform:scale(.97);}
.btn:disabled{background:#D2CDC4;color:#fff;box-shadow:none;cursor:not-allowed;}
.btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand);box-shadow:none;margin-top:12px;}
/* <a class="btn"> をボタンと同じ見た目にする（ネイティブ遷移＝ポップアップブロック回避のため） */
a.btn{display:block;text-align:center;text-decoration:none;line-height:1.4;}
a.btn.disabled{background:#D2CDC4;color:#fff;box-shadow:none;cursor:not-allowed;pointer-events:none;}
.post-hint{font-size:12px;color:var(--ink-soft);text-align:center;margin:10px 2px 0;line-height:1.7;}
/* 店舗用の返信画面（reply.html）で使う */
.pass-input{width:100%;padding:14px 15px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#FCFBF9;color:var(--ink);margin-bottom:16px;}
.pass-input:focus{outline:none;border-color:var(--brand);}
.warn{background:#FDF3F0;border:1px solid color-mix(in srgb,var(--accent) 35%, #fff);border-radius:11px;padding:12px 14px;font-size:12.5px;line-height:1.8;color:var(--ink);margin:4px 0 18px;}
.warn b{color:var(--accent);}
.link{display:block;margin:16px auto 0;background:none;border:none;color:var(--ink-soft);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;}
.chip{
  border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:11px 17px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;
  transition:all .18s ease;
}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-1px);box-shadow:0 5px 14px color-mix(in srgb,var(--brand) 28%, transparent);}
.opts{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.opt{
  border:1.5px solid var(--line);border-left:4px solid color-mix(in srgb,var(--brand) 45%,var(--line));
  border-radius:14px;padding:16px 16px 16px 18px;font-size:15px;line-height:1.85;
  cursor:pointer;background:#fff;transition:all .18s ease;
}
.opt:hover{border-color:var(--brand);border-left-color:var(--brand);background:color-mix(in srgb,var(--brand) 4%, #fff);}
.opt:active{transform:scale(.99);}
.edit-status{font-size:13px;margin:12px 0;font-weight:700;min-height:1.2em;}
.edit-status.ok{color:#2F855A;}
.edit-status.ng{color:var(--accent);}
.chk{display:flex;align-items:center;gap:11px;font-size:14px;margin:13px 0;cursor:pointer;}
.chk input{width:20px;height:20px;accent-color:var(--brand);flex-shrink:0;}
.done-mark{
  width:66px;height:66px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 36%, transparent);
  animation:pop .5s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.final-preview{background:#F6F4EF;border-radius:13px;padding:16px 17px;font-size:14px;line-height:1.9;color:var(--ink);margin-bottom:20px;white-space:pre-wrap;border:1px solid var(--line);}
.thanks{color:var(--brand);font-weight:700;text-align:center;margin-top:18px;font-family:"Zen Kaku Gothic New",sans-serif;}
.privacy-note{font-size:12px;color:var(--ink-soft);line-height:1.7;background:#F7F7F5;border-radius:10px;padding:10px 12px;margin:18px 0 12px;}
.privacy-note b{font-weight:700;color:var(--ink);}
.assist-note{font-size:11px;color:var(--ink-soft);text-align:center;padding:4px 26px 26px;line-height:1.75;}
@keyframes shake{10%,90%{transform:translateX(-2px);}30%,70%{transform:translateX(4px);}50%{transform:translateX(-6px);}}
.shake{animation:shake .4s;}