@charset "UTF-8";
/* ============================================================
   計算機能付きメールフォーム サンプル（納品イメージ）共通スタイル
   対象：mailform_keisan_sample/sample3.html
         mailform_keisan_syoukeisample/sample_syoukei.html
   mailformpro.css の後に読み込み、詳細度を上げて上書きする。
   mailformpro.css 自体は CGI 同梱ファイルのため編集しない。
   ============================================================ */

:root {
  --sf-bg: #f3f6f8;
  --sf-surface: #ffffff;
  --sf-text: #1d2833;
  --sf-muted: #5b6875;
  --sf-border: #d9e1e7;
  --sf-border-strong: #b9c5cf;
  --sf-accent: #00c8c8;        /* ホットスタッフのメインカラー（塗り用） */
  --sf-accent-ink: #00797a;    /* 白背景で読める濃さの文字用 */
  --sf-accent-soft: #e3f8f8;
  --sf-navy: #0d1b2a;
  --sf-note-bg: #fff7e5;
  --sf-note-border: #f0b23a;
  --sf-note-text: #6b4a00;
  --sf-error: #c62828;
  --sf-error-soft: #fff1f1;
  --sf-radius: 12px;
  --sf-radius-sm: 8px;
  --sf-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

/* ─── ページ全体 ─────────────────────────────── */
body.sf-body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-font);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
body.sf-body * {
  font-family: inherit;
  box-sizing: border-box;
}

/* サンプル表示バー（制作会社側の案内。お客様に納品する際は削除する部分） */
.sf-demo-bar {
  background: var(--sf-navy);
  color: #e8edf2;
  font-size: 13px;
}
.sf-demo-bar__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.sf-demo-bar__badge {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 100px;
  background: var(--sf-accent);
  color: var(--sf-navy);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.sf-demo-bar__text {
  flex: 1 1 auto;
}
.sf-demo-bar__link {
  color: var(--sf-accent);
  text-decoration: none;
  white-space: nowrap;
}
.sf-demo-bar__link:hover {
  text-decoration: underline;
}

.sf-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* ─── 見出し ─────────────────────────────── */
.sf-header {
  margin-bottom: 28px;
}
.sf-header__eyebrow {
  margin: 0 0 4px;
  color: var(--sf-accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.sf-header__title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
}
.sf-header__lead {
  margin: 0;
  color: var(--sf-muted);
  font-size: 15px;
}

/* ─── カード（フォーム本体・ステップ表示・確認画面を内包） ─── */
.sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04), 0 8px 24px rgba(13, 27, 42, 0.06);
  padding: 28px 32px 32px;
}

/* ステップ表示（phase.js が生成） */
.sf-card ul#mfp_phase_stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}
.sf-card ul#mfp_phase_stat li {
  flex: 1 1 0;
  margin: 0;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--sf-radius-sm);
  box-shadow: none;
  background-image: none;
  text-shadow: none;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  list-style: none;
  width: auto;
}
.sf-card ul#mfp_phase_stat li.mfp_phase_arrow {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  background: none;
  color: var(--sf-border-strong);
  font-size: 10px;
}
.sf-card ul#mfp_phase_stat li.mfp_active_phase {
  background-color: var(--sf-accent);
  color: var(--sf-navy);
  font-weight: 700;
}
.sf-card ul#mfp_phase_stat li.mfp_inactive_phase {
  background-color: #eef2f5;
  color: var(--sf-muted);
}

/* ─── セクション・行 ─────────────────────────── */
.sf-section-title {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sf-text);
  font-size: 18px;
  font-weight: 700;
}
.sf-section-lead {
  margin: 12px 0 0;
  color: var(--sf-muted);
  font-size: 14px;
}

.sf-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--sf-border);
}
.sf-label {
  padding-top: 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
}
.sf-field {
  min-width: 0;
}

