/* ============================================================
 * satei.css — /ikkatsu-satei/ 高単価ポケカ買取 一括査定LP
 * デザインシステム（--ds-*）準拠。色は --ds-* 経由のみ。
 * 参考LP（みんなの買取）の構成を、モノクロ＋ホロ限定アクセントで再構成。
 * ============================================================ */

body.satei-page { overflow-x: hidden; }

/* レイアウト調整: LPは container 制約を一部ブレイクアウトして全幅バンドを作る */
.satei-page .main { padding-top: 0; }

.satei { color: var(--ds-color-text); }
.satei strong { font-weight: var(--fw-bold); }

/* 全幅ブレイクアウト（.main > .container の内側から画面幅いっぱいへ）
   width:100vw は左基点でスクロールバー分ずれるため、左右対称の負マージンのみで
   中央を保つ（通常セクションと中央が揃う／右寄り防止）。 */
.satei-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- 共通セクション ---------- */
.satei-section {
  max-width: var(--ds-container-page);
  margin: 0 auto;
  padding: var(--ds-space-stack-xl) var(--ds-space-page-x);
}
.satei-section--paper { background: var(--ds-color-bg-paper); }
.satei-section--trust { padding-top: var(--ds-space-stack-lg); }
.satei-section__bleedinner {
  max-width: var(--ds-container-page);
  margin: 0 auto;
  padding: var(--ds-space-stack-xl) var(--ds-space-page-x);
}
.satei-section__bleedinner--narrow { max-width: var(--ds-container-article); }
.satei-section__lead {
  font-size: var(--ds-text-body-size);
  line-height: var(--ds-text-body-lh);
  color: var(--ds-color-text-muted);
  margin: 0 0 var(--ds-space-stack-md);
}
.satei-section__note {
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-subtle);
  margin-top: var(--ds-space-stack-md);
}
.satei-section__cta { text-align: center; margin-top: var(--ds-space-stack-lg); }

/* ---------- お祝い金（売却報告＝成果照合のクロスチェックも兼ねる） ---------- */
.satei-gift {
  border: 1px solid #E3D199;
  background: #FBF7EA;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-stack-lg) var(--ds-space-page-x);
  text-align: center;
}
.satei-gift__badge {
  display: inline-block;
  font-size: var(--ds-text-micro-size); font-weight: var(--fw-bold);
  color: var(--ds-color-text); background: #C6AC49;
  border-radius: var(--ds-radius-chip); padding: 3px 14px;
  letter-spacing: .04em; margin-bottom: var(--ds-space-stack-sm);
}
.satei-gift__title {
  font-size: var(--ds-text-h2-size); line-height: var(--ds-text-h2-lh);
  font-weight: var(--fw-bold); margin: 0 0 var(--ds-space-stack-sm);
}
.satei-gift__title strong { color: #9A7B16; }
.satei-gift__lead {
  font-size: var(--ds-text-body-size); line-height: var(--ds-text-body-lh);
  color: var(--ds-color-text-muted); margin: 0 auto var(--ds-space-stack-sm); max-width: 640px;
}
.satei-gift__note { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-subtle); margin: 0; }

.satei-h2 {
  font-size: var(--ds-text-h2-size);
  line-height: var(--ds-text-h2-lh);
  font-weight: var(--ds-text-h2-weight);
  text-align: center;
  margin: 0 0 var(--ds-space-stack-md);
}
.satei-h2 strong { position: relative; }
.satei-h2 strong::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--ds-color-accent-gradient);
  border-radius: var(--ds-radius-chip);
}

