@charset "UTF-8";

.pj {
  zoom: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  border: 0;
  vertical-align: baseline;
  font-size: 1.6rem;
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 0;
  padding-top: 132px;
  margin: 0 auto;
  background-image: url(../img/bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.pj .products_container {
  overflow: hidden;
}
.pj .products_container {
  width: 430px;
  margin: auto;
  -webkit-box-shadow: 0 30px 85px black;
  box-shadow: 0 30px 85px rgb(0 0 0 / 60%);
  background-color: #fff;
  position: relative;
  background-image: url(../img/container_bg.webp);
  background-size: contain;
}
.pj .sa {
  opacity: 0;
  transition: 1.5s;
  transform: translateY(1%);
}


.pj .grunge{
  position: absolute;
  z-index: 12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.pj .fv {
  z-index: 4;
  position: relative;
}
.pj .sa.show {
  opacity: 1;
  transform: translateY(0%);
}
.pj .fv.onload .op {
  opacity: 1;
  transform: none;
}
.pj .fv .bg {
  z-index: 0;
  position: relative;
}
.pj .fv p {
  position: absolute;
  z-index: 1;
}
.pj .fv .btn {
  position: absolute;
  z-index: 10;
  width: calc((320 / 866) * 100%);
  right: calc((15 / 866) * 100%);
  top: calc((22 / 1274) * 100%);
}
.pj .fv .btn a {
  transition: 0.3s;
}
.pj .fv .btn a:hover {
  opacity: 0.5;
}
.pj .fv .group_01 {
  position: absolute;
  top: calc((0 / 1274) * 100%);
  width: 100%;
  height: 100%;
}
.pj .fv .group_01 .group_bg {
  position: absolute;
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
  top: calc((0 / 1274) * 100%);
  z-index: 1;
}
.pj .fv .group_01 .products {
}
.pj .fv .group_02 {
  position: absolute;
  /* top: 0; */
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: 1s;
  transition-delay: 1s;
  z-index: 3;
}
body.is-loaded .pj .fv .group_02{
  opacity: 1;
}
.pj .fv .group_03 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.pj .fv .group_03 .group_bg {
  position: absolute;
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
  top: calc((635 / 1274) * 100%);
  z-index: 1;
}
.pj .fv .group_03 .products {
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
  top: calc((635 / 1274) * 100%);
  z-index: 2;
  overflow: hidden;
}
.pj .fv .group_03 .products img{
    transform: translateY(2%);
    transition: 1.5s;
    opacity: 0;
}
body.is-loaded .pj .fv .group_03 .products img{
    transform: translateY(0%);
    opacity: 1;
}
.pj .fv .group_03 .pkg {
  width: calc((252 / 866) * 100%);
  left: calc((578 / 866) * 100%);
  top: calc((822 / 1274) * 100%);
  z-index: 3;
  /* transform: translateY(10%); */
  opacity: 0;
  transition: 1s;
  transition-delay: 1s;
}
body.is-loaded .pj .fv .group_03 .pkg {
    transform: translateY(0%);
    opacity: 1;
}
.pj .fv .text_01 {
  width: calc((232 / 866) * 100%);
  left: calc((599 / 866) * 100%);
  top: calc((255 / 1274) * 100%);
  z-index: 3;
  /* transform: translateY(10%); */
  transition: 1s;
  opacity: 0;
  transition-delay: 1s;
}
body.is-loaded .pj .fv .text_01 {
    transform: translateY(0%);
    opacity: 1;
}
.pj .fv .text_02 {
  width: calc((805 / 866) * 100%);
  left: calc((32 / 866) * 100%);
  top: calc((579 / 1274) * 100%);
  z-index: 3;
}

.pj .fv .text_03 {
  width: calc((129 / 866) * 100%);
  left: calc((30 / 866) * 100%);
  top: calc((748 / 1274) * 100%);
  z-index: 3;
}
.pj .fv .group_01 .products {
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
  top: calc((0 / 1274) * 100%);
  z-index: 2;
  overflow: hidden;
}
.pj .fv .group_01 .products img{
    transform: translateY(2%);
    transition: 1.5s;
    opacity: 0;
}
body.is-loaded .pj .fv .group_01 .products img {
    transform: translateY(0%);
    opacity: 1;
}
.pj .read {
  position: relative;
  margin-top: -1px;
  z-index: 2;
}
.pj .read .bg {
  z-index: 0;
  position: relative;
}

.pj .read p {
  position: absolute;
  z-index: 1;
}

.pj .read .ttl {
  top: calc((141 / 1220) * 100%);
  width: calc((747 / 866) * 100%);
  left: calc((39 / 866) * 100%);
}

.pj .read .text_01 {
  top: calc((394 / 1220) * 100%);
  width: calc((789 / 866) * 100%);
  left: calc((38 / 866) * 100%);
}

.pj .read .deco_01 {
  position: absolute;
  z-index: 1;
  top: calc((6 / 1220) * 100%);
  width: calc((624 / 866) * 100%);
  left: calc((245 / 866) * 100%);
}
.pj .read .deco_02 {
  position: absolute;
  z-index: 1;
  top: calc((45 / 1220) * 100%);
  width: calc((853 / 866) * 100%);
  left: calc((3 / 866) * 100%);
}



.pj .point {
  position: relative;
  margin-top: calc((-424 / 860) * 100%);
  z-index: 2;
}
.pj .point .bg {
  z-index: 0;
  position: relative;
}

.pj .point p {
  position: absolute;
  z-index: 1;
}
.pj .point .deco_01 {
  position: absolute;
  z-index: 2;
  top: calc((0 / 3475) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
  pointer-events: none;
}
.pj .point .point_01 {
  top: calc((21 / 3475) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);

}
.pj .point .point_02 {
  top: calc((788 / 3475) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);

}
.pj .point .point_03 {
  top: calc((1554 / 3475) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);

}
.pj .point .point_04 {
  top: calc((2322 / 3475) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);

}


.pj .review {
  position: relative;
  margin-top: calc((-170  / 860) * 100%);
  z-index: 2;
}
.pj .review p {
  position: absolute;
  z-index: 1;
}
.pj .review .ttl {
  width: calc((582 / 866) * 100%);
  left: calc((43 / 866) * 100%);
  top: calc((0 / 3051 ) * 100%);
}
.pj .review .text {
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-size: min(calc((30 / 866) * 100vw), 15px);
  /* font-size: calc((30 / 866) * 100vw); */
  z-index: 2;
  text-align: justify;
  /* width: calc((352 / 628) * 100%); */
}

.pj .review .text_bg {
  position: absolute;
  z-index: 1;
}
.pj .review .text_bg_01 {
  width: calc((693 / 866) * 100%);
  top: calc((109 / 3051 ) * 100%);
  right: calc((0 / 866) * 100%);
}
.pj .review .text_bg_02 {
  width: calc((663 / 866) * 100%);
  top: calc((443 / 3051 ) * 100%);
  left: calc((0 / 866) * 100%);
}
.pj .review .text_bg_03 {
  width: calc((567 / 866) * 100%);
  top: calc((640 / 3051 ) * 100%);
  right: calc((0 / 866) * 100%);
}

.pj .review .caption{
  top: calc((1041 / 3051 ) * 100%);
  width: calc((355 / 866) * 100%);
  left: calc((52 / 866) * 100%);
}
.pj .review .products{
  top: calc((1219 / 3051 ) * 100%);
  width: calc((866 / 866) * 100%);
  left: calc((0 / 866) * 100%);
}
.pj .review .text_01{
  top: calc((215 / 456 ) * 100%);
  left: calc((230 / 693) * 100%);
}
.pj .review .text_02{
  top: calc((155 / 512 ) * 100%);
  left: calc((40 / 663) * 100%);
}
.pj .review .text_03{
  top: calc((160 / 566 ) * 100%);
  left: calc((223 / 567) * 100%);
}
.pj .review .text_04{
  width: calc((692 / 866) * 100%);
  top: calc((2561 / 3051 ) * 100%);
  left: calc((87 / 866) * 100%);
}
.pj .review .pkg{
  width: calc((746 / 866) * 100%);
  top: calc((2863 / 3051 ) * 100%);
  left: calc((80 / 866) * 100%);
}


.pj .info {
  position: relative;
  margin-top: -1px;
}

.pj .lineup_btn {
  width: calc((826 / 866) * 100%);
  left: calc((2 / 866) * 100%);
  top: calc((193 / 742 ) * 100%);
  position: absolute;
  z-index: 1;
}
.pj .lineup_btn a{
  transition: .3s;
}
.pj .lineup_btn a:hover{
  opacity: 0.5;
}
.pj .lineup p {
}

.pj .sns {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: calc((491 / 742 ) * 100%);
  left: calc((258 / 866) * 100%);
  width: calc((350 / 866) * 100%);
  z-index: 1;
}
.pj .sns li {
  width: calc((95 / 350) * 100%);
  /* margin: 0 calc((30 / 866) * 100%); */
}
.pj .sns li a{
  transition: .3s;
}
.pj .sns li a:hover{
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  .pj {
    padding-top: 127px;
    background-image: unset;
  }
  .pj .products_container {
    width: 100%;
  }

}