/* ==========================================================================
   フォーム（Snow Monkey Forms）の見た目（inc/forms.php の planart_form()。お問い合わせ・費用の目安のご相談）
   --------------------------------------------------------------------------
   inc/forms.php が、フォームのあるページ（お問い合わせ・費用の目安）でだけ読む。style.css のあと・ページの CSS の前。
   この2つのページでは Snow Monkey Forms の CSS を読まない（フォールバックの CSS は、どのページでも読まない）ので、
   プラグインが作る物（読み込み中の隠し・手順・項目・欄・ボタン・確認の画面・誤りの文・送れなかったときの文）も、ここで組む。
   2026-11-07：Contact Form 7 から Snow Monkey Forms 13.0.1 へ（前の CSS は _to_delete/forms-cf7-20261107/assets-css/）。見た目は前と同じ。
   見た目の正本：キャンバス案E v51 の ContactE の form（入力欄 .pe-field・選ぶボタン .pe-opt）と EstimateE の #consult（白い面のフォーム）。
   手順の札・確認の画面・入力画面にもどるボタン・送れなかったときの枠はキャンバスに無い（Snow Monkey Forms で増えた）。トークンで作った＝ボスに見てもらう。
   色・余白・角丸・影はトークンだけ（verify_site.py が見張る）。

   ■ トークン：style.css の 0章（2026-11-03 まとめで、このファイルの :root から移した。名前はそのまま）。
     --c-error（入力の誤りの赤）はキャンバスに無い色（キャンバスに誤りの見た目が無いため足した）。白地で 6.54:1・灰色の面で 6.03:1。ボスに見てもらう。

   ■ なぜ style.css の章にしないか（2026-11-03 まとめで決めた）
     このファイルは、フォームのあるページでだけ読む（inc/forms.php の planart_form_assets()。フォームを出せないときの案内＝11 も同じページだけ）。
     中身はプラグインが作る物に合わせた規則で、ほかの 10 ページでは使わない。style.css に入れると、12ページ全部で多く読む。
     フォームを別のページにも置くときは、planart_form_page_key() にそのページを足す（このファイルも、そこで読まれる）。

   ■ プラグインの形（13.0.1。くわしくは inc/forms.php の頭）
     form.snow-monkey-form[data-screen]（loading・input・confirm・complete・systemerror）> 手順（ol.smf-progress-tracker）・
     .smf-form（項目 .smf-item が並ぶ）・.smf-action（ボタン。JS が入れる）・Turnstile の欄・テーマが足す物（見えない欄・注 .c-form__after）。
     項目：.smf-item > .smf-item__col--label（ラベル）＋ .smf-item__col--controls > .smf-placeholder（欄。確認の画面では文に、誤りのときは欄＋誤りの文に入れかわる）。
     項目の class（tools/forms/）：c-form__item--full（1行を使う）・--choices（ご相談の種類）・--consent（同意）・--refill（費用の目安のご相談内容）。

   ■ 中身
     1. プラグインが作る物の土台  2. フォームの組  3. 見出しと札  4. 入力欄  5. 選ぶボタン（ご相談の種類）
     6. 同意の枠  7. ボタンと注・確認の画面の文  8. 確認の画面  9. 入力の誤り・送れなかったとき  10. 手順
     11. 送ったあとの画面  12. 白い面の形（費用の目安）  13. フォームを出せないとき  14. 動き（いつも最後）
   ========================================================================== */
/* ==========================================================================
   1. プラグインが作る物の土台（プラグインの CSS の代わり。dist/css/app.css の要る所だけ）
   ========================================================================== */
/* 読み込み中（ボタンが入るまで）は見せない。場所はとっておく（入ったときに、下の段が動かないように）。
   JS が無い人（<html> に is-js が無い＝inc/assets.php の head のスクリプト）には、場所も取らない（上のお電話の案内＝noscript だけが出る） */
.c-form[data-screen="loading"] {
  visibility: hidden;
}

html:not(.is-js) .c-form[data-screen="loading"] {
  display: none;
}

