/* =================================================================
 * c-field — 入力項目（フォーム部品）共通スタイル
 * Figma: 3874:94691 入力項目ガイドライン
 *   TextField 4859:235852 / TextArea 4859:231321 / Selector 2700:50246 /
 *   CheckBoxArea 4192:177445 / CatalogSelect 4859:232217
 *   スタイルガイド: 5824:93960（Wireframe-10 入力項目・PC/SP × 5 form 種 × 5状態の canonical 一覧）
 *                   2026-03-25 作成。サブページ（5824:94500 PC TextField / 94424 PC Selector /
 *                   94284 PC CatalogSelect / 94332 SP CatalogSelect 等）も同一内容の standalone 版。
 *
 * 状態（Figma 5種）と表現方法:
 *   Default  : 既定（白背景・枠なし＝透明2px枠でレイアウト確保）
 *   Focused  : :focus / :focus-within → 枠 Light_Orange01 2px
 *   Filled   : value あり / input:checked（選択カードは BG03＋白枠）
 *   Disabled : :disabled / .is-disabled → BG02＋Neutral03 枠・文字
 *   Error    : .is-error → 枠 Alert 2px ＋ 12px ヘルパー文（Alert）
 * =================================================================*/

/* ---------- ブロック共通 ---------- */
.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px: Error 時のフィールド⇄ヘルパー間 */
  width: 100%;
  font-family: var(--font-jp);
}

/* スクリーンリーダー専用ラベル（視覚非表示・フォーカス可能性は不要） */
.c-field__sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
 * ボックス型コントロール（TextField / TextArea / Selector）
 * =================================================================*/
.c-field__input,
.c-field__select,
.c-field__textarea {
  display: block;
  width: 100%;
  max-width: 720rem; /* Figma max-w-720 */
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-body-sm);  /* 14px */
  line-height: var(--lh-snug);   /* 1.5 */
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-default);
  background-color: var(--color-white);
  border: 2rem solid transparent; /* Default は枠なし → focus/error で着色（ずれ防止） */
  border-radius: var(--radius-md); /* 8px */
  -webkit-appearance: none;
          appearance: none;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default);
}

.c-field__input,
.c-field__select {
  height: 48rem;
  padding: 0 16rem;
}

.c-field__textarea {
  min-height: 160rem;
  padding: 12rem 16rem;
  resize: vertical;
}

/* プレースホルダ = Neutral03 */
.c-field__input::placeholder,
.c-field__textarea::placeholder {
  color: var(--color-neutral-03);
  opacity: 1;
}

/* Focused */
.c-field__input:focus,
.c-field__select:focus,
.c-field__textarea:focus {
  outline: none;
  border-color: var(--color-light-orange-01);
}

/* Error（枠） */
.c-field.is-error .c-field__input,
.c-field.is-error .c-field__select,
.c-field.is-error .c-field__textarea {
  border-color: var(--color-alert);
}

/* Disabled */
.c-field__input:disabled,
.c-field__select:disabled,
.c-field__textarea:disabled {
  background-color: var(--color-bg-02);
  border: 1px solid var(--color-neutral-03);
  color: var(--color-neutral-03);
  cursor: not-allowed;
}
.c-field__input:disabled::placeholder,
.c-field__textarea:disabled::placeholder {
  color: var(--color-neutral-03);
}

/* ---------- Selector 専用（チェブロン）---------- */
.c-field__select-wrap {
  position: relative;
  width: 100%;
  max-width: 720rem;
}
.c-field__select {
  padding-right: 44rem; /* チェブロン分の余白 */
  cursor: pointer;
}
/* 未選択（空 option）時の文字色は Neutral02、選択済みは Neutral01 */
.c-field__select:has(option[value=""]:checked) {
  color: var(--color-neutral-02);
}
.c-field__chevron {
  position: absolute;
  top: 50%;
  right: 16rem;
  transform: translateY(-50%);
  width: 12rem;
  height: 8rem;
  pointer-events: none;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/chevron-down.svg") no-repeat center / contain;
          mask: url("/img/common/icons/chevron-down.svg") no-repeat center / contain;
}
/* Disabled 時はチェブロンを Neutral03 に */
.c-field--selector.is-disabled .c-field__chevron,
.c-field__select:disabled ~ .c-field__chevron {
  background-color: var(--color-neutral-03);
}

