/* [カスタマイズ追加 20260510] 本番 (eccube4.0) 準拠の font 復元
 *
 * LO は eccube4.3 のテンプレに付属する style.min.css (= Bootstrap 5 系) を読み込んでおり、
 * 一部のボタン / select の font-size と font-family が本番 (eccube4.0) と異なる。
 * Bootstrap 5 自体を外すと grid 等 EC-CUBE 4.3 機能が壊れるため、該当箇所のみピンポイントで
 * 本番値に揃える。
 *
 * default_frame.twig では customize.css (= user_data 配下、 .gitignore 対象、 管理画面で編集
 * 可能) の直後に本ファイルを読み込むことで、 customize.css 編集との両立を維持しつつ
 * git 管理可能にしている。
 */

/* sizeBox 内のサイズボタン群 (= LO は Bootstrap 5 由来で 14px 角丸 padding 過多、本番は
 * 16px 游ゴシック 角張り padding 0 20px)
 * Bootstrap 5 の .btn デフォルト (border-radius 6px、 padding 0.375rem 0.75rem) を本番準拠
 * で打ち消す。 font-family は本番が游ゴシック = sans-serif 強制すると Windows Chrome の
 * sans-serif fallback で字幅広く wrap するため明示で游ゴシックに揃える。
 * padding は本番 0 20px だが Windows 11 Chrome レンダリングで「カートに入れる」 が内寸
 * 120px に収まらず wrap する事象があり、 0 18px に詰めて回避 (= 本番との 2px 差を許容)。
 */
.sizeBox .cage,
.sizeBox .wait,
.sizeBox .notify,
.sizeBox .notify_done {
    font-size: 16px;
    font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
    border-radius: 0;
    padding: 0 18px;
}

/* 同意する / ログイン 等 主アクションボタン (= LO 16px 游ゴシック、 本番 14px sans-serif) */
.ec-blockBtn--action {
    font-size: 14px;
    font-family: sans-serif;
}

/* 同意しない / キャンセル 等 (= 本番は游ゴシックのまま、 sans-serif を当てると過剰修正) */
.ec-blockBtn--cancel {
    font-size: 14px;
}

/* 規格選択 select (カラー/サイズ) の font-family (= LO は游ゴシック継承、 本番は sans-serif) */
select[name^="classcategory_id"] {
    font-family: sans-serif;
}

/* MY ページログイン画面の「ログインしたままにする」 チェックボックスの位置調整
 * (= LO は Bootstrap 5 系の .form-check で input に margin-left: -1.5em (-24px) が当たり
 *    本番より大きく左にズレる。 加えて親 label が inline-block で content 幅に縮まり
 *    text-align: center の中央寄せ効果が効かないため、 flex で確実に中央配置する)
 */
.form-check input[name="login_memory"] {
    margin-left: 0;
}
/* login.twig は form name="login_mypage" の中に form name="shopping_login" が入れ子で書かれており、
 * ブラウザ HTML パーサーの解釈次第で input[name=login_memory] が どちらの form 配下になるか変わる
 * ため、 両方の form id を selector に列挙しておく。 */
form#login_mypage .form-check,
form#shopping_login .form-check {
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 「ログインしたままにする」 の外側 label を block + 中央寄せ
 * (= EC-CUBE 4.3 の form_widget は <label><div class="form-check">...</div></label> 構造で出力。
 *   外側 label が inline-block で content 幅 (= 約 200px) に縮まっているため、 .form-check に
 *   flex を当てても label の幅内でしか中央寄せされず、 form 全幅で見ると依然左寄りに見える。
 *   :has() で「.form-check を内包する label」 を捕まえて block + center に。 :has は Chrome 105+) */
form#login_mypage label:has(.form-check),
form#shopping_login label:has(.form-check) {
    display: block;
    text-align: center;
}