/* ==========================================================================
   meirune — cart.css: ショッピングカート (/p/cart, #fs_ShoppingCart) and the 定期 cart
   (#fs_ShoppingCartSubscribe), which share futureshop's markup. Loaded after base.css by
   the mr.css.cart part in the cart layouts' head.

   Parts, in the layout area below パンくずリストパーツ: mr.cart.head (title and steps) above
   futureshop's cart groups, and mr.cart.quantity anywhere (the − n + stepper).
   futureshop redraws the item table, the totals table and the purchase button from its own
   templates after every change, so everything here hangs off the system classes: the item
   table is laid out as rows of cards, the totals table as the ご注文金額 panel.
   Design: the Bagisto theme's cart (views/checkout/cart, assets/css/cart.css).
   ========================================================================== */

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* Title and steps
   ========================================================================== */

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title {
  max-width: none;
  padding: 64px 0 40px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title__heading {
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title__sub {
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* The step bar (.mr-steps, .mr-cart-head__steps) lives in base.css: the checkout draws it too. */

/* Items and summary: stacked, side by side from 1200px (see the end of the file)
   ========================================================================== */

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-cart__contentsArea {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-l-cart__mainColumn, .fs-l-cart__sideColumn) {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  float: none;
}

/* Item table as cards
   ==========================================================================
   Each row is a grid: the image in the first column over two rows, the name and price
   beside it, the quantity and the bin under the name. The product cell and its wrapper
   are unwrapped (display: contents) so the image and the text land in that grid. */

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTableContainer {
  margin: 0;
  overflow: visible;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable,
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable > tbody {
  display: block;
  width: 100%;
  border: 0;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable > thead {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable > tbody {
  border-top: 1px solid var(--mr-line);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__row {
  display: grid;
  grid-template-columns: 110px auto auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 20px 0 19px;
  border-bottom: 1px solid var(--mr-line);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
}

/* futureshop labels the cells itself below 600px. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell::before {
  content: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-cartTable__dataCell--product, .fs-c-cartTable__product) {
  display: contents;
}

/* The design shows neither the line subtotal nor the points. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-cartTable__dataCell--subtotal, .fs-c-cartTable__dataCell--point) {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productImage {
  grid-column: 1;
  grid-row: 1 / span 2;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  padding: 12px;
  background: #fff;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productImage a {
  display: block;
  width: 100%;
  height: 100%;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productImage__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productInfo {
  grid-column: 2 / -1;
  grid-row: 1;
  min-width: 0;
  color: var(--mr-ink);
  font-size: 12px;
  line-height: 1.8;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productName a {
  color: var(--mr-ink);
  text-decoration: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productName a:hover {
  opacity: 0.65;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__unitPrice {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
}

/* 「3,300円（税込）」 out of futureshop's ¥ / 税込 pieces, as on the product cards. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-cartTable, .fs-c-orderTotalTable) :is(.fs-c-productPrice, .fs-c-productPrice__main, .fs-c-price) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-cartTable, .fs-c-orderTotalTable) .fs-c-price__currencyMark {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-cartTable, .fs-c-orderTotalTable) .fs-c-price__value::after {
  content: "円";
  font-size: 0.8em;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-productPrice__addon__label {
  font-size: 0.85em;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-productPrice__addon__label::before {
  content: "（";
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-productPrice__addon__label::after {
  content: "）";
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell--quantity {
  grid-column: 2;
  grid-row: 2;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell--action {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
}

/* Quantity: minus / number / plus in one outlined box (buttons from cart-quantity.html). */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  max-width: none;
  border: 1px solid var(--mr-line);
  background: #fff;
}

.mr-cart-qty__step {
  position: relative;
  flex: none;
  width: 32px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mr-ink);
  cursor: pointer;
}

.mr-cart-qty__step::before,
.mr-cart-qty__step--plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.mr-cart-qty__step--plus::after {
  width: 2px;
  height: 13px;
}

.mr-cart-qty__step:disabled {
  opacity: 0.35;
  cursor: default;
}

.mr-cart-qty__step:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: -2px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__number {
  box-sizing: border-box;
  width: 43px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 13px;
  text-align: center;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__number:focus {
  outline: 2px solid var(--mr-ink);
  outline-offset: -2px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__number.is-error {
  background: #fceef0;
}

/* Used without the script: the plain select, sized to the box. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__select {
  height: 38px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--mr-ink);
  font-size: 13px;
}

/* futureshop's stock and limit messages, kept out of the row's flow. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__message {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  white-space: nowrap;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__message:empty {
  display: none;
}

/* 削除 as the design's bin; あとで買う is not in the design. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton {
  display: flex;
  align-items: center;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton__container--buyItLater {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton .fs-c-button--cancel--cart {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--mr-ink);
  box-shadow: none;
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 33 33' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 1.875H30M11.25 0H18.75M11.25 9.375V22.5M18.75 9.375V22.5M26.25 1.875V28.125C26.25 29.062 25.31 30 24.38 30H5.62C4.69 30 3.75 29.062 3.75 28.125V1.875'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 33 33' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 1.875H30M11.25 0H18.75M11.25 9.375V22.5M18.75 9.375V22.5M26.25 1.875V28.125C26.25 29.062 25.31 30 24.38 30H5.62C4.69 30 3.75 29.062 3.75 28.125V1.875'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--mr-ease);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton .fs-c-button--cancel--cart:hover {
  opacity: 0.6;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton .fs-c-button--cancel--cart:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: 4px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton .fs-c-button--cancel--cart .fs-c-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ご注文金額 panel, out of futureshop's totals table
   ========================================================================== */

/* futureshop opens the side column with お届け予定日 and an お届け先を変更 button. The design
   has neither, and the address is chosen in ご注文手続き, so the block is left out. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-estimatedDeliveryDate {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-totalAndActions {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) #fs-cartTotals-container {
  padding: 20px 10px;
  background: #d6d1c4;
  color: var(--mr-ink);
}

/* The totals table has no heading of its own, and parts cannot go inside the group. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) #fs-cartTotals-container::before {
  content: "ご注文金額";
  display: block;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.25);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable > tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable > tbody > tr > :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable > tbody > tr > th {
  font-weight: 700;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable > tbody > tr > td {
  text-align: right;
}

/* The item count and the points are not in the design. Both rules name the tr so they
   outweigh the row rule above. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable tr:is(.fs-c-orderTotalTable__count, .fs-c-orderTotalTable__getPoint) {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable tr.fs-c-orderTotalTable__mainRow {
  font-size: 16px;
  font-weight: 700;
}

/* Purchase button and continue link
   ========================================================================== */

/* The 定期 cart's 「お申し込み手続きへ進む」 (.fs-c-button--subscribeHere) is the same red pill as
   the ordinary cart's purchase button. */

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-purchaseHere__message {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartPayment {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartPayment__button {
  margin: 16px 0 0;
  padding: 0;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-button--purchaseHere, .fs-c-button--subscribeHere, .fs-c-button--unregisteredUserPurchase, .fs-c-button--loginAndPurchase) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 44px;
  border: 0;
  border-radius: 999px;
  background: var(--mr-red);
  box-shadow: none;
  color: #fff;
  font-family: var(--mr-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-button--purchaseHere, .fs-c-button--subscribeHere, .fs-c-button--unregisteredUserPurchase, .fs-c-button--loginAndPurchase):hover {
  color: #fff;
  opacity: 0.85;
}

/* Guests get two buttons: ログインして進む, drawn dark, and the purchase without registering
   (label set to 会員登録せずに購入する in メッセージ), drawn red. The login button gives way to
   the form of cart-guest.html while that part is on the page. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-button--loginAndPurchase {
  background: var(--mr-ink);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) #fs-totalsArea-wrapper:has(.mr-cart-guest) .fs-c-buttonContainer--loginAndPurchase {
  display: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-button--purchaseHere, .fs-c-button--subscribeHere, .fs-c-button--unregisteredUserPurchase, .fs-c-button--loginAndPurchase)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 13px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/next-arrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-continueShopping {
  margin: 16px 0 0;
  padding: 0;
  text-align: right;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-button--continueShopping {
  display: inline;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--mr-ease);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-button--continueShopping:hover {
  color: var(--mr-ink);
  opacity: 0.6;
}

/* The other cart holds items too: 「通常注文（1回だけお届け）商品がカートに入っています。」 on the
   定期 cart, its counterpart on the ordinary one. A white strip with the line and the way
   there, カートを見る, as an outlined pill. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #ccc;
  background: #fff;
  color: var(--mr-ink);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart__message {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart__button {
  flex: none;
  margin: 0;
  padding: 0;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart [class*="fs-c-button--moveTo"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 32px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--mr-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: opacity var(--mr-ease);
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart [class*="fs-c-button--moveTo"]:hover {
  color: var(--mr-ink);
  opacity: 0.65;
}

:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart .fs-c-button__label::before {
  content: none;
}

/* The 定期 cart names each item's お届けサイクル above it; a small sand tag. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__subscriptionCycle {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  background: #d6cfc4;
  color: var(--mr-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

/* RELATED ITEMS (おすすめ商品パーツ) and 「お気に入りリスト」に入っている商品 (the wishlist
   carousel futureshop adds for members): the design has neither in the cart. */
:is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-featuredProduct, .fs-c-wishlistProduct) {
  display: none;
}

@media (min-width: 768px) {
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-main {
    padding: 0 32px 96px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title {
    padding: 94px 0 96px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title__heading {
    font-size: 42px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .mr-listing-title__sub {
    margin-top: 10px;
    font-size: 14px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-cart__contentsArea {
    padding-top: 40px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__row {
    grid-template-columns: 220px auto auto minmax(0, 1fr);
    column-gap: 30px;
    padding: 20px 0;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productImage {
    width: 200px;
    height: 200px;
    margin-left: 20px;
    padding: 24px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productInfo,
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__unitPrice {
    font-size: 16px;
  }

  .mr-cart-qty__step {
    width: 56px;
    height: 69px;
  }

  .mr-cart-qty__step::before {
    width: 20px;
    height: 3px;
  }

  .mr-cart-qty__step--plus::after {
    width: 3px;
    height: 20px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__number,
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable .fs-c-quantity__select {
    width: 59px;
    height: 69px;
    font-size: 15px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__actionButton .fs-c-button--cancel--cart {
    width: 26px;
    height: 26px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) #fs-cartTotals-container {
    padding: 42px 40px 36px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) #fs-cartTotals-container::before {
    margin-bottom: 21px;
    font-size: 24px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable > tbody {
    gap: 22px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable tr {
    font-size: 20px;
    line-height: 1.5;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable__mainRow > th {
    font-size: 24px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-orderTotalTable__mainRow > td {
    font-size: 26px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartPayment__button {
    margin-top: 24px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-button--purchaseHere, .fs-c-button--subscribeHere, .fs-c-button--unregisteredUserPurchase, .fs-c-button--loginAndPurchase) {
    height: 60px;
    padding: 0 56px;
    font-size: 15px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) :is(.fs-c-button--purchaseHere, .fs-c-button--subscribeHere, .fs-c-button--unregisteredUserPurchase, .fs-c-button--loginAndPurchase)::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-button--continueShopping {
    font-size: 14px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart {
    margin-top: 24px;
    padding: 16px 24px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart__message {
    font-size: 15px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-moveToAnotherCart [class*="fs-c-button--moveTo"] {
    min-width: 180px;
    height: 44px;
    font-size: 14px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__subscriptionCycle {
    margin-bottom: 8px;
    padding: 3px 12px;
    font-size: 13px;
  }
}

/* Tablet: the summary stays under the items, at the width it is drawn at. */
@media (min-width: 768px) and (max-width: 1199px) {
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-cart__sideColumn {
    width: 100%;
    max-width: 650px;
  }
}

/* Items and summary side by side: 900 and 650 with a 50px gutter at the design's width. */
@media (min-width: 1200px) {
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-cart__contentsArea {
    grid-template-columns: minmax(0, 900fr) minmax(0, 650fr);
    gap: 50px;
  }

  /* The link sits outside the group, so it is held to the items column's width. */
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-continueShopping {
    max-width: calc((100% - 50px) * 900 / 1550);
  }
}

@media (min-width: 1280px) {
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-main {
    padding: 0 80px 96px;
  }
}

/* From 1600px the quantity and the bin take their own columns at the end of the row. */
@media (min-width: 1600px) {
  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-l-main {
    max-width: 1648px;
    padding: 0 24px 96px;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__row {
    grid-template-columns: 220px minmax(0, 1fr) auto auto;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productImage {
    grid-row: 1;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__productInfo {
    grid-column: 2;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell--quantity {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  :is(#fs_ShoppingCart, #fs_ShoppingCartSubscribe) .fs-c-cartTable__dataCell--action {
    grid-column: 4;
    grid-row: 1;
  }
}

/* Guest blocks in the cart (cart-guest.html): 会員登録 and 会員のお客様, moved under the
   purchase buttons by the part's script
   ========================================================================== */

/* Members, 仮ログイン included, sign in again on futureshop's own page at checkout. */
.mr-cart-guest__content.is-loggedIn--true {
  display: none;
}

.mr-cart-guest__block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--mr-line);
  color: var(--mr-ink);
}

.mr-cart-guest__block:last-child {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mr-line);
}

.mr-cart-guest__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.mr-cart-guest__copy {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.9;
}

.mr-cart-guest__field {
  margin-bottom: 12px;
}

.mr-cart-guest__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.mr-cart-guest__input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--mr-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 13px;
}

.mr-cart-guest__input::placeholder {
  color: #b5b5b5;
}

.mr-cart-guest__input:hover,
.mr-cart-guest__input:focus {
  border-color: var(--mr-ink);
  outline: none;
}

.mr-cart-guest__button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin: 16px 0 0;
  padding: 0 44px;
  border: 0;
  border-radius: 999px;
  background: var(--mr-red);
  color: #fff;
  font-family: var(--mr-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

.mr-cart-guest__button:hover {
  color: #fff;
  opacity: 0.85;
}

.mr-cart-guest__button:focus-visible {
  outline: 2px solid var(--mr-ink);
  outline-offset: 2px;
}

.mr-cart-guest__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 13px;
  background: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/next-arrow.svg") center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .mr-cart-guest__block {
    margin-top: 24px;
    padding-top: 24px;
  }

  .mr-cart-guest__block:last-child {
    padding-bottom: 24px;
  }

  .mr-cart-guest__title {
    margin-bottom: 16px;
    font-size: 16px;
  }

  .mr-cart-guest__copy {
    font-size: 16px;
    line-height: 2;
  }

  .mr-cart-guest__field {
    margin-bottom: 20px;
  }

  .mr-cart-guest__label {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .mr-cart-guest__input {
    height: 59px;
    padding: 0 16px;
    font-size: 14px;
  }

  .mr-cart-guest__button {
    height: 60px;
    margin-top: 24px;
    padding: 0 56px;
    font-size: 15px;
  }

  .mr-cart-guest__button::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }
}