/* カスタマイズ用CSS */

html {overflow-y: scroll;}

.nav-up-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 33px;
  height: 33px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: 1px solid rgba(200, 200, 200, 0.8);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding: 0;
  outline: none;
}
.nav-up-button.visible {
  opacity: 1;
  pointer-events: auto;
}

@media only screen and (max-width:767px){
	.This_is_NoUse-----Sample-----ClassName {
	display: none;
	}
}

/* ==========================================================================
   特定ページにおける「おすすめ商品」ブロックの一括非表示設定
   ========================================================================== */
.simple05-recommend-products {
    display: none !important;
}
/* おすすめ商品を表示したい「特定のページ」だけ表示 */
#page_homepage .simple05-recommend-products,
#page_product_list .simple05-recommend-products,
#page_product_detail .simple05-recommend-products {
    display: block !important;
}

/* ==========================================================================
   スクロールバーのダークモード化
   ========================================================================== */
::-webkit-scrollbar {
    width: 12px !important;
    height: 10px !important;
}
::-webkit-scrollbar-track {
    background: #222222 !important;
}
::-webkit-scrollbar-thumb {
    background: #999999 !important;
    border-radius: 5px !important;
}

/* ==========================================================================
   ナビゲーションバー（NAV）のモノクロダーク化
   ========================================================================== */
/* 1. ナビゲーションバー全体の背景色（#333）と下部境界線 */
nav.sticky.top-0.z-50.bg-\[\#F9F9F9\] {
    background-color: #333333 !important;
    border-color: #bcbcbc !important;
}

/* 2. ロゴ、メニューボタン、通常テキスト、各種アイコンの白化 */
nav.sticky.top-0.z-50 .text-black,
nav.sticky.top-0.z-50 #mobile-menu-btn,
nav.sticky.top-0.z-50 .material-symbols-outlined {
    color: #f5f5f5 !important;
}

/* 3. ナビゲーションリンク（SHOP、men's clothing、women's clothing 等）とアンダーライン */
nav.sticky.top-0.z-50 .text-\[\#333333\] {
    color: #e0e0e0 !important;
}
nav.sticky.top-0.z-50 a:hover {
    color: #ffffff !important;
}
/* リンクの下に現れるアニメーションアンダーラインの背景色 */
nav.sticky.top-0.z-50 .nav-underline::after {
    background-color: #bcbcbc !important;
}

/* 4. 検索窓の背景色（#000000）と内部要素の視認性調整 */
nav.sticky.top-0.z-50 .bg-surface-container-highest {
    background-color: #000000 !important;
}
/* 検索窓の中の入力文字色 */
nav.sticky.top-0.z-50 input[name="name"] {
    color: #ffffff !important;
}
/* 「商品を検索」という薄いプレースホルダー文字色 */
nav.sticky.top-0.z-50 input[name="name"]::placeholder {
    color: #a3a3a3 !important;
}
/* 虫眼鏡アイコンの色 */
nav.sticky.top-0.z-50 .text-outline {
    color: #a3a3a3 !important;
}

/* 5. マウスホバー時に出現するメガメニュー・ドロップダウンパネル類 */
/* SHOPホバー時のパネル、マイページホバー時のメニュー、カートポップアップ */
nav.sticky.top-0.z-50 .simple05-shop-panel,
nav.sticky.top-0.z-50 .account-menu,
nav.sticky.top-0.z-50 .cart-popup {
    background-color: #222222 !important;
    border-color: #444444 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5) !important;
}

/* メガメニュー内の補助テキスト・見出しの調整 */
nav.sticky.top-0.z-50 .simple05-shop-panel p.text-\[\#777777\] {
    color: #a3a3a3 !important;
}
nav.sticky.top-0.z-50 .simple05-shop-panel h3 {
    color: #ffffff !important;
}
nav.sticky.top-0.z-50 .simple05-shop-panel a {
    color: #e0e0e0 !important;
}
nav.sticky.top-0.z-50 .simple05-shop-panel a:hover {
    color: #ffffff !important;
}
nav.sticky.top-0.z-50 .simple05-shop-panel .border-b {
    border-color: #555555 !important;
}

