/* おたすけネット — 共通スタイル
   値は Figma「v5 トップ案(2026-11)」の色変数「おたすけネット v5」と文字スタイル「v5/…」に合わせている。 */

:root {
  /* 色(Figma 変数と同じ名前・値) */
  --bg-white: #ffffff;      /* 背景/白 */
  --bg-mint: #f1f6ef;       /* 背景/薄緑 */
  --bg-mint-2: #e2eedd;     /* 背景/薄緑2(写真準備中の枠など) */
  --line-mint: #cadcc4;     /* 線/薄緑 */
  --green: #2e7a4b;         /* 緑/主(ボタン。白文字で5.2:1) */
  --green-deep: #1f5a36;    /* 緑/濃(ラベル・リンク・数字) */
  --text: #24332b;          /* 文字/主 */
  --text-sub: #56675d;      /* 文字/副(白地6.0:1・薄緑地5.5:1) */
  --error: #a82a22;         /* 状態/エラー(白地7:1) */
  --line-field: #7a8f80;    /* 線/入力欄(白地3.5:1。入力欄の枠は3:1以上にする) */
  --on-green: #ffffff;      /* 緑の上の文字 */
  --green-press: #17462a;   /* 緑/押したとき */
  --veil-white: rgba(255,255,255,.9);   /* 写真の上の「イメージ」表記の地 */
  --veil-bar: rgba(255,255,255,.96);    /* スマホの追従バーの地 */
  --shadow: rgba(31,56,41,.10);         /* 影(チャット画面の図) */

  --gutter: clamp(24px, 8.333vw, 120px);
  --section-y: clamp(88px, 11vw, 160px);
  --radius-l: 40px;
  --radius-m: 24px;
  --radius-s: 16px;
  --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg-white);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--green-deep); text-underline-offset: .25em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--bg-white); padding: 8px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.pc-only, br.br-pc { display: none; }
@media (min-width: 1024px) { .pc-only { display: inline; } br.br-pc { display: inline; } .sp-only, br.br-sp { display: none; } }

/* ---------- 文字スタイル(v5/PC・v5/SP) ---------- */
.t-label { font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; color: var(--green-deep); }
.t-h1 { font-size: 30px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; }
.t-h2 { font-size: 25px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; }
.t-h3 { font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: .01em; }
.t-lead { font-size: 16px; line-height: 1.9; color: var(--text-sub); }
.t-body { font-size: 15px; line-height: 1.85; color: var(--text-sub); }
.t-small { font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.t-note { font-size: 14px; line-height: 1.7; letter-spacing: .02em; color: var(--text-sub); }
h1, h2, h3, .t-h1, .t-h2, .t-h3, .t-lead { word-break: auto-phrase; text-wrap: balance; }
/* 本文・補足: 行頭の「ー」「ッ」などを避け(line-break: strict)、最後の行が1文字だけ残らないようにする(text-wrap: pretty) */
.t-body, .t-small, .t-note { line-break: strict; text-wrap: pretty; }
.nowrap { white-space: nowrap; }
@media (max-width: 374px) { .t-h1 { font-size: 27px; } }
.t-num { font-size: 92px; font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--green-deep); }
@media (min-width: 1024px) {
  .t-label { font-size: 14px; }
  .t-h1 { font-size: clamp(34px, 3.61vw, 52px); }
  .t-h2 { font-size: clamp(30px, 2.64vw, 38px); }
  .t-h3 { font-size: 22px; }
  .t-lead { font-size: 18px; line-height: 2; }
  .t-body { font-size: 16px; line-height: 1.9; }
  .t-small { font-size: 14px; line-height: 1.75; }
  .t-num { font-size: clamp(120px, 11.67vw, 168px); }
}

.stack > * + * { margin-top: 20px; }
@media (min-width: 1024px) { .stack > * + * { margin-top: 24px; } }
.text-link { font-size: 15px; font-weight: 400; }
@media (min-width: 1024px) { .text-link { font-size: 16px; } }

