@charset "UTF-8";
/* =========================================
   search.css
   2026.10 絞り込み検索リニューアル（プルネット）
   - include_head_tag_js.tpl で全ページ読み込み（detail.css の後）
     絞り込みパネルは全ページ（SPタブバーの「探す」）で使うため。指定は ks- クラスと
     検索結果ページ（html.ks-search-page。include_head_tag_js.tpl のインラインJSで付与）に限定している
   - 絞り込みパネル（.ks-search）……HTMLは include_global_navi.tpl、動作は search.js
     ・SP（1024px以下）：左から開くドロワー。「絞り込む」で検索結果ページに移動
     ・PC：検索結果ページの「絞り込み検索」で左からスライド。チェックのたびに一覧を切り替え、一覧は右に寄せる
   - 検索結果ページ（/SHOP/list.php）
     ・キーワード欄＋「絞り込み検索」（search.js が追加する .ks-search-bar）
     ・並び順（search.js が .selectbox から取り出した .ks-search-sort）
     ・価格カテゴリ（m）で絞ったときに Shopserve が出すカテゴリのヘッダー／フッターを隠す
     ・商品一覧の見た目は category.css のまま
   - デザイン：Figma「桂新堂_修正確認カンプ」search-menu・SP-Search（SP）、検索・overlay-search-menu（PC）
   - ブレークポイント：1024px以下＝SPレイアウト（header.css と同じ）
   - クラス名は ks- で始まる（既存CSSとの衝突回避）
   - 元ファイル：shopserve/_scss/search.scss（直接このCSSを編集しないこと）
   ========================================= */
.ks-search {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
}
.ks-search__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  box-sizing: border-box;
  width: 325px;
  max-width: calc(100% - 56px - 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  text-align: left;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s, visibility 0.3s;
}
.ks-search__overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 94;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.ks-search__close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 95;
  box-sizing: border-box;
  width: 56px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.ks-search__close img {
  display: block;
  width: 34px;
  height: 34px;
}
.ks-search__head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px 15px 11px;
  background: #ededed;
}
.ks-search__submit, .ks-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}
.ks-search__submit:hover, .ks-search__clear:hover {
  opacity: 0.8;
}
.ks-search__submit {
  border: 0;
  background: #c40018;
  color: #fff;
}
.ks-search__clear {
  margin-top: 6px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.ks-search__selected {
  display: flex;
  align-items: flex-start;
  gap: 0 5px;
  min-height: 19px;
  margin: 8px 0 0;
  padding: 0;
  color: #8e8e93;
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: -0.05em;
}
.ks-search__selected-label {
  flex: none;
}
.ks-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  min-width: 0;
}
.ks-search__chip {
  display: block;
  height: 19px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 100px;
  background: #fff;
  color: #8e8e93;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: -0.05em;
  white-space: nowrap;
  cursor: pointer;
}
.ks-search__none {
  font-size: 11px;
}
.ks-search__body {
  padding: 29px 12px 40px 11px;
}
.ks-search__group + .ks-search__group {
  margin-top: 30px;
}
.ks-search__heading {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}
.ks-search__list {
  display: grid;
  gap: 10px;
  margin: 8px 0 0 2px;
  padding: 0;
  list-style: none;
}
.ks-search__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ks-search__item, .ks-search__link {
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  min-height: 35px;
  margin: 0;
  padding: 0 0 0 37px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.ks-search__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}
