@charset "utf-8";

.product02,
.product03,
.product04 {
  background-image: url(../img/noise.png);
}

.product04 span,
.product05 div p span {
  color: #92993F;
}

.product02 dt,
.product04 span {
  font-weight: bold;
}

.product03,
.product04 {
  background-color: #2A2B1B;
}

.product02,
.product04 {
  overflow: hidden;
}

/* ----------------------------
           product01
----------------------------- */
.product01 {
  background-image: url(../img/productspage.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: relative;
}

.product01 h1 {
  text-align: center;
  padding-top: .5em;
}

/* ----------------------------
           product02
  ----------------------------- */
.product02 {
  width: 100%;
  padding: 5em 3em;
}

.product02 .flexbox,
.product02 .flexbox-rowreverse {
  gap: 3em;
  margin-top: 3em;
}

.product02 img {
  box-shadow: 2px 2px 15px #2A2B1B;
  width: 48%;
}

.product02 dl {
  letter-spacing: .1em;
  width: 100%;
}

.product02 dt {
  font-size: clamp(20px, 1.5vw, 25px);
  color: #92993F;
}

.product02 dd {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  margin-top: 1em;
}

/* ----------------------------
           product03
  ----------------------------- */
.product03 {
  width: 100%;
  height: 35vh;
}

.product03Img {
  background-image: url(../img/productspage02.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 55vh;
  animation: parallax linear both;
  animation-timeline: view();
}

@keyframes parallax {
  from {
    background-position: center 0;
  }

  to {
    background-position: center -500px;
  }
}

/* ----------------------------
           product04
  ----------------------------- */
.product04 {
  width: 100%;
  padding: 5em;
  position: relative;
}

.product04 p {
  letter-spacing: .1em;
  width: 100%;
  margin: 0 auto;
}

.product04 p:nth-of-type(1) {
  line-height: 1.7;
}

.product04 p:nth-of-type(2) {
  line-height: 1.5;
  margin-top: 2em;
}

.product04Img {
  width: 30%;
  position: absolute;
  bottom: 1%;
  right: 1%;
}

/* ----------------------------
           product05
  ----------------------------- */
.product05 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/noise.png), linear-gradient(#2A2B1B, #8E915D);
  width: 100%;
  height: 100vh;
}

.product05 .flexbox {
  gap: 5em;
}

.product05 p {
  font-family: "Playfair Display", serif;
  font-size: clamp(60px, 7vw, 95px);
}

.product05 div p span {
  font-size: clamp(70px, 10vw, 120px);
}

.product05 .LINE {
  display: block;
  background-color: #EAEBD9;
  width: 3px;
  height: 60px;
  margin: 0 auto;
}

/* ----------------------------
           レスポンシブ
----------------------------- */
@media(max-width:800px) {
/* ----------------------------
           product01
----------------------------- */
  .product01 h1 {
   padding-top: 1em;
  }

/* ----------------------------
         product02
----------------------------- */
  .product02 {
    padding: 3em 1em;
  }

  .product02 .flexbox,
  .product02 .flexbox-rowreverse {
    display: block;
    margin-top: 3em;
  }

  .product02 img {
    display: block;
    width: 90%;
    margin: 3em auto 1em;
  }

  .product02 dl {
    width: 100%;
  }

  .product02 dt {
    font-size: clamp(17px, 5vw, 20px);
  }

  .product02 dd {
    font-size: clamp(14px, 3vw, 16px);
  }

  /* ----------------------------
         product03
  ----------------------------- */
  .product03 {
    height: 30vh;
  }
  .product03Img {
    background-position: center;
    background-size: cover;
    height: 30vh;
    animation: none;
    animation-timeline: none;
  }

  /* ----------------------------
         product04
  ----------------------------- */
  .product04 {
    padding: 0 1em 5em;
  }

  .product04 p {
    font-size: clamp(14px, 3vw, 16px);
    letter-spacing: .1em;
    width: 100%;
  }

  .product04 p:nth-child(2) {
    padding-top: 3em;
  }

  .product04Img {
    width: 95%;
    position: absolute;
    bottom: 40%;
    right: 0;
    left: 0;
  }

  /* ----------------------------
         product05
  ----------------------------- */
  .product05 {
    height: auto;
    padding: 5em 0;
  }

  .product05 .flexbox {
    display: block;
  }

  .product05 p {
    font-size: clamp(40px, 10vw, 60px);
    text-align: center;
  }

  .product05 div p span {
    font-size: clamp(50px, 15vw, 70px);
  }

  .product05 .LINE {
    width: 2px;
    height: 40px;
  }

}