/* ---------- ボタン(部品: ボタン/主・ボタン/控えめ) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 16px 36px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1.5 var(--font); letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  white-space: nowrap; word-break: keep-all;
  transition: background-color .15s, border-color .15s;
}
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { background: var(--green-deep); }
.btn--primary:active { background: var(--green-press); }
.btn--secondary { background: var(--bg-white); color: var(--green-deep); border-color: var(--line-mint); padding: 14px 28px; }
.btn--secondary:hover { border-color: var(--green); }
.btn--secondary:active { background: var(--bg-mint); border-color: var(--green-deep); }
/* 送信中など押せないとき(見て分かるように地を灰緑にし、カーソルも変える) */
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-mint-2); border-color: var(--line-mint); color: var(--text-sub); cursor: not-allowed; }
.btn--large { padding: 22px 56px; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 15px; }
@media (min-width: 1024px) {
  .btn--sm { min-height: 48px; padding: 12px 28px; font-size: 16px; }
  .btn--large { padding: 26px 64px; }
}

/* ---------- 写真(差し替えは img の src だけ) ---------- */
.photo { position: relative; overflow: hidden; background: var(--bg-mint-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__tag {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 8px; border-radius: 4px;
  background: var(--veil-white); color: var(--text-sub);
  font-size: 12px; line-height: 1; letter-spacing: .06em;
}
/* 写真準備中の枠(placeholder.svg)のあいだは「イメージ」表記を出さない */
.photo img[src$="placeholder.svg"] + .photo__tag { display: none; }

/* ---------- ヘッダー ---------- */
.site-header { position: relative; z-index: 20; background: var(--bg-mint); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 64px; padding: 12px 16px 12px 20px;
}
.logo { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--green-deep); }
.logo__name { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; word-break: keep-all; }
.logo__desc { display: none; font-size: 12px; line-height: 1.6; color: var(--text-sub); letter-spacing: .02em; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
  min-height: 40px; padding: 8px 6px; border: 0; background: none; cursor: pointer;
  font: 500 14px/1.5 var(--font); letter-spacing: .08em; color: var(--text);
  white-space: nowrap; word-break: keep-all;
}
.menu-toggle:active { color: var(--green-deep); }
/* 320〜374px(小さめのスマホ)では、ロゴ・相談する・メニューの3つが1行に収まるよう、文字と余白を少し詰める */
@media (max-width: 374px) {
  .site-header__inner { gap: 8px; padding: 12px 8px 12px 16px; }
  .site-header__actions { gap: 4px; }
  .logo__name { font-size: 18px; letter-spacing: .02em; }
  .btn--sm { padding: 8px 14px; font-size: 14px; letter-spacing: .02em; }
  .menu-toggle { padding: 8px 4px; letter-spacing: .02em; }
}
.global-nav { display: none; }
.global-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-mint); border-top: 1px solid var(--line-mint);
  padding: 8px 24px 24px;
}
.global-nav ul { display: flex; flex-direction: column; }
.global-nav a { display: block; padding: 14px 0; color: var(--text); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--line-mint); }
@media (min-width: 1080px) {
  .site-header__inner { min-height: 96px; padding: 0 64px; }
  .logo__name { font-size: 24px; }
  .logo__desc { display: block; }
  .menu-toggle { display: none; }
  .global-nav, .global-nav.is-open { display: block; position: static; padding: 0; border: 0; background: none; }
  .global-nav ul { flex-direction: row; gap: 36px; }
  .global-nav a { padding: 0; border: 0; font-size: 15px; letter-spacing: .02em; }
  .global-nav a:hover { color: var(--green-deep); text-decoration: underline; }
  .site-header__actions { gap: 36px; }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .logo__desc { display: block; }
  .site-header__inner { padding: 12px 32px; }
}

