/* * Stonevillage WooCommerce Bridge — ストアページのレイアウト調整 * * 方針: * - すべて .sv-wc-store-page-content 配下にスコープし、レガシーページへ影響させない。 * - レイアウト（余白・最大幅・配置）中心の加算的なスタイル。配色/フォントは最小限。 * - クラシックショートコード([woocommerce_cart] 等)の標準クラスを対象にする。 * * 現在の対象: カート(/wc-cart/)。 * 決済・完了・マイアカウントも同じ .sv-wc-store-page-content ラッパー内に出力されるため拡張可能。 * （テーマのにクラスが付かないため、body ではなくこのラッパークラスでスコープする） */ /* ===== 共通コンテナ ===== */ /* 白カード(.bg-white)内の詰まりを解消するため、ラッパーに余白を持たせる */ .sv-wc-store-page-content { padding: 24px 16px 40px; } .sv-wc-store-page-content .woocommerce { max-width: 960px; margin: 0 auto; padding: 24px 16px 56px; } .sv-wc-store-page-content .entry-title, .sv-wc-store-page-content .woocommerce > h1:first-child { text-align: center; margin: 8px 0 40px; } /* ===== カート: 明細テーブル ===== */ .sv-wc-store-page-content .woocommerce-cart-form table.cart { width: 100%; border-collapse: collapse; } .sv-wc-store-page-content .woocommerce-cart-form table.cart th, .sv-wc-store-page-content .woocommerce-cart-form table.cart td { padding: 22px 16px; vertical-align: middle; } .sv-wc-store-page-content .woocommerce-cart-form table.cart thead th { border-bottom: 2px solid #e5e5e5; font-weight: 600; } .sv-wc-store-page-content .woocommerce-cart-form table.cart tbody tr { border-bottom: 1px solid #f0f0f0; } /* 商品画像（150px。img の width/height 属性より CSS が優先される） */ .sv-wc-store-page-content .woocommerce-cart-form td.product-thumbnail { width: 180px; } .sv-wc-store-page-content .woocommerce-cart-form td.product-thumbnail img { width: 150px; max-width: 150px; height: auto; } .sv-wc-store-page-content .woocommerce-cart-form .product-name a { font-weight: 600; text-decoration: none; } /* 削除ボタン（×）: ホバー時の赤丸の中で × が上下左右中央に来るよう flex 配置 */ .sv-wc-store-page-content .woocommerce-cart-form a.remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 18px; line-height: 1; border-radius: 50%; } /* 数量入力 */ .sv-wc-store-page-content .woocommerce-cart-form .quantity .qty { width: 64px; padding: 6px 8px; text-align: center; } /* 「お買い物カゴを更新」行 */ .sv-wc-store-page-content .woocommerce-cart-form .actions { padding-top: 18px; text-align: right; } /* ===== カート: 合計ボックス ===== */ .sv-wc-store-page-content .cart-collaterals { display: flex; justify-content: flex-end; margin-top: 48px; } .sv-wc-store-page-content .cart-collaterals .cart_totals { width: 100%; max-width: 620px; background: #fafafa; border: 1px solid #ececec; border-radius: 10px; padding: 32px 40px; } .sv-wc-store-page-content .cart_totals h2 { margin: 0 0 24px; font-size: 1.1rem; } .sv-wc-store-page-content .cart_totals table { width: 100%; table-layout: auto; } .sv-wc-store-page-content .cart_totals table th, .sv-wc-store-page-content .cart_totals table td { padding: 16px 18px; vertical-align: top; line-height: 1.7; } /* 見出し（小計・配送・合計）が縦積みにならないよう横書き＋幅確保 */ .sv-wc-store-page-content .cart_totals table th { width: 5em; min-width: 5em; white-space: nowrap; text-align: left; font-weight: 600; padding-right: 24px; } /* 金額は右寄せ。配送（ラジオ）は左寄せで先頭を揃える */ .sv-wc-store-page-content .cart_totals table td { text-align: right; } .sv-wc-store-page-content .cart_totals tr.shipping td { text-align: left; } .sv-wc-store-page-content .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; } .sv-wc-store-page-content .cart_totals #shipping_method li { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 0; } .sv-wc-store-page-content .cart_totals #shipping_method li input[type="radio"] { flex: 0 0 auto; margin: 5px 0 0; } .sv-wc-store-page-content .cart_totals #shipping_method li label { margin: 0; text-align: left; } /* 配送先住所・「住所を変更」リンクも左寄せ */ .sv-wc-store-page-content .cart_totals tr.shipping td p, .sv-wc-store-page-content .cart_totals tr.shipping td .shipping-calculator-button { text-align: left; margin-top: 8px; } .sv-wc-store-page-content .cart_totals .order-total th, .sv-wc-store-page-content .cart_totals .order-total td { padding-top: 20px; border-top: 1px solid #e5e5e5; } .sv-wc-store-page-content .cart_totals .order-total .amount { font-size: 1.25rem; font-weight: 700; } /* 進むボタン群 */ .sv-wc-store-page-content .wc-proceed-to-checkout { margin-top: 12px; } .sv-wc-store-page-content .wc-proceed-to-checkout .checkout-button { display: block; text-align: center; padding: 14px 16px; font-weight: 600; } /* ===== 決済完了(order-received) 全体の整え ===== */ /* 注文概要（注文番号 / 日付 / メール / 合計 / 決済方法）をカード化して横並び */ .sv-wc-store-page-content ul.woocommerce-order-overview { margin: 24px 0 36px; padding: 20px 28px; background: #fafafa; border: 1px solid #ececec; border-radius: 10px; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 40px; } .sv-wc-store-page-content ul.woocommerce-order-overview li { margin: 0; padding: 0; border: 0; text-transform: none; font-size: 0.85rem; color: #767676; line-height: 1.5; } .sv-wc-store-page-content ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: 1rem; color: #222; } /* セクション見出しのサイズを統一（注文詳細 / 請求先・お届け先） */ .sv-wc-store-page-content .woocommerce-order-details__title, .sv-wc-store-page-content .woocommerce-column__title { font-size: 1.2rem; font-weight: 700; margin: 32px 0 14px; } /* 注文詳細テーブル: セルに余白を付けて枠ギリギリを防ぐ */ .sv-wc-store-page-content table.order_details th, .sv-wc-store-page-content table.order_details td { padding: 14px 18px; vertical-align: top; line-height: 1.6; } /* 請求先 / お届け先を横並びカードに */ .sv-wc-store-page-content .woocommerce-customer-details .woocommerce-columns { display: flex; flex-wrap: wrap; gap: 24px; } .sv-wc-store-page-content .woocommerce-customer-details .woocommerce-column { flex: 1 1 280px; width: auto; margin: 0; float: none; } .sv-wc-store-page-content .woocommerce-customer-details address { padding: 18px 20px; line-height: 1.9; border-radius: 8px; } /* 振込先(BACS) 見出しのバランス調整 */ .sv-wc-store-page-content .wc-bacs-bank-details-heading { font-size: 1.2rem; font-weight: 700; margin: 32px 0 12px; } /* 各口座名（カ）ストーンビレッジ: 等） */ .sv-wc-store-page-content .wc-bacs-bank-details-account-name { font-size: 1.02rem; font-weight: 700; margin: 18px 0 8px; } /* 振込先口座リストをカード化 */ .sv-wc-store-page-content ul.wc-bacs-bank-details { margin: 8px 0 16px; padding: 16px 22px; background: #fafafa; border: 1px solid #ececec; border-radius: 8px; list-style: none; } .sv-wc-store-page-content ul.wc-bacs-bank-details li { padding: 5px 0; border: 0; } /* ===== チェックアウト(checkout) ===== */ /* 見出し（請求先情報の詳細 / ご注文） */ .sv-wc-store-page-content #customer_details h3, .sv-wc-store-page-content #order_review_heading { font-size: 1.2rem; font-weight: 700; margin: 0 0 18px; } .sv-wc-store-page-content #order_review_heading { margin-top: 40px; } /* 請求先 / 配送先を横並び（Bootstrap の .col-1/.col-2 幅指定を打ち消す） */ .sv-wc-store-page-content #customer_details.col2-set { display: flex; flex-wrap: wrap; gap: 32px; } .sv-wc-store-page-content .col2-set .col-1, .sv-wc-store-page-content .col2-set .col-2 { flex: 1 1 320px; width: auto; max-width: none; float: none; margin: 0; padding: 0; } /* 入力フィールド */ .sv-wc-store-page-content .checkout .form-row { margin: 0 0 16px; } .sv-wc-store-page-content .checkout .form-row > label { display: block; font-weight: 600; margin-bottom: 6px; } .sv-wc-store-page-content .checkout .form-row .input-text, .sv-wc-store-page-content .checkout .form-row textarea, .sv-wc-store-page-content .checkout .form-row select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; line-height: 1.5; } /* 「ご注文」(レビュー＋支払い)をカード化 */ .sv-wc-store-page-content #order_review { background: #fafafa; border: 1px solid #ececec; border-radius: 10px; padding: 24px 28px; } .sv-wc-store-page-content table.woocommerce-checkout-review-order-table th, .sv-wc-store-page-content table.woocommerce-checkout-review-order-table td { padding: 14px 16px; vertical-align: top; line-height: 1.6; } /* 支払い方法（カードの中に馴染ませ、区切り線で分離） */ .sv-wc-store-page-content #payment { background: transparent; border-radius: 0; } .sv-wc-store-page-content #payment ul.payment_methods { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid #e5e5e5; } .sv-wc-store-page-content #payment ul.payment_methods li { margin: 0; padding: 8px 0; } /* 注文確定ボタン */ .sv-wc-store-page-content #payment .place-order { padding-top: 12px; } .sv-wc-store-page-content #place_order { width: 100%; padding: 16px; font-weight: 700; font-size: 1.05rem; } /* ===== レスポンシブ ===== */ @media (max-width: 768px) { .sv-wc-store-page-content .cart-collaterals { justify-content: stretch; } .sv-wc-store-page-content .cart-collaterals .cart_totals { max-width: none; } }