/* 確認の画面・送ったあとに、プラグインがここまで戻す印（フォームの上 100px）。並びには入れない */
.c-form .smf-focus-point {
  position: absolute;
  top: -100px;
  visibility: hidden;
}

/* 送れなかったときの文の元（プラグインが写して使う。見せない） */
.c-form .smf-system-error-content-ready {
  display: none;
}

/* 読み上げだけの文（手順の「いまの画面です」など）と、見えない欄（迷惑な送信の対策。人は入れない。読み上げもしない＝aria-hidden） */
.c-form-wrap .screen-reader-text,
.c-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 送っている途中の回る印は使わない（ボタンが少し暗くなる＝7） */
.c-form .smf-sending {
  display: none;
}

/* ==========================================================================
   2. フォームの組（キャンバスの form：縦に並べて 32px。費用の目安は 28px＝12章）
   ========================================================================== */
.c-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}

.c-form[hidden] {
  display: none;
}

/* 項目の並び（会社名・お名前・メール・電話・URL／ご希望の時期・ご予算は横に。1つの欄は 280px から。
   1行を使う項目（ご相談の種類・ご相談内容・同意）の上下は 32px＝CF7 のときの組と行の間と同じ。費用の目安は 28px のまま） */
.c-form .smf-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-28) var(--s-20);
}

.c-form .smf-item {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.c-form .c-form__item--full {
  flex-basis: 100%;
  margin-block: var(--s-4);
}

.c-form .smf-form > .smf-item:first-of-type {
  margin-top: 0;
}

.c-form .smf-form > .smf-item:last-child {
  margin-bottom: 0;
}

.c-form .smf-item__col {
  min-width: 0;
}

/* 欄と、欄の下の説明・誤りの文 */
.c-form .smf-text-control,
.c-form .smf-textarea-control {
  display: block;
}

.c-form .smf-control-description {
  margin-top: var(--s-10);
}

/* ==========================================================================
   3. 見出しと札（legend・label・必須／任意）
   ========================================================================== */
.c-form .smf-control-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-form .smf-control-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8) var(--s-10);
  margin-bottom: var(--s-14);
  padding: 0;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
}

.c-form__legend-note {
  color: var(--c-sub);
  font-size: 13px;
  font-weight: 400;
}

.c-form .smf-item__label {
  display: flex;
  align-items: center;
}

.c-form .smf-item__label label {
  cursor: pointer;
}

.c-form .smf-item__label__text {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

/* 「任意」の札（枠だけ）。「必須」は黒く塗る（--required）。どちらも文字で伝える（色だけにしない）。
   同意の「必須」は、チェックの文のうしろに CSS で付ける（プラグインがチェックの文を文字だけにするため。6） */
.c-form__badge,
.c-form .c-form__item--consent .smf-checkbox-control__label::after {
  flex: 0 0 auto;
  padding-inline: var(--s-8);
  border: 1px solid var(--c-field);
  border-radius: var(--r-pill);
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 600;
  white-space: nowrap;
}

.c-form__badge--required,
.c-form .c-form__item--consent .smf-checkbox-control__label::after {
  padding-inline: var(--s-9);
  border: 0;
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-weight: 700;
}

/* ==========================================================================
   4. 入力欄（キャンバスの .pe-field。欄の class はフォームの中身で付ける＝tools/forms/install.php）
   ========================================================================== */
.c-form__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding-block: var(--s-14);
  padding-inline: var(--s-18);
  border: 1px solid var(--c-field);
  border-radius: var(--r-field);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: normal; /* キャンバスと同じ高さ（56px）。style.css 1章の font: inherit で 1.7 になるのを戻す */
  appearance: none;
}

.c-form__input:hover {
  border-color: var(--c-sub);
}

.c-form__input:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
  border-color: var(--c-green);
}

.c-form__input--textarea {
  line-height: 1.8;
  resize: vertical;
}

/* 費用の目安の「ご相談内容」（キャンバスの EstimateE は 15px） */
.c-form__input--sm {
  font-size: 15px;
}