.ks-search__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #fff no-repeat center/11px 11px;
}
.ks-search__item:has(.ks-search__input:checked) {
  color: #775c26;
  font-weight: 600;
}
.ks-search__item:has(.ks-search__input:checked)::before {
  border-color: #988552;
  background-color: #988552;
  background-image: url(../img/ks-icon-check-white.svg);
}
.ks-search__item:has(.ks-search__input:focus-visible)::before {
  outline: 2px solid #988552;
  outline-offset: 2px;
}
.ks-search__link {
  padding-right: 30px;
}
.ks-search__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 11px;
  height: 5px;
  margin-top: -4px;
  background: url(../img/arrow-right.svg) no-repeat center/contain;
}
.ks-search__link:hover {
  color: #97864e;
}
.ks-search-open .ks-search__panel {
  transform: none;
  visibility: visible;
}
.ks-search-open .ks-search__close {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 1024px) {
  .ks-search__panel, .ks-search__overlay {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .ks-search-open .ks-search__overlay {
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (min-width: 1025px) {
  .ks-search__panel {
    bottom: 0;
    z-index: 450;
    max-width: none;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  }
  .ks-search__overlay {
    display: none;
  }
  .ks-search__close {
    right: auto;
    left: 325px;
    z-index: 450;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  }
  .ks-search__submit {
    display: none;
  }
  .ks-search__selected {
    margin-top: 0;
  }
  .ks-search__head[aria-busy=true] .ks-search__selected-label::after {
    content: "（読み込み中）";
  }
}

@media screen and (max-width: 1024px) {
  html.ks-search-open,
  html.ks-search-open body {
    overflow: hidden;
  }
}
.ks-search-page #main-column > section:has(> .header_area),
.ks-search-page #main-column > section:has(> .footer_area),
.ks-search-page #cate-main-mv,
.ks-search-page #cate-main-mv-normal {
  display: none;
}
.ks-search-page #main-column #itemList_wrap #itemList > h1 {
  display: block;
}
.ks-search-page #main-column #itemList_wrap #pager-top .selectbox {
  display: none !important;
}
.ks-search-page .ks-search-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
}
.ks-search-page .ks-search-sort select {
  box-sizing: border-box;
  width: 240px;
  height: 30px;
  margin: 0;
  padding: 0 30px 0 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff url(../img/arrow-down-black.svg) no-repeat right 10px center/10px auto;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.ks-search-page .ks-search-bar {
  display: flex;
  gap: 32px;
  margin: 45px 0 95px;
  padding: 0 15px;
}
.ks-search-page .ks-search-bar__form {
  display: flex;
  flex: 596 1 0;
  min-width: 0;
  height: 60px;
  margin: 0;
  border: 0.5px solid #666;
  box-sizing: border-box;
  background: #fff;
}
.ks-search-page .ks-search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px 0 23px;
  border: 0;
  border-radius: 0;
  outline-offset: -2px;
  background: transparent;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.ks-search-page .ks-search-bar__input::placeholder {
  color: #c4c4c4;
  opacity: 1;
}
.ks-search-page .ks-search-bar__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #333 url(../img/ks-icon-search-white.svg) no-repeat center/47px 47px;
  cursor: pointer;
}
.ks-search-page .ks-search-bar__open {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 542 1 0;
  min-width: 0;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.ks-search-page .ks-search-bar__open:hover {
  opacity: 0.8;
}
.ks-search-page #main-column #itemList_wrap #itemList:not(:has(.column-set)) {
  padding-bottom: 60px;
  text-align: center;
}
.ks-search-page #itemList_wrap.is-loading {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s;
}
@media screen and (min-width: 1025px) {
  .ks-search-page #contents {
    box-sizing: border-box;
    transition: padding-left 0.3s;
  }
  .ks-search-page.ks-search-open #contents {
    padding-left: max(0px, 411px - (100vw - 1200px) / 2);
  }
}
@media screen and (max-width: 1024px) {
  .ks-search-page .ks-search-sort {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ks-search-page .ks-search-sort select {
    width: 100%;
  }
  .ks-search-page .ks-search-bar {
    flex-direction: column;
    gap: 15px;
    margin: 32px 0 57px;
    padding: 0;
  }
  .ks-search-page .ks-search-bar__form {
    flex: none;
    height: 45px;
  }
  .ks-search-page .ks-search-bar__input {
    padding-left: 14px;
    font-size: 16px;
  }
  .ks-search-page .ks-search-bar__submit {
    width: 45px;
    background-size: 35px 35px;
  }
  .ks-search-page .ks-search-bar__open {
    flex: none;
    height: 45px;
    font-size: 15px;
  }
}