a {
	display: block;
}

img {
    width: 100%;
}

.price a {
    font-family: "new-atten-round", sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 3.7vw, 20px);
    letter-spacing: 0;
    color: #FFF;
    background-color: #f86e8f;
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: center;
    border-radius: 100px;
    width: max-content;
    text-align: center;
    padding-block: 1%;
    padding-inline: clamp(10px, 4vw, 20px);
    align-items: center;
    -webkit-text-stroke: 0.4px;
    min-width: 152px;
}

@media screen and (min-width: 551px) {
    .price a {
        min-width: 216px;
    }
}

.price a::before {
    content:"";
    width: 4.3vw;
    max-width: 23px;
    aspect-ratio: 49 / 67;
    background: url(../images/price-cup-cake.png) center center / contain no-repeat;
}

.yurayura1 {
  animation: yurayura1 1s steps(2) infinite;
}

@keyframes yurayura1 {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 25deg;
    }
}

.yurayura2 {
  animation: yurayura2 1s steps(2) infinite;
}

@keyframes yurayura2 {
    0% {
        rotate: 25deg;
    }
    100% {
        rotate: 0deg;
    }
}

.yurayura3 {
  animation: yurayura3 1s steps(2) infinite;
}

@keyframes yurayura3 {
    0% {
        rotate: 25deg;
    }
    25% {
        rotate: 25deg;
    }
    125% {
        rotate: 0deg;
    }
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-in.show {
    opacity: 1;
}

.lp-contents {
    position: relative;
    color: #f86e8f;
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 600;
}

.pc-contents-wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff9eb;
}

@media (max-width: 550px) {
    .pc-contents-wrap {
        background-color: #fff8f9;
    }
}

.pc-left {
    width: 29%;
    position: absolute;
    top: 8vw;
    left: 0;
}

.pc-left-illustration {
    width: 65%;
    margin-inline: auto;
}

