@charset "UTF-8";

/* MeC service 資料請求フォーム
   配色・書体は mec-account の member.css に合わせている。
   色を変えるときは :root の変数だけを直し、個別セレクタに16進数を書かない。 */

:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;          /* 補助テキスト。白背景で 8.0:1 */
  --line:#d7dde8;           /* 入力欄・カードの枠 */
  --line-soft:#e8edf5;      /* セクション内の区切り */
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#eff5ff;   /* 選択中の背景 */
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --focus:rgba(37,99,235,.35);
  --radius:14px;
}

*{ box-sizing:border-box; }

/* JS が hidden 属性でセクションを閉じる。display 指定に負けないよう明示する。 */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size:16px;
  line-height:1.75;
}

.page{ padding:24px 16px 72px; }
.container{ max-width:720px; margin:0 auto; }

/* ---------- ページヘッダー ---------- */

.page-header{ margin-bottom:24px; }

.page-title{
  margin:0 0 12px;
  font-size:26px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.01em;
}

.page-lead{ margin:0 0 16px; font-size:16px; }

.assurance{
  margin:0;
  padding:14px 16px 14px 18px;
  list-style:none;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}

.assurance li{
  position:relative;
  padding-left:24px;
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
}

.assurance li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:12px; height:7px;
  border-left:2px solid var(--primary);
  border-bottom:2px solid var(--primary);
  transform:rotate(-45deg);
}

/* ---------- エラー表示 ---------- */

.error-summary,
.send-error{
  margin:0 0 20px;
  padding:16px 18px;
  background:var(--danger-soft);
  border:1px solid var(--danger);
  border-radius:var(--radius);
}

.error-summary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.error-summary__title,
.send-error{ margin:0; font-weight:700; color:var(--danger); }

.error-summary__list{ margin:8px 0 0; padding-left:20px; }
.error-summary__list li{ font-size:15px; }
.error-summary__list a{ color:var(--danger); text-decoration:underline; }

.field__error{
  margin:6px 0 0;
  font-size:14px;
  font-weight:700;
  color:var(--danger);
}

/* ---------- セクション ---------- */

.section{
  margin:0 0 28px;
  padding:24px 20px;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
}

.section__title{
  margin:0 0 4px;
  font-size:20px;
  font-weight:700;
  line-height:1.5;
}

/* fieldset 内の legend を見出しとして使う場合 */
.section__title--legend{ padding:0; }

.section__desc{
  margin:0 0 18px;
  font-size:14px;
  color:var(--muted);
}

.section__title + .field,
.section__title + .row-2,
.section__title + .fieldset{ margin-top:18px; }

/* ---------- フィールド ---------- */

.field{ margin:0 0 20px; }
.field:last-child{ margin-bottom:0; }

.field__label{
  display:block;
  margin:0 0 6px;
  font-size:15px;
  font-weight:700;
}

/* 任意項目はラベルの圧を下げる */
.field__label--optional{ font-weight:500; color:var(--muted); }

.field__help{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  display:block;
  width:100%;
  padding:12px 14px;
  font-family:inherit;
  font-size:17px;          /* 16px 未満にすると iOS で自動ズームする */
  line-height:1.6;
  color:var(--text);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  min-height:48px;
}

textarea{ resize:vertical; }

input::placeholder,
textarea::placeholder{ color:#9aa5b5; }

input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:1px;
  border-color:var(--primary);
}

.field--zip input{ max-width:220px; }

/* ---------- バッジ ---------- */

.badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 8px;
  font-size:12px;
  font-weight:700;
  line-height:1.7;
  border-radius:4px;
  vertical-align:2px;
  white-space:nowrap;
}

