@charset "utf-8";

/* ══ 無料ホームページ案フォーム(7問ウィザード)══════════════════════════
   2026-08-11 オーナー指示「ホームページ案を受け取る、はプロパゲートと全く同じ仕様にして」。
   参考 = propagateinc.com/web-design/questionnaire を 7 問すべて実機で踏んで採取した仕様。
   色・字は当社のトークン(production.css の :root)をそのまま使う。
   ★見出しの行間は 1.3(このサイトの家の値)。1.35 を超えると公開品質ゲートが赤になる。
   ★隣り合う文字ブロックの隙間は 8px 以上(ゲートの下限がちょうど 6px なので境界に置かない)。
   ══════════════════════════════════════════════════════════════ */

.q-main{padding:clamp(28px,4.4vw,56px) 0 clamp(56px,8vw,104px);background:var(--paper-2);min-height:70vh}

.q-head{text-align:center;margin-bottom:clamp(22px,3vw,36px)}
.q-badge{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;
  font-size:clamp(12.5px,1.3vw,14px);font-weight:900;letter-spacing:.04em;
  padding:8px 20px;border-radius:999px;margin-bottom:16px}
.q-head h1{font-size:clamp(23px,3.2vw,36px);font-weight:900;line-height:1.3;margin-bottom:14px}
.q-head h1 em{font-style:normal;color:var(--orange)}
.q-head p{font-size:clamp(13.5px,1.4vw,15.5px);color:var(--text-2);line-height:1.95;
  max-width:46ch;margin-inline:auto;word-break:auto-phrase}

.q-card{background:var(--paper);border:1px solid var(--line);
  padding:clamp(22px,3.4vw,46px);max-width:760px;margin-inline:auto;
  box-shadow:0 30px 66px -44px rgba(20,24,30,.5)}

.q-bar{margin-bottom:clamp(18px,2.4vw,28px)}
.q-bar b{display:block;font-size:12.5px;font-weight:900;color:var(--orange);
  letter-spacing:.08em;margin-bottom:10px}
.q-bar span{display:block;height:5px;background:var(--line-2);border-radius:999px;overflow:hidden}
.q-bar span i{display:block;height:100%;background:var(--orange);border-radius:999px;
  transition:width .45s cubic-bezier(.16,1,.3,1)}

.q-step h2{font-size:clamp(18px,2.3vw,25px);font-weight:900;line-height:1.3;margin-bottom:10px}
.q-note{font-size:12.5px;color:var(--text-3);line-height:1.85;margin-bottom:18px}

.q-opts{display:grid;gap:10px;margin-bottom:clamp(20px,2.6vw,30px)}
.q-opts.is-2col{grid-template-columns:repeat(2,1fr)}
.q-opt{display:block;width:100%;text-align:left;background:var(--paper);
  border:2px solid var(--line);padding:clamp(14px,1.8vw,18px) clamp(14px,1.8vw,20px);
  font-size:clamp(14px,1.5vw,16px);font-weight:700;line-height:1.6;cursor:pointer;
  transition:border-color .2s,background .2s;min-height:56px}
.q-opt:hover{border-color:var(--orange)}
.q-opt.is-on{border-color:var(--orange);background:var(--orange-soft)}
.q-opt small{display:block;margin-top:8px;font-size:12.5px;font-weight:400;color:var(--text-2);line-height:1.8}

.q-field{margin-bottom:clamp(20px,2.6vw,30px)}
.q-field input,.q-field textarea,.q-field select{width:100%;font:inherit;color:var(--text);
  background:var(--paper);border:2px solid var(--line);padding:14px 16px;line-height:1.7;
  border-radius:0;-webkit-appearance:none;appearance:none}
.q-field textarea{min-height:120px;resize:vertical}
.q-field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),
  linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.q-field input:focus,.q-field textarea:focus,.q-field select:focus{outline:none;border-color:var(--orange)}

