/* =====================================================================
   bySENSE — contact.css  (お問い合わせ 3画面 = ec-force 標準 /shop/contact)
   ────────────────────────────────────────────────────────────────────────
   対象テンプレート（テーマ直編集・安定レイヤ＝build.sh 非生成）:
     theme/shop/contacts/draft.html.liquid    入力フォーム
     theme/shop/contacts/confirm.html.liquid   確認
     theme/shop/contacts/complete.html.liquid  完了
   ・3画面とも layout(shop.html.liquid) が <main class="l-container"> を描画し、
     本文に #site-header/#site-footer は持たない（ヘッダー/フッターは layout がサーバ描画）。
   ・濃色ヘッダー（明背景での視認性）＝ components.css の
     body:has(.l-container) .site-header{color:var(--ink)…} が自動適用。
     固定ヘッダー回避の padding-top は components.css の .l-container{padding-top:var(--header-h)}。
   ────────────────────────────────────────────────────────────────────────
   ★フォーム機能保持の大原則（壊すと送信不能）★
   ・<form> の action/method/id・hidden _method・{% csrf_meta_tags %}・
     全 input/select/textarea の name/id/value/placeholder・validate[...] クラス・
     contact_types ループ・agree チェック・shop_form_settings/customer_signed_in 分岐は
     マークアップ側で 1行も触らない。本CSSは「見た目」だけを .contact-stage スコープで与える。
   ・ec-force 標準の u-color__* / u-text--{input,btn,head,body} は bundle.css に実体が無く
     （テナント注入CSS依存）色が来ない前提 → 入力/ボタン/文字の色は本CSSで要素単位に確実付与。
   ・標準フォーム要素は appearance:none;background:none;border:none でリセット済（bundle L3062-）。
     形状（height/padding/border-width/checkbox の __frame L字）は bundle が供給 → 本CSSは色と
     縦積みレイアウトを上書き（詳細度は .contact-stage スコープ＝クラス2以上で bundle に勝つ）。
   ────────────────────────────────────────────────────────────────────────
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41 / 入力欄 var(--white)=#fff。
   全クラスは .contact-stage 配下にスコープ＝他ページ無影響。
   ===================================================================== */

/* ============ contact-stage 流体化（items.css と同一機構） ============
   .l-container の子は .stage を継承しない → faq/sub/items と同じ clamp 機構で再現。
   width は clamp(floor,100vw,frame)・margin-left で中央寄せ。 */
.contact-stage {
  position: relative;
  width: clamp(var(--floor), 100vw, var(--frame));
  min-width: var(--floor);
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
  background: var(--bg);
}

/* ============ コンテンツ（中央コンテナ 820px・1カラム） ============
   ※フィードバック: ページ幅を「もう少し」広げる（見出し・説明文・フォーム一体で 680→820px）。
   padding-top は l-container が固定ヘッダー回避済 → デザイン上のギャップ(64px)のみ。
   footer 余白は components.css の .site-footer{margin-top} が担当（padding-bottom は持たない）。 */
.contact-content {
  width: min(820px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 64px;
}
.contact-content--complete { padding-top: 104px; padding-bottom: 32px; }

/* ============ ブランドヘッダー帯（控えめ・FVなし・中央寄せ） ============ */
.ct-head {
  text-align: center;
  padding-bottom: 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.ct-head__en {
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-60);
}
.ct-head__ja {
  margin-top: 12px;
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; line-height: 1.4; letter-spacing: .08em; color: var(--ink);
}
.ct-head__lead {
  margin-top: 18px;
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60);
}

/* ============ フラッシュメッセージ（送信エラー/成功）— 標準クラスを装飾 ============ */
.contact-stage .control-alert {
  margin-bottom: 24px; padding: 14px 18px; border-radius: 2px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1.6;
}
.contact-stage .alert-danger {
  background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .38); color: #b23a2e;
}
.contact-stage .alert-success {
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
}

/* ============ フォーム外枠（標準 padding/max-width を解除＝content 幅に従わせる） ============ */
.contact-stage .p-account_form { padding: 0; }
.contact-stage .p-account_form__inner { max-width: none; width: 100%; margin: 0; }

/* ---- FAQ 導線（枠線ボタン・.sub-btn 様式） ---- */
.contact-stage .p-contact__link { display: flex; justify-content: center; margin-bottom: 4px; }
.contact-stage .p-contact__link__btn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: none; width: auto; height: auto; padding: 13px 36px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .12em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.contact-stage .p-contact__link__btn:hover { background: var(--ink); color: var(--white); opacity: 1; }

