/* ============================================
   FORM コンポーネント基盤 (React版 components.css 抜粋移植)
   .form-field / .form-label / .form-input / .form-select / .form-textarea / .form-check
   ============================================ */
/* ===== Universal Focus Rule（WCAG 2.4.7 必須） ===== */
*:focus-visible {
  outline: 2px solid var(--brand-secondary); /* 2px solid Secondary色 */
  outline-offset: 2px; /* 2px */
  border-radius: 2px;
}

/* ===== コンポーネント別の上書き ===== */
/* CTA（黄色）上は青緑が埋没するため、Focus Ring を黄色に */
.cta:focus-visible {
  outline: 2px solid var(--brand-accent-yellow);
  outline-offset: 3px;
}
.cta--ghost-light:focus-visible,
.cta--filled-light:focus-visible {
  outline: 2px solid var(--brand-accent-yellow);
}

/* アイコン付き CTA — typography の inline-block が Tailwind flex より後に勝つため */
.cta:has(svg) {
  display: inline-flex;
  align-items: center;
}

.cta:has(svg) svg {
  flex-shrink: 0;
}

/* タグもクリッカブル時はFocus必須 */
.tag:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 2px;
}

/* ===== Form Field Layout ===== */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* ===== Label ===== */
.form-label {
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: 0.04em;
}
.form-label__required {
  color: var(--brand-accent-orange);
  font-size: 11px;
  margin-left: var(--space-2);
  font-weight: 500;
}
.form-label__asterisk {
  margin-left: 0.15em;
  color: var(--brand-accent-orange);
  font-weight: 600;
}

/* ===== Input / Select / Textarea ===== */
.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line-border);
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--ink-500);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px rgba(24,118,159,0.15);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-300);
}
.form-textarea {
  min-height: 140px;
  resize: vertical;
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--surface-paper);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* ===== Error State ===== */
.form-input--error {
  border-color: var(--brand-accent-orange);
}
.form-input--error:focus {
  box-shadow: 0 0 0 3px rgba(226,136,24,0.2);
  border-color: var(--brand-accent-orange);
}

/* ===== Help Text ===== */
.form-help {
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.form-help--error {
  color: var(--brand-accent-orange);
}

/* ===== Dark Variants ===== */
.form-input--on-dark,
.form-select--on-dark,
.form-textarea--on-dark {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.form-input--on-dark:focus {
  border-color: var(--brand-accent-yellow);
  box-shadow: 0 0 0 3px rgba(237,187,5,0.25);
}
.form-label--on-dark { color: var(--ink-inv-900); }
.form-help--on-dark { color: var(--ink-inv-500); }

/* ===== Checkbox / Radio ===== */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
  margin-top: 3px;
  flex-shrink: 0;
}

/* ===== Inline Link（本文内のリンク） ===== */
.link {
  color: var(--brand-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.link:hover {
  color: var(--brand-primary);
  text-decoration-thickness: 2px;
}
.link:focus-visible {
  outline: 2px solid var(--brand-secondary);
  outline-offset: 3px;
  border-radius: 2px;
  text-decoration: none;
}

/**
 * お問い合わせ
 * - CONTACT_Company — Figma `.contact-company` / `.button2`（取引・回収アクティブ）
 * - CONTACT_Career — Figma `.contact-career` / `.button2`（分割ラベル）/ `.button3`（採用アクティブ）
 */

.contact-page {
  background-color: #fff;
  padding-top: clamp(var(--space-16), 12vw, var(--space-24));
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-24));
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (min-width: 1024px) {
  .contact-page {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }
}

.contact-page__inner {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- タブ（CONTACT_Company / CONTACT_Career 共通 .container21） ----- */
.contact-page__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-12);
  padding: 0 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.contact-page__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--space-1) var(--space-4);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--ink-500);
  text-align: center;
  transition: color 0.15s ease;
}

.contact-page__tab:hover {
  color: var(--ink-700);
}

.contact-page__tab.is-active {
  gap: var(--space-4);
  padding-bottom: 0;
  color: var(--brand-primary);
  font-weight: 700;
}

