@charset "UTF-8";
/* 可愛い丸ゴシック（見出し用・Design fix #1 ①）*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
/* ============================================================
 * 婚活シミュレーション /simulation 専用CSS
 * ムスベル /c/diagnose/ 忠実トレース（Task 3）
 * 測定土台: _reports/musbell-measurements.md（Pillow実測・1440px基準）
 * トークン: design.md §7 / design-tokens.json
 *   accent #31a193 / bg #ffffff / text #212529 / hero band #F9F6F1
 *   見出し Noto Serif JP w500 ls .8px / 角丸10px
 *   影 rgb(126,196,187) 3px 3px 0 0 は【送信ボタンのみ】（選択肢ボタンには付けない）
 * ============================================================ */

:root {
  --sim-accent: #d32f2f;          /* メルティア赤（Design fix #1 ⑤⑦-α・旧ムスベルティール#31a193） */
  --sim-link-blue: #2f9fd6;       /* プライバシーリンク専用の水色（Design fix #1 ⑥） */
  --sim-text: #212529;
  --sim-bg: #ffffff;
  --sim-hero-bg: #F9F6F1;
  --sim-border: #dbdbdb;
  --sim-submit-border: #7ec4bb;   /* rgb(126,196,187) */
  --sim-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --sim-radius: 10px;
  --sim-col: 769px;               /* コンテンツ列幅（実測） */
  --sim-gap: 13px;                /* 選択肢ボタン gap（横・縦共通） */
}

/* ---- ページ全体 ---------------------------------------- */
.sim-simulation-form,
.sim-hero {
  color: var(--sim-text);
  line-height: 1.9;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* コンテンツ列（設問・入力・送信が乗る中央カラム 769px） */
.sim-page {
  /* 実測: 選択肢ボタンが span する列幅=769px。左右22pxパディングを足した外寸を max-width に */
  max-width: calc(var(--sim-col) + 44px);
  margin: 0 auto;
  padding: 0 22px 80px;
  box-sizing: border-box;
}

/* ============================================================
 * ヒーロー帯（full-bleed・高さ548px・bg #F9F6F1）
 * ============================================================ */
.sim-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* 親コンテナに関係なく全幅化 */
  background: var(--sim-hero-bg);
  overflow: hidden;
}
.sim-hero__inner {
  position: relative;
  min-height: 548px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}
/* 中央の見出し＋リード */
.sim-hero__body {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 620px;                /* Design fix #1 ②: リード文が長くなったので少し拡幅（孤立文字回避・左右イラストとは非重複） */
  margin: 0 auto;
  padding-top: 220px;              /* 見出しを実測の縦位置(帯上端から約220px)へ寄せる */
}
.sim-hero__title {
  /* Design fix #1 ①: 可愛い丸ゴシック＋サイズ縮小（40px→30px） */
  font-family: "Zen Maru Gothic", var(--sim-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 1.2px;
  color: var(--sim-text);
  line-height: 1.3;
  margin: 0 0 30px;
}
.sim-hero__lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--sim-text);
  letter-spacing: 0.4px;
  margin: 0;
}

/* 左右イラスト（装飾・絶対配置） */
.sim-hero__illust {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}
.sim-hero__illust--left  { left: 3%;  }
.sim-hero__illust--right { right: 3%; }
.sim-hero__part {
  display: block;
  height: auto;
}
.sim-hero__part--01 { width: 400px; }   /* 男性イラスト（Design fix #1 ③ 300px→400px） */
.sim-hero__part--02 { width: 350px; }   /* 女性イラスト（Design fix #1 ③ 260px→350px） */
/* スマホ重ね素材はイラスト内に既に含意・二重表示回避で非表示 */
.sim-hero__part--05,
.sim-hero__part--06 { display: none; }

/* ---- 淡ピンクの光ブロブ＋キラキラ（Design fix #1 ④・ムスベル風） ----
 * z-index 0＝イラスト(z1)・中央コピー(z2)より下。装飾なのでクリック不可。 */