/* =================================================================
 * Error ヘルパーテキスト（全 type 共通）
 * =================================================================*/
.c-field__error {
  margin: 0;
  padding: 0 4rem;
  font-size: var(--fs-body-xs); /* 12px */
  line-height: 1.7;
  letter-spacing: 0.02em; /* Figma tracking 0.24px @ 12px */
  color: var(--color-alert);
}
.c-field__error--center {
  width: 100%;
  text-align: center;
}

/* =================================================================
 * 選択インジケータ（CheckBoxArea / CatalogSelect 共通）
 * 純CSS図形で再現（SVG外出し対象外）
 * =================================================================*/
.c-field__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.c-field__check-ui {
  position: relative;
  flex-shrink: 0;
  width: 16rem;
  height: 16rem;
  border-radius: var(--radius-sm); /* 4px */
  background-color: var(--color-bg-03);
  transition: background-color var(--duration-fast) var(--easing-default);
}
/* checked → 白地＋キーカラーのチェック */
.c-field__check-input:checked ~ .c-field__check-ui {
  background-color: var(--color-white);
}
/* チェック（✓）は 16rem の箱いっぱいに太く（Figma checkbox_radio_btn 5083:333596 準拠）。
   旧 4×8/2rem は箱に対して小さく見えた（SP指摘）。中央寄せで箱サイズに依存しない。 */
.c-field__check-input:checked ~ .c-field__check-ui::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 5.5rem;
  height: 10rem;
  border: solid var(--color-key);
  border-width: 0 2.5rem 2.5rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* disabled インジケータ */
.c-field__check-input:disabled ~ .c-field__check-ui {
  background-color: var(--color-neutral-03);
}
.c-field__check-input:disabled ~ .c-field__check-ui::after {
  display: none;
}

/* =================================================================
 * CheckBoxArea（チェックボックス pill）
 * =================================================================*/
.c-field--checkbox { align-items: flex-start; }

.c-field__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2); /* 8px */
  height: 50rem;
  padding: 0 20rem;
  border-radius: 25rem;
  background-color: var(--color-white);
  border: 2rem solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default);
}
.c-field__check-text {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm); /* 14px */
  line-height: 1;
  letter-spacing: 0.04em; /* Figma 0.56px @ 14px */
  color: var(--color-text-default);
  white-space: nowrap;
}
/* Filled（checked）= BG03 ＋ 白枠 */
.c-field__check:has(.c-field__check-input:checked) {
  background-color: var(--color-bg-03);
  border-color: var(--color-white);
}
/* Error */
.c-field--checkbox.is-error .c-field__check {
  border-color: var(--color-alert);
}
/* Disabled */
.c-field__check:has(.c-field__check-input:disabled),
.c-field--checkbox.is-disabled .c-field__check {
  background-color: var(--color-bg-02);
  border: 1px solid var(--color-neutral-03);
  cursor: not-allowed;
}
.c-field__check:has(.c-field__check-input:disabled) .c-field__check-text,
.c-field--checkbox.is-disabled .c-field__check-text {
  color: var(--color-neutral-03);
}
/* Focused（最後に置いてフォーカス枠を優先） */
.c-field__check:focus-within {
  border-color: var(--color-light-orange-01);
}

/* =================================================================
 * RadioArea（ラジオ pill）
 * Figma 入力項目(3874:94691)には radio 定義が無いため、contact-form130 の
 * 既存ラジオ意匠を正規化（ローカル変数→トークン）したもの。
 *   pill min-h36 / 円形インジケータ18px / checked=白2px枠＋key 内側リング。
 * マークアップは checkbox と同形（input は .c-field__check-input を共用）。
 * =================================================================*/
.c-field--radio { align-items: flex-start; }