/* ---- サブ見出し（お問い合わせフォーム / 必須注記） ---- */
.contact-stage .p-contact__head { margin-top: 44px; margin-bottom: 26px; text-align: center; }
.contact-stage .p-contact__head__title {
  font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: .08em; color: var(--ink);
}
.contact-stage .p-contact__head__notes {
  margin-top: 12px; font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--ink-60);
}
/* 必須マーク（標準 u-color__text--alert はテナント依存＝色が来ない前提で確実付与） */
.contact-stage .u-color__text--alert { color: #b23a2e; }
.contact-stage .c-form_table > tbody > tr > th .u-color__text--alert {
  margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; vertical-align: 1px;
}

/* ============ 入力テーブル → 縦積み化（PC もラベル上・入力下） ============ */
.contact-stage .c-form_table { table-layout: auto; width: 100%; margin: 0; }
.contact-stage .c-form_table,
.contact-stage .c-form_table > tbody,
.contact-stage .c-form_table > tbody > tr,
.contact-stage .c-form_table > tbody > tr > th,
.contact-stage .c-form_table > tbody > tr > td { display: block; width: 100%; }
.contact-stage .c-form_table > tbody > tr { margin-bottom: 24px; }
.contact-stage .c-form_table > tbody > tr:last-child { margin-bottom: 0; }
.contact-stage .c-form_table > tbody > tr > th {
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .08em;
  color: var(--ink); text-align: left; white-space: normal; padding: 0 0 9px; margin: 0;
}
.contact-stage .c-form_table > tbody > tr > td { position: relative; padding: 0; }

/* ---- input / textarea / select 共通（色は本CSSで確実付与） ---- */
.contact-stage .c-form_table input[type="text"],
.contact-stage .c-form_table input[type="email"],
.contact-stage .c-form_table input[type="tel"],
.contact-stage .c-form_table textarea,
.contact-stage .c-form_table select {
  width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); font-family: var(--sans); font-weight: 400;
  transition: border-color .3s var(--ease);
}
.contact-stage .c-form_table input[type="text"],
.contact-stage .c-form_table input[type="email"],
.contact-stage .c-form_table input[type="tel"],
.contact-stage .c-form_table select { height: 50px; font-size: 16px; padding: 0 16px; }
.contact-stage .c-form_table textarea {
  min-height: 168px; font-size: 16px; padding: 14px 16px; line-height: 1.8; resize: vertical;
}
.contact-stage .c-form_table input:focus,
.contact-stage .c-form_table textarea:focus,
.contact-stage .c-form_table select:focus { border-color: var(--ink); outline: none; }
.contact-stage .c-form_table input::placeholder,
.contact-stage .c-form_table textarea::placeholder { color: var(--ink-60); opacity: .5; }

/* ---- 氏名/カナ 2分割・電話 3分割（flex は bundle が供給。間隔だけ整える） ---- */
.contact-stage .c-form_table__name { display: flex; gap: 16px; }
.contact-stage .c-form_table__name input { max-width: none; }
.contact-stage .c-form_table__tel { display: flex; flex-wrap: wrap; align-items: center; }
.contact-stage .c-form_table__tel input { max-width: 132px; }
.contact-stage .c-form_table__tel > * { margin-bottom: 0; }
.contact-stage .c-form_table__tel > *:not(:last-child) { margin-right: 10px; }
.contact-stage .c-form_table__tel span { color: var(--ink-60); }

/* ---- 種別 select（標準 :after のアイコンフォント chevron を独自 CSS 三角へ） ---- */
.contact-stage .c-form_table__select { position: relative; display: block; }
.contact-stage .c-form_table__select select { padding-right: 44px; cursor: pointer; }
.contact-stage .c-form_table__select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  margin-top: -6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg); pointer-events: none; font-size: 0;
}

/* ---- 同意チェック（標準 __frame の L字を活かし bySENSE インクで描画） ---- */
.contact-stage .c-form_table__newsletter { padding: 6px 0 0; }
.contact-stage .c-form_table__checkbox { display: flex; align-items: center; }
.contact-stage .c-form_table__checkbox input {
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); margin-right: 10px; flex-shrink: 0; cursor: pointer;
}
.contact-stage .c-form_table__checkbox input:checked { background: var(--ink); border-color: var(--ink); }
/* __frame = 左+下ボーダーのL字 rotate(-45deg)（bundle）。checked 時のみ opacity:1（bundle）。
   チェックマーク色を白に（--ink 背景の上） */
.contact-stage .c-form_table__checkbox__frame { border-left-color: var(--white); border-bottom-color: var(--white); }
.contact-stage .c-form_table__checkbox__text {
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.7; color: var(--ink-60);
}
.contact-stage .c-form_table__checkbox__text a {
  color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}
