/* ==========================================================================
   meirune — base.css: tokens, header, footer, page head and product cards for the
   futureshop skeleton theme. Loaded on every page by head.html (mr.head); each layout
   then adds its own file after it (top / listing / guide / product / login.css).

   Upload to アイテム as meirune/css/base.css.

   Breakpoints mirror the `meirune` theme:
     base < 768px   mobile
     md  >= 768px   tablet
     b   >= 1280px  desktop below the design width
     full >= 1600px the width the layout is designed at

   Nothing here relies on a CSS reset: the skeleton theme ships none, so every
   border, list and form control this file draws is spelled out in full.
   ========================================================================== */

:root {
  --mr-red: #ea5548;
  --mr-red-dark: #d8483c;
  --mr-ink: #333333;
  --mr-line: #e2e2e2;
  --mr-bg: #f8f8f8;
  --mr-sans: "Noto Sans JP", "Noto Sans", sans-serif;
  --mr-en: "GFS Didot", Didot, Georgia, "Noto Sans JP", serif;
  --mr-ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  margin: 0;
  font-family: var(--mr-sans);
  font-size: 13px;
  line-height: 1.8;
  color: var(--mr-ink);
  background: var(--mr-bg);
  -webkit-font-smoothing: antialiased;
}

/* futureshop wraps the header parts in its own <header class="fs-l-header">. A sticky
   element only travels within its parent, so that wrapper is what has to stick. */
.fs-l-header {
  position: sticky;
  top: 0;
  z-index: 30;
}

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

/* Zero specificity through :where(), so any component class below wins over these. */
:where(.mr-header, .mr-footer) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.mr-header, .mr-footer) a {
  text-decoration: none;
}

:where(.mr-header, .mr-footer) img {
  display: block;
}

/* Login state. futureshop fills `{@ member.logged_in @}` inside `.fs-clientInfo` after the
   page loads, so until then only the logged-out variant shows. */
.mr-auth-in:not(.is-loggedIn--true),
.mr-auth-out.is-loggedIn--true {
  display: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Sticky and stacked on its own, because the part is not always inside .fs-l-header.
   Without a stacking level here the overlay (z-index 0) paints under anything positioned
   later in the page, such as the product cards. Inside the wrapper it has no room to
   travel, so the wrapper does the sticking. */
.mr-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #d9d9d9;
  font-family: var(--mr-sans);
}

.mr-header__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.mr-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 16px;
}

.mr-header__logo img {
  width: 100px;
  height: auto;
}

.mr-header__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mr-header__account {
  display: inline-flex;
}

.mr-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

.mr-header__icon:hover {
  opacity: 0.6;
}

.mr-header__icon img {
  width: 20px;
  height: 20px;
}

.mr-header__icon--search-close,
.mr-header__icon--menu-close {
  display: none;
}

/* Hidden while empty; futureshop writes the count in after the page loads. */
.mr-header__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-block;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--mr-red);
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}

.mr-header__badge:empty {
  display: none;
}

/* Below md the four links sit in a 2x2 block of tiles; from md a single centred row. */
.mr-header__nav {
  position: relative;
  z-index: 2;
  background: var(--mr-ink);
}

.mr-header__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mr-header__nav-list > li {
  border: 0 solid rgba(255, 255, 255, 0.25);
}

@media not all and (min-width: 768px) {
  .mr-header__nav-list > li:nth-child(-n + 2) {
    border-bottom-width: 1px;
  }

  .mr-header__nav-list > li:nth-child(odd) {
    border-right-width: 1px;
  }
}

.mr-header__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  padding: 10px 0;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  transition: opacity var(--mr-ease);
}

.mr-header__nav-link:hover {
  opacity: 0.7;
}

.mr-header__nav-ext {
  width: 10px;
  height: 10px;
}

.mr-header__search {
  position: relative;
  z-index: 2;
  display: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mr-line);
  background: #fff;
}

/* Symmetric padding keeps the form optically centred with room for the close button. */
.mr-header__search-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

.mr-header__search-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 940px;
  margin: 0;
}

.mr-header__search-field {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  min-width: 0;
  border: 1px solid #d5d5d5;
  border-right: 0;
  background: #fff;
}

.mr-header__search-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 12px;
  opacity: 0.75;
}

