@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/* ページ内スタイル
---------------------------------------------- */
main {
  padding: unset;
}

#mainContainer {
  max-width: 1480px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 64px;
  margin-top: 120px;
}
@media screen and (max-width: 899px) {
  #mainContainer {
    padding-bottom: 24px;
    margin-top: 40px;
  }
}
#mainContainer #mainContents {
  width: 100%;
}

#itemCategoryPc {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media screen and (max-width: 899px) {
  .sectionTitle {
    font-size: clamp(1.5rem, 1.3796296296rem + 0.4938271605vw, 1.75rem);
  }
}

/* メインビジュアル
---------------------------------------------- */
#mainVisual {
  width: 100%;
  position: relative;
  max-width: 1480px;
  margin-bottom: 48px;
}
@media screen and (max-width: 899px) {
  #mainVisual {
    width: 100vw;
  }
}
#mainVisual .mainVisualImage picture {
  display: block;
  width: 100%;
}
#mainVisual .mainVisualSwiper {
  width: 100%;
  height: 100%;
}
#mainVisual .mainVisualSwiper .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#mainVisual .mainVisualSwiper .swiper-slide img {
  width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
#mainVisual .mainVisualSwiper .swiper-button-prev,
#mainVisual .mainVisualSwiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: var(--colorMain);
  border: 1px solid var(--colorSub);
  border-radius: 50%;
  overflow: hidden;
}
#mainVisual .mainVisualSwiper .swiper-button-prev:after,
#mainVisual .mainVisualSwiper .swiper-button-next:after {
  content: unset;
}
#mainVisual .mainVisualSwiper .swiper-button-prev:hover,
#mainVisual .mainVisualSwiper .swiper-button-next:hover {
  opacity: 0.7;
}
#mainVisual .mainVisualSwiper .swiper-button-prev .arrow,
#mainVisual .mainVisualSwiper .swiper-button-next .arrow {
  color: var(--colorSub);
  width: 10px;
  height: 15px;
}
#mainVisual .mainVisualSwiper .swiper-button-prev {
  left: 5%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#mainVisual .mainVisualSwiper .swiper-button-next {
  right: 5%;
}
#mainVisual .swiper-pagination {
  bottom: -16px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
#mainVisual .swiper-pagination-bullet {
  margin: 0 8px;
  background-color: var(--colorMain);
}

/* 重要なお知らせ
---------------------------------------------- */
#importantNews {
  width: 100%;
  max-width: 1480px;
  padding-left: 24px;
  padding-right: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#importantNews .importantNewsBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--colorTextAccent);
  border-radius: 4px;
  overflow: hidden;
}
@media screen and (max-width: 899px) {
  #importantNews .importantNewsBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#importantNews .importantNewsBox .label {
  padding: 10px 16px;
  color: var(--colorSub);
  font-size: var(--size14px);
  background-color: var(--colorTextAccent);
}
#importantNews .importantNewsBox .detail {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 8px 16px;
}
#importantNews .importantNewsBox .detail .news a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 24px;
}
@media screen and (max-width: 899px) {
  #importantNews .importantNewsBox .detail .news a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
}
#importantNews .importantNewsBox .detail .news a .date {
  width: 5.6em;
  line-height: 1.6;
}
@media screen and (max-width: 899px) {
  #importantNews .importantNewsBox .detail .news a .date {
    width: unset;
  }
}
#importantNews .importantNewsBox .detail .news a .text {
  color: var(--colorTextLink);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (max-width: 899px) {
  #importantNews .importantNewsBox .detail .news a .text {
    -webkit-box-flex: unset;
        -ms-flex: unset;
            flex: unset;
    -webkit-line-clamp: 2;
  }
}
#importantNews .importantNewsSwiper {
  height: 1.2em;
}
@media screen and (max-width: 899px) {
  #importantNews .importantNewsSwiper {
    height: calc(4.8em + 8px);
  }
}
#importantNews .importantNewsSwiper .swiper-wrapper .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* おすすめ商品
---------------------------------------------- */
@media screen and (max-width: 899px) {
  #recommendation {
    margin-top: 40px;
  }
}
#recommendation #tabSwitch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 8px;
}
@media screen and (max-width: 899px) {
  #recommendation #tabSwitch {
    gap: unset;
    margin-inline: calc(50% - 50vw);
    overflow-x: scroll;
    overflow-y: hidden;
  }
}
#recommendation #tabSwitch .tabSwitchItem {
  width: calc((100% - 40px) / 6);
  height: inherit;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
  z-index: 1;
}
@media screen and (max-width: 899px) {
  #recommendation #tabSwitch .tabSwitchItem {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 160px;
  }
}
#recommendation #tabSwitch .tabSwitchItem .tabSwitchItemBtn {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  font-weight: bold;
  color: var(--colorTextMain);
  background-color: #D2D2D2;
  border-left: 1px solid var(--colorBorder);
  border-top: 1px solid var(--colorBorder);
  border-right: 1px solid var(--colorBorder);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 16px 8px;
}
@media screen and (max-width: 899px) {
  #recommendation #tabSwitch .tabSwitchItem .tabSwitchItemBtn {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    font-size: var(--size14px);
    padding: 16px;
  }
}
#recommendation #tabSwitch .tabSwitchItem.isActive .tabSwitchItemBtn {
  background-color: var(--colorBackGround);
  color: var(--colorMain);
}
#recommendation #tabSwitch .tabSwitchItem.isActive .tabSwitchItemBtn::before {
  background-color: var(--colorMain);
}
#recommendation .tabContents {
  display: none;
  position: relative;
  border-top: 1px solid var(--colorBorder);
}
#recommendation .tabContents.isActive {
  display: block;
}
#recommendation .tabContents .tabContentsInner {
  max-width: 1480px;
  margin-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
}
#recommendation .textLink {
  text-align: right;
}
#recommendation .recommendationContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 48px 20px;
  margin-top: 24px;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer {
    gap: 24px 16px;
    margin-top: 16px;
  }
}
#recommendation .recommendationContainer .recommendationBox {
  width: calc((100% - 40px) / 3);
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox {
    width: calc((100% - 16px) / 2);
  }
}
#recommendation .recommendationContainer .recommendationBox a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
#recommendation .recommendationContainer .recommendationBox a .areaImage {
  position: relative;
  aspect-ratio: 464/344;
}
#recommendation .recommendationContainer .recommendationBox a .areaImage .image {
  width: 100%;
  height: 344px;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox a .areaImage .image {
    height: 100%;
  }
}
#recommendation .recommendationContainer .recommendationBox a .areaImage .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#recommendation .recommendationContainer .recommendationBox a .areaImage .category {
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: var(--colorMain);
  font-weight: bold;
  line-height: 1;
  background-color: var(--colorBackGround);
  border-radius: 2px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5em 1em;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox a .areaImage .category {
    font-size: var(--size12px);
  }
}
#recommendation .recommendationContainer .recommendationBox a .areaText {
  margin-top: 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#recommendation .recommendationContainer .recommendationBox a .areaText .summary {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox a .areaText .summary {
    font-size: var(--size14px);
  }
}
#recommendation .recommendationContainer .recommendationBox a .areaText .price {
  font-weight: bold;
  font-size: var(--size24px);
  line-height: 1;
  text-align: right;
  margin-top: 8px;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox a .areaText .price {
    font-size: var(--size20px);
  }
}
#recommendation .recommendationContainer .recommendationBox a .areaText .price sub {
  font-size: var(--size12px);
  font-weight: bold;
}
@media screen and (max-width: 899px) {
  #recommendation .recommendationContainer .recommendationBox a .areaText .price sub {
    font-size: var(--size12px);
  }
}
#recommendation .recommendationContainer .recommendationBox a .areaText .price sub span {
  display: inline-block;
  font-weight: bold;
}