.q-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.q-nav .btn{min-width:200px;justify-content:center}
.q-back{background:none;border:none;padding:12px 8px;font-size:14px;font-weight:700;
  color:var(--text-3);cursor:pointer;text-decoration:underline;min-height:44px}
.q-back:hover{color:var(--orange)}
.q-err{margin-top:14px;font-size:13px;font-weight:700;color:var(--orange-dark);line-height:1.8}

/* ── 完了画面 ─────────────────────────────────────── */
.q-done-mark{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--orange);
  color:#fff;display:grid;place-items:center;font-size:30px;font-weight:900;line-height:1}
.q-answers{border:1px solid var(--line);margin-bottom:clamp(20px,2.6vw,28px)}
.q-answers h3{font-size:15px;font-weight:900;line-height:1.4;padding:14px 18px;
  background:var(--paper-2);border-bottom:1px solid var(--line);display:flex;
  flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.q-answers button{background:none;border:none;padding:6px 2px;font-size:13px;font-weight:700;
  color:var(--orange-dark);text-decoration:underline;cursor:pointer;min-height:32px}
.q-answers dl{margin:0}
.q-answers dl > div{display:grid;grid-template-columns:minmax(150px,30%) 1fr;gap:8px 18px;
  padding:13px 18px;border-bottom:1px solid var(--line-2)}
.q-answers dl > div:last-child{border-bottom:none}
.q-answers dt{font-size:13px;font-weight:900;color:var(--text-2);line-height:1.7}
.q-answers dd{font-size:14px;line-height:1.8;margin:0;word-break:auto-phrase}

.q-lead{font-size:clamp(13.5px,1.4vw,15.5px);line-height:1.95;margin-bottom:10px;word-break:auto-phrase}
.q-lead + .q-lead{margin-bottom:clamp(20px,2.6vw,28px)}
.q-sub{font-size:13px;font-weight:900;color:var(--text-2);margin-bottom:12px}
.q-checks{display:grid;gap:10px;margin-bottom:clamp(20px,2.6vw,28px)}
.q-check{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  padding:14px 16px;cursor:pointer;min-height:52px}
.q-check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--orange)}
.q-check span{font-size:14px;font-weight:700;line-height:1.7}
.q-label{display:block;font-size:13px;font-weight:900;margin-bottom:10px}
.q-req{display:inline-block;margin-left:8px;background:var(--orange);color:#fff;
  font-size:11px;font-weight:900;padding:3px 8px;border-radius:3px;vertical-align:2px}
.q-agree{margin-bottom:clamp(18px,2.4vw,26px)}
.q-agree a{color:var(--orange-dark);text-decoration:underline}
.q-submit .btn{width:100%;max-width:420px;justify-content:center}
.q-fine{margin-top:14px;font-size:12px;color:var(--text-3);line-height:1.85}

.q-thanks{text-align:center}
.q-thanks h2{font-size:clamp(19px,2.4vw,26px);font-weight:900;line-height:1.3;margin-bottom:14px}
.q-thanks p{font-size:clamp(13.5px,1.4vw,15.5px);color:var(--text-2);line-height:1.95;
  max-width:44ch;margin:0 auto 12px;word-break:auto-phrase}

@media(max-width:600px){
  .q-opts.is-2col{grid-template-columns:1fr}
  .q-nav .btn{width:100%;min-width:0}
  .q-answers dl > div{grid-template-columns:1fr;gap:6px}
}
@media(max-width:430px){
  .q-head h1,.q-step h2,.q-thanks h2,.q-answers h3{line-height:1.3}
}
@media(prefers-reduced-motion:reduce){
  .q-bar span i{transition:none}
}


/* 2026-08-14: ブランド名に「0円」が入り、ヘッダに常時出るようになった。
   商品定義 SoT §0 =「0円を単独で大きく出さない。必ず同じ視界に月額と最低契約6か月を置く」。
   このページには打消し表示が 0 件だったので、規定そのものを 1 行だけ置く(注記は積まない)。 */
.fp-terms{margin-top:28px;text-align:center;font-size:12px;color:#818892;line-height:1.9}