.mr-header__search-input {
  flex: 1 1 0%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mr-ink);
  font: inherit;
  font-size: 13px;
  -webkit-appearance: none;
  appearance: none;
}

.mr-header__search-input::placeholder {
  color: #9a9a9a;
}

.mr-header__search-input:focus {
  outline: none;
}

.mr-header__search-submit {
  flex: none;
  min-width: 84px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--mr-ink);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

.mr-header__search-submit:hover {
  opacity: 0.85;
}

.mr-header__search-close {
  position: absolute;
  top: 50%;
  right: 0;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--mr-ease);
}

.mr-header__search-close:hover {
  opacity: 0.6;
}

/* The asset is drawn with white strokes; the filter renders it on the light panel. */
.mr-header__search-close img {
  width: 22px;
  height: 22px;
  filter: brightness(0);
}

/* Dims the page below the header while a panel is open; clicking it closes the panel. */
.mr-header__overlay {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 0;
  display: none;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  cursor: default;
}

.mr-header__menu {
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  z-index: 3;
  display: none;
  width: 100%;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  padding: 22px;
  border-top: 1px solid #cccccc;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.mr-header__menu-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-bottom: 20px;
  background: var(--mr-red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  transition: background-color var(--mr-ease);
}

.mr-header__menu-login:hover {
  background: var(--mr-red-dark);
}

.mr-header__menu-list {
  border-top: 1px solid var(--mr-ink);
}

.mr-header__menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--mr-ink);
  color: var(--mr-ink);
  font-size: 12px;
  line-height: 16px;
  transition: opacity var(--mr-ease);
}

/* The chevron is a rotated corner rather than an asset. */
.mr-header__menu-link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-top: 1px solid var(--mr-ink);
  border-right: 1px solid var(--mr-ink);
  transform: rotate(45deg);
}

.mr-header__menu-link:hover {
  opacity: 0.6;
}

.mr-header__menu-sub {
  margin-top: 22px;
}

.mr-header__menu-sub > li + li {
  margin-top: 20px;
}

.mr-header__menu-sublink {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--mr-ink);
  font-size: 10px;
  line-height: 1.6;
  transition: opacity var(--mr-ease);
}

.mr-header__menu-sublink:hover {
  opacity: 0.6;
}

.mr-header__menu-sublink img {
  width: 9px;
  height: 9px;
  filter: brightness(0);
}

.mr-header__menu-sns {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.mr-header__menu-sns img {
  width: 20px;
  height: 20px;
}

/* Panel states. The icon that opened a panel swaps for one that closes it. */
.mr-header__state--search:checked ~ .mr-header__bar .mr-header__icon--search-open,
.mr-header__state--menu:checked ~ .mr-header__bar .mr-header__icon--menu-open {
  display: none;
}

.mr-header__state--search:checked ~ .mr-header__bar .mr-header__icon--search-close,
.mr-header__state--menu:checked ~ .mr-header__bar .mr-header__icon--menu-close {
  display: inline-flex;
}

.mr-header__state--search:checked ~ .mr-header__search,
.mr-header__state--menu:checked ~ .mr-header__menu,
.mr-header__state--search:checked ~ .mr-header__overlay,
.mr-header__state--menu:checked ~ .mr-header__overlay {
  display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mr-footer {
  margin-top: 40px;
  padding: 32px 0 40px;
  background: #3a3a3a;
  color: #fff;
  font-family: var(--mr-sans);
}

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

.mr-footer__row {
  display: flex;
  flex-direction: column;
}

.mr-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mr-footer__logo img {
  width: 113px;
  height: auto;
  filter: brightness(0) invert(1);
}

.mr-footer__sns {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.mr-footer__sns img {
  width: 20px;
  height: 20px;
}

/* Below the desktop tier the long Japanese labels wrap into a grid. */
.mr-footer__links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.mr-footer__list > li + li {
  margin-top: 20px;
}

.mr-footer__link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: #fff;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  transition: opacity var(--mr-ease);
}

.mr-footer__list--small .mr-footer__link {
  font-size: 10px;
}

.mr-footer__link:hover {
  opacity: 0.7;
}

.mr-footer__link img {
  width: 9px;
  height: 9px;
  filter: brightness(0) invert(1);
}

.mr-footer__copy {
  margin: 20px 0 0;
  font-family: var(--mr-en);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
}

.mr-footer__copy-name {
  font-family: var(--mr-sans);
}

/* ==========================================================================
   md  >= 768px
   ========================================================================== */

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }

  .mr-header__bar {
    height: 70px;
    padding: 0 24px;
  }

  .mr-header__logo img {
    width: 160px;
  }

  .mr-header__icons {
    gap: 22px;
  }

  .mr-header__icon img {
    width: 22px;
    height: 22px;
  }

  .mr-header__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    height: 52px;
    padding: 0 16px;
  }

  .mr-header__nav-link {
    display: inline-flex;
    height: auto;
    padding: 0;
    font-size: 15px;
  }

  .mr-header__search {
    padding: 18px 24px;
  }

  .mr-header__search-inner {
    padding: 0 52px;
  }

  .mr-header__search-input {
    height: 44px;
    font-size: 14px;
  }

  .mr-header__search-submit {
    min-width: 100px;
    font-size: 14px;
  }

  .mr-header__search-close img {
    width: 26px;
    height: 26px;
  }

  .mr-header__menu {
    top: 100%;
    right: 24px;
    left: auto;
    width: 360px;
    padding: 26px;
  }

  .mr-header__menu-sns img {
    width: 40px;
    height: 40px;
  }

  .mr-footer {
    padding-top: 44px;
  }

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

  .mr-footer__logo img {
    width: 160px;
  }

  .mr-footer__links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 26px;
  }

  .mr-footer__link,
  .mr-footer__list--small .mr-footer__link {
    font-size: 12px;
  }
}