/* ---------- 共通セクション ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section--mint { background: var(--bg-mint); }
.container { max-width: 1200px; margin: 0 auto; }

/* ---------- ファーストビュー ---------- */
.fv { background: var(--bg-mint); padding-bottom: 72px; }
.fv__photo { margin-left: 24px; height: 248px; border-radius: 28px 0 0 28px; }
.fv__body { padding: 28px 24px 0; }
@media (max-width: 374px) { .fv__cta .btn { padding-left: 20px; padding-right: 20px; } }
.fv__body .t-h1 { margin-top: 20px; }
.fv__body .t-lead { margin-top: 20px; }
.fv__cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fv__cta .btn { width: 100%; }
/* 画面の高さが低いスマホ(iPhone SE・mini の Safari など)では、写真を低くして最初の画面にボタンを入れる。写真は裁ち落としのまま */
@media (max-width: 767px) and (max-height: 700px) {
  .fv { padding-bottom: 56px; }
  .fv__photo { height: 136px; }
  .fv__body { padding-top: 20px; }
  .fv__body .t-h1, .fv__body .t-lead { margin-top: 12px; }
  .fv__cta { margin-top: 20px; gap: 10px; }
}
@media (min-width: 768px) {
  .fv__photo { height: 440px; margin-left: 15%; }
  .fv__body { padding: 48px var(--gutter) 0; max-width: 640px; }
  .fv__cta { flex-direction: row; }
  .fv__cta .btn { width: auto; }
}
@media (min-width: 1024px) {
  .fv { position: relative; min-height: 720px; padding: 0; }
  .fv__photo { position: absolute; top: 0; right: 0; width: 54.17%; height: 680px; margin: 0; border-radius: var(--radius-l) 0 0 var(--radius-l); }
  .fv__body { position: relative; max-width: none; width: 45.8%; min-height: 680px; padding: 0 0 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; }
  .fv__body .t-h1, .fv__body .t-lead { margin-top: 28px; }
  .fv__cta { margin-top: 40px; gap: 20px; }
}

/* ---------- 番号付きの流れ・質問の行 ---------- */
.rows { border-bottom: 1px solid var(--line-mint); }
.row { display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line-mint); }
.row__num { flex: 0 0 22px; font-size: 25px; font-weight: 500; line-height: 1.5; color: var(--green); }
.row__text > * + * { margin-top: 6px; }
@media (max-width: 1023px) { .rows:not(.qa) .t-h3 { font-size: 17px; } }
@media (min-width: 1024px) {
  .row { gap: 32px; padding: 30px 0; }
  .row__num { flex-basis: 36px; font-size: 38px; }
  .row__text > * + * { margin-top: 8px; }
}
.qa .row { display: block; }
@media (min-width: 1024px) { .qa .row { padding: 36px 0; } .qa .row__text > * + * { margin-top: 12px; } }

/* ---------- 2カラム(遅いと言われたら/よく聞かれること/締め) ---------- */
.split { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 440px minmax(0, 1fr); gap: 120px; }
  .split--faq { grid-template-columns: 380px minmax(0, 1fr); }
}
.split__aside .btn { margin-top: 32px; }
@media (min-width: 1024px) {
  /* 途中の相談ボタンは左の列(見出しの下)に置く */
  .split { grid-template-rows: auto 1fr; row-gap: 0; }
  .split > .split__aside:first-child { grid-column: 1; grid-row: 1; }
  .split > .rows { grid-column: 2; grid-row: 1 / span 2; }
  .split > .cta-after { grid-column: 1; grid-row: 2; align-self: start; }
}
@media (max-width: 1023px) { .split__aside .btn--secondary { display: flex; width: 100%; } .split__aside .btn { margin-top: 0; } .split > .cta-after { order: 3; } }
.faq-photo { margin-top: 28px; aspect-ratio: 380 / 280; border-radius: 20px; }
@media (max-width: 1023px) { .faq-photo { display: none; } }

/* ---------- 速さ ---------- */
.speed { background: var(--bg-mint); padding: 72px 0 96px; }
.speed__media { position: relative; width: calc(100% - 50px); max-width: 640px; padding-bottom: 70px; }
.speed__big { aspect-ratio: 340 / 280; border-radius: 0 28px 28px 0; }
.speed__small {
  position: absolute; left: 56%; bottom: 0; width: 50%; aspect-ratio: 300 / 220;
  border-radius: 12px; box-shadow: 0 0 0 6px var(--bg-mint);
}
.speed__body { padding: 40px 24px 0; }
.speed__year { display: flex; align-items: flex-end; gap: 6px; }
.speed__year .t-h3 { color: var(--green-deep); padding-bottom: 6px; }
@media (min-width: 768px) { .speed__body { padding: 48px var(--gutter) 0; max-width: 720px; } }
@media (min-width: 1024px) {
  .speed { display: grid; grid-template-columns: 58.33% minmax(0, 1fr); align-items: center; min-height: 820px; padding: 0 calc(var(--gutter) - 48px) 0 0; }
  .speed__media { width: 76.2%; max-width: none; padding-bottom: 90px; }
  .speed__big { aspect-ratio: 640 / 560; border-radius: 0 var(--radius-l) var(--radius-l) 0; }
  .speed__small { left: 81.25%; width: 46.9%; border-radius: var(--radius-s); box-shadow: 0 0 0 8px var(--bg-mint); }
  .speed__body { padding: 0; max-width: 528px; }
  .speed__year .t-h3 { padding-bottom: 14px; }
}

