@charset "UTF-8";

/* -----------------------------------------------
mv__wrap
----------------------------------------------- */
.mv__wrap {}


.swiper-pagination-bullet-active {
  background: #06D8B8;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  color: #747474;
}


@media (max-width: 767px) {

}

@media (min-width: 768px) {

  .mv__wrap {
    margin-bottom: 36px;
    padding-top: 40px;
  }
  .mv__wrap .swiper-controller {
    position: relative;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1ch;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    top: -28px;
  }
  .swiper-controller > div {
    display: inline-block;
    position: relative;
    width: 264px;
    top: 12px;
  }
  .swiper-controller > div > .swiper-pagination {
    pointer-events: none;
  }
  .swiper-pagination .swiper-pagination-bullet {
    pointer-events: all;
  }
  .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 0;
  }
  .swiper-button-next,
  .swiper-button-prev {
    width: 20px;
    height: 20px;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 14px;
  }
  

}  




/* 

<div class="swiper-controller">
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
</div>

 */







/* -----------------------------------------------
search__fixed__btn
----------------------------------------------- */
.search__fixed__btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}
.search__fixed__btn a {
  background: linear-gradient(to right,  #008dcc 0%,#06d8b8 100%);
  border-radius: 50vh;
  color: #fff;
  display: block;
  position: relative;
  width: 180px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1ch;
  font-size: 16px;
  padding-left: 1.8em;
  letter-spacing: .04em;
}
.search__fixed__btn a i {
  background-color: #fff;
  background-image: url(../images/common/icon_search_g.svg);
  background-position: 50%;
  background-size: 54%;
  background-repeat: no-repeat;
  border-radius: 50vh;
  aspect-ratio: 1 / 1;
  width: 36px;
  display: inline-block;
  position: absolute;
  right: 12px;
  top: calc(50% - 18px);
}

/* <div class="search__fixed__btn"><a href="#">商品を探す<i></i></a></div> */



/* -----------------------------------------------
__head
----------------------------------------------- */

div[class$="__head"] {}

@media (max-width: 767px) {

  div[class$="__head"] {
    margin-bottom: 36px;
    padding-top: 38px;
  }

}
 
@media (min-width: 768px) {

  div[class$="__head"] {
    margin-bottom: 36px;
    padding-top: 7px;
  }

}



/* -----------------------------------------------
search__head
----------------------------------------------- */
.search__head {
  display: block;
}
 @media (max-width: 767px) {
   .search__menu__wrap > .search__menu__inner > .search__head {}
   
 }
 
 @media (min-width: 768px) {
   .search__menu__wrap > .search__menu__inner > .search__head {}

 }



/* -----------------------------------------------
section__banner
----------------------------------------------- */
.section__banner a {
  display: block;
  margin-inline: auto;
}

@media (max-width: 767px) {

  .section__banner {
    padding: 20px 20px;
    display: none;
  }

}
 
@media (min-width: 768px) {

  .section__banner {
    padding: 40px 0;
  }
  .section__banner a {
    max-width: 720px;
  }

}



/* -----------------------------------------------
section__feature
----------------------------------------------- */
.section__feature {}
.feature__tab__btn button {
  border: 0;
  background: #333;
  color: #fff;
  border-radius: 50vh;
}
.feature__tab__item .feature__list li span {
  background: #333;
  color: #fff;
  border-radius: 50vh;
  display: inline-block;
}

@media (max-width: 767px) {

  .section__feature {
    padding: 0 0 80px;
  }
  .feature__tab__btn__wrap {
    margin-bottom: 20px;
  }
  .feature__tab__btn__wrap .feature__tab__btn {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 7px 10px;
  }
  .feature__tab__btn button {
    font-size: var(--px12);
    line-height: 28px;
    padding: 0 .74em;
  }
  .feature__tab__item .feature__list__wrap {
    margin-bottom: 56px;
  }
  .feature__tab__item .feature__list__wrap ul.feature__list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 15px;
  }
  .feature__list li {
    width: calc((100% - 15px) / 2);
    margin-bottom: 6px;
  }
  .feature__list li picture {
    margin-bottom: 8px;
  }
  .feature__list li span {
    font-size: var(--px12);
    line-height: 26px;
    padding: 0 .74em;
    margin-bottom: 4px;
  }
  .feature__list li p {
    font-size: var(--px12);
    line-height: 1.714;
  }

}