/* スマホでは 16px（入力欄の文字が 16px より小さいと、iPhone は押したときに画面を寄せて拡大する。2026-11-03 まとめ）。
   幅の狭い画面（760px 以下）と、指で押す端末（横向きの iPhone は幅が 760px を超える）の両方で 16px。マウスの PC はキャンバスの 15px のまま。
   幅の狭い画面では、16px にすると最初に入る文（選んだ内容）が1行増え、最後の「ご相談内容：」が欄の外に隠れるので、欄を1行高くする
   （11行 → 12行。幅 375・390 で、最初の文がキャンバスと同じく全部見える） */
@container (max-width: 760px) {
  .c-form__input--sm {
    min-height: calc(12 * 1.8em + 2 * (var(--s-14) + var(--s-1)));
    font-size: 16px;
  }
}

@media (pointer: coarse) {
  .c-form__input--sm {
    font-size: 16px;
  }
}

/* ==========================================================================
   5. 選ぶボタン（ご相談の種類。キャンバスの .pe-opt。チェックの label を丸い札にする）
   ========================================================================== */
.c-form .c-form__item--choices .smf-checkboxes-control__control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10);
}

.c-form .c-form__item--choices .smf-label {
  display: block;
}

.c-form .c-form__item--choices label {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  min-height: 48px;
  padding-block: var(--s-8);
  padding-inline: var(--s-14) var(--s-18);
  border: 1px solid var(--c-field);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  /* 札の文は、言葉の途中で折らない（CLAUDE.md 3章。2026-11-08、幅 390 で「リ／ニューアル」「看／板」と折れていた）。
     折れるのは「・」のあとと「（」の前だけになる（トップの .c-stack__title と同じ組み合わせ）。
     文節の配列（planart_keep_html()）にしないのは、札の文をプラグインがエスケープして出し、確認の画面からもどるたびに作り直すため */
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.c-form .c-form__item--choices label:hover {
  border-color: var(--c-sub);
}

/* 選んだ札：枠が緑・面が薄い緑（チェックの印も付くので、色だけでは伝えない） */
.c-form .c-form__item--choices label:has(input:checked) {
  border-color: var(--c-green);
  background: var(--c-green-pale);
}

/* キーボードで来たときの輪は札に付ける（中のチェックの輪と2重にしない） */
.c-form .c-form__item--choices label:has(input:focus-visible) {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

.c-form .c-form__item--choices input:focus-visible {
  outline: none;
}

/* チェックの印とチェックの文（プラグインの span をほどいて、印・文を label の中の並びにする）。
   チェックはブラウザのままの形（プラグインの CSS は見た目を消して描き直すが、それを読まないので、ブラウザの形に戻る） */
.c-form .smf-checkbox-control {
  display: contents;
}

.c-form .smf-checkbox-control__control {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-green);
}

/* ==========================================================================
   6. 同意の枠（灰色の面にチェックと注）
   ========================================================================== */
.c-form .c-form__item--consent {
  gap: 0;
  padding-block: var(--s-20);
  padding-inline: var(--s-22);
  border-radius: var(--r-20);
  background: var(--c-surface);
}

.c-form .c-form__item--consent label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-10) var(--s-12);
  min-height: 44px;
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  cursor: pointer;
}

/* チェック・文・札をキャンバスと同じ3つの並びにする（狭いと札が次の行の頭へ）。札は 3 の「必須」の形 */
.c-form .c-form__item--consent .smf-checkbox-control__label {
  display: contents;
}

.c-form .c-form__item--consent .smf-checkbox-control__label::after {
  content: "必須";
}

/* 注（欄の下の説明・同意の下・送信のボタンの下） */
.c-form__note,
.c-form .smf-control-description {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.7;
}

