/* ===================================================================== bySENSE — cart.css (カート画面 /shop/cart の「非会員 / 会員」導線スキン) ──────────────────────────────────────────────────────────────────────── 対象テンプレート（テーマ直編集・安定レイヤ＝build.sh 非生成）: theme/shop/sections/carts_show_content.liquid ← このCSSをしている ──────────────────────────────────────────────────────────────────────── なぜ必要か（fb14・2026-07-29）: ec-force 標準のカートは「会員登録して購入」ボタンの箱と「会員のお客様」ログインフォームの箱が同じ見た目（c-cart_submit__block＝上下ヘアラインのみ）で縦に並ぶため、非会員導線と会員導線の区別も主従も付かない、というフィードバックを受けた。本CSSは・見出し(eyebrow + タイトル + リード)のタイポグラフィ・主=塗りボタン / 従=枠線ボタンのコントラスト・2ブロックの間の「または」区切りだけを与える。マークアップ側のフォーム部品には一切触れていない。 ──────────────────────────────────────────────────────────────────────── カスケードの前提（ここを外すと効かない）: ・ec-force のカスタマイザ生成CSS theme_customize.css は u-color__* / u-text--* をすべて !important で出す（例 .u-text--btn{color:#FFF!important; font-family:<カスタマイザのフォント>!important}）。 → 塗りボタン(主)は標準クラス `u-text--btn u-color__btn--bg`（白文字＋塗り） → 枠線ボタン(従)は標準クラス `u-text--btn--reverse`（ink文字＋枠線）＝どちらもカスタマイザ由来のフォント/文字サイズに乗るので **2つのボタンの書体が揃う**。（最初従ボタンだけ本CSSで font-family:var(--sans) を当てたら、主=游ゴシック / 従=Zen Kaku Gothic New とバラけた。2026-07-29 のプレビュー計測で検知して是正。） u-text--btn--reverse の枠線色は #D3D4D5（淡すぎて #d0d0d0 背景に埋もれる）なので、本CSSが border-color を !important で ink へ引き上げる。・本CSSは section 本文（内）からされるので、の bundle/theme/theme_customize より後に来る＝同詳細度なら勝つ。bundle.css の .c-cart_submit__block__submit（max-width:320px/height:60px 等）もクラス1つ分の詳細度なので、こちらの .cart-choice__btn（クラス1つ）＋後勝ちで上書きできる。 ──────────────────────────────────────────────────────────────────────── デザイントークンは base.css（_head でグローバル読込）の :root を使う: --ink #393c41 / --ink-60 / --white / --line / --bg #d0d0d0 / --sans / --serif / --ease ===================================================================== */ /* ============ ブロック（1導線=1ブロック） ============ bundle.css の `.c-cart_submit__block + .c-cart_submit__block { border-top }` は、間に「または」区切りが入る新レイアウトでは二重線に見えるため無効化する。ブロック同士の分離は余白＋区切りが担当する。 */ .c-cart_submit__block + .c-cart_submit__block { border-top: 0; } .c-cart_submit .cart-choice { padding: 28px 0 4px; text-align: center; } /* 主導線（新規会員登録）だけ紙面を一段持ち上げて主従を作る。ブランドの基調（無地グレー #d0d0d0 + ヘアライン）を壊さないよう、白ベタではなくごく薄い白でカードにする。 */ .c-cart_submit .cart-choice--signup { background: rgba(255, 255, 255, .38); padding: 28px 20px 20px; border-radius: 2px; } .c-cart_submit .cart-choice--login { padding: 24px 20px 8px; } /* ============ 見出し ============ */ /* eyebrow = ログイン画面(account.css の .ac-eyebrow)と同じ英字小ラベル。2導線の識別子 */ .c-cart_submit .cart-choice__eyebrow { font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-60); margin: 0 0 10px; } /* タイトルは明朝（ブランド見出し系）。u-text--subhead の !important は color/font-size/font-family に効くため、こちらも同じプロパティを後勝ちで指定する必要がある＝!important で明示的に取り返す。 */ .c-cart_submit .cart-choice__title { font-family: var(--serif) !important; font-weight: 500 !important; font-size: 19px !important; line-height: 1.5; letter-spacing: .06em; color: var(--ink) !important; margin: 0 0 8px; } .c-cart_submit .cart-choice__lead { font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.9; color: var(--ink-60); margin: 0 auto 18px; max-width: 320px; text-align: center; } /* ============ 「または」区切り ============ 左右のヘアラインで文字を挟む。2導線が「どちらか一方を選ぶもの」であることを示す。 */ .c-cart_submit .cart-choice__or { display: flex; align-items: center; gap: 16px; margin: 20px auto 4px; max-width: 320px; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--ink-60); } .c-cart_submit .cart-choice__or::before, .c-cart_submit .cart-choice__or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); } /* ============ ボタン ============ */ /* 共通の寸法（bundle.css の max-width:320/height:60・SP 280/50 を上書きして両ボタンの幅を揃える） */ .c-cart_submit .cart-choice__btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; height: auto; min-height: 56px; margin: 0 auto; padding: 16px 20px; border-radius: 2px; text-align: center; line-height: 1.5; cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } /* 主＝塗り。配色は標準クラス(u-color__btn--bg / u-text--btn)の !important に任せ、ここでは hover の挙動だけ差し替える（bundle の opacity:.4 フェードはブランド流儀ではない）。 */ .c-cart_submit .cart-choice__btn--primary { border: 1px solid var(--ink); } .c-cart_submit .cart-choice__btn--primary:hover { background: transparent !important; color: var(--ink) !important; opacity: 1; } /* 従＝枠線。文字色/書体は u-text--btn--reverse（カスタマイザ生成）に任せ、ここでは「淡すぎる既定の枠線色(#D3D4D5)を ink へ引き上げる」ことと、地色・hover だけを担当する。 */ .c-cart_submit .cart-choice__btn--ghost { background: transparent; border-color: var(--ink) !important; -webkit-appearance: none; appearance: none; } .c-cart_submit .cart-choice__btn--ghost:hover { background: var(--ink); color: var(--white) !important; opacity: 1; } /* 入力欄はフォーム幅を本文幅（=ボタン幅）に揃える。罫線は bundle のリセットで実質消えており（白ベタが宙に浮いて「入力欄」に見えない）、会員系フォーム（account.css の .c-form_table input）と同じ 1px var(--line) を与えて揃える。 */ .c-cart_submit .cart-choice--login .c-form_input { max-width: 320px; margin: 0 auto 8px; } .c-cart_submit .cart-choice--login .c-cart_submit__block__input { height: 48px; border: 1px solid var(--line); border-radius: 2px; transition: border-color .3s var(--ease); } .c-cart_submit .cart-choice--login .c-cart_submit__block__input:focus { border-color: var(--ink); outline: none; } /* ゲスト購入リンク（カスタマイザ「ゲスト購入有効」ON のときだけ描画される従属導線） */ .c-cart_submit .cart-choice .c-cart_submit__block__link { margin-top: 14px; color: var(--ink-60); } /* ============ SP ============ */ @media (max-width: 767px) { .c-cart_submit .cart-choice--signup { padding: 24px 16px 18px; } .c-cart_submit .cart-choice--login { padding: 20px 16px 8px; } .c-cart_submit .cart-choice__btn { max-width: none; } .c-cart_submit .cart-choice__lead, .c-cart_submit .cart-choice__or, .c-cart_submit .cart-choice--login .c-form_input { max-width: none; } }