/* =========================================================================
 * style.css — お問い合わせフォーム(index.php / thanks.php)用CSS
 * =========================================================================
 * お得メーター本体の common.css / page.css と同じデザイントークン・同じ部品を使っています
 * (濃色ヘッダー/フッター、紙色の背景、白いパネル、真鍮色の見出し棒、濃色ボタン)。
 * 色を変えたいときは :root の変数を直してください。本体サイトと値をそろえておくと統一感が保てます。
 *
 * ※ 外部フォント(Google Fonts)は読み込みません。本体サイトと同じ端末標準フォントを使います。
 * ※ 管理画面は assets/css/admin.css を使うので、このファイルの影響を受けません。
 * ========================================================================= */

:root{
  /* 基本パレット(計器盤テーマ)= 本体 common.css と同じ値 */
  --ink:#1b1f27; --ink-2:#252b36; --ink-3:#323a48;
  --paper:#f6f4ee; --panel:#ffffff;
  --line:#e4e0d4; --line-soft:#eeece3; --line-dash:#d5d0c2;
  --sub:#5b6270; --sub-on-dark:#9aa2b1;
  --brass:#c08a2e; --brass-bright:#e0a94a; --brass-text:#80570c;
  --needle:#d14343; --needle-deep:#a83232;
  --green:#2f6a4b; --green-bg:#f2f7f2; --zone-high:#4f9a72;
  --down:#c02626; --down-bg:#fdeeee;
  --radius:16px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
}

/* ---------- ベース ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.85;-webkit-text-size-adjust:100%;
  min-height:100vh;display:flex;flex-direction:column}
a{color:var(--needle-deep)}
img{max-width:100%}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- サイト共通ヘッダー(濃色バー) ---------- */
.site-chrome-top{background:var(--ink);color:#fff}
.site-chrome-top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1040px;margin:0 auto;padding:14px 20px}
.site-chrome-top .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  font-weight:800;font-size:15.5px;letter-spacing:.02em;white-space:nowrap;flex:none}
.site-chrome-top .brand svg{width:26px;height:26px;flex:none}
.site-chrome-top nav{display:flex;gap:20px;font-size:13px;justify-content:flex-end}
.site-chrome-top nav a{text-decoration:none;color:var(--sub-on-dark);white-space:nowrap}
.site-chrome-top nav a:hover{color:#fff}
/* 広い画面(1141px〜)は6つのキャンペーンを個別に、それより狭いときは「お得な日」1つ */
.site-chrome-top nav .nav-pc{display:none}
@media(min-width:1141px){
  .site-chrome-top nav .nav-pc{display:inline}
  .site-chrome-top nav .nav-sp{display:none}
}
/* スマホ: 1行目=ロゴ、2行目=メニュー(3つ。折り返さない) */
@media(max-width:520px){
  .site-chrome-top .bar{flex-wrap:wrap;gap:6px 10px;padding:12px 16px 8px}
  .site-chrome-top nav{width:100%;justify-content:space-between;gap:8px;font-size:13px;
    border-top:1px solid rgba(255,255,255,.12);padding-top:2px}
  .site-chrome-top nav a{padding:8px 0}
}

/* ---------- サイト共通フッター(濃色) ---------- */
.site-chrome-foot{background:var(--ink);color:var(--sub-on-dark);padding:34px 0 30px;font-size:12.5px;margin-top:48px}
.site-chrome-foot .inner{max-width:1040px;margin:0 auto;padding:0 20px}
.site-chrome-foot .fbrand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;
  font-size:14px;margin-bottom:10px}
