@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;
}
.pj .sa {
  opacity: 0;
  transition: 1.5s;
  transform: translateY(10px);
}
.pj .sa--up {
  transform: translateY(10px);
}

.pj .mv {
  z-index: 4;
  position: relative;
}
.pj .sa.show {
  opacity: 1;
  transform: none;
}
.pj .mv.onload .op {
  opacity: 1;
  transform: none;
}
.pj .mv .bg {
  z-index: 0;
  position: relative;
}
.pj .mv p {
  position: absolute;
  z-index: 1;
}
.pj .mv .btn {
  position: absolute;
  z-index: 3;
  width: calc((380 / 1344) * 100%);
  right: calc((64 / 1344) * 100%);
  top: calc((80 / 4077) * 100%);
}
.pj .mv .btn a {
  transition: 0.3s;
}
.pj .mv .btn a:hover {
  opacity: 0.5;
}
.pj .mv .products {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((274 / 4077) * 100%);
  z-index: 2;
  transition-delay: 0.3s;
}
.pj .mv .name {
  width: calc((1057 / 1344) * 100%);
  left: calc((142 / 1344) * 100%);
  top: calc((1407 / 4077) * 100%);
  z-index: 1;
  transition-delay: 0.4s;
}
.pj .mv .label {
  width: calc((323 / 1344) * 100%);
  left: calc((942 / 1344) * 100%);
  top: calc((2081 / 4077) * 100%);
  z-index: 3;
  transition-delay: 0.3s;
}
.pj .mv .pkg {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((1880 / 4077) * 100%);
  z-index: 1;
  /* transition-delay: 0.4s; */
}
.pj .mv .ttl {
  width: calc((840 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((0 / 4077) * 100%);
  z-index: 2;
  /* opacity: 0; */
  /* transition: .8s ease .8s; */
  transition-delay: 0.2s;
}
.pj .mv .intro {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((2870 / 4077) * 100%);
  z-index: 1;
}
.pj .feature {
  position: relative;
  margin-top: -1px;
  z-index: 1;
}
.pj .feature .bg {
  z-index: 0;
  position: relative;
}

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

.pj .feature .point_01 {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((676 / 5300) * 100%);
  z-index: 2;
}
.pj .feature .point_02 {
  width: calc((1344 / 1344) * 100%);
  right: calc((0 / 1344) * 100%);
  top: calc((1537 / 5300) * 100%);
  z-index: 2;
}
.pj .feature .point_03 {
  width: calc((1344 / 1344) * 100%);
  right: calc((0 / 1344) * 100%);
  top: calc((2744 / 5300) * 100%);
  z-index: 2;
}
.pj .feature .point_04 {
  width: calc((1344 / 1344) * 100%);
  right: calc((0 / 1344) * 100%);
  top: calc((3688 / 5300) * 100%);
  z-index: 2;
}
.pj .feature .products {
  width: calc((1344 / 1344) * 100%);
  right: calc((0 / 1344) * 100%);
  top: calc((1700 / 5300) * 100%);
  z-index: 1;
}

.pj .vision {
  position: relative;
  margin-top: -1px;
}
.pj .vision p {
  position: absolute;
  z-index: 1;
}

.pj .vision .ttl {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((154 / 2800) * 100%);
}
.pj .vision .text {
  width: calc((805 / 1344) * 100%);
  left: calc((262 / 1344) * 100%);
  top: calc((1037 / 2800) * 100%);
}
.pj .vision .pkg {
  width: calc((1003 / 1344) * 100%);
  left: calc((168 / 1344) * 100%);
  top: calc((393 / 2800) * 100%);
}
.pj .vision .products {
  width: calc((1344 / 1344) * 100%);
  left: calc((0 / 1344) * 100%);
  top: calc((1750 / 2800) * 100%);
}

.pj .review {
  position: relative;
  margin-top: -2px;
}
.pj .review p {
  position: absolute;
  z-index: 1;
}
.pj .review .ttl {
  width: calc((484 / 1344) * 100%);
  left: calc((432 / 1344) * 100%);
  top: calc((92 / 1608) * 100%);
}
.pj .review .text {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-size: min(calc((36 / 1344) * 100vw), 11.5px);
  /* font-size: calc((30 / 1344) * 100vw); */
  z-index: 2;
  text-align: justify;
  width: calc((352 / 628) * 100%);
}
.pj .review .text span {
  color: #f6ae2f;
}
.pj .review .text_01 {
  top: calc((132 / 628) * 100%);
  left: calc((141 / 628) * 100%);
}
.pj .review .text_02 {
  top: calc((129 / 574) * 100%);
  left: calc((130 / 574) * 100%);
}
.pj .review .text_03 {
  top: calc((173 / 628) * 100%);
  left: calc((144 / 628) * 100%);
}
.pj .review .text_bg{
  position: absolute;
  z-index: 1;
}
.pj .review .text_bg_01 {
  width: calc((628 / 1344) * 100%);
  top: calc((326 / 1745) * 100%);
  left: calc((198 / 1344) * 100%);
}
.pj .review .text_bg_02 {
  width: calc((574 / 1344) * 100%);
  top: calc((729 / 1745) * 100%);
  left: calc((643 / 1344) * 100%);
}
.pj .review .text_bg_03 {
  width: calc((628 / 1344) * 100%);
  top: calc((1000 / 1745) * 100%);
  left: calc((149 / 1344) * 100%);
}
.pj .info {
  position: relative;
  margin-top: -1px;
}

.pj .lineup {
  width: calc((930 / 1344) * 100%);
  left: calc((208 / 1344) * 100%);
  top: calc((124 / 704) * 100%);
  position: absolute;
}
.pj .lineup p {
}

.pj .sns {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: calc((375 / 704) * 100%);
  left: calc((430 / 1344) * 100%);
  width: 100%;
  width: calc((482 / 1344) * 100%);
}
.pj .sns li {
  width: calc((117 / 482) * 100%);
  /* margin: 0 calc((30 / 1344) * 100%); */
}
@media screen and (max-width: 768px) {
  .pj {
    padding-top: 127px;
    background-image: unset;
  }
  .pj .products_container {
    width: 100%;
  }
  .pj .mv {
  }
  .pj .review .text {
    /* font-size: calc((36 / 1344) * 100vw); */
  }
}