/* 1. 変数 —— すべて .txc-sim スコープ内に置き、埋め込み先と衝突させない */
.txc-sim {
  --txc-navy: #1B2A5E;
  --txc-navy-dark: #14204a;
  --txc-ink: #0E1424;
  --txc-red: #C8102E;
  --txc-red-dark: #a50d26;
  --txc-surface: #FFFFFF;
  --txc-surface-alt: #F5F7FA;
  --txc-border: #D6DCE5;
  --txc-text: #222222;
  --txc-text-sub: #555555;
  --txc-radius: 8px;
  --txc-gap: 16px;

  --txc-measure: 720px;

  max-width: none;
  margin: 0;
  padding: 0 0 48px;
  color: var(--txc-text);
  background: var(--txc-surface);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.7;
  box-sizing: border-box;
}
.txc-sim *, .txc-sim *::before, .txc-sim *::after { box-sizing: inherit; }

/* 本文カラム。ヒーローだけを画面いっぱいに広げるため、シェルは全幅にして
   読み物としての幅はこの要素が受け持つ。100vw を使う小細工に頼らないので、
   スクロールバーの分だけ横スクロールが出る事故が起きない */
.txc-sim__main {
  max-width: var(--txc-measure);
  margin: 0 auto;
  padding: 24px 16px 0;
}

.txc-sim a {
  color: var(--txc-navy);
}

/* 2. ヒーロー
   公式サイトの世界観（暗い背景に白のセリフ体ロゴ）をここだけで再現する。
   フォームは白背景のまま読みやすさを優先し、ブランドの顔はヒーローが担う。

   ロゴは lib/brand.php がアウトライン化した SVG パスを返す。フォント
   ファイルも外部リクエストも要らず、拡大しても劣化しない。 */
.txc-sim__hero {
  position: relative;
  margin: 0;
  padding: 52px 16px 46px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(160deg, var(--txc-navy) 0%, var(--txc-ink) 62%, #05070E 100%);
}
/* 上端の細い赤は、公式サイトに無い唯一の差し色。査定というアクションの
   合図として、CTAボタンと同じ色で最小限だけ使う */
.txc-sim__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--txc-red);
}
/* 車のシルエットは装飾。右下で断ち切り、文字と競合させない */
.txc-sim__hero-art {
  position: absolute;
  right: -14%;
  bottom: -10%;
  width: 96%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.txc-sim__hero-inner {
  position: relative;
  max-width: var(--txc-measure);
  margin: 0 auto;
}
.txc-sim__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
}
/* 幅ではなく高さで指定する。ワードマークは3文字固定なので、
   高さを揃えるほうが行の中で安定する */
.txc-sim__wordmark {
  display: block;
  height: 42px;
  width: auto;
  color: #fff;
  flex: none;
}
.txc-sim__brand-sub {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.8px;
  white-space: nowrap;
}
.txc-sim__title {
  margin: 0 0 6px;
  font-size: clamp(27px, 7.4vw, 38px);
  font-weight: 700;
  letter-spacing: .02em;
}
.txc-sim__lead {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
}

/* 2-1. ヒーローの3つの訴求 */
.txc-sim__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.txc-sim__feature {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.txc-sim__feature-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: rgba(255, 255, 255, .62);
}

/* 3. プログレス —— 3項目を横並び。現在位置は .is-current で色を変える */
.txc-sim__progress {
  display: flex;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-radius: var(--txc-radius);
  overflow: hidden;
  border: 1px solid var(--txc-border);
}
.txc-sim__progress-item {
  flex: 1 1 0;
  padding: 10px 4px;
  background: var(--txc-surface-alt);
  color: var(--txc-text-sub);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid var(--txc-border);
}
.txc-sim__progress-item:last-child {
  border-right: none;
}
.txc-sim__progress-item.is-current {
  background: var(--txc-navy);
  color: #fff;
}

/* 4. ステップ —— [hidden] が効くよう display は JS で触らず hidden 属性で切る */
.txc-sim__step[hidden] { display: none; }
.txc-sim__step-title {
  margin: 0 0 20px;
  font-size: 19px;
  font-weight: 700;
  border-left: 4px solid var(--txc-red);
  padding-left: 10px;
}