/* ---------- ヒーロー ---------- */
.satei-hero {
  background: var(--ds-color-bg-inverse);
  color: var(--ds-color-text-inverse);
  text-align: center;
  position: relative;
}
.satei-hero::before {
  content: ""; display: block; height: 6px;
  background: var(--ds-color-accent-gradient);
}
.satei-hero__inner {
  position: relative; /* リボン基準＋重ね順の文脈 */
  max-width: var(--ds-container-page);
  margin: 0 auto;
  /* ロゴを上部(左上)に詰める。上は控えめ、下はゆとり。 */
  padding: var(--ds-space-stack-md) var(--ds-space-page-x) var(--ds-space-stack-xl);
}
/* 装飾リボン: カードの真後ろに閉じ込める。縁から覗くだけで、価格/バッジ/注記の文字には被らない。 */
.satei-hero__cardwrap { position: relative; display: inline-flex; }
.satei-hero__curve {
  position: absolute; left: -42px; right: -42px; top: -22px; bottom: 26px;
  z-index: 0; pointer-events: none; overflow: visible;
}
.satei-hero__brand,
.satei-hero__grid,
.satei-hero__cta { position: relative; z-index: 1; }
/* ブランドロゴ（左上・参考LP風） */
.satei-hero__brand {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start;
  margin-bottom: var(--ds-space-stack-md);
}
.satei-hero__brandmark { width: 32px; height: 32px; display: inline-block; border-radius: 7px; }
.satei-hero__brandtext { font-size: var(--fs-22); font-weight: var(--fw-bold); letter-spacing: .02em; }