/* 必須・任意バッジ */
.sf-req,
.sf-opt {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: 2px;
}
.sf-req {
  background: var(--sf-error);
  color: #fff;
}
.sf-opt {
  background: #e7ecf0;
  color: var(--sf-muted);
}

/* 単価表示 */
.sf-price {
  margin: 0 0 8px;
  font-size: 15px;
}
.sf-price strong {
  font-size: 17px;
}
.sf-price__tax {
  margin-left: 4px;
  color: var(--sf-muted);
  font-size: 13px;
}

/* 入力部品を横に並べる行 */
.sf-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.sf-control--stack {
  display: block;
}
.sf-unit {
  color: var(--sf-muted);
}
.sf-help {
  margin: 6px 0 0;
  color: var(--sf-muted);
  font-size: 13px;
}

/* 数量を選ぶと表示されるサブ項目（toggle.js が inline-block で表示） */
.sf-sub {
  padding: 6px 12px;
  border-radius: var(--sf-radius-sm);
  background: #f3f6f8;
  white-space: nowrap;
}
.sf-sub select {
  margin-left: 4px !important;
}
.sf-sub__label {
  color: var(--sf-muted);
  font-size: 14px;
}
.sf-sub__label + select + .sf-sub__label {
  margin-left: 10px;
}

/* 計算タイプの解説（サンプル用の注釈。納品時は削除する部分） */
.sf-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--sf-note-border);
  border-radius: 0 6px 6px 0;
  background: var(--sf-note-bg);
  color: var(--sf-note-text);
  font-size: 13px;
  line-height: 1.6;
}
.sf-note__tag {
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}
.sf-note--block {
  margin: 16px 0 4px;
}

/* ─── 入力欄（mailformpro.css の .mfp_element_* を上書き） ─── */
form#mailformpro .mfp_element_all {
  max-width: 100%;
}
form#mailformpro input.mfp_element_text,
form#mailformpro input.mfp_element_number,
form#mailformpro input.mfp_element_email,
form#mailformpro input.mfp_element_tel,
form#mailformpro select.mfp_element_select-one,
form#mailformpro textarea.mfp_element_textarea,
form#mailformpro .sf-input {
  margin: 0;
  padding: 0 12px;
  height: 46px;
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--sf-radius-sm);
  box-shadow: none;
  background-color: #fff;
  color: var(--sf-text);
  font-size: 16px; /* iOS で入力時に拡大されないよう 16px 以上 */
  vertical-align: middle;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* mailformpro の sizeajust が style 属性で幅・高さを書き込むため !important で上書き */
form#mailformpro textarea.mfp_element_textarea {
  width: 100% !important;
  height: 180px !important;
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
}
form#mailformpro select.mfp_element_select-one {
  padding-right: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6875' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
form#mailformpro input:focus,
form#mailformpro select:focus,
form#mailformpro textarea:focus {
  outline: none;
  border-color: var(--sf-accent-ink);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.25);
}
form#mailformpro .sf-w-qty {
  width: 96px;
}
form#mailformpro .sf-w-s {
  width: 88px;
}
form#mailformpro .sf-w-m {
  width: 220px;
}
form#mailformpro .sf-w-l {
  width: 100%;
  max-width: 420px;
}
form#mailformpro .sf-w-full {
  width: 100%;
}

/* 氏名・フリガナなど 2 つ並ぶ入力 */
.sf-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 460px;
}
.sf-pair__item,
.sf-stack__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 4px;
}
.sf-pair__label,
.sf-stack__label {
  color: var(--sf-muted);
  font-size: 13px;
}
.sf-stack {
  display: grid;
  gap: 12px;
}

