@charset "UTF-8";

/* ==========================================================================
   cle-auth.css — ログイン・会員登録・パスワード再設定（customers/ 4枚）

   デザインは無い（design_0901 にログインの面は含まれていない）。
   カート・注文フロー・会員ページと同じ方針で、**既定の骨格をそのまま使い、
   CSS だけでトンマナを寄せる。**

   ■ 効かせる面
     .cle-auth        4枚の main へ足した目印
     #customers-sessions-sign-in-view        ログイン
     #customers-registrations-sign-up-view   新規会員登録
     #customers-password-new-view            パスワードリセット（メール送信）
     #customers-password-edit-view           パスワード再設定（新しいパスワード）

     入力欄・セレクト・チェック・必須の印は cle-form.css が受け持つ
     （あちらの :is(...) の並びに .cle-auth を足してある）。ここが持つのは
     ページの地と幅・2カラム・ボタン・リンクだけ。

   ■ 借りているもの（寸法はここで持たない）
     .cle-page__top / __wrap / __head / __head-label / __head-lead
                                     … 見出し（cle-page.css 2節）
     .cle-btn.--outline              … 副次的な導線（同 4節）
     .cle-crumb                      … パンくず（同 3節）

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。
     cle-form.css より後（あちらの指定を素直に上書きするため）。
     指定はすべて .cle-auth か上記の id の下に閉じてあるので、他のページで
     読まれても影響は出ない。

   ■ ログインだけ入力表を縦積みにしている（3節）
     欄が2つの短いフォームで、しかも半分の幅の列に入るため。
     会員登録は項目の多い書類なので2列のまま（注文入力・会員ページと同じ）。
   ========================================================================== */

/* ==========================================================================
   1. ページの地と幅

   4枚とも main は l-container を持つので、固定ヘッダーぶんの押し下げは
   cle-header.css 1節がそのまま効く（カート・注文フローと違ってここは
   足さなくてよい）。

   幅は他の下層ページと同じ 1400px ＋ 共通ガター。既定は .p-login と
   .p-account_form が 40px の左右余白を別に持っているので、行
   （.l-container__row）1か所へ寄せてから内側の指定を打ち消す。
   カート（cle-cart.css 1節）と同じ手順。
   ========================================================================== */

.cle-auth {
  padding-bottom: 96px;
  background: linear-gradient(180deg, #f6f0e7 0%, #efe8dc 100%);
}

.cle-auth .l-container__row {
  box-sizing: border-box;
  width: min(100%, 1400px);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-right: var(--cle-page-gutter);
  padding-left: var(--cle-page-gutter);
}

.cle-auth .p-login,
.cle-auth .p-account_form {
  padding-right: 0;
  padding-left: 0;
}

/* パンくずは main の中の最後。帯が自分で左右を取るので、行の外に置く。
   下端の余白は帯が持つので、ここでは本文側の余白だけ畳む。 */
.cle-auth > .cle-crumb {
  margin-top: 40px;
}

.cle-auth:has(> .cle-crumb) {
  padding-bottom: 0;
}

/* ==========================================================================
   2. ログインの2カラム（.p-login）

   既定は flex の2分割（左にログイン・右に会員登録の案内）で、719px で
   縦積みになる。組みはそのまま使い、幅を詰めて縦罫で仕切るだけ。

   1200px のままだと1列が 570px ほどになり、欄が2つのフォームには広い。
   960px（1列およそ 430px）に寄せている。
   ========================================================================== */

.cle-auth .p-login__inner {
  max-width: 960px;
}

.cle-auth .p-login__inner__login,
.cle-auth .p-login__inner__registration {
  box-sizing: border-box;
  width: 50%;
}

.cle-auth .p-login__inner__login {
  padding-right: 56px;
}

.cle-auth .p-login__inner__registration {
  padding-left: 56px;
  border-left: 1px solid var(--cle-line);
}

/* 列の見出し。共通パーツ（cle-page.css 2節）をテンプレートで使っている。
   ページの主見出しの下に来る節の見出しなので、あちらの 56px は空きすぎる。 */
.cle-auth .p-login .cle-page__head {
  margin-bottom: 30px;
}

/* ページの主見出し（h1）に従属させる。共通パーツの clamp のままだと
   30px まで伸びて、半分の幅の列では 会員登録がまだの方はこちら が
   3行に折れる。 */
.cle-auth .p-login .cle-page__head h2 {
  font-size: clamp(18px, 1.8vw, 22px);
}

.cle-auth .p-login__inner__registration__text {
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2;
}

/* ==========================================================================
   3. ログインだけ入力表を縦積みにする（.c-form_table）

   組み替え方は cle-contact.css 3節と同じ。**マークアップは既定のまま**に
   して、display だけで項目名を欄の上へ回している（欄の name と id、
   validate[...] はプラットフォーム側の JS が見ているため触らない）。

   ■ 詳細度
     cle-form.css の指定は :is(...) に id が入るので (1,1,3) 相当。
     こちらの id 付きの並びも (1,1,3) で並ぶので、勝っているのは
     **読み込み順だけ**（cle-auth.css が後）。
     _head.html.liquid の並びを入れ替えないこと。

   ■ 会員登録・パスワードには当てない
     会員登録は項目の多い書類で、2列のほうが追いやすい（注文入力・会員
     ページと同じ判断。cle-form.css 5節）。パスワードの2枚は欄が少ないが、
     720px の1カラムなので2列のままで詰まらない。
   ========================================================================== */

#customers-sessions-sign-in-view .c-form_table,
#customers-sessions-sign-in-view .c-form_table > tbody,
#customers-sessions-sign-in-view .c-form_table > tbody > tr,
#customers-sessions-sign-in-view .c-form_table > tbody > tr > td {
  display: block;
  width: auto;
  padding: 0;
}

