/* SP絞り込み専用。Figma 4109:25243の寸法・配色を使用。 */
.ms-pf-filter { border: 0; padding: 0; margin: auto; width: calc(100% - 24px); max-width: 560px; height: calc(100vh - 40px); height: calc(100dvh - 40px); max-height: none; max-width: min(560px, calc(100% - 24px)); border-radius: 8px; background: #fff; color: #333; overflow: hidden; box-sizing: border-box; font: inherit; }
dialog.ms-pf-filter:not([open]) { display: none; }
.ms-pf-filter::backdrop { background: rgb(0 0 0 / 30%); }
.ms-pf-filter *, .ms-pf-filter *::before, .ms-pf-filter *::after { box-sizing: border-box; }
.ms-pf-shell { display: flex; flex-direction: column; height: 100%; }
.ms-pf-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 8px 12px; }
.ms-pf-header h2 { margin: 0; padding: 0; border: 0; font-size: 20px; line-height: 1.4; letter-spacing: 2.5px; font-weight: 700; color: #333; }
.ms-pf-filter button { font-family: inherit; cursor: pointer; border: 0; margin: 0; box-shadow: none; text-transform: none; }
.ms-pf-filter button:focus-visible, .ms-pf-group summary:focus-visible { outline: 2px solid #006eb2; outline-offset: -2px; }
.ms-pf-filter .ms-pf-close { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; background: transparent var(--ms-pf-close) center / 24px no-repeat; }
.ms-pf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 16px; -webkit-overflow-scrolling: touch; }
.ms-pf-hint, .ms-pf-status { margin: 0 0 8px; padding: 0; font-size: 13px; line-height: 1.7; }
.ms-pf-status { font-weight: 700; margin-bottom: 16px; }
.ms-pf-group { margin: 0 0 16px; padding: 0; border-top: 1px solid #ccc; }
.ms-pf-group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 8px 16px 0; color: #4e341b; font-size: 18px; line-height: 1.55; letter-spacing: .5px; font-weight: 700; cursor: pointer; list-style: none; }
.ms-pf-group summary::-webkit-details-marker { display: none; }
.ms-pf-group summary::after { content: '+'; flex: 0 0 20px; text-align: center; color: #787878; font-size: 22px; font-weight: 400; }
.ms-pf-group[open] summary::after { content: '−'; }
.ms-pf-filter .ms-pf-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px; border-radius: 0; background: #fff; color: #333; font-size: 16px; line-height: 2; letter-spacing: .5px; font-weight: 400; text-align: left; overflow-wrap: anywhere; }
.ms-pf-option::before { content: ''; flex: 0 0 17px; width: 17px; height: 17px; background: var(--ms-pf-off) center / contain no-repeat; }
.ms-pf-filter .ms-pf-option[aria-checked='true'] { background: #f6fbff; }
.ms-pf-option[aria-checked='true']::before { background-image: var(--ms-pf-on); }
.ms-pf-filter .ms-pf-option:disabled { color: #999; background: #f5f5f5; cursor: not-allowed; }
.ms-pf-option:disabled::before { opacity: .45; }
.ms-pf-footer { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 16px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #dedede; background: #fff; }
.ms-pf-filter .ms-pf-apply { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 10px; min-width: 0; min-height: 44px; padding: 12px 16px 12px 24px; border-radius: 110px; background: #006eb2; color: #fff; font-size: 17px; line-height: 1.4; letter-spacing: 1px; font-weight: 700; }
.ms-pf-apply::after { content: ''; flex: 0 0 7px; width: 7px; height: 12px; background: var(--ms-pf-arrow) center / contain no-repeat; }
.ms-pf-filter .ms-pf-apply:disabled { background: #787878; cursor: not-allowed; }
.ms-pf-filter .ms-pf-reset { flex: 0 0 auto; min-height: 44px; padding: 8px 0; background: transparent; color: #006eb2; font-size: 15px; line-height: 1.5; letter-spacing: .5px; }
@media (prefers-reduced-motion: reduce) { .ms-pf-filter, .ms-pf-filter * { scroll-behavior: auto; } }

/* Figmaから取得した原SVGを埋め込み。外部URLへの依存なし。 */
.ms-pf-filter {
  --ms-pf-off: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE2LjY2NjciIGhlaWdodD0iMTYuNjY2NyIgdmlld0JveD0iMCAwIDE2LjY2NjcgMTYuNjY2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMzMzMzMgMTYuNjY2N0MzLjczMDgzIDE2LjY2NjcgMCAxMi45MzU4IDAgOC4zMzMzM0MwIDMuNzMwODMgMy43MzA4MyAwIDguMzMzMzMgMEMxMi45MzU4IDAgMTYuNjY2NyAzLjczMDgzIDE2LjY2NjcgOC4zMzMzM0MxNi42NjY3IDEyLjkzNTggMTIuOTM1OCAxNi42NjY3IDguMzMzMzMgMTYuNjY2N1pNNy41MDI1IDExLjY2NjdMMTMuMzk0MiA1Ljc3NDE3TDEyLjIxNTggNC41OTU4M0w3LjUwMjUgOS4zMUw1LjE0NSA2Ljk1MjVMMy45NjY2NyA4LjEzMDgzTDcuNTAyNSAxMS42NjY3WiIgZmlsbD0iI0RFREVERSIvPgo8L3N2Zz4K");
  --ms-pf-on: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE2LjY2NjciIGhlaWdodD0iMTYuNjY2NyIgdmlld0JveD0iMCAwIDE2LjY2NjcgMTYuNjY2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMzMzMzMgMTYuNjY2N0MzLjczMDgzIDE2LjY2NjcgMCAxMi45MzU4IDAgOC4zMzMzM0MwIDMuNzMwODMgMy43MzA4MyAwIDguMzMzMzMgMEMxMi45MzU4IDAgMTYuNjY2NyAzLjczMDgzIDE2LjY2NjcgOC4zMzMzM0MxNi42NjY3IDEyLjkzNTggMTIuOTM1OCAxNi42NjY3IDguMzMzMzMgMTYuNjY2N1pNNy41MDI1IDExLjY2NjdMMTMuMzk0MiA1Ljc3NDE3TDEyLjIxNTggNC41OTU4M0w3LjUwMjUgOS4zMUw1LjE0NSA2Ljk1MjVMMy45NjY2NyA4LjEzMDgzTDcuNTAyNSAxMS42NjY3WiIgZmlsbD0iIzAwNkVCMiIvPgo8L3N2Zz4K");
  --ms-pf-close: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJjbG9zZV8yNGRwXzVGNjM2OF9GSUxMMF93Z2h0NTAwX0dSQUQwX29wc3oyNCAxIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuNCAxOS4xOTEzTDQuODA4NzUgMTcuNkwxMC40MDg4IDEyTDQuODA4NzUgNi40TDYuNCA0LjgwODc1TDEyIDEwLjQwODdMMTcuNiA0LjgwODc1TDE5LjE5MTMgNi40TDEzLjU5MTMgMTJMMTkuMTkxMyAxNy42TDE3LjYgMTkuMTkxM0wxMiAxMy41OTEyTDYuNCAxOS4xOTEzWiIgZmlsbD0iIzAwNkVCMiIvPgo8L2c+Cjwvc3ZnPgo=");
  --ms-pf-arrow: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjciIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCA3IDEyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNMS4zMzE5OCAwTDAgMS40MUw0LjMyNjU5IDZMMCAxMC41OUwxLjMzMTk4IDEyTDcgNkwxLjMzMTk4IDBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}


/* PCでは同じ選択UIを左サイドバーへ配置。外枠・内部スクロールを設けず、ページ全体でスクロール。 */
.ms-pf-desktop { display: none; }
@media (min-width: 834px) {
  #sidebar.ms-pf-enhanced > .listmenu { display: none; }
  #sidebar .ms-pf-desktop {
    display: block; position: static; width: 100%; max-width: none; height: auto;
    margin: 20px 0 0; border: 0; border-radius: 0; overflow: visible;
  }
  .ms-pf-desktop .ms-pf-shell { height: auto; }
  .ms-pf-desktop .ms-pf-header { padding: 14px 12px 8px; }
  .ms-pf-desktop .ms-pf-header h2 { font-size: 18px; letter-spacing: .5px; }
  .ms-pf-desktop .ms-pf-close { display: none; }
  .ms-pf-desktop .ms-pf-body { max-height: none; min-height: 0; overflow: visible; overscroll-behavior: auto; }
  .ms-pf-desktop .ms-pf-group summary { font-size: 16px; }
  .ms-pf-desktop .ms-pf-option { font-size: 14px; }
  .ms-pf-desktop .ms-pf-footer { display: none; }
  .ms-pf-desktop .ms-pf-reset { min-height: 32px; padding: 4px 0 4px 8px; font-size: 13px; }
  .ms-pf-desktop .ms-pf-header { gap: 8px; }
  .ms-pf-desktop .ms-pf-status a { color: #006eb2; text-decoration: underline; }
  #main[aria-busy="true"] { opacity: .55; pointer-events: none; }
  #main, #sidebar.ms-pf-enhanced { overflow-anchor: none; }
}


/* ブランド紹介・付随コンテンツの更新用。既存レイアウトを維持。 */
#ms-product-filter-intro, #ms-product-filter-tail { display: contents; }
#sidebar.ms-pf-enhanced > .filter-clear { display: flex; width: fit-content; margin: 12px auto; }
@media (min-width: 834px) {
  #sidebar.ms-pf-enhanced > .filter-clear { display: none; }
}
.ms-pf-option .color-swatch { flex: 0 0 17px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #ddd; }

/* 部分更新のラッパー内でも、共通CSSのサブメニュー直後の余白を維持する。 */
.submenu ~ #ms-product-filter-intro > .page-header { margin-top: 30px; }
.submenu ~ #ms-product-filter-intro > .page-header.header-top,
.submenu ~ #ms-product-filter-intro > .page-header.header-top-sp { margin-top: 0; }
@media (min-width: 834px) {
  .submenu ~ #ms-product-filter-intro > .page-header { margin-top: 80px; }
  .page-template-page-frame .submenu ~ #ms-product-filter-intro > .page-header,
  .archive-frame_item .submenu ~ #ms-product-filter-intro > .page-header,
  .archive-sunglass_item .submenu ~ #ms-product-filter-intro > .page-header { margin-top: 60px; }
}

/* 834pxでPCフィルターが縦積みになる隙間を、この一覧内だけ補正する。 */
@media (min-width: 834px) and (max-width: 834.999px) {
  #flex-content:has(#sidebar.ms-pf-enhanced) { padding: 20px; margin-top: 30px; }
  #flex-content .container:has(> #sidebar.ms-pf-enhanced) { flex-direction: row; }
  #sidebar.ms-pf-enhanced { width: 286px; flex-shrink: 0; position: relative; background: var(--white); }
}

/* PC link controls keep the same dimensions as mobile selection buttons. */
.ms-pf-filter a.ms-pf-option { font-family: inherit; margin: 0; border: 0; box-shadow: none; text-decoration: none; cursor: pointer; }
.ms-pf-filter a.ms-pf-option:focus-visible { outline: 2px solid #006eb2; outline-offset: -2px; }
.ms-pf-filter .ms-pf-option[data-selected='true'] { background: #f6fbff; }
.ms-pf-option[data-selected='true']::before { background-image: var(--ms-pf-on); }
.ms-pf-filter .ms-pf-option[aria-disabled='true'] { color: #999; background: #f5f5f5; cursor: not-allowed; }
.ms-pf-option[aria-disabled='true']::before { opacity: .45; }

/* PCのホバーはリンクがある項目だけ。無効項目には共通の明度変更も適用しない。 */
@media (min-width: 834px) {
  .ms-pf-desktop a.ms-pf-option { filter: none; }
}
@media (min-width: 834px) and (hover: hover) {
  .ms-pf-desktop a.ms-pf-option[href]:not([aria-disabled='true']):hover {
    color: #006eb2;
    background-color: #f6fbff;
  }
  .ms-pf-desktop a.ms-pf-option[href]:not([aria-disabled='true']):hover::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjE2LjY2NjciIGhlaWdodD0iMTYuNjY2NyIgdmlld0JveD0iMCAwIDE2LjY2NjcgMTYuNjY2NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMzMzMzMgMTYuNjY2N0MzLjczMDgzIDE2LjY2NjcgMCAxMi45MzU4IDAgOC4zMzMzM0MwIDMuNzMwODMgMy43MzA4MyAwIDguMzMzMzMgMEMxMi45MzU4IDAgMTYuNjY2NyAzLjczMDgzIDE2LjY2NjcgOC4zMzMzM0MxNi42NjY3IDEyLjkzNTggMTIuOTM1OCAxNi42NjY3IDguMzMzMzMgMTYuNjY2N1pNNy41MDI1IDExLjY2NjdMMTMuMzk0MiA1Ljc3NDE3TDEyLjIxNTggNC41OTU4M0w3LjUwMjUgOS4zMUw1LjE0NSA2Ljk1MjVMMy45NjY2NyA4LjEzMDgzTDcuNTAyNSAxMS42NjY3WiIgZmlsbD0iI0M0RERFRCIvPgo8L3N2Zz4K");
  }
}