.c-form__note a,
.c-form .smf-control-description a {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 欄の下の説明のリンク（同意の「プライバシーポリシー」）は、ページの名前なので途中で折らない（3章。2026-11-08、幅 390 で「プライバシーポリシ／ー」と折れていた） */
.c-form .smf-control-description a {
  white-space: nowrap;
}

/* ==========================================================================
   7. ボタンと注（キャンバスの button.pe-btn.pe-link）・確認の画面の文
   --------------------------------------------------------------------------
   ボタンはプラグインの JS が画面ごとに入れる（入力：入力内容を確かめる／確認：入力画面にもどる・送信する）。丸い矢印は assets/js/forms.js が足す。
   並び：項目 → Turnstile の欄（キーがあるとき。見えない形なら出ない）→ ボタン → 注（ボタンの下 12px） */
.c-form .snow-monkey-forms-turnstile {
  order: 1;
  max-width: 100%;
  margin-bottom: calc(var(--s-12) - var(--s-32));
  overflow: clip;
}

.c-form .snow-monkey-forms-turnstile:empty {
  display: none;
}

.c-form .smf-action {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-20);
}

.c-form .c-form__after {
  order: 3;
  margin-top: calc(var(--s-12) - var(--s-32));
}

/* 送れなかったとき（9）は、ボタンが消える。空の枠と、ボタンの下の注も出さない */
.c-form .smf-action:empty,
.c-form[data-screen="systemerror"] .c-form__after {
  display: none;
}

.c-form .smf-button-control {
  display: contents;
}

.c-form .smf-button-control__control {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  min-height: 60px;
  min-width: min(100%, 320px);
  margin: 0;
  padding-inline: var(--sp-submit-start) var(--s-9);
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter .2s ease;
}

.c-form .smf-button-control__control:hover {
  filter: brightness(.9);
}

.c-form .smf-button-control__control:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
}

.c-form .smf-button-control__control .c-btn__arrow {
  width: 42px;
  height: 42px;
}

/* 確認の画面の「入力画面にもどる」：白い面に枠（送信より目立たせない。矢印なし） */
.c-form .smf-button-control__control[data-action="back"] {
  justify-content: center;
  min-width: 0;
  padding-inline: var(--s-28);
  border: 1px solid var(--c-field);
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
}

.c-form .smf-button-control__control[data-action="back"]:hover {
  filter: none;
  border-color: var(--c-sub);
}

/* 送っている途中（プラグインが押したボタンを止める）・Turnstile の確かめが済むまで（Turnstile がボタンを止める） */
.c-form .smf-button-control__control:disabled {
  cursor: progress;
  filter: brightness(.8);
}

.c-form .smf-button-control__control[data-action="back"]:disabled {
  filter: none;
  color: var(--c-sub);
}

/* 確認の画面だけに出る文（フォームの中身のいちばん上。tools/forms/ の confirm_lead）。JS がここへ移る（読み上げのため。押せる物ではないので輪は出さない） */
.c-form .c-form__confirm-lead {
  display: none;
}

.c-form[data-screen="confirm"] .c-form__confirm-lead {
  display: block;
  flex-basis: 100%;
  margin: 0;
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 700;
}

.c-form .c-form__confirm-lead:focus {
  outline: none;
}

/* ==========================================================================
   8. 確認の画面（欄が、入れた文に入れかわる。直すときは「入力画面にもどる」）
   ========================================================================== */