@media (min-width: 768px) {

  .section__feature {
    padding: 30px 0 80px;
  }
  .feature__tab__btn__wrap {
    margin-bottom: 30px;
  }
  .feature__tab__btn__wrap .feature__tab__btn {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 15px;
  }
  .feature__tab__btn button {
    font-size: 12px;
    line-height: 28px;
    padding: 0 .74em;
  }
  .feature__tab__item .feature__list__wrap ul.feature__list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    /* gap: 2.857%; */
    gap: 32px;
  }
  .feature__list li {
    /* width: 31.428%; */
    width: calc((100% - 64px) / 3);
    margin-bottom: 34px;
  }
  .feature__list li picture {
    margin-bottom: 15px;
  }
  .feature__list li span {
    font-size: 12px;
    line-height: 28px;
    padding: 0 .74em;
    margin-bottom: 6px;
  }
  .feature__list li p {
    font-size: 14px;
    line-height: 1.714;
  }

}



/* -----------------------------------------------
section__topics
----------------------------------------------- */
.section__topics {
  background: #F6F6F6;
}
.topics__list li picture img {
  width: 100%;
  height: auto;
}

.topics__list div time {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.topics__list div span {
  border: 1px solid #222;
}

 @media (max-width: 767px) {

  .section__topics {
    padding: 30px 0 80px;
  }
  .topics__list__wrap {
    margin-bottom: 46px;
  }
  .topics__list li {
    margin-bottom: 36px;
  }
  .topics__list li picture {
    margin-bottom: 15px;
  }
  .topics__list li div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
  }
  .topics__list li time {
    font-size: var(--px16);
    margin-right: 1.4em;
  }
  .topics__list li span {
    font-size: var(--px13);
    line-height: 22px;
    padding: 0 .74em;
  }
  .topics__list li p {
    font-size: var(--px14);
    line-height: 1.714;
    padding-top: 1px;
  }

 }
 
 @media (min-width: 768px) {

  .section__topics {
    padding: 30px 0 80px;
  }
  .topics__list__wrap ul.topics__list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 32px;
  }
  .topics__list li {
    width: calc((100% - 64px) / 3);
    margin-bottom: 30px;
  }
  .topics__list li picture {
    margin-bottom: 15px;
  }
  .topics__list li div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
  }
  .topics__list li time {
    margin-right: 30px;
  }
  .topics__list li span {
    font-size: 12px;
    line-height: 22px;
    padding: 0 .74em;
  }
  .topics__list li p {
    font-size: 14px;
    line-height: 1.714;
    padding-top: 5px;
  }

 }



/* -----------------------------------------------
section__about
section__blog
----------------------------------------------- */
.section__about {}
.section__blog {
  background: #F6F6F6;
}
.blog__list > * .fs-pt-column__description {
  display: none;
}

@media (max-width: 767px) {

  .section__about {
    padding: 40px 0 80px;
    position: relative;
  }
  .section__about__img {
    width: calc(100% + 20px);
    margin-left: -20px;
    margin-bottom: 68px;
  } 
  .section__about__cap h3 {
    font-size: var(--px20);
    line-height: 2;
    margin-bottom: 16px;
  }
  .section__about__cap p {
    font-size: var(--px13);
    line-height: 2.16;
    margin-bottom: 30px;
  }
  .section__about__cap .about__link__fx {
    padding-top: 18px;
  }
  .about__link__fx div {
    max-width: 200px;
    margin-inline: auto;
    margin-bottom: 16px;
  }
  .about__link__fx div a {
    width: 100%;
  }

  /* blog */
  .section__blog {
    padding: 30px 0 60px;
  }
  .blog__list__wrap {
    margin-bottom: 30px;
  }
  .blog__list__wrap .blog__list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 15px;
  }
  .blog__list > * {
    width: calc((100% - 15px) / 2);
    margin-bottom: 10px;
  }
  .blog__list > * .fs-pt-column__image {
    margin-bottom: 6px;
  }
  .blog__list > * .fs-pt-column__heading {
    font-size: var(--px12);
    line-height: 1.666;
    padding-top: 2px;
  }

}
 