/* ラジオボタン（mailformpro が label に mfp_checked / mfp_not_checked を付ける） */
form#mailformpro .sf-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
form#mailformpro .sf-choices label,
form#mailformpro .sf-choices label.mfp_checked,
form#mailformpro .sf-choices label.mfp_not_checked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--sf-border-strong);
  border-radius: var(--sf-radius-sm);
  background: #fff;
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s, background-color 0.15s;
}
form#mailformpro .sf-choices label:hover {
  border-color: var(--sf-accent-ink);
}
form#mailformpro .sf-choices label.mfp_checked {
  border-color: var(--sf-accent-ink);
  background: var(--sf-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sf-accent-ink);
}
form#mailformpro .sf-choices input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sf-accent-ink);
}
.sf-choices__tax {
  color: var(--sf-muted);
  font-size: 13px;
}

/* ─── 小計・合計 ─────────────────────────── */
.sf-row--subtotal {
  background: #f7fafb;
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px;
}
.sf-row--subtotal .sf-label {
  color: var(--sf-accent-ink);
}
.sf-subtotal {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
form#mailformpro input.syoukei,
form#mailformpro input.syoukei.mfp_element_text {
  width: 10em;
  height: auto;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--sf-text);
  font-size: 22px;
  font-weight: 700;
  text-align: left;
}
form#mailformpro input.syoukei:focus {
  box-shadow: none;
}

.sf-row--total {
  border-bottom: 0;
}
.sf-total {
  padding: 16px 20px;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-navy);
  color: #fff;
}
.sf-total div#mfp_price {
  padding: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sf-total div#mfp_price span {
  margin-left: 2px;
  color: #c9d4dd;
  font-size: 15px;
  font-weight: 400;
}
.sf-total div#mfp_tax {
  margin-top: 4px;
  color: #c9d4dd;
  font-size: 13px;
}
.sf-total__note {
  margin: 8px 0 0;
  color: var(--sf-muted);
  font-size: 13px;
}

/* ─── ボタン ─────────────────────────── */
.sf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.sf-nav--end {
  justify-content: flex-end;
}
form#mailformpro div.mfp_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
}

form#mailformpro button.mfp_next,
form#mailformpro button.mfp_prev,
form#mailformpro .sf-btn,
.sf-card div.mfp_buttons button#mfp_button_send,
.sf-card div.mfp_buttons button#mfp_button_cancel {
  float: none;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 0 28px;
  border-radius: 100px;
  border: 1px solid transparent;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
/* 主ボタン：メインカラー＋濃紺の文字（自社サイトと同じ組み合わせ） */
form#mailformpro button.mfp_next,
form#mailformpro .sf-btn--primary,
.sf-card div.mfp_buttons button#mfp_button_send {
  background-color: var(--sf-accent);
  color: var(--sf-navy);
}
form#mailformpro button.mfp_next:hover,
form#mailformpro .sf-btn--primary:hover,
.sf-card div.mfp_buttons button#mfp_button_send:hover {
  background-color: #00b3b3;
  transform: translateY(-1px);
}
/* 副ボタン：白地に枠線 */
form#mailformpro button.mfp_prev,
form#mailformpro .sf-btn--ghost,
.sf-card div.mfp_buttons button#mfp_button_cancel {
  background-color: #fff;
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}
form#mailformpro button.mfp_prev:hover,
form#mailformpro .sf-btn--ghost:hover,
.sf-card div.mfp_buttons button#mfp_button_cancel:hover {
  border-color: var(--sf-text);
}
form#mailformpro .sf-btn--text {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--sf-muted);
  font-weight: 400;
  text-decoration: underline;
}
form#mailformpro button:focus-visible,
.sf-card div.mfp_buttons button:focus-visible {
  outline: 3px solid var(--sf-accent-ink);
  outline-offset: 2px;
}

