@charset "UTF-8";

/* ==========================================================================
   cle-contact.css — お問い合わせ（/shop/contact/draft・confirm・complete）

   移植元: docs/design/design_0901/contact.html
           ＋ guide.css の後半「お問い合わせ：フォーム」節

   ページ本体はテーマのテンプレート3枚（ec_force/shop/contacts/）。
   ショッピングガイド・よくある質問と同じ骨格で、土台は cle-page.css。
   このファイルには「お問い合わせにしか無いもの」だけを置く。

   借りているものは次のとおりで、ここでは寸法を持たない。

     .cle-page__flow.--plain             … 写真を敷かないページの地（1節）
     .cle-page__wrap / .cle-page__block  … 幅と節の余白（同）
     .cle-page__top                      … ページヘッドの帯（2節）
     .cle-page__head / --left            … 見出し（同）
     .cle-crumb                          … パンくず（3節。テンプレートが出す）
     .cle-btn.--solid / .--outline       … ボタン（4節）
     .cle-page__deftable                 … その他の窓口の定義表（7節）
     .cle-guide__cards / __card / __cta  … FAQ 誘導のカード（cle-guide.css 6節）

   ■ 入力欄そのものは cle-form.css が持つ
     欄・セレクト・チェック・必須の印は、カートや会員ページと同じ部品。
     あちらの :is(...) の並びに .cle-contact を足してあるので、この面にも
     そのまま効く。**寸法を直すときは cle-form.css。** ここに置いてあるのは
     「表を縦積みにする」組み替えだけ。

   ■ 器の目印は .cle-contact（3枚とも main の中の div に付けてある）
     id は draft にしか無い（#contacts-form-view）。confirm と complete は
     素の main.l-container なので、3枚を一度に取れる目印を別に持たせた。

   ■ 表まわりだけ :is(#contacts-form-view, .cle-contact) で受けている
     cle-form.css は id を含む :is(...) で入力表を受けているので、
     あちらの指定は (1,1,3) 相当になる。class だけの .cle-contact では
     詳細度で負けて、縦積みの組み替えが効かない（id が1つでもあるほうが
     必ず勝つので、class を重ねても届かない）。

     :is() の詳細度は引数の最大値なので、この形なら id を持たない
     confirm / complete でも (1,0,0) 相当で受けられる。**表に関わる指定は
     この頭で書くこと。** それ以外（カード・ボタン・窓口）は cle-form.css と
     ぶつからないので .cle-contact のままでよい。

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。
     指定はすべて .cle-contact の下に閉じてあるので、他のページで
     読まれても影響は出ない。専用のJSは無い。
   ========================================================================== */

/* ==========================================================================
   1. FAQ への誘導

   フォームの前に置く。その場で解決できる方をお待たせせずに済む。
   カードはショッピングガイドのもの（cle-guide.css 6節）をそのまま使う。
   デザイン側も contact.html で guide.css の .guide-card を借りているので、
   持ち場を合わせてある。**カードの寸法を直すときは cle-guide.css。**
   ========================================================================== */

/* 罫線はカードの上辺と二重になるので、この節とフォームの節のあいだは
   引かない（.cle-page__block 同士の隣接で出る1本を消す）。 */
.cle-contact__faq + .cle-contact__form-block {
  border-top: 0;
}

/* カードをリンクにしたもの。押せることが分かる程度に反応させる */
.cle-contact__card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.cle-contact__card:hover {
  border-top-color: var(--cle-ink);
}

/* ==========================================================================
   2. フォームの器

   入力欄の幅は 680px。デザインは 1400px の中で左寄せのまま置いていて、
   見出し（.cle-page__head-left）の左端と揃う。
   ========================================================================== */

.cle-contact .p-account_form__inner {
  width: min(100%, 680px);
  margin-left: 0;
}

/* フラッシュメッセージ（送信エラーなど）。ecforce の flash フィルタが
   出すので中身の組みはこちらで決められない。間隔と字だけ整える。 */
.cle-contact .control-alert {
  margin-bottom: 26px;
  font-size: 12px;
  line-height: 1.9;
}

/* 見出しの下に置く「必須の項目は必ず…」の一文 */
.cle-contact__note {
  margin: 0;
  color: var(--cle-ink-soft);
  font-size: 11px;
  line-height: 1.9;
}

/* ==========================================================================
   3. 入力表を縦積みにする（.c-form_table）

   ecforce の入力表は「項目名（th）と入力欄（td）の2列」だが、デザインの
   お問い合わせフォームは項目名を欄の上に置く1列組み（.field）。
   **マークアップは既定のまま**にして、表示だけ組み替えている。

   ■ なぜ表のまま組み替えるのか
     欄の name と id、validate[...] の並びはプラットフォーム側の JS
     （shop/contacts）とバリデーションが見ている。姓名や電話を包む
     .c-form_table__name / __tel も同じ。表を解体して div に書き換えると
     そこが無言で壊れうるので、CSS の display だけで済ませる。

   ■ この面だけ縦積みにしている
     注文入力・会員ページのフォームは2列のまま（cle-form.css 5節）。
     あちらは購入・会員手続きの書類で、項目数が多く2列のほうが追いやすい。
     こちらは6項目の短いフォームで、デザインも1列で組んである。
   ========================================================================== */