.contact-stage .c-form_table__checkbox__text a:hover { opacity: .6; }

/* ============ 送信ボタン（塗り）／戻るリンク（下線） ============ */
.contact-stage .p-account_form__inner__bottom { text-align: center; margin-top: 48px; }
.contact-stage .p-account_form__inner__bottom__btn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: none; width: auto; min-width: 280px; height: auto; padding: 18px 52px;
  margin: 0 auto; background: var(--ink); color: var(--white); border: 1px solid var(--ink);
  border-radius: 2px; font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: .15em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.contact-stage .p-account_form__inner__bottom__btn:hover { background: transparent; color: var(--ink); opacity: 1; }
.contact-stage .p-account_form__inner__bottom__link {
  display: inline-block; margin-top: 22px; text-decoration: none;
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em;
  color: var(--ink-60); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}
.contact-stage .p-account_form__inner__bottom__link:hover { opacity: .6; }

/* ============ 確認テーブル（label+value・罫線区切り） ============ */
.contact-stage .c-form_table--confirm { width: 100%; margin: 0; }
.contact-stage .c-form_table--confirm,
.contact-stage .c-form_table--confirm > tbody,
.contact-stage .c-form_table--confirm > tbody > tr,
.contact-stage .c-form_table--confirm > tbody > tr > th,
.contact-stage .c-form_table--confirm > tbody > tr > td { display: block; width: 100%; }
.contact-stage .c-form_table--confirm > tbody > tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-stage .c-form_table--confirm > tbody > tr:first-child { border-top: 1px solid var(--line); }
.contact-stage .c-form_table--confirm > tbody > tr > th {
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .08em;
  color: var(--ink-60); padding: 0 0 6px;
}
.contact-stage .c-form_table--confirm > tbody > tr > td {
  font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--ink);
  padding: 0; white-space: pre-wrap; word-break: break-word;
}

/* ============ 完了画面ヘッダー（.p-page_header 流用・中央） ============ */
.contact-stage .p-page_header { padding: 0; }
.contact-stage .p-page_header__inner { text-align: center; }
.contact-stage .p-page_header__inner__title {
  font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.5;
  letter-spacing: .06em; color: var(--ink);
}
.contact-stage .p-page_header__inner__lead {
  margin-top: 22px; font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60);
}
.contact-stage .p-page_header__inner__lead a {
  color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.contact-stage .p-page_header__inner__btn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: none; width: auto; height: auto; margin: 36px auto 0; padding: 16px 44px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .15em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.contact-stage .p-page_header__inner__btn:hover { background: var(--ink); color: var(--white); opacity: 1; }

/* ============ バリデーションエラー吹き出し（validationEngine）— 標準の機能/位置は維持・font のみ ============ */
.contact-stage .c-form_table .formError,
.contact-stage .c-form_table--confirm .formError { font-family: var(--sans); }

/* =====================================================================
   [Phase3] スマホ専用 (<768) — faq/sub/items のスマホ規則を踏襲
   contact-stage のフロア(1200)解除＋全幅化。l-container が SP は padding-top:60px。
   入力テーブルは PC で既に縦積み化済（bundle の 719px block 化と整合）。
   ===================================================================== */
@media (max-width: 767px) {
  .contact-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .contact-content { width: auto; padding: 40px 24px 0; }
  .contact-content--complete { padding-top: 64px; padding-bottom: 24px; }

  .ct-head { padding-bottom: 28px; margin-bottom: 32px; }
  .ct-head__ja { font-size: 24px; }
  .ct-head__lead { margin-top: 14px; }

  .contact-stage .p-contact__head { margin-top: 36px; }

  .contact-stage .c-form_table input[type="text"],
  .contact-stage .c-form_table input[type="email"],
  .contact-stage .c-form_table input[type="tel"],
  .contact-stage .c-form_table select { height: 48px; }
  .contact-stage .c-form_table__name { gap: 12px; }
  /* 電話3分割は SP では固定幅をやめ flex 均等配分＝コンテンツ幅に自動フィット（375px でも折返さない） */
  .contact-stage .c-form_table__tel input { max-width: none; flex: 1 1 0; min-width: 0; }

  .contact-stage .p-account_form__inner__bottom { margin-top: 40px; }
  .contact-stage .p-account_form__inner__bottom__btn { width: 100%; min-width: 0; padding: 17px 24px; }

  .contact-stage .p-page_header__inner__title { font-size: 22px; }
  .contact-stage .p-page_header__inner__btn { width: 100%; padding: 16px 24px; }
}