@media (min-width: 768px) {

  .section__about {
    padding: 206px 0 114px;
    position: relative;
  }
  .section__about__img {
    position: absolute;
    top: 120px;
    left: 50%;
    max-width: 1440px;
    width: 100%;
    transform: translateX(-50%);
  } 
  .section__about__img picture {
    width: 56%;
    max-width: 750px;
  }
  .section__about .section__about__inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: stretch;
    align-items: stretch;
  }
  .section__about__cap {
    width: 37.5%;
  }
  .section__about__cap h3 {
    font-size: 20px;
    line-height: 1.19;
    margin-bottom: 27px;
  }
  .section__about__cap p {
    font-size: 14px;
    line-height: 2.428;
    margin-bottom: 30px;
  }
  .section__about__cap .about__link__fx {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
    padding-top: 36px;
  }
  .about__link__fx div {
    width: 47.62%;
    max-width: 200px;
  }
  .about__link__fx div a {
    width: 100%;
  }

  /* blog */
  .section__blog {
    padding: 30px 0 60px;
  }
  .blog__list__wrap .blog__list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 32px;
  }
  .blog__list > * {
    width: calc((100% - 64px) / 3);
    margin-bottom: 46px;
  }
  .blog__list > * .fs-pt-column__image {
    margin-bottom: 6px;
  }
  .blog__list > * .fs-pt-column__heading {
    font-size: 14px;
    line-height: 1.714;
    padding-top: 5px;
  }

}



/* -----------------------------------------------
recommend__tab
----------------------------------------------- */
 
.recommend__tab ul[class$="__tab__btn"] button {
  background: #F3F3F3;
  border: 0;
}
.recommend__tab ul[class$="__list"] li dl dd {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.recommend__tab ul[class$="__list"] li dl dd:before {
  content: "税込価格";
  display: block;
}



@media (max-width: 767px) {

  .recommend__tab div[class$="__tab__btn__wrap"] {
    margin-bottom: 30px;
  }
  .recommend__tab div[class$="__tab__btn__wrap"] ul[class$="__tab__btn"] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 7px 8px;
  }
  .recommend__tab ul[class$="__tab__btn"] li {
  width: calc((100% - 8px) / 2);
  }
  .recommend__tab ul[class$="__tab__btn"] button {
    font-size: 14px;
    height: 48px;
    width: 100%;
  }
  .recommend__tab ul[class$="__tab__btn"] button.is-active {
    background: #222;
    color: #fff;
    border-bottom: 3px solid #06D8B8;
  }
  .recommend__tab div[class$="__tab__item"] div[class$="__list__wrap"] {
    overflow: scroll;
    margin-bottom: 16px;
  }
  .recommend__tab div[class$="__tab__item"] div[class$="__list__wrap"] ul[class$="__list"] {
    display: grid;
    grid-template-columns: repeat(6, 30.77%);
    gap: 0 26px;
  }
  .recommend__tab ul[class$="__list"] li {
    display: inline-flex;
    flex-flow: column;
    word-break: break-all;
    width: 100%;
    margin-bottom: 40px;
  }
  .recommend__tab ul[class$="__list"] li figure img {
    margin-bottom: 6px;
  }
  .recommend__tab ul[class$="__list"] li dl dt  {
    font-size: 14px;
    line-height: 1.714;
    margin-bottom: 8px;
  }
  .recommend__tab ul[class$="__list"] li dl dd {
    font-size: 20px;
    line-height: 1;
  }
  .recommend__tab ul[class$="__list"] li dl dd:before {
    font-size: 12px;
    margin-bottom: 8px;
  }

}

@media (min-width: 768px) {

  .recommend__tab div[class$="__tab__btn__wrap"] {
    margin-bottom: 30px;
  }
  .recommend__tab div[class$="__tab__btn__wrap"] ul[class$="__tab__btn"] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 8px;
  }
  .recommend__tab ul[class$="__tab__btn"] li {
  width: calc((100% - 40px) / 6);
  }
  .recommend__tab ul[class$="__tab__btn"] button {
    font-size: 14px;
    height: 40px;
    width: 100%;
  }
  .recommend__tab ul[class$="__tab__btn"] button.is-active {
    background: #222;
    color: #fff;
    border-bottom: 3px solid #06D8B8;
  }
  .recommend__tab div[class$="__tab__item"] div[class$="__list__wrap"] ul[class$="__list"] {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: stretch;
    align-items: stretch;
    gap: 31px;
  }
  .recommend__tab ul[class$="__list"] li {
    width: calc((100% - 155px) / 6);
    margin-bottom: 40px;
  }
  .recommend__tab ul[class$="__list"] li figure img {
    margin-bottom: 6px;
  }
  .recommend__tab ul[class$="__list"] li dl dt  {
    font-size: 14px;
    line-height: 1.714;
    margin-bottom: 8px;
  }
  .recommend__tab ul[class$="__list"] li dl dd {
    font-size: 20px;
    line-height: 1;
  }
  .recommend__tab ul[class$="__list"] li dl dd:before {
    font-size: 12px;
    margin-bottom: 8px;
  }

}



