/* 買取店わかば 口コミアンケート
   方針：年配の方がスマホで読みやすいよう、文字は大きめ・濃く・太めに。
   ブレークポイント：〜340 / 〜380 / 〜480 / 600〜 */

/* ---- 基本 ---- */
:root{
  --green:#175d49; --ink:#1f2f28; --dark:#14211b; --line:#d4ddd3;
  font-family:"Yu Gothic",Meiryo,system-ui,sans-serif; font-size:17px; font-synthesis:none;
  color:#1b2a23; background:#f5f5ed;
}
*{box-sizing:border-box}
body{margin:0;font-weight:500}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #d69735;outline-offset:4px}
/* 日本語の折り返し：文節ごと（ビルド時に <wbr> を挿入）。全ブラウザで同じ折り返しにする */
h1,.lead,.hint,.note,.howto span,.help p,.choice-box p{word-break:keep-all;overflow-wrap:break-word;line-break:strict}

/* ---- ヘッダー・店名・パネル ---- */
header{max-width:1000px;margin:auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;color:var(--green);font-size:24px;font-weight:800;letter-spacing:3px}
.brand span{display:block;font-size:13px;letter-spacing:2px;margin-top:2px}
.header-note{font-size:14px;color:#33463c}
main{max-width:680px;margin:18px auto;padding:0 12px}
.store{font-size:16px;font-weight:800;margin:0 0 10px 5px;letter-spacing:.06em;color:var(--ink)}
.panel{background:#fff;border:1px solid #e0e5dc;border-radius:16px;padding:22px 18px;box-shadow:0 12px 40px #233a2906}
.panel+.panel{margin-top:12px}
#question,#result{scroll-margin-top:20px}
.eyebrow{font-size:13px;letter-spacing:2px;font-weight:700;color:#3f6a55;margin-bottom:12px}

/* ---- 文字 ---- */
h1{font-size:24px;line-height:1.5;letter-spacing:.02em;margin:0 0 10px;overflow-wrap:break-word;color:var(--dark);font-weight:800;text-wrap:balance}
h1:focus{outline:none}
.lead{font-size:15px;line-height:1.8;color:var(--ink);margin:0 0 10px}
.hint{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 16px}
.note{font-size:14px;line-height:1.8;color:var(--ink);margin:10px 0}
.status{font-size:15px;line-height:1.7;color:var(--ink);margin:10px 0;min-height:22px}
.status:empty{display:none}
.step3{margin:16px 0 10px;font-weight:700}
#answer-count{margin:0;font-size:14px;color:var(--ink)}
label{font-size:15px;font-weight:bold;display:block;margin:20px 0 10px;color:var(--dark)}
#result label{margin-top:12px}

/* ---- ボタン・リンク ---- */
button,.button{font-family:inherit;font-size:16px;cursor:pointer;min-height:52px;border-radius:12px;font-weight:700;padding:14px 18px;text-decoration:none;text-align:center;display:block;line-height:1.6}
.primary{background:var(--green);color:#fff;border:1px solid var(--green);width:100%}
.primary:hover{background:#124b3b}
.primary:disabled{background:#d9e2dc;border-color:#d9e2dc;color:#3c4d43;cursor:default}
.secondary{background:#fff;border:1px solid #6f8b7a;color:var(--green)}
#copy{font-size:17px;min-height:58px}
.review-link.button{margin-top:12px}
.direct{display:block;text-align:center;font-size:15px;font-weight:600;color:var(--green);line-height:1.8;margin-top:14px;text-underline-offset:4px}
.quiet{border:0;background:transparent;font-size:15px;color:#2a3c33;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:15px 8px;min-height:44px}

/* ---- 使い方の案内（番号+見出し+説明+図） ---- */
.time{display:inline-block;background:#eef5ec;color:var(--green);font-size:16px;font-weight:600;padding:8px 16px;border-radius:999px;margin:0 0 16px}
.time b{font-size:21px;font-weight:800}
.howto{list-style:none;counter-reset:step;margin:0 0 16px;padding:0;display:grid;gap:14px}
.howto li{counter-increment:step;display:grid;grid-template-columns:30px minmax(0,22em) auto;justify-content:start;column-gap:14px;row-gap:4px;align-items:center;min-width:0}
.howto li::before{content:counter(step);height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:1}
.howto .ht{display:contents}
.howto b{display:block;font-size:18px;line-height:1.5;color:var(--dark);font-weight:800;grid-column:2;grid-row:1}
.howto span{display:block;min-width:0;font-size:16px;line-height:1.7;color:var(--ink);grid-column:2;grid-row:2}
.howto svg{grid-column:3;grid-row:1 / span 2;width:132px;height:96px}

/* ---- 質問 ---- */
fieldset.question-block{border:0;border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 16px;min-width:0}
fieldset.question-block:last-child{margin-bottom:8px}
legend{font-size:18px;font-weight:800;line-height:1.6;margin-bottom:8px;padding:0;color:var(--dark)}
.answer-grid{display:grid;grid-template-columns:1fr;gap:9px}
#questions fieldset:first-child .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.answer-option{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;margin:0;min-height:56px;padding:10px 12px;font-size:16px;line-height:1.45;font-weight:600;color:var(--dark);border:1px solid #9fb2a5;border-radius:12px;cursor:pointer}
.answer-option:has(input:checked){background:#eef5ec;border:2px solid var(--green)}
.answer-option:focus-within{outline:2px solid #d69735;outline-offset:2px}
.answer-option input{accent-color:var(--green);width:22px;height:22px;margin:0;flex-shrink:0}
.answer-option.skip,.answer-option.skip:has(input:checked){grid-column:1/-1;justify-self:start;min-height:48px;padding:8px 12px;font-size:15px;color:#2a3c33;border:0}

/* ---- 下書き・ヘルプ・フッター ---- */
textarea{font:17px/1.8 "Yu Gothic",Meiryo,sans-serif;font-weight:500;width:100%;resize:vertical;min-height:180px;padding:14px;color:var(--dark);background:#fcfdf9;border:1px solid #7f9787;border-radius:12px}
textarea::placeholder{color:#55665d;opacity:1}
.help{background:#eef1e8;border-radius:12px;margin:12px 0;padding:12px;font-size:15px;line-height:1.8;text-align:left}
.help summary{font-size:16px;font-weight:700}
.help p:last-child{margin-bottom:0}
details{margin:14px auto;max-width:540px}
summary{cursor:pointer}
details p{text-align:left}
footer{text-align:center;color:var(--ink);font-size:14px;line-height:1.9;margin:18px 0}
footer a,footer summary{color:var(--green);font-size:14px}

/* ---- 画面内の確認（更新する？／終了する？） ---- */
.choice-box{background:#fff7e6;border:2px solid #d69735;border-radius:12px;padding:14px;margin:12px 0}
.choice-box p{margin:0 0 10px;font-size:16px;font-weight:600;line-height:1.7;color:var(--dark)}
.choice-row{display:grid;gap:10px}

/* ---- 画面幅ごとの調整 ---- */
@media(min-width:600px){
  .panel{padding:26px 28px}
  .answer-grid,#questions fieldset:first-child .answer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #questions fieldset:not(:first-child) .answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .howto li{grid-template-columns:30px 1fr auto;column-gap:12px;row-gap:6px}
  .howto span{grid-column:2 / -1}
  .howto svg{grid-row:1;width:112px;height:82px}
}
@media(max-width:380px){
  #questions fieldset:first-child .answer-option{font-size:15px;padding:10px;gap:8px}
}
@media(max-width:340px){
  .time{font-size:14px;padding:8px 12px}.time b{font-size:18px}
  .howto svg{width:84px;height:61px}
  #questions fieldset:first-child .answer-grid{grid-template-columns:1fr}
}