.contact-page__tab-indicator {
  align-self: stretch;
  width: 100%;
  height: 2px;
  flex-shrink: 0;
  background-color: var(--brand-primary);
}

.contact-page__tab-label-full {
  display: none;
}

/* CONTACT_Career：非アクティブ左タブ「お取引」+ 太字「・」+「資源回収に関するお問い合わせ」 */
.contact-page__tab-corporate-split {
  display: inline;
}

/* [contact] レスポンシブ(≤767px): タブを全幅に均等配置（React実機=2枚目 準拠）。
   既定は content幅で左に詰まるため、各タブ flex:1（50%）・ラベル中央に。
   下線インジケータ(width:100%)は各タブ＝画面半分に広がる。 */
@media (max-width: 767px) {
  .contact-page__tab {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  .contact-page__tab-label-full {
    display: inline;
  }

  .contact-page__tab-label-short {
    display: none;
  }

  /* CONTACT_Company — .button2 アクティブ 290px / .button3 非アクティブ 204px */
  .contact-page__tabs--company .contact-page__tab:first-child.is-active {
    width: 290px;
  }

  .contact-page__tabs--company .contact-page__tab:last-child:not(.is-active) {
    width: 204px;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    padding-bottom: var(--space-4);
  }

  /* CONTACT_Career — .button2 非アクティブ 290px / .button3 アクティブ 204px（40px · Company と同幅） */
  .contact-page__tabs--career .contact-page__tab:first-child:not(.is-active) {
    width: 290px;
    padding: 0 var(--space-1) var(--space-4);
    font-weight: 400;
  }

  .contact-page__tabs--career .contact-page__tab:first-child:not(.is-active) .contact-page__tab-dot {
    font-weight: 700;
  }

  .contact-page__tabs--career .contact-page__tab:last-child.is-active {
    width: 204px;
    padding: 0 var(--space-1) 0;
  }

  .contact-page__tabs--career .contact-page__tab:last-child.is-active .contact-page__tab-label-full {
    align-self: stretch;
  }
}

/* ----- フォーム行間（Figma gap 32px） ----- */
.contact-page .contact-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-page .form-field {
  margin-bottom: 0;
  gap: var(--space-3);
}

/* ----- アンダーライン入力（Figma .text-input / .dropdown） ----- */
.contact-page .form-input,
.contact-page .form-select,
.contact-page .form-textarea {
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-900) 10%, transparent);
  border-radius: 0;
  padding: var(--space-3) 0;
  background-color: transparent;
  box-shadow: none;
}

.contact-page .form-input:hover,
.contact-page .form-select:hover,
.contact-page .form-textarea:hover {
  border-bottom-color: color-mix(in srgb, var(--ink-900) 18%, transparent);
}

.contact-page .form-input:focus,
.contact-page .form-select:focus,
.contact-page .form-textarea:focus {
  outline: none;
  border-bottom-color: var(--brand-secondary);
  box-shadow: 0 1px 0 0 var(--brand-secondary);
}

.contact-page .form-textarea {
  min-height: 133px;
  resize: vertical;
}

/* ----- プライバシー同意（Figma .contactpage2） ----- */
.contact-page__privacy {
  padding-top: var(--space-2);
}

.contact-page__privacy .form-check {
  font-size: var(--fs-body);
  line-height: 1.47;
  color: var(--ink-700);
}

.contact-page__privacy-note-rest {
  color: var(--ink-700);
}

/* ----- 送信（Figma .contactpage3） ----- */
.contact-page__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}

/* ----- 送信完了 ----- */
.contact-page--success {
  padding-top: clamp(var(--space-20), 18vw, 120px);
  padding-bottom: var(--space-24);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  background-color: #fff;
  text-align: center;
}

.contact-page--success__inner {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.contact-page--success__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-6);
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--brand-accent-yellow) 15%, transparent);
}

.contact-page--success__icon {
  color: var(--brand-accent-yellow);
}

.contact-page--success__lead {
  margin-bottom: var(--space-10);
  color: var(--ink-500);
}