/* ==========================================================================
   b  >= 1280px
   ========================================================================== */

@media (min-width: 1280px) {
  body {
    font-size: 15px;
  }

  .mr-header__bar {
    height: 78px;
    padding: 0 34px;
  }

  .mr-header__logo img {
    width: 210px;
  }

  .mr-header__icons {
    gap: 26px;
  }

  .mr-header__icon img {
    width: 25px;
    height: 25px;
  }

  .mr-header__nav-list {
    gap: 70px;
    height: 58px;
  }

  .mr-header__nav-link {
    font-size: 18px;
  }

  .mr-header__search {
    padding: 22px 34px;
  }

  .mr-header__search-inner {
    padding: 0 72px;
  }

  .mr-header__search-form {
    max-width: 820px;
  }

  .mr-header__search-icon {
    width: 17px;
    height: 17px;
    margin-left: 16px;
  }

  .mr-header__search-input {
    height: 46px;
    font-size: 15px;
  }

  .mr-header__search-submit {
    min-width: 110px;
    font-size: 15px;
  }

  .mr-header__search-close img {
    width: 30px;
    height: 30px;
  }

  .mr-header__menu {
    right: 34px;
    width: 380px;
    padding: 28px;
  }

  .mr-header__menu-login {
    height: 50px;
    font-size: 15px;
  }

  .mr-header__menu-link {
    padding: 16px 2px;
    font-size: 14px;
    line-height: 20px;
  }

  .mr-header__menu-sublink {
    font-size: 13px;
  }

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

  .mr-footer__inner {
    padding: 0 80px;
  }

  .mr-footer__row {
    flex-direction: row;
    gap: 60px;
  }

  .mr-footer__brand {
    display: block;
    flex: none;
  }

  .mr-footer__logo img {
    width: 210px;
  }

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

  .mr-footer__sns img {
    width: 22px;
    height: 22px;
  }

  .mr-footer__links {
    display: flex;
    gap: 60px;
    margin-top: 0;
    padding: 0;
    border: 0;
  }

  .mr-footer__list > li + li {
    margin-top: 18px;
  }

  .mr-footer__link,
  .mr-footer__list--small .mr-footer__link {
    font-size: 13px;
  }

  .mr-footer__copy {
    margin-top: 60px;
    font-size: 11px;
  }
}

/* ==========================================================================
   full  >= 1600px
   ========================================================================== */