.pc-left-text {
    font-family: "tornac", sans-serif;
    text-align: center;
    margin-top: 2%;
    font-size: clamp(14px, 1.2vw, 30px);
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.pc-left-btn {
    margin-top: 17%;
    margin-left: 35%;
    position: relative;
    width: 35%;
}

.pc-left-btn::before {
    content: "";
    width: 33%;
    aspect-ratio: 113 / 120;
    background: url(../images/strawberry.png) center center / contain no-repeat;
    position: absolute;
    top: -70%;
    left: -15%;
    z-index: 1;
    transform: rotate(-22deg);
}

.pc-left-btn a {
    text-align: center;
    font-family: "new-atten-round", sans-serif;
    background-color: #f86e8f;
    color: #FFF;
    padding-block: 5%;
    width: 100%;
    border-radius: 100px;
    font-weight: bold;
    font-size: clamp(20px, 1.5vw, 38px);
    letter-spacing: 0.02em;
}

.pc-left-sns {
    margin-top: 14%;
    display: flex;
    justify-content: space-between;
    max-width: 56%;
    margin-left: 26%;
}

.pc-left-sns li:first-child {
    width: 12%;
}

.pc-left-sns li:nth-child(2) {
    width: 13%;
}

.pc-left-sns li:nth-child(3) {
    width: 13%;
}

.pc-left-sns li:last-child {
    width: 15%;
}

.pc-right {
    width: 29%;
    margin-top: 7vw;
    position: relative;
    margin-left: auto;
}

.pc-right::after {
    content: "";
    width: 10.4%;
    aspect-ratio: 99 / 109;
    background: url(../images/pc-right-deco.png) center center / contain no-repeat;
    position: absolute;
    top: -9%;
    right: 15%;
}

.pc-right-inner {
    width: 90%;
    margin-inline: auto;
    background-color: #fddbe3;
    border-radius: 2vw;
    padding-top: 5%;
    padding-bottom: 2%;
}

.pc-right-illustration {
    width: 48%;
    margin-inline: auto;
}

.pc-right-text {
    text-align: center;
    margin-top: 6%;
    font-size: clamp(8px, 0.6vw, 19px);
    line-height: 2.2;
    font-weight: 600;
}

.pc-right-sns {
    margin-top: 11%;
    display: flex;
    justify-content: space-between;
    max-width: 28%;
    margin-left: 35%;
}

.pc-right-sns li {
    width: 20%;
}

@media (max-width: 1300px) {
  .pc-left,
  .pc-right {
    display: none;
  }
}

.pc-copyright {
    margin-top: 4%;
    text-align: center;
    font-size: clamp(16px, 1vw, 26px);
}

.main-contents {
    margin-inline: auto;
    max-width: 550px;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 10;
    background-color: #fff8f9;
    position: relative;
}

.mv {
    background-color: #FCEDF5;
    aspect-ratio: 1094 / 1191;
}

.mv-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mv-text {
    width: 36%;
    aspect-ratio: 394 / 330;
    position: absolute;
    top: 15%;
    left: 31%;
    z-index: 2;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mv-img {
    width: 100%;
    aspect-ratio: 1096 / 1191;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mv-text.is-show,
.mv-img.is-show {
    opacity: 1;
    transform: translateY(0);
}


.mv-img::after {
    content: "";
    width: 116%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -2%;
    left: -7%;
}

.mv-deco1 {
    width: 6%;
    position: absolute;
    top: 9%;
    left: 18%;
}

.mv-deco2 {
    width: 5%;
    position: absolute;
    top: 15%;
    left: 8%;
    transform: rotate(31deg);
}

.mv-deco3 {
    width: 5%;
    position: absolute;
    top: 21%;
    left: 19%;
    transform: rotate(-32deg);
}

.mv-deco4 {
    width: 4%;
    position: absolute;
    top: 31%;
    left: 8%;
    transform: rotate(-38deg);
}

.mv-deco5 {
    width: 7%;
    position: absolute;
    top: 41%;
    left: 14%;
}

.mv-deco6 {
    width: 4%;
    position: absolute;
    top: 7%;
    right: 28%;
    transform: rotate(-45deg);
}

.mv-deco7 {
    width: 5%;
    position: absolute;
    top: 6%;
    right: 18%;
    transform: rotate(30deg);
}

.mv-deco8 {
    width: 7%;
    position: absolute;
    top: 15%;
    right: 5%;
}

.mv-deco9 {
    width: 5%;
    position: absolute;
    top: 26%;
    right: 16%;
    transform: rotate(11deg);
}

.mv-deco10 {
    width: 7%;
    position: absolute;
    top: 40%;
    right: 20%;
    transform: rotate(-45deg);
}

.mv-deco11 {
    width: 5%;
    position: absolute;
    top: 38%;
    right: 5%;
    transform: rotate(-27deg);
}

.intro {
    margin-top: 13%;
}

.intro-top-text {
    color: #8c6239;
    text-align: center;
    font-size: clamp(8px, 2.5vw, 14px);
    line-height: 2.1;
    position: relative;
}

.intro-top-text::before {
    content: "";
    width: 8%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -14%;
    right: 12%;
    transform: rotate(30deg);
}

.intro-top-text::after {
    content: "";
    width: 5%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -24%;
    right: 17%;
    transform: rotate(-20deg);
}

.intro-top-text::before, 
.intro-top-text::after {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
}

.intro-top-text.show::before,
.intro-top-text.show::after {
    opacity: 1;
    transform: translateY(0);
}

.intro-top-text.show::after {
    transition-delay: .2s;
}

.scrollimg2 {
    margin-top: 10%;
    display: flex;
    gap: 6px;
    width: -moz-max-content;
    width: max-content;
    will-change: transform;
    animation: marquee-scroll 20s linear infinite;
}

.scrollimg2 img {
    width: 550px;
}

@keyframes marquee-scroll {
    100% {
        transform: translateX(-50%);
    }
}

.intro-pink-box {
    margin-top: 20%;
    background: #fddbe3;
    width: 94%;
    margin-inline: auto;
    border-radius: 24px;
    padding-top: 6%;
    padding-bottom: 10%;
}

.intro-pink-box-head {
    width: 49%;
    margin-inline: auto;
}

.intro-pink-box-text {
    text-align: center;
    margin-top: 5%;
    line-height: 2.6;
    font-size: clamp(8px, 2.1vw, 13px);
}

.intro-sns {
    margin-top: 11%;
    margin-right: 10%;
    display: flex;
    width: 29%;
    justify-content: space-between;
    margin-left: 37%;
}

.intro-sns li:first-child {
    width: 15%;
}

.intro-sns li:nth-child(2) {
    width: 18%;
}

.intro-sns li:last-child {
    width: 19%;
}

.intro-illustration {
    margin-top: 8%;
    position: relative;
}

.intro-illustration-rabbit {
    width: 25%;
    margin-left: 36%;
    position: relative;
    z-index: 3;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.8s;
}

.intro-illustration.show .intro-illustration-rabbit {
    opacity: 1;
    transform: translateY(0);
}


.intro-illustration-cake {
    width: 48%;
    position: absolute;
    top: -43%;
    left: 16%;
    z-index: 2;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.intro-illustration.show .intro-illustration-cake {
    opacity: 1;
    transform: translateY(0);
}

.intro-illustration-text {
    width: 22%;
    position: absolute;
    top: 30%;
    right: 18%;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 1.6s;
}

.intro-illustration.show .intro-illustration-text {
    opacity: 1;
    transform: scale(1);
}

.intro-deco1 {
    width: 9%;
    position: absolute;
    top: 33%;
    left: 8%;
    transform: rotate(-24deg);
}

.intro-deco2 {
    width: 12%;
    position: absolute;
    top: 83%;
    left: 15%;
}

.intro-deco3 {
    width: 10%;
    position: absolute;
    top: -6%;
    right: 24%;
    transform: rotate(-28deg);
}

.intro-deco4 {
    width: 10%;
    position: absolute;
    top: 34%;
    right: 6%;
}

.intro-deco5 {
    width: 11%;
    position: absolute;
    top: 73%;
    right: 14%;
}

.intro-img {
    position: relative;
    margin-top: 12%;
    width: 108%;
    margin-left: -2%;
}

.intro-img::before {
    content: "";
    width: 103%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -5%;
    left: -4%;
    z-index: 1;
}

.intro-img::after {
    content: "";
    width: 105%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -3%;
    left: -4%;
}

.green-one-piece {
    margin-top: 29%;
}

.green-one-piece1{
    position: relative;
}

.green-one-piece-swiper-wrap {
    position: relative;
    width: 83%;
    margin-inline: auto;
}

.green-one-piece-swiper-wrap::before {
    content: "";
    width: 34%;
    aspect-ratio: 301 / 109;
    background: url(../images/green-one-piece-swiper-cream1.png) center center / contain no-repeat;
    position: absolute;
    top: -4%;
    left: -5%;
    z-index: 2;
}

.green-one-piece-swiper-wrap::after {
    content: "";
    width: 36%;
    aspect-ratio: 301 / 109;
    background: url(../images/green-one-piece-swiper-cream2.png) center center / contain no-repeat;
    position: absolute;
    bottom: -3%;
    right: -11%;
    z-index: 1;
}

.swiper-pagination {
    position: static;
    margin-top: 6%;
    display: flex;
    justify-content: end;
    padding-right: 8%;
}

.swiper-pagination-bullet {
  background: url(../images/pagination.svg) center center /contain no-repeat;
  border-radius: 0;
  width: 7%;
  max-width: 47px;
  height: auto;
  aspect-ratio: 3 / 2;
  opacity: 1;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: url(../images/pagination-active.svg) center center /contain no-repeat;
}

.green-one-piece-cat {
    width: 22%;
    position: absolute;
    bottom: 1%;
    left: 2%;
    z-index: 1;
}

.green-one-piece-cat img {
    transform: translateX(-140%);
    transition: transform 1s ease;
    animation: shake .4s step-end .1s infinite;
}

.green-one-piece-cat.show img {
    transform: translateX(0);
}

@keyframes animation_shake {
    0%, 100% {
        rotate: 0deg;
    }
    45% {
        rotate: 5deg;
    }
}

.green-one-piece-cup-cake {
    width: 14%;
    position: absolute;
    bottom: -1%;
    left: 21%;
    z-index: 1;
}

.green-one-piece2 {
    margin-top: 21%;
    position: relative;
}

.green-one-piece2-text {
    width: 65%;
    position: absolute;
    top: -4%;
    right: 8%;
    opacity: 0;
    scale: .5;
}

.green-one-piece2.show .green-one-piece2-text {
    opacity: 1;
    scale: 1;
    transition: .4s cubic-bezier(.25, .25, .145, 1.515) 1s;
}

.green-one-piece-img {
    width: 82%;
    margin-left: 5%;
    opacity: 0;
    scale: .5;
}

.green-one-piece2.show .green-one-piece-img {
    opacity: 1;
    scale: 1;
    transition: opacity 0.6s ease, scale 0.6s ease;
}

.green-one-piece2-cream {
    width: 15%;
    position: absolute;
    bottom: 2%;
    left: 6%;
}

.green-one-piece .heart-pokopoko-wrap {
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 30%;
    left: 0;
}

.heart-pokopoko-wrap {
    width: 100%;
    position: relative;
    pointer-events: none;
}

.heart-pokopoko1,
.heart-pokopoko2 {
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease 0s, translate 0s ease 0.3s;
    translate: 0 100%;
}

.heart-pokopoko1.show,
.heart-pokopoko2.show {
    transition: opacity 0.3s ease 0s, translate 4s ease 0s;
    translate: 0 0;
    opacity: 1;
}

.heart-pokopoko1 img,
.heart-pokopoko2 img {
    width: 31%;
    opacity: 0;
    transform: scale(0) translateY(20px);
    animation: none;
    position: absolute;
    top: 6%;
    left: 20%;
}

.heart-pokopoko1.show img:first-child,
.heart-pokopoko2.show img:first-child {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0s, 0.8s;
}

.heart-pokopoko1.show img:nth-child(2),
.heart-pokopoko2.show img:nth-child(2) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.4s, 1s;
    top: 39%;
    left: 12%;
    transform: rotate(-30deg);
}

.heart-pokopoko1.show img:nth-child(3),
.heart-pokopoko2.show img:nth-child(3) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.8s, 1.2s;
    width: 47%;
    top: 71%;
    left: 13%;
}

@keyframes pokopoko-pop {
  0% {
    transform: scale(0.3) translateY(20px);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) translateY(-5px);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes pokopoko {
  0% {
    rotate: 3deg;
  }
  50% {
    rotate: -3deg;
  }
  100% {
    rotate: 3deg;
  }
}

.green-one-piece2-illustration {
    width: 40%;
    position: absolute;
    bottom: 5%;
    right: 6%;
}

.green-one-piece-price {
    margin-top: 16%;
    text-align: center;
}

.green-one-piece-price a {
    margin-inline: auto;
}

.green-one-piece-bottom {
    position: relative;
    margin-top: 3%;
}

.green-one-piece-bottom1 {
    width: 26%;
    margin-left: auto;
    margin-right: 3%;
    position: relative;
    z-index: 2;
    animation: shake .4s step-end .1s infinite;
    transform: translateX(140%);
    transition: 1s ease;
}

.green-one-piece-bottom.show .green-one-piece-bottom1 {
    transform: translateX(0);
}

@keyframes shake {
    0% {
        rotate: -1deg;
    }
    50% {
        rotate: 1deg;
    }
    100% {
        rotate: -1deg;
    }
}

.green-one-piece-bottom2 {
    width: 10%;
    position: absolute;
    top: 23%;
    right: 29%;
    transform: rotate(-27deg);
    opacity: 0;
    transition: opacity .3s ease;
    transition-delay: 0.6s;
}

.green-one-piece-bottom.show .green-one-piece-bottom2 {
    opacity: 1;
}

.pink-one-piece {
    margin-top: 1%;
}

.pink-one-piece-img1 {
    position: relative;
    width: 101%;
    margin-left: -1%;
}

.pink-one-piece-img1::before {
    content: "";
    width: 111%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -4%;
    left: -5%;
    z-index: 1;
}

.pink-one-piece-img1::after {
    content: "";
    width: 110%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -2%;
    left: -4%;
}

.pink-one-piece-img3 {
    transition-delay: 0.4s;
}

.pink-one-piece-flex {
    margin-top: 16%;
    display: flex;
    width: 98%;
    gap: 2%;
    margin-inline: auto;
}

.pink-one-piece-price {
    margin-top: 8%;
    position: relative;
}

.pink-one-piece-price::before {
    content: "";
    width: 11%;
    aspect-ratio: 91 / 72;
    background: url(../images/strawberry-right.png) center center / contain no-repeat;
    position: absolute;
    top: 10%;
    left: 10%;
    transform: rotate(15deg);
}

.pink-one-piece-price li a {
    margin-inline: auto;
}

.pink-one-piece-price li:nth-child(2) {
    margin-top: 4%;
}

.pink-one-piece-price li:nth-child(2) a {
    padding-inline: 4%;
}

.baby {
    margin-top: 10%;
    position: relative;
}

.baby::before {
    content: "";
    width: 10%;
    aspect-ratio: 97 / 137;
    background: url(../images/baby-deco.png) center center / contain no-repeat;
    position: absolute;
    top: -3%;
    right: 5%;
    z-index: 2;
    opacity: 0;
    transform: translateY(40px) scale(0.6);
    transform-origin: center bottom;
    transition-delay: 1.2s;
}

.baby.show::before {
    opacity: 1;
    animation: pop 0.9s forwards;
    animation-delay: 0.8s;
}

@keyframes pop {
  0% {
    transform: translateY(40px);
  }
  60% {
    transform: translateY(-6px);
  }
  90% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.baby-img1-wrap {
    position: relative;
}

.baby-img1-text {
    position: absolute;
    top: 10%;
    left: 0;
    margin-left: 13%;
    color: #8c6239;
    z-index: 1;
    font-family: "tornac", sans-serif;
    font-size: clamp(25px, 6.3vw, 35px);
    letter-spacing: 0.02em;
}

.baby-img1-wrap::before {
    content: "";
    width: 16%;
    aspect-ratio: 129 / 104;
    background: url(../images/strawberry-left.png) center center / contain no-repeat;
    position: absolute;
    top: 18%;
    left: 5%;
    z-index: 1;
    transform: rotate(-16deg);
    animation: yurayura1 1s steps(2) infinite;
}

.baby-img1-wrap::after {
    content: "";
    width: 13%;
    aspect-ratio: 129 / 104;
    background: url(../images/strawberry-right.png) center center / contain no-repeat;
    position: absolute;
    top: 23%;
    left: 17%;
    z-index: 1;
    transform: rotate(14deg);
    animation: yurayura2 1s steps(2) infinite;
}

.baby-img1 {
    position: relative;
    width: 105%;
    margin-left: -2%;
}

.baby-img1::before {
    content: "";
    width: 107%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -2%;
    left: -5%;
    z-index: 1;
}

.baby-img1::after {
    content: "";
    width: 108%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -3%;
    left: -5%;
}

.baby-price1 {
    margin-top: 16%;
    text-align: center;
    position: relative;
    width: fit-content;
    margin-left: 26%;
}

.baby-price1 a {
    padding-block: 3%;
    padding-inline: 8%;
}

.baby-price1::before {
    content: "";
    width: 53%;
    aspect-ratio: 237 / 274;
    background: url(../images/baby-price1-cat.png) center center / contain no-repeat;
    position: absolute;
    top: -148%;
    left: -44%;
    z-index: 1;
    animation: shake .4s step-end .1s infinite;
    transform: translateX(-140%);
    transition: 1.5s ease;
}

.baby-price1.show::before {
    transform: translateX(0);
}

.baby-price1::after {
    content: "";
    width: 18%;
    aspect-ratio: 98 / 105;
    background: url(../images/strawberry.png) center center / contain no-repeat;
    position: absolute;
    top: -59%;
    right: -20%;
    transform: rotate(-19deg);
}

.baby-img2-wrap {
    margin-top: 23%;
    width: 79%;
    margin-inline: auto;
    position: relative;
}

.baby-img2-swiper-wrap {
    perspective: 800px;
}

.baby-img2-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 296 / 262;
}

.baby-img2-inner .baby-img2-1 {
    transform: rotateY(0deg);
    -webkit-animation: omote 10s linear 0s infinite;
    animation: omote 10s linear 0s infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes omote {
    0% {
        rotate: y 0deg;
    }
    5% {
        rotate: y 180deg;
    }
    50% {
        rotate: y 180deg;
    }
    55% {
        rotate: y 1turn;
    }
    100% {
        rotate: y 1turn;
    }
}

.baby-img2-inner .baby-img2-2 {
    -webkit-animation: ura 10s linear 0s infinite;
    animation: ura 10s linear 0s infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 0;
    position: absolute;
    rotate: y 180deg;
    top: 0;
}

@keyframes ura {
    0% {
        rotate: y 180deg;
    }
    5% {
        rotate: y 1turn;
    }
    50% {
        rotate: y 1turn;
    }
    55% {
        rotate: y 540deg;
    }
    100% {
        rotate: y 540deg;
    }
}

.baby-img2-swiper {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.4, 0, .2, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.baby-img2-swiper-wrap.is-flip .baby-img2-swiper {
  transform: rotateY(180deg);
}

.baby-img2-wrap .heart-pokopoko-wrap {
    width: 100%;
    height: 30%;
    position: absolute;
    top: -24%;
    left: 0;
    pointer-events: none;
}

.baby-img2-wrap .heart-pokopoko1,
.baby-img2-wrap .heart-pokopoko2 {
    width: 26%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease 0s, translate 0s ease 0.3s;
    translate: 0 100%;
}

.baby-img2-wrap .heart-pokopoko1.show,
.baby-img2-wrap .heart-pokopoko2.show {
    transition: opacity 0.3s ease 0s, translate 4s ease 0s;
    translate: 0 0;
    opacity: 1;
}

.baby-img2-wrap .heart-pokopoko1 img,
.baby-img2-wrap .heart-pokopoko2 img {
    width: 31%;
    opacity: 0;
    transform: scale(0) translateY(20px);
    animation: none;
    position: absolute;
    top: 5%;
    left: 49%;
}

.baby-img2-wrap .heart-pokopoko1.show img:first-child,
.baby-img2-wrap .heart-pokopoko2.show img:first-child {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0s, 0.8s;
}

.baby-img2-wrap .heart-pokopoko1.show img:nth-child(2),
.baby-img2-wrap .heart-pokopoko2.show img:nth-child(2) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.4s, 1s;
    top: 42%;
    left: 22%;
    transform: rotate(-30deg);
}

.baby-img2-wrap .heart-pokopoko1.show img:nth-child(3),
.baby-img2-wrap .heart-pokopoko2.show img:nth-child(3) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.8s, 1.2s;
    width: 47%;
    top: 50%;
    left: 60%;
}

.baby-price2 {
    margin-top: 10%;
    text-align: center;
    position: relative;
    width: fit-content;
    margin-left: 30%;
}

.baby-price2 a {
    padding-block: 2%;
}

@media screen and (max-width: 550px) {
    .baby-price2 a {
        width: 40vw;
    }
}

.baby-price2::before {
    content: "";
    width: 52%;
    aspect-ratio: 212 / 88;
    background: url(../images/baby-cream1.png) center center / contain no-repeat;
    position: absolute;
    top: -7%;
    left: -60%;
}

.baby-price2::after {
    content: "";
    width: 57%;
    aspect-ratio: 249 / 206;
    background: url(../images/baby-cream2.png) center center / contain no-repeat;
    position: absolute;
    top: -96%;
    right: -67%;
}

.baby-bag {
    margin-top: 22%;
}

.baby-bag-img {
    position: relative;
    width: 104%;
    margin-left: -3%;
}

.baby-bag-img::before {
    content: "";
    width: 128%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -5%;
    left: -7%;
    z-index: 1;
}

.baby-bag-illustration {
    width: 72%;
    aspect-ratio: 788 / 128;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.baby-bag-illustration img {
    opacity: 0;
    transform: translateY(80px);
    transform-origin: center bottom;
    transition-delay: 1.2s;
}

.baby-bag-img.show .baby-bag-illustration img {
    opacity: 1;
    animation: pop 0.9s cubic-bezier(.22,1,.36,1) 1s forwards;
}

.baby-bag .price {
    width: fit-content;
    margin-left: 25%;
    margin-top: 15%;
}

.baby-bag .price a {
    padding-inline: 10%;
    padding-block: 3%;
}

.movie-sec {
    position: relative;
    margin-top: 10%;
    padding-left: 2%;
}

.movie {
    width: 50%;
    border-radius: 50%;
    overflow: hidden;
}

.movie-sec-text {
    font-family: "tornac", sans-serif;
    color: #8c6239;
    width: fit-content;
    position: absolute;
    top: 32%;
    left: 58%;
    font-size: clamp(8px, 3vw, 18px);
    font-weight: 600;
    line-height: 2.3;
    letter-spacing: 0.08em;
}

.movie-sec-text::before {
    content: "";
    width: 32%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -92%;
    right: 12%;
    transform: rotate(-31deg);
}

.movie-sec-text::after {
    content: "";
    width: 21%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -45%;
    right: -12%;
}

.movie-sec-text::before, 
.movie-sec-text::after {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
}

.movie-sec.show .movie-sec-text::before{
    opacity: 1;
    transform: translateY(0) rotate(-31deg);    
}

.movie-sec.show .movie-sec-text::after {
    opacity: 1;
    transform: translateY(0);
}

.movie-sec .movie-sec-text::after {
    transition-delay: .2s;
}

.movie-sec-illustration {
    width: 43%;
    position: absolute;
    bottom: 4%;
    right: 4%;
}

.shirt-skirt-img1 {
    width: 104%;
    margin-left: -2%;
}

.shirt-skirt {
    margin-top: 9%;
}

.shirt-skirt-price1 {
    margin-top: 6%;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
}

.shirt-skirt-price1 li a {
    padding-block: 2%;
}

.shirt-skirt-price1 li:last-child {
    margin-top: 7%;
    margin-left: -11%;
}

.shirt-skirt-price1 li:last-child a {
    padding-left: 5%;
    padding-inline: 10%;
}

.shirt-skirt-img2-wrap {
    margin-top: 32%;
    position: relative;
}

.shirt-skirt-img2-deco {
    width: 22%;
    position: absolute;
    top: -7%;
    right: 14%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.1s ease;
    transition-delay: 1.2s;
}

.shirt-skirt-img2-wrap.show .shirt-skirt-img2-deco {
    opacity: 1;
    animation: pop 0.9s cubic-bezier(.22,1,.36,1) 1s forwards;
}

.shirt-skirt-img2-deco::before {
    content: "";
    width: 40%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -15%;
    right: 68%;
    transform: rotate(-32deg);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: 2s;
}

.shirt-skirt-img2-wrap.show .shirt-skirt-img2-deco::before {
    opacity: 1;
    transform: translateY(0);
}

.shirt-skirt-img2-deco::after {
    content: "";
    width: 27%;
    aspect-ratio: 94 / 91;
    background: url(../images/heart.png) center center / contain no-repeat;
    position: absolute;
    top: -28%;
    right: 44%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: 2.2s;
}

.shirt-skirt-img2-wrap.show .shirt-skirt-img2-deco::after {
    opacity: 1;
    transform: translateY(0);
}

.shirt-skirt-img2 {
    width: 92%;
    margin-inline: auto;
    position: relative;
}

.shirt-skirt-img2::after {
    content: "";
    width: 34%;
    aspect-ratio: 343 / 142;
    background: url(../images/shirt-skirt-img2-cream.png) center center / contain no-repeat;
    position: absolute;
    bottom: -4%;
    left: -3%;
}

.shirt-skirt-img2 img {
    border-top-left-radius: 274px;
    border-top-right-radius: 274px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.shirt-skirt-img3-wrap {
    margin-top: 7%;
    width: 54%;
    margin-inline: auto;
    position: relative;
}

.shirt-skirt-img3 {
    opacity: 0;
    scale: .5;
}

.shirt-skirt-img3-wrap.show .shirt-skirt-img3 {
    opacity: 1;
    scale: 1;
    transition: opacity 0.6s ease, scale 0.6s ease;
}

.shirt-skirt-im3-deco1 {
    width: 26%;
    position: absolute;
    top: 8%;
    left: -30%;
    transform: rotate(-38deg);
}

.shirt-skirt-im3-deco2 {
    position: absolute;
    top: 26%;
    left: -24%;
    transform: rotate(-12deg);
    font-family: "tornac", sans-serif;
    font-size: clamp(10px, 3.3vw, 18px);
}

.shirt-skirt-im3-deco3 {
    width: 25%;
    position: absolute;
    top: 41%;
    left: -22%;
    transform: rotate(7deg);
}

.shirt-skirt-im3-deco4 {
    width: 25%;
    position: absolute;
    top: 60%;
    left: -32%;
    transform: rotate(-37deg);
}

.shirt-skirt-im3-deco5 {
    width: 25%;
    position: absolute;
    top: 60%;
    left: -32%;
    transform: rotate(-37deg);
}

.shirt-skirt-im3-deco5 {
    width: 25%;
    position: absolute;
    top: 74%;
    left: -13%;
    transform: rotate(-19deg);
}

.shirt-skirt-im3-deco6 {
    width: 20%;
    position: absolute;
    top: -1%;
    left: 65%;
}

.shirt-skirt-im3-deco7 {
    width: 25%;
    position: absolute;
    top: 9%;
    left: 100%;
    transform: rotate(-31deg);
}

.shirt-skirt-im3-deco8 {
    width: 25%;
    position: absolute;
    top: 39%;
    left: 96%;
    transform: rotate(-19deg);
}

.shirt-skirt-im3-deco8 {
    position: absolute;
    top: 28%;
    left: 111%;
    font-family: "tornac", sans-serif;
    font-size: clamp(10px, 3.3vw, 18px);
    transform: rotate(5deg);
}

.shirt-skirt-im3-deco9 {
    width: 26%;
    position: absolute;
    top: 39%;
    left: 96%;
    transform: rotate(-15deg);
}

.shirt-skirt-im3-deco10 {
    width: 26%;
    position: absolute;
    top: 54%;
    left: 109%;
    transform: rotate(-45deg);
}

.shirt-skirt-im3-deco11 {
    width: 32%;
    position: absolute;
    top: 72%;
    left: 102%;
}

.shirt-skirt-im3-deco11 img {
    animation: shake .4s step-end .1s infinite;
    transform: translateX(125px);
    transition: 1s ease;
}

.shirt-skirt-img3-wrap.show .shirt-skirt-im3-deco11 img {
    transform: translateX(0);
}

.shirt-skirt-price2 {
    margin-top: 3%;
    margin-left: 4%;
}

.shirt-skirt-price2 li a {
    margin-inline: auto;
    width: 37%;
    justify-content: center;
    padding-left: 0;
}

.shirt-skirt-price2 li:last-child {
    margin-top: 2%;
}

.one-piece {
    margin-top: 19%;
}

.one-piece-img1-wrap {
    position: relative;
}

.one-piece-img1 {
    position: relative;
    width: 103%;
    margin-left: -1%;
}

.one-piece-img1::before {
    content: "";
    width: 111%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -3%;
    left: -5%;
    z-index: 1;
}

.one-piece-img1::after {
    content: "";
    width: 111%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -3%;
    left: -9%;
}

.one-piece-img1-illustration {
    width: 30%;
    position: absolute;
    bottom: 3%;
    left: 5%;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease, transform 3s ease;
    animation: sway 2s ease-in-out infinite;
    transform-origin: top center;
    animation-delay: 2s;
}

@keyframes sway {
  0%   { rotate: 2deg;}
  50%  { rotate: -2deg; }
  100% { rotate: 2deg; }
}

.one-piece-img1-wrap.show .one-piece-img1-illustration {
    opacity: 1;
    transform: translateY(0);
}

.one-piece-img2 {
    margin-top: 14%;
    width: 96%;
    margin-inline: auto;
    position: relative;
}

.one-piece-img2-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 296 / 262;
}

.one-piece-img2-inner .one-piece-img2-1 {
    transform: rotateY(0deg);
    -webkit-animation: omote 10s linear 0s infinite;
    animation: omote 10s linear 0s infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes omote {
    0% {
        rotate: y 0deg;
    }
    5% {
        rotate: y 180deg;
    }
    50% {
        rotate: y 180deg;
    }
    55% {
        rotate: y 1turn;
    }
    100% {
        rotate: y 1turn;
    }
}

.one-piece-img2-inner .one-piece-img2-2 {
    -webkit-animation: ura 10s linear 0s infinite;
    animation: ura 10s linear 0s infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    left: 0;
    position: absolute;
    rotate: y 180deg;
    top: 0;
}

@keyframes ura {
    0% {
        rotate: y 180deg;
    }
    5% {
        rotate: y 1turn;
    }
    50% {
        rotate: y 1turn;
    }
    55% {
        rotate: y 540deg;
    }
    100% {
        rotate: y 540deg;
    }
}

.one-piece-img2 .heart-pokopoko-wrap {
    width: 100%;
    height: 30%;
    position: absolute;
    top: 8%;
    left: 0;
}

.one-piece-img2 .heart-pokopoko1,
.one-piece-img2 .heart-pokopoko2 {
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 8%;
    opacity: 0;
    transition: opacity 0.5s ease 0s, translate 0s ease 0.3s;
    translate: 0 100%;
}

.one-piece-img2 .heart-pokopoko1.show,
.one-piece-img2 .heart-pokopoko2.show {
    transition: opacity 0.3s ease 0s, translate 4s ease 0s;
    translate: 0 0;
    opacity: 1;
}

.one-piece-img2 .heart-pokopoko1 img,
.one-piece-img2 .heart-pokopoko2 img {
    width: 31%;
    opacity: 0;
    transform: scale(0) translateY(20px);
    animation: none;
    position: absolute;
    top: 4%;
    left: 23%;
}

.one-piece-img2 .heart-pokopoko1.show img:first-child,
.one-piece-img2 .heart-pokopoko2.show img:first-child {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0s, 0.8s;
}

.one-piece-img2 .heart-pokopoko1.show img:nth-child(2),
.one-piece-img2 .heart-pokopoko2.show img:nth-child(2) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.4s, 1s;
    top: 36%;
    left: 0;
}

.one-piece-img2 .heart-pokopoko1.show img:nth-child(2) img,
.one-piece-img2 .heart-pokopoko2.show img:nth-child(2) img {
    transform: rotate(-60deg);
}

.one-piece-img2 .heart-pokopoko1.show img:nth-child(3),
.one-piece-img2 .heart-pokopoko2.show img:nth-child(3) {
    opacity: 1;
    animation: pokopoko-pop 0.8s ease-out forwards, pokopoko 1.2s ease-in-out infinite alternate 0.8s;
    animation-delay: 0.8s, 1.2s;
    width: 47%;
    top: 43%;
    left: 40%;
}

.one-piece-price1 {
    margin-top: 14%;
    width: fit-content;
    margin-inline: auto;
}

.one-piece-price1 a {
    padding-block: 2%;
}

.one-piece-swiper-wrap {
    margin-top: 38%;
    position: relative;
}

.one-piece-swiper-wrap::before {
    content:"";
    width: 108%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -2%;
    left: -5%;
    z-index: 2;
}

.one-piece-swiper-wrap::after {
    content:"";
    width: 111%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: 6%;
    left: -5%;
    z-index: 2;
}

.one-piece-swiper img {
    max-width: 104%;
    margin-left: -2%;
}

.swiper-pagination2 {
    display: flex;
    justify-content: end;
    margin-top: 6%;
    padding-right: 2%;
}

.one-piece-swiper-rabbit {
    width: 19%;
    position: absolute;
    top: -16%;
    left: 7%;
    z-index: 3;
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.one-piece-swiper-wrap.show .one-piece-swiper-rabbit {
    opacity: 1;
    transform: translateY(0);
}

.one-piece-swiper-strawberry1 {
    width: 16%;
    position: absolute;
    top: -9%;
    left: 43%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.one-piece-swiper-wrap.show .one-piece-swiper-strawberry1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .6s;
}

.one-piece-swiper-strawberry2 {
    width: 20%;
    position: absolute;
    top: -11%;
    left: 76%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.one-piece-swiper-wrap.show .one-piece-swiper-strawberry2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .4s;
}

.one-piece-price2 {
    margin-top: 7%;
}

.one-piece-price2 a {
    margin-inline: auto;
}

.novelty {
    margin-top: 17%;
    background-color: #e0eeda;
    position: relative;
    padding-top: 6%;
    padding-bottom: 4%;
}

.novelty::before {
    content: "";
    width: 113%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    top: -2%;
    left: -4%;
    z-index: 4;
}

.novelty::after {
    content: "";
    width: 113%;
    aspect-ratio: 1203 / 64;
    background: url(../images/cream.svg) center center / contain no-repeat;
    position: absolute;
    bottom: -3%;
    left: -5%;
    z-index: 4;
}

.novelty-title {
    width: 61%;
    margin-inline: auto;
}

.novelty-title::before {
    content: "";
    width: 14%;
    aspect-ratio: 150 / 121;
    background: url(../images/ribbon-pink.png) center center / contain no-repeat;
    position: absolute;
    top: 7%;
    left: 5%;
    z-index: 2;
    transform: rotate(-40deg);
}

.novelty-date {
    width: 19%;
    position: absolute;
    top: 17%;
    right: 2%;
}

.novelty-date::before {
    content: "";
    width: 30%;
    aspect-ratio: 129 / 104;
    background: url(../images/strawberry-left.png) center center / contain no-repeat;
    position: absolute;
    bottom: 2%;
    left: -57%;
    z-index: 1;
}

.novelty-date::after {
    content: "";
    width: 37%;
    aspect-ratio: 129 / 104;
    background: url(../images/strawberry-right.png) center center / contain no-repeat;
    position: absolute;
    bottom: 10%;
    left: -22%;
    z-index: 1;
}

.novelty-date-inner {
    background-color: #FFF;
    border-radius: 50%;
    aspect-ratio: 1;
    position: relative;
    padding-top: 20%;
}

.novelty-date p {
    font-size: clamp(10px, 4vw, 20px);
    font-family: "new-atten-round", sans-serif;
    -webkit-text-stroke: 0.8px;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.novelty-date p span {
    font-size: clamp(10px, 2.4vw, 16px);
}

.novelty-date p:last-child {
    font-size: clamp(10px, 2.4vw, 16px);
    line-height: 1.3;
}

.novelty-date-inner::after {
    content: "";
    width: 72%;
    aspect-ratio: 150 / 121;
    background: url(../images/ribbon-red.png) center center / contain no-repeat;
    position: absolute;
    top: -30%;
    right: -13%;
    transform: rotate(4deg);
}

.novelty-body {
    margin-top: 5%;
    display: flex;
    padding-left: 5%;
    position: relative;
}

.novelty-body::after {
    content: "";
    width: 9%;
    aspect-ratio: 104 / 132;
    background: url(../images/novelty-cup-cake.png) center center / contain no-repeat;
    position: absolute;
    bottom: -6%;
    right: 2%;
    z-index: 3;
}

.novelty-img {
    width: 40%;
}

.novelty-info {
    margin-top: 12%;
}

.novelty-info-text1 {
    text-align: center;
    font-size: clamp(11px, 4vw, 21px);
    line-height: 1.2;
    -webkit-text-stroke: 0.4px;
}

.novelty-info-text2 {
    margin-top: 16%;
    font-size: clamp(8px, 2.7vw, 15px);
}

.novelty-info-text3 {
    margin-top: 2%;
    text-align: center;
    font-size: clamp(8px, 2.8vw, 17px);
    line-height: 1.7;
}

.novelty-attention {
    margin-top: 7%;
    margin-left: 4%;
    font-size: clamp(7px, 2vw, 11px);
}

.novelty-end {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 3;
}

.attention {
    margin-top: 7%;
    padding-left: 8%;
    font-size: clamp(7px, 2.6vw, 14px);
}

.attention ul {
    margin-top: 1%;
    line-height: 2.2;
}

.store-sns {
    margin-top: 11%;
    text-align: center;
}

.store-btn a {
    font-family: "new-atten-round", sans-serif;
    font-weight: 800;
    font-size: clamp(8px, 3vw, 16px);
    background-color: #f86e8f;
    color: #FFF;
    display: block;
    width: 33%;
    margin-inline: auto;
    border-radius: 100px;
    padding-block: 1%;
    -webkit-text-stroke: 0.8px;
}

.store-sns p {
    color: #f86e8f;
    font-size: clamp(6px, 1.8vw, 10px);
}

.sns-items {
    display: flex;
    width: 49%;
    justify-content: space-between;
    margin-top: 4%;
    margin-left: 23%;
}

.sns-items li {
    width: 14%;
}

.copyright {
    padding-block: 8%;
    text-align: center;
    font-size: clamp(6px, 2.4vw, 13px);
}