/* マイページメニュー（ログイン・会員登録）の通常時の文字色 */
nav.sticky.top-0.z-50 .account-menu a {
    color: #e0e0e0 !important;
}
/* マイページメニュー内のホバー時の背景色と、文字の強制白化 */
nav.sticky.top-0.z-50 .account-menu a:hover {
    background-color: #444444 !important;
    color: #ffffff !important;
}
/* カートポップアップ内のテキスト白化 */
nav.sticky.top-0.z-50 .cart-popup .text-outline {
    color: #ffffff !important;
}
/* スマホ用メニューパネル全体の背景色 */
#mobile-menu {
    background-color: #222222 !important;
}
/* スマホ用メニュー内の大見出し（SHOP、SUPPORT等）の文字色と区切り線 */
#mobile-menu h3 {
    color: #ffffff !important;
    border-color: #444444 !important;
}
/* スマホ用メニュー内のテキスト・リンク色 */
#mobile-menu a {
    color: #a3a3a3 !important;
}
/* 閉じるボタンとRACEロゴの文字色 */
#mobile-menu-close,
#mobile-menu a.text-black {
    color: #f5f5f5 !important;
}
/* スマホ用メニュー内のリンクホバー・アクティブ時の文字色 */
#mobile-menu a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   ヘッダーミニカート（カートマーク）ホバー時のダークモード化
   ========================================================================== */
/* カートマーク（shopping_bag）自体をダークモードで白にする設定 */
.ec-headerRole__cart .material-symbols-outlined.text-black {
    color: #ffffff !important;
}

/* ポップアップメニュー全体の背景（白から黒系へ）、外枠の境界線、影の調整 */
.ec-headerRole__cart .cart-popup.bg-white {
    background-color: #1c1c1c !important;
    border-color: #333333 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ポップアップ内の文字色の基本設定（商品名、商品価格など） */
.ec-headerRole__cart .cart-popup,
.ec-headerRole__cart .cart-popup p,
.ec-headerRole__cart .cart-popup .text-primary {
    color: #ffffff !important;
}

/* 「〇点の合計」「数量 〇」などのサブ情報の文字色（明るいグレー） */
.ec-headerRole__cart .cart-popup .text-outline {
    color: #cccccc !important;
}

/* 上部合計エリア・下部ボタンエリアとの区切り線の色調整 */
.ec-headerRole__cart .cart-popup .border-b,
.ec-headerRole__cart .cart-popup .border-t {
    border-color: #333333 !important;
}

/* 「Cart / カートを見る」ボタンの初期状態（黒背景に白文字、お買い物を続けるボタンと同じ色の枠線） */
.ec-headerRole__cart .cart-popup a.bg-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
    transition: all 0.3s ease !important;
}

/* 「Cart / カートを見る」ボタンのマウスホバー（オンマウス）時の反転仕様（最優先で黒文字化） */
.ec-headerRole__cart .cart-popup a.bg-primary.text-on-primary:hover,
.ec-headerRole__cart .cart-popup a[href*="cart"]:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   カテゴリピックアップセクションのダークモード化
   ========================================================================== */
section.mx-auto.max-w-\[1920px\].bg-surface {
    background-color: #000000 !important;
}

/* ==========================================================================
   おすすめ商品（Picks）セクションのダークモード化
   ========================================================================== */