.satei-hero__eyebrow {
  font-size: clamp(var(--fs-18), 2.6vw, var(--fs-22));
  letter-spacing: .02em;
  color: var(--ds-color-text-inverse);
  opacity: .9;
  margin: 0 0 var(--ds-space-stack-sm);
}
.satei-hero__title {
  /* 各行(<br>区切り)を1行に収めるため nowrap。最長10文字が幅に収まるよう vw で可変。 */
  font-size: clamp(var(--fs-22), 5.4vw, 50px);
  line-height: 1.25;
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0 0 var(--ds-space-stack-sm);
  color: var(--ds-color-text-inverse); /* グローバル h1 の濃色を上書きして白に */
}
.satei-hero__accent {
  background: var(--ds-color-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.satei-hero__sub {
  font-size: clamp(var(--fs-16), 2vw, var(--fs-20));
  opacity: .88;
  margin: 0 0 var(--ds-space-stack-md);
}
.satei-hero__disc { font-size: var(--ds-text-caption-size); opacity: .6; margin: var(--ds-space-stack-sm) 0 0; }

/* トラストバッジ（メダル風・金アクセント＝ratingトークン） */
.satei-ribbons {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--ds-space-stack-sm); justify-content: center;
}
.satei-ribbon { display: flex; align-items: center; gap: 2px; }
.satei-laurel { width: 22px; height: 60px; flex: none; color: #C6AC49; }
.satei-ribbon > .satei-laurel:last-of-type { transform: scaleX(-1); }
.satei-ribbon__inner {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 0 4px; min-width: 64px;
}
.satei-ribbon__cap { font-size: var(--ds-text-micro-size); color: #CBB36B; letter-spacing: .02em; }
.satei-ribbon__big { font-size: var(--fs-26); font-weight: var(--fw-bold); color: #DCC06A; line-height: 1.1; }

/* ヒーロー 2カラム（モバイルは縦・ビジュアルは下） */
.satei-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-stack-md);
  align-items: center;
}
.satei-hero__copy { text-align: center; }
.satei-hero__visual {
  position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--ds-space-stack-sm); min-height: 280px;
}
/* 買取金額の一例キャプション */
.satei-fvcard {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
.satei-fvcard__label {
  font-size: var(--ds-text-micro-size); font-weight: var(--fw-bold);
  color: var(--ds-color-text); background: #C6AC49;
  border-radius: var(--ds-radius-chip); padding: 3px 12px;
}
.satei-fvcard__name { font-size: var(--ds-text-body-sm-size); color: var(--ds-color-text-inverse); opacity: .85; }
.satei-fvcard__price {
  font-size: var(--fs-26); font-weight: var(--fw-bold); line-height: 1.2;
  color: var(--ds-color-text-inverse);
}
.satei-fvcard__price small { font-size: var(--fs-16); font-weight: var(--fw-medium); margin-left: 1px; }
.satei-fvcard__note {
  font-size: var(--ds-text-micro-size); opacity: .6; max-width: 260px;
  line-height: var(--lh-normal);
}
/* （desktop の配置はレスポンシブ section の @media 768px で指定） */

/* 高額ホロカード風ビジュアル（著作物の画像は使わず CSS で象徴化・薄いホロ枠＋黒面） */
.satei-cardvisual {
  position: relative; z-index: 1;
  width: 230px; max-width: 64vw;
  aspect-ratio: 63 / 88;
  border-radius: var(--ds-radius-lg);
  padding: 6px;
  background: var(--ds-color-accent-gradient);
  box-shadow: var(--ds-shadow-modal);
  transform: rotate(-5deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-stack-xs);
}
.satei-cardvisual::before {
  content: ""; position: absolute; inset: 6px;
  background: var(--ds-color-bg-inverse);
  border-radius: calc(var(--radius-lg) - 3px);
}
.satei-cardvisual > * { position: relative; z-index: 1; color: var(--ds-color-text-inverse); }
.satei-cardvisual__rarity {
  font-size: var(--fs-13); font-weight: var(--fw-bold); letter-spacing: .08em;
  background: var(--ds-color-accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.satei-cardvisual__name { font-size: var(--fs-26); font-weight: var(--fw-bold); }
.satei-cardvisual__sub { font-size: var(--ds-text-caption-size); opacity: .8; }
.satei-cardvisual__tag {
  margin-top: var(--ds-space-stack-xs);
  font-size: var(--fs-12); font-weight: var(--fw-bold);
  border: 1px solid var(--ds-color-border-inverse);
  border-radius: var(--ds-radius-chip);
  padding: 4px 12px;
}
.satei-hero__visual img {
  position: relative; z-index: 1;
  width: 240px; max-width: 64vw; height: auto;
  /* 透過カットアウト対応: カード形状に沿う drop-shadow（box-shadow だと矩形の影が出る） */
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .5));
  transform: rotate(-5deg);
}

/* ヒーロー下部の中央CTA（参考LP風） */
.satei-hero__cta { text-align: center; margin-top: var(--ds-space-stack-lg); }
.satei-hero__ctalead { font-size: var(--fs-20); font-weight: var(--fw-bold); margin: 0 0 var(--ds-space-stack-sm); }
.satei-hero__ctalead strong { font-size: var(--fs-26); }

/* ---------- CTA ---------- */
.satei-cta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  text-decoration: none;
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  border: 2px solid transparent;
  border-radius: var(--ds-radius-button);
  padding: 16px 40px;
  min-height: var(--ds-touch-target-min);
  font-weight: var(--fw-bold);
  box-shadow: var(--ds-shadow-popover);
  transition: transform .12s ease, box-shadow .12s ease;
}
.satei-cta:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-modal); }
.satei-cta:active { transform: translateY(0); }
.satei-cta__main { font-size: var(--fs-20); }
.satei-cta__sub { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); font-weight: var(--fw-medium); }
/* ヒーロー上では明るいボタンが映える。本文中は ink ボタン。 */
.satei-hero .satei-cta--primary { background: var(--ds-color-bg); color: var(--ds-color-text); }
.satei-section .satei-cta--primary {
  background: #C6AC49; /* FVと同じゴールドに統一 */
  color: var(--ds-color-text);
}
.satei-section .satei-cta--primary:hover { background: #B89E3F; }
.satei-section .satei-cta--primary .satei-cta__sub { color: var(--ds-color-text); opacity: .7; }
.satei-cta--submit { width: 100%; margin-top: var(--ds-space-stack-md); }

/* ゴールドCTA（コンバージョン用・LP固有のブランドゴールド） */
.satei-cta--gold {
  flex-direction: row; gap: 10px;
  background: #C6AC49;
  color: var(--ds-color-text);
}
.satei-cta--gold:hover { background: #B89E3F; }
.satei-hero .satei-cta--gold { background: #C6AC49; color: var(--ds-color-text); }
.satei-cta--hero { padding: 18px 36px; }
.satei-cta__badge {
  font-size: var(--ds-text-caption-size); font-weight: var(--fw-bold);
  background: var(--ds-color-bg); color: var(--ds-color-text);
  border-radius: var(--ds-radius-sm); padding: 3px 8px;
}
.satei-cta--gold .satei-cta__main { font-size: var(--fs-22); }

/* ---------- 送信完了 ---------- */
.satei-sent {
  max-width: var(--ds-container-article);
  margin: var(--ds-space-stack-lg) auto 0;
  padding: var(--ds-space-stack-md) var(--ds-space-page-x);
  background: var(--ds-color-state-positive-bg);
  border: 1px solid var(--ds-color-state-positive-border);
  border-radius: var(--ds-radius-card);
}
.satei-sent__title { color: var(--ds-color-state-positive-text); font-size: var(--ds-text-h3-size); margin: 0 0 var(--ds-space-stack-xs); }

/* ---------- 共感ターゲット ---------- */
.satei-targets {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-xs);
}
.satei-targets li {
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  padding: 14px 16px;
  font-size: var(--ds-text-body-size);
}

/* ---------- 選ばれる理由 ---------- */
.satei-reasons {
  display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-md);
}
.satei-reason {
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-stack-md);
  box-shadow: var(--ds-shadow-card);
}
.satei-reason__num {
  display: inline-block;
  font-size: 48px; line-height: 1; font-weight: var(--fw-bold);
  color: #C6AC49; /* CTAと同じゴールド */
  margin-bottom: 4px;
}
.satei-reason__title { font-size: var(--ds-text-h3-size); margin: var(--ds-space-stack-xs) 0; }
.satei-reason p { color: var(--ds-color-text-muted); line-height: var(--lh-normal); margin: 0; }

