/* ===== SHOP PAGE ===== */ .tl-shop-wrap { background: rgba(255,255,255,.72); backdrop-filter: blur(3px); padding: 40px 0 60px; min-height: 60vh; } .tl-shop-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .tl-shop-title { font-size: 1.2rem; font-weight: 600; color: #102018; padding-left: 12px; border-left: 2px solid #b6974f; font-family: "Hiragino Mincho ProN","Yu Mincho",Georgia,serif; letter-spacing: .08em; margin-bottom: 28px; } .tl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } /* ===== PRODUCT GRID ===== 注: .woocommerce はに付くため .tl-shop-wrap の子孫ではない。セレクタから .woocommerce を外し .tl-shop-wrap ul.products で直接指定する */ .tl-shop-wrap ul.products { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } @media(max-width:1024px) { .tl-shop-wrap ul.products { grid-template-columns: repeat(4,1fr) !important; } } @media(max-width:768px) { .tl-shop-wrap ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; } } /* ===== PRODUCT CARD：arrival-card スタイルをWooCommerceグリッドで上書き ===== */ .tl-shop-wrap ul.products li.product.arrival-card { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; cursor: default !important; } /* カード内リンク（header.php インライン CSS の .arrival-card-link がレイアウト担当。ここでは旧 .arrival-card-inner 互換のみ） */ a.arrival-card-link, a.arrival-card-inner { display: block; text-decoration: none; color: inherit; } a.arrival-card-link:hover, a.arrival-card-inner:hover { text-decoration: none; color: inherit; } /* 価格エリア（WooCommerce の価格マークアップを arrival-price デザインに合わせる） */ .arrival-price .woocommerce-Price-amount { font-size: .9rem; font-weight: 800; color: #7a5a20; font-family: Georgia,serif; } .arrival-price del .woocommerce-Price-amount { color: #aaa; font-size: .72rem; } .arrival-price ins { text-decoration: none; } /* .arrival-bottom / .arrival-btns は header.php のグローバル CSS に統一（ここで再定義するとショップページだけ二重パディングでズレる為） */ /* WooCommerce が arrival-cart に上書きするスタイルをリセット */ .woocommerce ul.products li.product a.arrival-cart.button, .woocommerce ul.products li.product a.arrival-cart.button:hover { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; padding: 5px 7px !important; width: auto !important; margin: 0 !important; border-radius: 4px !important; line-height: 1 !important; box-shadow: none !important; flex-shrink: 0 !important; } .woocommerce ul.products li.product a.arrival-cart.button { background: #fff !important; color: #b6974f !important; border: 1px solid #b6974f !important; } .woocommerce ul.products li.product a.arrival-cart.button svg { stroke: #b6974f; width: 15px; height: 15px; } .woocommerce ul.products li.product a.arrival-cart.button:hover, .woocommerce ul.products li.product a.arrival-cart.button.added { background: #102018 !important; border-color: #102018 !important; color: #d4b07a !important; } .woocommerce ul.products li.product a.arrival-cart.button:hover svg, .woocommerce ul.products li.product a.arrival-cart.button.added svg { stroke: #d4b07a; } /* ===== ページネーション ===== */ .woocommerce-pagination { text-align: center; margin-top: 32px; } .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .woocommerce-pagination ul.page-numbers li .page-numbers { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(182,151,79,.35); border-radius: 4px; color: #4a4a40; font-size: .82rem; text-decoration: none; transition: all .2s; } .woocommerce-pagination ul.page-numbers li .page-numbers:hover, .woocommerce-pagination ul.page-numbers li .page-numbers.current { background: #b6974f; color: #fff; border-color: #b6974f; } /* ===== 結果件数 / 並び替え ===== */ .woocommerce-result-count { font-size: .82rem; color: #4a4a40; margin: 0; } .woocommerce-ordering select { padding: 6px 10px; border: 1px solid rgba(182,151,79,.35); border-radius: 4px; font-size: .78rem; color: #4a4a40; background: #fff; outline: none; cursor: pointer; } /* ===== CART / CHECKOUT / ACCOUNT ===== page.php が既にクリームカードのコンテナを出力している為、内側の .woocommerce ラッパーは透明化（ボックスの二重化を防ぐ）。 2カラム化等の為 page.php のカード幅を広げる。 */ .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; max-width: none; margin: 0; } /* checkout は2カラムの為コンテナを広げる（page.php のインライン max-width:900px を上書き／!important 必須） */ body.woocommerce-checkout .tl-page-outer { max-width: 1140px !important; } /* テーブル */ .woocommerce table.shop_table { border: none !important; border-collapse: collapse; width: 100%; } .woocommerce table.shop_table th { background: rgba(182,151,79,.1); color: #1b1b18; font-weight: 700; font-size: .82rem; padding: 10px 14px; border-bottom: 1px solid rgba(182,151,79,.22); } .woocommerce table.shop_table td { padding: 12px 14px; border-bottom: 1px solid rgba(182,151,79,.15); font-size: .85rem; color: #4a4a40; vertical-align: middle; } /* ボタン共通 */ .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background: transparent !important; color: #b6974f !important; border: 1px solid #b6974f !important; border-radius: 4px !important; padding: 10px 28px !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: .06em; transition: all .2s; cursor: pointer; text-decoration: none; display: inline-block; box-sizing: border-box; max-width: 100%; text-align: center; line-height: 1.3; white-space: nowrap; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: #b6974f !important; color: #fff !important; } /* 注文確定ボタン（目立たせる） */ .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { background: #102018 !important; color: #d4b07a !important; border-color: #102018 !important; font-size: 1rem !important; padding: 14px 40px !important; font-weight: 700 !important; letter-spacing: .08em; } .woocommerce #payment #place_order:hover { background: #1a3a28 !important; } /* フォーム */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: 1.5px solid rgba(182,151,79,.3) !important; border-radius: 6px !important; padding: 9px 14px !important; font-size: .88rem !important; color: #1b1b18 !important; outline: none !important; transition: border-color .2s; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: #b6974f !important; box-shadow: 0 0 0 3px rgba(182,151,79,.1) !important; } .woocommerce form .form-row label { font-size: .82rem; color: #4a4a40; font-weight: 600; } /* 合計金額 */ .woocommerce .cart-collaterals .cart_totals h2, .woocommerce-checkout h3 { font-size: 1rem; font-weight: 700; color: #102018; border-bottom: 2px solid rgba(182,151,79,.25); padding-bottom: 8px; margin-bottom: 16px; } .woocommerce .cart-collaterals .cart_totals .order-total .amount { font-size: 1.3rem; font-weight: 900; color: #102018; font-family: Georgia,serif; } /* エラーメッセージ */ .woocommerce-error, .woocommerce-message, .woocommerce-info { border-top: 3px solid #b6974f !important; background: rgba(182,151,79,.07) !important; color: #4a4a40 !important; border-radius: 0 6px 6px 0 !important; padding: 12px 16px !important; font-size: .85rem !important; margin-bottom: 16px; list-style: none; /* テキスト＋ボタン（「商品を見る」等）を枠内で安全に折り返す */ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .woocommerce-error > .button, .woocommerce-message > .button, .woocommerce-info > .button { margin: 0 !important; flex: 0 0 auto; order: 2; /* メッセージ本文を先、ボタンを後ろに */ white-space: nowrap; /* 「商品を見る」が改行してはみ出すのを防止 */ } /* ===== SINGLE PRODUCT ===== */ .tl-single-product-wrap { background: rgba(255,255,255,.72); backdrop-filter: blur(3px); padding: 40px 0 60px; min-height: 60vh; } .tl-single-product-inner { max-width: 900px; margin: 0 auto; padding: 0 16px; } .woocommerce div.product div.images img { border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.1); } .woocommerce div.product .product_title { font-size: 1.3rem !important; font-weight: 700 !important; color: #102018 !important; line-height: 1.4; margin-bottom: 8px !important; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.6rem !important; font-weight: 900 !important; color: #102018 !important; font-family: Georgia,serif; } .woocommerce div.product .woocommerce-product-details__short-description { font-size: .88rem; color: #4a4a40; line-height: 1.7; margin-bottom: 20px; } .woocommerce div.product form.cart .single_add_to_cart_button { background: #102018 !important; color: #d4b07a !important; border: none !important; border-radius: 6px !important; padding: 12px 36px !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: .06em; } .woocommerce div.product form.cart .single_add_to_cart_button:hover { background: #1a3a28 !important; color: #fff !important; } /* ============================================= ååè©³ç´°ãã¼ã¸ (single-product) ============================================= */ .tl-sp-wrap { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; color: #2c2c2c; } /* ãã³ãã */ .tl-sp-breadcrumb { font-size: 12px; color: #888; margin-bottom: 28px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tl-sp-breadcrumb a { color: #888; text-decoration: none; } .tl-sp-breadcrumb a:hover { color: #c9a96e; } .tl-sp-breadcrumb__current { color: #444; } /* ã¡ã¤ã³ã¬ã¤ã¢ã¦ãï¼2ã«ã©ã ï¼ */ .tl-sp-main { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } @media (max-width: 768px) { .tl-sp-main { grid-template-columns: 1fr; gap: 30px; } } /* ç»åã¨ãªã¢ */ .tl-sp-main-wrap { position: relative; overflow: hidden; border-radius: 8px; touch-action: pan-y; } .tl-sp-main-img { width: 100%; height: auto; /* 原本の縦横比を保持（潰し・引き伸ばし防止） */ max-width: 100%; border-radius: 8px; display: block; background: #f5f5f5; object-fit: contain; /* 万一コンテナ高さが指定されても歪まない保険 */ user-select: none; transform-origin: 50% 50%; transition: transform .18s ease; cursor: zoom-in; -webkit-user-drag: none; } .tl-sp-main-wrap.is-zoomed { touch-action: none; } .tl-sp-main-wrap.is-zoomed .tl-sp-main-img { transform: scale(2.35); cursor: grab; } .tl-sp-main-wrap.is-dragging .tl-sp-main-img { transition: none; cursor: grabbing; } /* 古いライトボックスHTML/JSがキャッシュ等で残っても、二重画像として表示させない */ .tl-sp-lightbox { display: none !important; } /* 画像スライド用左右矢印ボタン */ .tl-sp-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.85); color: #4a4a40; border: 1px solid rgba(182, 151, 79, 0.35); border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); transition: background .15s, color .15s, border-color .15s; padding: 0 0 3px; /* 三角文字の視覚バランス調整 */ } .tl-sp-arrow:hover { background: #fff; color: #102018; border-color: rgba(182, 151, 79, 0.6); } .tl-sp-prev { left: 10px; } .tl-sp-next { right: 10px; } @media (max-width: 768px) { .tl-sp-arrow { width: 36px; height: 36px; font-size: 22px; } } .tl-sp-no-img { width: 100%; aspect-ratio: 1; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 14px; border-radius: 8px; } .tl-sp-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .tl-sp-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: all .2s; } .tl-sp-thumb:hover, .tl-sp-thumb.active { border-color: #c9a96e; opacity: 1; } /* å³ã«ã©ã ï¼ååæå ± */ .tl-sp-info { padding-top: 8px; } .tl-sp-maker { font-size: 13px; color: #c9a96e; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; } .tl-sp-title { font-size: 24px; font-weight: 700; line-height: 1.4; margin: 0 0 16px; color: #1a1a1a; } /* ç¶æããã¸ */ .tl-sp-condition { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .05em; margin-bottom: 20px; background: #e8f0e8; color: #3a7a3a; } .tl-sp-condition--new { background: #e8f0ff; color: #1a4ad4; } .tl-sp-condition--unused { background: #f0e8ff; color: #6a1ad4; } .tl-sp-condition--used-s { background: #e8f5e8; color: #2a7a2a; } .tl-sp-condition--used-a { background: #e8f0e8; color: #3a7a3a; } .tl-sp-condition--used-b { background: #fff8e8; color: #8a6a00; } .tl-sp-condition--used-c { background: #fff0e8; color: #9a4000; } /* 商品詳細：購入制限（人気商品）注意書き */ .tl-sp-restricted { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.7; color: #8a3a33; background: #fdf1f0; border: 1px solid #e6b7b2; border-radius: 8px; padding: 10px 12px; margin: 0 0 18px; } .tl-sp-restricted-badge { flex-shrink: 0; background: #b3322c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 3px; white-space: nowrap; } /* ä¾¡æ ¼ */ .tl-sp-price { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; display: flex; align-items: baseline; gap: 6px; } .tl-sp-price .woocommerce-Price-amount { color: #1a1a1a; } .tl-sp-tax { font-size: 13px; color: #888; font-weight: 400; } /* ã¹ããã¯ãã¼ãã« */ .tl-sp-spec { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: 14px; } .tl-sp-spec th, .tl-sp-spec td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; } .tl-sp-spec th { width: 90px; color: #888; font-weight: 500; white-space: nowrap; } .tl-sp-spec td { color: #333; } /* ã«ã¼ããã¿ã³ */ .tl-sp-cart { margin-bottom: 32px; } .tl-sp-cart .single_add_to_cart_button, .tl-sp-cart button[type="submit"] { width: 100% !important; background: #c9a96e !important; color: #fff !important; border: none !important; padding: 16px 24px !important; font-size: 16px !important; font-weight: 700 !important; border-radius: 6px !important; cursor: pointer !important; letter-spacing: .08em !important; transition: background .2s !important; } .tl-sp-cart .single_add_to_cart_button:hover, .tl-sp-cart button[type="submit"]:hover { background: #b8935a !important; } .tl-sp-cart .quantity { margin-bottom: 12px; } .tl-sp-cart .qty { width: 80px !important; padding: 10px !important; border: 1px solid #ddd !important; border-radius: 4px !important; font-size: 15px !important; text-align: center !important; } /* ååèª¬æ */ .tl-sp-description { border-top: 1px solid #eee; padding-top: 24px; } .tl-sp-description__title { font-size: 14px; font-weight: 700; color: #888; letter-spacing: .1em; margin-bottom: 12px; } .tl-sp-description__body { font-size: 14px; line-height: 1.8; color: #444; } /* 商品ページ背景 */ .tl-sp-wrap { background: rgba(255,255,255,0.97); min-height: 60vh; border-radius: 4px; } /* お気に入りボタン */ .tl-sp-cart-actions { display: flex; gap: 10px; margin-top: 10px; } /* 商品詳細のお気に入りボタン：枠は通常、ハート内部のみ赤 */ .tl-sp-wish-btn { width: 60px; min-height: 54px; align-self: stretch; /* カートに追加するボタンと同じ高さに */ flex-shrink: 0; background: #fff !important; border: 1.5px solid #c9a96e !important; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; padding: 0; } .tl-sp-wish-btn svg { width: 28px !important; height: 28px !important; stroke: #c9a96e; fill: none; transition: fill .15s, stroke .15s; } .tl-sp-wish-btn:hover { border-color: #e0466b !important; } .tl-sp-wish-btn:hover svg { stroke: #e0466b; } .tl-sp-wish-btn.active { background: #fff !important; border-color: #e0466b !important; } .tl-sp-wish-btn.active svg { fill: #e0466b; stroke: #e0466b; } /* cart + wish side by side（高さを揃える＝stretch） */ .tl-sp-cart { display: flex; gap: 10px; align-items: stretch; } .tl-sp-cart form.cart { flex: 1; min-width: 0; } /* ===== THANK YOU / ORDER RECEIVED ===== */ .tl-ty { max-width: 720px; margin: 0 auto; padding: 40px 20px 60px; } .tl-ty-hero, .tl-ty-card--failed { text-align: center; padding: 8px 0 28px; } .tl-ty-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #102018; color: #b6974f; display: flex; align-items: center; justify-content: center; } .tl-ty-mark svg { width: 36px; height: 36px; } .tl-ty-mark--failed { background: #7a2020; color: #fff; } .tl-ty-title { font-size: 1.6rem; font-weight: 700; color: #102018; font-family: "Hiragino Mincho ProN","Yu Mincho",Georgia,serif; letter-spacing: .06em; margin-bottom: 12px; } .tl-ty-sub { font-size: .92rem; color: #4a4a40; line-height: 1.9; } .tl-ty-overview { list-style: none; margin: 28px 0; padding: 22px 26px; background: rgba(255,255,255,.85); border: 1px solid rgba(182,151,79,.25); border-radius: 10px; display: grid; gap: 0; } .tl-ty-overview li { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px dashed rgba(182,151,79,.28); font-size: .9rem; } .tl-ty-overview li:last-child { border-bottom: none; } .tl-ty-overview li span { color: #8a8880; font-weight: 600; } .tl-ty-overview li strong { color: #1b1b18; font-weight: 700; } .tl-ty-overview .woocommerce-order-overview__total strong { color: #7a5a20; font-size: 1.05rem; } /* WC が出力する注文詳細テーブル・住所 */ .tl-ty .woocommerce-order-details, .tl-ty .woocommerce-customer-details { margin-top: 36px; } .tl-ty .woocommerce-order-details__title, .tl-ty .woocommerce-column__title { font-size: 1.15rem; font-weight: 700; color: #102018; font-family: "Hiragino Mincho ProN","Yu Mincho",Georgia,serif; letter-spacing: .05em; margin: 0 0 16px; padding-left: 12px; border-left: 3px solid #b6974f; } .tl-ty table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.85); border: 1px solid rgba(182,151,79,.25); border-radius: 10px; overflow: hidden; } .tl-ty table.woocommerce-table--order-details th, .tl-ty table.woocommerce-table--order-details td { padding: 14px 18px; text-align: left; font-size: .88rem; border-bottom: 1px solid rgba(182,151,79,.18); } .tl-ty table.woocommerce-table--order-details tfoot th, .tl-ty table.woocommerce-table--order-details tfoot td { background: rgba(182,151,79,.07); font-weight: 700; } .tl-ty .woocommerce-customer-details address { font-style: normal; line-height: 1.9; font-size: .9rem; padding: 16px 18px; background: rgba(255,255,255,.85); border: 1px solid rgba(182,151,79,.25); border-radius: 10px; color: #4a4a40; } .tl-ty-footer { margin-top: 40px; text-align: center; } .tl-ty-actions, .tl-ty-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; } .tl-ty-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 14px 28px; border-radius: 6px; font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; border: 1px solid #b6974f; background: #fff; color: #7a5a20; transition: all .2s; } .tl-ty-btn:hover { background: rgba(182,151,79,.1); } .tl-ty-btn--primary { background: #102018; color: #d4b07a; border-color: #102018; } .tl-ty-btn--primary:hover { background: #1c3528; color: #e6c98a; } .tl-ty-contact { margin-top: 18px; font-size: .82rem; color: #8a8880; line-height: 1.9; } .tl-ty-contact strong { color: #4a4a40; } @media (max-width: 768px) { .tl-ty { padding: 24px 14px 48px; } .tl-ty-title { font-size: 1.3rem; } .tl-ty-overview { padding: 16px 18px; } .tl-ty-btn { min-width: 0; width: 100%; } } /* ========================================================================== CLASSIC WOOCOMMERCE LAYOUT（ショートコード版 cart / checkout / account） WC ベース CSS は無効化済みの為、レイアウトを全て自前で定義する ========================================================================== */ /* --- 見出し共通 --- */ .woocommerce-checkout #order_review_heading, .woocommerce-cart h1.entry-title, .woocommerce-account h1.entry-title, .woocommerce-checkout h3#order_review_heading { font-size: 1.1rem; font-weight: 700; color: #102018; font-family: "Hiragino Mincho ProN","Yu Mincho",Georgia,serif; letter-spacing: .05em; padding-left: 12px; border-left: 3px solid #b6974f; margin: 0 0 18px; } /* --- フォーム行レイアウト（first/last 2カラム、wide フル幅） --- */ .woocommerce form .form-row { display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } @media (min-width: 600px) { .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { width: 100%; } /* 氏名等の2カラムは「親をflex+gap」で配置。 float/inline-flex の余白・回り込みによる崩れと横スクロールを根絶。 */ .woocommerce .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-shipping-fields__field-wrapper, .woocommerce .woocommerce-additional-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: 0 16px; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { flex: 1 1 calc(50% - 8px); width: calc(50% - 8px); min-width: 0; float: none; } .woocommerce form .form-row-wide, .woocommerce .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last), .woocommerce .woocommerce-shipping-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last) { flex: 1 1 100%; width: 100%; min-width: 0; float: none; } } .woocommerce form .form-row label { font-size: .8rem; color: #4a4a40; font-weight: 600; margin-bottom: 6px; } .woocommerce form .form-row .required { color: #b6974f; text-decoration: none; } .woocommerce form .form-row .optional { color: #aaa; } /* 入力・セレクト・テキストエリア共通 */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single, .woocommerce table.cart td.product-quantity input.qty { width: 100% !important; border: 1.5px solid rgba(182,151,79,.3) !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: .9rem !important; color: #1b1b18 !important; background: #fff !important; outline: none !important; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; height: auto !important; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; color: #1b1b18; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: #b6974f !important; box-shadow: 0 0 0 3px rgba(182,151,79,.12) !important; } /* チェックアウト配下は border-box に統一（padding 由来の横スクロール防止） */ .woocommerce-checkout .woocommerce *, .woocommerce-checkout .woocommerce *::before, .woocommerce-checkout .woocommerce *::after { box-sizing: border-box; } /* --- CHECKOUT: 2カラム（左=入力 / 右=注文内容）--- #order_review_heading は独立要素のため flex だと3列目になって崩れる。 Grid + named-area で「右列に見出し→注文内容」を確実に積む。 */ .woocommerce-checkout form.checkout.woocommerce-checkout { display: block; } @media (min-width: 901px) { .woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "cust reviewhead" "cust review"; align-items: start; column-gap: 40px; row-gap: 10px; } .woocommerce-checkout #customer_details { grid-area: cust; } .woocommerce-checkout #order_review_heading { grid-area: reviewhead; } .woocommerce-checkout #order_review { grid-area: review; } } .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { min-width: 0; width: auto; } .woocommerce-checkout #order_review_heading { margin-top: 0; } .woocommerce-checkout #order_review { background: rgba(182,151,79,.05); border: 1px solid rgba(182,151,79,.22); border-radius: 10px; padding: 22px; } .woocommerce-checkout .col2-set { width: 100%; } .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout .woocommerce-shipping-fields h3, .woocommerce-checkout .woocommerce-additional-fields h3 { font-size: .98rem; font-weight: 700; color: #102018; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(182,151,79,.2); } .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { margin-top: 24px; } /* 注文内容テーブル */ .woocommerce-checkout #order_review table.shop_table { margin-bottom: 18px; width: 100%; table-layout: fixed; /* 長い日本語商品名で表が横に伸びるのを防止 */ } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: 10px 6px; font-size: .85rem; word-break: break-word; overflow-wrap: anywhere; } .woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-weight: 800; color: #102018; } .woocommerce-checkout #order_review .order-total .amount { font-size: 1.15rem; color: #7a5a20; font-family: Georgia,serif; } /* 支払い方法ボックス */ .woocommerce-checkout #payment { background: #fff; border: 1px solid rgba(182,151,79,.22); border-radius: 8px; padding: 6px 18px 18px; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(182,151,79,.18); } .woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 10px; font-size: .88rem; } .woocommerce-checkout #payment ul.payment_methods li label { font-weight: 700; color: #1b1b18; display: inline; } /* Square カードブランドアイコンを横一列に */ .woocommerce-checkout #payment ul.payment_methods li .sv-wc-payment-gateway-icon, .woocommerce-checkout #payment ul.payment_methods li img.wc-square-credit-card-payment-gateway-icon { display: inline-block !important; vertical-align: middle; width: 38px !important; height: 24px !important; margin: 6px 6px 0 0 !important; float: none !important; } .woocommerce-checkout #payment div.payment_box { background: rgba(182,151,79,.07); border-radius: 6px; padding: 12px 14px; font-size: .82rem; color: #4a4a40; margin-top: 8px; overflow-x: hidden; /* Square iframe が右にはみ出すのを抑止 */ } /* 説明文と入力欄の余白を詰めてブロックを締まって見せる（外側ラッパーのみ調整） */ .woocommerce-checkout #payment div.payment_box > p { margin: 0 0 10px; line-height: 1.5; } .woocommerce-checkout #payment div.payment_box > p:last-child { margin-bottom: 0; } /* Square カード入力欄：はみ出さない為の最小限の制約のみ。番号→有効期限/CVV の内部レイアウトは Square 側に任せる（内部要素へ width:100%/display:block を強制すると崩れる）。 */ .woocommerce-checkout #payment .payment_box .wc-square-credit-card-payment-form, .woocommerce-checkout #payment .payment_box #wc-square-credit-card-hosted-fields { max-width: 100%; } .woocommerce-checkout #payment .payment_box iframe { max-width: 100%; width: 100%; } /* チェックアウトは横スクロール禁止（Square iframe / Select2 等の数pxの残留オーバーフローでスクロールバーが出ないようにする） */ body.woocommerce-checkout { overflow-x: hidden; } .woocommerce-checkout .tl-page-outer, .woocommerce-checkout .tl-page-outer > div, .woocommerce-checkout .woocommerce, .woocommerce-checkout form.checkout, .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout #payment { max-width: 100%; } .woocommerce-checkout #order_review, .woocommerce-checkout #payment, .woocommerce-checkout #payment .payment_box { overflow-x: hidden; } .woocommerce-checkout #payment .place-order { padding-top: 16px; } .woocommerce-checkout #payment #place_order { width: 100%; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: .8rem; color: #8a8880; margin: 6px 0 14px; } /* --- CART ページ --- */ .woocommerce-cart table.shop_table.cart { margin-bottom: 24px; } .woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(182,151,79,.2); } .woocommerce-cart table.cart td.product-name a { color: #1b1b18; font-weight: 700; text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: #7a5a20; } .woocommerce-cart table.cart td.product-quantity input.qty { width: 70px !important; text-align: center; padding: 8px !important; } .woocommerce-cart table.cart a.remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(120,40,40,.08); color: #a33 !important; font-size: 16px; line-height: 1; text-decoration: none; } .woocommerce-cart table.cart a.remove:hover { background: #a33; color: #fff !important; } .woocommerce-cart table.cart td.actions { padding: 16px 0; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; align-items: center; } .woocommerce-cart table.cart td.actions .coupon #coupon_code { width: auto !important; flex: 0 1 200px; margin: 0 !important; } .woocommerce-cart table.cart td.actions > button[name="update_cart"] { float: right; } /* カート合計ボックス */ .woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 420px; background: rgba(182,151,79,.05); border: 1px solid rgba(182,151,79,.22); border-radius: 10px; padding: 22px 24px; } .woocommerce-cart .cart_totals table.shop_table th { background: transparent; } .woocommerce-cart .cart_totals .order-total .amount { font-size: 1.3rem; font-weight: 900; color: #7a5a20; font-family: Georgia,serif; } .woocommerce-cart .wc-proceed-to-checkout { padding-top: 16px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; background: #102018 !important; color: #d4b07a !important; border-color: #102018 !important; font-size: 1rem !important; padding: 15px 24px !important; font-weight: 700 !important; letter-spacing: .08em; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #1a3a28 !important; color: #e6c98a !important; } .woocommerce-cart .cart-empty { text-align: center; font-size: 1rem; color: #4a4a40; padding: 30px 0; } .woocommerce-cart .return-to-shop { text-align: center; } /* --- MY ACCOUNT（ログイン/登録/ダッシュボード） --- */ .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 240px; display: inline-block; vertical-align: top; margin-right: 32px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(182,151,79,.22); border-radius: 8px; overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid rgba(182,151,79,.15); } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 18px; color: #4a4a40; font-size: .86rem; font-weight: 600; text-decoration: none; transition: background .15s; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(182,151,79,.12); color: #7a5a20; } .woocommerce-account .woocommerce-MyAccount-content { display: inline-block; vertical-align: top; width: calc(100% - 280px); min-width: 0; } .woocommerce-account .woocommerce-MyAccount-content p, .woocommerce-account .woocommerce-MyAccount-content table { font-size: .88rem; } /* ログイン / 登録フォーム（2カラム） */ .woocommerce-account:not(.logged-in) .woocommerce > .u-columns, .woocommerce .col2-set#customer_login { display: flex; flex-wrap: wrap; gap: 32px; } .woocommerce #customer_login .col-1, .woocommerce #customer_login .col-2 { flex: 1 1 320px; min-width: 0; } .woocommerce form.login, .woocommerce form.register { border: 1px solid rgba(182,151,79,.22); border-radius: 8px; padding: 24px; margin: 0; } .woocommerce form.login p.form-row button, .woocommerce form.register p.form-row button { width: 100%; background: #102018 !important; color: #d4b07a !important; border-color: #102018 !important; } .woocommerce-form-login__rememberme { font-size: .8rem; color: #8a8880; } .woocommerce-LostPassword a { font-size: .8rem; color: #7a5a20; } /* --- 共通: order details テーブル（マイアカウント注文詳細等） --- */ .woocommerce .woocommerce-customer-details address { font-style: normal; line-height: 1.9; font-size: .88rem; padding: 14px 16px; background: #fff; border: 1px solid rgba(182,151,79,.2); border-radius: 8px; } /* --- レスポンシブ --- */ @media (max-width: 900px) { /* 900px以下は単一カラム（gridは901px以上のみ適用）。見出し→注文内容→入力の順に縦積み。崩れ・横スクロールなし。 */ .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { display: block; width: 100%; margin-bottom: 16px; } } @media (max-width: 768px) { .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce { margin: 20px auto; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { display: block; width: 100%; margin-right: 0; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 20px; } .woocommerce-cart .cart-collaterals .cart_totals { max-width: 100%; } .woocommerce-cart table.cart td.actions > button[name="update_cart"] { float: none; width: 100%; margin-top: 10px; } /* カートテーブルをモバイルで縦積み */ .woocommerce-cart table.shop_table.cart thead { display: none; } .woocommerce-cart table.shop_table.cart tr { display: block; border: 1px solid rgba(182,151,79,.2); border-radius: 8px; margin-bottom: 12px; padding: 8px; } .woocommerce-cart table.shop_table.cart td { display: flex; justify-content: space-between; align-items: center; border: none; padding: 8px 6px; } .woocommerce-cart table.shop_table.cart td.actions { display: block; } } /* --- 最小スマホ（〜480px / iPhone 375px 対応）--- */ @media (max-width: 480px) { .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce { margin: 14px auto !important; } .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { font-size: .78rem !important; } .woocommerce-error, .woocommerce-message, .woocommerce-info { padding: 12px 14px !important; flex-direction: column; align-items: stretch; } .woocommerce-error > .button, .woocommerce-message > .button, .woocommerce-info > .button { align-self: flex-start; } .woocommerce-account .woocommerce-MyAccount-content p, .woocommerce-account .woocommerce-MyAccount-content table { font-size: .84rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { padding: 12px 14px; } /* 入れ子の余白を圧縮し、Square カード入力欄に横幅を確保（page.php のインライン padding:32px / 外側 padding を上書き） */ body.woocommerce-checkout .tl-page-outer { padding: 14px 6px 56px !important; } body.woocommerce-checkout .tl-page-outer > div { padding: 14px !important; } .woocommerce-checkout #order_review { padding: 14px !important; } .woocommerce-checkout #payment { padding: 4px 10px 12px !important; } .woocommerce-checkout #payment div.payment_box { padding: 10px !important; } .woocommerce-checkout form.checkout.woocommerce-checkout { gap: 20px !important; } }