/* CIO Intake — 動的問診フォーム v0.2.0
   スコープ: .cio-intake 配下のみ。テーマのボタン/入力リセットに負けないよう明示指定 */

.cio-intake {
  box-sizing: border-box;
  max-width: 640px;
  /* 下余白でフッター密着を防ぐ。
     ★iPhone Safari は画面下部にURLバーを重ねて表示するため、最後の要素が隠れる
       (テスターA 榎並さん 8/17 No.5: 「※必須入力項目です」が見切れる・「次へ」が隠れる)。
       端末のセーフエリア分を足して、最後の要素の下に必ず余白が残るようにする。 */
  margin: 32px auto calc(96px + env(safe-area-inset-bottom, 0px));
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: #1a2b3c;
  /* 画面切替時の自動スクロールで、サイト共通の固定ヘッダーに質問が隠れないようにする(v0.14.1) */
  scroll-margin-top: 120px;
}
.cio-intake *, .cio-intake *::before, .cio-intake *::after { box-sizing: border-box; }

.cio-intake .cio-intake-card {
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 12px;
  padding: 24px 20px 20px;
  box-shadow: 0 2px 10px rgba(20, 40, 60, .06);
  min-height: 220px;
}

.cio-intake .q {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.cio-intake .note {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #63727f;
}
.cio-intake .note a { color: #0b6fb8; text-decoration: underline; }

/* 選択肢ボタン: 「押せるもの」に見えることを最優先 */
.cio-intake .opts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.cio-intake .opts button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: #f7fafc;
  color: #1a2b3c;
  border: 2px solid #c7d3dd;
  border-radius: 10px;
  padding: 13px 44px 13px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.cio-intake .opts button::after {          /* 右端の矢印で「進む」ことを明示 */
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #8aa0b2;
}
.cio-intake .opts button:focus-visible {
  border-color: #0b6fb8;
  background: #eef6fc;
  outline: none;
}
/* ★hover はマウス環境だけに限定する。タッチ端末では直前にタップした位置に
   hover が貼り付いたままになり、紫の枠が2つ出る(テスターA iPhone 報告)。 */
@media (hover: hover) and (pointer: fine) {
  .cio-intake .opts button:hover {
  border-color: #0b6fb8;
  background: #eef6fc;
  outline: none;
}
}

/* 入力欄 */
.cio-intake input[type="text"],
.cio-intake input[type="email"],
.cio-intake input[type="tel"],
.cio-intake textarea {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  background: #fff;
  color: #1a2b3c;
  border: 2px solid #c7d3dd;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 15px;
  margin: 0 0 10px;
}
.cio-intake input:focus, .cio-intake textarea:focus {
  border-color: #0b6fb8;
  outline: none;
}
.cio-intake textarea { min-height: 120px; resize: vertical; }
.cio-intake .row { display: flex; gap: 10px; }
.cio-intake .row input { flex: 1; }

/* 会員自動充足の表示 */
.cio-intake .prefill {
  background: #eef8f1;
  border: 1px solid #bfe3cc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin: 0 0 12px;
}
.cio-intake .prefill a { color: #0b6fb8; text-decoration: underline; }

/* 進むボタン(プライマリ) */
.cio-intake .nav { margin-top: 14px; }
.cio-intake .nav button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  background: #0b6fb8;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.cio-intake .nav button:hover { background: #095c99; }
.cio-intake .nav button:disabled { background: #9db8ca; cursor: default; }

/* 戻る */
.cio-intake .back { margin: 14px 0 0; font-size: 13px; }
.cio-intake .back a { color: #63727f; text-decoration: underline; }

/* 確認テーブル */
.cio-intake table.cio-confirm {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13.5px;
}
.cio-intake table.cio-confirm th,
.cio-intake table.cio-confirm td {
  border: 1px solid #e2e9ef;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.cio-intake table.cio-confirm th {
  background: #f4f8fb;
  white-space: nowrap;
  width: 30%;
  font-weight: 600;
}

/* 同意欄: テーマが input[type=checkbox] を display:none / appearance:none にしていても
   確実に表示されるよう、チェックボックスを明示的にネイティブ表示へ戻す(土居報告=文言のみ表示への対策) */
.cio-intake .agree {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 4px; font-size: 14px; cursor: pointer;
}
.cio-intake .agree input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  margin: 0; padding: 0;
  opacity: 1; position: static;
  flex: 0 0 auto;
  accent-color: #0b6fb8;
  border: 1px solid #8aa0b2;   /* appearance非対応環境向けの視覚フォールバック */
  display: inline-block;
}
.cio-intake .agree a { color: #0b6fb8; text-decoration: underline; }

.cio-intake .err { color: #c0392b; font-size: 13.5px; margin: 10px 0 0; min-height: 1em; }

@media (max-width: 480px) {
  .cio-intake { margin: 16px auto 72px; }
  .cio-intake .cio-intake-card { padding: 18px 14px 16px; border-radius: 10px; }
  .cio-intake .row { flex-direction: column; gap: 0; }
}

/* ---- v0.3.0 追加 ---- */

/* ログイン誘導カード(非会員の開始画面・メリット提示) */
.cio-intake .login-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #eef6fc 0%, #e3f0fa 100%);
  border: 1px solid #b9d7ee;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.cio-intake .login-cta .lc-txt { flex: 1; font-size: 13px; line-height: 1.6; color: #27506f; }
.cio-intake .login-cta .lc-txt strong { display: block; font-size: 14px; margin-bottom: 2px; color: #0b436e; }
.cio-intake .login-cta .lc-btn {
  flex-shrink: 0;
  display: inline-block;
  background: #0b6fb8;
  color: #fff !important;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cio-intake .login-cta .lc-btn:hover { background: #095c99; }

/* 製品カード(画像+製品名+型番) */
.cio-intake .prods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 4px;
}
.cio-intake .prods .prod-card {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 2px solid #c7d3dd;
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.cio-intake .prods .prod-card:hover,
.cio-intake .prods .prod-card:focus-visible {
  border-color: #0b6fb8;
  background: #f4faff;
  outline: none;
}
.cio-intake .prods .prod-card img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
}
.cio-intake .prods .prod-noimg {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2f6;
  border-radius: 8px;
  font-size: 30px;
  font-weight: 700;
  color: #8aa0b2;
}
.cio-intake .prods .prod-name { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #1a2b3c; }
.cio-intake .prods .prod-model { font-size: 11px; color: #7d8b97; }
/* v0.13.0(パイロット No.11): 保証期限は読み取れる大きさにする(10.5px→13px・太字) */
.cio-intake .prods .prod-warranty {
  font-size: 13px; font-weight: 700; color: #4a2b78; margin-top: 4px; line-height: 1.4;
}
.cio-intake .prods .prod-warranty.expired { color: #c0392b; }
/* v0.14.0: 延長保証の申請日(登録日)。保証期限より控えめに */
.cio-intake .prods .prod-applied { font-size: 11.5px; color: #7d8b97; margin-top: 1px; }

/* v0.13.0(パイロット No.10): 買い替え・回収のご案内を目立たせる */
.cio-intake .recycle {
  background: linear-gradient(135deg, #f6f0ff 0%, #efe4ff 100%);
  border: 2px solid var(--cio-accent-border, #d4bdf7);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
}
.cio-intake .recycle > strong { display: block; font-size: 15px; color: #3a1c66; margin-bottom: 4px; }
.cio-intake .recycle .note { margin: 0 0 10px; color: #4a2b78; }
.cio-intake .rc-links { display: flex; flex-direction: column; gap: 8px; }
.cio-intake .rc-btn {
  display: block; text-align: center; text-decoration: none;
  background: #fff; color: var(--cio-accent, #7d2eff) !important;
  border: 2px solid var(--cio-accent-border, #d4bdf7); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; font-weight: 700;
}
.cio-intake .rc-btn:hover { background: #f6f0ff; }
.cio-intake .rc-btn.rc-main {
  background: var(--cio-accent, #7d2eff); color: #fff !important; border-color: var(--cio-accent, #7d2eff);
}
.cio-intake .rc-btn.rc-main:hover { background: var(--cio-accent-dark, #651fd6); }

/* v0.11.0: 必須項目の明示(パイロット指摘: 必須が分かりにくい・同意欄との区別がつかない) */
.cio-intake .req-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #c0392b;
  font-weight: 600;
}
/* 同意(必須)と 会員登録(任意)を見分けられるようにする */
.cio-intake .agree .req-badge,
.cio-intake .optin .opt-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: 1px;
}
.cio-intake .agree .req-badge { background: #c0392b; color: #fff; }
.cio-intake .optin .opt-badge { background: #eef2f6; color: #63727f; }
.cio-intake .agree.required {
  background: #fdf3f2;
  border: 1px solid #f0c8c3;
  border-radius: 8px;
  padding: 10px 12px;
}

/* v0.10.2: 読み込み中表示と代替窓口(JSが動かない場合の行き止まり防止)
   JSが正常なら render() が innerHTML を差し替えるため表示されない。
   JSが読み込めない/止まった場合のみ、6秒後にCSSアニメーション(JS不要)で代替案内が現れる。 */
.cio-intake .cio-boot {
  background: #fff; border: 1px solid #dfe6ec; border-radius: 12px;
  padding: 28px 20px; text-align: center; color: #63727f; font-size: 14px;
}
.cio-intake .cio-boot-msg { margin: 0; }
.cio-intake .cio-boot-alt {
  margin: 14px 0 0; font-size: 13.5px; color: #7a5a17;
  background: #fff7e8; border: 1px solid #eccf96; border-radius: 8px; padding: 12px 14px;
  opacity: 0; animation: cioBootAlt 0.3s linear 6s forwards;
}
.cio-intake .cio-boot-alt a { color: #0b6fb8; text-decoration: underline; font-weight: 700; }
.cio-intake .cio-boot-noscript { opacity: 1; animation: none; }   /* JS無効時は待たせず即表示 */
@keyframes cioBootAlt { to { opacity: 1; } }

/* v0.10.1: 本番切替時の「フォームが新しくなりました」案内 */
.cio-intake .switch-notice {
  background: #eef8f1;
  border: 1px solid #bfe3cc;
  border-left: 4px solid #3f9e68;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #24603f;
}
.cio-intake .switch-notice strong { color: #17492f; }

/* v0.10.0: 「あわせて会員登録」オプトイン */
.cio-intake .optin {
  background: var(--cio-accent-bg, #f6f0ff);
  border: 1px solid var(--cio-accent-border, #d4bdf7);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0 4px;
}
.cio-intake .optin .agree { margin: 0; align-items: flex-start; }
.cio-intake .optin .note { margin: 6px 0 0; }

/* 保証期間の注意(期待値調整・受付拒否ではない) */
.cio-intake .warn {
  background: #fff7e8;
  border: 1px solid #eccf96;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #7a5a17;
  margin: 0 0 12px;
}

@media (max-width: 480px) {
  .cio-intake .login-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .cio-intake .prods { grid-template-columns: repeat(2, 1fr); }
}

/* ---- v0.4.2 追加: 郵便番号検索行 ---- */
.cio-intake .ziprow { display: flex; gap: 8px; align-items: stretch; margin: 0 0 10px; }
.cio-intake .ziprow input { flex: 0 1 90px; margin: 0; }
.cio-intake .ziprow .zipbtn {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  background: #eef4f8; color: #0b6fb8;
  border: 2px solid #b9d1e4; border-radius: 8px;
  padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cio-intake .ziprow .zipbtn:hover { background: #dfeaf4; }

/* ---- v0.5.0 追加: 製品詳細モーダル ---- */
.cio-intake .prod-card { position: relative; }
.cio-intake .prod-info {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: 6px; right: 6px;
  background: rgba(255,255,255,.92); color: #0b6fb8;
  border: 1px solid #b9d1e4; border-radius: 6px;
  padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1.5;
}
.cio-intake .prod-info:hover { background: #eef6fc; }
.cio-modal-ov {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(18,40,60,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cio-modal-ov .cio-modal {
  background: #fff; border-radius: 14px;
  max-width: 380px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 22px 20px 20px; position: relative; text-align: center;
  box-shadow: 0 12px 40px rgba(10,30,50,.35);
  font-family: "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; color: #1a2b3c;
}
.cio-modal-ov .pm-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; font-size: 26px; line-height: 1; color: #8aa0b2; cursor: pointer; padding: 4px;
}
.cio-modal-ov .cio-modal img { max-width: 100%; max-height: 240px; object-fit: contain; margin: 6px auto 12px; display: block; }
.cio-modal-ov .pm-noimg {
  width: 120px; height: 120px; margin: 6px auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f6; border-radius: 12px; font-size: 44px; font-weight: 700; color: #8aa0b2;
}
.cio-modal-ov .pm-name { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.cio-modal-ov .pm-model { font-size: 13px; color: #63727f; margin: 0 0 12px; }
.cio-modal-ov .pm-link { display: inline-block; margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: #0b6fb8; text-decoration: underline; }
.cio-modal-ov .pm-select {
  appearance: none; -webkit-appearance: none; display: block; width: 100%;
  background: #0b6fb8; color: #fff; border: none; border-radius: 10px;
  padding: 13px 16px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cio-modal-ov .pm-select:hover { background: #095c99; }

/* ---- v0.8.0 追加: CXレビュー反映(榎並・松永 2026-07-22) ---- */

/* テーマカラー: CIOパープル(榎並要望「本番はCIOのカラー(パープル)に」)
   正確なブランドカラーコードの指定があれば下の2値のみ変更 */
.cio-intake {
  --cio-accent: #7d2eff;
  --cio-accent-dark: #651fd6;
  --cio-accent-bg: #f6f0ff;
  --cio-accent-border: #d4bdf7;
}
.cio-intake .note a,
.cio-intake .prefill a,
.cio-intake .agree a { color: var(--cio-accent); }
.cio-intake .opts button:focus-visible { border-color: var(--cio-accent); background: var(--cio-accent-bg); }
/* ★hover はマウス環境だけに限定する。タッチ端末では直前にタップした位置に
   hover が貼り付いたままになり、紫の枠が2つ出る(テスターA iPhone 報告)。 */
@media (hover: hover) and (pointer: fine) {
  .cio-intake .opts button:hover { border-color: var(--cio-accent); background: var(--cio-accent-bg); }
}
.cio-intake input:focus, .cio-intake textarea:focus { border-color: var(--cio-accent); }
.cio-intake .nav button { background: var(--cio-accent); }
.cio-intake .nav button:hover { background: var(--cio-accent-dark); }
.cio-intake .nav button:disabled { background: #b9a6d8; }
.cio-intake .login-cta { background: linear-gradient(135deg, #f6f0ff 0%, #efe4ff 100%); border-color: var(--cio-accent-border); }
.cio-intake .login-cta .lc-txt { color: #4a2b78; }
.cio-intake .login-cta .lc-txt strong { color: #3a1c66; }
.cio-intake .login-cta .lc-btn { background: var(--cio-accent); }
.cio-intake .login-cta .lc-btn:hover { background: var(--cio-accent-dark); }
.cio-intake .prods .prod-card:hover,
.cio-intake .prods .prod-card:focus-visible { border-color: var(--cio-accent); background: var(--cio-accent-bg); }
.cio-intake .ziprow .zipbtn { color: var(--cio-accent); border-color: var(--cio-accent-border); background: var(--cio-accent-bg); }
.cio-intake .ziprow .zipbtn:hover { background: #ece0fe; }
.cio-intake .prod-info { color: var(--cio-accent); border-color: var(--cio-accent-border); }
.cio-intake .prod-info:hover { background: var(--cio-accent-bg); }
.cio-intake .agree input[type="checkbox"] { accent-color: var(--cio-accent); }
.cio-modal-ov .pm-link { color: var(--cio-accent); }
.cio-modal-ov .pm-select { background: var(--cio-accent); }
.cio-modal-ov .pm-select:hover { background: var(--cio-accent-dark); }

/* 選択肢の補足説明(榎並要望: 表現が固い→平易な説明を併記) */
.cio-intake .opts button .opt-main { display: block; }
.cio-intake .opts button .opt-help {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #75828e;
  margin-top: 2px;
  line-height: 1.5;
}

/* レーン乗り換えリンクを大きく(榎並要望: フォントが小さい) */
.cio-intake .note.switch-link { font-size: 14px; margin-top: 12px; }
.cio-intake .note.switch-link a { font-weight: 600; }

/* 進捗バー(榎並要望: 残りの見える化・概算) */
.cio-intake .pbar {
  height: 5px;
  background: #ece7f4;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 16px;
}
.cio-intake .pbar span {
  display: block;
  height: 100%;
  background: var(--cio-accent, #7d2eff);
  border-radius: 3px;
  transition: width .3s ease;
}

/* 確認画面: セクション見出し+項目別修正(榎並要望) */
.cio-intake table.cio-confirm tr.sec th {
  background: var(--cio-accent-bg, #f6f0ff);
  color: #3a1c66;
  font-size: 12.5px;
  letter-spacing: .04em;
  border-top: 2px solid var(--cio-accent-border, #d4bdf7);
  padding-top: 9px;
}
.cio-intake table.cio-confirm a.fix {
  float: right;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cio-accent, #7d2eff);
  text-decoration: underline;
  white-space: nowrap;
}

/* 一時保存の再開バナー(榎並要望) */
.cio-intake .resume-banner {
  background: #fffbea;
  border: 1px solid #e8d48a;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b5510;
}
.cio-intake .resume-banner .rb-actions { display: flex; gap: 8px; margin-top: 8px; }
.cio-intake .resume-banner .rb-actions button {
  appearance: none; -webkit-appearance: none;
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--cio-accent, #7d2eff); color: #fff; border: none;
}
.cio-intake .resume-banner .rb-actions button.rb-sub {
  background: #fff; color: #6b5510; border: 1px solid #d9c88a;
}

/* 会員登録の第2ボタン(榎並要望: 非会員への登録導線) */
.cio-intake .login-cta .lc-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.cio-intake .login-cta .lc-btn.lc-sub {
  background: #fff;
  color: var(--cio-accent, #7d2eff) !important;
  border: 2px solid var(--cio-accent-border, #d4bdf7);
}
.cio-intake .login-cta .lc-btn.lc-sub:hover { background: var(--cio-accent-bg, #f6f0ff); }

/* 写真添付(榎並要望) */
.cio-intake input[type="file"] {
  display: block; width: 100%;
  border: 2px dashed #c7d3dd; border-radius: 8px;
  padding: 14px 12px; font-size: 13.5px; background: #fafcfe; margin: 0 0 8px;
}

@media (max-width: 480px) {
  .cio-intake .login-cta .lc-actions { flex-direction: column; }
}

/* ログイン中バッジ(パイロット No.11) */
.cio-intake .login-badge{background:#eef6ff;border:1px solid #cfe3ff;border-radius:6px;
  padding:8px 12px;margin:0 0 14px;font-size:13px;color:#14385e;}
/* 詳細欄の残り文字数(パイロット No.7) */
.cio-intake .charcount{text-align:right;margin-top:4px;color:#666;}
/* 交換時のカラー任意入力(パイロット No.6) */
.cio-intake #f-color-now{display:block;margin-top:4px;width:100%;max-width:260px;
  padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:15px;}

/* 完了画面: 会員登録画面へそのまま使える入力内容(テスターE 要望・目立たせる) */
.cio-intake .carryover{font-size:15px;font-weight:700;line-height:1.7;
  background:#fff8e5;border:1px solid #f0d9a0;border-radius:6px;padding:10px 12px;margin-top:10px;}

/* 膨張・変形の安全のご案内(松永さん 2026-08-06) */
.cio-intake .safety{background:#fff1f0;border:2px solid #d93025;border-radius:8px;
  padding:12px 14px;margin:0 0 14px;font-size:14px;line-height:1.75;color:#8a1c14;}
.cio-intake .safety strong{font-size:15.5px;color:#c5221f;}

/* 入力欄にフォーカスするとソフトキーボードが出て表示領域が縮む。
   ブラウザが自動スクロールするとき、欄の下に余白を残させる(隠れ防止)。
   ★見た目は変わらない。スクロール位置の計算にだけ効く。 */
.cio-intake input, .cio-intake textarea, .cio-intake select {
  scroll-margin-bottom: 160px;
}
/* 「次へ」等の操作列が画面の最下端に来ないようにする(同上) */
.cio-intake .cio-intake-card { padding-bottom: 32px; }