/* ---------- 3ステップ ---------- */
.satei-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-md);
  counter-reset: step;
}
.satei-step {
  position: relative;
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-stack-md);
}
.satei-step__num {
  display: inline-block;
  font-size: var(--ds-text-caption-size); font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--ds-color-text-inverse);
  background: var(--ds-color-bg-inverse);
  border-radius: var(--ds-radius-chip);
  padding: 4px 12px; margin-bottom: var(--ds-space-stack-xs);
}
.satei-step__title { font-size: var(--ds-text-h3-size); margin: 0 0 var(--ds-space-stack-xs); }
.satei-step p { color: var(--ds-color-text-muted); margin: 0; line-height: var(--lh-normal); }

/* ---------- 比較テーブル ---------- */
.satei-services { overflow-x: auto; }
.satei-table {
  width: 100%; border-collapse: collapse;
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  overflow: hidden;
  font-size: var(--ds-text-body-sm-size);
}
.satei-table thead th {
  background: var(--ds-color-bg-subtle);
  text-align: left; padding: 12px 14px;
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--ds-color-border);
}
.satei-table tbody th, .satei-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-color-border);
  vertical-align: top; text-align: left;
}
.satei-table tbody th { white-space: nowrap; font-weight: var(--fw-bold); }
.satei-table tbody tr:last-child th, .satei-table tbody tr:last-child td { border-bottom: 0; }
.satei-table__link { white-space: nowrap; text-decoration: underline; }

/* ---------- 買取の一例（実写ギャラリー） ---------- */
.satei-examples {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-stack-sm);
}
.satei-example {
  margin: 0;
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  overflow: hidden;
}
.satei-example__photo {
  position: relative; aspect-ratio: 63 / 88;
  background: var(--ds-color-bg-subtle);
  display: flex; align-items: center; justify-content: center;
}
.satei-example__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.satei-example__ph { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-disabled); }
.satei-example__body {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--ds-space-stack-sm) var(--ds-space-stack-sm) var(--ds-space-stack-md);
}
.satei-example__name { font-size: var(--ds-text-body-sm-size); font-weight: var(--fw-bold); }
.satei-example__meta { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-muted); }
.satei-example__price {
  margin-top: 4px; align-self: flex-start;
  font-size: var(--ds-text-caption-size); font-weight: var(--fw-bold);
  color: var(--ds-color-state-danger-text);
  background: var(--ds-color-state-danger-bg);
  border-radius: var(--ds-radius-chip); padding: 2px 10px;
}