/* ─── 確認画面（ConfirmationMode 1：フォームの下に表示） ─── */
.sf-card div#mfp_phase_confirm h4 {
  margin: 0 0 16px;
  padding: 0;
  font-size: 20px;
  text-align: left;
}
.sf-card table#mfp_confirm_table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--sf-text);
}
.sf-card table#mfp_confirm_table tr.mfp_colored,
.sf-card table#mfp_confirm_table tr.mfp_achroma {
  background-color: #fff;
}
.sf-card table#mfp_confirm_table tr th,
.sf-card table#mfp_confirm_table tr td {
  padding: 12px 14px;
  border-top: 0;
  border-bottom: 1px solid var(--sf-border);
  color: var(--sf-text);
  font-size: 15px;
  font-weight: 400;
  vertical-align: top;
}
.sf-card table#mfp_confirm_table tr th {
  width: 200px;
  background: #f7fafb;
  color: var(--sf-muted);
  font-size: 14px;
  white-space: normal;
}
/* mailformpro.css の「<」「>」装飾を外し、金額行を強調 */
.sf-card table#mfp_confirm_table th::before,
.sf-card table#mfp_confirm_table th::after,
.sf-card table#mfp_confirm_table td::before,
.sf-card table#mfp_confirm_table td::after {
  content: none !important;
}
.sf-card table#mfp_confirm_table td#td_mfp_price_element {
  color: var(--sf-text);
  font-size: 20px;
  font-weight: 700;
}
.sf-card table#mfp_confirm_table th#th_mfp_price_element {
  color: var(--sf-text);
  font-weight: 700;
}
.sf-card div#mfp_phase_confirm div.mfp_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
}

/* ─── エラー表示 ─────────────────────────── */
form#mailformpro div.mfp_err {
  flex-basis: 100%;
  margin: 6px 0 0;
  padding: 0 0 0 22px;
  background-image: none;
  color: var(--sf-error);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}
form#mailformpro div.mfp_err::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sf-error);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
form#mailformpro .problem {
  border-color: var(--sf-error) !important;
  background-color: var(--sf-error-soft) !important;
}
.sf-card div#mfp_warning,
.sf-card div#mfp_error {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--sf-error);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-error-soft);
  color: var(--sf-error);
  font-weight: 700;
}

/* 入力OKマーク（ok.js）は非表示のまま */
form#mailformpro div.mfp_ok {
  display: none !important;
}

/* ─── フッター ─────────────────────────── */
.sf-footer {
  margin-top: 32px;
  color: var(--sf-muted);
  font-size: 13px;
  text-align: center;
}
.sf-footer a {
  color: var(--sf-accent-ink);
}

/* ─── スマートフォン ─────────────────────────── */
@media (max-width: 720px) {
  .sf-page {
    padding: 24px 12px 48px;
  }
  .sf-header {
    padding: 0 4px;
  }
  .sf-header__title {
    font-size: 23px;
  }
  .sf-card {
    padding: 20px 16px 24px;
    border-radius: 10px;
  }
  .sf-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .sf-label {
    padding-top: 0;
  }
  .sf-row--subtotal {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .sf-card ul#mfp_phase_stat {
    gap: 4px;
  }
  .sf-card ul#mfp_phase_stat li {
    padding: 8px 4px;
    font-size: 12px;
  }
  .sf-card ul#mfp_phase_stat li.mfp_phase_arrow {
    display: none;
  }
  form#mailformpro select.mfp_element_select-one.sf-w-l,
  form#mailformpro select.mfp_element_select-one.sf-w-m {
    width: 100%;
  }
  form#mailformpro .sf-choices label,
  form#mailformpro .sf-choices label.mfp_checked,
  form#mailformpro .sf-choices label.mfp_not_checked {
    width: 100%;
  }
  .sf-sub {
    white-space: normal;
  }
  .sf-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .sf-nav--end {
    flex-direction: column;
  }
  form#mailformpro div.mfp_buttons {
    flex-direction: column;
  }
  form#mailformpro button.mfp_next,
  form#mailformpro button.mfp_prev,
  form#mailformpro .sf-btn {
    width: 100%;
  }
  .sf-card table#mfp_confirm_table tr th,
  .sf-card table#mfp_confirm_table tr td {
    display: block;
    width: auto;
  }
  .sf-card table#mfp_confirm_table tr th {
    padding-bottom: 4px;
    border-bottom: 0;
  }
  .sf-card table#mfp_confirm_table tr td {
    padding-top: 4px;
  }
  .sf-card div#mfp_phase_confirm div.mfp_buttons button {
    width: 100%;
  }
}