/* 入れた文の箱（欄と同じ高さの、灰色の面） */
.c-form[data-screen="confirm"] .smf-placeholder {
  box-sizing: border-box;
  min-height: 56px;
  padding-block: var(--s-14);
  padding-inline: var(--s-18);
  border-radius: var(--r-field);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* 入れなかった任意の欄 */
.c-form[data-screen="confirm"] .smf-placeholder:has(> input[type="hidden"][value=""])::before {
  content: "（入力なし）";
  color: var(--c-sub);
}

/* ご相談の種類の見出し：入力の画面は legend（欄の中）、確認の画面はラベルの列（欄が文に入れかわって legend も消えるため） */
.c-form .c-form__item--choices > .smf-item__col--label {
  display: none;
}

.c-form[data-screen="confirm"] .c-form__item--choices > .smf-item__col--label {
  display: block;
}

/* 確認の画面では出さない物：札・「選んだ内容を入れ直す」・同意の枠（同意は入力の画面で済んでいる。送る値は、隠れたまま送られる） */
.c-form[data-screen="confirm"] .c-form__badge,
.c-form[data-screen="confirm"] .c-form__refill,
.c-form[data-screen="confirm"] .c-form__item--consent {
  display: none;
}

/* ==========================================================================
   9. 入力の誤り・送れなかったとき（キャンバスに無いので作った。赤の文字＋「!」の丸＋太字＋欄の枠を 2px で、色だけに頼らない）
   ========================================================================== */
.c-form .smf-error-messages {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
  margin-top: var(--s-8);
  color: var(--c-error);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.c-form .smf-error-messages::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: var(--s-2);
  border-radius: var(--r-circle);
  background: var(--c-error);
  color: var(--c-on-dark);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

/* 誤りのある欄（誤りの文がある間だけ。直し始めると、プラグインが誤りの文を消す＝枠も戻る） */
.c-form .smf-placeholder:has(.smf-error-messages) .c-form__input {
  border-color: var(--c-error);
  box-shadow: var(--sh-field-error);
}

/* 送れなかったとき（フォームの中身が、この文に入れかわる。ボタンも消えるので、ページを開き直す。文は inc/forms.php） */
.c-form .smf-system-error-content {
  flex-basis: 100%;
  box-sizing: border-box;
  padding-block: var(--s-14);
  padding-inline: var(--s-18);
  border: 2px solid var(--c-error);
  border-radius: var(--r-field);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
}

.c-form .smf-system-error-content:focus {
  outline: none;
}

.c-form .smf-system-error-content .c-tel {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-form .smf-system-error-status-text {
  color: var(--c-sub);
  font-size: 13px;
  font-weight: 400;
}

/* ==========================================================================
   10. 手順（入力 → 確認 → 完了。いまの画面に黒い丸。いまの画面は文字でも太くなり、読み上げは aria-current）
   ========================================================================== */
.c-form .smf-progress-tracker {
  display: flex;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-form .smf-progress-tracker__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  margin: 0;
}

.c-form .smf-progress-tracker__item::before,
.c-form .smf-progress-tracker__item::after {
  content: "";
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--c-line);
}

.c-form .smf-progress-tracker__item::before {
  right: 50%;
  left: 0;
}

.c-form .smf-progress-tracker__item::after {
  right: 0;
  left: 50%;
}

.c-form .smf-progress-tracker__item--input::before,
.c-form .smf-progress-tracker__item--complete::after {
  display: none;
}

.c-form .smf-progress-tracker__item__number {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--c-line);
  border-radius: var(--r-circle);
  background: var(--c-bg);
  color: var(--c-sub);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.c-form .smf-progress-tracker__item__text {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.c-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-on-dark);
}

.c-form .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
  color: var(--c-ink);
  font-weight: 700;
}

/* ==========================================================================
   11. 送ったあとの画面（parts/form-done.php。キャンバス ContactE の div[role=status]）
   ========================================================================== */
.c-form-done {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-18);
  padding: var(--sp-form-done);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.c-form-done[hidden] {
  display: none;
}

.c-form-done__check {
  display: block;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.c-form-done__ring {
  stroke: var(--c-green-bright);
  stroke-width: 3;
}

.c-form-done__mark {
  stroke: var(--c-green);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-form-done__title {
  color: var(--c-ink);
  font-size: var(--fs-h2-split);
  line-height: 1.3;
  font-weight: 700;
  font-feature-settings: 'palt';
}

/* 送れたら JS がここへ移る（読み上げのため）。押せる物ではないので、輪は出さない */
.c-form-done__title:focus {
  outline: none;
}

.c-form-done__text {
  max-width: 34em;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.9;
}

/* 受け付けのお知らせが届かないときの文（inc/forms.php の planart_form_not_received_html()。この画面と、お問い合わせの「送ったあとの流れ」の 01）。
   2026-11-04 素人の目の見直し P-24 で足した。電話番号と受付時間は途中で折らない（「092-983-／6858」「9:00〜／18:00」と折れたため）。
   かっこも同じ箱に入れて、「（」が行の終わりに・「）」が行の頭に残らないようにした（折れるのは「・」の所だけ）。
   電話は、フォームを出せないときの .c-form-missing__tel（13）と同じ見せ方（濃い字・太字） */
.c-form-help__keep {
  display: inline-block;
}

.c-form-help__tel {
  color: var(--c-ink);
  font-weight: 700;
}

.c-form-done__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-24);
}