.sim-hero__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
  display: block;
}
/* 光ブロブ（figure 背後の柔らかいピンクの光） */
.sim-hero__deco--glow-r { right: 0.5%;  top: 50%; transform: translateY(-50%); width: 360px; opacity: .85; }
.sim-hero__deco--glow-l { left: 0.5%;   top: 50%; transform: translateY(-50%); width: 320px; opacity: .7;  }
/* キラキラ星（女性側=右に多め・男性側=左に少し） */
.sim-hero__deco--spark-r1 { right: 14%; top: 24%; width: 116px; }
.sim-hero__deco--spark-r2 { right: 4%;  top: 60%; width: 86px;  }
.sim-hero__deco--spark-l1 { left: 13%;  top: 22%; width: 96px;  }
.sim-hero__deco--spark-l2 { left: 3%;   top: 66%; width: 70px;  }

/* fade-in */
.sim-hero .js-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.sim-hero .js-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
 * 設問ブロック
 * ============================================================ */
.sim-q {
  margin: 0;
  padding-top: 73px;               /* ブロック間の縦アキ（実測73px） */
}
.sim-q:first-child { padding-top: 56px; }

/* 「— Question N —」eyebrow（細セリフ・アクセント・中央） */
.sim-q__eyebrow {
  font-family: var(--sim-serif);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 4px;
  color: var(--sim-accent);
  text-align: center;
  margin: 0;
  line-height: 1;
}

/* 設問ラベル（アイコン＋テキスト・中央） */
.sim-q__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;                /* eyebrow → label 35px（実測） */
  min-height: 47px;
}
.sim-q__label-text {
  font-family: var(--sim-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  color: var(--sim-text);
  text-align: center;
}
.sim-q__icon {
  width: auto;
  height: 46px;                    /* ラベルアイコン（実測 約45×47） */
  flex: 0 0 auto;
}
.sim-q__note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin: 8px 0 0;
}

/* ---- 選択肢ボタン（CF7ネイティブlabelをボタン化・JSなし）---- */
.sim-q__options {
  margin-top: 33px;                /* label → options 33px（実測） */
}
/* CF7の入れ子ラッパを素通し */
.sim-q__options .wpcf7-form-control-wrap { display: block; }

/* グリッド本体＝ .wpcf7-radio / .wpcf7-checkbox */
.sim-q__options .wpcf7-radio,
.sim-q__options .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sim-gap);
  justify-content: flex-start;
}
/* 各セル */
.sim-q__options .wpcf7-list-item {
  margin: 0;
  display: block;
}
/* ラベルをボタン見た目に */
.sim-q__options .wpcf7-list-item label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 62px;                    /* ボタン高さ（実測62px・border-box） */
  box-sizing: border-box;
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius);
  background: #fff;
  color: var(--sim-text);
  font-size: 16px;
  letter-spacing: 0.4px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  position: relative;
}
/* input を隠す（JSなし・:checked で見た目切替） */
.sim-q__options input[type="radio"],
.sim-q__options input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.sim-q__options .wpcf7-list-item-label {
  display: block;
  line-height: 1.3;
}
/* hover */
.sim-q__options .wpcf7-list-item label:hover {
  border-color: var(--sim-accent);
}
/* :checked → アクセント枠＋淡塗り */
.sim-q__options input:checked + .wpcf7-list-item-label {
  color: var(--sim-accent);
  font-weight: 700;
}
.sim-q__options .wpcf7-list-item label:has(input:checked) {
  border-color: var(--sim-accent);
  background: rgba(211, 47, 47, 0.08);   /* Design fix #1 ⑦-α: 赤の淡塗り（旧ティール rgba(49,161,147,.08)） */
  color: var(--sim-accent);
  font-weight: 700;
}
/* キーボードフォーカス（隠しinputはopacity:0のため、label側にoutlineを出す・Fix wave） */
.sim-q__options .wpcf7-list-item label:has(input:focus-visible) {
  outline: 2px solid var(--sim-accent);
  outline-offset: 2px;
}

/* 列数別のセル幅（コンテンツ幅769px・gap13pxで算出＝実測一致） */
/* Q1 性別 2列 → 378px */
.sim-q__options [data-name="your-seibetsu"] .wpcf7-list-item { width: calc((100% - var(--sim-gap)) / 2); }
/* Q2 年齢 5列 → 143.4px */
.sim-q__options [data-name="your-aetas"] .wpcf7-list-item { width: calc((100% - (var(--sim-gap) * 4)) / 5); }
/* Q3 条件 4列 → 182.5px */
.sim-q__options [data-name="conditions"] .wpcf7-list-item { width: calc((100% - (var(--sim-gap) * 3)) / 4); }
/* Q4 いつまでに 4列 → 182.5px */
.sim-q__options [data-name="when"] .wpcf7-list-item { width: calc((100% - (var(--sim-gap) * 3)) / 4); }
/* Q5 良い人がいたら 2列 → 378px（Design fix #2: 長いラベルが4列で窮屈だったため2列化・ムスベル元Q6も2列で整合） */
.sim-q__options [data-name="good"] .wpcf7-list-item { width: calc((100% - var(--sim-gap)) / 2); }