.site-chrome-foot .fbrand svg{width:20px;height:20px}
.site-chrome-foot a{color:var(--sub-on-dark);text-decoration:none}
.site-chrome-foot a:hover{color:#fff}
.site-chrome-foot .flinks{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}
.site-chrome-foot p{margin:5px 0}

/* ---------- アクセシビリティ ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);font-weight:700;
  padding:10px 16px;border-radius:0 0 10px 10px;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.skip-link:focus{top:0}

/* ---------- ページ見出し(濃色の帯。本体 page.css の .page-head と同じ) ---------- */
.shell{max-width:760px;margin:0 auto;padding:0 20px}
.page-head{background:var(--ink);color:#fff;padding:8px 0 40px}
.eyebrow{font-size:11.5px;letter-spacing:.22em;font-weight:700;color:var(--brass-bright);margin:0 0 10px}
.page-head h1{font-size:clamp(21px,4.6vw,27px);font-weight:800;margin:0 0 10px;letter-spacing:.01em}
.page-head p{color:var(--sub-on-dark);font-size:13.8px;margin:0}

/* ---------- 本文の白いカード(本体の .doc / .panel と同じ) ---------- */
main{flex:1;padding:36px 0 20px;width:100%}
.doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}
@media(max-width:600px){.doc{padding:22px 18px}}
.doc h2{font-size:16.5px;font-weight:800;margin:32px 0 10px;display:flex;align-items:center;gap:8px}
.doc h2:first-child{margin-top:0}
.doc h2::before{content:"";width:4px;height:16px;background:var(--brass);border-radius:2px;flex:none}
.doc p{margin:8px 0}
.doc ul{margin:8px 0;padding-left:1.3em}
.doc li{margin:4px 0}
.doc small{color:var(--sub);font-size:12.5px}
.doc hr{border:none;border-top:1px solid var(--line);margin:28px 0}

/* 注意書き(本体 common.css の .warn と同じ色) */
.warn{background:#fdf3ec;border:1px solid #ecd4bf;border-radius:10px;padding:10px 14px;
  font-size:12.8px;color:#8a5323;margin:12px 0}
.warn strong{color:var(--needle-deep)}
/* エラー表示(本体 common.css の .alert と同じ色) */
.alert{background:var(--down-bg);border:1px solid #f0c9c9;color:#8e0000;border-radius:12px;
  padding:12px 14px;margin:0 0 20px;font-size:13.5px}

/* ---------- フォーム ---------- */
.field{margin-bottom:20px}
label,.label{display:block;font-size:13px;font-weight:700;color:var(--ink-3);margin-bottom:7px}
.req{display:inline-block;margin-left:7px;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:800;
  line-height:1.7;vertical-align:1px;background:var(--needle);color:#fff;letter-spacing:.04em}
input,textarea,select{
  width:100%;background:#fff;border:1px solid var(--line-dash);border-radius:10px;
  padding:11px 14px;font-family:var(--sans);font-size:16px;color:var(--ink);line-height:1.6;
  transition:border-color .15s, box-shadow .15s;outline:none;appearance:none;-webkit-appearance:none}
input::placeholder,textarea::placeholder{color:#9a9fa9}
input:focus,textarea:focus,select:focus{border-color:var(--brass);box-shadow:0 0 0 3px rgba(192,138,46,.2)}
textarea{resize:vertical;min-height:140px;line-height:1.7}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231b1f27' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer}
.hint{font-size:12px;color:var(--sub);margin:6px 0 0}

/* スパム対策の計算問題(本体の「次回」枠と同じ、あたたかい紙色) */
.captcha-box{background:#fdf6e6;border:1px solid #ecd9a8;border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.captcha-question{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);flex-shrink:0}
.captcha-box input{width:84px;text-align:center;font-family:var(--mono);font-size:18px;padding:8px 10px}
.captcha-label{font-size:12px;color:#7a5300;flex:1;line-height:1.5;min-width:9em}
.captcha-refresh{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-3);padding:6px 12px;
  border:1px solid var(--line-dash);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,color .15s}
.captcha-refresh:hover{border-color:var(--ink);color:var(--ink)}
.captcha-refresh:disabled{opacity:.45;cursor:default}

/* ---------- ボタン(本体の .btn-primary と同じ) ---------- */
.btn-primary,.submit-btn{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:10px;
  padding:12px 20px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;
  text-decoration:none;display:inline-block;text-align:center;transition:background .15s,border-color .15s}
.btn-primary:hover,.submit-btn:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn-primary:disabled,.submit-btn:disabled{opacity:.55;cursor:not-allowed}
.submit-btn{width:100%;padding:14px;letter-spacing:.04em}
.btn-secondary{background:#fff;color:var(--ink-3);border:1px solid var(--line-dash);border-radius:10px;
  padding:12px 20px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;
  text-decoration:none;display:inline-block;text-align:center;transition:border-color .15s,color .15s}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.privacy-note{font-size:12px;color:var(--sub);text-align:center;margin:14px 0 0;line-height:1.7}

/* ---------- 送信完了ページ ---------- */
.thanks-card{text-align:center}
.success-ring{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-size:34px;font-weight:700;
  animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) both}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.success-ring{animation:none}}
.thanks-card h2{justify-content:center;font-size:20px;margin:0 0 8px}
.thanks-card h2::before{display:none}
.subtitle{font-size:14px;color:var(--sub);margin:0 0 26px}

.receipt{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 20px;text-align:left;margin-bottom:22px}
.receipt-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line-dash);font-size:14px}
.receipt-row:last-child{border-bottom:none}
.receipt-row .lbl{color:var(--sub);font-size:12.5px;font-weight:700;white-space:nowrap}
.receipt-row .val{font-weight:700;text-align:right;word-break:break-all}
.receipt-id{font-family:var(--mono);font-size:19px;color:var(--needle-deep);font-weight:800;letter-spacing:.02em}

.autoreply-note{font-size:13px;color:var(--green);background:var(--green-bg);border:1px solid #cfe3d5;
  border-radius:10px;padding:11px 14px;margin-bottom:26px;line-height:1.7;text-align:left}
.autoreply-note strong{word-break:break-all}

.countdown-wrap{margin-bottom:22px}
.countdown-label{font-size:12.5px;color:var(--sub);margin-bottom:10px}
.countdown-ring-wrap{position:relative;width:64px;height:64px;margin:0 auto 8px}
.countdown-ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{stroke:var(--line);fill:none}
.ring-fg{stroke:var(--brass);fill:none;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.countdown-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink)}
.countdown-text{font-size:12.5px;color:var(--sub)}


/* ---------- やり取り(メールのリンクから開く続きの画面) ---------- */
.thread{display:flex;flex-direction:column;gap:14px;margin:12px 0 4px}
.msg{max-width:88%}
.msg-meta{font-size:12px;color:var(--sub);margin-bottom:4px;display:flex;gap:10px;align-items:baseline}
.msg-meta time{font-family:var(--mono);font-size:11px;opacity:.8}
.msg-body{border-radius:12px;padding:12px 15px;font-size:14.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.msg-user{align-self:flex-start}
.msg-user .msg-body{background:var(--paper);border:1px solid var(--line)}
.msg-admin{align-self:flex-end}
.msg-admin .msg-meta{justify-content:flex-end}
.msg-admin .msg-body{background:var(--ink);color:#fff}
.fixed-info{margin:0;padding:11px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:14.5px;word-break:break-all}
@media(max-width:600px){.msg{max-width:100%}}