/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply fade-in animation to all images with staggered timing */
.cb-lp img {
  animation: fadeIn 1.2s ease-in-out;
  will-change: opacity, transform;
}

/* Main visual images - appear first */
.cb-lp .mv, .cb-lp .mv-2, .cb-lp .mv-3 {
  animation-delay: 0s;
}

/* Product images - staggered appearance */
.cb-lp .element-10, .cb-lp .element-8 img {
  animation-delay: 0.2s;
}

.cb-lp .element-11, .cb-lp .element-14, .cb-lp .element-16, .cb-lp .element-17 {
  animation-delay: 0.4s;
}

.cb-lp .element-2, .cb-lp .element-4, .cb-lp .element-5, .cb-lp .element-6, .cb-lp .element-a, .cb-lp .img {
  animation-delay: 0.6s;
}

/* Logo and SNS icons - appear last */
.cb-lp .JUN-ROP-logo, .cb-lp .x, .cb-lp .FB, .cb-lp .IG {
  animation-delay: 0.8s;
}

.cb-lp .mobile.mobile-wrapper {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.cb-lp .mobile .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.cb-lp .mobile .overlap {
  position: relative;
  width: 100%;
  height: 1215px;
  top: 50px;
  left: 0;
}

.cb-lp .mobile .footer {
  position: absolute;
  width: 235px;
  height: 289px;
  top: 826px;
  background-color: transparent;
  left: 50%;
  transform: translateX(-50%);
}

.cb-lp .mobile .JUN-ROP-logo {
  position: absolute;
  width: 119px;
  height: 20px;
  top: 269px;
  left: 58px;
}

.cb-lp .mobile .SNS {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 200px;
  left: 47px;
}

.cb-lp .mobile .x {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 100px;
}

.cb-lp .mobile .FB {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 50px;
}

.cb-lp .mobile .IG {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
}

.cb-lp .mobile .WOMENS-ONLINE-STORE {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Work Sans", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
}

.cb-lp .mobile .WOMENS-ONLINE-STORE a {
  text-decoration: none;
  color: #333333;
}

.cb-lp .mobile .mv {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.cb-lp .mobile .CHECKER-BORD {
  display: flex;
  width: 274px;
  height: 80px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 30px;
  position: relative;
  top: 665px;
  margin: auto;
  background-color: #ffffff80;
  border: 0.5px solid;
  border-color: #89b715;
}

.cb-lp .mobile .CHECKER-BOARD {
  position: relative;
  width: fit-content;
  margin-left: -11.00px;
  margin-right: -11.00px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #89b715;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: 29px;
}

.cb-lp .mobile .text-wrapper {
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #89b715;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 29px;
}

.cb-lp .mobile .span {
  font-size: 24px;
}

.cb-lp .mobile .overlap-group {
  position: relative;
  width: 100%;
  height: 2395px;
  top: 74px;
  left: 0;
}

.cb-lp .mobile .element {
  position: absolute;
  width: 100%;
  height: 880px;
  top: 1515px;
  left: 0;
}

.cb-lp .mobile .overlap-group-2 {
  position: relative;
  width: 100%;
  height: 880px;
  background-image: url(assets/images/backgrounds/mask-group.png);
  background-size: 100% 100%;
}

.cb-lp .mobile .img {
  width: 300px;
  height: 400px;
  top: 180px;
  left: 0;
  position: absolute;
  object-fit: cover;
}

.cb-lp .mobile .overlap-2 {
  position: absolute;
  width: 335px;
  height: 280px;
  top: 600px;
  right: 20px;
}

.cb-lp .mobile .element-2 {
  width: 210px;
  height: 280px;
  top: 0;
  left: 125px;
  position: absolute;
  object-fit: cover;
}

.cb-lp .mobile .SUN-VISOR {
  position: absolute;
  width: 130px;
  top: 0;
  left: 0;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 20px;
  text-decoration: underline;
}

.cb-lp .mobile .SUN-VISOR a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .mobile .overlap-wrapper {
  position: absolute;
  width: 100%;
  height: 880px;
  top: 793px;
  left: 0;
}

.cb-lp .mobile .overlap-3 {
  position: relative;
  width: 100%;
  height: 880px;
  background-image: url(assets/images/backgrounds/mask-group-1.png);
  background-size: 100% 100%;
}

.cb-lp .mobile .element-3 {
  position: relative;
  width: 300px;
  height: 400px;
  top: 240px;
  margin: auto;
  object-fit: cover;
}

.cb-lp .mobile .element-3 img {
  width: 100%;
}

.cb-lp .mobile .HAT-PULL-OVER {
  width: 149px;
  font-family: "Belleza", Helvetica;
  margin-top: 10px;
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 20px;
  text-decoration: underline;
}

.cb-lp .mobile .HAT-PULL-OVER a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .mobile .overlap-group-wrapper {
  position: absolute;
  width: 100%;
  height: 880px;
  top: 0;
  left: 0;
}

.cb-lp .mobile .overlap-4 {
  position: relative;
  width: 100%;
  height: 880px;
  background-image: url(assets/images/backgrounds/mask-group-2.png);
  background-size: 100% 100%;
}

.cb-lp .mobile .element-4 {
  width: 232px;
  height: 310px;
  top: 483px;
  right: 20px;
  position: absolute;
  object-fit: cover;
}

.cb-lp .mobile .element-a {
  width: 300px;
  height: 400px;
  top: 63px;
  left: 20px;
  position: absolute;
  object-fit: cover;
}

.cb-lp .mobile .HAT-POLO {
  position: absolute;
  width: 130px;
  top: 803px;
  right: 122px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 20px;
  text-decoration: underline;
}

.cb-lp .mobile .HAT-POLO a {
  color: #333333;
  text-decoration: underline;
}

.cb-lp .mobile .overlap-5 {
  position: relative;
  width: 100%;
  height: 1627px;
  left: 0;
  top: 30px;
}

.cb-lp .mobile .div-wrapper {
  position: absolute;
  width: 100%;
  height: 880px;
  top: 747px;
  left: 0;
}

.cb-lp .mobile .overlap-6 {
  position: relative;
  width: 100%;
  height: 880px;
  background-image: url(assets/images/backgrounds/mask-group-3.png);
  background-size: 100% 100%;
}

.cb-lp .mobile .element-5 {
  position: absolute;
  width: 210px;
  height: 280px;
  top: 600px;
  left: 20px;
  object-fit: cover;
}

.cb-lp .mobile .element-6 {
  position: absolute;
  width: 300px;
  height: 400px;
  top: 180px;
  right: 0px;
  object-fit: cover;
}

.cb-lp .mobile .p {
  position: absolute;
  width: 130px;
  top: 600px;
  left: 245px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 20px;
  text-decoration: underline;
}

.cb-lp .mobile .p a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .mobile .element-7 {
  position: absolute;
  width: 100%;
  height: 880px;
  top: 47px;
  left: 0;
}

.cb-lp .mobile .overlap-7 {
  width: 100%;
  height: 880px;
  background-image: url(assets/images/backgrounds/mask-group-4.png);
  background-size: 100% 100%;
}

.cb-lp .mobile .element-8 {
  position: relative;
  width: 300px;
  height: 400px;
  top: 193px;
  object-fit: cover;
  margin: auto;
}

.cb-lp .mobile .element-8 img{
  width: 100%;
}

.cb-lp .mobile .HAT-POLO-2 {
  width: 149px;
  top: 603px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.44px;
  line-height: 20px;
  text-decoration: underline;
  margin-top: 10px;
}

.cb-lp .mobile .HAT-POLO-2 a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .mobile .JUN-ROP-JUN-ROPE {
  position: relative;
  width: 100%;
  top: 0;
  font-family: "Noto Sans JP", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.55px;
  line-height: 28px;
  margin: auto;
}

.cb-lp .mobile .mv-2 {
  width: 100%;
}

.cb-lp .desktop-view {
  position: relative;
  width: 100%;
  background-color: #ffffff;
}

.cb-lp .desktop-view .footer-2 {
  position: relative;
  width: 235px;
  height: 289px;
  background-color: transparent;
  margin: auto;
  margin-top: 150px;
  margin-bottom: 150px;
}

.cb-lp .desktop-view .JUN-ROP-logo {
  position: absolute;
  width: 119px;
  height: 20px;
  top: 269px;
  left: 58px;
}

.cb-lp .desktop-view .SNS {
  position: absolute;
  width: 140px;
  height: 40px;
  top: 200px;
  left: 47px;
}

.cb-lp .desktop-view .x {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 100px;
}

.cb-lp .desktop-view .FB {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 50px;
}

.cb-lp .desktop-view .IG {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
}

.cb-lp .desktop-view .WOMENS-ONLINE-STORE {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Work Sans", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
}

.cb-lp .desktop-view .WOMENS-ONLINE-STORE a {
  text-decoration: none;
  color: #333333;
}

.cb-lp .desktop-view .overlap-group-3 {
  position: relative;
  width: 100%;
  height: 8560px;
}

.cb-lp .desktop-view .CHECKER-BOARD-wrapper {
  display: flex;
  width: 274px;
  height: 80px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 30px;
  background-color: #ffffff80;
  border: 0.5px solid;
  border-color: #89b715;
  margin: auto;
}

.cb-lp .desktop-view .CHECKER-BOARD {
  position: relative;
  width: fit-content;
  margin-left: -11.00px;
  margin-right: -11.00px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #89b715;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0;
  line-height: 29px;
}

.cb-lp .desktop-view .text-wrapper {
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #89b715;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 29px;
}

.cb-lp .desktop-view .span {
  font-size: 24px;
}

.cb-lp .desktop-view .group-wrapper {
  height: 1460px;
  top: 7060px;
  background-image: url(assets/images/backgrounds/mask-group-5.png);
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
}

.cb-lp .desktop-view .group {
  position: relative;
  max-width: 550px;
  width: 100%;
  height: 770px;
  top: 345px;
  margin: auto;
}

.cb-lp .desktop-view .element-9 {
  position: absolute;
  width: 100%;
  height: 1880px;
  top: 5480px;
  left: 0;
  background-image: url(assets/images/backgrounds/mask-group-6.png);
  background-size: 100% 100%;
}

.cb-lp .desktop-view .group-2 {
  position: relative;
  max-width: 1052px;
  width: 100%;
  height: 1080px;
  top: 400px;
  margin: auto;
}

.cb-lp .desktop-view .element-10 {
  position: absolute;
  width: 600px;
  height: 800px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.cb-lp .desktop-view .element-11 {
  position: absolute;
  width: 420px;
  height: 560px;
  top: 520px;
  left: 630px;
  object-fit: cover;
}

.cb-lp .desktop-view .SUN-VISOR-2 {
  position: absolute;
  width: 260px;
  top: 820px;
  left: 0;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 12px;
  letter-spacing: 0.48px;
  line-height: 22px;
  text-decoration: underline;
}

.cb-lp .desktop-view .SUN-VISOR-2 a {
  color: #333333;
  text-decoration: underline;
}

.cb-lp .desktop-view .element-12 {
  position: absolute;
  width: 100%;
  height: 1460px;
  top: 4320px;
  background-image: url(assets/images/backgrounds/mask-group-7.png);
  background-size: 100% 100%;
}

.cb-lp .desktop-view .group-3 {
  position: relative;
  max-width: 602px;
  width: 100%;
  height: 908px;
  top: 330px;
  margin: auto;
}

.cb-lp .desktop-view .text-wrapper-2 {
  position: absolute;
  width: 298px;
  top: 820px;
  left: 0;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.48px;
  line-height: 22px;
  text-decoration: underline;
  z-index: 1;
}

.cb-lp .desktop-view .text-wrapper-2 a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .desktop-view .element-13 {
  position: absolute;
  width: 100%;
  height: 1880px;
  top: 2740px;
  background-image: url(assets/images/backgrounds/mask-group-8.png);
  background-size: 100% 100%;
}

.cb-lp .desktop-view .group-4 {
  position: relative;
  max-width: 1097px;
  width: 100%;
  height: 1110px;
  top: 385px;
  margin: auto;
}

.cb-lp .desktop-view .element-14 {
  position: absolute;
  width: 465px;
  height: 620px;
  top: 490px;
  left: 630px;
  object-fit: cover;
}

.cb-lp .desktop-view .HAT-POLO-3 {
  position: absolute;
  width: 260px;
  top: 820px;
  left: 0;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.48px;
  line-height: 22px;
  text-decoration: underline;
}

.cb-lp .desktop-view .HAT-POLO-3 a {
  color: #ffffff;
  text-decoration: underline;
}

.cb-lp .desktop-view .element-15 {
  position: absolute;
  width: 100%;
  height: 1880px;
  top: 1160px;
  background-image: url(assets/images/backgrounds/mask-group-9.png);
  background-size: 100% 100%;
}

.cb-lp .desktop-view .group-5 {
  position: relative;
  max-width: 1050px;
  top: 400px;
  margin: auto;
}


.cb-lp .desktop-view .element-16 {
  position: absolute;
  width: 420px;
  height: 560px;
  top: 520px;
  left: 0;
  object-fit: cover;
}

.cb-lp .desktop-view .element-17 {
  position: absolute;
  width: 600px;
  height: 800px;
  top: 0;
  left: 450px;
  object-fit: cover;
}

.cb-lp .desktop-view .HAT-POLO-4 {
  position: absolute;
  width: 260px;
  top: 820px;
  left: 450px;
  font-family: "Belleza", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 12px;
  letter-spacing: 0.48px;
  line-height: 22px;
  text-decoration: underline;
}

.cb-lp .desktop-view .HAT-POLO-4 a {
  color: #333333;
  text-decoration: underline;
}

.cb-lp .desktop-view .element-18 {
  width: 100%;
  height: 1460px;
  background-image: url(assets/images/backgrounds/mask-group-10.png);
  background-size: 100% 100%;
}

.cb-lp .desktop-view .group-7 {
  position: relative;
  max-width: 602px;
  width: 100%;
  top: 248px;
  margin:auto;
}

.cb-lp .desktop-view .JUN-ROP-JUN-ROPE-2 {
  font-family: "Sawarabi Gothic", Helvetica;
  font-weight: 400;
  color: #333333;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 34px;
  margin-top: 80px;
}

.cb-lp .desktop-view .mv-3 {
  width: 100%;
}

@media (max-width: 768px) {
  .cb-lp .desktop-view {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .cb-lp .mobile.mobile-wrapper {
    display: none !important;
  }
}