/* ============================================================
 * プロフィール入力欄（ラベル左・入力右・実測 447×57）
 * ============================================================ */
.sim-field {
  margin: 22px 0 0;
}
/* 🔴 2026-08-16 前田社長指示：ラベル／ヒント／入力欄を縦に積んで中央寄せにする。
   もとは grid-template-columns: 209px 447px の2列（ラベル左・入力右）だったが、
   ヒント（例文）を label の中に足した時点で3つ目のグリッド項目になり、
   入力欄が209pxの列へ回り込んで左へ寄っていた（実測：右に322pxの余白）。
   単一カラムにしておけば、今後ラベル内の要素が増えても崩れない。 */
.sim-field label {
  display: block;
  text-align: center;
  font-family: var(--sim-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--sim-text);
}
.sim-field label br { display: none; }
.sim-field .wpcf7-form-control-wrap { display: block; }
.sim-field input {
  display: block;
  margin: 0 auto;
  width: 447px;
  height: 57px;
  box-sizing: border-box;
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius);
  background: #fff;
  padding: 0 16px;
  font-size: 16px;
  color: var(--sim-text);
  text-align: left;
  line-height: 1.5;
}
.sim-field input::placeholder { color: #bbb; }
.sim-field input:focus {
  outline: none;
  border-color: var(--sim-accent);
}
/* CF7 バリデーションエラー時 */
.sim-field .wpcf7-not-valid { border-color: #e26b6b; }
.sim-field .wpcf7-not-valid-tip { display: block; text-align: center; }

/* Information ブロックのラベル行はプロフィール見出し */
.sim-q--profile .sim-q__label { margin-bottom: 12px; }

/* ============================================================
 * 同意・送信
 * ============================================================ */
.sim-accept {
  text-align: center;
  margin: 40px 0 0;
  font-size: 15px;
  color: var(--sim-text);
}
.sim-accept .wpcf7-list-item { margin: 0 6px 0 0; }
.sim-accept__note {
  text-align: center;
  font-size: 13px;
  margin: 6px 0 0;
}
/* Design fix #1 ⑥: プライバシーリンクは水色＋下線（ブランド赤にしない・前田社長指示） */
.sim-accept__note a {
  color: var(--sim-link-blue);
  text-decoration: underline;
}
.sim-accept__note a:hover { color: #1f86bb; }

/* 送信ボタン（白地・ティール枠・影は【ここだけ】・幅417px・中央） */
.sim-submit {
  text-align: center;
  margin: 40px 0 0;
  position: relative;
}
/* CF7スピナーを中央寄せの計算から外す（ボタンの中心ズレ防止） */
.sim-submit .wpcf7-spinner {
  position: absolute;
  margin: 0;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
}
.sim-submit .wpcf7-submit,
.sim-submit input[type="submit"] {
  /* Design fix #1 ⑦: メルティア赤の塗りCTA＋淡ピンクのオフセット影 */
  width: 417px;
  max-width: 100%;
  height: 57px;
  box-sizing: border-box;
  background: #d32f2f;
  color: #fff;
  border: 1px solid #d32f2f;
  border-radius: var(--sim-radius);
  box-shadow: rgb(247, 185, 208) 3px 3px 0 0;   /* 淡ピンクの影（送信ボタンのみ） */
  font-family: "Zen Maru Gothic", var(--sim-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sim-submit .wpcf7-submit:hover,
.sim-submit input[type="submit"]:hover {
  background: #b71c1c;   /* 濃赤 */
  color: #fff;
  border-color: #b71c1c;
}
/* キーボードフォーカス（Fix wave） */
.sim-submit .wpcf7-submit:focus-visible,
.sim-submit input[type="submit"]:focus-visible {
  outline: 2px solid #b71c1c;
  outline-offset: 2px;
}

/* CF7 応答メッセージ中央 */
.sim-simulation-form .wpcf7-response-output {
  text-align: center;
  margin: 24px auto 0;
  max-width: var(--sim-col);
}
.sim-simulation-form .wpcf7-spinner { margin: 0 auto; }

/* ============================================================
 * レスポンシブ（<640px：単一カラム・折返し・タッチ44px）
 * ============================================================ */
@media (max-width: 640px) {
  .sim-hero__inner { min-height: 360px; padding: 20px 16px; }
  .sim-hero__title { font-size: 24px; margin-bottom: 20px; }   /* Design fix #1 ① SP 28px→24px */
  .sim-hero__lead { font-size: 15px; }
  .sim-hero__illust { position: static; transform: none; display: none; }
  .sim-hero__deco { display: none; }   /* Design fix #1 ④ SP ではキラキラ/光ブロブも非表示（崩れ防止） */
  .sim-hero__body { max-width: 100%; padding-top: 0; }

  .sim-page { padding: 0 16px 60px; }
  .sim-q { padding-top: 48px; }
  .sim-q__label { gap: 12px; }
  .sim-q__label-text { font-size: 18px; }
  .sim-q__icon { height: 38px; }

  /* 選択肢：全列2カラムへ折返し・タッチターゲット確保 */
  .sim-q__options [data-name] .wpcf7-list-item {
    width: calc((100% - var(--sim-gap)) / 2) !important;
  }
  .sim-q__options .wpcf7-list-item label { height: 52px; min-height: 44px; font-size: 15px; }

  /* 入力欄：ラベル上・入力下の単一カラム */
  .sim-field label {
    display: block;
    text-align: center;
  }
  .sim-field label br { display: block; }
  .sim-field input { width: 100%; height: 52px; margin: 6px auto 0; }

  .sim-submit .wpcf7-submit,
  .sim-submit input[type="submit"] { width: 100%; height: 54px; }
}

/* ============================================================
   SPレイアウト調整：simulation限定・SP専用（@media max-width:640px）・PC非対象
   ① lead 1行目をSPで『どんな人と』の後に改行（.mel-sp-br 出し分け）
   ② PCで左右absoluteの男性/女性/キラキラを、SPでは本文の下に小さく配置
   2026-07-23 前田社長指示 ============================================ */
.mel-sp-br{display:none;}
@media (max-width:640px){
  .mel-sp-br{display:block;}
  .sim-hero__inner{flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:0 14px; padding-bottom:28px;}
  .sim-hero__body{order:0; width:100%; max-width:100%; padding-top:36px; margin-bottom:6px;}
  .sim-hero__illust{position:static; transform:none; display:block;}
  .sim-hero__illust--left{order:1;}
  .sim-hero__illust--right{order:2;}
  .sim-hero__part--01{width:122px;}
  .sim-hero__part--02{width:107px;}
  .sim-hero__deco--spark-l1,
  .sim-hero__deco--spark-r1{display:block; position:absolute; z-index:1; top:auto; width:38px;}
  .sim-hero__deco--spark-l1{left:13%; bottom:118px;}
  .sim-hero__deco--spark-r1{right:13%; bottom:118px;}
}

/* ============================================================
   必須の明示・エラー時の視認性（2026-08-11 追加／電話番号欄の廃止と同時）
   - CF7のradioは `*` の有無に関係なく常に必須（本体 modules/checkbox.php の
     `$tag->is_required() or 'radio' === $tag->type`）。acceptance も optional 未指定で必須。
     つまり全項目が必須だが画面に一切表示が無かったため、冒頭で明示する。
   - 送信時のエラーは固定ページ5106のJS（フォームID5135の関所つき）が
     最初の未入力までスクロールする。
   ============================================================ */
.sim-required-note {
  margin: 0;
  padding-top: 56px;               /* 旧 .sim-q:first-child の上アキをここへ移設 */
  font-family: var(--sim-serif);
  font-size: 14px;
  letter-spacing: 0.6px;
  color: #8a8a8a;
  text-align: center;
}
/* 注記を差し込んだことで .sim-q:first-child が Q1 から外れるため上アキを明示 */
#sim-q1 { padding-top: 28px; }

/* 選択肢グループの未選択メッセージ（.sim-field 側は既存の 316-317 行） */
.sim-q__options .wpcf7-not-valid-tip,
.sim-accept .wpcf7-not-valid-tip {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #e26b6b;
}

@media (max-width: 767px) {
  .sim-required-note { padding-top: 40px; font-size: 13px; }
  #sim-q1 { padding-top: 24px; }
}