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;
}

div[id^="ulum"] .sec01 .block .box img.pts1 {
 top: 53.5%;
}

div[id^="ulum"] .sec01 .block .box img.pts2 {
 top: 53.5%;
}

div[id^="ulum"] .sec01 .block .box img.pts3 {
 bottom: 0;
}

div[id^="ulum"] .sec02 .block .box img.pts1 {
 top: 25.15%;
}

div[id^="ulum"] .sec02 .block .box img.pts2 {
 top: 31.3%;
}

div[id^="ulum"] .sec02 .block .box img.pts3 {
 top: 40.4%;
}

div[id^="ulum"] .sec02 .block .box img.pts4 {
 top: 55.5%;
}

div[id^="ulum"] .sec02 .block .flex {
 position: absolute;
 display: flex;
 flex-direction: column;
 bottom: 0;
}

div[id^="ulum"] .sec02 .block .flex img {
 position: relative;
 width: 100%;
}

/*ブランドページ*/
#ululumo .sec01 .block .box img.pts1 {
 width: 36.52%;
 top: -1.3%;
 right: -0.5%;
 left: unset;
}

#ululumo .sec01 .block .box img.pts2 {
 top: 41.2%;
}

#ululumo .sec01 .block .box img.pts3 {
 width: 50%;
 top: 80%;
 right: unset;
 left: 0;
}

#ululumo .sec01 .block .box img.pts4 {
 width: 50%;
 top: 80%;
 right: 0;
 left: unset;
}

#ululumo .sec01 .block .box img.pts5 {
 bottom: 0;
}

#ululumo .sec02 .block .box img.pts1 {
 width: 36.79%;
 top: 14.7%;
 right: unset;
 left: 0;
 z-index: 100;
}

#ululumo .sec02 .block .box img.pts2 {
 width: 100%;
 top: 18.1%;
}

#ululumo .sec02 .block .box img.pts3 {
 width: 36.72%;
 top: 39.8%;
 right: 0;
 left: unset;
}

#ululumo .sec02 .block .box img.pts4 {
 width: 33.6%;
 top: 65.25%;
 right: unset;
 left: 0;
}

#ululumo .sec02 .block .box img.pts5 {
 width: 33.54%;
 top: 83.15%;
 right: 0;
 left: unset;
}

#ululumo_2 .sec01 .block .flex {
 position: absolute;
 display: flex;
 flex-wrap: wrap;
 bottom: 0;
}

#ululumo_2 .sec01 .block .flex img:nth-of-type(odd) {
 position: relative;
 width: 49.7%;
}

#ululumo_2 .sec01 .block .flex img:nth-of-type(even) {
 position: relative;
 width: 50.3%;
}

#ululumo_2 .sec02 .block .box img.pts1 {
 top: 0;
}

#ululumo_2 .sec02 .block .box img.pts2 {
 bottom: 0;
}

/****アニメーション****/
.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;
 }
}

/*ぽよよんと跳ねる↓*/
.poyoyondown.is-animated {
 animation: poyoyondown 0.75s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes poyoyondown {
 0% {
  transform: scale(1.0, 1.0) translateY(140px);
  opacity: 0;
 }

 50% {
  transform: scale(0.99, 1.02) translateY(0);
 }

 65% {
  transform: scale(1.0, 0.98) translateY(20px);
 }

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

 20%,
 100% {
  opacity: 1;
 }
}

/*ぽよよんと跳ねる2*/
.poyoyon2.is-animated {
 animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
 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;
 }
}

/*スライドイン_アップ*/
.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 1.5s cubic-bezier(0.4, 0.4, 0.2, 1) forwards 0.4s;
}

@keyframes revealImage {
 0% {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  /* 右側が隠れる */
 }

 25% {
  opacity: 1;
 }

 100% {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  /* 全体を表示させる */
 }
}

/*下へ表示*/
.scrollinDown.is-animated {
 clip-path: inset(0 0 100% 0);
 animation: revealImage02 1.5s cubic-bezier(0.4, 0.4, 0.2, 1) forwards 0.4s;
}

@keyframes revealImage02 {
 0% {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
 }

 25% {
  opacity: 1;
 }

 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: 2.2rem;
 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%, 2%) rotate(0deg);
 }
}

/*ふわふわ控えめ*/
.fuwafuwa.modest {
 animation-name: fuwafuwa_modest;
}

@keyframes fuwafuwa_modest {

 0%,
 100% {
  transform: translate(0, 0) rotate(-4deg);
 }

 50% {
  transform: translate(3%, -2%) rotate(0deg);
 }
}