/* ---------- 窓口(チャット画面イメージ) ---------- */
.window__media { position: relative; margin-top: 40px; padding-bottom: 170px; }
.window__photo { aspect-ratio: 342 / 260; border-radius: 20px; }
.chat {
  position: absolute; left: 6%; right: 6%; top: 170px;
  background: var(--bg-white); border: 1px solid var(--line-mint); border-radius: 18px;
  box-shadow: 0 10px 24px var(--shadow); overflow: hidden;
}
.chat__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-mint); }
.chat__title { font-size: 15px; font-weight: 500; }
.chat__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
/* チャット図の中の時刻・案内は画面の再現なので小さいまま */
.chat .t-note { font-size: 12px; line-height: 1.6; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.7; }
.bubble--me { align-self: flex-end; background: var(--green); color: var(--on-green); }
.bubble--ai { align-self: flex-start; background: var(--bg-mint); }
.chat__tag { align-self: flex-start; font-size: 12px; color: var(--text-sub); background: var(--bg-mint); padding: 4px 8px; border-radius: 4px; }
@media (min-width: 768px) { .window__media { max-width: 560px; } }
@media (min-width: 1024px) {
  .window { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 0; align-items: center; min-height: 800px; padding-top: 120px; padding-bottom: 120px; }
  .window__media { margin: 0 0 0 auto; width: 100%; max-width: 560px; padding: 0; }
  .window__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-m); }
  .chat { left: -140px; right: auto; top: 210px; width: 340px; border-radius: 20px; box-shadow: 0 12px 32px var(--shadow); }
  .chat__bar { padding: 14px 18px; border-radius: 20px 20px 0 0; }
  .chat__body { padding: 18px; gap: 12px; }
  .bubble { font-size: 14px; padding: 10px 14px; border-radius: 14px; }
}

/* ---------- 見守りと近さ ---------- */
.watch { padding-bottom: 88px; }
.watch__photo { height: 300px; }
.watch__photo img { object-position: 50% 62%; }
.watch__panel {
  position: relative; margin: -70px 16px 0; padding: 28px 20px 8px;
  background: var(--bg-white); border-radius: 22px;
}
@media (max-width: 420px) { .watch__panel .t-h2 { font-size: 23px; } }
@media (min-width: 768px) { .watch__photo { height: 440px; } .watch__panel { max-width: 600px; margin-left: var(--gutter); margin-top: -120px; } }
@media (min-width: 1024px) {
  .watch { padding-bottom: 140px; }
  .watch__photo { height: 600px; }
  .watch__panel { max-width: 648px; margin-top: -160px; padding: 56px 64px 60px; border-radius: 28px; }
}

/* ---------- 防犯カメラ・オートロック ---------- */
.security { display: grid; gap: 24px; }
.security__photo { aspect-ratio: 342 / 240; border-radius: 20px; }
@media (min-width: 1024px) {
  .security { grid-template-columns: minmax(0, 560px) minmax(320px, 1fr); gap: clamp(48px, 6.7vw, 96px); align-items: center; padding-top: 140px; padding-bottom: 140px; }
  .security__photo { aspect-ratio: 560 / 400; border-radius: var(--radius-m); }
}

/* ---------- 締め ---------- */
.closing { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .closing { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: center; }
}
@media (max-width: 1023px) { .closing .btn { width: 100%; } }

/* ---------- フッター ---------- */
.site-footer { padding: 48px 24px 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: 10px; }
.site-footer .logo__name { color: var(--green-deep); }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__links a { color: var(--text); font-size: 14px; }
@media (min-width: 1024px) {
  .site-footer { padding: 64px var(--gutter) 56px; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .site-footer__links { gap: 12px; }
  .site-footer__links a { font-size: 14px; }
}

/* ---------- スマホの追従バー(部品: 追従バー/スマホ) ----------
   JS が動かない環境では、ページの最後に画面下へ貼りつく形で常に見える(position: sticky)。
   JS が準備できたとき(html.js-sticky)だけ、画面下に固定して出し入れする。 */
.sticky-cta {
  position: sticky; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--veil-bar); border-top: 1px solid var(--line-mint);
}
.js-sticky .sticky-cta {
  position: fixed;
  transform: translateY(110%); visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.js-sticky .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .25s ease; }