/* セクション全体の背景色 */
section.simple05-recommend-products {
    background-color: #000000 !important;
}
/* メインの見出し（Picks / おすすめ商品）、商品名、価格、リンクの文字色 */
section.simple05-recommend-products .simple05-home-section-title,
section.simple05-recommend-products .simple05-recommend-slide h3 a,
section.simple05-recommend-products .simple05-recommend-slide p,
section.simple05-recommend-products h3 a,
section.simple05-recommend-products p.mt-1\.5,
section.simple05-recommend-products .simple05-home-link {
    color: #ffffff !important;
}
/* サブテキスト（いまご覧いただきたいアイテム）の明度を落とした文字色 */
section.simple05-recommend-products .simple05-home-kicker {
    color: #a3a3a3 !important;
}
/* 右上「商品一覧へ」のアンダーバーの色調整 */
section.simple05-recommend-products .simple05-home-link {
    border-color: #ffffff !important;
}
/* スライダー矢印ボタンの配色調整（背景を黒、枠線を明るいグレー、矢印を白） */
section.simple05-recommend-products .simple05-recommend-arrows button {
    background-color: #000000 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   カテゴリ（Category）グリッドセクションのダークモード化
   ========================================================================== */
/* 前後の黒背景（#000）から切り替わったことが明確に分かる、前回よりさらに明るい背景色 */
section.bg-surface-container-low {
    background-color: #444444 !important;
}
/* カテゴリタイトルおよび新着情報見出し（静かな輪郭、～）のメイン文字色 */
section.bg-surface-container-low .simple05-home-section-title,
section.bg-surface-container-low .simple05-home-headline {
    color: #ffffff !important;
}
/* タイトル横の区切り線の色調整 */
section.bg-surface-container-low .bg-outline-variant\/30 {
    background-color: #aaaaaa !important;
}
/* カテゴリカード自体の背景（セクション背景より一段明るいトーン）、枠線、文字色 */
section.bg-surface-container-low a.group.block {
    background-color: #000000 !important;
    border-color: #aaaaaa !important;
    color: #ffffff !important;
}
/* カード内のナンバリング（No. 01等）の明度を落とした文字色 */
section.bg-surface-container-low .simple05-home-kicker {
    color: #b3b3b3 !important;
}
/* カードにマウスホバーした際、元の白（bg-white）に戻り、文字を黒にする反転設定 */
section.bg-surface-container-low a.group.block:hover {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
section.bg-surface-container-low a.group.block:hover .simple05-home-kicker {
    color: #666666 !important;
}
section.bg-surface-container-low a.group.block:hover .simple05-home-link {
    color: #000000 !important;
    border-color: #000000 !important;
}

/* ==========================================================================
   新着情報（ブランドについて）セクションのダークモード化
   ========================================================================== */
/* 新着情報の本文（削ぎ落とした線、～）の明度を一段落とした文字色 */
section.bg-surface-container-low .simple05-home-copy p {
    color: #d1d1d1 !important;
}
/* リンクテキスト（ABOUT / ～）と横にある装飾線の色 */
section.bg-surface-container-low .simple05-home-link {
    color: #ffffff !important;
}
section.bg-surface-container-low .bg-primary {
    background-color: #ffffff !important;
}
/* 写真左下の正方形コメントブロックの背景（黒）と文字色の反転指定 */
section.bg-surface-container-low .absolute.bg-white {
    background-color: #1a1a1a !important;
}
section.bg-surface-container-low .simple05-home-note {
    color: #ffffff !important;
}

/* ==========================================================================
   お知らせ（Info）セクションのダークモード化
   ========================================================================== */
/* セクション全体の背景色 */
section.bg-surface-container-lowest {
    background-color: #000000 !important;
    border-top: 1px solid #aaaaaa !important;
}
/* メインタイトル（Info / お知らせ）と記事の見出し（ショッピングサイトの～）の文字色 */
section.bg-surface-container-lowest .simple05-home-section-title,
section.bg-surface-container-lowest .simple05-home-card-title {
    color: #ffffff !important;
}
/* サブテキスト（News）と各記事の日付（2026.06.09等）の明度を落とした文字色 */
section.bg-surface-container-lowest .simple05-home-kicker {
    color: #a3a3a3 !important;
}
/* 記事の本文（店舗及びショッピングサイトの～）の、日付よりは明るく見出しよりは沈んだ文字色 */
section.bg-surface-container-lowest .simple05-home-copy-compact {
    color: #d1d1d1 !important;
}
/* 記事同士を区切る境界線の色調整 */
section.bg-surface-container-lowest .border-t {
    border-color: #444444 !important;
}

/* ==========================================================================
   サポート情報（配送・ご注文・お問い合わせ）セクションのダークモード化
   ========================================================================== */
/* セクション全体の背景色指定（#444444）と上部境界線の色調整 */
section.border-t.border-black\/5.bg-surface {
    background-color: #444444 !important;
    border-color: #aaaaaa !important;
}
/* アイコン（トラック等）と中見出し（Shipping / 配送等）の文字色 */
section.border-t.border-black\/5.bg-surface .simple05-home-icon,
section.border-t.border-black\/5.bg-surface .simple05-home-support-title {
    color: #ffffff !important;
}
/* 説明文（税込 30,000 円以上～等）の明度を一段落とした文字色 */
section.border-t.border-black\/5.bg-surface .simple05-home-support-copy {
    color: #cccccc !important;
}

/* ==========================================================================
   フッター（Footer）セクションのダークモード化
   ========================================================================== */
/* フッター全体の背景色指定（#222222）と上部境界線の色調整 */
footer.ec-layoutRole__footer footer.bg-\[\#F3F3F3\] {
    background-color: #222222 !important;
    border-color: #aaaaaa !important;
}
/* メインロゴ、各見出し（GUIDE、SUPPORT、店舗MAP等）、定義リストのラベル（TEL、MAIL）の最明色 */
footer.ec-layoutRole__footer a.text-black,
footer.ec-layoutRole__footer h5.text-black,
footer.ec-layoutRole__footer dt.text-black {
    color: #ffffff !important;
}
/* 通常のテキスト説明文、住所情報、リンクの通常時の文字色 */
footer.ec-layoutRole__footer p,
footer.ec-layoutRole__footer dl,
footer.ec-layoutRole__footer ul a {
    color: #cccccc !important;
}
/* リンクにマウスホバーした際のアクティブ文字色 */
footer.ec-layoutRole__footer ul a:hover {
    color: #ffffff !important;
}
/* 店舗MAP外枠の境界線と背景色の調整 */
footer.ec-layoutRole__footer .border-black\/10.bg-white {
    border-color: #444444 !important;
    background-color: #1a1a1a !important;
}
/* 下部コピーライトエリアの境界線とコピーライトテキスト（Copyright...）の文字色 */
footer.ec-layoutRole__footer .border-t.border-black\/5 {
    border-color: #444444 !important;
}
footer.ec-layoutRole__footer .simple05-footer-copyright {
    color: #888888 !important;
}

/* ==========================================================================
   商品一覧ページのダークモード化
   ========================================================================== */
/* メインエリア全体の背景色指定（黒） */
main.bg-surface {
    background-color: #000000 !important;
}
/* +   メインテキストカラー（最明色：白） 
   パンくず現在地、大見出し、サイドバー見出し、アクティブなカテゴリー、ソレクトボックステキスト、商品名、価格
*/
main.bg-surface .text-primary,
main.bg-surface .simple05-product-list-title,
main.bg-surface .xl\:sticky h2,
main.bg-surface select.form-select,
main.bg-surface .ec-shelfGrid__item h3,
main.bg-surface .price02-default {
    color: #ffffff !important;
}
/* +   サブテキストカラー（中間色：明るいグレー）
   導入文（静かな質感と～）、非アクティブなカテゴリー
*/
main.bg-surface .simple05-product-list-intro,
main.bg-surface .text-on-surface {
    color: #d1d1d1 !important;
}
/* +   ディテールテキストカラー（低明色：沈んだグレー）
   パンくず通常リンク、商品件数カウント、セレクトボックスのラベル（表示件数、並び替え）、価格横の「税込」表記
*/
main.bg-surface .text-outline,
main.bg-surface .ec-topicpath__divider {
    color: #a3a3a3 !important;
}
/* パンくずの「ホーム」リンク等のホバー時カラー */
main.bg-surface .ec-topicpath a:hover {
    color: #ffffff !important;
}
/* サイドバーカテゴリーリンクのホバー時カラー */
main.bg-surface .xl\:sticky a:hover {
    color: #ffffff !important;
}
/* セクション下部やソートフォーム下部の区切り線の色調整 */
main.bg-surface .border-b {
    border-color: #333333 !important;
}
/* 表示件数・並び替えセレクトボックス内の選択肢（option）背景色調整 */
main.bg-surface select.form-select option {
    background-color: #222222 !important;
}

/* ==========================================================================
   商品一覧ページ：該当商品なし（空状態）ブロックのダークモード化
   ========================================================================== */
/* 外枠、および背景色を商品一覧の黒（#000）に溶け込むトーン（チャコールグレー）に調整 */
main.bg-surface .border-outline-variant\/40.bg-surface-container-low {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
}
/* 警告タイトル（該当する商品が～）と説明文の文字色 */
main.bg-surface .border-outline-variant\/40.bg-surface-container-low h2 {
    color: #ffffff !important;
}
main.bg-surface .border-outline-variant\/40.bg-surface-container-low p {
    color: #cccccc !important;
}

/* ==========================================================================
   商品詳細（カート投入前）ページのダークモード化
   ========================================================================== */
/* メインエリア全体の背景色指定（黒）を詳細ページにも強制適用 */
main.bg-surface {
    background-color: #000000 !important;
}
/* +   メインテキストカラー（最明色：白）
   商品名、価格金額、数量入力値、モーダル内テキスト、お買い物を続けるボタンテキスト
*/
main.bg-surface .ec-productRole__title h1,
main.bg-surface .ec-price__price.price02-default,
main.bg-surface .simple05-quantity-input,
main.bg-surface #ec-modal-header,
main.bg-surface .ec-inlineBtn--cancel {
    color: #ffffff !important;
}
/* +   商品説明・フリーエリア等（中間色：判読性の高い明るいグレー）
   商品説明文、および今後追加され得るフリーエリア項目
*/
main.bg-surface .ec-productRole__description,
main.bg-surface .ec-productRole__description * {
    color: #e0e0e0 !important;
}
/* +   ディテールテキスト（低明色：沈んだグレー）
   税込表記、在庫ステータス、数量ラベル、お気に入り・送料無料・発送目安テキスト
*/
main.bg-surface .ec-price__tax,
main.bg-surface .ec-productRole__category,
main.bg-surface .ec-numberInput label,
main.bg-surface .favorite-btn,
main.bg-surface .ec-productRole__actions p {
    color: #a3a3a3 !important;
}
/* 数量変更ボタン（＋・?）と枠線の調整 */
main.bg-surface .ec-numberInput button {
    color: #ffffff !important;
}
main.bg-surface .border-outline-variant {
    border-color: #444444 !important;
}
/* カートボタンの通常背景を白反転にし、文字を黒に変更して視認性を確保 */
main.bg-surface button.add-cart {
    background-color: #ffffff !important;
    color: #000000 !important;
}
main.bg-surface button.add-cart:hover {
    background-color: #e6e6e6 !important;
}
/* カート追加時のポップアップモーダル（および下部追加エリア）の背景色を反転 */
main.bg-surface .ec-modal-wrap,
main.bg-surface .ec-layoutRole__appendBottom {
    background-color: #1c1c1c !important;
}
/* 「お買い物を続ける」ボタンの枠線が白背景用のままなので調整 */
main.bg-surface .ec-inlineBtn--cancel {
    border-color: #444444 !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}
/* 「お買い物を続ける」ボタンのマウスホバー（オンマウス）時の色変化設定 */
main.bg-surface .ec-inlineBtn--cancel:hover {
    background-color: #333333 !important;
    border-color: #666666 !important;
}
/* 「カートへ進む」ボタンの初期状態（黒背景に白文字、お買い物を続けるボタンと同じ色の枠線） */
main.bg-surface .ec-inlineBtn--action.bg-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
    transition: all 0.3s ease !important;
}
/* 「カートへ進む」ボタンのマウスホバー（オンマウス）時の反転仕様設定（白背景、黒文字、枠線白） */
main.bg-surface .ec-inlineBtn--action.bg-primary:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}
/* 外枠のラッパー要素（mainの直下など）の背景色を黒に固定して隙間を無くす */
#page_product_detail,
#page_product_detail .ec-layoutRole,
main.bg-surface {
    background-color: #000000 !important;
}
/* 在庫不足等の重要なアラートメッセージの文字色を「#ff0000」に固定 */
.ec-layoutRole__main .bg-\[\#fff6f5\].text-\[\#7f1d1d\],
#form_cart .bg-\[\#fff6f5\],
main .bg-\[\#fff6f5\] {
    color: #ff0000 !important;
}

/* ===========================================================================================================
   ご利用ガイド・当サイトについて・プライバシーポリシー・利用規約・特定商取引法に基づく表記のダークモード化
   =========================================================================================================== */
/* 上部ヘッダーエリア（GUIDE等）の背景を黒に固定 */
.ec-layoutRole__main section.bg-accent,
.ec-layoutRole__main section.py-12 {
    background-color: #000000 !important;
}

/* 下部詳細内容エリア（ご利用ガイド・会社概要等）の背景色を「#333333」に変更し、左右の隙間を完全に埋める */
.ec-layoutRole__main section.container.mx-auto,
.ec-layoutRole__main section.py-16,
.ec-layoutRole__main section.sm\:py-24 {
    background-color: #333333 !important;
    max-width: 100% !important;
}

/* 各項目の境界線（下線・上線・表の区切り線）を判読しやすい透過グレーに調整 */
.ec-layoutRole__main .border-b,
.ec-layoutRole__main .border-t,
.ec-layoutRole__main .divide-y > * {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* 最下部「お問い合わせ」内の店舗名・メールアドレス枠の背景を「#555555」に変更 */
.ec-layoutRole__main .bg-gray-50,
.ec-layoutRole__main .p-6.rounded-lg {
    background-color: #555555 !important;
}

/* --- 文字色の明暗差調整 --- */

/* 1. 最重要テキスト（大見出し GUIDE、各項目の見出し H2/H3、表の左側 dt など）：最も明るい白に変更 */
.ec-layoutRole__main h1.text-primary,
.ec-layoutRole__main h2.font-serif,
.ec-layoutRole__main h3.font-serif,
.ec-layoutRole__main h3.font-bold,
.ec-layoutRole__main dt.font-bold,
.ec-layoutRole__main span.font-bold {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* 2. 一般本文テキスト（各項目の説明文、リスト、表の右側 dd など）：少しトーンを落とした明るいグレーに変更 */
.ec-layoutRole__main p.text-subtext-light,
.ec-layoutRole__main p.text-text-light,
.ec-layoutRole__main div.text-text-light,
.ec-layoutRole__main dd.text-text-light,
.ec-layoutRole__main ul.list-disc,
.ec-layoutRole__main li {
    color: #e0e0e0 !important;
}

/* 3. 補足情報・注記テキスト（※銀行振込手数料は～などの text-sm 属性）：さらにトーンを落とし、初期状態の明暗差を維持 */
.ec-layoutRole__main .text-sm,
.ec-layoutRole__main p.text-sm,
.ec-layoutRole__main span.text-sm {
    color: #e9e9e9 !important;
}

/* 画面幅が899px以下の時、「当サイトについて」ページの紹介本文テキストを左揃えにする */
@media screen and (max-width: 690px) {
    #page_help_about .mb-20.text-center p.text-text-light {
        text-align: left !important;
    }
}

/* ==========================================================================
   カートページ：デフォルトカラーへの復元調整
   ========================================================================== */
/* 全体共通の黒背景指定を打ち消し、カートページ全体を元の明るい背景へ戻す */
#page_cart,
#page_cart .ec-layoutRole,
#page_cart .ec-layoutRole__contents,
#page_cart .ec-layoutRole__main,
#page_cart main {
    background-color: transparent !important;
}

/* フォームおよび各ブロックの背景色・枠線色をデフォルト（白ベース）に上書き */
#form_cart,
#form_cart section.bg-white {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 「商品の合計金額は～」等の案内ボックスをデフォルトの薄グレーに戻す */
#form_cart .bg-surface-container-low,
#page_cart .mb-10.bg-surface-container-low {
    background-color: #f7f7f9 !important; /* 一般的な初期コンテナ色 */
}

/* --- 文字色の初期復元 --- */

/* 1. メインテキスト（商品名、合計金額、点数など）をデフォルトの濃色に復元 */
#form_cart .text-primary,
#form_cart .text-primary a,
#form_cart h1,
#form_cart h2,
#form_cart h2.text-primary,
#form_cart strong,
#page_cart .mb-10 p.text-primary {
    color: #111111 !important; /* 初期テキスト色 */
}

