@charset "UTF-8";

/* ===========================================
Swiper global styles (outside media query)
=========================================== */
.c-nouveau__swiper-container,
.c-event-rose__swiper-container {
  overflow: hidden;
  position: relative;
}

.c-nouveau__swiper,
.c-event-rose__swiper {
  overflow: visible;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #cccccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #E6A09F;
}

/* ===========================================
SP styles
=========================================== */
@media screen and (max-width: 960px) {

  /* ===========================================
  BASE
  =========================================== */
  html {
    overflow-x: hidden;
  }

  img {
    max-width: 100%;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  /* ===========================================
  FV
  =========================================== */
  .p-fv__img img {
    width: 100%;
    height: auto;
  }

  /* ===========================================
  INTRO
  =========================================== */
  .p-intro {
    padding-block: 20px 150px;
  }

  .p-intro__menu {
    gap: 20px 32px;
    margin-block-end: 90px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .p-intro__menu-item {
    font-size: 10px;
  }

  .p-intro__lead {
    font-size: 14px;
    margin-block-end: 80px;
  }

  .p-intro__body {
    font-size: 12px;
    text-align: center;
  }

  /* ===========================================
  NEW
  =========================================== */

  .p-new {
    background: linear-gradient(#f8f1ef 0%, #fff 72%);
  }
  .p-new__flat-img{
    position: relative;
  }

  .p-new__img-cover{
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 115px;
    object-fit: cover;
    display: block;
  }

  .p-new__inner {
    padding: 40px 10px 60px;
    max-width: 520px;
    margin-inline: auto;
    position: relative;
  }

  .p-new__inner-sp{
    background: linear-gradient(#f8f1ef 0%, #fff 72%);

  }

  .p-new__title {
    font-size: 22px;
    position: relative;
    z-index: 2;
  }

  .p-new__subtitle {
    font-size: 13px;
    margin-block-end: 10px;
  }


  .p-new__hero {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 792px;
    max-width: none;
  }

  .p-new__products {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
    margin-block-end: 25px;
  }

  .p-new__product {
    align-items: center;
    text-align: center;
  }

  .p-new__product-img {
    max-width: 300px;
    margin-inline: auto;
  }

  .p-new__product-name {
    font-size: 12px;
    text-align: left;
    width: 100%;
    max-width: 320px;
  }

  .p-new__product-variant {
    font-size: 10px;
    text-align: left;
    width: 100%;
    max-width: 320px;
  }

  .p-new__product-btn {
    max-width: 320px;
    height: 23px;
    font-size: 12px;
  }

  .p-new__specs {
    font-size: 12px;
  }

  .p-new__body {
    font-size: 13px;
    margin-block-start: -30px;
  }

  .p-new__note{
    font-size:  10px;
  }
  .p-new__tea-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
  }

  .p-new__tea-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }


  /* ===========================================
  ROSE NOUVEAU (SP: swiper autoplay)
  =========================================== */
  .p-nouveau {
    padding-block: 60px;
  }

  .p-nouveau__lead {
    margin-block-end: 90px;
    font-size: 12px;
    text-align: center;
  }

  .p-nouveau__petal{
    width: 53px;
  }

  .p-nouveau__title {
    font-size: 26px;
    margin-block-end: 40px;
  }

  .p-nouveau__products.pc {
    display: none !important;
  }

  .p-nouveau__swiper-wrap {
    position: relative;
    padding-block-end: 40px;
  }

  .c-nouveau__swiper-container {
    overflow: visible;
    width: 100%;
  }

  .c-nouveau__swiper .swiper-slide {
    /* width: 240px; */
    width: 100%;
    height: auto;
  }

  .p-nouveau__swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 16px;
    width: 100%;
  }

  /* ===========================================
  LIMITED SET
  =========================================== */
  .p-limited {
    padding-block: 60px 120px;
  }


  .p-limited__petal-top {
    display: block;
    position: absolute;
    top: 2px;
    left: -27px;
    width: 96px;
    height: 99px;
  }

  .p-limited__petal-top img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }


  .p-limited__title{
    font-size:  26px;
  }

  .p-limited__subtitle{
    font-size: 12px;
  }

  .p-limited__petal-left,
  .p-limited__petal-right {
    display: none;
  }

  .p-limited__products {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-block-end: 0px;
  }

  .p-limited__product {
    align-items: center;
    text-align: center;
  }

  .p-limited__product-img {
    max-width: 262px;
    margin-inline: auto;
    margin-block-end: 0px;
  }

  .p-limited__product-name {
    text-align: center;
    width: 100%;
    font-size: 12px;
  }

  .p-limited__product-price {
    text-align: center;
    width: 100%;
    font-size: 12px;
  }

  .p-limited__product-btn {
    max-width: 196px;
    height: 28px;
    margin-inline: auto;
    font-size: 12px;
  }

  /* ===========================================
  SPECIAL CAMPAIGN
  =========================================== */
  .p-campaign {
    padding-block: 0 0px;
  }

  .p-campaign__inner{
    padding-inline: 10px;
    max-width: 520px;
    margin-inline: auto;
  }

  .p-campaign__petal-right{
    position: absolute;
    right: -62px;
    top: -206px;
    width: 121px;
    height: auto;
    aspect-ratio: 121 / 78;
    z-index: 2;
  }


  .p-campaign__petal-left {
    position: absolute;
    left: -43px;
    bottom: -34px;
    width: 97px;
    height: auto;
    aspect-ratio: 97 / 91;
    z-index: 2;

  }

  .p-campaign__box {
    padding: 34px 6px 60px;
  }

  .p-campaign__title {
    font-size: 26px;
  }

  .p-campaign__date {
    font-size: 13px;
    margin-block-end: 40px;
  }

  .p-campaign__grid {
    grid-template-columns: 1fr;
    gap: 0px;
    text-align: center;
  }

  .p-campaign__gift-img {
    max-width: 240px;
    margin-inline: auto;
    order: 3;
  }

  .p-campaign__gift-content{
    display:contents;
  }

  .p-campaign__gift-label {
    text-align: center;
    order: 1;
    margin-block-end: 20px;
  }

  .p-campaign__gift-body {
    font-size: 17px;
    order: 2;
    margin-block-end: 20px;
    span {
      display: inline;
    }

    .small{
      font-size: 12px;
    }

    .big{
      font-size: 20px;
    }
  }



  .p-campaign__gift-name {
    text-align: center;
    order: 4;
    margin-block: 20px 6px;
    font-size: 13px;
  }

  .p-campaign__gift-note {
    text-align: center;
    order: 5;
    font-size: 8px;
  }

  .p-campaign__btn {
    width: 100%;
    max-width: 196px;
    height: 28px;
    font-size: 12px;
    margin-inline: auto;
  }

  /* ===========================================
  EVENT (SP: swiper autoplay for rose photos)
  =========================================== */
  .p-event {
    padding-block: 60px;
  }

  .p-event-bg{
    opacity: 0.8;
  }

  .p-event__inner{
    max-width: 520px;
    margin-inline: auto;
  }

  .p-event__title {
    font-size: 26px;
  }

  .p-event__info {
    font-size: 13px;
    margin-block-end: 60px;
  }

  .p-event__body {
    font-size: 10px;
    text-align: center;
    margin-block-end: 70px;
  }

  .p-event__rose-grid.pc {
    display: none !important;
  }

  .p-event__rose-swiper-wrap {
    position: relative;
    padding-block-end: 40px;

  }

  .c-event-rose__swiper-container {
    overflow: visible;
    width: 100%;
  }


  .c-event-rose__swiper .swiper-slide {
    width: 180px;
    height: auto;
  }

  .p-event__swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 16px;
  }

}

@media screen and (min-width: 961px) {

  .p-new__img-cover{
    display: none;
  }

}