.badge--required{ color:#b91c1c; background:var(--danger-soft); border:1px solid #fecaca; }
.badge--optional{ color:var(--muted); background:#f1f5f9; border:1px solid #e2e8f0; }

/* ---------- fieldset ---------- */

.fieldset{
  margin:0 0 24px;
  padding:0;
  border:0;
}

.fieldset:last-child{ margin-bottom:0; }

.fieldset__legend{
  padding:0;
  margin:0 0 10px;
  font-size:15px;
  font-weight:500;
  color:var(--muted);
}

.fieldset--bare{ margin-bottom:0; }

/* ---------- ピル選択（短い選択肢） ---------- */

.pills{ display:flex; flex-wrap:wrap; gap:8px; }

.pill{ position:relative; display:inline-flex; }

/* display:none にするとキーボードで選べなくなるため、透明にして重ねる */
.pill input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.pill__body{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 16px;
  font-size:15px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  transition:background .15s, border-color .15s;
}

.pill input:checked + .pill__body{
  background:var(--primary-soft);
  border-color:var(--primary);
  color:var(--primary-dark);
  font-weight:700;
}

.pill input:focus-visible + .pill__body{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------- 行リスト選択（長い選択肢） ---------- */

.choices{ display:flex; flex-direction:column; gap:8px; }

.choice{ position:relative; display:block; }

.choice input{
  position:absolute;
  left:16px; top:50%;
  width:20px; height:20px;
  margin:0;
  transform:translateY(-50%);
  accent-color:var(--primary);
  cursor:pointer;
}

.choice__body{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:10px 16px 10px 48px;
  font-size:15px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}

.choice input:checked + .choice__body{
  background:var(--primary-soft);
  border-color:var(--primary);
}

.choice input:focus-visible + .choice__body{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.choice--none{ margin-top:4px; }

/* ---------- カード選択（補助テキスト付き） ---------- */

.cards{ display:flex; flex-direction:column; gap:10px; }

.card{ position:relative; display:block; }

.card input{
  position:absolute;
  left:16px; top:20px;
  width:20px; height:20px;
  margin:0;
  accent-color:var(--primary);
  cursor:pointer;
}

.card__body{
  display:block;
  padding:14px 16px 14px 48px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s;
}

.card__title{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}

.card__desc{
  display:block;
  margin-top:2px;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}

.card input:checked + .card__body{
  background:var(--primary-soft);
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary) inset;
}

.card input:focus-visible + .card__body{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------- 同意と送信 ---------- */

.consent{
  position:relative;
  display:block;
  margin:0 0 4px;
}

.consent input{
  position:absolute;
  left:16px; top:50%;
  width:22px; height:22px;
  margin:0;
  transform:translateY(-50%);
  accent-color:var(--primary);
  cursor:pointer;
}

.consent__body{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  min-height:56px;
  padding:12px 16px 12px 50px;
  font-size:16px;
  font-weight:700;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
}

.consent input:checked + .consent__body{
  background:var(--primary-soft);
  border-color:var(--primary);
}

.consent input:focus-visible + .consent__body{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

.consent__link{ color:var(--primary); text-decoration:underline; }

.submit{
  display:block;
  width:100%;
  margin:20px 0 0;
  padding:18px 20px;
  font-family:inherit;
  font-size:19px;
  font-weight:700;
  line-height:1.5;
  color:#fff;
  background:var(--primary);
  border:0;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
  transition:background .15s;
}

.submit:hover{ background:var(--primary-dark); }
.submit:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

.submit:disabled{
  background:#94a3b8;
  box-shadow:none;
  cursor:not-allowed;
}

.submit__note{
  margin:12px 0 0;
  font-size:13px;
  color:var(--muted);
  text-align:center;
}

/* ---------- ハニーポット ---------- */

/* display:none / visibility:hidden は無視するボットがあるため画面外へ飛ばす。 */
.hp{
  position:absolute !important;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------- 完了画面 ---------- */

.thanks{
  padding:32px 24px;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  text-align:center;
}

.thanks__title{
  margin:0 0 16px;
  font-size:24px;
  font-weight:700;
  line-height:1.5;
}

.thanks__body{ margin:0 0 8px; font-size:16px; }

.thanks__contact{
  margin:16px 0 0;
  padding:14px 16px;
  font-size:15px;
  background:var(--primary-soft);
  border-radius:10px;
  text-align:left;
}

.thanks__footer{
  margin:24px 0 0;
  font-size:13px;
  color:var(--muted);
}

.thanks .submit{ max-width:360px; margin-left:auto; margin-right:auto; }

/* ---------- 640px 以上 ---------- */

@media (min-width:640px){
  .page{ padding:40px 24px 96px; }
  .page-title{ font-size:30px; }
  .section{ padding:28px 28px; }

  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .row-2 .field{ margin-bottom:0; }
}

/* ---------- モーション ---------- */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* 完了画面のダウンロードボタン（a 要素に .submit を使う） */
a.submit{ text-decoration:none; text-align:center; }