@charset "UTF-8";

/**
 * PLUSTA絞り込み調整 追加スタイル
 *
 * 既存の sb_block_goods.css には手を加えず、後読みでモーダル型絞り込みUIを実装する。
 * 必ず sb_block_goods.css より後に読み込むこと。
 *
 * 【命名方針（ルール3）】
 *  - 本機能が生成する要素のクラスはすべて "plustaFilter-" を前置する。
 *    システム側の名前空間(block-filter-- 系)や汎用名(checkbox / is-open 等)は使用しない。
 *  - 既存要素(.block-filter--filter-options / .block-filter--list-item / .js-filter-box 等)に
 *    対する指定は「上書き」であり、生成要素ではないため既存クラス名のまま参照する。
 *
 * 【スコープ方針】
 *  - 既存スタイル／既存JSのインライン指定を上書きする !important は、すべて
 *    「#frmFilterList.plustaFilter-ready」配下に限定している。
 *  - plustaFilter-ready は goods_filter_sb_plusta.js の初期化が最後まで成功したときのみ付与される。
 *    JS が途中で失敗した場合はクラスが付かず、本ファイルの上書きは原則として効かないため、
 *    既存のアコーディオンUIがそのまま正常動作する（フェイルセーフ）。
 *  - 【例外】ファイル末尾の
 *      [data-browse-mode="S"] .block-filter#block_of_filter { margin-bottom: 30px; }
 *    の 1 ルールのみ plustaFilter-ready の配下ではない。
 *    #block_of_filter は #frmFilterList の祖先のため、このクラスでは範囲を限定できない。
 *    JS の成否にかかわらず常に適用したい SP の下余白調整であり、意図的な例外とする。
 *  - 既存JS(displayFilterItems / displayFilterBox / slideToggle 等)の実行は妨げない。
 *    発火させたうえで、その結果（インラインの display / height / overflow / margin / padding）を
 *    視覚的に打ち消すことで無効化している。
 */

/* ============================================================
   既存の開閉トグルを視覚的に無効化（既存JSは通常どおり発火させる）
   ============================================================ */

/* 絞り込みオプションは通常非表示（モーダル表示時のみ表示） */
#frmFilterList.plustaFilter-ready .block-filter--filter-options {
  display: none !important;
}

/* ピルは常に表示。slideToggle が付与するインライン値も打ち消す */
#frmFilterList.plustaFilter-ready .block-filter--list-item {
  display: inline-block !important;
  height: auto !important;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: top;
  border-bottom: none;
  margin-right: 10px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* モーダル化に伴い、既存入力欄は非表示にして操作対象から外す
   （既存ハンドラは登録されたまま。発火機会を作らないだけで解除・妨害はしない） */
#frmFilterList.plustaFilter-ready .plustaFilter-source {
  display: none !important;
}

/* ============================================================
   モーダル
   ============================================================ */
.plustaFilter-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* slideToggle のインライン height / overflow / margin / padding も打ち消す */
#frmFilterList.plustaFilter-ready .block-filter--filter-options.plustaFilter-is-open {
  display: block !important;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 400px;
  height: auto !important;
  max-height: 80vh;
  overflow-y: auto !important;
  padding: 22px 20px 20px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: #fff;
  border-top: none;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  z-index: 10000;
}

/* タイトル行：タイトルが何行になっても×を縦中央に揃える */
#frmFilterList.plustaFilter-ready .plustaFilter-modal-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 20px;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-title {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0;
  padding-right: 16px;
  color: #333333;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.4;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-title::after {
  content: 'で絞り込む';
}

/* 閉じるボタン（×） */
#frmFilterList.plustaFilter-ready .plustaFilter-modal-close {
  position: relative;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-close::before,
#frmFilterList.plustaFilter-ready .plustaFilter-modal-close::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 4px;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #333333;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ============================================================
   モーダル内の選択肢（独自チェックボックス／プロキシ）
   ============================================================ */
#frmFilterList.plustaFilter-ready .plustaFilter-proxy-element {
  margin: 0 0 14px;
}

#frmFilterList.plustaFilter-ready .plustaFilter-proxy-items {
  margin: 0;
  padding: 0;
}

#frmFilterList.plustaFilter-ready .plustaFilter-proxy-input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: 0 12px 0 0;
  width: 20px;
  height: 20px;
  border: 1px solid #C9C9C9;
  border-radius: 4px;
  background: #fff;
  vertical-align: middle;
  cursor: pointer;
}

#frmFilterList.plustaFilter-ready .plustaFilter-proxy-input:checked {
  border-color: #EF7C00;
  background: #EF7C00;
}

/* チェックマーク（白） */
#frmFilterList.plustaFilter-ready .plustaFilter-proxy-input:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#frmFilterList.plustaFilter-ready .plustaFilter-proxy-label {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}

/* ============================================================
   モーダルのアクション
   ============================================================ */
#frmFilterList.plustaFilter-ready .plustaFilter-modal-actions {
  margin-top: 10px;
  text-align: center;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-submit {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  margin: 0 auto;
  padding: 0;
  background: #EF7C00;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
}

#frmFilterList.plustaFilter-ready .plustaFilter-modal-clear {
  display: block;
  margin-top: 14px;
  color: #767676;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* ============================================================
   ピル（絞り込み項目）
   ============================================================ */
#frmFilterList.plustaFilter-ready .block-filter--header .block-filter--expand-icon {
  display: none;
}