/* 「トップへもどる」：大ボタン（style.css 5章）の 16px の形 */
.c-form-done__home {
  font-size: 16px;
}

.c-form-done__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  color: var(--c-green);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal; /* キャンバスは button（字の間を詰めない）。a でも同じ幅にする */
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ==========================================================================
   12. 白い面の形（費用の目安のページの黒い面の中。キャンバス EstimateE #consult）
   ========================================================================== */
.c-form--card {
  box-sizing: border-box;
  gap: var(--s-28);
  padding: var(--sp-form-card);
  border-radius: var(--r-card);
  background: var(--c-bg);
}

/* 費用の目安は、項目の上下も 28px のまま（キャンバスの EstimateE） */
.c-form--card .c-form__item--full {
  margin-block: 0;
}

.c-form--card .snow-monkey-forms-turnstile {
  margin-bottom: calc(var(--s-12) - var(--s-28));
}

.c-form--card .c-form__after {
  margin-top: calc(var(--s-12) - var(--s-28));
}

/* 「ご相談内容」のラベルの右に「選んだ内容を入れ直す」（費用の目安の JS が hidden を外して使う） */
.c-form .c-form__item--refill .smf-item__label {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4) var(--s-16);
}

.c-form__refill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 0;
  background: transparent;
  color: var(--c-green);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal; /* キャンバスの button と同じ（style.css 1章の letter-spacing: inherit を戻す） */
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.c-form__refill[hidden] {
  display: none;
}

.c-form-done--center {
  align-items: center;
  gap: var(--s-14);
  background: var(--c-bg);
  text-align: center;
}

.c-form-done__title--sm {
  font-size: var(--fs-form-done-sm);
  line-height: 1.5;
  font-feature-settings: normal;
}

.c-form-done--center .c-form-done__text {
  max-width: 30em;
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.8;
}

/* ==========================================================================
   13. フォームを出せないとき・JS が動かないとき（parts/form-missing.php）
   ========================================================================== */
.c-form-missing {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--sp-form-done);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.9;
}

.c-form-missing--card {
  background: var(--c-bg);
}

.c-form-missing__tel {
  display: inline-block;
  padding-block: var(--s-8);
  margin-block: calc(-1 * var(--s-8));
  color: var(--c-ink);
  font-weight: 700;
}

/* 作業台だけの印（本番には出ない。style.css 2章の c-kari と同じ色） */
.c-form-missing__bench {
  padding-block: var(--s-6);
  padding-inline: var(--s-10);
  border-radius: var(--r-3);
  background: var(--c-kari-bg);
  color: var(--c-kari);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
}

/* ==========================================================================
   14. 動き（style.css 28章と同じ決まり：is-motion が付いていて、動きを減らす設定でないときだけ）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .is-motion .c-form__input,
  .is-motion .c-form .c-form__item--choices label {
    transition: border-color .2s ease, background-color .2s ease;
  }

  /* 送ると、丸とチェックが線で描かれる（キャンバスの .pe-check。pa-draw は style.css 28章。path に pathLength="1"） */
  .is-motion .c-form-done__check path {
    stroke-dasharray: 1 1;
    animation: pa-draw .9s var(--ease-out) .15s both;
  }

  .is-motion .c-form-done__check path + path {
    animation-delay: .6s;
  }

  /* 送信のボタンの矢印が右へ少し動く（キャンバスの .pe-link:hover svg） */
  .is-motion .c-form .smf-button-control__control svg {
    transition: translate .25s ease;
  }

  .is-motion .c-form .smf-button-control__control:hover svg {
    translate: 3px 0;
  }
}