現在のカゴの中 | 福福トレカユニオンアリーナ専門店

現在カート内に商品はございません。

/* カートページ専用ヘッダー: スマホのみ表示 */ .cart-header-sp { display: none; } @media only screen and (max-width: 960px) { .cart-header-sp { display: block; } .cart_page .p-shop__header { display: none; } } /* AmazonPayボタン */ .cart_page .d-none { display: block !important; max-width: 600px; margin: 0 auto; } .cart_page .d-none > div { width: 100% !important; } .cart_page .d-none .AmazonPayButton { width: 100% !important; height: 44px !important; } /* スマホ: コンテンツ上部の余白 */ @media only screen and (max-width: 960px) { .p-page__body { padding-top: 12px; } } /* カートページ全体 */ .cart-summary { background: #fff; border: 1px solid #ce0000; border-radius: 6px; padding: 8px 12px; margin: 8px auto; max-width: 600px; } .cart-summary__row { display: flex; justify-content: space-between; align-items: center; padding: 1px 0; font-size: 13px; } .cart-summary__total { font-size: 14px; font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 4px; margin-bottom: 2px; } .cart-summary__total .price { color: #ce0000; font-size: 18px; } .cart-summary__point { color: #333; font-size: 13px; background: #fff8e1; border-radius: 4px; padding: 4px 8px; margin: 4px 0; } .cart-summary__point span { font-weight: bold; color: #e65100; } .cart-summary__shipping { background: #fff8e1; border-radius: 4px; padding: 4px 10px; margin: 4px 0; font-size: 12px; text-align: center; } .cart-summary__shipping--free { background: #e8f5e9; color: #2e7d32; font-weight: bold; } .cart-summary__shipping .remaining { color: #ce0000; font-weight: bold; font-size: 14px; } .cart-summary__deadline { border-radius: 4px; padding: 2px 10px; margin: 4px 0; font-size: 12px; text-align: center; color: #888; } .cart-summary__checkout { margin-top: 6px; } .cart-summary__checkout .btn-checkout { display: block; width: 100%; padding: 8px; background: #ce0000; color: #fff; font-size: 16px; font-weight: bold; text-align: center; border: none; border-radius: 6px; cursor: pointer; text-decoration: none; } .cart-summary__checkout .btn-checkout:hover { background: #b71c1c; } /* 商品リスト */ .cart-items { max-width: 600px; margin: 16px auto; } .cart-item { display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 8px; margin-bottom: 6px; gap: 8px; } .cart-item__img { width: 64px; flex-shrink: 0; } .cart-item__img img { width: 100%; height: auto; object-fit: contain; border-radius: 4px; } .cart-item__info { flex: 1; min-width: 0; } .cart-item__name { font-size: 12px; font-weight: bold; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .cart-item__name a { color: #333; text-decoration: none; } .cart-item__class { font-size: 11px; color: #888; } .cart-item__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } .cart-item__price { font-size: 14px; color: #ce0000; font-weight: bold; } .cart-item__qty { display: flex; align-items: center; gap: 2px; } .cart-item__qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 50%; background: #fff; text-decoration: none; color: #333; font-size: 16px; transition: all 0.15s; } .cart-item__qty-btn:hover { background: #fce4ec; border-color: #ce0000; color: #ce0000; } .cart-item__qty-btn--disabled { opacity: 0.3; pointer-events: none; } .cart-item__qty-num { font-size: 15px; font-weight: bold; min-width: 24px; text-align: center; } .cart-item__delete { flex-shrink: 0; } .cart-item__delete a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #999; font-size: 20px; text-decoration: none; } .cart-item__delete a:hover { color: #ce0000; } .cart-bottom-total { max-width: 600px; margin: 4px auto 0; text-align: right; font-size: 14px; color: #666; } .cart-bottom-total span { font-size: 16px; font-weight: bold; color: #ce0000; } .cart-actions { display: flex; gap: 10px; max-width: 600px; margin: 16px auto; } .cart-actions__continue { flex: 1; display: block; padding: 12px 0; border: 2px solid #ce0000; color: #ce0000; font-weight: bold; border-radius: 6px; text-decoration: none; font-size: 14px; text-align: center; } .cart-actions__continue:hover { background: #fce4ec; } .cart-actions__checkout { flex: 1; display: block; padding: 12px 0; background: #ce0000; color: #fff; font-weight: bold; border: 2px solid #ce0000; border-radius: 6px; text-decoration: none; font-size: 14px; text-align: center; } .cart-actions__checkout:hover { background: #b71c1c; } /* エラーメッセージ */ .cart-error { max-width: 600px; margin: 10px auto; } /* 空カート */ .cart-empty { max-width: 600px; margin: 40px auto; text-align: center; } /* おすすめ商品セクション */ .cart-recommend { max-width: 600px; margin: 20px auto; } .cart-recommend__title { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid #ce0000; } .cart-recommend__scroll-wrap { position: relative; } .cart-recommend__list { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; } .cart-recommend__list::-webkit-scrollbar { display: none; } .cart-recommend__item { flex: 0 0 100px; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 6px; } .cart-recommend__item:hover { background: #fafafa; } .cart-recommend__img { width: 100%; aspect-ratio: 1 / 1.36; overflow: hidden; border-radius: 4px; background: #f8f8f8; margin-bottom: 4px; } .cart-recommend__img img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } .cart-recommend__name { font-size: 10px; line-height: 1.3; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; } .cart-recommend__price { font-size: 12px; font-weight: bold; color: #ce0000; margin: 0 0 4px; } .cart-recommend__link { text-decoration: none; color: inherit; display: block; } .cart-recommend__cart-btn { display: block; width: 100%; padding: 4px 0; font-size: 10px; font-weight: bold; text-align: center; color: #fff; background: #ce0000; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; } .cart-recommend__cart-btn:hover { background: #b71c1c; } .cart-recommend__cart-btn--done { background: #2e7d32; pointer-events: none; } .cart-recommend__arrow { display: none; } @media (min-width: 961px) { .cart-recommend__arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: #fff; border: 1px solid #ddd; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.1); cursor: pointer; z-index: 2; font-size: 14px; color: #666; } .cart-recommend__arrow:hover { border-color: #ce0000; color: #ce0000; } .cart-recommend__arrow--left { left: -14px; } .cart-recommend__arrow--right { right: -14px; } } .p-page__body-inner { min-height: 64vh; } @media only screen and (min-width: 768px) { .AmazonPayButton { margin: 0 auto; width: 50% !important; } } /* スマホ: 上部サマリー表示、PC右カラムのサマリーは非表示 */ .cart-summary-sp { display: block; } .cart-pc-right .cart-summary { display: none; } @media only screen and (min-width: 961px) { .cart-summary-sp { display: none; } .cart-pc-right .cart-summary { display: block; } } /* PC版 2カラムレイアウト */ @media only screen and (min-width: 961px) { .cart-pc-layout { display: flex; gap: 24px; max-width: 960px; margin: 0 auto; align-items: flex-start; } .cart-pc-left { flex: 1; min-width: 0; } .cart-pc-right { width: 320px; flex-shrink: 0; position: sticky; top: 20px; } .cart-summary { max-width: none; margin: 0 0 16px; } .cart-items { max-width: none; margin: 0; } .cart-item__img { width: 80px; } .cart-item__name { font-size: 13px; } .cart-item__price { font-size: 15px; } .cart-bottom-total { max-width: none; margin: 8px 0 0; } .cart-actions { max-width: none; margin: 16px 0; } .cart-recommend { max-width: none; margin: 0; } .cart-error { max-width: 960px; } } body{background:none}.ec-layoutRole{background:#fff} .logoTitle { color: #fff; font-weight: bold; font-size: 14px; margin: 0; white-space: nowrap; } #header .logo { width: max-content; top: 0; } /* 検索バーをヘッダー直下に追従 */ #header .header__search--fixed { background: #fff; padding: 6px 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #header .header__search--fixed .form-search { display: flex; align-items: center; max-width: 960px; margin: 0 auto; } #header .header__search--fixed .form-search__input { flex: 1; } /* PC版: logoTitleとナビリンクがロゴに被らないようにする */ @media only screen and (min-width: 961px) { .logoTitle { margin-left: 200px; } .gnav { flex-wrap: wrap; } .gnav > .sub_nav_box:not(.sp_hidden) { max-width: calc(100% - 320px); margin-left: auto; } .gnav > .sub_nav_box:not(.sp_hidden) .sub_nav.flex { flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .gnav > .sub_nav_box:not(.sp_hidden) .sub_nav.flex > ul.flex { flex-wrap: wrap; justify-content: flex-end; } } @media only screen and (max-width: 960px) { .logoTitle { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } } @media only screen and (max-width: 960px) { #header .logo { width: auto; position: absolute; left: 50%; transform: translate(-50%, 0%); top: 5px; } #header .logo img { max-height: 50px; width: auto !important; height: auto !important; } } .sp-drawer { max-width: 300px; margin: auto; padding-bottom: 80px; } /* 会員エリア（横並びボタン） */ .sp-drawer__auth { display: flex; gap: 8px; padding: 10px 12px 16px; } .sp-drawer__auth-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 13px; font-weight: bold; border-radius: 8px; text-decoration: none; transition: opacity 0.2s; } .sp-drawer__auth-btn:active { opacity: 0.7; } .sp-drawer__auth-btn--primary { background: #fff; color: #ce0000; } .sp-drawer__auth-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7); } /* セクション */ .sp-drawer__section { padding: 0 12px; margin-bottom: 20px; } .sp-drawer__section-title { color: rgba(255,255,255,0.6); font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding: 0 0 6px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.15); } /* バナーグリッド（2列） */ .sp-drawer__grid { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .sp-drawer__grid-item { width: calc((100% - 8px) / 2); } .sp-drawer__grid-item a { display: block; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.15); transition: all 0.2s; } .sp-drawer__grid-item a:active { border-color: #fff; transform: scale(0.97); } .sp-drawer__grid-img { background: #fff; } .sp-drawer__grid-img img { width: 100%; height: auto; display: block; object-fit: contain; } /* クイックリンク（アイコン付きカード） */ .sp-drawer__quick-links { display: flex; flex-wrap: wrap; gap: 8px; } .sp-drawer__quick-item { width: calc((100% - 16px) / 3); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; background: rgba(255,255,255,0.1); border-radius: 8px; color: #fff; font-size: 11px; font-weight: bold; text-decoration: none; text-align: center; transition: background 0.2s; } .sp-drawer__quick-item:active { background: rgba(255,255,255,0.2); } .sp-drawer__quick-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 50%; } .sp-drawer__quick-icon svg { color: #fff; } /* SNS */ .sp-drawer__sns { display: flex; justify-content: center; gap: 16px; padding: 20px 12px 10px; } .sp-drawer__sns a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; transition: background 0.2s; } .sp-drawer__sns a:active { background: rgba(255,255,255,0.25); } .sp-drawer__sns a img { width: 20px; height: 20px; }