/* ==========================================================================
   meirune — top.css: the TOP page - hero, purchase banners, product row spacing and
   INFORMATION. Loaded after base.css by the mr.css.top part in the TOP layout's head.
   The product cards themselves are drawn by base.css.
   ========================================================================== */

/* ==========================================================================
   Top page: hero carousel (.mr-hero)
   ========================================================================== */

/* Carousel geometry lives in these three properties: the script measures the rendered
   slide, and the arrow offsets and the no-script position are calc()-ed from them. */
.mr-hero {
  --mr-arrow: 15px;
  --mr-slide-gap: 8px;
  --mr-slide-width: min(88%, 1600px);
  position: relative;
  overflow: hidden;
}

.mr-hero,
.mr-hero * {
  box-sizing: border-box;
}

.mr-hero__viewport {
  overflow: hidden;
}

/* Opens on the first real slide with a neighbour showing on each side - the same frame the
   script starts from, so the hero still reads correctly if the script never runs. */
.mr-hero__track {
  display: flex;
  gap: var(--mr-slide-gap);
  transform: translateX(calc((100% - var(--mr-slide-width)) / 2 - var(--mr-slide-width) - var(--mr-slide-gap)));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mr-hero__slide {
  position: relative;
  flex: none;
  width: var(--mr-slide-width);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mr-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The design gives the offsets for the 1600px artwork (top 157 / left 107); the smaller
   tiers scale with the slide so the copy keeps its place on every screen. */
.mr-hero__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0 0 16px;
  color: var(--mr-ink);
  text-decoration: none;
}

.mr-hero__headline {
  margin: 0;
  color: var(--mr-ink);
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mr-hero__lead {
  font-size: 14px;
  line-height: 1.35;
}

.mr-hero__tail {
  font-size: 11px;
  line-height: 1.35;
}

/* The text column is centred against the package shot. */
.mr-hero__product {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.mr-hero__package {
  display: block;
  flex: none;
  width: 54px;
  height: 90px;
  object-fit: contain;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.mr-hero__product-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mr-hero__brand {
  display: block;
  width: 54px;
  height: auto;
}

.mr-hero__name {
  margin: 0;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 11px;
  line-height: 1.3;
}

.mr-hero__name-ja {
  margin: 0;
  color: #666666;
  font-family: "Noto Serif JP", serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* Arrows sit on the edges of the centred slide. Hidden until the script is running. */
.mr-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: var(--mr-arrow);
  height: var(--mr-arrow);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.mr-hero__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.mr-hero__arrow--prev {
  left: calc(50% - var(--mr-slide-width) / 2 - var(--mr-arrow) / 2);
}

.mr-hero__arrow--next {
  right: calc(50% - var(--mr-slide-width) / 2 - var(--mr-arrow) / 2);
}

.mr-hero__dots {
  display: none;
  justify-content: center;
  gap: 5px;
  padding-top: 10px;
}

.mr-hero__dot {
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border: 2px solid #cccccc;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--mr-ease), background-color var(--mr-ease);
}

.mr-hero__dot:hover {
  border-color: #b0b0b0;
}

.mr-hero__dot.is-active {
  border-color: var(--mr-ink);
  background: var(--mr-ink);
}

.mr-hero.is-ready .mr-hero__arrow {
  display: block;
}

.mr-hero.is-ready .mr-hero__dots {
  display: flex;
}

@media (min-width: 768px) {
  .mr-hero {
    --mr-arrow: 42px;
    --mr-slide-gap: 20px;
    --mr-slide-width: min(1600px, 100vw - 160px);
  }

  .mr-hero__copy {
    padding: 50px 0 0 50px;
  }

  .mr-hero__lead {
    font-size: 30px;
  }

  .mr-hero__tail {
    font-size: 22px;
  }

  .mr-hero__product {
    gap: 16px;
    margin-top: 24px;
  }

  .mr-hero__package {
    width: 90px;
    height: 150px;
  }

  .mr-hero__product-text {
    gap: 6px;
  }

  .mr-hero__brand {
    width: 90px;
  }

  .mr-hero__name {
    font-size: 15px;
  }

  .mr-hero__name-ja {
    font-size: 9px;
  }

  .mr-hero__dots {
    gap: 16px;
    padding-top: 24px;
  }

  .mr-hero__dot {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 1280px) {
  .mr-hero {
    --mr-arrow: 48px;
  }

  .mr-hero__copy {
    padding: 118px 0 0 80px;
  }

  .mr-hero__lead {
    font-size: 60px;
  }

  .mr-hero__tail {
    font-size: 45px;
  }

  .mr-hero__product {
    gap: 22px;
    margin-top: 60px;
  }

  .mr-hero__package {
    width: 112px;
    height: 188px;
  }

  .mr-hero__product-text {
    gap: 15px;
  }

  .mr-hero__brand {
    width: 112px;
  }

  .mr-hero__name {
    font-size: 30px;
  }

  .mr-hero__name-ja {
    font-size: 15px;
  }

  .mr-hero__dots {
    gap: 20px;
    padding-top: 28px;
  }
}

@media (min-width: 1600px) {
  .mr-hero {
    --mr-arrow: 56px;
  }

  .mr-hero__copy {
    padding: 157px 0 0 107px;
  }

  .mr-hero__lead {
    font-size: 80px;
  }

  .mr-hero__tail {
    font-size: 60px;
  }

  .mr-hero__product {
    gap: 30px;
    margin-top: 80px;
  }

  .mr-hero__package {
    width: 150px;
    height: 250px;
  }

  .mr-hero__product-text {
    gap: 20px;
  }

  .mr-hero__brand {
    width: 150px;
  }

  .mr-hero__name {
    font-size: 40px;
  }

  .mr-hero__name-ja {
    font-size: 20px;
  }

  .mr-hero__dots {
    gap: 24px;
    padding-top: 34px;
  }
}

/* ==========================================================================
   Top page: purchase banners (.mr-promos)
   ========================================================================== */

.mr-promos {
  padding: 24px 0 32px;
  background: var(--mr-bg);
}

.mr-promos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* The desktop tier follows the design exactly: package shot 100px wide at 30px from the
   left, a 75px gap, then the 500x80 call to action. Smaller tiers scale the offsets. */
.mr-promo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 96px;
  padding: 16px 16px 16px 85px;
  overflow: hidden;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/home/bg-sub.jpg") center / cover no-repeat;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

.mr-promo:hover {
  opacity: 0.9;
}

.mr-promo__package {
  position: absolute;
  top: 50%;
  left: 12px;
  display: block;
  width: 42px;
  height: auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
}

.mr-promo__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 209px;
  height: 44px;
  padding: 0 18px;
  background: var(--mr-red);
  color: #fff;
  font-family: var(--mr-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: center;
}

.mr-promo__arrow {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  background: var(--mr-red);
}

.mr-promo__arrow img {
  display: block;
  width: 6px;
  height: 6px;
  filter: brightness(0) invert(1);
}

.mr-promo--dark .mr-promo__label,
.mr-promo--dark .mr-promo__arrow {
  background: var(--mr-ink);
}

/* ==========================================================================
   Top page: product rows (.mr-section-head + .mr-products)

   A row is two parts in the layout - the heading free part, then a 任意商品表示パーツ
   whose wrap element carries `mr-products` - so the row's vertical padding is split
   between them: top on the heading, bottom on the product list.
   ========================================================================== */

.mr-section-head {
  padding-top: 32px;
  background: var(--mr-bg);
}

.mr-products {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

/* ==========================================================================
   Top page: information (.mr-info, .mr-news)
   ========================================================================== */

.mr-info {
  padding: 32px 0;
}

.mr-news {
  border-top: 1px solid #cccccc;
}

.mr-news__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 2px;
  border-bottom: 1px solid #cccccc;
  color: var(--mr-ink);
  line-height: 1.6;
  text-decoration: none;
}

.mr-news__date {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.mr-news__title {
  flex: 1 1 0%;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  transition: opacity var(--mr-ease);
}

.mr-news__item:hover .mr-news__title {
  opacity: 0.65;
}

/* The TOP page shows the latest five; the news index page loads the same part in full. */
.mr-info .mr-news__item:nth-child(n + 6) {
  display: none;
}

/* A row's picture belongs to the news index page (news.css); the TOP keeps to date and title. */
.mr-info .mr-news__image {
  display: none;
}

.mr-info__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* The label is centred on the pill and the arrow pinned to its right edge. */
.mr-info__more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 9999px;
  background: var(--mr-ink);
  color: #fff;
  font-family: var(--mr-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

.mr-info__more-link:hover {
  opacity: 0.85;
}

.mr-info__more-link img {
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .mr-promos {
    padding: 34px 0 44px;
  }

  .mr-promos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .mr-promo {
    min-height: 128px;
    padding: 20px 16px 20px 92px;
  }

  .mr-promo__package {
    left: 13px;
    width: 45px;
  }

  .mr-promo__label {
    max-width: 224px;
    font-size: 15px;
  }

  .mr-promo__arrow {
    width: 14px;
    height: 14px;
  }

  .mr-section-head {
    padding-top: 44px;
  }

  .mr-products {
    padding: 0 32px 44px;
  }

  .mr-info {
    padding: 44px 0;
  }

  .mr-news__item {
    flex-direction: row;
    align-items: baseline;
    gap: 28px;
    padding: 14px 4px;
  }

  .mr-news__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mr-info__more {
    margin-top: 30px;
  }
}

@media (min-width: 1280px) {
  .mr-promos {
    padding: 44px 0 58px;
  }

  .mr-promos__grid {
    gap: 25px;
  }

  .mr-promo {
    min-height: 164px;
    padding: 22px 20px 22px 163px;
  }

  .mr-promo__package {
    left: 24px;
    width: 80px;
  }

  .mr-promo__label {
    max-width: 396px;
    height: 63px;
    font-size: 19px;
  }

  .mr-promo__arrow {
    right: 9px;
    bottom: 9px;
    width: 24px;
    height: 24px;
  }

  .mr-promo__arrow img {
    width: 10px;
    height: 10px;
  }

  .mr-section-head {
    padding-top: 58px;
  }

  .mr-products {
    padding: 0 80px 58px;
  }

  .mr-info {
    padding: 58px 0;
  }

  .mr-news__item {
    gap: 46px;
    padding: 18px 4px;
  }

  .mr-news__date,
  .mr-news__title {
    font-size: 13px;
  }

  .mr-info__more {
    margin-top: 40px;
  }

  .mr-info__more-link {
    width: 300px;
    height: 48px;
    font-size: 15px;
  }

  .mr-info__more-link img {
    right: 20px;
  }
}

@media (min-width: 1600px) {
  .mr-promos {
    padding: 80px 0 60px;
  }

  .mr-promos__grid {
    gap: 30px;
  }

  .mr-promo {
    min-height: 203px;
    padding: 24px 24px 24px 205px;
  }

  .mr-promo__package {
    left: 30px;
    width: 100px;
  }

  .mr-promo__label {
    max-width: 500px;
    height: 80px;
    font-size: 24px;
  }

  .mr-promo__arrow {
    right: 11px;
    bottom: 11px;
    width: 30px;
    height: 30px;
  }

  .mr-promo__arrow img {
    width: 13px;
    height: 13px;
  }

  .mr-section-head {
    padding-top: 60px;
  }

  .mr-products {
    padding: 0 0 60px;
  }

  .mr-info {
    padding: 60px 0;
  }

  .mr-news__item {
    gap: 56px;
    padding: 20px 4px;
  }

  .mr-news__date {
    margin-left: 16px;
    font-size: 20px;
  }

  .mr-news__title {
    font-size: 20px;
  }

  .mr-info__more {
    margin-top: 50px;
  }

  .mr-info__more-link {
    width: 360px;
    height: 60px;
    font-size: 20px;
  }

  .mr-info__more-link img {
    right: 30px;
    width: 15px;
    height: 15px;
  }
}