.c-field__radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  min-height: 36rem;
  padding: 0 10rem;
  border-radius: 20rem;
  /* 未選択 pill = BG01（Figma radio_btn 未選択 4997:217048）。 */
  background-color: var(--color-bg-01);
  border: 2rem solid transparent;          /* checked で白枠化してもズレないよう既定で確保 */
  cursor: pointer;
  box-sizing: border-box;
  transition:
    box-shadow var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default);
}
/* 円形インジケータ（Default）*/
.c-field__radio-ui {
  position: relative;                                /* ::after の塗りドット配置用 */
  flex-shrink: 0;
  width: 18rem;
  height: 18rem;
  border-radius: 9rem;
  box-sizing: border-box;
  background-color: var(--color-bg-02);              /* 旧 --cf130-bg-panel #f5f2f0 */
  border: 1px solid var(--color-bg-disabled);        /* 旧 --contact-line Neutral04@88% */
  transition:
    box-shadow var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default),
    border-color var(--duration-fast) var(--easing-default);
}
/* Filled（checked）= 白い18px丸 ＋ 中央に塗りのオレンジ10px丸ドット
   （Figma radio_btn 2943:125616：bg-white 18px ＋ #FF6243 10px。リングではなく塗り） */
.c-field__check-input:checked ~ .c-field__radio-ui {
  background-color: var(--color-white);
  border-color: transparent;
  box-shadow: none;
}
.c-field__check-input:checked ~ .c-field__radio-ui::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rem;
  height: 10rem;
  margin: -5rem 0 0 -5rem;
  border-radius: 50%;
  background-color: var(--color-key);
}
/* 選択中 pill = BG03(#EAE5E1)塗り＋白枠（Figma radio_btn 選択 4997:217047）。
   選択は橙丸インジケータで示す（pill自体は塗らずグレー）。 */
.c-field__radio:has(.c-field__check-input:checked) {
  background-color: var(--color-bg-03);
  border-color: var(--color-white);
}
/* Error（ラジオは通常グループ単位だが、API 一貫性のため pill にも alert リング）*/
.c-field--radio.is-error .c-field__radio {
  box-shadow: 0 0 0 2rem var(--color-alert);
}
/* Disabled */
.c-field__radio:has(.c-field__check-input:disabled),
.c-field--radio.is-disabled .c-field__radio {
  background-color: var(--color-bg-02);
  cursor: not-allowed;
}
.c-field__radio:has(.c-field__check-input:disabled) .c-field__radio-ui,
.c-field--radio.is-disabled .c-field__radio-ui {
  background-color: var(--color-neutral-03);
  border-color: var(--color-neutral-03);
}
.c-field__radio:has(.c-field__check-input:disabled) .c-field__check-text,
.c-field--radio.is-disabled .c-field__check-text {
  color: var(--color-neutral-03);
}
/* Focused（最後に置いてフォーカス枠を優先） */
.c-field__check-input:focus-visible ~ .c-field__radio-ui {
  outline: 2rem solid var(--color-key);
  outline-offset: 2rem;
}

/* =================================================================
 * CatalogSelect（カタログ選択カード）
 * =================================================================*/
.c-field--catalog { align-items: stretch; }

