/* Theme Name: CSG_2026 Phase3 Description: csg_2026p2をベースにしたPhase3版。Phase4-Aデザインプロトタイプ(glow-prototype/)のUI/UXを本番テンプレートに適用する実装用テーマ。 Version: 2026p3 */ @charset "utf-8"; @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); @import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css); @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap'); /* ============================================================ Phase3: Design Tokens ------------------------------------------------------------ Phase3.5デザイン仕様書・glow-prototype/css/prototype.cssと同一のトークン。 既存のPhase2セレクタ(#itemIndex等)は移行が完了するまで残置し、 移行済みの箇所からこのトークンを使用する。 ============================================================ */ :root{ --ink:#0e0e10; --ink-2:#17181b; --paper:#f3f1ec; --surface:#ffffff; --line:#e4e0d6; --line-dark:#2b2c30; --text:#161719; --text-muted:#65676d; --text-inverse:#f3f1ec; --text-inverse-muted:#9a9ca3; --accent:#d81324; --accent-deep:#9c0a17; --gold:#c9a24b; --radius:6px; --shadow:0 20px 44px -26px rgba(0,0,0,0.35); --success:#1f7a4d; --success-tint:#eaf3ee; --warning:var(--gold); --warning-tint:#f8f1e2; --error:var(--accent-deep); --error-tint:#fbeaec; --font-head:'Chakra Petch',sans-serif; --font-body:'Zen Kaku Gothic New','Noto Sans Japanese','メイリオ',sans-serif; --maxw:1280px; --gap:24px; } /* ============================================================ Phase2: レスポンシブ方針 ------------------------------------------------------------ ベース（無条件のルール）＝モバイルを含む全画面幅で成立する流動レイアウト。 商品グリッドはCSS Grid(auto-fill/minmax)で列数を自動決定するため、 従来のように画面幅ごとに列数を手書きする必要がない。 記事＋サイドバーの2カラムはFlexboxのwrapで、狭い画面では自然に縦積みになる。 min-width:1140px のブロックだけが「デスクトップ専用の固定2カラム」を追加する。 ============================================================ */ /* tags ---------------------------------------------------- */ html,body { margin:0; padding: 0; color: #151515; background:#fff; font-family:'Noto Sans Japanese','メイリオ',sans-serif; font-size: 16px; line-height: 1.8em;} a:link,a:visited { color:#242424;} a:hover,a:active { color:#aaaaaa; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} p {} img { border-style: none; vertical-align: bottom; max-width: 100%; height: auto;} h1,h2,h3,h4,h5,h6,p,ul,dl,dt,dd { margin: 0; padding: 0; list-style: none; font-weight: normal; clear:both;} /* Phase3: ブラウザ既定でformにmargin-block-end:1em(≒16px)が入り、 flexレイアウト内で高さのズレを引き起こしていたため明示的にリセットする */ form { margin: 0;} *{ box-sizing: border-box; } #wrap{ width:100%; margin: 0 auto; overflow-x: hidden;} div.inner{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px;} @media screen and (min-width: 768px){ div.inner{ padding: 0 24px;} } @media screen and (min-width: 1140px){ div.inner{ padding: 0;} } /* header (Phase3: glow-prototype/css/prototype.cssの構成に合わせて刷新) ---------------------------------------------------- */ .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px;} /* Phase3: フッターと統一感を出すため、ヘッダー一帯(util-bar/site-header/各オーバーレイ)を 黒系(--ink/--ink-2)背景+金(--gold)/赤(--accent)アクセントに変更。 */ .util-bar{ background: var(--ink-2); color: var(--text-inverse-muted); font-size: .78rem; border-bottom: 1px solid var(--line-dark);} .util-bar .container{ display: flex; justify-content: space-between; align-items: center; height: 32px;} .util-bar .util-left{ display: flex; gap: 18px;} .util-bar a{ color: var(--text-inverse-muted); text-decoration: none;} .util-bar a:hover{ color: var(--gold);} .util-bar .util-right a{ font-size: 1rem; font-weight: 600;} @media (max-width: 768px){ .util-bar{ display: none;} } .mobile-menu-lang{ clear: both; padding-top: 10px;} .mobile-menu-lang a{ display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: .95rem; font-weight: 600; text-decoration: none;} .mobile-menu-lang a:hover{ color: #fff;} .site-header{ background: var(--ink); border-bottom: 1px solid var(--line-dark);} .site-header .container{ display: flex; align-items: center; gap: 28px; height: 88px;} .wordmark{ margin: 0; display: flex; align-items: center; max-width: none;} /* ロゴ画像は黒文字/透過PNGのため、invertで白反転して暗背景でも視認できるようにする */ .wordmark img{ display: block; height: 64px; width: auto; filter: invert(1);} @media (max-width: 768px){ .wordmark img{ height: 48px;} } .main-nav{ display: flex; align-items: center; gap: 20px;} .main-nav ul{ display: flex; align-items: center; gap: 18px; white-space: nowrap; margin: 0; padding: 0; list-style: none;} .main-nav a{ font-size: .86rem; font-weight: 500; text-decoration: none; color: var(--text-inverse);} .main-nav a:hover{ color: var(--gold);} /* Phase3: 黒背景に赤文字そのままだとチカチカして見えるため、塗りのバッジ化で落ち着かせる。 高さを検索ボックス(.header-search form)と揃えて上下中央が一致するようにする */ .main-nav .nav-instant{ display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--accent-deep); color: #fff; font-weight: 700; box-sizing: border-box;} .main-nav .nav-instant:hover{ background: var(--accent); color: #fff;} /* メガメニュー(Phase3): 「カテゴリで探す」はクリックで開閉する横スライド式パネル。 ホバー展開だとボタン→パネル間でカーソルが外れて消えてしまうため、モバイルメニューと同じ開閉方式に統一。 */ /* Phase3: 検索ボックス・即納商品バッジと高さを揃えて上下中央を一致させる */ .mega-trigger-btn{ display: flex; align-items: center; gap: 6px; height: 40px; background: none; border: 0; font-size: .86rem; font-weight: 500; color: var(--text-inverse); padding: 0; cursor: pointer; font-family: inherit;} .mega-trigger-btn:hover, .mega-trigger-btn[aria-expanded="true"]{ color: var(--gold);} .category-menu{ position: fixed; inset: 0; background: rgba(14,14,16,.55); z-index: 997; display: none;} .category-menu.open{ display: block;} .category-menu-panel{ position: absolute; top: 0; left: 0; bottom: 0; width: min(680px, 92vw); background: var(--ink-2); color: var(--text-inverse); padding: 28px; overflow-y: auto; transform: translateX(-100%); transition: transform .28s ease;} .category-menu.open .category-menu-panel{ transform: translateX(0);} .category-menu-panel .cm-close{ background: none; border: 0; color: var(--text-inverse); font-size: 1.3rem; float: right; cursor: pointer;} .category-menu-panel h4{ color: var(--gold); font-family: var(--font-head); font-size: 1.1rem; margin: 0 0 22px;} .mega-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin: 0; padding: 0; list-style: none; clear: both;} .mega-col-title{ display: block; font-family: var(--font-head); font-size: .74rem; letter-spacing: .06em; color: var(--text-inverse-muted); text-transform: uppercase; margin-bottom: 10px;} .mega-col ul{ margin: 0; padding: 0; list-style: none;} .mega-col li{ margin-bottom: 8px;} .mega-col a{ font-size: .9rem; white-space: nowrap; color: var(--text-inverse); text-decoration: none;} .mega-col a:hover{ color: var(--gold);} @media (max-width: 480px){ .mega-grid{ grid-template-columns: 1fr;} } /* Phase3: display:blockのままだと内部の空白テキストノード分だけ高さが余分に膨らみ、 フォーム(40px)が上寄りになってしまうため、display:flexにして解消する */ .header-search{ display: flex; align-items: center; flex: 1 1 auto; max-width: 440px;} /* Phase3: 高さを固定し、カテゴリで探す/即納商品バッジと上下中央を揃える */ /* Phase3: 親(.header-search)をflex化した影響でform(元はblockで幅100%)が中身の幅だけになったため、width:100%で幅いっぱいに戻す */ .header-search form{ display: flex; width: 100%; height: 40px; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden;} .header-search input{ border: 0; padding: 0 12px; flex: 1; font-family: inherit; font-size: .85rem; background: var(--surface); color: var(--text); min-width: 0;} .header-search button{ border: 0; background: var(--gold); color: var(--ink); padding: 0 14px; font-size: .85rem; cursor: pointer;} .header-actions{ display: flex; align-items: center; gap: 16px; margin-left: auto;} /* Phase6: SNSリンクはPCではカートボタンの左側に表示し、モバイルではハンバーガーメニュー内に 別途表示するため、ここでは768px以下で隠す */ .header-social{ display: flex; align-items: center; gap: 16px;} /* Phase6-2: 他のヘッダーアイコン(検索/ハンバーガー)よりInstagram/TikTokが視認しにくかったため、 --text-inverse(オフホワイト)よりコントラストの強い純白に上書きする */ .header-social a{ color: #fff;} .header-social a:hover{ color: var(--gold);} /* Phase6: TikTokはFont Awesome 4.4.0にブランドアイコンが無いためインラインSVGで代用。 fa()アイコンと混在して使えるよう、フォントアイコンと同じ1em相当のサイズ・位置に揃える */ .icon-svg{ width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor;} .icon-btn{ position: relative; background: none; border: 0; font-size: 1.15rem; color: var(--text-inverse); padding: 4px; cursor: pointer; text-decoration: none; display: inline-flex;} .icon-btn:hover{ color: var(--gold);} /* Phase5: サイドバーの「カートを見る」ボタンを廃止した代わりに、ヘッダーのカートボタンを 塗りつぶしの円形ボタンにして購買導線として明確に目立たせる。 Phase3: a:link(要素+疑似クラス)が単一クラスより特異度が高く上書きされていたため、 .icon-btn.cart-btnの2クラス指定にして確実に優先させる */ .icon-btn.cart-btn{ background: var(--accent); color: #fff; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; font-size: 1.05rem;} .icon-btn.cart-btn:hover{ background: var(--accent-deep); color: #fff;} /* Phase6: カート内の数量バッジ。赤いカートボタンの上に乗るため、白背景+濃色文字で視認性を確保する */ .icon-btn.cart-btn .cart-count{ position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--accent-deep); border: 1px solid var(--accent); border-radius: 999px; font-family: var(--font-head); font-size: .68rem; font-weight: 700; line-height: 1; } .mobile-search-btn, .hamburger{ display: none; background: none; border: 0; font-size: 1.3rem; color: var(--text-inverse); cursor: pointer;} @media (max-width: 1024px){ .header-search{ display: none;} } @media (max-width: 768px){ .main-nav{ display: none;} .icon-btn.cart-btn{ width: 36px; height: 36px; font-size: .95rem;} .mobile-search-btn, .hamburger{ display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;} .site-header .container{ height: 70px;} .header-actions{ gap: 4px;} .header-social{ display: none;} } .mobile-search-bar{ display: none; padding: 10px 20px; background: var(--ink-2); border-bottom: 1px solid var(--line-dark);} .mobile-search-bar.open{ display: block;} .mobile-search-bar form{ display: flex; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden;} .mobile-search-bar input{ border: 0; padding: 11px 12px; flex: 1; font-size: .9rem; min-width: 0;} .mobile-search-bar button{ border: 0; background: var(--gold); color: var(--ink); padding: 0 16px; cursor: pointer;} .mobile-menu{ position: fixed; inset: 0; background: rgba(14,14,16,.55); z-index: 998; display: none;} .mobile-menu.open{ display: block;} .mobile-menu-panel{ position: absolute; top: 0; right: 0; bottom: 0; width: 82%; max-width: 340px; background: var(--ink-2); color: var(--text-inverse); padding: 20px; overflow-y: auto;} .mobile-menu-panel .mm-close{ background: none; border: 0; color: var(--text-inverse); font-size: 1.3rem; float: right; cursor: pointer;} .mobile-menu-panel h4{ color: var(--gold); font-family: var(--font-head); font-size: .8rem; letter-spacing: .08em; margin: 22px 0 8px; text-transform: uppercase;} .mobile-menu-panel ul{ margin: 0; padding: 0; list-style: none;} .mobile-menu-panel ul li a{ display: block; padding: 10px 0; color: var(--text-inverse-muted); font-size: .95rem; border-bottom: 1px solid var(--line-dark); text-decoration: none;} .mobile-menu-panel ul li a:hover{ color: #fff;} /* Phase6: モバイルではハンバーガーメニュー内の一番下にSNSリンクを表示する */ .mobile-menu-social{ display: flex; gap: 22px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-dark);} .mobile-menu-social a{ color: var(--text-inverse-muted); font-size: 1.3rem;} .mobile-menu-social a:hover{ color: #fff;} /* footer (Phase3) ---------------------------------------------------- */ .site-footer{ background: var(--ink); color: var(--text-inverse-muted); padding: 44px 0 24px; margin-top: 40px; clear: both;} .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 28px;} /* 取り扱いブランド専用領域(Phase3: 縦一列だと長すぎるためボタン状の横並びに) */ .footer-brands{ border-bottom: 1px solid var(--line-dark); padding-bottom: 24px; margin-bottom: 28px;} .footer-brands h4{ color: var(--gold); font-family: var(--font-head); font-size: .8rem; letter-spacing: .08em; margin-bottom: 14px; text-transform: uppercase;} .brand-pills{ display: flex; flex-wrap: wrap; gap: 10px;} /* Phase3: 塗りつぶしの濃淡だと地色(--ink)と馴染んで見えにくかったため、 通常時は背景透明(フッターと同色)+白文字・白枠のアウトラインボタンにする。 a:link(要素+疑似クラス)が単一クラスより特異度が高く文字色が上書きされていたため、a.brand-pillで指定する */ a.brand-pill{ display: inline-block; padding: 7px 16px; border: 1px solid var(--text-inverse); border-radius: 20px; font-size: .8rem; background: transparent; color: var(--text-inverse); text-decoration: none; white-space: nowrap;} a.brand-pill:hover{ background: var(--gold); border-color: var(--gold); color: var(--ink);} .footer-grid h4{ color: var(--gold); font-family: var(--font-head); font-size: .8rem; letter-spacing: .08em; margin-bottom: 12px; text-transform: uppercase;} .footer-grid ul{ margin: 0; padding: 0; list-style: none;} .footer-grid li{ margin-bottom: 8px; font-size: .85rem;} .footer-grid li a{ color: var(--text-inverse-muted); text-decoration: none;} .footer-grid li a:hover{ color: #fff;} .footer-grid p{ font-size: .85rem; line-height: 1.7;} .footer-bottom{ border-top: 1px solid var(--line-dark); padding-top: 16px; font-size: .75rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;} .footer-bottom a{ color: var(--text-inverse-muted);} @media (max-width: 768px){ .footer-grid{ grid-template-columns: 1fr 1fr;} } @media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr;} } /* main ---------------------------------------------------- */ main{ width: 100%; overflow: hidden;} /* ヘッダー直下の余白（Phase2の header#globalHeader{margin-bottom:20px}相当）。 Hero(#homeTop)はヘッダーに直付けする意匠のため、Hero用の.inner-fullのみ余白を持たせない。 */ main > .inner:not(.inner-full){ margin-top: 28px;} @media screen and (min-width: 1140px){ main > .inner:not(.inner-full){ margin-top: 36px;} } /* Phase3: トップページはHero用とコンテンツ用で.inner-fullが2つ連続するため、その間にも同じ余白を入れる */ main > .inner-full + .inner-full{ margin-top: 28px;} @media screen and (min-width: 1140px){ main > .inner-full + .inner-full{ margin-top: 36px;} } article{ width: 100%; margin-bottom: 30px; min-width: 0;} aside{ width: 100%;} @media screen and (min-width: 1140px){ main .inner{ display: flex; align-items: flex-start; gap: 40px;} article{ flex: 1 1 auto; margin-bottom: 40px;} aside{ width: 300px; flex: 0 0 300px;} /* Hero/Finder/チップ用の全幅ラッパーはaside無しの単独行なのでflex化しない */ main .inner.inner-full{ display: block;} } section{ clear: both;} section h1 i{ margin-right: 10px;} /* サイドバー（Phase3: .sidebar-widget化） ---------------------------------------------------- */ aside div.sidebox{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px;} /* Phase5: 検索ボックスはサイトにとって重要な導線のため、他のサイドボックスと 区別できるよう淡い黄色（--warning-tint／--gold）を配色する */ aside div.sidebox#sideSerch{ background: var(--warning-tint); border-color: var(--gold);} aside div.sidebox h1{ font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--line); padding: 0 0 8px; margin-bottom: 12px; font-family: var(--font-head);} aside div#sideSerch dl{ width: 100%; margin: 0 auto;} aside div#sideSerch dl dt{ font-size: .72rem; color: var(--text-muted); margin-top: .8em;} aside div#sideSerch dl dd select, aside div#sideSerch dl dd input#kw{ width: 100%; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; font-size: .9rem; line-height: 1.4; min-height: 44px;} aside div#sideSerch div.serchBtn{ margin-top: 16px;} aside div#sideSerch div.serchBtn input{ display: block; margin: 0 auto; width: 100%; min-height: 44px; background: var(--ink); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-head); font-size: .88rem;} aside div#sideSerch div.serchBtn input:hover{ background: var(--accent);} aside div#sideSerch div.clearBtn{ text-align: center; margin-top: 8px; font-size: .8rem;} aside div#sideSerch div.clearBtn a{ color: var(--text-muted); text-decoration: underline;} aside div#sideBrand{ overflow: hidden;} aside div#sideBrand ul li a{ display: block; border-bottom: 1px solid var(--line); padding: 10px 2px; text-decoration: none; font-size: .85rem;} aside div#sideBrand ul li:last-child a{ border-bottom: none;} aside div#sideBrand ul li a:hover{ color: var(--accent);} /* Phase6: サイドバー最下部のSNSリンク */ /* Phase6-2: サイドバー幅をフルに使う2カラムの大きめボタンにし、タップしやすくする */ .sidebar-social{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;} .sidebar-social a{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: 1.4rem; text-decoration: none; } .sidebar-social a span{ font-size: .85rem; font-family: var(--font-head); font-weight: 600;} .sidebar-social a:hover{ border-color: var(--accent); color: var(--accent);} /* Homepage: Search & Vehicle Finder バー（parts_searchウィジェットを再利用して装飾） ---------------------------------------------------- */ .finder-bar{ background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); margin-top: -30px; position: relative; z-index: 2; padding: 22px;} .finder-bar .finder-title{ font-family: var(--font-head); font-size: .82rem; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px; text-transform: uppercase;} .finder-bar dl{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0;} .finder-bar dl dt{ font-size: .74rem; color: var(--text-muted); flex: 0 0 auto;} .finder-bar dl dd{ margin: 0; flex: 1 1 150px; min-width: 130px;} .finder-bar dl dd select, .finder-bar dl dd input#kw{ width: 100%; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; font-size: .88rem; min-height: 44px;} /* Phase4: メーカー/車種/カテゴリ/ブランドとキーワードを1フォームに統合したため、 キーワード欄+検索ボタンは.kw-rowでまとめて横並びに、検索クリアはその下に配置 */ .finder-bar .kw-row{ display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);} .finder-bar .kw-row dl{ flex: 1 1 auto;} .finder-bar div.serchBtn{ margin-top: 0; flex: 0 0 auto;} .finder-bar div.serchBtn input{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: .88rem;} .finder-bar div.serchBtn input:hover{ background: var(--accent-deep);} .finder-bar div.clearBtn{ margin-top: 8px; font-size: .78rem; text-align: right;} .finder-bar div.clearBtn a{ color: var(--text-muted); text-decoration: underline;} @media (max-width: 600px){ .finder-bar{ margin-top: -18px; padding: 16px;} .finder-bar dl dd{ flex: 1 1 100%;} /* スマホ幅ではキーワード欄+ボタンの横並びは窮屈なため縦積みに戻す */ .finder-bar .kw-row{ flex-direction: column; align-items: stretch;} .finder-bar div.clearBtn{ text-align: center;} } /* Category Chips（Phase3新設: カテゴリー一覧をチップで表示） ---------------------------------------------------- */ .chip-row{ display: flex; gap: 10px; overflow-x: auto; padding: 22px 0; margin: 0; list-style: none;} .chip-row li{ flex: 0 0 auto;} .chip{ display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 20px; font-size: .85rem; background: var(--surface); white-space: nowrap; text-decoration: none; color: var(--text);} .chip:hover{ border-color: var(--ink); background: var(--ink); color: #fff;} /* プロモ帯(Phase3新設: サイドバー廃止に伴い元sidebar.phpのバナーをここへ集約) ---------------------------------------------------- */ .promo-band{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px;} .promo-tile{ display: block; border-radius: var(--radius); overflow: hidden; line-height: 0;} .promo-tile img{ width: 100%; height: 100%; object-fit: cover;} @media (max-width: 1024px){ .promo-band{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px){ .promo-band{ grid-template-columns: 1fr; } } /* 商品グリッド共通（トップの各セクション・アーカイブ・関連商品・検索結果で共有） ---------------------------------------------------- */ /* Phase7: 商品カードは画像部だけでなくカード全体をクリック可能にする。 li側の背景/枠線/overflowはそのまま残し、新設したが li内部で画像+情報エリアをまとめて包む形に変更（liのdisplay:flex;column構成を 側に引き継いで既存の縦積みレイアウトを崩さないようにする）。 一覧側は