@media (min-width: 1600px) {
  body {
    font-size: 16px;
  }

  .mr-header__bar {
    height: 85px;
    padding: 0 40px;
  }

  .mr-header__logo img {
    width: 258px;
  }

  .mr-header__icons {
    gap: 32px;
  }

  .mr-header__icon img {
    width: 30px;
    height: 30px;
  }

  .mr-header__badge {
    top: -7px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
  }

  .mr-header__nav-list {
    gap: 100px;
    height: 60px;
  }

  .mr-header__nav-link {
    font-size: 20px;
  }

  .mr-header__nav-ext {
    width: 12px;
    height: 12px;
  }

  .mr-header__search {
    padding: 27px 40px;
  }

  .mr-header__search-inner {
    padding: 0 90px;
  }

  .mr-header__search-form {
    max-width: 945px;
  }

  .mr-header__search-icon {
    width: 19px;
    height: 19px;
    margin-left: 18px;
  }

  .mr-header__search-input {
    height: 50px;
    font-size: 16px;
  }

  .mr-header__search-submit {
    min-width: 120px;
    font-size: 16px;
  }

  .mr-header__search-close img {
    width: 34px;
    height: 34px;
  }

  .mr-header__menu {
    right: 40px;
    width: 420px;
    padding: 32px;
  }

  .mr-header__menu-login {
    height: 56px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .mr-header__menu-link {
    padding: 18px 2px;
    font-size: 15px;
  }

  .mr-header__menu-link::after {
    width: 8px;
    height: 8px;
  }

  .mr-header__menu-sub {
    margin-top: 26px;
  }

  .mr-header__menu-sublink {
    font-size: 14px;
  }

  .mr-header__menu-sublink img {
    width: 11px;
    height: 11px;
  }

  .mr-footer {
    margin-top: 60px;
    padding: 80px 0;
  }

  .mr-footer__inner {
    padding: 0;
  }

  .mr-footer__row {
    gap: 80px;
  }

  .mr-footer__logo img {
    width: 258px;
  }

  .mr-footer__sns {
    gap: 20px;
    margin-top: 40px;
  }

  .mr-footer__sns img {
    width: 40px;
    height: 40px;
  }

  .mr-footer__links {
    gap: 100px;
  }

  .mr-footer__list > li + li {
    margin-top: 30px;
  }

  .mr-footer__link,
  .mr-footer__list--small .mr-footer__link {
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
  }

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

  .mr-footer__copy {
    margin-top: 80px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Shared container and section heading (.mr-inner is also used by guide.html)
   ========================================================================== */

/* Deliberately not applied inside .mr-products: that markup belongs to futureshop. */
:where(.mr-inner, .mr-promos, .mr-section-head, .mr-products, .mr-info),
:where(.mr-promos, .mr-section-head, .mr-info) * {
  box-sizing: border-box;
}

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

.mr-heading {
  margin-bottom: 20px;
  text-align: center;
}

.mr-heading__title {
  margin: 0;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.mr-heading__sub {
  margin: 4px 0 0;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

@media (min-width: 768px) {
  .mr-inner {
    padding: 0 32px;
  }

  .mr-heading {
    margin-bottom: 28px;
  }

  .mr-heading__title {
    font-size: 32px;
  }
}

@media (min-width: 1280px) {
  .mr-inner {
    padding: 0 80px;
  }

  .mr-heading {
    margin-bottom: 34px;
  }

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

  .mr-heading__sub {
    font-size: 13px;
  }
}

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

  .mr-heading {
    margin-bottom: 40px;
  }

  .mr-heading__sub {
    margin-top: 10px;
    font-size: 20px;
  }
}

/* ==========================================================================
   Product cards: the TOP rows (.mr-products = the wrap of a 任意商品表示パーツ),
   the listing grid and RELATED ITEMS on the product page

   futureshop renders the part as `.fs-c-productListCarousel` - [prev ctrl][list][next
   ctrl] - and starts slick on `__list__itemTrack` with variableWidth on, infinite off
   and no clones, so the card width is ours to set. Below md the row stays a carousel,
   two cards to a view; from md the track is pinned and laid out as a grid, 3 then 5
   across. The skeleton theme outputs the system CSS (slick's base rules, the flex row)
   but none of the card styles, which are all written out here.
   ========================================================================== */

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) {
  --mr-card-gap: 14px;
}

:is(.mr-products.fs-c-productListCarousel, :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel) {
  position: relative;
  display: block;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list {
  display: block;
  overflow: hidden;
  container-type: inline-size;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-track {
  display: flex;
  align-items: stretch;
}

/* slick's clearfix pseudo-elements would otherwise take up the first and last cells. */
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-track::before,
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-track::after {
  content: none;
}

/* The slide is slick's outer wrapper; before slick starts it is the card itself. */
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-slide,
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) > * {
  float: none;
  flex: none;
  width: calc((100vw - 48px - var(--mr-card-gap)) / 2);
  width: calc((100cqw - var(--mr-card-gap)) / 2);
  height: auto;
  margin-right: var(--mr-card-gap);
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-slide > div {
  height: 100%;
}

/* Cards stretch to the tallest in their row; the auto margin above the price parks
   price and button on the bottom edge, so both line up across the row. */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem {
  position: relative;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  margin: 0;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
}

/* slick 1.8 wraps each card and hands it an inline width and display. */
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-slide > div > .fs-c-productListItem {
  width: 100% !important;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem form {
  display: contents;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__imageContainer {
  position: relative;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__image {
  margin: 0;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__image a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 300 / 262;
  overflow: hidden;
  background: #fff;
}

/* The shot sits in a 3:5 portrait frame - 125x208 on the 300px desktop card. */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__image img {
  display: block;
  width: 41.67%;
  max-width: none;
  height: auto;
  aspect-ratio: 125 / 208;
  object-fit: contain;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__viewMoreImageButton,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productImageModal,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productDescription,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__rating,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__viewReview,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productName__copy,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productPrice__main__label,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-price__currencyMark {
  display: none;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productName {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productName a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--mr-ink);
  text-decoration: none;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__prices {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

/* 「3,300円（税込）」 as the design writes it, out of futureshop's ¥ / 税込 pieces. Flex
   drops the whitespace between the pieces that inline layout would print. */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productPrice,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productPrice__main,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-price__value::after {
  content: "円";
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productPrice__addon__label::before {
  content: "（";
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productPrice__addon__label::after {
  content: "）";
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__outOfStock,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__lowInStock,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__numberOfStock,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__notice {
  margin-top: 8px;
  color: #666666;
  font-size: 11px;
  font-weight: 700;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* Every list button but the wishlist heart takes the red pill, and so does the
   詳細を見る link futureshop puts in place of the cart button on products that cannot
   go straight into the cart (定期, sold out, variations). */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button:not([class*="WishList--icon"]), .fs-c-button--viewProductDetail) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--mr-red);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mr-ease);
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button:not([class*="WishList--icon"]), .fs-c-button--viewProductDetail):hover {
  background: var(--mr-red-dark);
  color: #fff;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button, .fs-c-button--viewProductDetail)::before {
  content: none;
}

/* The label is centred on the button; the cart mark is pinned to the right edge. */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToCart--list::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/cart-white.svg") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

/* The heart sits on the image's top-right corner; futureshop swaps the button's class
   when the product is added or removed. */
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToWishList--icon,
:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--removeFromWishList--icon {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/heart-product.svg") center / contain no-repeat;
  cursor: pointer;
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--removeFromWishList--icon {
  background-image: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/heart-product-active.svg");
}

:is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) [class*="WishList--icon"] .fs-c-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Rank badge on the ranking row, counted in card order. The counter starts on the item
   track, inside the list: the list is a size container (container-type), and that brings
   style containment, which hides a counter started outside it - every card would then
   start a counter of its own and read 1. */
.mr-products--ranked,
.mr-products--ranked .fs-c-productListCarousel__list__itemTrack {
  counter-reset: mr-rank;
}

.mr-products--ranked .fs-c-productListItem {
  counter-increment: mr-rank;
}

.mr-products--ranked .fs-c-productListItem__imageContainer::before {
  content: counter(mr-rank);
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding-bottom: 1px;
  border-radius: 9999px;
  background: var(--mr-ink);
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 11px;
  line-height: 1;
}

/* Gold, silver and bronze for the podium; every other place keeps the ink colour. */
.mr-products--ranked :is(.slick-slide, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) > *):nth-child(1) .fs-c-productListItem__imageContainer::before {
  background: #b69a32;
}

.mr-products--ranked :is(.slick-slide, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) > *):nth-child(2) .fs-c-productListItem__imageContainer::before {
  background: #b8b8b8;
}

.mr-products--ranked :is(.slick-slide, .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) > *):nth-child(3) .fs-c-productListItem__imageContainer::before {
  background: #c7b299;
}

/* The mobile arrows sit in the gutter, just outside the row. */
:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl {
  position: absolute;
  top: calc((100% - 32px) * 0.4);
  z-index: 2;
  flex: none;
  width: 20px;
  min-width: 0;
  height: 20px;
  transform: translateY(-50%);
  transition: opacity var(--mr-ease);
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl--prev {
  left: 4px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/slide-detail-back.svg") center / contain no-repeat;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl--next {
  right: 4px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/slide-detail-next.svg") center / contain no-repeat;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl:hover {
  opacity: 0.7;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl .fs-c-button--carousel {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

:is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl .fs-c-button--carousel::before {
  content: none;
}

@media (min-width: 768px) {
  .mr-products {
    --mr-card-gap: 18px;
  }

  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__ctrl {
    display: none !important;
  }

  /* From md the row is a grid: slick's track position and width are pinned. */
  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-track,
  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mr-card-gap);
    width: auto !important;
    transform: none !important;
  }

  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-slide,
  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) > * {
    width: auto;
    margin-right: 0;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productName {
    margin-top: 14px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__prices {
    padding-top: 14px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control {
    margin-top: 14px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button:not([class*="WishList--icon"]), .fs-c-button--viewProductDetail) {
    font-size: 12px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToCart--list::after {
    right: 14px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToWishList--icon,
  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--removeFromWishList--icon {
    top: 7px;
    right: 7px;
    width: 22px;
    height: 22px;
  }

  .mr-products--ranked .fs-c-productListItem__imageContainer::before {
    top: 7px;
    left: 7px;
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 1280px) {
  .mr-products {
    --mr-card-gap: 21px;
  }

  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .slick-track,
  :is(.mr-products, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListCarousel__list__itemTrack:not(.slick-initialized) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productName {
    margin-top: 16px;
    font-size: 15px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__prices {
    padding-top: 16px;
    font-size: 15px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control {
    margin-top: 16px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button:not([class*="WishList--icon"]), .fs-c-button--viewProductDetail) {
    height: 47px;
    font-size: 15px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToCart--list::after {
    right: 20px;
    width: 17px;
    height: 17px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToWishList--icon,
  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--removeFromWishList--icon {
    top: 8px;
    right: 8px;
    width: 25px;
    height: 25px;
  }

  .mr-products--ranked .fs-c-productListItem__imageContainer::before {
    top: 8px;
    left: 8px;
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
}

@media (min-width: 1600px) {
  .mr-products {
    --mr-card-gap: 25px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__productName {
    margin-top: 20px;
    font-size: 20px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__prices {
    padding-top: 20px;
    font-size: 20px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control {
    margin-top: 20px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-productListItem__control :is(button:not([class*="WishList--icon"]), .fs-c-button--viewProductDetail) {
    height: 60px;
    font-size: 20px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToCart--list::after {
    right: 30px;
    width: 24px;
    height: 24px;
  }

  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--addToWishList--icon,
  :is(.mr-products, .fs-c-productList__list, :is(#fs_ProductDetails, #fs_ProductDetailsSubscribe) .fs-c-productListCarousel) .fs-c-button--removeFromWishList--icon {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
  }

  .mr-products--ranked .fs-c-productListItem__imageContainer::before {
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    padding-bottom: 2px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Page head: breadcrumb and title (.mr-listing-title)

   futureshop's system breadcrumb shows on most pages, and the title parts of the
   listing, group, guide and login pages all use .mr-listing-title.
   ========================================================================== */

/* Breadcrumb: the search page draws its own (.mr-breadcrumb); group pages get
   futureshop's system one, dressed to match. */
.mr-breadcrumb,
.fs-c-breadcrumb {
  --mr-crumb-size: 11px;
  background: #d6cfc4;
}

.mr-breadcrumb__inner,
.fs-c-breadcrumb__list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 1600px;
  min-height: 38px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--mr-ink);
  font-size: var(--mr-crumb-size);
  list-style: none;
}

.mr-breadcrumb__inner a,
.fs-c-breadcrumb__list a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

.mr-breadcrumb__inner a:hover,
.fs-c-breadcrumb__list a:hover {
  opacity: 0.65;
}

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

.fs-c-breadcrumb__listItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mr-breadcrumb__sep,
.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
  content: "";
  flex: none;
  width: 4px;
  height: 7px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/breadcrum-arrow.svg") center / contain no-repeat;
}

/* futureshop labels the first crumb HOME; the design calls it TOP. */
.fs-c-breadcrumb__listItem:first-child a {
  font-size: 0;
}

.fs-c-breadcrumb__listItem:first-child a::before {
  content: "TOP";
  font-size: var(--mr-crumb-size);
}

.mr-listing-title {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 24px 20px;
  text-align: center;
}

.mr-listing-title__heading {
  margin: 0;
  color: var(--mr-ink);
  font-family: var(--mr-en);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.mr-listing-title__sub {
  margin: 4px 0 0;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.mr-listing-title__query {
  margin: 12px 0 0;
  color: var(--mr-ink);
  font-size: 11px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .mr-breadcrumb,
  .fs-c-breadcrumb {
    --mr-crumb-size: 12px;
  }

  .mr-breadcrumb__inner,
  .fs-c-breadcrumb__list {
    min-height: 44px;
    padding: 0 32px;
  }

  .mr-breadcrumb__sep,
  .fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
    height: 8px;
  }

  .mr-listing-title {
    padding: 44px 32px 28px;
  }

  .mr-listing-title__heading {
    font-size: 32px;
  }

  .mr-listing-title__query {
    margin-top: 16px;
    font-size: 12px;
  }
}

@media (min-width: 1280px) {
  .mr-breadcrumb,
  .fs-c-breadcrumb {
    --mr-crumb-size: 13px;
  }

  .mr-breadcrumb__inner,
  .fs-c-breadcrumb__list {
    min-height: 50px;
    padding: 0 80px;
  }

  .mr-breadcrumb__sep,
  .fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
    width: 5px;
    height: 9px;
  }

  .mr-listing-title {
    padding: 58px 80px 34px;
  }

  .mr-listing-title__heading {
    font-size: 40px;
    letter-spacing: 0.12em;
  }

  .mr-listing-title__sub {
    font-size: 13px;
  }

  .mr-listing-title__query {
    margin-top: 20px;
    font-size: 13px;
  }
}

@media (min-width: 1600px) {
  .mr-breadcrumb,
  .fs-c-breadcrumb {
    --mr-crumb-size: 16px;
  }

  .mr-breadcrumb__inner,
  .fs-c-breadcrumb__list {
    min-height: 58px;
    padding: 0;
  }

  .mr-breadcrumb__sep,
  .fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before {
    width: 6px;
    height: 11px;
  }

  .mr-listing-title {
    padding: 70px 0 42px;
  }

  .mr-listing-title__sub {
    margin-top: 10px;
    font-size: 20px;
  }

  .mr-listing-title__query {
    margin-top: 30px;
    font-size: 20px;
  }
}

/* ==========================================================================
   Checkout step bar (.mr-steps): the cart (cart-head.html) and ご注文手続き
   (checkout-head.html) draw the same bar with a different current step.
   ========================================================================== */

/* futureshop keeps .fs-clientInfo hidden until it knows the login state, so this wrapper
   holds the row's height to stop the page jumping when the steps appear. */
.mr-cart-head__steps {
  min-height: 50px;
  margin-bottom: 32px;
}

/* Numbered by a counter, so hiding お客様情報 for members closes the numbers up. */
.mr-steps {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mr-step;
}

.mr-steps__item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: 65px;
  counter-increment: mr-step;
}

/* お客様情報 is a guest step: members go from the cart straight to ご注文手続き. */
.mr-steps.is-loggedIn--true .mr-steps__item--guest {
  display: none;
}

/* Each step after the first draws the line back to the one before, behind the marks. */
.mr-steps__item + .mr-steps__item::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #ccc;
}

.mr-steps__mark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ccc;
  color: #555;
  font-family: var(--mr-en);
  font-size: 14px;
  line-height: 1;
}

.mr-steps__mark::before {
  content: counter(mr-step);
}

.mr-steps__item--current .mr-steps__mark {
  background: var(--mr-ink);
  color: #fff;
}

.mr-steps__label {
  margin-top: 8px;
  color: var(--mr-ink);
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
}

@media (min-width: 768px) {
  .mr-cart-head__steps {
    min-height: 88px;
    margin-bottom: 52px;
  }

  .mr-steps__item {
    width: 130px;
  }

  .mr-steps__item + .mr-steps__item::before {
    top: 29px;
  }

  .mr-steps__mark {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }

  .mr-steps__label {
    margin-top: 12px;
    font-size: 12px;
  }
}