@charset "UTF-8";

@keyframes cycle1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-359deg);
  }
}

/* -------------------------------------------- */
.lp_wrap .offer .btn1 {
  position: absolute;
  top: 36%;
  left: -1.6%;
  width: 103.2%;
}

.lp_wrap .offer .btn2 {
  position: absolute;
  top: 47.25%;
  left: 10.4%;
  width: 79.2%;
}

.lp_wrap .offer .btn3 {
  position: absolute;
  top: 77.4%;
  left: 10.4%;
  width: 79.2%;
}

/* -------------------------------------------- */
.lp_wrap .origin .cont li {
  position: absolute;
  opacity: 0;
}

.lp_wrap .origin .cont li:nth-child(1) {
  top: 82%;
  left: 9.1%;
  width: 81.733%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .origin .cont li:nth-child(2) {
  top: 89.2%;
  left: 8.7%;
  width: 82.667%;
  transition: 0.8s 0.3s;
  transform: translateY(20%);
}

.lp_wrap .origin .cont li.trigger.move,
.lp_wrap .origin .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .aspiration .cycle {
  position: absolute;
  top: 1.8%;
  left: 58%;
  width: 40%;
  animation: 16s cycle1 linear infinite;
}

.lp_wrap .aspiration .photo {
  position: absolute;
  top: 10.9%;
  left: 15.334%;
  width: 69.333%;
}

.lp_wrap .aspiration .cont li {
  position: absolute;
  opacity: 0;
}

.lp_wrap .aspiration .cont li:nth-child(1) {
  top: 70.8%;
  left: 9.1%;
  width: 81.733%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .aspiration .cont li:nth-child(2) {
  top: 80.6%;
  left: 8.7%;
  width: 82.667%;
  transition: 0.8s 0.3s;
  transform: translateY(20%);
}

.lp_wrap .aspiration .cont li.trigger.move,
.lp_wrap .aspiration .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .research .cycle {
  position: absolute;
  top: 2.1%;
  left: 8.7%;
  width: 40%;
  animation: 16s cycle1 linear infinite;
}

.lp_wrap .research .photo {
  position: absolute;
  top: 13.4%;
  left: 24.6%;
  width: 72%;
}

.lp_wrap .research .cont li {
  position: absolute;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .research .cont li:nth-child(1) {
  top: 65.2%;
  left: 30%;
  width: 61.2%;
  transition: 0.8s;
}

.lp_wrap .research .cont li:nth-child(2) {
  top: 86.1%;
  left: 30.3%;
  width: 60.667%;
  transition: 0.8s 0.3s;
}

.lp_wrap .research .cont li.trigger.move,
.lp_wrap .research .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .regeneration .water {
  position: absolute;
  top: 56.4%;
  left: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lp_wrap .regeneration .water .water_img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(50%);
}

.lp_wrap .regeneration .cycle {
  position: absolute;
  top: 3.6%;
  left: 38.7%;
  width: 40%;
  animation: 16s cycle1 linear infinite;
}

.lp_wrap .regeneration .photo {
  position: absolute;
  top: 9.65%;
  left: 2.7%;
  width: 60%;
}

.lp_wrap .regeneration .cont li {
  position: absolute;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .regeneration .cont li:nth-child(1) {
  top: 35.75%;
  left: 8.6%;
  width: 48%;
  transition: 0.8s;
}

.lp_wrap .regeneration .cont li:nth-child(2) {
  top: 47.05%;
  left: 8.8%;
  width: 47.733%;
  transition: 0.8s 0.3s;
}

.lp_wrap .regeneration .cont li.trigger.move,
.lp_wrap .regeneration .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

.lp_wrap .regeneration .award {
  position: absolute;
  top: 59.97%;
  left: 8.8%;
  width: 82.533%;
}

.lp_wrap .regeneration .award.trigger {
  transition: 0.8s;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .regeneration .award.trigger.move {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .change .head {
  position: absolute;
  top: -7.55%;
  left: 31.334%;
  width: 37.333%;
}

.lp_wrap .change .head.trigger {
  transition: 0.8s;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .change .head.trigger.move {
  opacity: 1;
  transform: translateY(0);
}

.lp_wrap .change .cont li {
  position: absolute;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .change .cont li:nth-child(1) {
  top: 59.75%;
  left: 18.7%;
  width: 62.933%;
  transition: 0.8s;
}

.lp_wrap .change .cont li:nth-child(2) {
  top: 66.8%;
  left: 27%;
  width: 47.067%;
  transition: 0.8s 0.3s;
}

.lp_wrap .change .cont li:nth-child(3) {
  top: 79.55%;
  left: 16.1%;
  width: 67.733%;
  transition: 0.8s 0.6s;
}

.lp_wrap .change .cont li.trigger.move,
.lp_wrap .change .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .ingredients1 .cont li {
  position: absolute;
  opacity: 0;
}

.lp_wrap .ingredients1 .cont li:nth-child(1) {
  top: 80.1%;
  left: 9.1%;
  width: 81.733%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .ingredients1 .cont li:nth-child(2) {
  top: 90.5%;
  left: 9.4%;
  width: 81.733%;
  transition: 0.8s 0.3s;
  transform: translateY(20%);
}

.lp_wrap .ingredients1 .cont li.trigger.move,
.lp_wrap .ingredients1 .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .ingredients2 .cont li {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s;
}

.lp_wrap .ingredients2 .cont li:nth-child(1) {
  top: 12%;
  left: 9.1%;
  width: 81.733%;
}

.lp_wrap .ingredients2 .cont li:nth-child(2) {
  top: 38.5%;
  left: 9.4%;
  width: 81.733%;
}

.lp_wrap .ingredients2 .cont li:nth-child(3) {
  top: 62.1%;
  left: 9.4%;
  width: 81.733%;
}

.lp_wrap .ingredients2 .cont li.move {
  opacity: 1;
}

/* -------------------------------------------- */
.lp_wrap .advanced .cont li {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s;
}

.lp_wrap .advanced .cont li:nth-child(1) {
  top: 41.6%;
  left: 9.1%;
  width: 36.533%;
}

.lp_wrap .advanced .cont li:nth-child(2) {
  top: 73.7%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .advanced .cont li.trigger.move,
.lp_wrap .advanced .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .tradition .cont li {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s;
}

.lp_wrap .tradition .cont:nth-of-type(1) li:nth-child(1) {
  top: 19.6%;
  left: 49%;
  width: 42.433%;
}

.lp_wrap .tradition .cont:nth-of-type(1) li:nth-child(2) {
  top: 34.9%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .tradition .cont:nth-of-type(2) li:nth-child(1) {
  top: 47.6%;
  left: 49%;
  width: 42.433%;
}

.lp_wrap .tradition .cont:nth-of-type(2) li:nth-child(2) {
  top: 61.8%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .tradition .cont:nth-of-type(3) li:nth-child(1) {
  top: 72.2%;
  left: 49%;
  width: 42.433%;
}

.lp_wrap .tradition .cont:nth-of-type(3) li:nth-child(2) {
  top: 88.8%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .tradition .cont li.trigger.move,
.lp_wrap .tradition .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .foundation .cont li {
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s;
}

.lp_wrap .foundation .cont:nth-of-type(1) li:nth-child(1) {
  top: 14.6%;
  left: 30%;
  width: 57.433%;
}

.lp_wrap .foundation .cont:nth-of-type(1) li:nth-child(2) {
  top: 26%;
  left: 13.3%;
  width: 57.433%;
}

.lp_wrap .foundation .cont:nth-of-type(1) li:nth-child(3) {
  top: 34.9%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .foundation .cont:nth-of-type(2) li:nth-child(1) {
  top: 47.8%;
  left: 40%;
  width: 47.733%;
}

.lp_wrap .foundation .cont:nth-of-type(2) li:nth-child(2) {
  top: 59.2%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .foundation .cont:nth-of-type(3) li:nth-child(1) {
  top: 68.9%;
  left: 30.2%;
  width: 57.433%;
}

.lp_wrap .foundation .cont:nth-of-type(3) li:nth-child(2) {
  top: 80.4%;
  left: 12.7%;
  width: 57.433%;
}

.lp_wrap .foundation .cont:nth-of-type(3) li:nth-child(3) {
  top: 89.4%;
  left: 14.3%;
  width: 71.533%;
  transition: 0.8s;
  transform: translateY(40%);
}

.lp_wrap .foundation .cont li.trigger.move,
.lp_wrap .foundation .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .skinchanges .cont li {
  position: absolute;
  opacity: 0;
}

.lp_wrap .skinchanges .cont li:nth-child(1) {
  top: 46.65%;
  left: 17.1%;
  width: 65.867%;
  transition: 0.8s;
  transform: translateY(20%);
}

.lp_wrap .skinchanges .cont li:nth-child(2) {
  top: 61.7%;
  left: 9.5%;
  width: 81.067%;
  transition: 0.8s 0.4s;
  transform: translateY(40%);
}

.lp_wrap .skinchanges .cont li.trigger.move,
.lp_wrap .skinchanges .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------- */
.lp_wrap .faq {
  background-color: #f7f4ec;
}

.lp_wrap .faq .head {
  width: 19.2%;
  margin: auto;
  padding: 15% 0 10%;
}

.lp_wrap .faq dl {
  padding: 0% 6% 10%;
}

.lp_wrap .faq dl div {
  background: #fff;
  padding: 5% 0;
  cursor: pointer;
}

.lp_wrap .faq dl dt {
  position: relative;
  z-index: 1;
  padding: 0 6.061%;
}

.lp_wrap .faq dl dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 6%;
  width: 4.546%;
  height: 100%;
  /* background: url("/lp/koihada/img/faq-open.png") center center/contain no-repeat; */
  transition: 0.4s;
}

/* .lp_wrap .faq dl dt.open::after {
  background: url("/lp/koihada/img/faq-close.png") center center/contain no-repeat;
} */

.lp_wrap .faq dl div:nth-of-type(n + 2) {
  margin-top: 4%;
}

.lp_wrap .faq dl dd {
  position: relative;
  padding: 0 6.061%;
}

/* -------------------------------------------- */
.lp_wrap .exbeautydrink .cont li {
  position: absolute;
  opacity: 0;
  transform: translateY(20%);
}

.lp_wrap .exbeautydrink .cont li:nth-child(1) {
  top: 30%;
  left: 15.1%;
  width: 69.7%;
  transition: 0.8s;
}

.lp_wrap .exbeautydrink .cont li:nth-child(2) {
  top: 40.9%;
  left: 19.3%;
  width: 61.8%;
  transition: 0.8s 0.3s;
}

.lp_wrap .exbeautydrink .cont li:nth-child(3) {
  top: 51.7%;
  left: 22.7%;
  width: 55%;
  transition: 0.8s 0.6s;
}

.lp_wrap .exbeautydrink .cont li.trigger.move,
.lp_wrap .exbeautydrink .cont li.trigger.move~li {
  opacity: 1;
  transform: translateY(0);
}

/* 余白調整------------------------------------- */
@media screen and (max-width: 1024px) {
  #Wrap_lower {
    padding: 0 !important;
  }
}

#Wrap_lower.onlyOrder {
  padding-bottom: 0 !important;
}

#Contents {
  margin: 0 0 80px 0 !important;
}