html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-size: 16px;
}

h1,
h2,
h3 {
  font-size: 0;
  text-indent: -9999px;
  text-align: center;
}

p {
  font-size: 1em;
}

.w900 {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.con {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
}


.kv {
  background: transparent url('../images/img/p14/kv_.jpg') center top no-repeat;
  width: 100%;
  height: 481px;
  position: relative;
  margin: 0 auto;
}

.kv::before,
.kv::after {
  content: '';
  background: transparent url('../images/img/p14/light2.png') center center no-repeat;
  width: 100%;
  height: 100vw;
  max-width: 98px;
  max-height: 97px;
  background-size: contain;
  mix-blend-mode: lighten;
  position: absolute;
  display: block;

}

.kv::before {
  top: 20%;
  left: 5%;
  animation: shingS 1.2s infinite;
}

.kv::after {
  top: 80%;
  right: 10%;
  animation: shingS 1.5s .5s infinite;
}

.p2 {
  background: transparent url('../images/img/p14/p2-bg.jpg') center top no-repeat;
  width: 100%;
  height: 596px;
  position: relative;
}

.p2::before,
.p2::after {
  content: '';
  background: transparent url('../images/img/p14/light2.png') center center no-repeat;
  width: 100%;
  height: 100vw;
  max-width: 98px;
  max-height: 97px;
  background-size: contain;
  mix-blend-mode: lighten;
  position: absolute;
  display: block;

}

.p2::before {
  top: 20%;
  left: 5%;
  animation: shingS 1.2s infinite;
}

.p2::after {
  top: 60%;
  right: 10%;
  animation: shingS 1.8s 1s infinite;
}

.p2 .txt {
  position: relative;
  left: calc(50% - 150px);
  background: transparent url(../images/img/p14/p2-title.png) center top no-repeat;
  background-size: contain;
  width: 500px;
  height: 200px;
}

.p2 .obj {
  position: relative;
  left: calc(50% - 45px);
  margin-top: -50px;
  background: transparent url('../images/img/p14/p2-img.png') center top no-repeat;
  width: 279px;
  height: 374px;
  animation: shingMove 1.5s infinite;
}

@keyframes shingS {

  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes shingMove {

  0%,
  100% {
    filter: brightness(100%);
    transform: translateY(0);
  }

  50% {
    filter: brightness(120%);
    transform: translateY(10px);
  }
}

.p3 {
  background: transparent url('../images/img/p14/p3-bg2.jpg') center top no-repeat;
  width: 100%;
  height: 726px;
  position: relative;
  padding: 30px;
}

.p3 h2 {
  background: transparent url('../images/img/p14/p3-title.png') center top no-repeat;
  width: 860px;
  height: 187px;
  position: relative;
  margin: 0 auto;
}

.p3 .b2 {
  background: transparent url('../images/img/p14/p3-b2.png') center top no-repeat;
  width: 226px;
  height: 226px;
  position: absolute;
  top: 220px;
  left: calc(50% + 230px);
  animation: floatMove 2.2s .5s infinite;
}

.p3 .b3 {
  background: transparent url('../images/img/p14/p3-b3.png') center top no-repeat;
  width: 199px;
  height: 199px;
  position: absolute;
  top: 420px;
  left: calc(50% + 125px);
  animation: floatMove 2s 1s infinite;
}

.p3 .b1 {
  background: transparent url('../images/img/p14/p3-b1.png') center top no-repeat;
  width: 329px;
  height: 329px;
  position: absolute;
  top: 195px;
  left: calc(50% - 450px);
  animation: floatMove 1.5s infinite;
}

@keyframes floatMove {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.p3 p {
  color: white;
  text-shadow: 2px 2px 3px #cf155cb6;
  font-size: 12px;
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.p4 {
  background: transparent url('../images/img/p14/p4-bg.jpg') center top no-repeat;
  width: 100%;
  height: 761px;
  position: relative;
  padding: 80px 30px;
}

.p4 .txt {
  width: 50%;
  height: auto;
}

.p4 .obj {
  width: 35%;
  height: auto;
  animation: floatMove 1.5s infinite;
}

.p4 h2 {
  background: transparent url('../images/img/p14/p4-title.png') center top no-repeat;
  width: 334px;
  height: 154px;
  position: relative;
  margin-bottom: 30px;
}

.p4 h3 {
  background: transparent url('../images/img/p14/p4-sub.png') center top no-repeat;
  width: 100%;
  height: 15vw;
  max-width: 470px;
  max-height: 39px;
  position: relative;
  margin-top: 30px;
  background-size: contain;
}

.p4 picture {
  margin-top: 30px;
}

.p5 {
  background: transparent url('../images/img/p14/p5-bg.jpg') center top no-repeat;
  width: 100%;
  height: 522px;
  position: relative;
  padding: 80px 30px;
}

.p5 .txt {
  width: 50%;
  height: auto;
  order: 1;
}

.p5 .obj {
  width: 40%;
  height: auto;
  order: 0;
  animation: floatMove 1.5s infinite;
}

.p5 h2 {
  background: transparent url('../images/img/p14/p5-title.png') center top no-repeat;
  width: 352px;
  height: 144px;
  position: relative;
  margin-bottom: 30px;
}

.p5 h3 {
  background: transparent url('../images/img/p14/p5-sub.png') center top no-repeat;
  width: 100%;
  height: 15vw;
  max-width: 469px;
  max-height: 39px;
  position: relative;
  margin-top: 30px;
  background-size: contain;
}

.p6 {
  background: transparent url('../images/img/p14/p6-bg.jpg') center top no-repeat;
  width: 100%;
  height: 524px;
  position: relative;
  padding: 80px 30px;
}

.p6 .txt {
  width: 50%;
  height: auto;
}

.p6 .obj {
  width: 40%;
  height: auto;
  animation: floatMove 1.5s infinite;
}

.p6 h2 {
  background: transparent url('../images/img/p14/p6-title.png') center top no-repeat;
  width: 278px;
  height: 143px;
  position: relative;
  margin-bottom: 30px;
}

.p6 h3 {
  background: transparent url('../images/img/p14/p6-sub.png') center top no-repeat;
  width: 100%;
  height: 15vw;
  max-width: 411px;
  max-height: 39px;
  position: relative;
  margin-top: 30px;
  background-size: contain;
}

.p6 p,
.p5 p,
.p4 p {
  font-size: 1.2em;
  line-height: 1.8;
  color: #444;
  padding: 0 10px;
  font-weight: bolder;
  letter-spacing: 0;
  text-align: left;
}


.p8 {
  background: transparent url('../images/img/p14/p8-bg.jpg') center top no-repeat;
  width: 100%;
  height: 804px;
  position: relative;
  padding: 100px 30px 60px;
}

.p8 .obj {
  width: 50%;
  height: auto;
}

.p8 .txt {
  width: 40%;
  height: auto;
}

.p8::before,
.p8::after {
  content: '';
  background: transparent url('../images/img/p14/light.png') center center no-repeat;
  width: 100%;
  height: 100vw;
  max-width: 98px;
  max-height: 97px;
  background-size: contain;
  mix-blend-mode: lighten;
  position: absolute;
  display: block;

}

.p8::before {
  top: 20%;
  left: 10%;
  animation: shingS 1.2s infinite;
}

.p8::after {
  top: 60%;
  right: 20%;
  animation: shingS 1.8s 1s infinite;
}

.p9,
.p10 {
  background: #f8c9d3;
  width: 100%;
  height: auto;
  position: relative;
}

.p9::before,
.p10::after {
  content: '';
  background: transparent url('../images/img/p14/light2.png') center center no-repeat;
  width: 100%;
  height: 100vw;
  max-width: 60px;
  max-height: 60px;
  background-size: contain;
  mix-blend-mode: lighten;
  position: absolute;
  display: block;

}

.p9::before {
  top: 50%;
  left: 2%;
  animation: shingS 1.2s infinite;
}

.p10::after {
  top: 20%;
  right: .2%;
  animation: shingS 1.8s 1s infinite;
}

.p10::before,
.p9::after {
  content: '';
  background: transparent url('../images/img/p14/light.png') center center no-repeat;
  width: 100%;
  height: 100vw;
  max-width: 80px;
  max-height: 80px;
  background-size: contain;
  mix-blend-mode: lighten;
  position: absolute;
  display: block;

}

.p10::before {
  top: 30%;
  left: 0.2%;
  animation: shingS 1.2s infinite;
}

.p9::after {
  top: 10%;
  right: 5%;
  animation: shingS 1.2s 1s infinite;
}

.p10 {
  padding: 40px 30px;

}

.p9 h2 {
  font-size: 2.75em;
  color: #613180;
  padding: 60px 30px;
  display: block;
  text-indent: 0;
}


.p9 p,
.p10 p {
  font-size: 1.25em;
  font-weight: bolder;
  letter-spacing: 0.1em;
  color: #613180;
  max-width: 600px;
  margin: 0 auto;
}

.p9 p {
  text-align: left;
}

.p10 p {
  text-align: center;
}


.newaction {
  overflow: hidden;
}

.newaction a::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 175px;
  background: rgb(255, 255, 255, 0.6);
  filter: blur(2);
  mix-blend-mode: overlay;
  animation: btnlight 1.5s ease infinite;
}


@keyframes btnlight {
  0% {
    transform: skewX(30deg) translateX(-100px);
  }

  100% {
    transform: skewX(30deg) translateX(200px);
  }
}




@media (max-width: 991px) {

  .product-content {
    background: #fabec9;
    background: linear-gradient(90deg, rgba(250, 190, 201, 1) 0%, rgba(255, 201, 211, 1) 50%, rgba(244, 172, 188, 1) 100%);
    width: 100%;
    max-width: 640px;
  }

  .kv {
    background: transparent url('../images/img/p14/kv-mNew.jpg') center top no-repeat;
    width: 100%;
    height: 187vw;
    max-width: 640px;
    max-height: 1200px;
    background-size: contain;
  }

  .p2 {
    background: transparent url('../images/img/p14/p2-bg-m.jpg') center top no-repeat;
    width: 100%;
    height: 187vw;
    max-width: 640px;
    max-height: 1200px;
    padding: 40px 30px;
    background-size: contain;
  }

  .p2 .txt {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: transparent url(../images/img/p14/p2-title-m.png) center top no-repeat;
    background-size: contain;
    width: 100%;
    height: 40vw;
    max-width: 452px;
    max-height: 257px;
  }

  .p2 .obj {
    left: 57%;
    top: 4%;
    position: absolute;
    background-size: contain;
    width: 50%;
    height: 30vw;
    margin-top: auto;
    background-size: contain;
  }

  .p3 {
    background: #f8cfd9 url('../images/img/p14/p3-bg-m3.jpg') center top no-repeat;
    width: 100%;
    height: 187vw;
    max-width: 640px;
    max-height: 1200px;
    background-size: contain;
  }

  .p3 h2 {
    background: transparent url(../images/img/p14/p3-title-m.png) center top no-repeat;
    width: 100%;
    height: 42vw;
    background-size: contain;
    max-width: 615px;
    max-height: 303px;
  }

  .p3 .b1 {
    background: transparent url(../images/img/p14/p3-b1.png) center top no-repeat;
    width: 100%;
    height: 63vw;
    max-width: 329px;
    max-height: 329px;
    background-size: contain;
    position: absolute;
    top: 360px;
    left: 0;
  }

  .p3 .b2 {
    background: transparent url(../images/img/p14/p3-b2.png) center top no-repeat;
    width: 100%;
    height: 40vw;
    max-width: 226px;
    max-height: 226px;
    background-size: contain;
    position: absolute;
    top: 400px;
    left: 65%;
  }

  .p3 .b3 {
    background: transparent url(../images/img/p14/p3-b3.png) center top no-repeat;
    width: 100%;
    height: 20%;
    background-size: contain;
    position: absolute;
    top: 620px;
    left: 25%;
  }

  .p3 p {
    text-shadow: 2px 2px 10px #7f0734;
    font-size: 14px;
    font-weight: bolder;
    position: absolute;
    bottom: 6%;
    width: 85%;
    box-sizing: border-box;
    left: auto;
    transform: none;
  }

  .p4 {
    background: transparent url('../images/img/p14/bg-light2.png') center top no-repeat;
    width: 100%;
    max-width: 640px;
    height: auto;
    padding: 40px 30px;
  }

  .p4 h2 {
    background: transparent url(../images/img/p14/p4-title-m.png) center top no-repeat;
    width: 80%;
    height: 28vw;
    background-size: contain;
  }

  .p4 .txt,
  .p5 .txt,
  .p6 .txt {
    width: 100%;
    height: auto;
    z-index: 10;
    margin: 80px auto 0;
  }

  .p4 .obj {
    width: 20%;
    position: absolute;
    right: 3%;
    top: 15%;
    z-index: 8;
  }

  .p6 .obj {
    width: 30%;
    position: absolute;
    right: 0;
    top: 20%;
    z-index: 8;
  }

  .p5 {
    background: transparent url('../images/img/p14/bg-light2.png') center top no-repeat;
    width: 100%;
    max-width: 640px;
    height: auto;
    padding: 40px 30px;
  }

  .p5 h2 {
    background: transparent url(../images/img/p14/p5-title-m.png) center top no-repeat;
    width: 70%;
    height: 33vw;
    margin-left: 30%;
    background-size: contain;
  }

  .p5 .obj {
    width: 30%;
    position: absolute;
    left: 2%;
    top: 20%;
    z-index: 8;
  }

  .p6 {
    background: transparent url('../images/img/p14/bg-light2.png') center top no-repeat;
    width: 100%;
    max-width: 640px;
    height: auto;
    padding: 40px 30px;
  }

  .p6 h2 {
    background: transparent url(../images/img/p14/p6-title-m.png) center top no-repeat;
    width: 65%;
    height: 26vw;
    background-size: contain;
  }

  .p8 {
    background: transparent url('../images/img/p14/bg-light.png') center top no-repeat;
    width: 100%;
    max-width: 640px;
    height: 160vw;
    padding: 60px 30px 0;
  }

  .p8 .txt {
    width: 100%;
    order: 1;
  }

  .p8 .obj {
    width: 100%;
    order: 2;
  }

  .p10,
  .p9 {
    padding: 30px 40px;
  }
  
}


@media (max-width: 837px) {

  .p2 .obj {
    height: 38vw;
  }
}


@media (max-width: 640px) {

  .product_kv2023,
  .product_kv2024 {
    height: 380px;
  }
  .p2 .txt{
    left: 0;
    width: 75%;
    transform: none;
  }

  .p3 .b1 {
    width: 100%;
    height: 63vw;
    max-width: 329px;
    max-height: 329px;
    top: 195px;
    left: -15%;
  }

  .p3 .b2 {
    width: 100%;
    height: 40vw;
    max-width: 226px;
    max-height: 226px;
    top: 220px;
    left: 45%;
  }

  .p3 .b3 {
    max-width: 199px;
    max-height: 199px;
    top: 420px;
    left: 55%;
  }
  .p3 p{
    font-size: 9px;
  }
  .p6 p,
  .p5 p,
  .p4 p {
    max-width: 55%;
    text-align: justify;
  }

  .p8 {
    height: 200vw;
  }

  .p4 h2 {
    width: 100%;
    height: 33vw;
    margin-left: auto;
  }

  .p4 .obj {
    width: 25%;
    right: 10%;
    top: 35%;
    animation: none;
  }

  .p5 h2 {
    width: 100%;
    height: 39vw;
    margin-left: auto;
  }

  .p5 .obj {
    width: 35%;
    left: 60%;
    top: 50%;
    animation: none;
  }

  .p6 h2 {
    width: 100%;
    height: 32vw;
    margin-left: auto;
  }

  .p6 .obj {
    width: 40%;
    right: 5%;
    top: 50%;
    animation: none;
  }

}