#customers-sessions-sign-in-view .c-form_table > tbody > tr + tr {
  margin-top: 22px;
}

/* 項目名。デザインの .field-label（guide.css 458行）と同じ値。
   cle-contact.css 3節と対になっている。**片方だけ直さないこと。** */
#customers-sessions-sign-in-view .c-form_table > tbody > tr > th {
  display: block;
  width: auto;
  margin-bottom: 10px;
  padding: 0;
  color: var(--cle-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
}

/* ログイン状態を保持する の行だけ項目名が空。縦積みだと空の帯が残る */
#customers-sessions-sign-in-view .c-form_table > tbody > tr > th:empty {
  display: none;
}

/* そのチェックの行。入力欄の並びから少し離す */
#customers-sessions-sign-in-view .c-form_table > tbody > tr:last-child {
  margin-top: 18px;
}

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

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

   既定は高さ 60px の flex（SPで 50px）＋ 角丸 2px ＋ 16px。
   高さを auto に戻して padding で組み直す。SP側の打ち消しも兼ねる
   （メディアクエリは詳細度を上げないので、この1か所で両方に効く）。
   ========================================================================== */

.cle-auth .p-login__inner__login__bottom__submit,
.cle-auth .p-login__inner__registration__bottom__btn,
.cle-auth .p-account_form__inner__bottom__btn,
.cle-auth .p-account_form__inner__bottom__mailbtn {
  height: auto;
  padding: 17px 24px;
  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;
  transition: opacity 0.35s ease;
}

.cle-auth .p-login__inner__login__bottom__submit:hover,
.cle-auth .p-login__inner__registration__bottom__btn:hover,
.cle-auth .p-account_form__inner__bottom__btn:hover,
.cle-auth .p-account_form__inner__bottom__mailbtn:hover {
  opacity: 0.82;
}

.cle-auth .p-login__inner__login__bottom {
  margin-top: 32px;
}

.cle-auth .p-login__inner__registration__bottom {
  margin-top: 32px;
}

.cle-auth .p-account_form__inner__bottom {
  margin-top: 48px;
}

/* ---- 字のリンク --------------------------------------------------------
   パスワードをお忘れの方／ログインページへ。主導線ではないので字にする。
   既定は下線 ＋ hover で opacity 0.4。罫線と色で受け直す。
   ----------------------------------------------------------------------- */

.cle-auth .p-login__inner__login__bottom__forget,
.cle-auth .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;
  transition: color 0.35s ease;
}

.cle-auth .p-login__inner__login__bottom__forget:hover,
.cle-auth .p-account_form__inner__bottom__link:hover {
  color: var(--cle-ink);
  opacity: 1;
}

/* ==========================================================================
   5. 会員登録・パスワード（.p-account_form）

   1カラム 720px。見出しとリード文はテンプレートで共通パーツへ寄せてある
   ので、ここが持つのは器の余白だけ。

   「すでにアカウントをお持ちの方はこちら」は .cle-btn.--outline に
   替えてある（既定は塗りのボタンで、主導線の 会員登録する と並ぶと
   どちらが主か分からなくなるため）。見た目は cle-page.css 4節。
   ========================================================================== */

.cle-auth .p-account_form__inner {
  max-width: 720px;
}

/* ページヘッドの下に置く副次的な導線。中央に1つ。
   下の余白は見出し（.cle-page__head の 56px）から引き継ぐので、
   導線が続くときは見出しの側を詰める。 */
.cle-auth .cle-page__head:has(+ .cle-auth__switch) {
  margin-bottom: 24px;
}

.cle-auth__switch {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}

/* 会員登録のリード文（必須の印 ＋ 説明）。cle-page.css の __head-lead は
   12px/2 で、印のピルが乗ると行が詰まって見えるので少しだけ広げる */
.cle-auth .cle-page__head-lead {
  line-height: 2.2;
}

/* ==========================================================================
   6. レスポンシブ

   切る位置は 719px。**bundle.css が .p-login__inner を解くのがそこ**で、
   ほかの面に合わせて 768px で畳むと 720〜768px のあいだだけ
   「横並びのまま両方が 100% 幅」になって崩れる。
   注文確認（cle-order.css 7節）・会員ページ（cle-account.css 12節）と
   同じ理由。
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-auth .p-login__inner__login {
    padding-right: 36px;
  }

  .cle-auth .p-login__inner__registration {
    padding-left: 36px;
  }
}

@media (max-width: 719px) {
  .cle-auth {
    padding-bottom: 72px;
  }

  .cle-auth .p-login__inner__login,
  .cle-auth .p-login__inner__registration {
    width: 100%;
  }

  .cle-auth .p-login__inner__login {
    padding-right: 0;
  }

  /* 縦積みになるので、仕切りは縦罫から横罫へ */
  .cle-auth .p-login__inner__registration {
    margin-top: 48px;
    padding-top: 44px;
    padding-left: 0;
    border-top: 1px solid var(--cle-line);
    border-left: 0;
  }

  .cle-auth .p-login .cle-page__head {
    margin-bottom: 24px;
  }
}