/* 2. サブテキスト（数量、小計、価格、点数表示など）をデフォルトの薄色に復元 */
#form_cart .text-outline,
#form_cart p.text-outline,
#form_cart span.text-outline,
#form_cart a.text-outline,
#page_cart .mb-10 span.text-outline {
    color: #767676 !important; /* 初期サブテキスト色 */
}

/* --- 各種パーツの初期復元微調整 --- */

/* 商品ごとの区切り線の色をデフォルトに戻す */
#form_cart article.border-b {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 数量変更ボックス周りの枠線および数量数値の背景色を初期化 */
#form_cart .border-black\/15,
#form_cart span.border-x {
    border-color: rgba(0, 0, 0, 0.15) !important;
}
#form_cart span.border-x {
    background-color: transparent !important;
}

/* PC用「お買い物を続ける」リンクの下線 */
#form_cart a.border-b {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* スマホ用「カートから削除」ボタン：初期状態（白背景/黒文字） */
#form_cart a.border-black.bg-white {
    background-color: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}
/* スマホ用「カートから削除」ボタン：オンマウス時（黒背景/白文字） */
#form_cart a.border-black.bg-white:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}
/* --- カートページヘッダーおよび進行状況バーの初期復元 --- */
#page_cart header.mb-12,
#page_cart header h1,
#page_cart header p,
#page_cart .border-y {
    background-color: transparent !important;
}