/* 注釈: 他店の買取相場（参考） */
.satei-ref { color: var(--ds-color-text-muted); font-weight: var(--fw-bold); }
.satei-marketref {
  max-width: var(--ds-container-article);
  margin: var(--ds-space-stack-md) auto 0;
  padding: var(--ds-space-stack-sm) var(--ds-space-stack-md);
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
}
.satei-marketref__head { font-size: var(--ds-text-body-sm-size); font-weight: var(--fw-bold); margin: 0 0 var(--ds-space-stack-xs); }
.satei-marketref__list { list-style: none; margin: 0; padding: 0; }
.satei-marketref__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-stack-sm);
  padding: 8px 0; border-bottom: 1px solid var(--ds-color-border);
}
.satei-marketref__row:last-child { border-bottom: 0; }
.satei-marketref__card { font-size: var(--ds-text-body-sm-size); }
.satei-marketref__rate { font-size: var(--ds-text-body-sm-size); font-weight: var(--fw-bold); color: var(--ds-color-text-muted); white-space: nowrap; }
.satei-marketref__src { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); margin: var(--ds-space-stack-xs) 0 0; line-height: var(--lh-normal); }

/* ---------- 高く売るコツ ---------- */
.satei-tips { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-sm); }
.satei-tip {
  border: 1px solid var(--ds-color-border);
  border-left: 4px solid var(--ds-color-text);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-space-stack-sm) var(--ds-space-stack-md);
  background: var(--ds-color-bg-elevated);
}
.satei-tip h3 { font-size: var(--ds-text-body-size); margin: 0 0 4px; }
.satei-tip p { margin: 0; color: var(--ds-color-text-muted); line-height: var(--lh-normal); }

/* ---------- FAQ ---------- */
.satei-faq { display: grid; gap: var(--ds-space-stack-xs); }
.satei-faq__item {
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  padding: 0 var(--ds-space-stack-md);
}
.satei-faq__q {
  cursor: pointer; list-style: none;
  padding: 16px 28px 16px 0; position: relative;
  font-weight: var(--fw-bold);
}
.satei-faq__q::-webkit-details-marker { display: none; }
.satei-faq__q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-20); color: var(--ds-color-text-muted);
}
.satei-faq__item[open] .satei-faq__q::after { content: "−"; }
.satei-faq__a {
  padding: 0 0 16px; color: var(--ds-color-text-muted); line-height: var(--lh-normal);
}

/* ---------- フォーム ---------- */
.satei-form {
  max-width: var(--ds-container-article);
  margin: 0 auto;
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-stack-lg) var(--ds-space-stack-md);
  box-shadow: var(--ds-shadow-card);
}
.satei-formerr {
  max-width: var(--ds-container-article); margin: 0 auto var(--ds-space-stack-md);
  background: var(--ds-color-state-danger-bg);
  border: 1px solid var(--ds-color-state-danger-border);
  color: var(--ds-color-state-danger-text);
  border-radius: var(--ds-radius-card);
  padding: 12px 16px; font-size: var(--ds-text-body-sm-size);
}
.satei-field { margin-bottom: var(--ds-space-stack-md); }
.satei-row { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-stack-md); }
.satei-label { display: block; font-weight: var(--fw-bold); font-size: var(--ds-text-body-sm-size); margin-bottom: 6px; }
.satei-req {
  font-size: var(--ds-text-micro-size); font-weight: var(--fw-bold);
  color: var(--ds-color-state-danger-text);
  background: var(--ds-color-state-danger-bg);
  border-radius: var(--ds-radius-chip); padding: 2px 8px; margin-left: 4px;
}
.satei-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--fs-16); /* iOSズーム防止に16px */
  color: var(--ds-color-text);
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  padding: 12px 14px;
  min-height: var(--ds-touch-target-min);
}
.satei-input:focus { outline: 2px solid var(--ds-color-text); outline-offset: 1px; border-color: var(--ds-color-text); }
.satei-input.is-error { border-color: var(--ds-color-danger); background: var(--ds-color-state-danger-bg); }
.satei-input--file { padding: 10px 12px; background: var(--ds-color-bg-subtle); }
textarea.satei-input { min-height: auto; resize: vertical; }
.satei-hint { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-subtle); margin: 6px 0 0; }
.satei-errmsg { font-size: var(--ds-text-caption-size); color: var(--ds-color-state-danger-text); margin: 6px 0 0; }
.satei-formhr { border: 0; border-top: 1px solid var(--ds-color-border); margin: var(--ds-space-stack-md) 0; }

.satei-radios { display: flex; flex-wrap: wrap; gap: var(--ds-space-inline-sm); }
.satei-radio {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-chip);
  padding: 8px 16px; min-height: var(--ds-touch-target-min); cursor: pointer;
}
.satei-radio input { accent-color: var(--ds-color-text); }