/* ----- 入力内容の確認（Figma 繊維リサイクルのいま相当） ----- */
.contact-page__confirm-page-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02125em; /* 0.68px */
  color: var(--ink-900);
}

.contact-page__confirm-intro {
  margin: 0 0 var(--space-10);
  color: var(--ink-700);
  text-align: left;
  max-width: none;
}

.contact-page__confirm-list {
  margin: 0 0 var(--space-10);
  padding: 0;
  text-align: left;
}

.contact-page__confirm-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.contact-page__confirm-row:first-of-type {
  border-top: 1px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.contact-page__confirm-dt {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.contact-page__confirm-dd {
  margin: 0;
  color: var(--ink-900);
  max-width: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-page__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.contact-page__confirm-btn {
  flex: 1 1 12rem;
  justify-content: center;
}

/* 確認画面・送信 — CTA 共通の浮き上がり（translateY）を無効化 */
.contact-page__submit,
.contact-page__confirm-actions .cta {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.contact-page__submit:hover,
.contact-page__submit:active,
.contact-page__confirm-actions .cta:hover,
.contact-page__confirm-actions .cta:active {
  transform: none;
}

.contact-page__submit,
.contact-page__confirm-actions .cta {
  -webkit-tap-highlight-color: transparent;
}

.contact-page__confirm-actions .cta--secondary:hover,
.contact-page__confirm-actions .cta--secondary:active {
  background: color-mix(in srgb, var(--brand-primary) 88%, var(--ink-900));
}

.contact-page__confirm-actions .cta--ghost:hover,
.contact-page__confirm-actions .cta--ghost:active {
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
}

/* ----- Thanks モーダル（送信完了） ----- */
.contact-page__modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--ink-900) 48%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* hidden 属性が付いていたら確実に非表示 */
.contact-page__modal-root[hidden] {
  display: none !important;
}

.contact-page__modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  padding: var(--space-10) var(--space-8);
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  box-shadow: 0 var(--space-8) var(--space-16) color-mix(in srgb, var(--ink-900) 14%, transparent);
}

/* 送信完了モーダル — 画像差し替え用（チェックアイコンなし · 4:3） */
.contact-page__modal-media {
  width: 100%;
  max-width: none;
  aspect-ratio: 711 / 400;
  margin: 0 auto var(--space-6);
  overflow: hidden;
  border-radius: 0;
}

.contact-page__modal-media:has(.contact-page__modal-media-img) {
  background-color: transparent;
}

.contact-page__modal-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-page__modal-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-jp);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}

.contact-page__modal-body-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-page__modal-body {
  margin: 0;
  color: var(--ink-700);
  max-width: none;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .contact-page__modal-root {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

}

@media (max-width: 480px) {
  .contact-page__confirm-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ===== 1024px+ Figma 1400 固定値 ===== */
/**
 * お問い合わせ — Figma 1400 相当の余白・最大幅
 */
@media (min-width: 1024px) {
  .contact-page {
    padding-top: var(--space-24); /* 96px · Figma .contactpage */
  }

  .contact-page__inner {
    max-width: 680px;
  }
}

/* hidden 属性が付いた要素は確実に非表示 (table-layout や flex 親に勝つ) */
.contact-page__form-wrap[hidden],
.contact-page__confirm-panel[hidden],
.contact-page__errors[hidden] {
  display: none !important;
}

/* 編集→確認ステップ時の演出: 余白とカラー */
.contact-page__confirm-panel {
  padding: var(--space-8) 0;
}

/* ----- エラーメッセージボックス (送信失敗・バリデーションエラー時に表示) ----- */
.contact-page__errors {
  background: #FEF2F2;
  border-left: 4px solid var(--brand-accent-orange, #E07A1F);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: 2px;
}

.contact-page__errors ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.5rem;
}

.contact-page__errors li {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.7;
  color: #991B1B;
  margin: 0.25rem 0;
}

/* Safari対策: ネイティブselectの独自スタイルを有効化（appearance解除＋自前矢印） */
.contact-page .form-select {
  -webkit-appearance: none;
  -moz-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' stroke='%23283594' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  padding-right: 24px;
}