/* タイトル「CART」および「ショッピングカート」の文字色復元 */
#page_cart header h1.text-primary {
    color: #111111 !important;
}
#page_cart header p.text-outline {
    color: #767676 !important;
}

/* 進行状況バーエリアの区切り線およびテキストの復元 */
#page_cart .border-y {
    border-color: rgba(0, 0, 0, 0.1) !important;
}
#page_cart .border-y .text-primary {
    color: #111111 !important;
}

/* 進行状況バーの各ステップを結ぶ横線の色をデフォルトの黒系に戻す */
#page_cart .bg-black {
    background-color: #000000 !important;
}
#page_cart .bg-black\/10 {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   マイページ特定画面：デフォルトカラーへの復元調整
   ========================================================================== */
/* 対象4ページの警告・案内ボックスエリアをデフォルトの薄グレーの背景に復元 */
#page_mypage_favorite .bg-surface-container-low,
#page_mypage_delivery .bg-surface-container-low,
#page_mypage_withdraw .bg-surface-container-low,
#page_mypage_change_complete .bg-surface-container-low {
    background-color: #f7f7f9 !important;
}

/* 警告・案内ボックス内のアイコンおよびタイトルの文字色を濃色に復元 */
#page_mypage_favorite .bg-surface-container-low .text-primary,
#page_mypage_favorite .bg-surface-container-low .simple05-state-title,
#page_mypage_delivery .bg-surface-container-low .text-primary,
#page_mypage_delivery .bg-surface-container-low .simple05-state-title,
#page_mypage_withdraw .bg-surface-container-low .text-primary,
#page_mypage_withdraw .bg-surface-container-low .simple05-state-title,
#page_mypage_change_complete .bg-surface-container-low .text-primary,
#page_mypage_change_complete .bg-surface-container-low .simple05-state-title {
    color: #111111 !important;
}

