.filter-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 21px;
    background-color: #fff;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
}
.filter-bar__inner{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-bar__inner > span{
  font-size: 100%;
  line-height: 1;
  color: #ddd;
  margin-inline: 16px;
}
.filter-bar__toggle-button {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  cursor: pointer;
    
}
.filter-bar__toggle-button p{
  font-family: SamsungOne;
  line-height: 1;
  font-weight: 700;
  font-size: 14px;
}
.filter-bar__toggle-button::before {
  content: "";
  display: block;
  background-image: url("/resources/icon/ico-filter-off.svg");
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
.filter-bar__toggle-button.filter-bar__toggle-button--on::before {
  background-image: url("/resources/icon/ico-filter-on.svg");
}

.filter-results {
    font-family: SamsungOne;
    line-height: 1;
    font-weight: 700;
    font-size: 14px;
}


.content-with-filter-wrapper{
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 0;
}

.filter-content {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 0.3s ease;
    overflow: hidden;
    background-color: #fff;
    flex-shrink: 0;
}
.filter-content--on .filter-content {
    grid-template-columns: 1fr;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
}
.filter-content__grid-fold{
    min-width: 0;
}
.filter-content__inner {
    width: 470px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 42px;
}
.filter-filters{
    height: 100%;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.filter-filters::-webkit-scrollbar{
    display: none;
}


.filter-filters__inner{
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.page-content {
    flex: 1;
}








.filter-header{ display: none;}
.filter-header .filter-header__inner { width: 100%;display: flex;justify-content: space-between; align-content: center; }
.filter-header .filter-header__title {height: fit-content; font-family: SamsungSharpSans; font-size: 22px; font-weight: 700; line-height: 1;}
.filter-header .filter-header__close-button{width: 22px;height: 22px;}
.filter-header .filter-header__close-button .icon {width: 20px;height: 20px;margin: auto;}







.filter-search {
  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  height: 42px;
  padding: 8px 16px;

  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  background-color: #fff;
}

.filter-search input {
  flex: 1;
  background: transparent;
  color: #000;
  font-family: SamsungOne, Meiryo;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  border: none;
  outline: none;
}

.filter-search .icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.filter-search .icon img {
  width: 100%;
  height: 100%;
  display: block;
}







.filter-accordion {
  margin: 0;
}
.filter-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
  color: #000;
  font-family: SamsungOne;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
}
.filter-accordion__caret {
  width: 26px;
  height: 26px;
  background: url("/resources/icon/ico_dropdown-black.svg") no-repeat center center;
  background-size: 26px 26px;
  opacity: .7;
}
.filter-accordion__caret--transition {
  transition: transform 120ms ease;
}
.filter-accordion__content {
  display: none;
  padding: 18px 0 0 0;
}
.filter-accordion--open .filter-accordion__caret {
  transform: rotate(180deg);
}
.filter-accordion__content .custom-checkbox + .custom-checkbox {
  margin-top: 16px;
}
.filter-accordion__content .custom-checkbox label {
  color: #222;
}















@media only screen and (max-width: 1440px) {






  .filter-bar {
      padding: 1.67vw 1.46vw;
  }

  .filter-bar__inner{

  }
  .filter-bar__inner > span{
      margin-inline: 1.11vw;
  }

  .filter-bar__toggle-button {
      gap: 0.14vw;
  }

  .filter-bar__toggle-button p{
    font-size: 0.97vw;
  }
  .filter-bar__toggle-button::before {
      width: 1.11vw;
      height: 1.11vw;
      background-size: 1.11vw 1.11vw;
  }

  .filter-results {
      font-size: 0.97vw;
  }


  .content-with-filter-wrapper{
      margin-bottom: 0;
  }
  .filter-content {
  }

  .filter-content.filter-content--on {

  }

  .filter-content__grid-fold{
  }

  .filter-content__inner {
      width: 32.64vw;
      padding: 1.67vw;
      gap: 2.92vw;
  }

  .filter-filters{
  }

  .filter-filters::-webkit-scrollbar{

  }

  .filter-filters__inner{
      gap: 2.22vw;
  }


  .page-content {
  }




  .filter-header{ }
  .filter-header .filter-header__inner { width: 100%;}
  .filter-header .filter-header__title {font-size: 1.53vw;}
  .filter-header .filter-header__close-button{width: 1.53vw;height: 1.53vw;}
  .filter-header .filter-header__close-button .icon {width: 1.39vw;height: 1.39vw;}



  .filter-search {
    width: 100%;
    height: 2.92vw;
    padding: 0.56vw 1.11vw;
    border-radius: 6.94vw;
  }
  .filter-search input {
    font-size: 0.97vw;
    line-height: 0.97vw;
  }
  .filter-search .icon {
    width: 1.81vw;
    height: 1.81vw;
  }
  .filter-search .icon img {
  }







  .filter-accordion {
    margin: 0;
  }
  .filter-accordion__header {
    padding: 0.42vw 0;
    font-size: 1.25vw;
    line-height: 125%;
  }
  .filter-accordion__caret {
    width: 1.81vw;
    height: 1.81vw;
    background-size: 1.81vw 1.81vw;
  }
  .filter-accordion__caret--transition {
  }
  .filter-accordion__content {
    padding: 1.25vw 0 0 0;
  }
  .filter-accordion--open .filter-accordion__caret {
  }
  .filter-accordion__content .custom-checkbox + .custom-checkbox {
    margin-top: 1.11vw;
  }
  .filter-accordion__content .custom-checkbox label {
  }




}



@media only screen and (max-width: 768px) {

  .filter-content{
      position: fixed;
      top: 0;
      height: 100vh;
      z-index: 10;
  }

  .filter-filters{
      height: 0;
      flex: 1;
      overflow: auto;
  }

  .filter-content__inner {
      width: 100vw;
      height: 100vh;
  }

  .filter-header{
      display: block;
  }








  .filter-bar {
    padding: 8.89vw 6.67vw 6.67vw;
    border-bottom: 0;
  }

  .filter-bar__inner{

  }
  .filter-bar__inner > span{
      display: none;
  }

  .filter-bar__toggle-button {
      gap: 0.56vw;
  }

  .filter-bar__toggle-button p{
    font-size: 3.89vw;
  }
  .filter-bar__toggle-button::before {
    width: 5.00vw;
    height: 5.00vw;
    background-size: 5.00vw 5.00vw;
  }

  .filter-results {
      display: none;
  }


  .content-with-filter-wrapper{
      margin-bottom: 0;
  }


  .filter-content.filter-content--on {

  }

  .filter-content__grid-fold{
  }

  .filter-content__inner {

      padding: 5.56vw 6.67vw;
      gap: 8.89vw;
  }


  .filter-filters::-webkit-scrollbar{

  }

  .filter-filters__inner{
      gap: 8.89vw;
  }


  .page-content {
  }



  .filter-header{ }
  .filter-header .filter-header__inner { width: 100%;}
  .filter-header .filter-header__title {font-size: 6.11vw;}
  .filter-header .filter-header__close-button{width: 6.11vw;height: 6.11vw;padding: 0.56vw}
  .filter-header .filter-header__close-button .icon {width: 5.00vw;height: 5.00vw;}








  .filter-search {
    width: 100%;
    height: 11.11vw;
    padding: 1.94vw 4.44vw;
    border-radius: 6.94vw;
  }

  .filter-search input {
      font-size: 3.89vw;
      line-height: 4.44vw;
  }

  .filter-search .icon {
    width: 7.22vw;
    height: 7.22vw;
  }

  .filter-search .icon img {
  }









  .filter-accordion {
    margin: 0;
  }
  .filter-accordion__header {
    padding: 0;
    font-size: 5.00vw;
    line-height: 100%;
  }

  .filter-accordion__caret {
    width: 7.22vw;
    height: 7.22vw;
    background-size: 7.22vw 7.22vw;
  }
  .filter-accordion__caret--transition {
  }
  .filter-accordion__content {
    padding: 6.67vw 0 0 0;
  }
  .filter-accordion--open .filter-accordion__caret {
  }
  .filter-accordion__content .custom-checkbox + .custom-checkbox {
    margin-top: 4.44vw;
  }
  .filter-accordion__content .custom-checkbox label {
  }





    
}