.c-field__catalog {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  width: 100%;
  padding: 12rem 14rem 12rem 12rem;
  border-radius: var(--radius-lg); /* 16px */
  background-color: var(--color-white);
  border: 2rem solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default);
}
.c-field__catalog-main {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 10rem;
}
.c-field__catalog-thumb {
  flex-shrink: 0;
  width: 90rem;
  height: 124rem;
  object-fit: cover;
  border: 1px solid rgba(217, 217, 217, 0.88); /* Neutral04 88% */
}
.c-field__catalog-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-field__catalog-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm); /* 14px */
  line-height: 1.5;
  letter-spacing: 0.04em; /* 0.56px @ 14px */
  color: var(--color-text-default);
}
.c-field__catalog-text {
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-default);
}
/* Filled（checked）= BG03 ＋ 白枠 */
.c-field__catalog:has(.c-field__check-input:checked) {
  background-color: var(--color-bg-03);
  border-color: var(--color-white);
}
/* Error */
.c-field--catalog.is-error .c-field__catalog {
  border-color: var(--color-alert);
}
/* Disabled */
.c-field__catalog:has(.c-field__check-input:disabled),
.c-field--catalog.is-disabled .c-field__catalog {
  background-color: var(--color-bg-02);
  border: 1px solid var(--color-neutral-03);
  cursor: not-allowed;
}
.c-field__catalog:has(.c-field__check-input:disabled) .c-field__catalog-thumb,
.c-field--catalog.is-disabled .c-field__catalog-thumb {
  opacity: 0.8;
}
.c-field__catalog:has(.c-field__check-input:disabled) .c-field__catalog-name,
.c-field__catalog:has(.c-field__check-input:disabled) .c-field__catalog-text,
.c-field--catalog.is-disabled .c-field__catalog-name,
.c-field--catalog.is-disabled .c-field__catalog-text {
  color: var(--color-neutral-03);
}
/* Focused（最後に置いてフォーカス枠を優先） */
.c-field__catalog:focus-within {
  border-color: var(--color-light-orange-01);
}

/* =================================================================
 * Date（<input type=date> + 右端オーバーレイのピッカー起動ボタン）
 * ネイティブカレンダーアイコンを隠し独自アイコンを重ねる。chevron-down.svg を流用。
 * =================================================================*/
.c-field--date .c-field__date-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720rem;
}
.c-field__date-input {
  display: block;
  width: 100%;
  height: 48rem;
  padding: 0 16rem;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--fs-body-sm);          /* 14px */
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-default);
  background-color: var(--color-white);
  border: 2rem solid transparent;
  border-radius: var(--radius-md);
  -webkit-appearance: none;
          appearance: none;
  -moz-appearance: textfield;
}
/* ネイティブのカレンダー起動子は「見えないが押せる」状態のまま右端 60rem 幅に広げる。
   display:none にすると iOS/デスクトップともネイティブのピッカー起動が殺され、独自ボタンの
   showPicker() だけが頼りになり iOS で開かない不具合になる（修正前）。透明のまま重ねることで
   右端の▼領域タップ＝ネイティブピッカー起動を全環境で確保する。 */
.c-field__date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 60rem;
  height: 48rem;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.c-field__date-input:focus {
  outline: none;
  border-color: var(--color-light-orange-01);
}
/* ネイティブの日付値は datetime-edit 系の擬似要素で描画され、既定で本文より小さく/
   左に余白付きで出る（選択後の値が小さく・位置がずれる）。入力本体と同じ 14rem・
   左寄せ・余白0 に揃える。ベンダー擬似要素は1つでも未知だと行全体が無効化される
   ブラウザがあるため、まとめずに個別指定する。 */
.c-field__date-input::-webkit-datetime-edit {
  font-size: 14rem;
  line-height: 44rem;          /* 値を入力高(48 - border2*2=44)に合わせ縦中央へ */
  padding: 0;
}
.c-field__date-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.c-field__date-input::-webkit-datetime-edit-text { font-size: 14rem; }
.c-field__date-input::-webkit-datetime-edit-month-field { font-size: 14rem; }
.c-field__date-input::-webkit-datetime-edit-day-field { font-size: 14rem; }
.c-field__date-input::-webkit-datetime-edit-year-field { font-size: 14rem; }
/* iOS Safari はこちらで値を描画する。CSS変数だと環境により擬似要素へ効かない例が
   あるため実値(14rem)で指定。line-height=入力高で縦中央化（選択後に小さく/上寄りに
   見える問題＝No.29 への対処）。値が縦に潰れないよう height も明示。 */
.c-field__date-input::-webkit-date-and-time-value {
  font-size: 14rem;
  text-align: left;
  margin: 0;
  min-height: 44rem;
  line-height: 44rem;
}
.c-field--date.is-error .c-field__date-input { border-color: var(--color-alert); }

/* ▼ボタンは装飾専用（pointer-events:none）。実際のピッカー起動は下層の input の
   ネイティブ calendar-picker-indicator（透明・右端60rem）が全環境で担う。
   背景を透過にすることで focus 時の input 右端のオレンジ枠が▼の背後でも途切れない（No.27）。
   タップが input へ素通りするため iOS でネイティブピッカーが開く（No.28）。 */