/* 警告・案内ボックス内の説明文（手続きが完了すると～等）の文字色を薄色に復元 */
#page_mypage_favorite .bg-surface-container-low .simple05-state-copy,
#page_mypage_delivery .bg-surface-container-low .simple05-state-copy,
#page_mypage_withdraw .bg-surface-container-low .simple05-state-copy,
#page_mypage_change_complete .bg-surface-container-low .simple05-state-copy {
    color: #767676 !important;
}

/* ボタン（確認へ進む等）の背景色および文字色をデフォルト（黒背景に白文字）に固定 */
#page_mypage_favorite .bg-surface-container-low button,
#page_mypage_delivery .bg-surface-container-low button,
#page_mypage_withdraw .bg-surface-container-low button,
#page_mypage_change_complete .bg-surface-container-low button {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   お問い合わせ・会員登録ページ：文字色の復元調整
   ========================================================================== */
/* お問い合わせページの「CONTACT」タイトルの文字色を黒に復元 */
#page_contact h1.text-primary,
#page_contact h1.text-\[2rem\] {
    color: #000000 !important;
}

/* 会員登録ページの「REGISTER」タイトルの文字色を黒に復元 */
#page_entry h1.text-primary,
#page_entry h1.text-\[2rem\] {
    color: #000000 !important;
}