/* 新着商品
---------------------------------------------- */
#newProducts {
  background-color: #F5F5F5;
  margin-top: 120px;
  overflow-x: hidden;
}
#newProducts .newProductsSwiperWrap {
  position: relative;
}
@media screen and (max-width: 899px) {
  #newProducts .newProductsSwiperWrap {
    margin-inline: calc(50% - 50svw);
  }
}
@media screen and (min-width: 900px) {
  #newProducts .newProductsSwiperWrap {
    padding-left: 104px;
    padding-right: 104px;
  }
}
#newProducts .newProductsInner {
  padding-top: 40px;
  padding-bottom: 80px;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}
#newProducts .newProductsSwiper {
  position: unset;
  height: 100%;
  width: 100%;
}
#newProducts .newProductsSwiper .swiper-slide .image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}
#newProducts .newProductsSwiper .swiper-slide .image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#newProducts .newProductsSwiper .swiper-slide .text {
  margin-top: 8px;
}
#newProducts .newProductsSwiper .swiper-button-prev,
#newProducts .newProductsSwiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: var(--colorMain);
  border: 1px solid var(--colorSub);
  border-radius: 50%;
  overflow: hidden;
}
#newProducts .newProductsSwiper .swiper-button-prev:after,
#newProducts .newProductsSwiper .swiper-button-next:after {
  content: unset;
}
#newProducts .newProductsSwiper .swiper-button-prev:hover,
#newProducts .newProductsSwiper .swiper-button-next:hover {
  opacity: 0.7;
}
#newProducts .newProductsSwiper .swiper-button-prev .arrow,
#newProducts .newProductsSwiper .swiper-button-next .arrow {
  color: var(--colorSub);
  width: 10px;
  height: 15px;
}
#newProducts .newProductsSwiper .swiper-button-prev {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
/* お知らせ
---------------------------------------------- */
#news {
  margin-top: 80px;
}
#news .newsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
#news .newsList .newsListItem a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 899px) {
  #news .newsList .newsListItem a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
  }
}
#news .newsList .newsListItem a .newsDate {
  width: 5.6em;
  line-height: 1.5;
}
@media screen and (max-width: 899px) {
  #news .newsList .newsListItem a .newsDate {
    width: unset;
  }
}
#news .newsList .newsListItem a .newsTitle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--colorTextLink);
  line-height: 1.5;
}
#news .textLink {
  text-align: right;
}

/* フリーページ
---------------------------------------------- */
#freePage {
  padding-top: 40px;
}
#freePage .fpContents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
#freePage .fpContents .bannerContainer {
  outline: 1px solid var(--colorBorder);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 3/1;
}
#freePage .fpContents .bannerContainer img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}/*# sourceMappingURL=index.css.map */