@charset "utf-8"; /* ============================================================================= * kaitori: サイドのカテゴリー一覧を EC-CUBE と同じ「白パネル・フライアウト」にする。 * 移植元 = /store/html/user_data/assets/css/customize.css の C-040（2026-06-23 作） * 対の JS = js/category-flyout.js * * EC-CUBE 側 → kaitori 側 * .ec-categoryNaviRole → .side_widget.tcdw_category_list_widget * ul.ec-itemNav__nav → ul.collapse_category_list * li > a + ul → li > a + ul（同じ） * * ★PC（）だけに適用する。スマホはテーマ既定のまま * （EC-CUBE 側も SP ドロワーのカテゴリは対象外にしている）。 * ========================================================================== */ /* パネルがはみ出せるように（既定値だが、祖先が隠していた場合の保険） */ .pc .layout2 #side_col, .pc #side_col, .pc .side_widget.tcdw_category_list_widget.js-catAcc { overflow: visible; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li { position: relative; } /* ===== 見出し（EC-CUBE の ec-itemNav__nav::before と同じ体裁） ===== */ .pc .tcdw_category_list_widget.js-catAcc .side_headline { font-size: 15px; font-weight: 700; color: #333; background: none; padding: 12px 12px 10px; margin: 0; border: none; border-bottom: 1px solid #ddd; text-align: left; line-height: 1.4; } /* ===== 縦リスト（親） ===== */ .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list { margin: 0; padding: 0; list-style: none; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li { width: 100%; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li > a { display: block; padding: 11px 30px 11px 12px; font-size: 14px; font-weight: normal; color: #444; background: #fff; border-bottom: 1px solid #e8e8e8; border-left: 3px solid transparent; text-align: left; line-height: 1.4; transition: .15s; text-decoration: none; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li:last-child > a { border-bottom: none; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li > a:hover { background: #f7f7f7; color: #068FA3; border-left-color: #08B9D4; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li.has-child > a::after { content: "\203A"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 16px; line-height: 1; pointer-events: none; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li.has-child > a:hover::after { color: #08B9D4; } /* テーマ既定の三角ビュレット（style.css の .collapse_category_list li a:before）を消す＝EC-CUBE には無い */ .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list li a:before { display: none; } /* 件数バッジ（EC-CUBE には無いが、本人指示により出す・2026-08-30） グレーにはしない＝本文と同じ色のまま、サイズだけ小さくして階層を付ける。 親は矢印(right:12px)より内側へ、子は右端へ寄せる。 */ .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list .count { display: inline-block; float: right; font-size: 11px; font-weight: normal; color: #444; background: none; line-height: 1.55; margin: 0 6px 0 8px; padding: 0; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li > a:hover .count { color: #068FA3; background: none; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li > a .count { margin-right: 0; line-height: 1.4; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li > a:hover .count { color: #068FA3 !important; } /* 「○○すべて」には件数を出さない（親の総数と紛らわしいため） */ .pc .tcdw_category_list_widget.js-catAcc .cat-allLink .count { display: none; } /* ===== フライアウト・パネル（左サイド＝右へ開く） ===== */ .pc .tcdw_category_list_widget.js-catAcc .cat-flyout { display: none; position: absolute; min-width: 320px; max-width: 600px; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 6px 20px rgba(0,0,0,.14); z-index: 50; padding: 12px 16px 14px; top: 0; left: 100%; border-radius: 0 8px 8px 0; } .pc .tcdw_category_list_widget.js-catAcc .collapse_category_list > li:hover > .cat-flyout { display: block !important; } .pc .tcdw_category_list_widget.js-catAcc .cat-allLink { display: block; font-weight: 700; color: #068FA3; font-size: 14px; padding: 4px 2px 10px; border-bottom: 1px solid #e8e8e8; margin-bottom: 8px; text-decoration: none; background: none; border-left: none; text-align: left; } .pc .tcdw_category_list_widget.js-catAcc .cat-allLink::after { content: " \203A"; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub { display: block !important; position: static !important; list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 24px; column-rule: 1px solid #e8e8e8; width: auto; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li { break-inside: avoid; width: auto; position: static; display: block !important; float: none !important; height: auto !important; overflow: visible !important; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li > a { display: block !important; padding: 6px 4px; color: #555 !important; background: #fff !important; border: none; font-size: 13px; font-weight: normal; text-align: left; text-decoration: none; line-height: 1.4; height: auto !important; white-space: nowrap; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li > a:hover { color: #068FA3 !important; background: #f7f7f7 !important; } .pc .tcdw_category_list_widget.js-catAcc .cat-sub > li > a:before { display: none; } /* 孫は出さない（子に入って辿る）＝EC-CUBE と同じ */ .pc .tcdw_category_list_widget.js-catAcc .cat-sub ul { display: none !important; }