/* 絞り込み無し：薄い背景 */
#frmFilterList.plustaFilter-ready .block-filter--list-item-container {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #EF7C00;
  border-radius: 18px;
  background: #FDF1E6;
  cursor: pointer;
  height: 31px;
  line-height: 31px;
}

#frmFilterList.plustaFilter-ready .block-filter--filter-form {
  margin: 30px 15px 20px;
}

#frmFilterList.plustaFilter-ready .block-filter--filter-form .block-filter--list-item-container .block-filter--select-label {
  display: inline;
  height: auto;
  padding: 0;
  color: #EF7C00;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
}

#frmFilterList.plustaFilter-ready .block-filter--filter-form .block-filter--header h2.block-filter--header-label {
  margin: 0 0 18px;
  padding: 0;
  line-height: 1;
  font-size: 18px;
  color: #484545;
}

#frmFilterList.plustaFilter-ready .block-filter--list-item-container .block-filter--select-label::after {
  content: "で絞り込む";
}

#frmFilterList.plustaFilter-ready .block-filter--list-item-container .block-filter--expand-icon {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0 0 0 14px;
  color: #ef8200;
  line-height: 1;
  cursor: pointer;
}

/* 絞り込み有り：濃い背景＋白文字 */
#frmFilterList.plustaFilter-ready .block-filter--list-item-container.plustaFilter-active {
  border-color: #EF7C00;
  background: #EF7C00;
}

#frmFilterList.plustaFilter-ready .block-filter--filter-form .block-filter--list-item-container.plustaFilter-active .block-filter--select-label {
  color: #fff;
}

/* アイコンは i / i:before まで明示指定する
   （.fa-minus:before や .block-filter--close i:before に負けないよう詳細度を上げる） */
#frmFilterList.plustaFilter-ready .block-filter--list-item-container.plustaFilter-active .block-filter--expand-icon,
#frmFilterList.plustaFilter-ready .block-filter--list-item-container.plustaFilter-active .block-filter--expand-icon i,
#frmFilterList.plustaFilter-ready .block-filter--list-item-container.plustaFilter-active .block-filter--expand-icon i:before {
  color: #fff;
}

/* ピルの開閉アイコンは常に「＋」を表示する。
   既存JSが block-filter--close を付け外ししても影響を受けないよう CSS で固定し、
   JS側でのクラス操作を不要にしている。 */
#frmFilterList.plustaFilter-ready .block-filter--list-item-container .block-filter--expand-icon i:before {
  content: "\f067" !important;
}

/* ピルが多い場合の横スクロール（絞り込み条件チップと同じ挙動） */
#frmFilterList.plustaFilter-ready .js-filter-items {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

#frmFilterList.plustaFilter-ready .js-filter-items::-webkit-scrollbar {
  height: 6px;
  background: #F1F1F1;
}

#frmFilterList.plustaFilter-ready .js-filter-items::-webkit-scrollbar-track {
  background: #F1F1F1;
  border-radius: 2px;
}

#frmFilterList.plustaFilter-ready .js-filter-items::-webkit-scrollbar-thumb {
  background: #ef8200;
  border-radius: 2px;
}

/* ============================================================
   適用中の絞り込み条件（JSが生成する独自要素）
   ============================================================ */

/* 下余白は margin 側で確保する。
   padding-bottom だとスクロールバー(バー)の「上」に入るため、
   バー有無で見た目の余白が変わる（バー有り=0px / バー無し=10px）。
   margin に寄せることで、バーが出ても出なくても下端から常に 10px になる。 */
.plustaFilter-conditions {
  margin: 0 15px 10px;
}

.plustaFilter-conditions-head {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 18px;
  padding: 0;
}

.plustaFilter-conditions-title {
  margin: 0;
  padding: 0;
  line-height: 1;
  color: #484545;
  font-size: 18px;
  font-weight: bold;
  background: unset;
}

.plustaFilter-conditions-reset {
  color: #EF7C00;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.plustaFilter-conditions-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* バーの「上」の余白は padding ではなくスクロールバー自身の領域で確保する。
   padding-bottom だとバーが出ないときも余白が残ってしまうが、
   この方法ならバーが出ないときは余白ごと消えるため、
   バー有無にかかわらず下側は margin の 10px だけになる。
     スクロールバー高さ 16px = 上余白 10px + バー本体 6px
     track / thumb に透明な border-top を敷き、background-clip で下 6px だけ着色する */
.plustaFilter-conditions-list::-webkit-scrollbar {
  height: 16px;
  background: transparent;
}

.plustaFilter-conditions-list::-webkit-scrollbar-track {
  border-top: 10px solid transparent;
  border-radius: 2px;
  background: #F1F1F1;
  background-clip: padding-box;
}

.plustaFilter-conditions-list::-webkit-scrollbar-thumb {
  border-top: 10px solid transparent;
  border-radius: 2px;
  background: #ef8200;
  background-clip: padding-box;
}

.plustaFilter-chip {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  padding: 5px 10px 5px 10px;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
  line-height: 1;
  color: #484545;
  position: relative;
  margin: 0 13px 0 0;
}

.plustaFilter-chip-remove {
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  max-width: max-content;
  max-height: max-content;
  color: #484545;
  margin: 0 0 0 7px;
}

/* 【フェイルセーフの例外】
   #block_of_filter は #frmFilterList の祖先のため plustaFilter-ready で限定できない。
   JS の成否にかかわらず常に適用する SP の下余白調整として、意図的にスコープ外に置いている。 */
[data-browse-mode="S"] .block-filter#block_of_filter {
  margin-bottom: 30px;
}