@charset "UTF-8";
/* ==========================================================================
   variables
========================================================================== */
/*===========================================
# Color
/*===========================================*/
/*===========================================
# Font Famiry
/*===========================================*/
/*===========================================
# root
/*===========================================*/
/* ==========================================================================
   function
========================================================================== */
/* ==========================================================================
  mixin
========================================================================== */
/* --------------------------------------------------------------------------
  media query (SP（小）→ PC（大）の順に適用)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  arrow 
-------------------------------------------------------------------------- */
/*# アロー
/*===========================================*/
/* --------------------------------------------------------------------------
  login icon
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  button size
-------------------------------------------------------------------------- */
/*===========================================
# 製品
/*===========================================*/
.p-product-exit {
  background: #F7F5F1;
  padding: 24px;
}
@media screen and (max-width: 767px) {
  .p-product-exit {
    padding: 4.2666666667vw;
  }
}

.p-product-slider {
  background: #F7F5F1;
  padding: 16px;
}
@media screen and (max-width: 767px) {
  .p-product-slider {
    padding: 2.1333333333vw;
  }
}
.p-product-slider .p-product-slider__main {
  position: relative;
}
.p-product-slider .p-product-slider__main .p-product-slider__image {
  aspect-ratio: 1/1;
}
.p-product-slider .p-product-slider__main .p-product-slider__image img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-product-slider .p-product-slider__main .swiper-slide {
  opacity: 0.5;
}
.p-product-slider .p-product-slider__main .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.p-product-slider .p-product-slider__main .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.p-product-slider .p-product-slider__main .swiper-slide a img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-product-slider .p-product-slider__thumbnail {
  margin-top: 16px;
}
@media screen and (max-width: 767px) {
  .p-product-slider .p-product-slider__thumbnail {
    margin-top: 3.2vw;
  }
}
.p-product-slider .p-product-slider__thumbnail .swiper-slide {
  cursor: pointer;
  aspect-ratio: 1/1;
  background-color: #fff;
}
.p-product-slider .p-product-slider__thumbnail .swiper-slide img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-product-slider .p-product-slider__thumbnail .swiper-slide.swiper-slide-thumb-active {
  border: 1px solid #0089A8;
}
.p-product-slider .swiper-other {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2;
  padding: 0 36px;
}
@media screen and (max-width: 767px) {
  .p-product-slider .swiper-other {
    padding: 0 2.1333333333vw;
  }
}
.p-product-slider .p-product-slider__controls {
  display: flex;
  justify-content: space-between;
}
.p-product-slider .control-button-prev, .p-product-slider .control-button-next {
  position: relative;
  width: 48px;
  height: 48px;
  background: #0089A8;
  border-radius: 50%;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-product-slider .control-button-prev, .p-product-slider .control-button-next {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.p-product-slider .control-button-prev::before, .p-product-slider .control-button-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  .p-product-slider .control-button-prev::before, .p-product-slider .control-button-next::before {
    width: 2.1333333333vw;
    height: 2.1333333333vw;
  }
}
.p-product-slider .control-button-prev::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}
.p-product-slider .control-button-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-product-card {
  display: flex;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .p-product-card {
    flex-direction: column;
    gap: 4.2666666667vw;
  }
}

.p-product-card__item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 48px) / 3);
}
@media screen and (max-width: 767px) {
  .p-product-card__item {
    width: 100%;
  }
}

.p-product-card__message {
  height: calc(100% - 194px);
  padding: 24px;
  background: #F7F5F1;
}
@media screen and (max-width: 767px) {
  .p-product-card__message {
    height: calc(100% - 51.7333333333vw);
    padding: 6.4vw;
  }
}

.p-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  .p-product-list {
    gap: 3.2vw;
  }
}

.p-product-list__item {
  width: calc((100% - 82px) / 4);
  border: 1px solid #D5D5D6;
  padding: 16px;
  transition: all 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .p-product-list__item {
    width: calc((100% - 3.2vw) / 2);
    padding: 2.1333333333vw;
  }
}
.p-product-list__item:has(a) {
  padding: 0;
}
.p-product-list__item:has(a) a {
  display: block;
  padding: 16px;
}
@media screen and (max-width: 767px) {
  .p-product-list__item:has(a) a {
    padding: 2.1333333333vw;
  }
}
.p-product-list__item:hover {
  opacity: 0.8;
}

.p-product-list__image {
  aspect-ratio: 1/1;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .p-product-list__image {
    margin-bottom: 4.2666666667vw;
  }
}
.p-product-list__image img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-product-list__zoom {
  position: relative;
  padding-right: 30px;
}
@media screen and (max-width: 767px) {
  .p-product-list__zoom {
    padding-right: 8vw;
  }
}
.p-product-list__zoom::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-image: url(../img/cmn/zoom-icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 767px) {
  .p-product-list__zoom::after {
    width: 6.4vw;
    height: 6.4vw;
  }
}

.p-product-list__arrow {
  position: relative;
  padding-right: 30px;
}
@media screen and (max-width: 767px) {
  .p-product-list__arrow {
    padding-right: 8vw;
  }
}
.p-product-list__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(45deg);
  border-top: 1px solid #2C2D31;
  border-right: 1px solid #2C2D31;
  width: 10px;
  height: 10px;
}
@media screen and (max-width: 767px) {
  .p-product-list__arrow::after {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
  }
}
/*# sourceMappingURL=maps/product.css.map */