@charset "utf-8";
/* CSS Document */
@layer base, components, utilities;
@layer utilities {
.mv {
    max-height: 520px;
}
.swiper-slide-mv-inner:has(.mv-images-summer) .mv-title,
.swiper-slide-mv-inner:has(.mv-images-summer) .mv-subtitle,
.swiper-slide-mv-inner:has(.mv-flower) .mv-title,
.swiper-slide-mv-inner:has(.mv-flower) .mv-subtitle {
color: #fff;
}
@media screen and (min-width: 992px) {
.swiper-mv-images.mv-images01 {
    object-position: right bottom;
    height: 100%;
    width: 100%;
    max-block-size: 100%;
    max-inline-size: 100%;
    transform: translateY(0%);
    /*background: linear-gradient(90deg, #cea8a9 20%, #dcc6c3 70%);*/
}
}
@media screen and (min-width: 1201px) {
    .mv-title {
        margin: var(--space-sm) 0 0 1rem;
    }
    .line2 {
        margin-left: 3.25rem;
    }
  }
@media screen and (max-width: 600px) {
    .mv {
min-height: 664px;
    }
  }
}
@media screen and (max-width: 767px) {
  .swiper-mv-images.mv-images01.mv-images-summer {
 object-position: center center;
}
.mv-container_upper {
  bottom: auto;
  top: 96px;
}
.swiper-slide-mv-inner:has(.mv-flower) .mv-title,
.swiper-slide-mv-inner:has(.mv-flower) .mv-subtitle,
.swiper-slide-mv-inner:has(.mv-images-summer) .mv-color02 .mv-title,
.swiper-slide-mv-inner:has(.mv-images-summer) .mv-color02 .mv-subtitle {
color: #878c99;
}

}
@media screen and (max-width: 576px) {
  .swiper-mv-images.mv-images01.mv-images-summer {
 object-position: center 15%;
}
}
@media screen and (max-width: 991px) {
    .swiper-mv-images.mv-images01.mv-flower {
        object-position: right 50% bottom 35%;
        height: 100%;
        width: 100%;
        max-block-size: 100%;
        max-inline-size: 100%;
        transform: translateX(0);
    }
  }

  @media screen and (max-width: 767px) {
    .swiper-mv-images.mv-images01.mv-flower {
        object-position: right 50% bottom 55%;
    }
  }

@media screen and (min-width: 768px) and (max-width: 991px) {
.swiper-mv-images.mv-images01.mv-images-summer {
  object-position: right 0 center;
}
}
@media screen and (min-width: 768px) and (max-width: 1339px) {
  .swiper-slide-mv-inner:has(.mv-images-summer) .mv-container  {
        margin-right: 40px;
        right: 40px;
}
}
@media screen and (min-width: 768px) and (max-width:991px) {
  .swiper-slide-mv-inner:has(.mv-images-summer) .mv-container  {
        margin-right: 0;
        right: 40px;
}
.swiper-mv-images.mv-images01.mv-flower {
    object-position: right 50% bottom 27.5%;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.swiper-mv-images.mv-images01.mv-images-summer {
  object-position: right 0 bottom 0;
}
}
@media screen and (min-width: 992px) {
    .swiper-mv-images.mv-images01.mv-images-summer,
     .swiper-mv-images.mv-images01.mv-flower {
        object-position: right 0 center;
    height: 100%;
    width: 100%;
    max-block-size: 100%;
    max-inline-size: 100%;
    transform: translateX(0);
}
   .swiper-mv-images.mv-images01.mv-flower {
        object-position: left 50% bottom 25%;
        right: 0;
    }
}
@media screen and (min-width: 1201px) {
.swiper-mv-images.mv-images01.mv-images-summer {
  object-position: right 0 bottom -20px;
}
.swiper-slide:has(.mv-flower) .swiper-slide-mv-inner:has(.mv-flower) .mv-container {
      margin-left: calc(50vw - 560px);
}
   .swiper-mv-images.mv-images01.mv-flower {
        object-position: left 50% bottom 35%;
        right: 0;
    }
}
@media screen and (min-width: 1340px) {
.swiper-mv-images.mv-images01.mv-images-summer {
  object-position: right 0 bottom -30px;
  width: 1440px;
}
.swiper-slide:has(.mv-images-summer) {
/*background: linear-gradient(90deg, #cea8a9, #dcc6c3);*/
}

}
@media screen and (min-width: 768px) and (max-width: 903px) {
    .swiper-mv-images.mv-images01.mv-images-summer {
  object-position: right -120px bottom 40px;
    }
}


@media screen and (min-width: 1340px) {
  .swiper-slide-mv-inner:has(.mv-images-summer) .mv-container {
    margin-right: calc(50vw - 540px);
    margin-left: 0;
    right: 0;
}
.swiper-mv-images.mv-images01.mv-images-summer {
    width: 100%;
}
.swiper-mv-images.mv-images01.mv-images-summer {
        object-position: right 0 top 50%;
}
}




 .swiper-mv-images.mv-images01.mv-flower {
width: 100%;
max-width: 768px;
}
.swiper-mv-images.mv-images01.mv-flower {
  position: relative;
}
.bg-boke {
position: absolute;
    width: 100%;
    left: 0;
    height: auto;
    object-fit: cover;
    filter: blur(1.5rem);
    object-position: left 50% bottom 45%;
}

.swiper-slide:has(.mv-flower) {
background: #8b95dd;
}
.swiper-slide:has(.mv-flower) .bg-boke {
    z-index: 0;
}
.swiper-slide:has(.mv-flower) .swiper-mv-images.mv-images01.mv-flower {
  z-index: 1;
}
.swiper-slide:has(.mv-flower) .swiper-slide-mv-inner:has(.mv-flower) .mv-container {
  z-index: 2;
}


.swiper-slide.swiper-slide-active:has(.mv-flower) {
    z-index: 1;
}
.swiper-slide.swiper-slide-active:has(.mv-flower) .bg-boke {
    z-index: 2;
}
.swiper-slide.swiper-slide-active:has(.mv-flower) .swiper-mv-images.mv-images01.mv-flower {
  z-index: 3;
}
.swiper-slide.swiper-slide-active:has(.mv-flower) .swiper-slide-mv-inner:has(.mv-flower) .mv-container {
  z-index: 4;
}