/* 未入力や入力形式エラーの案内テキストを赤色に復元 */
.ec-layoutRole__main p.text-red-600,
.ec-layoutRole__main p.dark\:text-red-400,
#shopping-form p.text-red-600,
#form_cart p.text-red-600,
main p.text-red-600 {
    color: #ff0000 !important;
}

/* ==========================================================================
   新着情報（News）ブロック：本文の改行有効化
   ========================================================================== */
/* テキスト内の改行データを有効にしつつ、文頭・文末の連続する余白スペースを自動で折りたたむ */
.md\:col-span-8 p.simple05-home-copy-compact {
    white-space: pre-line !important;
}

/* ==========================================================================
   全ページ共通：商品画像の4:3トリミング一時無効化（この設定は削除OK）
   ========================================================================== */
/* 1. 商品画像エリア（商品一覧、詳細、カート等）の強制比率枠のみを解除 */
/* 
#page_product_list .aspect-\[3\/4\],
#page_product_list .aspect-\[4\/3\],
#page_product_detail .aspect-\[3\/4\],
#page_product_detail .aspect-\[4\/3\],
#form_cart .aspect-\[3\/4\],
#form_cart .aspect-\[4\/3\],
.simple05-recommend-products .aspect-\[3\/4\],
.simple05-recommend-products .aspect-\[4\/3\] {
    aspect-ratio: auto !important;
}
*/

/* 2. 商品画像自体のトリミングのみを解除（トップページの各種バナー 1～5.webp は除外） */
/* 
#page_product_list img.object-cover,
#page_product_detail img.object-cover,
#form_cart img.object-cover,
.simple05-recommend-products img.object-cover {
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
*/