@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Sawarabi+Mincho&display=swap");
a:link,
a:visited,
a:hover,
a:active,
a {
  text-decoration: none !important;
  color: inherit;
}

h1,
.h1-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: clamp(24px, 5vw, 50px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2,
.h2-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: 50px;
  font-weight: 500;
}

h3,
.h3-like {
  font-family: Futura, "Futura", sans-serif;
  font-size: clamp(25px, 3.5vw, 35px);
  font-weight: 700;
}

h4,
.h4-like {
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 700;
}

p,
.p-like {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 250%;
}

.p-small,
.p-16 {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 180%;
}

ul li, ol li {
  font-size: clamp(16px, 1.8vw, 18px);
}

.p-64 {
  font-size: clamp(32px, 6vw, 64px);
}

.p-60 {
  font-size: clamp(50px, 6vw, 60px);
}

.p-50 {
  font-size: clamp(20px, 2.8vw, 50px);
}

.p-45 {
  font-size: clamp(20px, 4vw, 45px);
}

.p-35 {
  font-size: clamp(18px, 3vw, 35px);
}

.p-24 {
  font-size: clamp(16px, 2vw, 24px);
}

.p-20 {
  font-size: clamp(16px, 2vw, 20px);
}

.shop-landing {
  background-color: #F3FCEC;
  margin-bottom: clamp(60px, 15vw, 210px);
}

section.item-contents {
  width: 1200px;
  max-width: 92%;
  margin: 0 auto;
  justify-content: space-between;
  padding-bottom: clamp(100px, 10vw, 150px);
}
section.item-contents .title-container.sp-only {
  display: none;
}
section.item-contents .img-col {
  width: 50%;
  max-width: 100%;
}
section.item-contents .img-col .slideshow-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  position: relative;
  margin: auto;
}
section.item-contents .img-col .slideshow-container .mySlides {
  display: none;
}
section.item-contents .img-col .slideshow-container .prev, section.item-contents .img-col .slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  font-weight: bold;
  transition: 0.6s ease;
  user-select: none;
  width: 24px;
}
section.item-contents .img-col .slideshow-container .prev img, section.item-contents .img-col .slideshow-container .next img {
  width: 100%;
}
section.item-contents .img-col .slideshow-container .prev:hover, section.item-contents .img-col .slideshow-container .next:hover {
  opacity: 0.8;
  filter: drop-shadow(2px 2px 4px #D7EBD3);
}
section.item-contents .img-col .slideshow-container .next {
  right: 17px;
}
section.item-contents .img-col .slideshow-container .prev {
  left: 17px;
}
section.item-contents .img-col .thumbnail-row {
  width: 100%;
  max-width: 700px;
  margin: clamp(14px, 3vw, 28px) auto 24px auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
section.item-contents .img-col .dot {
  cursor: pointer;
  box-sizing: border-box;
  padding: 2px;
  margin: 0 2px;
  display: block;
  transition: background-color 0.6s ease;
  min-width: clamp(100px, 30%, 200px);
  width: clamp(100px, 30%, 200px);
  aspect-ratio: 4/3;
  margin: 0 5% clamp(14px, 3vw, 28px) 0;
}
section.item-contents .img-col .dot img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
section.item-contents .img-col .dot.active {
  border: 2px solid #2F2F2F;
}
section.item-contents .img-col .dot:nth-child(3n) {
  margin-right: 0;
}
section.item-contents .img-col .dot:hover img {
  opacity: 0.7;
}
section.item-contents .img-col .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
section.item-contents .desc-col {
  justify-content: space-between;
  width: 520px;
  max-width: 50%;
  min-height: 100%;
  margin-left: clamp(20px, 5%, 100px);
}
section.item-contents .desc-col h2 {
  margin-bottom: 0.2em;
  font-family: "Noto Sans JP", Noto Sans JP, YuGothic, "Yu Gothic", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 150%;
}
section.item-contents .desc-col .unit-price {
  font-weight: 400;
  margin-bottom: 0em;
}
section.item-contents .desc-col .button-container {
  margin-top: 1.5rem;
}
section.item-contents .desc-col .shop-link {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: 0.5em 1em;
  appearance: none;
  border: unset;
  border-radius: 1.5em;
  background-color: #F0AC4A;
  color: #ffffff;
  font-size: clamp(16px, 2vw, 18px);
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
section.item-contents .desc-col .shop-link:hover {
  opacity: 0.8;
}
@media screen and (min-width: 1600px) {
  section.item-contents .desc-col h2 {
    font-size: 40px;
  }
}
@media screen and (max-width: 1000px) {
  section.item-contents {
    align-items: center;
    flex-direction: column;
  }
  section.item-contents .title-container.pc-only {
    display: none;
  }
  section.item-contents .title-container.sp-only {
    display: block;
    width: 100%;
    margin-bottom: 1em;
  }
  section.item-contents .title-container.sp-only h2 {
    line-height: 160%;
  }
  section.item-contents .img-col {
    width: 100%;
    max-width: 600px;
  }
  section.item-contents .desc-col {
    width: 100%;
    max-width: 600px;
    margin: 20px auto 0 auto;
  }
  section.item-contents .desc-col .unit-price {
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 500px) {
  section.item-contents .img-col .thumbnail-row {
    justify-content: space-around;
  }
  section.item-contents .img-col .thumbnail-row .dot {
    min-width: clamp(116px, 40vw, 250px);
    height: clamp(116px, 40vw, 250px);
    margin: 0 0 clamp(14px, 3vw, 28px) 0;
  }
}

/*# sourceMappingURL=shop.css.map */