body{
    margin: 0;
    padding: 0;
}
section{
    margin: auto !important;
    max-width: 800px;
    width: 100%;
    position: relative;
}
img{
    max-width: 100%;
    display: block;
    margin: auto;
}

.block{
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.box img{
    position: absolute;
    left: 0;
    right: 0;
}


.sec01 .block .box img.pts1{
  top: 50%;
  left: 64%;
  max-width: 33%;
}
.sec01 .block .box img.pts2{
  bottom: 0%;
}
.sec02 .block .box img.pts1{
  top: 0;
  left: 0;
  right: unset;
  max-width: 47%;
}
.sec02 .block .box img.pts2{
  bottom: 49%;
  max-width: 15%;
  left: 81%;
  z-index: 1;
}
#pmpgg .sec02 .block .box img.pts2{
  bottom: 49.5%;
  max-width: 19%;
  left: 76%;
}
#pmpgr .sec02 .block .box img.pts2{
  bottom: 50%;
  max-width: 23%;
  left: 71%;
}
.sec02 .block .box img.pts3{
  bottom: 26%;
  max-width: 36%;
  left: 63%;
}
.sec02 .block .box img.pts4{
  bottom: 12.5%;
}
.sec03 .block .box img.pts1{
  top: 15.7%;
}
.sec03 .block .box img.pts2{
  top: 43.3%;
}
.sec03 .block .box img.pts3{
  bottom: -0.7%;
}


/*ブランドページ*/
#pm .sec01 .block .box img.pts1{
  top: unset;
  bottom: 32.7%;
  left: 0;
  max-width: 100%;
}
#pm .sec01 .block .box img.pts2{
  max-width: 58%;
  bottom: 0;
  left: -41%;
}
#pm .sec01 .block .box img.pts3{
  max-width: 49%;
  bottom: 1.5%;
  right: -45%;
}

#pm .sec02 .block .box img.pts1{
  max-width: 38%;
  bottom: 74.5%;
  left: -63.5%;
  right: 0;
  top: unset;
}
#pm .sec02 .block .box img.pts2{
  max-width: 29%;
  bottom: 74.5%;
  left: 3%;
}
#pm .sec02 .block .box img.pts3{
  max-width: 35%;
  bottom: 74.5%;
  left: 65.5%;
}
#pm .sec02 .block .box img.pts4{
  max-width: 54%;
  left: -35%;
  bottom: 31%;
  }

  #pm_2 .sec01 .block .box img{
    bottom: unset;
    max-width: 100%;
    left: 0;
  }
  #pm_2 .sec01 .block .box img.pts1{
    top: 19.5%;
  }
  #pm_2 .sec01 .block .box img.pts2{
    top: 29.5%;
  }
  #pm_2 .sec01 .block .box img.pts3{
    top: 40%;
    left: -50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts4{
    top: 40%;
    left: 50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts5{
    top: 50%;
    left: -50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts6{
    top: 50%;
    left: 50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts7{
    top: 60%;
    left: -50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts8{
    top: 60%;
    left: 50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts9{
    top: 70%;
    left: -50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts10{
    top: 70%;
    left: 50%;
    max-width: 50%;
  }
  #pm_2 .sec01 .block .box img.pts11{
    top: 87%;
    left: -75%;
    max-width: 25%;
  }
  #pm_2 .sec01 .block .box img.pts12{
    top: 87%;
    left: -25%;
    max-width: 25%;
  }
  #pm_2 .sec01 .block .box img.pts13{
    top: 87%;
    left: 25%;
    max-width: 25%;
  }
  #pm_2 .sec01 .block .box img.pts14{
    top: 87%;
    left: 75%;
    max-width: 25%;
  }
  #pm_2 .sec02 .block .box img.pts1{
    max-width: 100%;
    top: unset;
    bottom: 28.5%;
  }
  #pm_2 .sec02 .block .box img.pts2{
    max-width: 100%;
    left: 0;
    bottom: 0%;
  }
#pm_2 .sec03 .block .box img.pts1{
  top: 3%;
  bottom: unset;
  max-width: 29%;
}


/****アニメーション****/
.js-anim{
    opacity: 0;
}
/*ぽよよん*/
.poyoyon.is-animated {
    opacity: 1;
    animation: poyoyon 0.75s ease-in-out forwards;
    animation-delay: 0.25s;
    transition: opacity 1s;
  }
  .poyoyon.po2{
    animation-delay: 0.5s;
  }
@keyframes poyoyon {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
      opacity: 1;
    }
  }
  /*ぽよよん控えめ*/
  .poyoyon.modest.is-animated{
    animation-name: poyoyon_modest;
    animation-delay: 0.5s;
  }
  @keyframes poyoyon_modest {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
        transform: scale(0.99, 0.95) translate(0, 2px);
    }
    30% {
        transform: scale(1.01, 1.0) translate(0, 3px);
    }
    50% {
        transform: scale(0.99, 1.02) translate(0, -3px);
    }
    70% {
        transform: scale(1.0, 0.98) translate(0, 2px);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
        opacity: 1;
    }
}