/* 5. フォーム
   入力欄の font-size は 16px 以上にする。これを下回ると
   iOS でフォーカス時にページが勝手にズームする */
.txc-sim__form {
  display: flex;
  flex-direction: column;
  gap: var(--txc-gap);
}
.txc-sim__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.txc-sim__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.txc-sim__select,
.txc-sim__input,
.txc-sim__textarea {
  width: 100%;
  min-height: 48px;      /* タップ領域を44px以上確保する */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--txc-border);
  border-radius: var(--txc-radius);
  background: var(--txc-surface);
  color: var(--txc-text);
  font-family: inherit;
}
.txc-sim__textarea {
  min-height: 96px;
  resize: vertical;
}
.txc-sim__select:disabled { background: var(--txc-surface-alt); color: #999; }
.txc-sim__select:focus-visible,
.txc-sim__input:focus-visible,
.txc-sim__textarea:focus-visible {
  outline: 2px solid var(--txc-navy);
  outline-offset: 1px;
}
.txc-sim__input-unit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.txc-sim__input-unit .txc-sim__input {
  flex: 1 1 auto;
  min-width: 0;
}
.txc-sim__unit {
  flex: 0 0 auto;
  color: var(--txc-text-sub);
  font-size: 14px;
}

/* 6. 必須・任意バッジ、エラー文（--txc-red） */
.txc-sim__required,
.txc-sim__optional {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.txc-sim__required {
  background: var(--txc-red);
  color: #fff;
}
.txc-sim__optional {
  background: var(--txc-surface-alt);
  color: var(--txc-text-sub);
  border: 1px solid var(--txc-border);
}
.txc-sim__error {
  margin: 0;
  color: var(--txc-red);
  font-size: 13px;
}
.txc-sim__error[hidden] { display: none; }

.txc-sim__note {
  margin: 0;
  color: var(--txc-text-sub);
  font-size: 13px;
}

/* 7. ボタン
   --primary: 赤背景・白文字（主行動）
   --secondary: 紺の枠線・紺文字
   --ghost: 枠線なし・下線 */
.txc-sim__button {
  display: block;
  width: 100%;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--txc-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.txc-sim__button[disabled] { opacity: .5; cursor: not-allowed; }

.txc-sim__button--primary {
  background: var(--txc-red);
  border-color: var(--txc-red);
  color: #fff;
}
.txc-sim__button--primary:hover:not([disabled]) {
  background: var(--txc-red-dark);
  border-color: var(--txc-red-dark);
}

.txc-sim__button--secondary {
  background: var(--txc-surface);
  border-color: var(--txc-navy);
  color: var(--txc-navy);
}
.txc-sim__button--secondary:hover:not([disabled]) {
  background: var(--txc-surface-alt);
}

.txc-sim__button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--txc-text-sub);
  text-decoration: underline;
  min-height: 44px;
}
.txc-sim__button--ghost:hover:not([disabled]) {
  color: var(--txc-text);
}

.txc-sim__button:focus-visible {
  outline: 2px solid var(--txc-navy);
  outline-offset: 2px;
}

/* 8. 結果表示
   価格は --txc-red で大きく。clamp() で画面幅に追従させる */
.txc-sim__result {
  margin-bottom: 20px;
  padding: 24px 16px;
  border-radius: var(--txc-radius);
  background: var(--txc-surface-alt);
  text-align: center;
}
.txc-sim__result-label {
  margin: 0 0 8px;
  color: var(--txc-text-sub);
  font-size: 13px;
  font-weight: 700;
}
.txc-sim__price {
  margin: 0 0 8px;
  color: var(--txc-red);
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 700;
  letter-spacing: .02em;
  word-break: break-word;
}
.txc-sim__comment {
  margin: 0;
  color: var(--txc-text-sub);
  font-size: 14px;
}

.txc-sim__summary {
  margin-bottom: 20px;
  border: 1px solid var(--txc-border);
  border-radius: var(--txc-radius);
  padding: 12px 16px;
}
.txc-sim__summary-head {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.txc-sim__summary-head:focus-visible {
  outline: 2px solid var(--txc-navy);
  outline-offset: 2px;
}
.txc-sim__summary-body {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}
.txc-sim__summary-body dt {
  color: var(--txc-text-sub);
  font-size: 13px;
  white-space: nowrap;
}
.txc-sim__summary-body dd {
  margin: 0;
  font-size: 14px;
  word-break: break-word;
}

.txc-sim__actions {
  display: flex;
  flex-direction: column;
  gap: var(--txc-gap);
  margin-bottom: 20px;
}

.txc-sim__disclaimer {
  margin: 0;
  color: var(--txc-text-sub);
  font-size: 12px;
}

.txc-sim__thanks-text {
  margin: 0 0 20px;
  font-size: 15px;
}
.txc-sim__tel {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--txc-navy);
}

/* 8-1. 長文ページ（プライバシーポリシー）
   フォームと違い読み物なので、行間と見出しの間隔を広めに取る */
.txc-sim__doc {
  padding-bottom: 8px;
  font-size: 15px;
}
.txc-sim__doc h2 {
  margin: 32px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--txc-border);
  font-size: 17px;
  font-weight: 700;
}
.txc-sim__doc h3 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--txc-navy);
}
.txc-sim__doc p {
  margin: 0 0 14px;
}
.txc-sim__doc ul {
  margin: 0 0 14px;
  padding-left: 1.3em;
}
.txc-sim__doc li {
  margin-bottom: 6px;
}
.txc-sim__doc-list {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--txc-surface-alt);
  border-radius: var(--txc-radius);
}
.txc-sim__doc-list dt {
  font-weight: 700;
  font-size: 13px;
  color: var(--txc-text-sub);
}
.txc-sim__doc-list dd {
  margin: 2px 0 12px;
}
.txc-sim__doc-list dd:last-child {
  margin-bottom: 0;
}
/* 表は狭い画面でも潰さず、その中だけ横に送る */
.txc-sim__doc-table {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}
.txc-sim__doc-table th,
.txc-sim__doc-table td {
  padding: 9px 12px;
  border: 1px solid var(--txc-border);
  text-align: left;
  vertical-align: top;
}
.txc-sim__doc-table th {
  background: var(--txc-surface-alt);
  font-weight: 700;
  white-space: nowrap;
}
.txc-sim__doc-note {
  padding: 12px 14px;
  border-left: 3px solid var(--txc-navy);
  background: var(--txc-surface-alt);
  font-size: 14px;
}
.txc-sim__doc-meta {
  margin-top: 28px;
  color: var(--txc-text-sub);
  font-size: 13px;
}
.txc-sim__doc .txc-sim__button {
  margin-top: 28px;
}