.satei-field--agree { margin-top: var(--ds-space-stack-sm); }
.satei-agree { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ds-text-body-sm-size); cursor: pointer; }
.satei-agree input { margin-top: 3px; accent-color: var(--ds-color-text); }
.satei-agree.is-error { color: var(--ds-color-state-danger-text); }
.satei-agree a { text-decoration: underline; }

.satei-form__note { font-size: var(--ds-text-caption-size); color: var(--ds-color-text-subtle); text-align: center; margin: var(--ds-space-stack-sm) 0 0; }

/* honeypot 非表示 */
.satei-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- スマホ追従CTA ---------- */
.satei-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; text-align: center;
  background: #C6AC49; color: var(--ds-color-text); /* FV / ヒーローCTA と同じブランドゴールド */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: var(--ds-shadow-modal);
}
.satei-sticky__main { font-size: var(--fs-16); font-weight: var(--fw-bold); }
.satei-sticky__sub { font-size: var(--ds-text-micro-size); opacity: .7; }

/* ============================================================
 * レスポンシブ
 * ============================================================ */
@media (min-width: 640px) {
  .satei-targets { grid-template-columns: 1fr 1fr; }
  .satei-row { grid-template-columns: 1fr 1fr; }
  .satei-tips { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .satei-reasons { grid-template-columns: repeat(3, 1fr); }
  .satei-steps { grid-template-columns: repeat(3, 1fr); }
  .satei-targets { grid-template-columns: repeat(3, 1fr); }
  .satei-examples { grid-template-columns: repeat(3, 1fr); }
  /* ヒーロー: コピー（左）＋ カードビジュアル（右） */
  .satei-hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--ds-space-stack-lg); }
  .satei-hero__copy { text-align: left; }
  .satei-hero__copy .satei-ribbons { justify-content: flex-start; }
  .satei-cardvisual { width: 260px; max-width: 100%; }
  .satei-hero__visual { min-height: 360px; }
  .satei-hero__visual img { width: 280px; max-width: 100%; }
}

/* スマホのみ追従CTA。初期は画面外に退避し、ヒーローを過ぎたら JS が .is-visible でフロートイン。 */
@media (max-width: 767px) {
  .satei-sticky {
    display: flex;
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .satei-sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .satei { padding-bottom: 72px; }

  /* ヒーローCTAの折返し崩れ修正（「→」だけ改行されるのを防ぐ） */
  .satei-cta--hero { width: 100%; padding: 16px 18px; }
  .satei-cta--hero .satei-cta__main { font-size: var(--fs-18); white-space: nowrap; }
  .satei-cta--hero .satei-cta__badge { padding: 3px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .satei-sticky { transition: opacity .2s ease; }
}
@media (min-width: 768px) {
  .satei-table thead { display: table-header-group; }
}

/* モバイルは横スクロール/列潰れを避け、1行=1カードのスタック表示に切替（data-label を見出しに使う） */
@media (max-width: 767px) {
  .satei-services { overflow-x: visible; }
  .satei-table {
    border: 0; border-radius: 0; background: transparent; overflow: visible;
  }
  .satei-table thead { display: none; }
  .satei-table tbody tr {
    display: block;
    background: var(--ds-color-bg-elevated);
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    padding: 14px 16px;
    margin-bottom: var(--ds-space-stack-sm);
  }
  .satei-table tbody tr:last-child { margin-bottom: 0; }
  .satei-table tbody th,
  .satei-table tbody td {
    display: block;
    padding: 0; border-bottom: 0;
    white-space: normal;
  }
  .satei-table tbody th {
    font-size: var(--ds-text-body-size);
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--ds-color-border);
  }
  .satei-table tbody td[data-label] { margin-top: 10px; }
  .satei-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--ds-text-micro-size);
    font-weight: var(--fw-bold);
    color: var(--ds-color-text-subtle);
    margin-bottom: 2px;
  }
  /* 公式リンクのセルは見出しラベルを出さず、リンクのみ表示 */
  .satei-table tbody td:has(.satei-table__link)::before { display: none; }
}