@charset "UTF-8"; /** * 辻屋本店 getaya.jp 公開画面用CSS * * Lightning G3 のCSS変数を優先して調整し、 * 詳細なデザイン指定はこのファイルへ集約します。 */ /* -------------------------------------------------------------------------- * Welcart 商品詳細（Core v1.4.0） * ----------------------------------------------------------------------- */ .getaya-welcart-item-single .siteContent, .getaya-welcart-item-single .siteContent-container { padding-top: 0; } .getaya-product-page { width: 100%; } .getaya-product-container { box-sizing: border-box; margin: 0 auto; max-width: 1600px; padding: clamp(20px, 3vw, 48px) clamp(16px, 2.6vw, 40px) 72px; } .getaya-product-grid { display: grid; gap: 0 clamp(28px, 3vw, 52px); grid-template-areas: "gallery info" "purchase info"; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .75fr); grid-template-rows: auto auto; align-items: start; } /* 【方針転換・v2.7.5・実機のスクリーンショットとChatGPTによる * v1.9.8/v2.7.3の実ファイル比較を経て確定】 * * v2.7.2〜v2.7.4は「商品写真をヘッダーの下に正しく固定表示させる」 * 方向でtopのオフセット計算を繰り返し修正していたが、これは今回の * 要望を取り違えていた。実際の問題は逆で、「固定表示された写真が、 * スクロールにつれて左カラムの次の行(購入エリア、 * .getaya-product-purchase-area)に覆いかぶさる」ことだった。 * * 実機でposition:static !importantを一時適用し、 * (1)写真が通常通り上へ消える (2)購入エリアに重ならない * (3)右の商品情報カラムに影響しない (4)スマホ表示に影響しない * の4点を実際にマウスホイールでスクロールして確認した結果、 * すべて問題ないことを確認できた。 * * 商品写真をわざわざ固定表示させる必要性自体が無かったため、 * sticky化・そのための位置補正(--getaya-sticky-offsetとは別の、 * 商品写真専用のヘッダー高さぶんのtopオフセットや、購入エリア * 接近検知によるIntersectionObserver解除処理)は全て廃止し、 * 通常のドキュメントフロー(position:static、実質何も指定しない)に * 戻した。商品カテゴリー一覧のサイドバーやスマホ検索バー等、他の * 用途のsticky/--getaya-sticky-offsetには一切手を入れていない。 */ .getaya-product-gallery { grid-area: gallery; min-width: 0; } .getaya-product-gallery__layout { display: grid; grid-template-columns: clamp(44px, 4.2vw, 58px) minmax(0, 1fr); gap: 10px; align-items: stretch; } .getaya-product-gallery__viewport { background: #f7f7f7; cursor: default; overflow: hidden; position: relative; touch-action: pan-y; } .getaya-product-gallery__viewport.is-zoomable { cursor: zoom-in; } .getaya-product-gallery__main { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; position: relative; z-index: 2; transform: scale(1); transition: opacity .24s ease, transform .32s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .getaya-product-gallery__main.is-fading { opacity: .18; } .getaya-product-gallery__main.is-slide-next { opacity: .35; transform: translateX(-7%); } .getaya-product-gallery__main.is-slide-prev { opacity: .35; transform: translateX(7%); } .getaya-product-gallery__main.is-zoomed { transform: scale(1.75); } .getaya-product-gallery__trail { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; position: absolute; inset: 0; z-index: 1; opacity: .28; pointer-events: none; transition: opacity .36s ease, transform .36s cubic-bezier(.22,.61,.36,1); } .getaya-product-gallery__trail.is-trail-next.is-leaving { opacity: 0; transform: translateX(-13%); } .getaya-product-gallery__trail.is-trail-prev.is-leaving { opacity: 0; transform: translateX(13%); } .getaya-product-gallery__thumb-rail { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; } .getaya-product-gallery__thumb-rail.has-pagination { grid-template-rows: 18px minmax(0, 1fr) 18px; gap: 4px; } .getaya-product-gallery__thumb-window { min-height: 0; overflow: hidden; scroll-behavior: smooth; } .getaya-product-gallery__thumbs { display: grid; grid-template-columns: 1fr; gap: 5px; } .getaya-product-gallery__thumb { appearance: none; background: #fff; border: 1px solid #ddd; cursor: pointer; margin: 0; padding: 1px; } .getaya-product-gallery__thumb.is-current { border-color: #222; box-shadow: inset 0 0 0 1px #222; } .getaya-product-gallery__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .getaya-product-gallery__thumb-nav { appearance: none; background: transparent; border: 0; color: #333; cursor: pointer; font-size: 18px; line-height: 1; margin: 0; padding: 0; transform: rotate(90deg); } .getaya-product-gallery__thumb-nav:disabled { cursor: default; opacity: .2; } .getaya-product-gallery__arrow { display: none; appearance: none; align-items: center; justify-content: center; background: rgba(255,255,255,.72); border: 0; border-radius: 999px; color: #222; cursor: pointer; font-size: 25px; height: 40px; line-height: 1; margin: 0; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; z-index: 5; } .getaya-product-gallery__arrow--prev { left: 7px; } .getaya-product-gallery__arrow--next { right: 7px; } .getaya-product-info { grid-area: info; min-width: 0; } .getaya-product-purchase-area { grid-area: purchase; margin-top: 100px; min-width: 0; } .getaya-product-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: 12px; line-height: 1.5; margin-bottom: 16px; } .getaya-product-breadcrumb a { text-decoration: none; } .getaya-product-breadcrumb__category { background: var(--getaya-category-bg, #777); color: var(--getaya-category-text, #fff) !important; font-weight: 700; line-height: calc(1em + 2px); padding: 1px 3px; } .getaya-product-breadcrumb__separator { color: #777; } .getaya-product-title { font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "Yu Gothic", "YuGothic", sans-serif; font-size: clamp(21px, 1.7vw, 29px); font-weight: 500; line-height: 1.45; margin: 0 0 18px; word-break: auto-phrase; } .getaya-product-summary-price { font-size: clamp(24px, 2vw, 32px); line-height: 1.3; margin-bottom: 6px; } .getaya-product-tax-note, .getaya-product-sku__price span { font-size: 12px; } .getaya-product-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; } .getaya-product-badges:empty { display: none; } .getaya-product-badge { border: 1px solid currentColor; display: inline-flex; font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 1; padding: 6px 9px; } .getaya-product-points-wrap { margin: 0 0 22px; } .getaya-product-points { color: #111; font-size: 12px; margin: 0; } .getaya-product-points__label { color: #111; } .getaya-product-points__value { color: #b12704; margin-right: .55em; } .getaya-product-points__link { color: #007185 !important; text-decoration: none; } .getaya-product-points__link:hover { color: #c7511f !important; text-decoration: underline; } .getaya-product-campaign { color: #b12704; font-size: 12px; font-weight: 700; margin: 4px 0 0; } .getaya-product-description { font-size: 15px; line-height: 1.9; margin: 24px 0 30px; } .getaya-product-description h2 { font-size: 20px; line-height: 1.6; margin: 2em 0 .7em; } /* Lightning / VK Blocks側で本文末に付加される標準SNSボタンを商品詳細だけ隠す。 */ .getaya-welcart-item-single .getaya-product-description .veu_socialSet, .getaya-welcart-item-single .getaya-product-description .sns_btns, .getaya-welcart-item-single .getaya-product-description .vk_post_sns, .getaya-welcart-item-single .getaya-product-description .vk_share_button, .getaya-welcart-item-single .getaya-product-description .wp-block-vk-blocks-sns, .getaya-welcart-item-single .getaya-product-description .socialSet { display: none !important; } .getaya-product-skus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .getaya-product-sku { background: #fafafa; border: 1px solid #eeeeee; border-radius: 8px; box-sizing: border-box; min-width: 0; padding: 14px 16px 16px; } .getaya-product-sku__name { border-bottom: 2px solid var(--vk-color-primary, #071b57); border-left: 15px solid var(--vk-color-primary, #071b57); color: #111; font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; padding: .4em .5em; } /* 2026-09-09追記(トミタ様よりご依頼): SKU表示名の下線直下にWelcart SKUコードを表示するため、 見出し下の余白を18px→6pxに縮小(SKUコードとの間隔を詰めるため) */ .getaya-product-sku__code { color: #111; font-size: 11px; letter-spacing: .02em; margin: 0 0 10px; text-align: center; } .getaya-product-sku__label, .getaya-product-sku__stock { font-size: 13px; margin: 0 0 8px; } .getaya-product-sku__price { font-size: 21px; line-height: 1.35; margin: 0 0 28px; } .getaya-product-sku__quantity { display: block; font-size: 13px; margin-bottom: 20px; } .getaya-product-sku__quantity input { box-sizing: border-box; margin-top: 8px; max-width: 100%; width: 100%; } .getaya-product-sku__button { margin: 0; } .getaya-product-sku__button input, .getaya-product-sku__button button, .getaya-product-sku__soldout { box-sizing: border-box; min-height: 52px; width: 100%; } .getaya-product-sku__button input, .getaya-product-sku__button button { align-items: center; display: inline-flex; justify-content: center; text-align: center; } .getaya-product-sku__soldout { align-items: center; background: #ccc; color: #fff; display: flex; justify-content: center; margin: 0; } .getaya-product-sku__error { font-size: 12px; } .getaya-product-share { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; } .getaya-product-share__label { font-size: 13px; font-weight: 600; } .getaya-product-share__buttons { display: flex; flex-wrap: wrap; gap: 5px; } .getaya-share-button { align-items: center; appearance: none; border: 0; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: inline-flex; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; height: 28px; justify-content: center; line-height: 1; padding: 0; text-decoration: none !important; width: 28px; } .getaya-share-icon { align-items: center; display: inline-flex; justify-content: center; line-height: 1; } .getaya-share-icon--line { font-size: 7px; font-weight: 800; letter-spacing: -.04em; } .getaya-share-icon--x { font-size: 14px; font-weight: 500; } .getaya-share-icon--facebook { font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; transform: translateY(1px); } .getaya-share-icon--threads { font-size: 16px; } .getaya-share-icon--pinterest { font-family: Georgia, serif; font-size: 17px; font-weight: 700; } .getaya-share-icon--copy { font-size: 14px; } .getaya-share-button--line { background: #06c755; color: #fff !important; } .getaya-share-button--x { background: #000; color: #fff !important; } .getaya-share-button--facebook { background: #1877f2; color: #fff !important; } .getaya-share-button--threads { background: #000; color: #fff !important; } .getaya-share-button--pinterest { background: #e60023; color: #fff !important; } .getaya-share-button--copy { background: #eee; color: #222; } .getaya-share-button:hover, .getaya-share-button:focus-visible { filter: brightness(.92); transform: translateY(-1px); } .getaya-share-button.is-copied { outline: 2px solid #0a7; } @media (max-width: 1100px) { .getaya-product-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr); } .getaya-product-skus { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .getaya-product-container { padding: 16px 14px 48px; } .getaya-product-grid { display: grid; gap: 0; grid-template-areas: "gallery" "info" "purchase"; grid-template-columns: minmax(0, 1fr); } .getaya-product-gallery { position: static; } .getaya-product-gallery__layout { display: block; } .getaya-product-gallery__thumb-rail { display: none; } .getaya-product-gallery__arrow { display: inline-flex; } .getaya-product-info { margin-top: 22px; } .getaya-product-purchase-area { margin-top: 60px; } .getaya-product-gallery__main.is-zoomed { transform: none; } .getaya-product-title { font-size: 21px; } .getaya-product-skus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 38px; } .getaya-product-sku { padding-left: 16px; padding-right: 16px; } .getaya-product-sku__price { font-size: 18px; } .getaya-product-share { align-items: flex-start; display: block; } .getaya-product-share__label { display: block; margin-bottom: 8px; } } /* ------------------------------------------------------------------------- * Welcart 商品カテゴリー一覧 * 表示責任はLightning子テーマ。データ取得はgetaya.jp Core。 * ---------------------------------------------------------------------- */ .getaya-product-category-page { width: 100%; } .getaya-category-hero { background-color: var(--getaya-category-color, #6d83b7); height: var(--getaya-category-min-height, 8rem); position: relative; } .getaya-category-hero::before { background: rgba(255,255,255,.48); content: ""; inset: 0; position: absolute; } .getaya-category-hero__inner { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; z-index: 1; } .getaya-category-hero h1 { color: #fff; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; font-size: clamp(1.65rem, 2.6vw, 2.45rem); margin: 0; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.22); } .getaya-category-description { font-family: "New Tegomin", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; font-size: .94rem; line-height: 2.05; margin: 2.4rem auto 1.7rem; text-align: center; width: 70%; } .getaya-category-description > :last-child { margin-bottom: 0; } .getaya-category-count { color: #1265ad; font-family: "BIZ UDPGothic", "Yu Gothic", sans-serif; font-size: .78rem; margin: 0 auto 3.2rem; text-align: center; } .getaya-category-count strong { font-weight: 700; } .getaya-category-layout { display: grid; gap: 2.2rem; grid-template-columns: 220px minmax(0,1fr); margin: 0 auto; max-width: 1500px; padding: 0 2rem 0; } /* 【新規】サイドバー背景(ごく薄いグレー)を画面左端までフルブリードで * 伸ばす。サイドバー自体(position:sticky)の左に、::beforeで * 画面左端まで確実に届く大きさの帯を敷き、文字コンテンツの位置は * サイドバー本体(position:sticky基準)を動かしていないため変わらない。 * 右端はサイドバー自身の右端で止める(そこから右はhero/results側の * 領域のため伸ばさない)。 */ /* 【不具合修正・v2.3.6・ChatGPT指摘】.getaya-category-sidebarにも * 祖先要素にもposition指定が一つもなく、::beforeの絶対配置の基準 * (containing block)がサイドバー自身ではなくビューポート(初期 * 包含ブロック)になっていた。これまで見た目上は正しく見えていたが、 * それは右隣のhero帯や本文側の不透明な要素にたまたま隠れていた * だけの偶然の一致で、根拠のない不安定な状態だった。position:relative * を明示し、::beforeの基準を確実にサイドバー自身にする。 */ .getaya-category-sidebar { position: relative; z-index: 0; } .getaya-category-sidebar::before { background-color: #f7f7f7; bottom: 0; content: ''; left: -100vw; position: absolute; right: 0; top: 0; z-index: -1; } .getaya-category-sidebar { min-width: 0; } /* 【新規】サイドバー全体にごく薄いグレーの背景を敷き、結果カラムとの * 領域の区別を分かりやすくする。内側の余白・スクロール固定(sticky)は * .getaya-category-sidebar__scroll側にまとめてあるので、ここでは * 背景色のみを指定する(v2.3.5で整理、詳細は下の@media(min-width:768px) * ブロックのコメント参照)。 */ .getaya-category-sidebar { background-color: #f7f7f7; } .getaya-filter-section { border-top: 2px solid var(--vk-color-primary, #23106d); margin-bottom: 2rem; padding-top: .55rem; } .getaya-filter-section h2 { border-bottom: 1px solid #ececec; font-size: .9rem; font-weight: 700; margin: 0 0 .8rem; padding: 0 0 .5rem; } .getaya-category-tree__branch { margin-bottom: .85rem; } .getaya-category-tree__root { color: #111 !important; display: block; font-size: .95rem; font-weight: 700; margin-bottom: .28rem; text-decoration: none; } .getaya-category-tree__child { align-items: center; color: #444 !important; display: flex; font-size: .78rem; gap: .32rem; line-height: 1.3; margin: .3rem 0; text-decoration: none; } .getaya-category-tree__chevron { align-items: center; background: var(--getaya-child-color, #777); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 1.05em; font-size: .9em; height: 1.05em; justify-content: center; line-height: 1; width: 1.05em; } .getaya-filter-tags { display: flex; flex-wrap: wrap; gap: .42rem; } /* 【検索UI改修・v2.8.13】結果画面タグを複数選択できるチェックUIへ変更。 */ .getaya-filter-tag-check { align-items: center; background: #fff; color: #555; cursor: pointer; display: inline-flex; font-size: .7rem; gap: .28rem; padding: .22rem .4rem; } .getaya-filter-tag-check input { margin: 0; accent-color: var(--vk-color-primary, #23106d); } .getaya-filter-tag-check:has(input:checked) { background: var(--vk-color-primary, #23106d); color: #fff; } .getaya-price-filter__inputs { align-items: center; display: grid; gap: .35rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); } .getaya-price-filter__inputs input { box-sizing: border-box; font-size: .72rem; height: 1.9rem; min-width: 0; padding: .18rem .35rem; width: 100%; } .getaya-price-filter__inputs input::placeholder { font-size: .68rem; } .getaya-price-filter__inputs span { font-size: .75rem; } .getaya-price-filter__button { background: var(--vk-color-primary, #23106d); border: 0; border-radius: 3px; color: #fff; cursor: pointer; font-size: .86rem; font-weight: 700; margin-top: .9rem; min-height: 3rem; width: 100%; } .getaya-product-card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .getaya-product-card { background: #fff; border: 1px solid #e7e7e7; display: flex; flex-direction: column; min-width: 0; } .getaya-product-card__image { aspect-ratio: 4 / 3; background: #f7f7f7; display: block; overflow: hidden; } .getaya-product-card__image img { height: 100%; object-fit: cover; width: 100%; } .getaya-product-card__body { display: flex; flex: 1; flex-direction: column; padding: .9rem; } .getaya-product-card h2 { font-family: "BIZ UDPGothic", "Yu Gothic", sans-serif; font-size: .98rem; line-height: 1.5; margin: 0 0 .55rem; } .getaya-product-card h2 a { color: #111; text-decoration: none; } .getaya-product-card__excerpt { display: -webkit-box; font-size: .76rem; line-height: 1.65; margin: 0 0 .8rem; min-height: 3.3em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .getaya-product-card__price { font-size: 1rem; font-weight: 700; margin: auto 0 .2rem; } .getaya-product-card__price span { font-size: .68rem; font-weight: 400; } .getaya-product-card__point { color: #b12704; font-size: .7rem; margin: 0 0 .75rem; } .getaya-product-card__button { background: var(--vk-color-primary, #23106d); color: #fff !important; display: block; font-size: .78rem; padding: .72rem .5rem; text-align: center; text-decoration: none !important; } .getaya-product-none { margin: .2rem 0 0; } .getaya-product-share__buttons .getaya-share-button { background: transparent; border-radius: 0; overflow: visible; } .getaya-share-button img { display: block; height: 24px; max-width: 24px; object-fit: contain; width: 24px; } .getaya-share-button--pinterest img { height: 25px; width: 25px; } .getaya-share-button--copy img { height: 22px; width: 22px; } @media (max-width: 900px) { .getaya-category-layout { grid-template-columns: 210px minmax(0,1fr); padding-inline: 1rem; } .getaya-product-card-grid { gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 767px) { .getaya-category-description { font-size: .86rem; line-height: 2; margin-top: 2rem; width: 70%; } .getaya-category-count { margin-bottom: 2.2rem; } .getaya-category-layout { display: block; padding: 0 .75rem 4rem; } .getaya-category-sidebar { margin-bottom: 2rem; } .getaya-product-card-grid { gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); } .getaya-product-card__body { padding: .65rem; } .getaya-product-card h2 { font-size: .84rem; } .getaya-product-card__excerpt { font-size: .68rem; } .getaya-product-card__price { font-size: .86rem; } } /* ======================================================================== * v1.6.0 商品カテゴリー／商品カルーセル * ===================================================================== */ .getaya-category-hero { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), var(--getaya-category-image, none); background-color: var(--getaya-category-color, #777); background-position: center; background-size: cover; } .getaya-category-hero::before { background: color-mix(in srgb, var(--getaya-category-color, #777) 50%, transparent); } .getaya-category-layout { align-items: start; grid-template-columns: 270px minmax(0,1fr); padding-top: 0; } .getaya-category-sidebar { /* 【整理・v2.3.5】stickyまわりの指定は下の@media(min-width:768px) * ブロックに一本化した。ここでは何も指定しない(名残の指定が * あると修正時に片方だけ直す事故が起きやすいため)。 */ } .getaya-category-sidebar__scroll { overflow-x: hidden; } .getaya-category-sidebar.has-expanded-tags .getaya-category-sidebar__scroll { overflow-y: auto; scrollbar-width: thin; } .getaya-filter-section { border-top: 1px solid #8c8c8c; margin-bottom: 1.15rem; padding-top: .4rem; } /* 【修正】サイドバー最初のセクション(商品カテゴリー)には、区切り線として * 意味を持たない先頭の横線が出てしまうため、最初の1つだけ線とその上の * 余白を消す(2つ目以降の区切り線は維持) */ .getaya-category-sidebar__scroll > .getaya-filter-section:first-child { border-top: 0; padding-top: 0; } .getaya-filter-section h2 { border: 0 !important; box-shadow: none !important; font-size: .78rem; margin: 3px 0 .5rem; padding: 0 !important; } .getaya-filter-tags-wrap { overflow: hidden; transition: max-height .24s ease; } .getaya-filter-tags { line-height: 1.5rem; } .getaya-tags-more { background: none; border: 0; color: #1265ad; cursor: pointer; font-size: .7rem; margin-top: .25rem; padding: 0; } .getaya-price-filter__inputs { align-items: center; display: grid; gap: .3rem; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); } .getaya-price-filter__inputs input { font-size: .7rem; height: 1.75rem; min-width: 0; padding: .2rem .35rem; } .getaya-price-filter__inputs input::placeholder { font-size: .64rem; } .getaya-price-filter__button { background: var(--vk-color-primary, #23106d); border: 0; color: #fff; cursor: pointer; font-size: .76rem; margin-top: .45rem; min-height: 2.1rem; width: 100%; } .getaya-filter-reset { display: block; font-size: .68rem; margin-top: .4rem; text-align: center; } .getaya-category-description { margin: 0 auto 1.6rem; width: min(82%, 920px); } .getaya-category-count { margin-bottom: 2.3rem; } .getaya-product-card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .getaya-product-card-grid .getaya-mini-product-card__title { font-size: .8rem; } .getaya-mobile-filter-bar, .getaya-filter-drawer, .getaya-filter-backdrop { display: none; } /* Shared compact product card */ .getaya-mini-product-card { min-width: 0; position: relative; } .getaya-mini-product-card__image { aspect-ratio: 4 / 3; background: #f7f7f7; display: block; overflow: hidden; position: relative; } .getaya-mini-product-card__image img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .32s ease; width: 100%; } .getaya-mini-product-card__image-primary { transform: translateY(0); z-index: 1; } .getaya-mini-product-card__image-secondary { transform: translateY(100%); z-index: 2; } @media (hover:hover) and (pointer:fine) { .getaya-mini-product-card__image:hover .getaya-mini-product-card__image-primary { transform: translateY(-100%); } .getaya-mini-product-card__image:hover .getaya-mini-product-card__image-secondary { transform: translateY(0); } } .getaya-mini-product-card__badges { left: .4rem; position: absolute; top: .4rem; z-index: 4; } .getaya-mini-product-card__badges span { color: #fff; display: block; font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: .34rem .45rem; } .getaya-mini-product-card__badges .is-soldout { background: #d32f2f; } .getaya-mini-product-card__badges .is-new { background: #06c755; } .getaya-mini-product-card__title { display: -webkit-box; font-size: .8rem; line-height: 1.55; margin: .65rem 0 .35rem; min-height: 3.72em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .getaya-mini-product-card__title a { color: #1265ad !important; text-decoration: none; } .getaya-mini-product-card__title a:hover { color: #064b86 !important; text-decoration: underline; } .getaya-mini-product-card__meta { align-items: baseline; display: flex; gap: 1em; margin: 2px 0 0; } .getaya-mini-product-card__price { color: #111; font-size: .9rem; font-weight: 700; margin: 0; } .getaya-mini-product-card__points { color: #555; font-size: .7rem; margin: 0; } /* Product discovery carousels */ .getaya-product-carousel { border-top: 1px solid #ddd; margin-top: 4rem; padding-top: 1.6rem; width: 100%; } .getaya-product-carousel[hidden] { display: none; } .getaya-product-carousel__heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; } .getaya-product-carousel__heading h2 { border: 0 !important; font-size: 1.25rem; margin: 0; padding: 0 !important; } .getaya-product-carousel__controls { display: flex; gap: .35rem; } .getaya-product-carousel__controls button { align-items: center; background: #fff; border: 1px solid #aaa; border-radius: 50%; cursor: pointer; display: inline-flex; height: 2.1rem; justify-content: center; padding: 0; width: 2.1rem; } .getaya-product-carousel__viewport { overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; } .getaya-product-carousel__viewport::-webkit-scrollbar { display: none; } .getaya-product-carousel__track { display: grid; gap: 1rem; grid-auto-columns: calc((100% - 6rem) / 7); grid-auto-flow: column; } .getaya-product-carousel .getaya-mini-product-card { scroll-snap-align: start; } .getaya-welcart-item-single .relatedPosts { display: none !important; } /* Purchase cards centered in gallery width */ .getaya-product-purchase-area { display: flex; justify-content: center; } .getaya-product-purchase { width: 100%; } .getaya-product-skus { justify-content: center; } @media (max-width: 1200px) { .getaya-product-card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .getaya-product-carousel__track { grid-auto-columns: calc((100% - 4rem) / 5); } } @media (max-width: 991px) { .getaya-category-layout { grid-template-columns: 220px minmax(0,1fr); } .getaya-product-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .getaya-product-carousel__track { grid-auto-columns: calc((100% - 2rem) / 3); } } @media (max-width: 767px) { /* 【不具合修正・撤去】ここに以前あった .site-header { position:fixed !important; ... } body { padding-top: var(--getaya-header-height, 60px) !important; } は、旧Lightning標準ヘッダー(class="site-header")をposition:fixedに 切り替える前提で書かれた「固定ヘッダー用のスペーサー」だった。 現在の独自ヘッダーはclass="getaya-header"のためこの.site-header指定 自体が何にも一致しない死んだコードになっており、その一方でbody側の padding-topだけは効き続けていた。独自ヘッダーは既にposition:sticky で通常フロー内に自然に場所を確保しているため、この余白は不要かつ 二重の余白(スクロール時の白い隙間)の原因になっていたため撤去した。 (--getaya-header-height変数自体は、直後の絞り込みバーの位置決めに まだ使うため、変数の計測処理(assets/js/main.js)は維持している) */ .getaya-mobile-filter-bar { background: #f7f7f7; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; display: grid; grid-template-columns: repeat(4,1fr); position: sticky; top: var(--getaya-header-height, 60px); z-index: 50; } .admin-bar .getaya-mobile-filter-bar { top: 46px; } .getaya-mobile-filter-bar button { background: #f7f7f7; border: 0; border-right: 1px solid #ddd; font-size: .7rem; font-weight: 700; min-height: 2.8rem; padding: 0 .15rem; } .getaya-category-layout { display: block; padding-top: 0; } .getaya-category-sidebar { display: none; } .getaya-filter-backdrop { background: rgba(0,0,0,.38); display: block; inset: 0; position: fixed; z-index: 9998; } .getaya-filter-drawer { background: #fff; bottom: 0; display: block; left: 0; max-height: 78vh; overflow-y: auto; padding: 2.5rem 1.2rem 1.5rem; position: fixed; right: 0; z-index: 9999; } .getaya-filter-drawer[hidden], .getaya-filter-backdrop[hidden] { display: none; } .getaya-filter-drawer__close { background: none; border: 0; font-size: 1.8rem; position: absolute; right: .8rem; top: .4rem; } body.getaya-filter-open { overflow: hidden; } .getaya-category-description { width: 92%; } .getaya-product-card-grid { gap: .8rem; grid-template-columns: repeat(2,minmax(0,1fr)); } .getaya-product-carousel__track { gap: .75rem; grid-auto-columns: calc((100% - .75rem) / 2.5); } .getaya-product-carousel__controls { display: none; } .getaya-product-carousel { margin-top: 3rem; } .getaya-product-skus { grid-template-columns: repeat(2,minmax(0,1fr)); } .getaya-product-skus > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } } /* ======================================================================== * v1.7.0 UI仕上げ：カテゴリー色、スティッキー、閲覧導線 * ===================================================================== */ .getaya-category-hero { background-color: var(--getaya-category-color, #777); background-image: linear-gradient(rgba(var(--getaya-category-rgb, 119,119,119), var(--getaya-category-overlay-opacity, .50)), rgba(var(--getaya-category-rgb, 119,119,119), var(--getaya-category-overlay-opacity, .50))), var(--getaya-category-image, none); background-position: center; background-size: cover; } .getaya-category-hero::before { display: none; } .getaya-category-sidebar { /* top/max-heightはこの下の@media(min-width:768px)ブロックで * !important付きで一元管理しているため、ここでは指定しない * (以前は両方で指定しており、修正時に片方だけ直す事故が * 起きやすかったため統合した) */ } .getaya-category-result-summary { align-items: center; display: flex; gap: 1rem 2rem; justify-content: center; margin: 0 auto 2.3rem; } .getaya-category-result-summary .getaya-category-count { margin: 0; } .getaya-soldout-filter { color: #333; font-size: .78rem; margin: 0; white-space: nowrap; } .getaya-soldout-filter label { align-items: center; cursor: pointer; display: inline-flex; gap: .25rem; margin: 0; } .getaya-soldout-filter input[type="checkbox"] { margin: 0; } .getaya-product-carousel__heading { display: block; } .getaya-product-carousel__body { position: relative; } .getaya-carousel-edge { align-items: center; background: rgba(255,255,255,.92); border: 1px solid #aaa; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.16); cursor: pointer; display: inline-flex; font-size: 1.35rem; height: 2.5rem; justify-content: center; padding: 0; position: absolute; top: 38%; transform: translateY(-50%); width: 2.5rem; z-index: 5; } .getaya-carousel-prev { left: .35rem; } .getaya-carousel-next { right: .35rem; } .getaya-product-carousel__viewport { padding-inline: .1rem; } .getaya-product-breadcrumb__category { background-color: var(--getaya-category-bg, #777) !important; } @media (max-width: 767px) { .getaya-product-gallery__layout { display: flex; flex-direction: column; gap: .65rem; } .getaya-product-gallery__viewport { order: 1; } .getaya-product-gallery__thumb-rail, .getaya-product-gallery__thumb-rail.has-pagination { display: block; order: 2; } .getaya-product-gallery__thumb-window { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .getaya-product-gallery__thumbs { display: flex; gap: .45rem; width: max-content; } .getaya-product-gallery__thumb { flex: 0 0 64px; width: 64px; } .getaya-product-gallery__thumb-nav { display: none; } .getaya-mobile-filter-bar { top: var(--getaya-sticky-offset, 0px); z-index: 100; } .admin-bar .getaya-mobile-filter-bar { top: var(--getaya-sticky-offset, 46px); } .getaya-mobile-filter-bar button { font-size: .72rem; padding-inline: .25rem; } .getaya-category-description { box-sizing: border-box; width: 70%; } .getaya-category-result-summary { align-items: center; flex-direction: column; gap: .65rem; margin-bottom: 2.2rem; } .getaya-category-result-summary .getaya-category-count { width: 100%; } .getaya-soldout-filter { width: 100%; text-align: center; } .getaya-carousel-edge { display: none; } } /* ======================================================================== * v1.7.1 sticky・商品パンくず・購入カード中央揃え * ===================================================================== */ /* Lightning側のラッパーにoverflowが指定されてもstickyを無効化させない。 */ .getaya-product-category-page, .getaya-product-category-page .getaya-category-layout, .getaya-product-category-page .getaya-product-results { overflow: visible !important; } @media (min-width: 768px) { /* 【不具合修正・v2.3.0→v2.3.2→v2.3.5・実機要因判明】 * 以前はサイドバー本体(.getaya-category-sidebar)自身に * position:stickyとmax-heightを指定していたため、箱の高さが * 中身(フィルター項目)の高さぶんしかなく、薄いグレー背景も * その高さまでしか塗られず、結果カラムの下端(フッター手前)との * 間に白い隙間ができてしまっていた。 * v2.3.5で構造を変更: 外側の.getaya-category-sidebarは * align-self:stretchで結果カラムと同じ高さまで伸ばして * グレー背景をその高さいっぱいに敷き、実際にスクロールに * 追従して画面内に留まる(sticky)のは内側の * .getaya-category-sidebar__scrollだけにする、という * 「外側=色を塗るための背の高い箱／内側=実際に貼り付く中身」 * の二層構造にした。 */ .getaya-category-sidebar { align-self: stretch; } .getaya-category-sidebar__scroll { box-sizing: border-box; height: fit-content; max-height: calc(100vh - var(--getaya-sticky-offset, 0px) - 2rem); overflow-x: hidden; padding: 1.4rem 1.1rem 1.8rem; position: -webkit-sticky !important; position: sticky !important; top: calc(var(--getaya-sticky-offset, 0px)) !important; z-index: 20; } /* PCではSKUカード自体の幅を保ち、カード群を左詰めにせず中央へ置く。 */ .getaya-product-purchase { margin-inline: auto; width: 100%; } .getaya-product-skus { grid-template-columns: repeat(auto-fit, minmax(210px, 260px)); justify-content: center !important; } } /* 商品パンくずは個々のラベルではなく、帯全体へカテゴリー色を適用する。 */ .getaya-product-breadcrumb { background-color: var(--getaya-category-bg, #777) !important; border-radius: 2px; box-sizing: border-box; color: var(--getaya-category-text, #fff) !important; padding: .42rem .65rem; width: 100%; } .getaya-product-breadcrumb__category { background: transparent !important; color: inherit !important; padding: 0 !important; } .getaya-product-breadcrumb__separator { color: inherit !important; opacity: .72; } @media (max-width: 767px) { .getaya-mobile-filter-bar { position: -webkit-sticky !important; position: sticky !important; top: var(--getaya-sticky-offset, 0px) !important; z-index: 1000; } /* スマホの2列＋奇数最終行中央揃えは従来仕様を維持。 */ .getaya-product-skus { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ======================================================================== * getaya.jp Checkout UI v1.0 * Welcartの計算・POST・WCEX Coupon処理には触れず、購入導線の表示だけを整える。 * ===================================================================== */ body.getaya-checkout .page-header, body.getaya-checkout .breadcrumb, body.getaya-checkout .vk_breadcrumb, body.getaya-checkout .entry-header, body.getaya-checkout .page-header-title, body.getaya-checkout .siteContent_after, body.getaya-checkout .veu_relatedPosts, body.getaya-checkout .relatedPosts { display: none !important; } body.getaya-checkout .siteContent, body.getaya-checkout .site-content { padding-top: clamp(14px, 2vw, 28px) !important; } /* v1.9.2で判明：進行バーを包む.header_explanationに、Welcart本体の * usces_cart.cssがpadding-top/bottom:15pxを指定しており、これまで一度も * 上書きしていなかった。.getaya-checkout-road側をいくら調整しても、 * この外側のpaddingが残るため変化が乏しく見えていた。 */ body.getaya-checkout .header_explanation { padding-top: 7px !important; padding-bottom: 7px !important; } /* セクションと表 */ body.getaya-checkout .getaya-checkout-section-title, body.getaya-checkout .p-wc-headline, body.getaya-checkout #customer-info h3, body.getaya-checkout #info-confirm h3 { margin: 38px 0 18px; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 700; text-align: center; } body.getaya-checkout table { border-collapse: collapse; border-spacing: 0; } body.getaya-checkout #cart_table, body.getaya-checkout .customer_form, body.getaya-checkout .p-wc-cart_table, body.getaya-checkout .p-wc-customer_form, body.getaya-checkout .getaya-checkout-summary__table { width: 100%; margin: 0 0 28px; background: #fff; border: 1px solid #dadada; } body.getaya-checkout #cart_table th, body.getaya-checkout #cart_table td, body.getaya-checkout .customer_form th, body.getaya-checkout .customer_form td, body.getaya-checkout .p-wc-cart_table th, body.getaya-checkout .p-wc-cart_table td, body.getaya-checkout .p-wc-customer_form th, body.getaya-checkout .p-wc-customer_form td, body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td { padding: 14px 16px; vertical-align: middle; border: 1px solid #dedede; } body.getaya-checkout #cart_table thead th, body.getaya-checkout .p-wc-cart_table thead th, body.getaya-checkout .getaya-checkout-summary__table thead th { font-size: .9rem; font-weight: 600; text-align: center; background: #fafafa; } body.getaya-checkout .customer_form th, body.getaya-checkout .p-wc-customer_form th { width: 28%; font-weight: 600; text-align: center; background: #fafafa; } body.getaya-checkout input[type="text"], body.getaya-checkout input[type="email"], body.getaya-checkout input[type="password"], body.getaya-checkout input[type="number"], body.getaya-checkout select, body.getaya-checkout textarea { max-width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #cfcfcf; border-radius: 0; background: #fff; } body.getaya-checkout textarea { min-height: 140px; } /* ボタン */ body.getaya-checkout .send, body.getaya-checkout .p-wc-upbutton { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 30px 0; text-align: center; } body.getaya-checkout input[type="submit"], body.getaya-checkout .send a, body.getaya-checkout .p-button { min-width: 210px; min-height: 54px; padding: 13px 24px; color: #fff; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; background: #1d0072; border: 0; border-radius: 3px; cursor: pointer; } body.getaya-checkout .back_cart_button, body.getaya-checkout .back_to_customer_button, body.getaya-checkout .back_to_delivery_button, body.getaya-checkout .p-button-back { color: #333 !important; background: #fff !important; border: 1px solid #9f9f9f !important; } body.getaya-checkout .delButton, body.getaya-checkout input[name="delButton"] { min-width: 0; min-height: 40px; padding: 8px 13px; background: #666; } body.getaya-checkout .upbutton, body.getaya-checkout .p-wc-upbutton { justify-content: flex-end; } /* STEP3の商品再掲と案内 */ body.getaya-checkout .getaya-checkout-summary { margin-bottom: 26px; } body.getaya-checkout .getaya-checkout-next-step-notice { margin: 0 0 30px; padding: 18px 22px; border-left: 4px solid #1d0072; background: #f7f5ff; } body.getaya-checkout .getaya-checkout-next-step-notice p { margin: 0; } body.getaya-checkout .getaya-checkout-next-step-notice p + p { margin-top: 6px; } body.getaya-checkout .getaya-checkout-confirm-lead { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 24px; text-align: center; } body.getaya-checkout .getaya-checkout-confirm-lead strong { font-size: 1.35rem; } /* 支払方法の特殊運用説明は常時表示する */ body.getaya-checkout .payment_method { line-height: 1.9; } @media (max-width: 767px) { body.getaya-checkout .siteContent, body.getaya-checkout .site-content { padding-top: 18px; } /* v1.9.3：ここで.main-section〜#info-confirmまで全部に幅指定を重ねて * いたため、後段の88%centering指定と合わさって二重に幅が縮んでいた。 * 幅の制御は.main-section（一番外側）だけに絞り、内側は100%にする。 */ body.getaya-checkout .mainSection, body.getaya-checkout .main-section { width: min(100% - 20px, 100%); } body.getaya-checkout .entry-body, body.getaya-checkout #inside-cart, body.getaya-checkout #customer-info, body.getaya-checkout #delivery-info, body.getaya-checkout #info-confirm { width: 100%; } /* 商品表をカードへ再構成 */ body.getaya-checkout #cart_table thead, body.getaya-checkout .p-wc-cart_table thead, body.getaya-checkout .getaya-checkout-summary__table thead { display: none; } body.getaya-checkout #cart_table, body.getaya-checkout #cart_table tbody, body.getaya-checkout .p-wc-cart_table, body.getaya-checkout .p-wc-cart_table tbody, body.getaya-checkout .getaya-checkout-summary__table, body.getaya-checkout .getaya-checkout-summary__table tbody { display: block; } body.getaya-checkout #cart_table tbody tr, body.getaya-checkout .p-wc-cart_table tbody tr, body.getaya-checkout .getaya-checkout-summary__table tbody tr { display: grid; grid-template-columns: 110px 1fr; margin: 0 0 16px; border: 1px solid #d8d8d8; background: #fff; } body.getaya-checkout #cart_table tbody td, body.getaya-checkout #cart_table tbody th, body.getaya-checkout .p-wc-cart_table tbody td, body.getaya-checkout .p-wc-cart_table tbody th, body.getaya-checkout .getaya-checkout-summary__table tbody td, body.getaya-checkout .getaya-checkout-summary__table tbody th { display: block; grid-column: 2; padding: 7px 12px; border: 0; text-align: left; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .p-wc-cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { grid-column: 1; grid-row: 1 / span 7; padding: 14px 8px; border-right: 1px solid #dedede; text-align: center; } body.getaya-checkout #cart_table tbody .num, body.getaya-checkout .p-wc-cart_table tbody .num, body.getaya-checkout .getaya-checkout-summary__table tbody .num { display: none; } body.getaya-checkout #cart_table tbody .productname, body.getaya-checkout .p-wc-cart_table tbody .productname, body.getaya-checkout .getaya-checkout-summary__table tbody .productname { padding-top: 15px; font-size: 1rem; font-weight: 700; } body.getaya-checkout #cart_table tbody .unitprice::before, body.getaya-checkout .p-wc-cart_table tbody .unitprice::before, body.getaya-checkout .getaya-checkout-summary__table tbody .unitprice::before { content: "単価："; font-weight: 600; } body.getaya-checkout #cart_table tbody .quantity::before, body.getaya-checkout .p-wc-cart_table tbody .quantity::before, body.getaya-checkout .getaya-checkout-summary__table tbody .quantity::before { content: "数量："; font-weight: 600; } body.getaya-checkout #cart_table tbody .subtotal::before, body.getaya-checkout .p-wc-cart_table tbody .subtotal::before, body.getaya-checkout .getaya-checkout-summary__table tbody .subtotal::before { content: "金額（税込）："; font-weight: 600; } body.getaya-checkout #cart_table tfoot, body.getaya-checkout .p-wc-cart_table tfoot, body.getaya-checkout .getaya-checkout-summary__table tfoot { display: table; width: 100%; } body.getaya-checkout .customer_form:not(#delivery_table), body.getaya-checkout .customer_form tbody, body.getaya-checkout .customer_form tr, body.getaya-checkout .customer_form th, body.getaya-checkout .customer_form td, body.getaya-checkout .p-wc-customer_form, body.getaya-checkout .p-wc-customer_form tbody, body.getaya-checkout .p-wc-customer_form tr, body.getaya-checkout .p-wc-customer_form th, body.getaya-checkout .p-wc-customer_form td { display: block; width: 100%; } /* v1.9.3：#delivery_tableは class="customer_form" を併せ持つため、 * 上の一般ルールの対象に含まれると、display:block等が意図せず効いてしまう * 可能性があった（原因は完全には特定できていないが、保険として除外する）。 * 常にdisplay:noneをデフォルトにし、JSが「別の配送先」選択時だけtableに * 変える。 */ body.getaya-checkout #delivery_table { display: none !important; } body.getaya-checkout .customer_form th, body.getaya-checkout .p-wc-customer_form th { padding-bottom: 7px; text-align: left; border-bottom: 0; } body.getaya-checkout .customer_form td, body.getaya-checkout .p-wc-customer_form td { padding-top: 7px; } body.getaya-checkout .send { flex-direction: column; } body.getaya-checkout input[type="submit"], body.getaya-checkout .send a, body.getaya-checkout .p-button { width: min(100%, 320px); min-width: 0; } body.getaya-checkout .getaya-checkout-next-step-notice { padding: 15px 16px; font-size: .9rem; } } /* ======================================================================== * Checkout UI v1.8.1 adjustments * ===================================================================== */ /* Cart table labels and proportions. */ body.getaya-checkout #cart_table thead th { color: #333 !important; background: #efefef !important; } body.getaya-checkout #cart_table th.stock, body.getaya-checkout #cart_table td.stock { display: none !important; } body.getaya-checkout #cart_table .thumbnail { width: 112px; padding: 6px !important; } body.getaya-checkout #cart_table .thumbnail img { width: 96px; height: 96px; object-fit: cover; } body.getaya-checkout #cart_table .productname { width: auto; font-size: 1rem; line-height: 1.65; white-space: normal; word-break: normal; overflow-wrap: anywhere; } body.getaya-checkout #cart_table .unitprice, body.getaya-checkout #cart_table .quantity, body.getaya-checkout #cart_table .subtotal { white-space: nowrap; /* v1.9.4：table-layout:autoでは、折り返し可能な商品名列より、 * 折り返し不可(nowrap)のこれらの列が優先的に幅を確保してしまう * ブラウザの標準的な挙動があり、STEP3で商品名列が単価等より狭く * なる原因になっていた。width:1%は「内容に必要な最小幅まで縮める」 * 古典的な指定で、残りの幅を商品名列に譲る。ブラウザで実機確認済み * （商品名列631px、単価等87〜128px程度まで改善）。 */ width: 1%; } /* Update button and spacing. */ body.getaya-checkout .upbutton { gap: 18px; margin: 0 0 22px; } body.getaya-checkout .upbutton input[name="upButton"] { min-width: 105px !important; min-height: 43px !important; padding: 8px 14px !important; } body.getaya-checkout #cart_table { margin-top: 8px; } /* Compact gray delete button; red on hover. */ body.getaya-checkout .delButton, body.getaya-checkout input[name^="delButton"] { min-width: 0 !important; min-height: 0 !important; padding: 7px 11px !important; font-size: .82rem !important; color: #fff !important; background: #777 !important; border-radius: 2px !important; } body.getaya-checkout .delButton:hover, body.getaya-checkout input[name^="delButton"]:hover { background: #c62828 !important; } /* Remove currency label and inherited orange rules. */ body.getaya-checkout .currency_code { display: none !important; } body.getaya-checkout #cart, body.getaya-checkout #delivery-info, body.getaya-checkout #info-confirm, body.getaya-checkout .send, body.getaya-checkout .getaya-checkout-summary, body.getaya-checkout .getaya-checkout-summary__table { border-top-color: transparent !important; border-bottom-color: transparent !important; } /* v1.9.4：.customer_formはこの一括ルールに含まれていたため、テーブル自体の * 外枠（上下）が消えてしまい、STEP2の入力欄の下端に線が出ていなかった。 * .customer_formはこの透明化の対象から除外する。 */ /* Bottom actions: equal button shapes. */ body.getaya-checkout #inside-cart > form > .send { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; gap: 20px; } body.getaya-checkout #inside-cart > form > .send input, body.getaya-checkout #inside-cart > form > .send a { width: 100%; min-width: 0; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; } /* STEP3 presentation. */ body.getaya-checkout .getaya-checkout-section-title { margin: 0 0 18px; font-size: 1.55rem; /* v1.9.8：Welcart本体のusces_cart.cssに#info-confirm h2{color:白; * background:オレンジ;}という指定があり、背景はtransparent * !importantで打ち消していたが、文字色（白）の方を打ち消し忘れて * いたため、白背景に白文字で見えなくなっていた。 */ color: #222 !important; background: transparent !important; border: 0 !important; } body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td, body.getaya-checkout #delivery-info .customer_form th, body.getaya-checkout #delivery-info .customer_form td { font-size: 1rem; line-height: 1.7; } body.getaya-checkout .getaya-checkout-summary__table thead th { color: #333 !important; background: #efefef !important; } body.getaya-checkout #delivery-info .customer_form th { background: #f4f4f4 !important; } /* WCEX Coupon: do not show the "available coupons" pop-up button. */ body.getaya-checkout #show_coupon, body.getaya-checkout #show_coupon_dialog { display: none !important; } @media (max-width: 767px) { body.getaya-checkout #inside-cart > form > .send { grid-template-columns: 1fr; gap: 10px; } body.getaya-checkout #cart_table .thumbnail img { width: 96px; height: 96px; } } /* ======================================================================== * Checkout UI v1.8.2 — dedicated road, compact cart controls and final flow * ===================================================================== */ /* Welcart's built-in navigator is intentionally replaced by Core markup. */ body.getaya-checkout .usccart_navi { display: none !important; } /* Compact quantity-update controls. */ body.getaya-checkout .upbutton { margin-bottom: 30px !important; } body.getaya-checkout .upbutton input[name="upButton"] { min-width: 84px !important; width: auto !important; min-height: 35px !important; padding: 6px 11px !important; font-size: .82rem !important; } body.getaya-checkout #cart_table { margin-top: 14px !important; } /* Cart action buttons remain in one row; primary action is on the right. */ body.getaya-checkout #inside-cart > form > .send { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 18px; } body.getaya-checkout #inside-cart > form > .send > * { flex: 0 1 250px; width: 250px !important; } /* STEP 3 recap uses the STEP 1 visual grammar and has no action column. */ body.getaya-checkout .getaya-checkout-summary__table .action { display: none !important; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail { width: 112px; padding: 6px !important; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail img { width: 96px; height: 96px; object-fit: cover; } body.getaya-checkout .getaya-checkout-summary__table .productname { font-size: 1rem; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; } /* STEP 3 guidance: quiet, right-aligned, with its accent on the right. */ body.getaya-checkout .getaya-checkout-next-step-notice { margin: 0 0 34px; padding: 15px 18px; border: 0 !important; border-right: 4px solid #1d0072 !important; background: #f7f5ff; font-size: .88rem; font-weight: 700; line-height: 1.7; text-align: right; } /* STEP 4 spacing and hierarchy. */ body.getaya-checkout--confirm #cart { margin-bottom: 60px !important; } body.getaya-checkout .getaya-checkout-confirm-discount-notice { margin: 0 0 50px; font-size: 1rem; line-height: 1.8; text-align: center; } body.getaya-checkout--confirm #point_table { margin-bottom: 40px !important; } body.getaya-checkout--confirm #coupon_table { margin-bottom: 70px !important; } body.getaya-checkout .getaya-checkout-final-check { margin: 0 0 50px; font-size: 1.2rem; text-align: center; } body.getaya-checkout #info-confirm .customer_form .ttl h3, body.getaya-checkout #info-confirm .customer_form h3 { margin: 0 !important; color: #111 !important; font-size: 1.15rem !important; text-align: left !important; background: transparent !important; border: 0 !important; } body.getaya-checkout #info-confirm .customer_form th, body.getaya-checkout #info-confirm .customer_form td { font-size: 1rem !important; line-height: 1.7 !important; } @media (max-width: 767px) { body.getaya-checkout .upbutton { justify-content: flex-end !important; gap: 8px !important; margin-bottom: 18px !important; font-size: .78rem; } body.getaya-checkout .upbutton input[name="upButton"] { min-width: 72px !important; min-height: 33px !important; padding: 5px 8px !important; font-size: .76rem !important; } /* 40/60 mobile product card. */ body.getaya-checkout #cart_table tbody tr, body.getaya-checkout .getaya-checkout-summary__table tbody tr { grid-template-columns: 40% 60% !important; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { padding: 0 !important; overflow: hidden; } body.getaya-checkout #cart_table tbody .thumbnail a, body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { display: block; width: 100% !important; height: 100% !important; min-height: 210px; object-fit: cover; } body.getaya-checkout #cart_table tbody .quantity { display: flex !important; align-items: center; gap: 7px; } body.getaya-checkout #cart_table tbody .quantity input.quantity { width: 58px !important; } body.getaya-checkout #cart_table tbody .action { position: absolute; right: 10px; bottom: 54px; padding: 0 !important; } body.getaya-checkout #cart_table tbody tr { position: relative; } body.getaya-checkout .delButton, body.getaya-checkout input[name^="delButton"] { padding: 5px 8px !important; font-size: .72rem !important; } body.getaya-checkout #inside-cart > form > .send { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px; } body.getaya-checkout #inside-cart > form > .send > * { flex: 1 1 calc(50% - 5px); width: auto !important; min-width: 0 !important; } /* If wrapping becomes unavoidable, the primary Next button is first. */ body.getaya-checkout #inside-cart > form > .send .to_customer_button, body.getaya-checkout #inside-cart > form > .send input[name="customerinfo"] { order: -1; } /* v1.9.3：ここにあった「STEP3だけtable-cell表示に戻す」ブロックは、 * 全STEP共通の縦積み化ルール（display:block）と真っ向から矛盾しており、 * 配送先ラベルと◎の上下位置がズレる直接原因だったため削除した。 * STEP3も他STEPと同じ縦積みレイアウトに統一する。 */ body.getaya-checkout .getaya-checkout-next-step-notice { font-size: .8rem; text-align: right; } body.getaya-checkout .getaya-checkout-confirm-discount-notice { margin-bottom: 38px; } body.getaya-checkout--confirm #point_table { margin-bottom: 32px !important; } body.getaya-checkout--confirm #coupon_table { margin-bottom: 52px !important; } body.getaya-checkout .getaya-checkout-final-check { margin-bottom: 36px; } } /* v1.8.2 final selector corrections. */ body.getaya-checkout #inside-cart > form > .send .to_customerinfo_button { order: 2; } body.getaya-checkout #inside-cart > form > .send .continue_shopping_button { order: 1; } @media (max-width: 767px) { body.getaya-checkout #inside-cart > form > .send .to_customerinfo_button { order: -2; } body.getaya-checkout #inside-cart > form > .send .continue_shopping_button { order: -1; } body.getaya-checkout #cart_table tbody td.action.is-moved-mobile { display: none !important; } body.getaya-checkout #cart_table tbody .quantity .getaya-mobile-delete { margin-left: auto; flex: 0 0 auto; } } /* ======================================================================== * Checkout UI v1.8.3 — connected weighted road and calmer vertical rhythm * ===================================================================== */ /* Matching typography for the two STEP 1 actions. */ body.getaya-checkout #inside-cart > form > .send input, body.getaya-checkout #inside-cart > form > .send a { font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; } /* STEP 2 labels should not inherit Welcart's undersized defaults. */ body.getaya-checkout--customer .customer_form th, body.getaya-checkout--customer .customer_form td, body.getaya-checkout--customer .customer_form label { font-size: 1rem !important; line-height: 1.65 !important; } body.getaya-checkout--customer .customer_form th, body.getaya-checkout--customer .customer_form td { padding-top: 13px !important; padding-bottom: 13px !important; } /* STEP 3 recap matches STEP 1 and has no phantom action column. */ body.getaya-checkout .getaya-checkout-summary { margin-bottom: 56px; } body.getaya-checkout .getaya-checkout-summary__table { table-layout: auto; width: 100%; } body.getaya-checkout .getaya-checkout-summary__table .num { display: none; } body.getaya-checkout .getaya-checkout-summary__table .action { display: none; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail { width: 112px; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail img { width: 96px; height: 96px; object-fit: cover; } body.getaya-checkout .getaya-checkout-summary__table .productname { width: auto; white-space: normal; word-break: normal; overflow-wrap: anywhere; } body.getaya-checkout .getaya-checkout-summary__table .unitprice, body.getaya-checkout .getaya-checkout-summary__table .quantity, body.getaya-checkout .getaya-checkout-summary__table .subtotal { white-space: nowrap; } body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td { padding: 14px 10px !important; font-size: 1rem !important; line-height: 1.65 !important; } body.getaya-checkout .getaya-checkout-summary__table tfoot th, body.getaya-checkout .getaya-checkout-summary__table tfoot td { padding-top: 13px !important; padding-bottom: 13px !important; } body.getaya-checkout .getaya-checkout-next-step-notice { margin-top: 0; margin-bottom: 54px; padding-top: 18px; padding-bottom: 18px; } /* STEP 1/3/4共通：末尾の空セルを消し、商品名エリアを広げてリズムを整える。 * v1.9.2で「STEP4限定」からid="cart_table"を使う全STEP共通の指定へ変更 * （STEP3をid="cart_table"に統一したのに、肝心のスタイルがSTEP4限定の * ままだったため、STEP3に反映されていなかった）。 */ body.getaya-checkout #cart_table th:last-child:empty, body.getaya-checkout #cart_table td:last-child:empty { display: none !important; } /* v1.9.3：.action列の非表示は、以前ここでメディアクエリの外（全画面幅）に * 書かれてしまっており、PCでも削除ボタンの列ごと消えていた。 * スマホ専用に限定する（下の@media (max-width:767px)ブロックへ移動）。 */ body.getaya-checkout #cart_table .productname { width: auto !important; } body.getaya-checkout #cart_table th, body.getaya-checkout #cart_table td, body.getaya-checkout--confirm #info-confirm th, body.getaya-checkout--confirm #info-confirm td { padding: 13px 12px !important; font-size: 1rem !important; line-height: 1.7 !important; } body.getaya-checkout--confirm #info-confirm .ttl, body.getaya-checkout--confirm #info-confirm .ttl h3, body.getaya-checkout--confirm #info-confirm h3 { color: #111 !important; text-align: left !important; } body.getaya-checkout--confirm #point_table, body.getaya-checkout--confirm table.point_table, body.getaya-checkout--confirm .point_table { margin-top: 0 !important; margin-bottom: 40px !important; } body.getaya-checkout--confirm #coupon_table, body.getaya-checkout--confirm table.coupon_table, body.getaya-checkout--confirm .coupon_table, body.getaya-checkout--confirm #coupon_form { margin-top: 0 !important; margin-bottom: 70px !important; } @media (max-width: 767px) { body.getaya-checkout .getaya-row-update { min-height: 28px !important; margin-left: 4px !important; padding: 3px 6px !important; font-size: .68rem !important; } body.getaya-checkout--customer .customer_form th, body.getaya-checkout--customer .customer_form td, body.getaya-checkout--customer .customer_form label { font-size: .92rem !important; } body.getaya-checkout .getaya-checkout-summary { margin-bottom: 42px; } body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td { font-size: .92rem !important; line-height: 1.65 !important; } body.getaya-checkout .getaya-checkout-next-step-notice { margin-bottom: 42px; } } /* ===================================================================== * Checkout UI v1.8.4 — authoritative overrides * ===================================================================== */ body.getaya-checkout .usccart_navi, body.getaya-checkout .p-wc-cart_navi { display: none !important; } body.getaya-checkout .getaya-checkout-road { width: 100%; margin: 0 0 19px; overflow: visible; } body.getaya-checkout .getaya-checkout-road__list { display: flex !important; flex-flow: row nowrap !important; align-items: stretch; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.getaya-checkout .getaya-checkout-road__step { position: relative; display: flex !important; flex: 1 1 0 !important; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0 !important; min-height: 52px; margin: 0 !important; padding: 6px 10px; color: #222; font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: normal; overflow-wrap: break-word; background: #efefef; isolation: isolate; } /* v1.9.0：各ステップの右辺にだけ矢印（〉）を1つ、要素自身のclip-pathで * 作る単一図形方式に変更。以前の「白いくさびを::beforeで差し込む」方式は * 右辺に矢印を残せず単純な長方形に見えていたため、作り直した。 */ /* v1.9.5：以前は「最後のタブ（次に進む先がない）には矢印を付けない」という * 設計にしていたが、ご要望は「全タブ同じ形状で統一したい」というデザイン上の * 意図だったため、最後のタブにも同じ矢印形状を適用する。 */ body.getaya-checkout .getaya-checkout-road__step { margin-right: 14px !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); } body.getaya-checkout .getaya-checkout-road__step.is-current { flex: 1.7 1 0 !important; z-index: 8; padding: 9px 10px; color: #fff; font-size: .96rem; background: var(--vk-color-primary, #23106d); } body.getaya-checkout .getaya-checkout-road__icon { display: none; flex: 0 0 auto; width: 34px; height: 28px; margin-right: 5px; background: url("../images/geta-step-light.png") center / contain no-repeat; filter: brightness(0) invert(1); } body.getaya-checkout .getaya-checkout-road__step.is-current .getaya-checkout-road__icon { display: block; width: 40px; height: 32px; } body.getaya-checkout .getaya-checkout-road__label { position: relative; z-index: 6; line-height: 1.25; } /* STEP 3 and STEP 4 product tables share the same visual grammar. */ body.getaya-checkout .getaya-checkout-summary__table, body.getaya-checkout--confirm #cart_table, body.getaya-checkout--confirm .p-wc-cart_table { width: 100%; border-collapse: collapse; } body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td, body.getaya-checkout--confirm #cart_table th, body.getaya-checkout--confirm #cart_table td, body.getaya-checkout--confirm .p-wc-cart_table th, body.getaya-checkout--confirm .p-wc-cart_table td { box-sizing: border-box; padding: 12px 10px; border: 1px solid #ddd; vertical-align: middle; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail, body.getaya-checkout--confirm #cart_table .thumbnail, body.getaya-checkout--confirm .p-wc-cart_table .thumbnail { width: 112px; padding: 6px !important; } body.getaya-checkout .getaya-checkout-summary__table .thumbnail img, body.getaya-checkout--confirm #cart_table .thumbnail img, body.getaya-checkout--confirm .p-wc-cart_table .thumbnail img { display: block; width: 96px; height: 96px; object-fit: cover; } /* STEP 1 quantity update must remain fully visible. */ body.getaya-checkout .upbutton { display: flex !important; flex-wrap: wrap !important; align-items: center; justify-content: flex-end; gap: 8px; overflow: visible !important; } body.getaya-checkout .upbutton input[name="upButton"], body.getaya-checkout .getaya-row-update { box-sizing: border-box; width: auto !important; max-width: 100%; min-width: 72px !important; min-height: 34px; padding: 6px 10px !important; white-space: nowrap; } /* STEP 4: order table -> points -> coupon -> final check -> customer data. */ body.getaya-checkout--confirm #cart, body.getaya-checkout--confirm .p-wc-cart_table { margin-bottom: 28px !important; } body.getaya-checkout .getaya-checkout-confirm-discount-notice { margin: 0 0 44px; font-size: .96rem; line-height: 1.8; text-align: center; } body.getaya-checkout .getaya-checkout-point, body.getaya-checkout--confirm #coupon_table, body.getaya-checkout--confirm form#use_coupon { margin-bottom: 54px !important; } body.getaya-checkout .getaya-checkout-final-check { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 52px; font-size: 1.2rem; line-height: 1.5; text-align: center; } body.getaya-checkout .getaya-checkout-final-check__icon { display: block; flex: 0 0 auto; width: 70px; height: 44px; background: url("../images/geta-final.png") center / contain no-repeat; } @media (max-width: 767px) { body.getaya-checkout .getaya-checkout-road { margin-bottom: 14px; overflow: visible; } body.getaya-checkout .getaya-checkout-road__list { flex-wrap: nowrap !important; } body.getaya-checkout .getaya-checkout-road__step { flex: 1 1 0 !important; min-width: 0 !important; min-height: 46px; padding: 4px 2px; font-size: clamp(.56rem, 2.4vw, .68rem); white-space: normal; overflow-wrap: break-word; text-align: center; } body.getaya-checkout .getaya-checkout-road__step:not(:last-child) { margin-right: 7px !important; } body.getaya-checkout .getaya-checkout-road__step + .getaya-checkout-road__step::before { left: -7px; width: 8px; clip-path: polygon(0 0, 100% 50%, 0 100%, 3px 100%, calc(100% - 3px) 50%, 3px 0); } body.getaya-checkout .getaya-checkout-road__step.is-current { flex: 1.6 1 0 !important; padding: 7px 2px; font-size: clamp(.68rem, 2.9vw, .84rem); } body.getaya-checkout .getaya-checkout-road__icon { width: 18px; height: 20px; margin-right: 2px; } body.getaya-checkout .getaya-checkout-road__step.is-current .getaya-checkout-road__icon { width: 24px; height: 26px; } body.getaya-checkout .upbutton { width: 100% !important; padding-right: 2px; } body.getaya-checkout .upbutton input[name="upButton"], body.getaya-checkout .getaya-row-update { min-width: 64px !important; padding: 5px 7px !important; font-size: .74rem !important; } body.getaya-checkout .getaya-checkout-final-check { gap: 8px; font-size: 1.02rem; } body.getaya-checkout .getaya-checkout-final-check__icon { width: 54px; height: 36px; } } /* ======================================================================== * Checkout UI v1.8.5 — 購入フローUI完成版 * ===================================================================== */ /* ---- 氏名欄：姓と名を同じ幅で並べる（PC・スマホ共通） ---- */ body.getaya-checkout .customer_form td.name_td, body.getaya-checkout .p-wc-customer_form td.name_td { display: inline-block; box-sizing: border-box; width: 50%; vertical-align: top; } body.getaya-checkout .customer_form td.name_td input, body.getaya-checkout .p-wc-customer_form td.name_td input { width: 100%; box-sizing: border-box; } body.getaya-checkout .customer_form td.name_td .member_name, body.getaya-checkout .p-wc-customer_form td.name_td .member_name { display: block; margin-bottom: 4px; font-size: .85em; color: #555; } /* ---- 住所・電話番号の入力例テキスト：入力欄の下に小さく表示 ---- */ body.getaya-checkout .getaya-field-example { display: block; margin-top: 4px; color: #888; font-size: .8em; line-height: 1.4; } /* ---- 市区町村欄・番地欄：入力欄を欄いっぱいに ---- */ body.getaya-checkout .customer_form #address1_row input, body.getaya-checkout .customer_form #address2_row input, body.getaya-checkout .customer_form #address3_row input, body.getaya-checkout .p-wc-customer_form #address1_row input, body.getaya-checkout .p-wc-customer_form #address2_row input, body.getaya-checkout .p-wc-customer_form #address3_row input { box-sizing: border-box; width: 100%; max-width: 420px; } /* ---- 郵便番号検索ボタン：狭い幅では入力欄の下へ折り返す ---- */ body.getaya-checkout .customer_form #zipcode_row td, body.getaya-checkout .p-wc-customer_form #zipcode_row td { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } body.getaya-checkout .customer_form #zipcode_row input#zipcode, body.getaya-checkout .p-wc-customer_form #zipcode_row input#zipcode { width: 10em; max-width: 100%; } body.getaya-checkout .customer_form #zipcode_row .getaya-field-example, body.getaya-checkout .p-wc-customer_form #zipcode_row .getaya-field-example { width: 100%; margin-top: 0; } /* ---- 支払方法：
ラジオ+名称
説明文
を * 左カラムへ押し込めず、常に欄いっぱいの縦積みで表示する ---- */ body.getaya-checkout .customer_form dl, body.getaya-checkout .p-wc-customer_form dl { display: block; margin: 0; width: 100%; } body.getaya-checkout .customer_form dl dt, body.getaya-checkout .p-wc-customer_form dl dt { display: block; width: 100%; margin: 0; padding: 14px 0 6px; font-weight: 700; } body.getaya-checkout .customer_form dl dt label, body.getaya-checkout .p-wc-customer_form dl dt label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; } body.getaya-checkout .customer_form dl dt input[type="radio"], body.getaya-checkout .p-wc-customer_form dl dt input[type="radio"] { flex: 0 0 auto; margin-top: 3px; } body.getaya-checkout .customer_form dl dd, body.getaya-checkout .p-wc-customer_form dl dd { display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 0 0 14px 26px; border-bottom: 1px solid #e6e6e6; color: #555; font-size: .92rem; line-height: 1.7; } body.getaya-checkout .customer_form dl dt:last-of-type + dd, body.getaya-checkout .p-wc-customer_form dl dt:last-of-type + dd { border-bottom: 0; } /* ---- STEP3/STEP4 商品表：画像は必ずトリミングなし・縦横比維持 ---- */ body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .p-wc-cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { display: block; width: 100%; height: auto; max-width: 96px; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; margin: 0 auto; align-self: start; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .p-wc-cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { align-self: start; } /* ---- STEP3の商品表をSTEP4相当のデザインへ統一（PC） ---- */ body.getaya-checkout .getaya-checkout-summary__table th, body.getaya-checkout .getaya-checkout-summary__table td, body.getaya-checkout #cart_table th, body.getaya-checkout #cart_table td { padding: 14px 12px; border-bottom: 1px solid #e3e3e3; vertical-align: middle; } body.getaya-checkout .getaya-checkout-summary__table thead th, body.getaya-checkout #cart_table thead th { background: #efefef; color: #333; font-weight: 700; text-align: center; } /* ---- ポイント欄・クーポン欄：v1.9.5 幅を70%→85%に拡大し、 * 「※商品価格の20%が上限です」が1行に収まるようにする ---- */ body.getaya-checkout .getaya-checkout-point, body.getaya-checkout--confirm form#use_coupon { box-sizing: border-box; width: 85%; margin-left: auto; margin-right: auto; } /* v1.9.9：商品表の下に50pxの余白を追加する。会員の場合は最初に来る * ポイント欄の上に、非会員の場合は最初に来るクーポン欄の上に付く。 * ポイント欄の直後に続くクーポン欄には、二重に余白がつかないよう * margin-topを打ち消す。 */ body.getaya-checkout .getaya-checkout-point, body.getaya-checkout--confirm form#use_coupon { margin-top: 50px; } body.getaya-checkout .getaya-checkout-point + form#use_coupon { margin-top: 0; } body.getaya-checkout--confirm #coupon_table { margin: 0 !important; border: 0 !important; } @media (max-width: 991px) { body.getaya-checkout .getaya-checkout-point, body.getaya-checkout--confirm form#use_coupon { width: 90%; } } body.getaya-checkout .getaya-point-alert { white-space: nowrap; } body.getaya-checkout .gcp-row { justify-content: center; } body.getaya-checkout .gcp-label { text-align: right; } body.getaya-checkout .gcp-value { text-align: left; } @media (max-width: 767px) { /* ---- STEP2：ラベル→入力欄の縦積み、ラベルは左寄せ ---- */ body.getaya-checkout--customer .customer_form, body.getaya-checkout--customer .customer_form tbody, body.getaya-checkout--customer .p-wc-customer_form, body.getaya-checkout--customer .p-wc-customer_form tbody { display: block !important; width: 100% !important; } body.getaya-checkout--customer .customer_form tr, body.getaya-checkout--customer .p-wc-customer_form tr { display: flex !important; flex-direction: column !important; width: 100% !important; margin-bottom: 4px; } body.getaya-checkout--customer .customer_form th, body.getaya-checkout--customer .customer_form td, body.getaya-checkout--customer .p-wc-customer_form th, body.getaya-checkout--customer .p-wc-customer_form td { display: block !important; width: 100% !important; box-sizing: border-box; text-align: left !important; border: 0 !important; } body.getaya-checkout--customer .customer_form th, body.getaya-checkout--customer .p-wc-customer_form th { padding: 12px 0 4px !important; text-align: left !important; } body.getaya-checkout--customer .customer_form td, body.getaya-checkout--customer .p-wc-customer_form td { padding: 0 0 8px !important; } body.getaya-checkout--customer .customer_form td.name_td, body.getaya-checkout--customer .p-wc-customer_form td.name_td { width: 50% !important; display: inline-block !important; } /* ---- 市区町村欄・番地欄：スマホでは100%幅 ---- */ body.getaya-checkout .customer_form #address1_row input, body.getaya-checkout .customer_form #address2_row input, body.getaya-checkout .customer_form #address3_row input, body.getaya-checkout .p-wc-customer_form #address1_row input, body.getaya-checkout .p-wc-customer_form #address2_row input, body.getaya-checkout .p-wc-customer_form #address3_row input { max-width: 100%; } /* ---- 郵便番号検索ボタン：改行OK ---- */ body.getaya-checkout .customer_form #zipcode_row input.search-zipcode, body.getaya-checkout .p-wc-customer_form #zipcode_row input.search-zipcode { flex: 0 0 auto; } /* ---- STEP3：商品表・進行バーのレイアウト補強 ---- */ body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img, body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .p-wc-cart_table tbody .thumbnail img { max-width: 78px; } /* ---- 支払方法：モバイルでは説明文をカラムに押し込めない ---- */ body.getaya-checkout .customer_form dl dd, body.getaya-checkout .p-wc-customer_form dl dd { padding-left: 0; font-size: .86rem; } /* ---- ポイント欄・クーポン欄：スマホでは余白を詰める ---- */ body.getaya-checkout .getaya-checkout-point, body.getaya-checkout--confirm form#use_coupon { padding: 16px 14px; } } /* ======================================================================== * Checkout UI v1.8.6 — カートSTEP完成版 * ===================================================================== */ /* ---- STEP1/STEP4 商品表：No.列・在庫列は独立した列として持たない ---- */ body.getaya-checkout #cart_table .num, body.getaya-checkout #cart_table .stock, body.getaya-checkout #confirm_table .num, body.getaya-checkout .getaya-checkout-summary__table .num { display: none !important; } /* ---- STEP1 商品表：写真を拡大 ---- */ body.getaya-checkout #cart_table tbody .thumbnail img { max-width: 115px; } @media (max-width: 767px) { body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { max-width: 100%; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { grid-column: 1; grid-row: 1; width: 100%; padding: 0 0 10px; } } /* ---- STEP1 上部の一括更新案内：ボタンは隠し、案内文だけ太字で表示 ---- */ body.getaya-checkout .getaya-hidden-upbutton { display: none !important; } body.getaya-checkout .getaya-checkout-cart-notice { margin: 12px 0; font-size: 1rem; } @media (max-width: 767px) { body.getaya-checkout .getaya-checkout-cart-notice { font-size: 1.05rem; } } /* ---- STEP1 行ごとの「変更」ボタン：数量欄の右に同じ行で配置 ---- */ body.getaya-checkout #cart_table th.quantity, body.getaya-checkout #cart_table td.quantity { min-width: 128px; } body.getaya-checkout #cart_table td.quantity { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; white-space: normal; } body.getaya-checkout .getaya-row-update { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--vk-color-primary, #23106d); border-radius: 4px; background: var(--vk-color-primary, #23106d); color: #fff; font-size: .72rem; cursor: pointer; } /* ---- STEP1 削除ボタン（PC）：一番右の専用カラムに赤い×アイコン、 * ヘッダーには「削除」ラベル ---- * 重要：は「置換要素」のためbefore/after疑似要素が描画されない * ブラウザがほとんどで、以前の実装（inputに直接×を疑似要素で描く方式）は * 実機で反映されず、素のsubmitボタン（灰色の四角）のまま見えていた。 * 見た目用の×は親のspan（.getaya-row-delete）側に描き、実際のinputは * 透明にしてその上へ重ねる方式に変更。 */ body.getaya-checkout #cart_table thead th.action { font-size: 0; } body.getaya-checkout #cart_table thead th.action::before { content: "削除"; font-size: .82rem; } body.getaya-checkout #cart_table tfoot th.action { font-size: 0; } body.getaya-checkout #cart_table td.action { text-align: center; } /* v1.9.4：.action列（削除ボタン）は、STEP1（実際に削除ボタンが入る * カートページ）だけPCでも表示する。STEP3・4は読み取り専用の確認表で * 中身が空のため、PCでも常に非表示のままにする（v1.9.3で.action列の * PC非表示を一律解除した際、STEP4のPC表示にも空欄の列が出てしまっていた * ため修正）。 */ body.getaya-checkout--delivery #cart_table th.action, body.getaya-checkout--delivery #cart_table td.action, body.getaya-checkout--confirm #cart_table th.action, body.getaya-checkout--confirm #cart_table td.action { display: none !important; } body.getaya-checkout .getaya-row-delete { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #d32f2f; vertical-align: middle; } body.getaya-checkout .getaya-row-delete::before, body.getaya-checkout .getaya-row-delete::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; background: #fff; pointer-events: none; } body.getaya-checkout .getaya-row-delete::before { transform: translate(-50%, -50%) rotate(45deg); } body.getaya-checkout .getaya-row-delete::after { transform: translate(-50%, -50%) rotate(-45deg); } body.getaya-checkout .getaya-row-delete input.delButton, body.getaya-checkout .getaya-row-delete input[name^="delButton"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; } /* ---- スマホでは、数量□［変更］×を同じ行にまとめて表示する * （JS側で.getaya-row-deleteを数量セルへ移動する） ---- */ @media (max-width: 767px) { body.getaya-checkout #cart_table th.action, body.getaya-checkout #cart_table td.action { display: none !important; } body.getaya-checkout #cart_table th.quantity, body.getaya-checkout #cart_table td.quantity { min-width: 0; } } /* ---- STEP2/STEP3 フリガナ欄のズレ修正：姓名と同じ均等割りを適用 ---- */ body.getaya-checkout .customer_form #furikana_row td, body.getaya-checkout .p-wc-customer_form #furikana_row td { display: inline-block; box-sizing: border-box; width: 50%; vertical-align: top; } body.getaya-checkout .customer_form #furikana_row td input, body.getaya-checkout .p-wc-customer_form #furikana_row td input { width: 100%; box-sizing: border-box; } body.getaya-checkout .customer_form #furikana_row .member_furigana, body.getaya-checkout .p-wc-customer_form #furikana_row .member_furigana { display: block; margin-bottom: 4px; font-size: .85em; color: #555; } @media (max-width: 767px) { body.getaya-checkout--customer .customer_form #furikana_row td, body.getaya-checkout--delivery .customer_form #furikana_row td { width: 50% !important; display: inline-block !important; } } /* ---- ビル名・FAX番号は非表示（必須項目ではないため） ---- */ body.getaya-checkout #address3_row, body.getaya-checkout #fax_row { display: none !important; } /* ---- メールアドレスの注意書き ---- */ body.getaya-checkout .getaya-checkout-mail-caution { margin: 6px 0 0; color: #c00; font-size: .82rem; } /* ---- 支払方法：ラベル（クレジットカード等）はラベル並みの大きさへ、 * 説明文は現状のサイズを維持 ---- */ body.getaya-checkout .customer_form dl dt label, body.getaya-checkout .p-wc-customer_form dl dt label { font-size: 1rem; font-weight: 700; } /* ---- オプション項目（メルマガ・納品書等の質問）：ラベル55% / 回答45%、 * 選択肢はラベル途中で折り返さず、選択肢ごと改行 ---- */ body.getaya-checkout .customer_form tr:has(.iopt_label) th, body.getaya-checkout .p-wc-customer_form tr:has(.iopt_label) th { width: 55%; } body.getaya-checkout .customer_form tr:has(.iopt_label) td, body.getaya-checkout .p-wc-customer_form tr:has(.iopt_label) td { width: 45%; } body.getaya-checkout .iopt_label { display: inline-block; white-space: nowrap; margin: 2px 1em 2px 0; } @media (max-width: 767px) { body.getaya-checkout--customer .customer_form tr:has(.iopt_label) th, body.getaya-checkout--customer .customer_form tr:has(.iopt_label) td { width: 100% !important; } } /* ---- ポイント欄・クーポン欄：v1.8.7 平べったいレイアウト、 * ラベル・入力欄・ボタンを横並びに固定し、ボタンは入力欄のすぐ右に置く ---- */ body.getaya-checkout .getaya-checkout-point__table, body.getaya-checkout .getaya-checkout-coupon__table { width: 100%; } /* v1.9.3：Welcart本体のusces_cart.css（#cart #point_table{width:350px}）と * WCEX Couponのcp_front.css（#coupon_table{width:350px}）が、私たちが * 流用した同じIDに対してIDセレクタ2つ分の強さで効いており、上のクラス * セレクタでは勝てていなかった。同等以上の詳細度＋!importantで確実に * 上書きする。 */ body.getaya-checkout #cart #point_table, body.getaya-checkout #coupon_table { width: 100% !important; margin: 0 !important; } body.getaya-checkout .gcp-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; } body.getaya-checkout .gcp-label { flex: 0 0 150px; font-weight: 700; color: #333; } body.getaya-checkout .gcp-value { flex: 0 0 auto; } body.getaya-checkout .gcp-value input[type="number"], body.getaya-checkout .gcp-value input[type="text"] { width: auto; max-width: 140px; margin: 0; } body.getaya-checkout .gcp-action:empty { display: none; } body.getaya-checkout .gcp-action { flex: 0 0 auto; margin-left: 4px; } body.getaya-checkout .gcp-action input[type="submit"] { padding: 9px 20px; border: 0; border-radius: 4px; background: var(--vk-color-primary, #23106d); color: #fff; cursor: pointer; } @media (max-width: 480px) { body.getaya-checkout .gcp-row { row-gap: 4px; } body.getaya-checkout .gcp-action { flex-basis: 100%; margin-left: 0; text-align: center; } body.getaya-checkout .gcp-action input[type="submit"] { width: 100%; } } body.getaya-checkout .getaya-point-alert { display: block; margin-top: 2px; color: #c00; font-weight: 700; font-size: .82rem; } body.getaya-checkout .getaya-checkout-coupon__error { margin: 10px 0 0; color: #c00; font-weight: 700; text-align: center; } body.getaya-checkout--confirm form#use_coupon input[name="reset_coupon"] { display: none; } /* ---- STEP4 お客様情報／配送先情報／配送・支払方法など：Core再構築版の表 ---- */ body.getaya-checkout .getaya-checkout-confirm-table { width: 100%; border-collapse: collapse; } body.getaya-checkout .getaya-checkout-confirm-table th, body.getaya-checkout .getaya-checkout-confirm-table td { width: 50%; box-sizing: border-box; padding: 10px 14px; border-bottom: 1px solid #e6e6e6; text-align: left; vertical-align: top; } body.getaya-checkout .getaya-checkout-confirm-table tr.ttl th, body.getaya-checkout .getaya-checkout-confirm-table tr.ttl td { width: 100%; border-bottom: 2px solid #ccc; } @media (max-width: 767px) { body.getaya-checkout .getaya-checkout-confirm-table tr { display: flex; flex-direction: column; } body.getaya-checkout .getaya-checkout-confirm-table th, body.getaya-checkout .getaya-checkout-confirm-table td { display: block !important; width: 100% !important; text-align: left !important; } /* v1.9.3：ラベル行はグレー地・太字にし、ラベル・回答とも左詰めに統一 * （STEP3の入力フォームと近い見た目に合わせる）。 */ body.getaya-checkout .getaya-checkout-confirm-table th { background: #f0f0f0; font-weight: 700; padding: 8px 10px !important; } body.getaya-checkout .getaya-checkout-confirm-table td { padding: 8px 10px 16px !important; } } /* ======================================================================== * Checkout UI v1.8.7 * ===================================================================== */ /* ---- JSによる非表示はこのクラスで統一する（!importantで、モバイルの * customer_form th/td強制block化に負けないようにする） * v1.9.6：STEP2限定の * 「.customer_form tr { display:flex !important; }」ルールの方が * 詳細度がわずかに高く(tr要素セレクタの分)、こちらが負けていたため、 * trセレクタを含む形も追加して確実に勝たせる。 ---- */ body.getaya-checkout .getaya-js-hidden, body.getaya-checkout tr.getaya-js-hidden, body.getaya-checkout--customer .customer_form tr.getaya-js-hidden { display: none !important; } /* ---- STEP1/STEP3/STEP4 商品写真をさらに拡大 ---- */ body.getaya-checkout #cart_table .thumbnail, body.getaya-checkout .getaya-checkout-summary__table .thumbnail { width: 135px; } body.getaya-checkout #cart_table .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table .thumbnail img { width: 116px; height: 116px; } @media (max-width: 767px) { body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { width: 100%; } body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { width: 100%; height: auto; max-width: 100%; } } /* ---- スマホ商品カード：右カラム（商品名〜金額）の余白を詰めて上から並べる ---- */ @media (max-width: 767px) { body.getaya-checkout #cart_table tbody tr, body.getaya-checkout .getaya-checkout-summary__table tbody tr { display: grid !important; grid-template-columns: 38% 62%; grid-template-rows: auto; align-items: start; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { grid-column: 1; grid-row: 1 / -1; align-self: start; } body.getaya-checkout #cart_table tbody td:not(.thumbnail), body.getaya-checkout .getaya-checkout-summary__table tbody td:not(.thumbnail) { grid-column: 2; padding-top: 4px; padding-bottom: 4px; } body.getaya-checkout #cart_table tbody .productname, body.getaya-checkout .getaya-checkout-summary__table tbody .productname { padding-top: 10px; } body.getaya-checkout #cart_table tbody .quantity { padding-bottom: 10px; } } /* ---- 商品数量は1行で表示する（改行させない、STEP1/3/4共通） ---- */ body.getaya-checkout #cart_table .quantity { white-space: nowrap; } /* ---- STEP3：支払方法の右カラムが極端に狭くなる不具合を修正（スマホ） ---- */ @media (max-width: 767px) { body.getaya-checkout--delivery .customer_form th, body.getaya-checkout--delivery .customer_form td { display: block !important; width: 100% !important; } } /* ======================================================================== * Checkout UI v1.8.10 * ===================================================================== */ /* ---- STEP1：案内文を非表示にし、バーと表の間を詰める ---- */ body.getaya-checkout .getaya-checkout-cart-notice { display: none !important; } body.getaya-checkout .upbutton { margin-bottom: 10px !important; } body.getaya-checkout #cart_table { margin-top: 6px !important; } body.getaya-checkout .getaya-checkout-road { margin-bottom: 19px !important; } /* ---- STEP1：数量カラムを1行に収め、［変更］ボタンを一回り狭く ---- */ body.getaya-checkout #cart_table td.quantity { flex-wrap: nowrap !important; } body.getaya-checkout #cart_table td.quantity input.quantity { width: 48px !important; flex: 0 0 auto; } body.getaya-checkout .getaya-row-update { padding: 4px 5px; font-size: .68rem; } @media (max-width: 767px) { /* ---- スマホ商品カード：写真右の縦罫線をなくし、商品名〜金額の * 行間の余白を詰める ---- */ body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { border-right: 0 !important; } body.getaya-checkout #cart_table tbody .productname, body.getaya-checkout .getaya-checkout-summary__table tbody .productname { padding-top: 10px !important; padding-bottom: 2px !important; } body.getaya-checkout #cart_table tbody .unitprice, body.getaya-checkout #cart_table tbody .quantity, body.getaya-checkout #cart_table tbody .subtotal, body.getaya-checkout .getaya-checkout-summary__table tbody .unitprice, body.getaya-checkout .getaya-checkout-summary__table tbody .quantity, body.getaya-checkout .getaya-checkout-summary__table tbody .subtotal { padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.4 !important; } } /* ======================================================================== * Checkout UI v1.8.11 * ===================================================================== */ /* ---- PC数量カラム：display:flexをtdへ直接使うとテーブル行の高さ計算が * 崩れ、縦2段のように見えていた。table-cellの標準的な縦中央揃えに * 戻し、枠線もなくす。 ---- */ body.getaya-checkout #cart_table td.quantity { display: table-cell !important; vertical-align: middle !important; white-space: nowrap !important; } body.getaya-checkout #cart_table td.quantity input.quantity, body.getaya-checkout #cart_table td.quantity .getaya-row-update { display: inline-block; vertical-align: middle; } body.getaya-checkout #cart_table td.quantity .getaya-row-update { margin-left: 5px; } /* ---- 進行バー：文字・アイコンの差をもっとはっきりさせる ---- */ body.getaya-checkout .getaya-checkout-road__step { font-size: .92rem !important; } body.getaya-checkout .getaya-checkout-road__step.is-current { font-size: 1.18rem !important; } body.getaya-checkout .getaya-checkout-road__step.is-current .getaya-checkout-road__icon { width: 60px !important; height: 48px !important; } @media (max-width: 767px) { body.getaya-checkout .getaya-checkout-road__step { font-size: clamp(.66rem, 3vw, .8rem) !important; } body.getaya-checkout .getaya-checkout-road__step.is-current { font-size: clamp(.82rem, 3.6vw, 1rem) !important; } body.getaya-checkout .getaya-checkout-road__step.is-current .getaya-checkout-road__icon { width: 32px !important; height: 34px !important; } } /* ---- スマホ商品カード：2カラム(35:65)×3行の最終仕様 * 1行目：写真｜商品名 * 2行目：単価｜数量＋変更＋×（横並び） * 3行目：（空き）｜金額（大きめ・太字） * 写真は1行目のみに置き、複数行にまたがせない。 ---- */ @media (max-width: 767px) { body.getaya-checkout #cart_table tbody tr, body.getaya-checkout .getaya-checkout-summary__table tbody tr { display: grid !important; grid-template-columns: 35% 65% !important; grid-template-rows: auto auto auto !important; align-items: center; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { grid-column: 1 !important; grid-row: 1 !important; align-self: center; padding: 6px !important; min-height: 0 !important; border-right: 0 !important; } body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { min-height: 0 !important; height: auto !important; width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain !important; } body.getaya-checkout #cart_table tbody .productname, body.getaya-checkout .getaya-checkout-summary__table tbody .productname { grid-column: 2 !important; grid-row: 1 !important; } body.getaya-checkout #cart_table tbody .unitprice, body.getaya-checkout .getaya-checkout-summary__table tbody .unitprice { grid-column: 1 !important; grid-row: 2 !important; } body.getaya-checkout #cart_table tbody .quantity, body.getaya-checkout .getaya-checkout-summary__table tbody .quantity { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-wrap: nowrap; align-items: center; gap: 4px; } /* 【2.8.5修正】この40px指定はv1.8.12の「再掲・確定版」ブロックに * 同一セレクタで上書きされ続けており、実害はないが同じセレクタに * 異なる値が複数箇所に散らばっているのは事故のもとなので削除した * (実際に効く値は下の「再掲・確定版」ブロック側に一本化)。 */ body.getaya-checkout #cart_table tbody .quantity .getaya-row-update { padding: 3px 6px !important; font-size: .68rem !important; } body.getaya-checkout #cart_table tbody .quantity .getaya-row-delete { width: 18px !important; height: 18px !important; } body.getaya-checkout #cart_table tbody .subtotal, body.getaya-checkout .getaya-checkout-summary__table tbody .subtotal { grid-column: 2 !important; grid-row: 3 !important; font-size: 1.15rem !important; font-weight: 700 !important; } } /* ======================================================================== * Checkout UI v1.8.12 * ===================================================================== */ /* ---- 幅の制約：Lightning本体が.alignfull（全幅ブロック）で使っているのと * 同じ「ビューポート基準」の手法を、進行バー（.getaya-checkout-road） * だけに絞って適用する。以前はチェックアウト全体のコンテナに適用して * しまっており、それが「商品表が幅広ブラウザで左へ流れる」 * 「STEP2/3が左寄りになる」不具合の直接原因だった（コンテナ自体に * 負のマージンをかけると、内側の要素の中央揃えが崩れる）。 * チェックアウト全体の幅は元のLightning標準コンテナ幅のままに戻す。 ---- */ body.getaya-checkout .getaya-checkout-road { width: auto !important; max-width: none !important; margin-left: calc(50% - 47.5vw) !important; margin-right: calc(50% - 47.5vw) !important; } @media (max-width: 767px) { /* v1.9.3：スマホの95%・88%は「コンテナの内側」ではなく「画面幅そのもの」 * に対する比率にしたいというご要望のため、進行バーで実績のある * ビューポート基準の計算式（calc(50% - Xvw)）に、本文エリアも統一する。 * この方式は.container等の親要素のpaddingやmax-widthの影響を一切 * 受けない（width:autoとし、左右marginだけでwidth = 2×Xvwが確定する）。 * 95% → X=47.5、88% → X=44。 */ body.getaya-checkout .getaya-checkout-road { width: auto !important; max-width: none !important; margin-left: calc(50% - 47.5vw) !important; margin-right: calc(50% - 47.5vw) !important; } body.getaya-checkout .mainSection, body.getaya-checkout .main-section { width: auto !important; max-width: none !important; margin-left: calc(50% - 44vw) !important; margin-right: calc(50% - 44vw) !important; } body.getaya-checkout #inside-cart, body.getaya-checkout #cart, body.getaya-checkout #customer-info, body.getaya-checkout #delivery-info, body.getaya-checkout #info-confirm { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ---- スマホ商品カード：2カラム(35:65)×3行の最終仕様（再掲・確定版） ---- */ @media (max-width: 767px) { body.getaya-checkout #cart_table tbody tr, body.getaya-checkout .getaya-checkout-summary__table tbody tr { display: grid !important; grid-template-columns: 35% 65% !important; grid-template-rows: auto auto auto !important; align-items: center !important; } body.getaya-checkout #cart_table tbody .thumbnail, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; padding: 6px !important; min-height: 0 !important; border-right: 0 !important; } body.getaya-checkout #cart_table tbody .thumbnail img, body.getaya-checkout .getaya-checkout-summary__table tbody .thumbnail img { min-height: 0 !important; height: auto !important; width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain !important; } body.getaya-checkout #cart_table tbody .productname, body.getaya-checkout .getaya-checkout-summary__table tbody .productname { grid-column: 2 !important; grid-row: 1 !important; } body.getaya-checkout #cart_table tbody .unitprice, body.getaya-checkout .getaya-checkout-summary__table tbody .unitprice { grid-column: 1 !important; grid-row: 2 !important; padding-right: 2px !important; } body.getaya-checkout #cart_table tbody .quantity, body.getaya-checkout .getaya-checkout-summary__table tbody .quantity { grid-column: 2 !important; grid-row: 2 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 3px !important; overflow: visible !important; } /* 【2.8.4修正・2.8.5補強・2.8.6再補強】幅38px・padding2pxでは、実機で * 見ると枠が入力欄に見えないほど窮屈だったため、この行(35:65グリッドの * 数量セル)にはまだ十分な余白がある(変更ボタン・×ボタンを差し引いても * 余裕がある)ことを確認のうえ、視認・タップしやすい幅へ広げた。 * 【2.8.5補強】同じセレクタで別の値(40px)を指定していた古いブロック * (v1.8.11)を削除してカスケードの不確実性を解消したうえで、枠線・ * 背景色も明示して、より確実に「入力欄」と分かる見た目にした。 * 【2.8.6再補強】本人の実機(スマホ実機のDevTools)で、2.8.5の指定 * (width:64px、min-width:0)にも関わらず実際の描画幅が約10pxしか * 出ていないことを確認。tr側のdisplay:grid・td側のdisplay:flexという * 複数レイヤーの上書きが絡む行のため、min-width:0(flexアイテムを * 自由に縮められるようにする指定、本来は旧・極小幅を実現するためのもの) * が悪さをしている可能性を考え、min-width/max-widthともwidthと同じ * 64pxに固定し、flex-basisも auto でなく明示的に64pxへ変更。 * どのような縮小要因が働いても、この行の中でinput.quantityの実描画幅 * が64px未満にならないようにした。 */ body.getaya-checkout #cart_table tbody .quantity input.quantity { width: 64px !important; min-width: 64px !important; max-width: 64px !important; min-height: 38px !important; padding: 6px 4px !important; font-size: .95rem !important; flex: 0 0 64px !important; border: 1px solid #999 !important; border-radius: 4px !important; background-color: #fff !important; text-align: center !important; box-sizing: border-box !important; } body.getaya-checkout #cart_table tbody .quantity .getaya-row-update { flex: 0 0 auto !important; padding: 3px 5px !important; font-size: .64rem !important; } body.getaya-checkout #cart_table tbody .quantity .getaya-row-delete { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; } body.getaya-checkout #cart_table tbody .subtotal, body.getaya-checkout .getaya-checkout-summary__table tbody .subtotal { grid-column: 2 !important; grid-row: 3 !important; font-size: 1.15rem !important; font-weight: 700 !important; } /* action列は数量欄へ移動済みなので、非表示のまま維持 */ body.getaya-checkout #cart_table th.action, body.getaya-checkout #cart_table td.action { display: none !important; } } /* ======================================================================== * Checkout UI v1.9.0 * ===================================================================== */ /* ---- 商品合計・総合計金額：太字・拡大（送料・税・ポイント等の中間行は対象外） ---- */ body.getaya-checkout #cart_table tfoot th.aright, body.getaya-checkout #cart_table tr.total_items_price th, body.getaya-checkout #cart_table tr.total_full_price th, body.getaya-checkout .getaya-checkout-summary__total { font-weight: 700 !important; font-size: 1.15rem !important; } body.getaya-checkout .getaya-checkout-summary__total { display: flex; justify-content: space-between; align-items: center; margin-top: 0 !important; padding: 12px 14px; background: #efefef; } body.getaya-checkout .getaya-checkout-summary__table { margin-bottom: 0 !important; } body.getaya-checkout .getaya-checkout-summary__total-label, body.getaya-checkout .getaya-checkout-summary__total-value { font-weight: 700; font-size: 1.15rem; } /* ---- STEP3/STEP4：商品表とその下の注意書きを密着させる ---- */ body.getaya-checkout .getaya-checkout-summary { margin-bottom: 4px !important; } body.getaya-checkout .getaya-checkout-confirm-discount-notice { margin-top: 4px !important; margin-bottom: 20px !important; } body.getaya-checkout--confirm #cart { margin-bottom: 4px !important; } /* ---- 「あと一歩です」直前のアイコンを1.5倍に ---- */ body.getaya-checkout .getaya-checkout-final-check__icon { width: 105px !important; height: 66px !important; } @media (max-width: 767px) { body.getaya-checkout .getaya-checkout-final-check__icon { width: 81px !important; height: 54px !important; } } /* ---- STEP3：支払方法のラベルは◎の下に改行、その下に説明文（縦積み） ---- */ body.getaya-checkout .customer_form dl dt label, body.getaya-checkout .p-wc-customer_form dl dt label { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; } body.getaya-checkout .customer_form dl dt label span, body.getaya-checkout .customer_form dl dt label, body.getaya-checkout .p-wc-customer_form dl dt label { flex-basis: 100%; } /* ---- STEP3：メルマガ・納品書の◎とラベルの隙間を詰める ---- */ body.getaya-checkout .iopt_label { margin: 2px .6em 2px 0; } body.getaya-checkout .iopt_label input[type="radio"] { margin-right: 3px; } /* ---- STEP3：「配送先」ラベルとラジオボタンの上下位置を揃える ---- */ body.getaya-checkout .customer_form th, body.getaya-checkout .p-wc-customer_form th { vertical-align: middle; } /* ======================================================================== * Checkout UI v1.9.2 * ===================================================================== */ /* ---- STEP3：「別の配送先」フォームは、CSS側で最初から閉じておく * （JSの実行タイミングに依存しない、より堅牢な設計）。 * JS側は「別の配送先」が選択されている場合だけ開く処理に変更。 ---- */ body.getaya-checkout #delivery_table { display: none; } /* ---- STEP3：配送先ラベルとラジオボタンの上下位置を中央揃えに ---- */ body.getaya-checkout .customer_form th, body.getaya-checkout .p-wc-customer_form th, body.getaya-checkout .customer_form td, body.getaya-checkout .p-wc-customer_form td { vertical-align: middle !important; } /* ---- STEP3：支払方法の◎（ラジオボタン）は左寄せに ---- */ body.getaya-checkout .customer_form dl dt label, body.getaya-checkout .p-wc-customer_form dl dt label { justify-content: flex-start; } /* ---- STEP3：メルマガ・納品書の◎とラベルの隙間をさらに詰め、位置ズレを解消 ---- */ body.getaya-checkout .iopt_label { display: inline-flex !important; align-items: center; margin: 2px .8em 2px 0 !important; } body.getaya-checkout .iopt_label input[type="radio"] { margin: 0 3px 0 0 !important; vertical-align: middle; } /* ---- STEP4：ポイント/クーポンのボタンが下に回った時、入力欄との間を30px空ける ---- */ @media (max-width: 767px) { body.getaya-checkout .gcp-action { margin-top: 30px !important; } } /* ---- STEP4：ポイント/クーポン欄のラベル幅を可変にし、崩れにくくする ---- */ body.getaya-checkout .gcp-label { flex: 0 1 150px; } /* ========================================================== 商品カルーセル(TOP): 写真カードの白背景を透明にして 下地の濃紺が透けるようにする(価格を白文字で読めるようにするため) ========================================================== */ .product-carousel .vk_post{ background:transparent !important; } /* ========================================================== カテゴリー左カラム: フリーワード検索(要望1で追加) 既存の価格帯検索(.getaya-price-filter)と統一感を持たせつつ、 ラベル省略+虫メガネアイコンのみのボタンにする ========================================================== */ .getaya-freeword-filter{ display:flex; gap:.4rem; } .getaya-freeword-filter__input{ box-sizing:border-box; font-size:.68rem; height:1.7rem; min-width:0; padding:.15rem .45rem; width:100%; } .getaya-freeword-filter__button{ background:var(--vk-color-primary, #23106d); border:0; border-radius:3px; color:#fff; cursor:pointer; flex:0 0 2.2rem; font-size:.8rem; } /* ========================================================== ページネーション(要望4で刷新): 丸ボタン+シェブロンのスタイルに ========================================================== */ /* 【不具合修正・v2.4.1・実機で発覚】JS側でサーバー側ページネーション * (#getaya-server-pagination、class="getaya-pagination")を隠す際、 * hidden属性を使っていたが、この.getaya-paginationクラス自体に * display:flexが指定されているため、ブラウザ標準の[hidden]{display:none} * より後優先(著者スタイル)で上書きされ、hidden属性がtrueなのに実際には * 表示されたままになっていた。hidden属性を持つ場合は必ずdisplay:noneに * なるよう明示的に指定する。 */ .getaya-pagination[hidden] { display: none !important; } .getaya-pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem; margin:3rem 0 1rem; } .getaya-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .3rem; border:1px solid #ddd; border-radius:50%; color:#170081; font-size:.85rem; font-weight:700; text-decoration:none; transition:all .15s ease; } .getaya-pagination .page-numbers:hover{ border-color:#170081; background:#f3f1fb; } .getaya-pagination .page-numbers.current{ background:#170081; border-color:#170081; color:#fff; } .getaya-pagination .page-numbers.dots{ border:none; color:#999; } .getaya-pagination .prev.page-numbers, .getaya-pagination .next.page-numbers{ border-radius:50%; font-size:1.1rem; font-weight:400; } /* ========================================================== 要望3の根本原因への対応: Lightning本体が body,html に overflow-x:hidden をかけており、CSSの仕様上これが overflow-y を 暗黙的にautoにしてしまい、サイト全体でposition:stickyが 機能しなくなっていた。overflow-xの見た目の効果(横はみ出し防止)は 保ったまま、スクロールコンテナ化しない overflow-x:clip に差し替える ========================================================== */ html, body{ overflow-x:clip !important; overflow-y:visible !important; } /* ======================================================================== * v2.3.0 商品一覧: ページヘッダー帯(カテゴリー色の帯)をサイドバーの * 隣だけに表示(サイドバーstickyの不具合修正は上のv1.7.1ブロックを * 直接修正済み) * ===================================================================== */ /* 【新規】ページヘッダー帯(.getaya-category-hero)をサイドバーの隣 * (結果カラム側)だけに表示するためのラッパー。サイドバーはこの * ラッパーの外(グリッド1列目)にあるため、帯の高さに関係なく * グローバルナビ直下からstickyで開始できる。 */ .getaya-category-main { min-width: 0; padding-bottom: 5rem; } /* 帯の実体(見出し文字を含む箱)は結果カラムの幅のまま。背景色/画像は * ::beforeへ集約し、画面右端までフルブリードで伸ばす(左端はサイド * バーぶん空いた非対称な帯になる)。本体側のbackground-*指定は * background:noneで打ち消す(height・position:relativeはそのまま)。 * ::beforeの実際の見え方(横スクロールを作らず画面端でぴったり切れる)は、 * 既に導入済みのhtml,body { overflow-x:clip } に委ねている。 * * 【2.8.3修正】このブロックはサイドバー付きの商品カテゴリー一覧 * (product-category-archive.php、.getaya-category-mainでラップされる) * 専用のはずだったが、セレクタが素の.getaya-category-heroのままだった * ため、サイドバーの無い特集アーカイブページ(archive-feature.php)や * お知らせアーカイブ(archive-news.php)にも300vw幅の::beforeが適用されて * しまっていた。実機調査の結果、特集アーカイブページのヘッダー画像が * 「ごく一部を異常に拡大した」ように見える不具合の直接の原因はこれだった * (300vw幅にbackground-size:coverを適用すると、実際の帯の高さ(150px前後) * に対して画像が横方向に数倍へ引き伸ばされ、その結果ごく一部の帯域だけが * 大きく拡大されて表示されていた)。.getaya-category-main配下だけに * 効くようスコープを絞り、影響範囲をサイドバー付きレイアウトだけに限定した。 */ .getaya-category-main .getaya-category-hero { background: none; } .getaya-category-main .getaya-category-hero::before { background-color: var(--getaya-category-color, #777); background-image: linear-gradient(rgba(var(--getaya-category-rgb, 119,119,119), .50), rgba(var(--getaya-category-rgb, 119,119,119), .50)), var(--getaya-category-image, none); /* 【2.8.4修正】この帯はサイドバー分の非対称bleedのため意図的に300vw幅 * (下のwidth指定)にしているが、background-size:coverを素直に使うと * coverの拡大率は「この300vw幅」を基準に計算されてしまい、実際の * 表示領域(画面幅ぶんだけ)に対して数倍even過剰に引き伸ばされ、画像の * ごく一部だけが低解像度に拡大されたように見える不具合が起きる * (v2.8.3で特集/お知らせアーカイブに起きていたのと同じ現象の、商品 * カテゴリー側での再発)。coverの代わりに実際のビューポート幅を * 基準にした明示サイズ(100vw)を指定し、帯の左端(=画像の左端)を * background-position:leftで揃えることで、箱の見かけ上の幅(300vw)に * 左右されない正しい縮尺で画像を表示する。 */ background-position: left center; background-size: 100vw auto; bottom: 0; content: ''; display: block; /* 【修正】.getaya-category-layoutのgap(2.2rem)ぶん、帯の背景を左へ * 拡張してサイドバーの右端にぴったりくっつける。文字(.getaya-category-hero__inner) * の位置はhero本体(position:relativeの基準)を動かしていないため変わらない。 */ left: -2.2rem; position: absolute; top: 0; width: 300vw; /* ビューポート右端を確実に超える大きさ。実際の見え方はhtml,bodyのoverflow-x:clipにより画面端でぴったり切り取られる */ z-index: 0; } .getaya-category-main .getaya-category-hero__inner { position: relative; z-index: 1; } /* スマホ(767px以下)は元々サイドバーが無く、帯は常に画面幅いっぱいで * 良い。ただし帯を.getaya-category-layoutの内側(.getaya-category-main)へ * 移動した影響で、layout側の左右padding(0 .75rem、v1.6.0で指定済み)ぶん * 帯が細くなってしまうため、帯だけ相殺してこれまで通り画面端まで * 届くようにする。::beforeの300vw化はサイドバーが無い時点で不要なため * 100%に戻す。 */ @media (max-width: 767px) { .getaya-category-main .getaya-category-hero { margin-left: -.75rem; margin-right: -.75rem; } .getaya-category-main .getaya-category-hero::before { left: 0; width: 100%; } } /* ======================================================================== * v2.4.0 追加読み込み(もっと見る／無限スクロール)共通UI * ===================================================================== */ .getaya-loadmore__sentinel { height: 1px; } .getaya-loadmore__status { color: #555; font-size: .82rem; margin: 1rem 0; text-align: center; } .getaya-loadmore__button { background: var(--vk-color-primary, #23106d); border: 0; border-radius: 3px; color: #fff; cursor: pointer; display: block; font-size: .88rem; font-weight: 700; margin: 2.4rem auto 1rem; min-height: 3rem; padding: 0 2.4rem; } .getaya-loadmore__button:disabled { cursor: default; opacity: .6; } .getaya-loadmore__button[hidden] { display: none; } /* 記事一覧(特集/お知らせ) */ .getaya-post-archive-page { width: 100%; } .getaya-post-archive-layout { margin: 0 auto; max-width: 1200px; padding: 2.5rem 2rem 5rem; } .getaya-post-card-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .getaya-post-card { background: #fff; border: 1px solid #e7e7e7; display: flex; flex-direction: column; } .getaya-post-card__image { aspect-ratio: 16 / 10; background: #f7f7f7; display: block; overflow: hidden; position: relative; } /* v2.8.1: カテゴリーラベルバッジ(そのカードのカテゴリー名を左上に表示) */ .getaya-post-card__term-label { background: var(--vk-color-primary, #23106d); color: #fff; font-size: 11px; font-weight: 700; left: 0; letter-spacing: .03em; line-height: 1; padding: 5px 10px; position: absolute; top: 0; z-index: 2; } .getaya-post-card__image-img { height: 100%; object-fit: cover; width: 100%; } .getaya-post-card__body { padding: 1rem; } .getaya-post-card__date { color: #888; font-size: .72rem; margin: 0 0 .4rem; } .getaya-post-card__title { font-size: 1rem; line-height: 1.5; margin: 0 0 .5rem; } .getaya-post-card__title a { color: #111; text-decoration: none; } .getaya-post-card__excerpt { color: #555; font-size: .8rem; line-height: 1.7; margin: 0; } @media (max-width: 767px) { .getaya-post-archive-layout { padding: 1.6rem 1rem 4rem; } .getaya-post-card-grid { gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); } .getaya-post-card__body { padding: .65rem; } .getaya-post-card__title { font-size: .84rem; } .getaya-post-card__excerpt { display: -webkit-box; font-size: .68rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } /* ======================================================================== * v2.5.0 Lightning標準の投稿一覧カード: カテゴリーラベルの位置変更 * PCとスマホで実装方式が異なる(詳細はassets/js/post-label-relocate.js * 冒頭のコメント参照。画像コンテナ側は背景画像方式のため、DOM移動すると * 崩れることが実機で判明した)。 * ===================================================================== */ /* PC(≥768px): JSが.vk_post_bodyの先頭へ実際に移動させたラベルを、 * タイトルの上に左詰めの通常ブロックとして表示する。 */ .vk_post_body > .vk_post_imgOuter_singleTermLabel:first-child { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: inline-block !important; margin: 0 0 .5rem !important; } /* スマホ(<768px): DOMは動かさず、画像コンテナ(.vk_post_imgOuter、 * 背景画像方式)ごとラベルの高さぶん下げ、ラベル自体は元の絶対配置の * まま画像コンテナの外(上)へはみ出させる。ラベルの実際の高さは * post-label-relocate.jsが測定し、--getaya-post-label-heightという * CSS変数としてカード(.vk_post)に渡している。 */ @media (max-width: 767px) { .vk_post:has(.vk_post_imgOuter_singleTermLabel) .vk_post_imgOuter { overflow: visible !important; margin-top: var( --getaya-post-label-height, 29px ) !important; } .vk_post_imgOuter .vk_post_imgOuter_singleTermLabel { top: calc( -1 * var( --getaya-post-label-height, 29px ) ) !important; bottom: auto !important; /* 【追加】ラベルの横幅を写真の横幅いっぱいに広げる。 * left:0; right:0;で画像コンテナ(position:relativeの.vk_post_imgOuter)の * 幅に揃え、幅に対してwidth:autoの代わりにleft/rightで * ぴったり合わせることで、画像サイズが可変でも常に一致する。 */ left: 0 !important; right: 0 !important; width: auto !important; } /* 【2.8.3追加・実機のスマホ幅疑似環境(iframeによる真の狭幅レンダリング)で * ようやく特定できたTOPページヒーロースライダーの地色露出不具合の直接原因。 * ヒーロースライダー(.getaya-hero)はVK Blocksの投稿一覧コンポーネントを * 流用しているため、.vk_post/.vk_post_imgOuter_singleTermLabelという同じ * クラス構造を持つ。そのため、上の投稿一覧カード専用ルール(:has()で * ラベルの有無を判定し、画像コンテナをラベルの高さぶん下げる)が、意図せず * ヒーロー側にも適用され、画像が(実機で約8px)下にずれて、その隙間に * ヒーローの地色(背景色)が細く露出していた。ヒーロー側は専用のラベル表示 * (上の.getaya-hero .vk_post_imgOuter_singleTermLabel、position:static)を * 別途持っており、画像を下げる必要が無いため、ここで打ち消す。 * (詳細度: .getaya-hero(class)+.vk_post(class)+:has()(class相当)+ * .vk_post_imgOuter(class) の4つで、打ち消し対象の3つより勝るため、 * !important同士でもこちらが有効になる。) */ .getaya-hero .vk_post:has(.vk_post_imgOuter_singleTermLabel) .vk_post_imgOuter { margin-top: 0 !important; } } /* スマホのリード文(抜粋)が小さすぎたため、サイズを引き上げる */ @media (max-width: 767px) { .vk_post_excerpt.media-text { font-size: .82rem !important; line-height: 1.7 !important; } } /* ======================================================================== * v2.6.0 標準検索ウィジェット(.searchform)のデザイン刷新 * スリムな1行デザイン+アイコンボタン(assets/js/search-widget-icon.jsが * を