/* 9. ハニーポット —— 人間に見えず、支援技術にも読ませない */
.txc-sim__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ステータス表示（成否メッセージ） */
.txc-sim__status {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--txc-radius);
  background: var(--txc-surface-alt);
  color: var(--txc-text);
  font-size: 14px;
  text-align: center;
}
.txc-sim__status[hidden] { display: none; }
.txc-sim__status.is-error {
  background: #fbe4e8;
  color: var(--txc-red-dark);
}

/* 10. PC 表示 */
.txc-sim__hero--compact {
  padding-top: 30px;
  padding-bottom: 30px;
}
.txc-sim__hero--compact .txc-sim__brand {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .txc-sim { padding: 0 0 64px; }
  .txc-sim__main { padding: 40px 24px 0; }
  .txc-sim__hero {
    margin: 0;
    padding: 96px 24px 84px;
  }
  .txc-sim__hero-art {
    width: 56%;
    max-width: 900px;
    right: -2%;
    bottom: -12%;
  }
  .txc-sim__wordmark { height: 62px; }
  .txc-sim__brand { margin-bottom: 30px; gap: 16px; }
  .txc-sim__brand-sub { font-size: 13px; }
  .txc-sim__lead { font-size: 16px; }
  .txc-sim__features { gap: 12px 32px; margin-top: 34px; }
  .txc-sim__feature { font-size: 14px; }
  .txc-sim__feature-icon { width: 19px; height: 19px; }
  /* 完了ページはロゴだけなので、ヒーローの高さを詰める */
  .txc-sim__hero--compact { padding-top: 40px; padding-bottom: 40px; }
  .txc-sim__hero--compact .txc-sim__brand { margin-bottom: 0; }
  .txc-sim__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--txc-gap); }
  .txc-sim__actions .txc-sim__button--ghost { grid-column: 1 / -1; }
}