/* -----------------------------------------------
section__ranking
----------------------------------------------- */
.ranking__list__wrap .fr3-productListStatic {
  counter-reset: number;
}
.ranking__list__wrap .fr3-item {
  position: relative;
}
.ranking__list__wrap .fr3-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  color: #fff;
  background: #BEBEBE;
  text-align: center;
  counter-increment: number;
  content: counter(number);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}
.ranking__list__wrap .fr3-item:nth-child(1):before {
  background: #D0C14D;
}
.ranking__list__wrap .fr3-item:nth-child(2):before {
  background: #83A7B4;
}
.ranking__list__wrap .fr3-item:nth-child(3):before {
  background: #967F40;
}

@media (max-width: 767px) {

  .section__ranking {
    padding: 0 0 60px !important;
  }
  .ranking__list__wrap .fr3-item:before {
    width: 25px;
    font-size: var(--px16);
    line-height: 25px;
  }

}
 
@media (min-width: 768px) {

  .section__ranking {
    padding: 72px 0 16px !important;
  }
  .ranking__list__wrap .fr3-item:before {
    width: 35px;
    font-size: 22px;
    line-height: 35px;
  }

}



/* -----------------------------------------------
section__newarrival
----------------------------------------------- */
.section__newarrival {}
.section__newarrival__inner .newarrival__head {
  border-top: 1px solid #E4E4E4;
}

@media (max-width: 767px) {

  .section__newarrival {
    padding: 0 0 80px;
  }

}
 
 @media (min-width: 768px) {

  .section__newarrival {
    padding: 30px 0 80px;
  }
  .section__newarrival .newarrival__head {
    padding-top: 36px;
  }

 }



/* -----------------------------------------------
section__outlet
----------------------------------------------- */
.section__outlet {}
.section__outlet__inner .outlet__head {
  border-top: 1px solid #E4E4E4;
}
.section__outlet .fs-c-productListItem__control {
  display: none;
}
.section__outlet .fs-c-productListCarousel__list__item:nth-child(n + 7) {
  display: none;
}

@media (max-width: 767px) {

  .section__outlet {
    padding: 0 0 80px;
  }

}

@media (min-width: 768px) {

  .section__outlet {
    padding: 0 0 80px;
  }
  .section__outlet  .outlet__head {
    padding-top: 37px;
  }

}



/* -----------------------------------------------
section__info
----------------------------------------------- */
.section__info {
  background: #F6F6F6;
}
.news__list__wrap {}
.news__list__wrap ul.news__list {}
.news__list li {
  border-bottom: 1px solid #CDCDCD;
}
.news__list a {
  display: block;
}
.news__list a div time {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
.news__list a div p {
  letter-spacing: .04em;
  margin: 0;
}


@media (max-width: 767px) {

  .section__info {
    padding: 0 0 80px;
  }
  .news__list__wrap {
    margin-bottom: 30px;
  }
  .news__list li a {
    padding: 12px 0 14px;
  }
  .news__list a div time {
    font-size: var(--px16);
    line-height: 24px;
    margin-bottom: 3px;
    display: block;
  }
  .news__list a div p {
    font-size: var(--px13);
    line-height: 24px;
  }

}
 
@media (min-width: 768px) {

  .section__info {
    padding: 30px 0 80px;
  }
  .news__list__wrap {
    margin-bottom: 40px;
  }
  .news__list li a {
    padding: 13px 0 12px;
  }
  .news__list a div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
  .news__list a div time {
    font-size: 16px;
    line-height: 24px;
    margin-right: 35px;
  }
  .news__list a div p {
    font-size: 14px;
    line-height: 24px;
  }

}