:is(#contacts-form-view, .cle-contact) .c-form_table,
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody,
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr,
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr + tr {
  margin-top: 26px;
}

/* 項目名。デザインの .field-label（guide.css 458行）と同じ値 */
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr > th {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin-bottom: 10px;
  padding: 0;
  color: var(--cle-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
}

/* 必須の印との間隔は上の gap が取る。cle-form.css 5節は表組み（th が
   テーブルセル＝flex にできない面）のために印の側の margin で 10px を
   取っているので、こちらでは戻さないと 20px になる。 */
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr > th span.u-color__text--alert {
  margin-left: 0;
}

/* 同意のチェックの行だけ項目名が空。縦積みだと空の帯が残る */
:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr > th:empty {
  display: none;
}

/* ---- 同意のチェック（最終行） ------------------------------------------
   デザインの .consent（guide.css 560行）。上に罫線を1本引いて、
   入力欄の並びから切り離す。
   ----------------------------------------------------------------------- */

:is(#contacts-form-view, .cle-contact) .c-form_table > tbody > tr:last-child {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--cle-line);
}

:is(#contacts-form-view, .cle-contact) .c-form_table__checkbox__text a {
  border-bottom: 1px solid var(--cle-line-strong);
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   4. 送信ボタン

   .cle-btn.--solid（cle-page.css 4節）と同じ値。ボタンは既定のテンプレートが
   出すもので class を選べないので、値をこちらへ写している。
   **片方だけ直さないこと。**
   ========================================================================== */

.cle-contact .p-account_form__inner__bottom {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 34px;
}

.cle-contact .p-account_form__inner__bottom__btn {
  min-width: 260px;
  padding: 17px 46px;
  border: 1px solid var(--cle-ink);
  border-radius: 0;
  background: var(--cle-ink);
  color: var(--cle-white);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.35s ease;
}

.cle-contact .p-account_form__inner__bottom__btn:hover,
.cle-contact .p-account_form__inner__bottom__btn:focus-visible {
  opacity: 0.82;
}

/* 「入力内容を修正する」。主導線ではないので字のリンクにする */
.cle-contact .p-account_form__inner__bottom__link {
  border-bottom: 1px solid var(--cle-line-strong);
  color: var(--cle-ink-soft);
  font-size: 12px;
  text-decoration: none;
}

.cle-contact .p-account_form__inner__bottom__link:hover {
  color: var(--cle-ink);
}

/* ==========================================================================
   5. 確認画面の表（.c-form_table--confirm）

   入力した値を読み返すだけの表。デザインに対応するものが無いので、
   About とガイドの定義表（cle-page.css 7節の .cle-page__deftable）の
   調子に合わせる。囲まず、横罫だけで区切る。
   ========================================================================== */

:is(#contacts-form-view, .cle-contact) .c-form_table--confirm {
  width: 100%;
  border-top: 1px solid var(--cle-line);
  border-collapse: collapse;
}

:is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr {
  border-bottom: 1px solid var(--cle-line);
}

:is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > th {
  width: 200px;
  padding: 22px 24px 22px 4px;
  border: 0;
  color: var(--cle-ink-soft);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
  vertical-align: top;
}

/* お問い合わせ内容は複数行。入力どおりの改行で読み返せるようにする
   （テンプレートは escape で出しているので、改行は残っている） */
:is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > td {
  padding: 22px 4px;
  border: 0;
  color: var(--cle-ink);
  font-size: 12px;
  line-height: 1.9;
  white-space: pre-wrap;
}

/* ==========================================================================
   6. 完了画面

   見出しと本文とボタンだけ。本文（locale の contact.general.lead_text）は
   br を含むので、字と行間だけ整える。
   ========================================================================== */

.cle-contact__done {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: 24px 0 8px;
  text-align: center;
}

.cle-contact__done-text {
  max-width: 620px;
  margin: 0;
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2;
}

.cle-contact__done-text a {
  border-bottom: 1px solid var(--cle-line-strong);
  color: var(--cle-ink);
  text-decoration: none;
}

/* ==========================================================================
   7. その他の窓口

   デザインの .channel-block。フォームの下に続けて置くので、節どうしの
   罫線は引かない（.cle-page__block 同士の隣接で出る1本を消す）。
   ========================================================================== */

.cle-contact__channel {
  padding-top: 62px;
}

.cle-contact__form-block + .cle-contact__channel {
  border-top: 0;
}

/* ==========================================================================
   8. レスポンシブ（デザインに合わせて 1024px / 768px の2点だけ）
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-contact__channel {
    padding-top: 52px;
  }
}

@media (max-width: 768px) {
  .cle-contact .p-account_form__inner__bottom__btn {
    width: 100%;
    min-width: 0;
    padding: 15px 32px;
  }

  .cle-contact__channel {
    padding-top: 44px;
  }

  /* 確認画面の表も項目名の段を畳む。切る位置は .cle-page__deftable と同じ */
  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm,
  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody,
  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr,
  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > th,
  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > td {
    display: block;
    width: auto;
  }

  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr {
    padding: 18px 2px;
  }

  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > th {
    padding: 0 0 8px;
  }

  :is(#contacts-form-view, .cle-contact) .c-form_table--confirm > tbody > tr > td {
    padding: 0;
  }
}

.p-account_form {
  padding-right: 0;
  padding-left: 0;
}
@media screen and (max-width: 719px) {
  .p-account_form {
      padding-right: 0;
      padding-left: 0;
  }
}