/* 印刷時はサンプル用の案内を出さない */
@media print {
  .sf-demo-bar,
  .sf-note,
  .sf-nav {
    display: none;
  }
  body.sf-body {
    background: #fff;
  }
  .sf-card {
    box-shadow: none;
  }
}

/* mailformpro.css の「form#mailformpro label」（inline-block・nowrap・margin）を
   入力欄を包むラベルでは打ち消す */
form#mailformpro label.sf-pair__item,
form#mailformpro label.sf-stack__item {
  display: grid;
  margin: 0;
  border-radius: 0;
  white-space: normal;
}

/* ============================================================
   送信完了ページ（thanks.html）
   ============================================================ */
.sf-thanks {
  text-align: center;
  padding: 44px 32px 40px;
}
.sf-thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-ink);
}
.sf-thanks__title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.4;
}
.sf-thanks__lead {
  margin: 0 auto;
  max-width: 34em;
  color: var(--sf-muted);
  font-size: 15px;
}
/* 受付番号（thanks.js が document.write で出力する #mfp_thanks） */
.sf-thanks div#mfp_thanks {
  display: inline-block;
  margin: 24px 0 0;
  padding: 14px 28px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  background: #f7fafb;
  color: var(--sf-muted);
  font-size: 14px;
  text-align: center;
}
.sf-thanks div#mfp_thanks strong {
  display: block;
  margin-top: 2px;
  color: var(--sf-text);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.sf-thanks__personal {
  margin: 16px auto 0;
  max-width: 34em;
  font-size: 15px;
}
.sf-thanks__personal:empty {
  display: none;
}
.sf-thanks__info {
  margin: 28px auto 0;
  max-width: 36em;
  padding: 16px 20px;
  border-radius: var(--sf-radius-sm);
  background: #f7fafb;
  color: var(--sf-muted);
  font-size: 14px;
  text-align: left;
}
.sf-thanks__info p {
  margin: 0;
}
.sf-thanks__info p + p {
  margin-top: 6px;
}
.sf-thanks__info a {
  color: var(--sf-accent-ink);
}
.sf-thanks .sf-note {
  max-width: 36em;
  margin: 20px auto 0;
  text-align: left;
}
.sf-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
a.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
a.sf-btn--primary {
  background: var(--sf-accent);
  color: var(--sf-navy);
}
a.sf-btn--primary:hover {
  background: #00b3b3;
  transform: translateY(-1px);
}
a.sf-btn--ghost {
  background: #fff;
  border-color: var(--sf-border-strong);
  color: var(--sf-text);
}
a.sf-btn--ghost:hover {
  border-color: var(--sf-text);
}
a.sf-btn:focus-visible {
  outline: 3px solid var(--sf-accent-ink);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .sf-thanks {
    padding: 32px 18px 28px;
  }
  .sf-thanks__title {
    font-size: 21px;
  }
  .sf-thanks__actions {
    flex-direction: column;
  }
  .sf-thanks__actions a.sf-btn {
    width: 100%;
  }
}

/* 未注文のときのエラー（js/mailform-sample.js が表示） */
.sf-order-error {
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--sf-error);
  border-radius: var(--sf-radius-sm);
  background: var(--sf-error-soft);
  color: var(--sf-error);
  font-size: 14px;
  font-weight: 700;
}
.sf-order-error[hidden] {
  display: none;
}
/* 小計の「税抜」ラベル */
.sf-tax-label {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: 2px;
}
.sf-help--alert {
  color: var(--sf-error);
  font-weight: 700;
}
.sf-help--alert[hidden] {
  display: none;
}