@charset "utf-8";
@layer assets {

  /* catalog_head内のレイアウト */
  .search-result .catalog_head {
    display:flex;
    align-items:center;
    justify-content:space-between
  }
  /* (デフォルトのレイアウト)カラーなし,段組なし ※ページング以外左寄せ
  .search-result .catalog_head .item_number{
    flex-grow:0;
  }
  .search-result .catalog_head .item_sort{
    flex-grow:1;
  } */

  /* (オプション)カラーをまとめる */
  .catalog_head .item_sort {
    flex-grow: 0;
  }
  .catalog_head .ByModel_Filter {
    display: flex;
    flex-grow: 1;
  }

  /* 横スライドsearch-filter 開閉ボタン */
  .search-result .catalog_head .btn-searchFilter{
    background: none;   /* 背景色をリセット */
    color: inherit;     /* 文字色を継承 */
    border: none;       /* 枠線をリセット */
    padding: 0;         /* 内側余白をリセット */
    margin: 0;          /* 外側余白をリセット */
    font: inherit;      /* フォントスタイルを継承 */
    cursor: pointer;    /* カーソルをポインターに設定 */
    outline: inherit;   /* アウトラインを継承 */

    display:flex;
    align-items:center;
    margin-right:20px;
    padding:.2em 1.5em;
    font-size:14px;
    font-weight:600;
    color:#333;
    border:1px solid #666;
    border-radius:2px;
  }
  .search-result .catalog_head .btn-searchFilter:hover{
    background-color:#eee;
  }
  body .search-result .btn-searchFilter{
    display:none;
  }
  .search-result .catalog_head .btn-searchFilter[aria-expanded="true"]{
    opacity:.5;
    border-color:transparent;
    background-color:#eee;
  }
  .search-result .catalog_head .btn-searchFilter:before{
    font-family: "Material Symbols Outlined";
    content:"\e429";
    font-style:normal;
    font-size:20px;
    margin-right:.2em;
  }

  /*-- 並び替え --*/
  .item_sort {
    margin-right: 16px;
  }
  .item_sort select {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    color: #282828;
    font-size: 12px;
    border: 1px solid var(--color-base-grey-light-high);
    border-radius: 40px;
    background: #fff;
    width: 100px;
    max-width: 125px;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
  }
  .item_sort .select {
    position: relative;
  }
  .item_sort .select::after {
    content: "\E136";
    font-family: "Phosphor";
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-base-black);
    pointer-events: none;
  }
  .item_sort select option {
    font-size: 11px;
    line-height: 11px;
    padding-right: 10px;
  }

  /* カラーでまとめる */
  .catalog_head .ByModel_Filter {
    display:flex;
    flex-direction: row-reverse;
    justify-content:flex-end;
    line-height: 30px;
  }
  .catalog_head .ByModel_Filter label {
    width: 40px;
    height: 22px;
    box-sizing: border-box;
    background: #ddd;
    border-radius: 100px;
    position: relative;
    top: 4px;
    cursor: pointer;
    transition: .3s ease;
    margin-right: 5px;
  }
  .catalog_head .ByModel_Filter label:before {
    transition: .3s ease;
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    background: white;
    left: 4px;
    top: 3px;
    box-sizing: border-box;
    border: 1px solid #D9D9D9;
    border-radius: 20px;
  }
  .catalog_head span.ByModel_FilterLabel {
    cursor: pointer;
  }
  .catalog_head .ByModel_Filter input[type=checkbox]:checked+.ByModel_FilterLabel+label:before {
    left: 19px;
  }
  .catalog_head .ByModel_Filter input[type=checkbox]:checked+.ByModel_FilterLabel+label {
    background: #000;
  }
  .catalog_head .ByModel_Filter .ByModel_FilterLabel {
    color: #747474;
  }
  @media all and (max-width: 1280px) {
    .catalog_head .ByModel_Filter .ByModel_FilterLabel {
      font-size: 12px;
      white-space: nowrap;
    }
  }
  .catalog_head .ByModel_Filter input[type=checkbox]:checked+.ByModel_FilterLabel {
    color: #000;
  }

  /*-- 商品数 --*/
  .item_number {
    margin-right: 16px;
    font-size: 28px;
    font-weight: normal;
    color: #2b2b2b;
  }
  .item_number small {
    font-size: 16px;
  }
  @media all and (max-width: 1280px) {
    .item_number {
      margin-right: 12px;
      font-size: 24px;
    }
    .item_number small {
      font-size: 14px;
    }
  }
  .item_number small:last-child{
    margin-left:.1em;
  }
  .item_muteMedium {
    display: block;
    width: 25px;
    height: 30px;
    line-height: 32px;
    float: left;
    background: #f5f5f5;
    border-radius: 4px;
    margin-right: 16px;
    margin-top: 1px;
    text-align: center;
    cursor: pointer;
  }
  .item_muteMedium:hover {
    background: #ddd;
  }
  .item_muteMedium img {
    display: inline;
    width: 5px;
    padding-top: 6px;
  }

  /*-- ページャー ※検索結果下と共用 --*/
  .catalog_paging ul {
    float: right;
    overflow: hidden;
  }
  .catalog_paging li {
    float: left;
    font-size: 14px;
    line-height: 1;
  }
  .catalog_paging li.current span {
    display: block;
    padding: 8px;
    text-align: center;
  }
  .catalog_paging li:not(.pager-prev):not(.pager-next) a {
    display: block;
    padding: 8px 4px;
    text-align: center;
    font-size: 14px;
    color: #333;
    margin: 0 4px;
    min-width: 25px;
    height: 30px;
    border-radius: 4px;
  }
  @media all and (max-width: 1280px) {
    .catalog_paging li:not(.pager-prev):not(.pager-next) a {
      font-size: 12px;
      min-width: 24px;
      height: 24px;
      padding: 6px 3px;
    }
  }
  .catalog_paging li a:hover,
  .catalog_paging li.current,
  .catalog_paging li.pager-prev a:hover,
  .catalog_paging li.pager-next a:hover {
    background-color: #e6e6e6;
    text-decoration: none;
    color: #000;
  }
  .catalog_paging li.current {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  @media all and (max-width: 1280px) {
    .catalog_paging li.current {
      min-width: 34px;
      height: 24px;
    }
  }

  /* 前へ 次へ */
  .catalog_paging .pager-prev,
  .catalog_paging .pager-next {
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .catalog_paging .pager-prev {
    margin-right: 5px;
  }
  .catalog_paging .pager-prev a,
  .catalog_paging .pager-next a {
    display: flex;
    height: 30px;
    align-items: center;
    font-size: 12px;
    color: #333;
    padding: 0 .25em;
  }
  @media all and (max-width: 1280px) {
    .catalog_paging .pager-prev a,
    .catalog_paging .pager-next a {
      height: 22px;
      width: 22px;
      padding: 0 .4em;
    }
  }
  /* 前へ 次へ アイコン */
  .catalog_paging .pager-prev a i.ph,
  .catalog_paging .pager-next a i.ph {
    font-size: 14px;
  }

}