.sticky-cta__note { flex: 0 0 auto; font-size: 14px; line-height: 1.5; color: var(--text-sub); }
.sticky-cta .btn { flex: 1 1 auto; padding: 14px 16px; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .js-sticky .sticky-cta, .js-sticky .sticky-cta.is-visible { transition: none; } }

/* ---------- 問い合わせページ ---------- */
.contact { background: var(--bg-mint); padding: 56px 24px 88px; }
.contact__grid { display: grid; gap: 32px; }
.contact__flow-title { margin-top: 32px; }
.contact__flow { margin-top: 12px; }
.contact__flow .row { padding: 16px 0; gap: 14px; }
.contact__flow .row__num { flex-basis: 18px; font-size: 18px; line-height: 1.6; }
@media (min-width: 1024px) {
  .contact { padding: 112px var(--gutter) 160px; }
  .contact__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(56px, 7vw, 100px); align-items: start; }
  .contact__flow .row { padding: 18px 0; gap: 20px; }
  .contact__flow .row__num { font-size: 22px; }
}
.contact__aside-note { margin-top: 24px; }
@media (max-width: 1023px) { .contact__aside-note { display: none; } }
.contact__sp-note { margin-top: 20px; }
@media (min-width: 1024px) { .contact__sp-note { display: none; } }

.form-card { background: var(--bg-white); border-radius: 22px; padding: 28px 20px; }
@media (min-width: 1024px) { .form-card { border-radius: 28px; padding: clamp(40px, 3.9vw, 56px); } }
.form-card > * + * { margin-top: 22px; }
@media (min-width: 1024px) { .form-card > * + * { margin-top: 28px; } }

.field { border: 0; padding: 0; min-width: 0; }
fieldset.field { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.field__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.field__label { font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: var(--text); padding: 0; }
.req, .opt { font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .04em; }
.req { color: var(--green-deep); }
.opt { color: var(--text-sub); }
.field__hint { font-size: 14px; line-height: 1.6; color: var(--text-sub); margin: -2px 0 10px; }
.input {
  display: block; width: 100%; padding: 13px 16px;
  border: 1px solid var(--line-field); border-radius: 10px; background: var(--bg-white);
  font: 400 16px/1.5 var(--font); color: var(--text);
}
.input::placeholder { color: var(--text-sub); opacity: 1; }
.input:hover { border-color: var(--green); }
.input:focus { outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
textarea.input { min-height: 150px; resize: vertical; }
@media (min-width: 1024px) { .input { font-size: 15px; } textarea.input { min-height: 140px; } }

.checks { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; font-size: 15px; line-height: 1.5; }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--green); cursor: pointer; }
.consent { display: flex; align-items: center; gap: 10px; }
.consent .check { min-width: 0; }
.consent .req { flex: 0 0 auto; }

/* エラー(部品: フォーム/入力欄 エラー) */
/* 枠の太さは変えず(行がずれないように)、色と内側の線で示す */
.field.is-error .input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--error); }
.field__error[hidden] { display: none; }
.form-summary { padding: 14px 16px; border: 2px solid var(--error); border-radius: 10px; color: var(--error); font-size: 14px; line-height: 1.7; background: var(--bg-white); }
.form-summary[hidden] { display: none; }
.form-status { font-size: 14px; line-height: 1.7; text-align: center; color: var(--text); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.form-submit-note { text-align: center; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 送信完了・個人情報・404 ---------- */
.simple { background: var(--bg-mint); padding: 72px 24px 96px; }
.simple__inner { max-width: 640px; }
@media (min-width: 1024px) { .simple { padding: 48px var(--gutter) 170px; } }
.simple__inner > * + * { margin-top: 20px; }
@media (min-width: 1024px) { .simple__inner > * + * { margin-top: 28px; } }
.simple .rows { margin-top: 12px; }
.simple .row { padding: 16px 0; gap: 14px; }
.simple .row__num { flex-basis: 18px; font-size: 18px; line-height: 1.6; }
@media (min-width: 1024px) { .simple .row { padding: 18px 0; gap: 20px; } .simple .row__num { font-size: 22px; } }
.doc h2 { margin-top: 48px; }
.doc p { margin-top: 12px; }