/*スライドイン_アップ*/
.slidein_u.is-animated {
    animation: slideInU 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.25s;
  }
  .slidein_u.su1_2{
    animation-delay: 0.35s;
  }
  .slidein_u.su2{
    animation-delay: 0.4s;
  }
  .slidein_u.su2_2{
    animation-delay: 0.5s;
  }
  .slidein_u.su3{
    animation-delay: 0.55s;
  }
  .slidein_u.su3_2{
    animation-delay: 0.65s;
  }
  .slidein_u.su4{
    animation-delay: 0.7s;
  }
  .slidein_u.su4_2{
    animation-delay: 0.8s;
  }
  .slidein_u.su5{
    animation-delay: 0.85s;
  }
  @keyframes slideInU {
    0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
    40%,100% {
      opacity: 1;
    }
  }
  /*_ダウン*/
  .down.is-animated {
    animation-name: slideInD;
  }
  @keyframes slideInD {
    0% {
      transform: translateY(-30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
    40%,100% {
      opacity: 1;
    }
  }

  /*スライドイン_レフト*/
.slidein_l.is-animated {
    animation: slideInL 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.25s;
  }
  .slidein_l.sl2{
    animation-delay: 0.4s;
  }
  .slidein_l.sl3{
    animation-delay: 0.55s;
  }
  .slidein_l.sl4{
    animation-delay: 0.7s;
  }
  @keyframes slideInL {
    0% {
      transform: translateX(30px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
    }
    40%,100% {
      opacity: 1;
    }
  }

  /*スライドイン_ライト*/
  .slidein_r.is-animated {
      animation: slideInR 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      animation-delay: 0.25s;
    }
    .slidein_r.sl2{
      animation-delay: 0.4s;
    }
    .slidein_r.sl3{
      animation-delay: 0.55s;
    }
    .slidein_r.sl4{
      animation-delay: 0.7s;
    }
    @keyframes slideInR {
      0% {
        transform: translateX(-30px);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
      }
      40%,100% {
        opacity: 1;
      }
    }

  /*フェードイン*/
  .fadein.is-animated {
    animation: fadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.25s;
  }
  @keyframes fadeIn {
    0% {
    transform: translateY(-4px);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /*画像を左から右へ表示*/
  .scrollin.is-animated {
    clip-path: inset(0 100% 0 0); /* 初期状態で右側が隠れる */
    animation: revealImage 2s cubic-bezier(0.4, 0, 0.4, 1) forwards 0.25s;
  }
  @keyframes revealImage {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0); /* 右側が隠れる */
      }
      100% {
        opacity: 1;
        clip-path: inset(0 0 0 0); /* 全体を表示させる */
      }
  }

  /*きらんと光る*/
  .kiran {
    opacity: 1;
    overflow: hidden;
  }
  .kiran.is-animated::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    transition: cubic-bezier(0.32, 0, 0.67, 0);
    animation: kiran 0.35s linear forwards;
    animation-delay: 1s;
  }
  @keyframes kiran {
    0% {
      transform: scale(2) rotate(45deg);
      opacity: 0;
    }
    20% {
      transform: scale(20) rotate(45deg);
      opacity: 0.6;
    }
    40% {
      transform: scale(30) rotate(45deg);
      opacity: 0.4;
    }
    80% {
      transform: scale(45) rotate(45deg);
      opacity: 0.2;
    }
    100% {
      transform: scale(50) rotate(45deg);
      opacity: 0;
    }
  }

/**cssアニメーション**/
  /*回転*/
  .rotate {
    animation: rotate 22s infinite linear;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

/*ふわふわ揺れる*/
.fuwafuwa {
    animation: 3s fuwafuwa ease-in-out infinite alternate;
  }
@keyframes fuwafuwa {
    0%, 100% {
      transform: translate(0, 0) rotate(-3deg);
    }
    50% {
      transform: translate(3%, -10%) rotate(0deg);
    }
  }
  /*ふわふわ2*/
  .fuwafuwa.fu2{
    animation-name: fuwafuwa2;
    animation-delay: 0.5s;
  }
  @keyframes fuwafuwa2 {
    0%, 100% {
      transform: translate(0, 0) rotate(4deg);
    }
    50% {
      transform: translate(-3%, 5%) rotate(0deg);
    }
  }
  /*ふわふわ控えめ*/
  .fuwafuwa.modest{
    animation-name: fuwafuwa_modest;
  }
  @keyframes fuwafuwa_modest {
    0%, 100% {
      transform: translate(0, 0) rotate(-4deg);
    }
    50% {
      transform: translate(3%, -5%) rotate(0deg);
    }
  }