.c-field__date-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 60rem;
  height: 48rem;
  display: flex;
  align-items: center;
  /* ▼の見た目位置を selector の .c-field__chevron（right:16rem）と揃える。
     クリック領域はネイティブ calendar-picker-indicator(右端60rem)が担うので見た目だけ右寄せ。 */
  justify-content: flex-end;
  padding: 0 16rem 0 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  pointer-events: none;
  z-index: 2;
}
.c-field__date-btn-icon {
  width: 12rem;
  height: 8rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/chevron-down.svg") no-repeat center / contain;
          mask: url("/img/common/icons/chevron-down.svg") no-repeat center / contain;
}

/* =================================================================
 * Zip（〒 prefix + 郵便番号入力 + 住所自動入力ボタン）
 * 旧 contact-form130__address-line(zip部分) の意匠を踏襲。
 * 入力幅 116rem 既定。catalog フォームのみページ側で `.contact-form130--catalog .c-field--zip` に上書き。
 * =================================================================*/
.c-field--zip .c-field__zip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rem 16rem;
  width: 100%;
}
.c-field__zip-prefix {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);   /* 16px */
}
.c-field__zip-input {
  box-sizing: border-box;
  max-width: 116rem;
  height: 48rem;
  padding: 0 16rem;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-spacing-small);
  color: var(--color-text-default);
  background-color: var(--color-white);
  border: 2rem solid transparent;
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
}
.c-field__zip-input:focus {
  outline: none;
  border-color: var(--color-light-orange-01);
}
.c-field--zip.is-error .c-field__zip-input { border-color: var(--color-alert); }
.c-field__zip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36rem;
  padding: 0 16rem;
  font-family: inherit;
  font-size: 13rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-text-default);
  background-color: var(--color-white);
  border: 1px solid var(--color-light-orange-01);
  border-radius: 19rem;
  cursor: pointer;
  box-sizing: border-box;
}

/* =================================================================
 * File（ファイル選択ボタン + ヒント + 任意の注釈）
 * 旧 contact-form130__file-* の意匠を踏襲（h36 pill / Light_Orange01 枠）。
 * SVGはmask-image外出し（共通 plus.svg を流用＝Figma open-close と同形＋ Key Color）。
 * =================================================================*/
.c-field--file .c-field__file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16rem 24rem;
}
.c-field__file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);            /* 8px */
  height: 36rem;
  padding: 0 16rem 0 24rem;
  font-family: inherit;
  font-size: var(--fs-body-xs);   /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-text-default);
  background-color: var(--color-white);
  border: 1px solid var(--color-light-orange-01);
  border-radius: 19rem;
  cursor: pointer;
  box-sizing: border-box;
}
.c-field__file-btn-icon {
  flex-shrink: 0;
  width: 18rem;
  height: 18rem;
  background-color: var(--color-key);
  -webkit-mask: url("/img/common/icons/plus.svg") no-repeat center / contain;
          mask: url("/img/common/icons/plus.svg") no-repeat center / contain;
  transform: rotate(-45deg); /* plus.svg は素材的に×形のため -45° 回転で「＋」表示（c-button--plus と同じ扱い）*/
}
.c-field__file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.c-field__file-hint {
  font-size: var(--fs-body-sm);   /* 14px */
  color: var(--color-neutral-02);
}
.c-field__file-note {
  margin: 0;
  font-size: var(--fs-body-sm);   /* 14px */
  line-height: 1.6;
  color: var(--color-text-default);
}
/* Error / Disabled */
.c-field--file.is-error .c-field__file-btn { border-color: var(--color-alert); }
.c-field--file.is-disabled .c-field__file-btn { cursor: not-allowed; opacity: 0.6; }

/* =================================================================
 * SP 調整（Figma SP: pill 高さ 50→44）
 * =================================================================*/
@media (max-width: 1023.98px) {
  .c-field__check {
    height: 44rem;
    padding: 0 16rem;
  }
}