/* ==========================================================================
   meirune — login.css: the login page (/p/login, #fs_Login) and the logins other pages send
   to, each its own layout and body id:
   - /p/login?type=cart (#fs_ShoppingCartLogin), from the checkout - for guests, and for
     members whose session has gone 仮ログイン after 30 minutes without activity;
   - /p/login?type=subscribe (#fs_ShoppingCartSubscribeLogin), from the 定期 cart - the
     login part only, since 定期 needs an account;
   - /p/login?redirect=…&type=wishlist (#fs_WishListLogin), from お気に入り - the same
     two blocks as /p/login.
   - /p/login?type=review (#fs_ReviewLogin), from レビューを書く - the same two blocks.
   Loaded after base.css by the mr.css.login part in the head of each layout. Title is
   login-head.html (ページ見出し). The body ids are named, so these beat the theme.
   ========================================================================== */

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-header--min:not(:has(.mr-header)),
.fs-body-cart-login .fs-l-header--min:not(:has(.mr-header)),
.fs-body-wishlist-login .fs-l-header--min:not(:has(.mr-header)) {
  display: none;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-header--min,
.fs-body-cart-login .fs-l-header--min,
.fs-body-wishlist-login .fs-l-header--min {
  border-bottom: 0;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-footer:not(:has(.mr-footer)),
.fs-body-cart-login .fs-l-footer:not(:has(.mr-footer)),
.fs-body-wishlist-login .fs-l-footer:not(:has(.mr-footer)) {
  display: none;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-footer:has(.mr-footer),
.fs-body-cart-login .fs-l-footer:has(.mr-footer),
.fs-body-wishlist-login .fs-l-footer:has(.mr-footer) {
  margin-top: 0;
  border-top: 0;
  background: transparent;
  color: inherit;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-p-footerPageTop,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-p-footerUtilityMenu,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-p-footerCopyright {
  display: none;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-main,
.fs-body-cart-login .fs-l-main,
.fs-body-wishlist-login .fs-l-main {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-pageMain {
  max-width: none;
  width: 100%;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin):has(.mr-listing-title) .fs-c-heading--page {
  display: none;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title {
  max-width: none;
  padding: 32px 0 40px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title__heading {
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title__sub {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The starting theme wraps the two blocks in .fs-c-loginForm > section.fs-c-registeredUsers,
   the skeleton theme leaves the parts bare in .fs-l-pageMain. Nothing here relies on either
   wrapper: the md block builds the columns on whatever element holds .fs-c-newUsers. */
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-loginForm {
  max-width: none;
  margin: 0;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-registeredUsers {
  margin: 0;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-newUsers {
  margin: 62px 0 0;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-subSection__title {
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 0;
  color: var(--mr-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin {
  box-sizing: border-box;
  background: #d6d1c4;
  padding: 10px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputInformation__field {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLoginField,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable tbody,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable tr,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable th,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable td,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputField,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputField__field {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable tr + tr {
  margin-top: 20px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable__label {
  display: block;
  margin: 0 0 8px;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-requiredMark {
  display: none !important;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="text"],
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="password"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 29px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 12px;
  line-height: 29px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="text"]::placeholder,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="password"]::placeholder {
  color: #b5b5b5;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="text"]:hover,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="password"]:hover,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="text"]:focus,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="password"]:focus {
  border-color: var(--mr-ink);
  outline: none;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputGroup {
  position: relative;
  display: block;
  border: 0;
}

/* Same weight as the input rule above, so it has to come after it. The toggle turns the
   field into type="text", which that rule covers too. */
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin .fs-c-inputGroup input {
  padding-right: 36px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--displayPassword,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--hidePassword {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-width: 0;
  cursor: pointer;
}

/* The eye comes from the starting theme's icon font, which the skeleton theme does not
   load, so it is drawn here: the outline eye from the Bagisto login page. */
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--displayPassword::before,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--hidePassword::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--mr-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-buttonContainer--login {
  margin: 20px 0 0;
  padding: 0;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 0 !important;
  height: 40px;
  margin: 0 auto;
  padding: 0 44px;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--mr-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login {
  max-width: 200px;
  background: var(--mr-ink) !important;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister,

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase {
  background: var(--mr-red) !important;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login:hover,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister:hover,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase:hover {
  opacity: 0.85;
  color: #fff !important;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login::after,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister::after,
:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase::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_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-textLinkContainer {
  margin: 16px 0 0;
  padding: 0;
  text-align: center;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-textLink {
  color: var(--mr-ink) !important;
  font-size: 12px;
  line-height: 1.8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-newUsers__message {
  margin: 0;
  padding: 10px 10px 0;
  background: #fff;
  color: var(--mr-ink);
  font-size: 13px;
  line-height: 1.9;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-buttonContainer--memberRegister {
  margin: 0;
  padding: 24px 10px 10px;
  background: #fff;
}

:is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-guestPurchase {
  width: 100% !important;
  max-width: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--mr-line);
  text-align: center;
}

@media (min-width: 768px) {
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-main,
  .fs-body-cart-login .fs-l-main,
  .fs-body-wishlist-login .fs-l-main {
    padding: 0 32px 100px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title {
    padding: 96px 0 91px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title__heading {
    font-size: 42px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .mr-listing-title__sub {
    margin-top: 10px;
    font-size: 14px;
  }

  /* Two columns, 50px apart. With the parts bare the grid is .fs-l-pageMain itself, so
     everything else in it (the page title) spans both columns. */
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) :has(> .fs-c-newUsers) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
    column-gap: 50px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) :has(> .fs-c-newUsers) > * {
    grid-column: 1 / -1;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) :has(> .fs-c-newUsers) > :is(.fs-c-registeredUsers, .fs-c-registeredUsers__title, .fs-c-fsLogin) {
    grid-column: 1;
  }

  /* Spans the heading row and the panel row of a bare login part; dense placement lifts
     it up beside them rather than below. */
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) :has(> .fs-c-newUsers) > .fs-c-newUsers {
    grid-column: 2;
    grid-row: span 2;
    margin-top: 0;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-subSection__title {
    margin-bottom: 16px;
    font-size: 15px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin {
    padding: 40px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable tr + tr {
    margin-top: 40px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-inputTable__label {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="text"],
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin input[type="password"] {
    height: 59px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 59px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-fsLogin .fs-c-inputGroup input {
    padding-right: 56px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--displayPassword,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--hidePassword {
    width: 56px;
    height: 59px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--displayPassword::before,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--hidePassword::before {
    width: 22px;
    height: 22px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-buttonContainer--login {
    margin-top: 37px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase {
    max-width: 300px;
    height: 60px;
    padding: 0 56px;
    font-size: 16px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--login::after,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--memberRegister::after,
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-button--guestPurchase::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-textLinkContainer {
    margin-top: 12px;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-newUsers__message {
    padding: 40px 40px 0;
    line-height: 2;
  }

  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-c-buttonContainer--memberRegister {
    padding: 48px 40px 40px;
  }
}

@media (min-width: 1280px) {
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-main,
  .fs-body-cart-login .fs-l-main,
  .fs-body-wishlist-login .fs-l-main {
    padding: 0 80px 100px;
  }
}

@media (min-width: 1600px) {
  /* A wider cap with its own gutter, so a window between 1600 and 1648 keeps 24px a side. */
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-main,
  .fs-body-cart-login .fs-l-main,
  .fs-body-wishlist-login .fs-l-main {
    max-width: 1648px;
    padding: 0 24px 100px;
  }
}

/* Only the login part on the page, as on the checkout's re-login, where futureshop drops the
   new-customer column: one centred column, as wide as each of the two on /p/login. */
@media (min-width: 768px) {
  :is(#fs_Login, #fs_ShoppingCartLogin, #fs_ShoppingCartSubscribeLogin, #fs_WishListLogin, #fs_ReviewLogin) .fs-l-main:not(:has(.fs-c-newUsers)) :is(.fs-c-registeredUsers, .fs-c-subSection__title, .fs-c-fsLogin, .fs-c-guestPurchase) {
    max-width: 775px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ==========================================================================
   パスワードをお忘れの方 (/p/forgot-password, :is(#fs_PasswordReminder, #fs_ResetPassword))

   futureshop's page: its three-line guide (.fs-c-inputInformation__message), then
   form#fs_form with メールアドレス and 仮パスワード and 送信. mr.reminder.head
   (forgot-password-head.html) adds the PASSWORD RESET title, the mail box's note and
   ログイン画面へ戻る, and the 送信いたしました block once the form is gone. Design: the
   Bagisto theme's forgot-password pages - a 1000px column, the guide as the intro, the
   form on a taupe panel with a dark pill.
   ========================================================================== */

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-l-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 40px;
  color: var(--mr-ink);
}

/* min-width too: fs_style.css gives the message area (.fs-c-panelContainer)
   min-width: 100%, which would win over the max-width. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-l-main > :not(.mr-reminder-title) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

/* futureshop's messages (errors on sending, and 「メールを送りました」), in the column. */
:is(#fs_PasswordReminder, #fs_ResetPassword) #fs-page-error-container .fs-c-panel {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
}

/* Sent (mr.reminder.head found the info panel): the design's block replaces the guide,
   the form and that panel. */
:is(#fs_PasswordReminder, #fs_ResetPassword).mr-reminder-is-sent :is(.fs-c-inputInformation__message, #fs_form, #fs-page-error-container) {
  display: none;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-listing-title {
  max-width: none;
  padding: 32px 0 40px;
}

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

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

/* futureshop's guide, read as the design's intro: plain lines, no numbers. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputInformation__message {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.9;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputInformation__message :is(ol, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputInformation__message :is(li, p) {
  margin: 0;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form {
  padding: 10px;
  background: #d6d1c4;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-inputInformation__field, .fs-c-forgotPasswordField) {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-inputTable, .fs-c-inputTable tbody, .fs-c-inputTable tr, .fs-c-inputTable th, .fs-c-inputTable td, .fs-c-inputField, .fs-c-inputField__field) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputTable tr + tr {
  margin-top: 20px;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputTable__label {
  display: block;
  margin: 0 0 8px;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-requiredMark {
  display: none;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 29px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 12px;
  line-height: 29px;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form input::placeholder {
  color: #b5b5b5;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form input:is(:hover, :focus) {
  border-color: var(--mr-ink);
  outline: none;
}

/* 仮パスワード with the eye toggle, drawn as on the login page. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputGroup {
  position: relative;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form .fs-c-inputGroup input {
  padding-right: 36px;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword) {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 0;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword)::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: var(--mr-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The note under the mail box (mr.reminder.head). */
:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-hint {
  margin: 8px 0 0;
  color: var(--mr-ink);
  font-size: 8px;
  line-height: 1.6;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-buttonContainer--send, .fs-c-buttonContainer--register) {
  margin: 20px 0 0;
  padding: 0;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register, .mr-reminder-sent__button) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  min-width: 0;
  height: 40px;
  margin: 0 auto;
  padding: 0 44px;
  border: 0;
  border-radius: 999px;
  background: var(--mr-ink);
  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;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register, .mr-reminder-sent__button):hover {
  color: #fff;
  opacity: 0.85;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register, .mr-reminder-sent__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;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register) .fs-c-button__label::before {
  content: none;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-back {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-back a {
  color: var(--mr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--mr-ease);
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-back a:hover {
  opacity: 0.65;
}

/* 送信いたしました (mr.reminder.head). The part may sit in .fs-l-main or, as on the shop,
   outside it straight in .fs-l-page; so the block carries its own centred 1000px column,
   and the page gutter when it is outside main. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent {
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent:not(.fs-l-main *) {
  max-width: 1048px;
  padding: 0 24px;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__title {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__subtitle {
  margin: 32px 0 8px;
  font-size: 14px;
  font-weight: 700;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) :is(.mr-reminder-sent__copy, .mr-reminder-sent__list) {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.9;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__list {
  padding-left: 1.2em;
  list-style: disc;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__copy:last-of-type {
  margin-bottom: 24px;
}

/* TOPへ戻る: outlined, the arrow on the left pointing back. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button {
  max-width: 359px;
  border: 1px solid var(--mr-ink);
  background: #fff;
  color: var(--mr-ink);
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button:hover {
  color: var(--mr-ink);
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button::after {
  right: auto;
  left: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'%3E%3Cpath d='M13.9082 24.4012C13.1272 25.1822 11.8601 25.1822 11.0791 24.4012L0.585938 13.908C-0.19509 13.127 -0.19505 11.86 0.585939 11.0789L11.0791 0.585779C11.8602 -0.195268 13.1272 -0.195268 13.9082 0.58578C14.6889 1.36678 14.6889 2.63294 13.9082 3.4139L6.82813 10.494L28.9844 10.494C30.0888 10.4941 30.9844 11.3895 30.9844 12.494C30.9841 13.5983 30.0887 14.4939 28.9844 14.494L6.82813 14.494L13.9082 21.5731C14.6889 22.3541 14.6889 23.6202 13.9082 24.4012Z' fill='%23333333'/%3E%3C/svg%3E");
}

/* 新しいパスワードの登録, done (reset-password-head.html): the copy centred and a pair -
   TOPへ戻る outlined and ログイン画面へ進む dark - stacked with the way forward on top
   below md, side by side from md. */
:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__copy--center {
  text-align: center;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__actions .mr-reminder-sent__button {
  max-width: 320px;
  margin: 0;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button--forward {
  border-color: var(--mr-ink);
  background: var(--mr-ink);
  color: #fff;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button--forward:hover {
  color: #fff;
}

:is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button--forward::after {
  right: 16px;
  left: auto;
  background-image: url("https://sfgbeauty.itembox.cloud/item/meirune/img/icons/next-arrow.svg");
}

@media (min-width: 768px) {
  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-l-main {
    padding: 0 32px 100px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-listing-title {
    padding: 96px 0 91px;
  }

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

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

  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputInformation__message {
    margin-bottom: 40px;
    padding-top: 21px;
    font-size: 16px;
    line-height: 2;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form {
    padding: 60px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputTable tr + tr {
    margin-top: 40px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-c-inputTable__label {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"]) {
    height: 59px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 59px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) #fs_form .fs-c-inputGroup input {
    padding-right: 56px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword) {
    width: 56px;
    height: 59px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword)::before {
    width: 22px;
    height: 22px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-hint {
    font-size: 12px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-buttonContainer--send, .fs-c-buttonContainer--register) {
    margin-top: 40px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register, .mr-reminder-sent__button) {
    max-width: 300px;
    height: 60px;
    padding: 0 56px;
    font-size: 16px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.fs-c-button--send, .fs-c-button--register, .mr-reminder-sent__button)::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-back {
    margin-top: 32px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent:not(.fs-l-main *) {
    max-width: 1064px;
    padding: 0 32px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__title {
    margin-bottom: 28px;
    padding-top: 15px;
    font-size: 17px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__subtitle {
    margin-top: 44px;
    font-size: 15px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) :is(.mr-reminder-sent__copy, .mr-reminder-sent__list) {
    margin-bottom: 26px;
    font-size: 16px;
    line-height: 2;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button {
    max-width: 359px;
    height: 59px;
    margin-top: 24px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button::after {
    right: auto;
    left: 24px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__actions {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__actions .mr-reminder-sent__button {
    max-width: 360px;
    height: 60px;
    margin: 0;
  }

  :is(#fs_PasswordReminder, #fs_ResetPassword) .mr-reminder-sent__button--forward::after {
    right: 24px;
    left: auto;
  }
}

@media (min-width: 1280px) {
  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-l-main {
    padding: 0 80px 100px;
  }
}

@media (min-width: 1600px) {
  :is(#fs_PasswordReminder, #fs_ResetPassword) .fs-l-main {
    max-width: 1648px;
    padding: 0 24px 100px;
  }
}

/* ==========================================================================
   会員登録 (/p/register, #fs_Register)

   futureshop's page: a one-line guide (.fs-c-inputInformation__message), then form#fs_form -
   the member table (氏名 and フリガナ split in two, メール, パスワード, 郵便番号, 都道府県,
   住所１-３, 電話, 性別, 生年月日, メールマガジン), the 会員規約 and 個人情報保護方針
   checkboxes, 次へ (which mails a 認証コード) and a note under it. mr.register.head
   (register-head.html) adds the MEMBER REGISTRATION title, the design's intro lines in
   front of the guide and the fields' examples. Design: the Bagisto theme's sign-up page -
   a 1000px column straight on the page, white fields with a #ccc edge (35px, 55px from md),
   outlined 必須 badges, the agreement centred and a dark pill.
   ========================================================================== */

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .fs-l-main {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 40px;
  color: var(--mr-ink);
}

/* min-width: fs_style.css gives the message area min-width: 100%. */
:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .fs-l-main > :not(.mr-register-title) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

:is(#fs_Register, #fs_RegisterVerification) #fs-page-error-container .fs-c-panel {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title {
  max-width: none;
  padding: 32px 0 40px;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title__heading {
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title__sub {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The design's intro (mr.register.head moves it into the guide) and futureshop's line
   read as one paragraph. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__message {
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.9;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__message p,
:is(#fs_Register, #fs_RegisterVerification) .mr-register-intro {
  margin: 0;
}

/* Left where the part was, when there is no guide to move it into. */
:is(#fs_Register, #fs_RegisterVerification) .mr-register-intro:not(.fs-c-inputInformation__message *) {
  box-sizing: border-box;
  max-width: 1048px;
  margin: 0 auto 20px;
  padding: 0 24px;
  font-size: 13px;
  line-height: 1.9;
}

:is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-inputInformation__field, .fs-c-memberInfoField, .fs-c-additionalCheckField) {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTable :is(tbody, tr, th, td),
:is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-inputTable, .fs-c-inputField, .fs-c-inputField__field) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTable tr + tr {
  margin-top: 21px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTable__label {
  display: block;
  margin: 0 0 11px;
  color: var(--mr-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 19px;
}

/* (必須) as the design's outlined badge: futureshop's own text is hidden and fs_style.css's
   asterisk replaced. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-requiredMark {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 10px;
  overflow: visible;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
  vertical-align: top;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-requiredMark::before {
  content: "必須";
  display: block;
  padding: 3px 6px;
  border: 1px solid var(--mr-red);
  color: var(--mr-red);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 35px;
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  box-shadow: none;
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  font-size: 12px;
  line-height: normal;
  transition: border-color var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form input::placeholder {
  color: #b5b5b5;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form :is(input, select):is(:hover, :focus) {
  border-color: #888;
  box-shadow: none;
  outline: none;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--mr-ink);
}

/* futureshop's input assist (checked on the live page) marks a field it refuses with .is-error
   and writes why in div.fs-c-assist.is-error > span.fs-c-assist__message, right after the
   field in .fs-c-inputField. */
:is(#fs_Register, #fs_RegisterVerification) #fs_form :is(input, select).is-error {
  border-color: var(--mr-red);
  background-color: #fff;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField > .fs-c-assist {
  margin: 6px 0 0;
  padding: 0;
  color: var(--mr-red);
  font-size: 11px;
  line-height: 1.6;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-assist .fs-c-assist__message {
  margin: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-assist .fs-c-assist__message::before {
  content: none;
}

/* 氏名 / フリガナ: 姓 and 名 side by side. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTextGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTextGroup > * + * {
  margin-left: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTextGroup__item {
  flex: 1 1 0;
  min-width: 0;
}

/* パスワード: the eye inside the field's right edge, as on the login page. fs_style.css
   draws the group as one bordered box with a divider before the button. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputGroup {
  position: relative;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-inputGroup input {
  padding-right: 36px;
}

:is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword) {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 0;
  height: 35px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

:is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword)::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: var(--mr-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 郵便番号: 〒 before a short field. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__field--zipCode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__field--zipCode::before {
  content: "〒";
  font-size: 13px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__field--zipCode > :first-child {
  margin-right: 0;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form input.fs-c-input--zipCode {
  flex: 0 1 99px;
  width: 99px;
  min-width: 0;
  max-width: 99px;
}

/* The design's note beside the field (mr.register.head). */
:is(#fs_Register, #fs_RegisterVerification) .mr-register-hint {
  font-size: 8px;
  line-height: 1.6;
}

/* futureshop's own address lookup: from the third digit it lists every match under the
   field (59 for 0600), which unstyled pushes the form down by the list's full height. Here
   it drops over the fields below instead, and scrolls. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField:has(> .fs-c-inputField__field--zipCode) {
  position: relative;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  max-height: 240px;
  margin-top: 4px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overscroll-behavior: contain;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem {
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  transition: background-color var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem + .fs-c-suggestedAddress__listItem {
  border-top: 1px solid var(--mr-line);
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem:hover {
  background: #f3f1ec;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem__zipcode {
  flex: none;
  color: #888;
}

/* fs-u-zipcode here is lower-case, so fs_style.css's 〒 (.fs-u-zipCode) does not reach it. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem__zipcode::before {
  content: "〒";
}

/* Selects: the design's chevron on the field; fs_style.css's ::after is an icon-font
   glyph the skeleton theme lacks. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-dropdown {
  max-width: 149px;
  overflow: visible;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-dropdown::after {
  content: none;
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-dropdown select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 生年月日: 年 / 月 / 日 after each select instead of fs_style.css's slashes. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate > .fs-c-dropdown {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: none;
  margin: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate > .fs-c-dropdown::before {
  content: none;
}

/* fs_style.css draws the chevron glyph here with padding and font-family "fs-icon"
   !important, so the font has to be named !important back. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate > .fs-c-dropdown::after {
  position: static;
  display: block;
  flex: none;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mr-sans) !important;
  font-size: 13px;
  line-height: 1;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate__year::after {
  content: "年";
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate__month::after {
  content: "月";
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate__date::after {
  content: "日";
}

:is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-inputDate select {
  flex: 0 1 79px;
  width: 79px;
}

/* 性別 / メールマガジン: the checkout's radios - a ring, filled red when chosen. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-radioGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-radioGroup > * {
  flex-basis: auto;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__label {
  gap: 8px;
  color: var(--mr-ink);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__radioMark {
  box-sizing: border-box;
  flex: none;
  width: 14px;
  min-width: 0;
  height: 14px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
}

/* fs_style.css animates `all` here, which would also grow the ring when the width changes. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark {
  border-color: var(--mr-red);
  background: var(--mr-red);
  transition: background-color var(--mr-ease), border-color var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__radio:checked:enabled + label > .fs-c-radio__radioMark::before {
  opacity: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__explanation {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.7;
}

/* 会員規約 / 個人情報保護方針: centred under the table, the checkout's tick box. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-memberPolicyAgreeField {
  margin-top: 32px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-additionalCheckField + .fs-c-additionalCheckField {
  margin-top: 12px;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-additionalCheckField .fs-c-inputField__field {
  display: flex;
  justify-content: center;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__label {
  gap: 8px;
  color: var(--mr-ink);
  font-size: 13px;
  line-height: 1.6;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__checkMark {
  box-sizing: border-box;
  flex: none;
  width: 15px;
  min-width: 0;
  height: 15px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff center / 11px 8px no-repeat;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__checkMark::before {
  content: none;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__checkbox:checked + label > .fs-c-checkbox__checkMark {
  border-color: #ccc;
  background-color: #fff;
  transition: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6L4.4 8 11 1' fill='none' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__labelText a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__labelText a:hover {
  opacity: 0.65;
}

/* 次へ: the design's dark pill with the arrow on its right. */
:is(#fs_Register, #fs_RegisterVerification) .fs-c-buttonContainer--sendVerificationCode {
  display: block;
  margin: 32px 0 0;
  padding: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  height: 40px;
  margin: 0 auto;
  padding: 0 44px;
  border: 0;
  border-radius: 999px;
  background: var(--mr-ink);
  box-shadow: none;
  color: #fff;
  font-family: var(--mr-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode:hover {
  background: var(--mr-ink);
  color: #fff;
  opacity: 0.85;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode::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_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode .fs-c-button__label::before {
  content: none;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__buttonMessage {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

:is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__buttonMessage p {
  margin: 0;
}

/* With mr.register.head running: its intro's last line replaces futureshop's guide line,
   and the note on the 認証コード mail moves under この内容で登録する. */
:is(#fs_Register, #fs_RegisterVerification) .mr-register-guide > p:not(.mr-register-intro),
#fs_Register.mr-register-ready .fs-c-inputInformation__buttonMessage {
  display: none;
}

/* 会員登録確認 (mr.register.head): the entered values replace the intro and the form. */
#fs_Register.mr-register-is-confirm :is(.fs-c-inputInformation__message, #fs_form) {
  display: none;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list {
  margin: 0 0 40px;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dt {
  margin: 0;
  color: var(--mr-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dd {
  margin: 10px 0 32px;
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dd:last-child {
  margin-bottom: 0;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

/* The pill pairs: 入力画面へ戻る / この内容で登録する, and ショッピングを続ける /
   マイページへ進む. Stacked below md - the way forward on top - side by side from md. */
:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm .mr-register-actions {
  flex-direction: column-reverse;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mr-ink);
  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;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button:hover {
  color: #fff;
  opacity: 0.85;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button:disabled {
  opacity: 0.5;
  cursor: default;
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-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;
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-button--back,
:is(#fs_Register, #fs_RegisterVerification) .mr-register-button--back:hover {
  border-color: var(--mr-ink);
  background: #fff;
  color: var(--mr-ink);
}

:is(#fs_Register, #fs_RegisterVerification) .mr-register-button--back::after {
  right: auto;
  left: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'%3E%3Cpath d='M13.9082 24.4012C13.1272 25.1822 11.8601 25.1822 11.0791 24.4012L0.585938 13.908C-0.19509 13.127 -0.19505 11.86 0.585939 11.0789L11.0791 0.585779C11.8602 -0.195268 13.1272 -0.195268 13.9082 0.58578C14.6889 1.36678 14.6889 2.63294 13.9082 3.4139L6.82813 10.494L28.9844 10.494C30.0888 10.4941 30.9844 11.3895 30.9844 12.494C30.9841 13.5983 30.0887 14.4939 28.9844 14.494L6.82813 14.494L13.9082 21.5731C14.6889 22.3541 14.6889 23.6202 13.9082 24.4012Z' fill='%23333333'/%3E%3C/svg%3E");
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button--red {
  background: var(--mr-red);
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button--taupe,
:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button--taupe:hover {
  background: #d6d1c4;
  color: var(--mr-ink);
}

:is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button--taupe::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'%3E%3Cpath d='M17.0762 0.585727C17.8572 -0.195242 19.1242 -0.195242 19.9053 0.585727L30.3984 11.0789C31.1795 11.8599 31.1794 13.1269 30.3984 13.908L19.9053 24.4012C19.1242 25.1822 17.8572 25.1822 17.0762 24.4012C16.2955 23.6202 16.2954 22.354 17.0762 21.573L24.1562 14.493L2 14.493C0.895527 14.4928 -4.82792e-08 13.5975 0 12.493C0.00026172 11.3887 0.895688 10.4931 2 10.493L24.1562 10.493L17.0762 3.41385C16.2955 2.63286 16.2955 1.3667 17.0762 0.585727Z' fill='%23333333'/%3E%3C/svg%3E");
}

/* 会員登録完了 (mr.register.done). The part may sit in .fs-l-main or outside it, so the
   block carries its own centred column, and the page gutter when it is outside main. */
.mr-register-done-page .mr-register-done {
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  color: var(--mr-ink);
}

.mr-register-done-page .mr-register-done:not(.fs-l-main *) {
  max-width: 1048px;
  padding: 0 24px 40px;
}

.mr-register-done-page .mr-register-done__title {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}

.mr-register-done-page .mr-register-done__copy {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.9;
  text-align: center;
}

.mr-register-done-page .mr-register-done__copy:last-of-type {
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .fs-l-main {
    padding: 0 32px 100px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title {
    padding: 96px 0 91px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title__heading {
    font-size: 42px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-listing-title__sub {
    margin-top: 10px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__message {
    margin-bottom: 82px;
    padding-top: 21px;
    font-size: 16px;
    line-height: 2;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-intro:not(.fs-c-inputInformation__message *) {
    max-width: 1064px;
    padding: 21px 32px 0;
    font-size: 16px;
    line-height: 2;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTable tr + tr {
    margin-top: 43px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTable__label {
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 22px;
  }

  :is(#fs_Register, #fs_RegisterVerification) #fs_form :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select) {
    height: 55px;
    padding: 0 20px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-dropdown select {
    padding-right: 40px;
    background-position: right 16px center;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField > .fs-c-assist {
    margin-top: 8px;
    font-size: 13px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputTextGroup {
    gap: 20px;
  }

  :is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-inputGroup input {
    padding-right: 56px;
  }

  :is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword) {
    width: 56px;
    height: 55px;
  }

  :is(#fs_Register, #fs_RegisterVerification) :is(.fs-c-button--displayPassword, .fs-c-button--hidePassword)::before {
    width: 22px;
    height: 22px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__field--zipCode,
  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate,
  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate > .fs-c-dropdown {
    gap: 12px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__field--zipCode::before,
  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputDate > .fs-c-dropdown::after {
    font-size: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification) #fs_form input.fs-c-input--zipCode {
    flex-basis: 199px;
    width: 199px;
    max-width: 199px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-hint {
    font-size: 12px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress {
    max-width: 520px;
    max-height: 320px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-suggestedAddress__listItem {
    gap: 16px;
    padding: 12px 20px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-dropdown {
    max-width: 199px;
  }

  :is(#fs_Register, #fs_RegisterVerification) #fs_form .fs-c-inputDate select {
    flex-basis: 199px;
    width: 199px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-radioGroup {
    gap: 16px 40px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__label {
    gap: 12px;
    font-size: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-radio__radioMark {
    width: 22px;
    height: 22px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputField__explanation {
    margin-top: 12px;
    font-size: 13px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-memberPolicyAgreeField {
    margin-top: 101px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-additionalCheckField + .fs-c-additionalCheckField {
    margin-top: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__label {
    gap: 12px;
    font-size: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-checkbox__checkMark {
    width: 19px;
    height: 19px;
    background-size: 13px 10px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-buttonContainer--sendVerificationCode {
    margin-top: 101px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode {
    max-width: 360px;
    height: 60px;
    padding: 0 56px;
    font-size: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-button--sendVerificationCode::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .fs-c-inputInformation__buttonMessage {
    margin-top: 24px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list {
    margin-bottom: 94px;
    padding-top: 9px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dt {
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dd {
    margin: 22px 0 59px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__list dd:last-child {
    margin-bottom: 0;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm__note {
    margin-top: 24px;
    font-size: 14px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-actions,
  :is(#fs_Register, #fs_RegisterVerification) .mr-register-confirm .mr-register-actions {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button {
    max-width: 360px;
    height: 60px;
    padding: 0 56px;
    font-size: 16px;
  }

  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .mr-register-button::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  :is(#fs_Register, #fs_RegisterVerification) .mr-register-button--back::after {
    right: auto;
    left: 24px;
  }

  .mr-register-done-page .mr-register-done:not(.fs-l-main *) {
    max-width: 1064px;
    padding: 0 32px 100px;
  }

  .mr-register-done-page .mr-register-done__title {
    margin-bottom: 28px;
    padding-top: 19px;
    font-size: 17px;
  }

  .mr-register-done-page .mr-register-done__copy {
    margin-bottom: 26px;
    line-height: 2;
  }

  .mr-register-done-page .mr-register-done__copy:last-of-type {
    margin-bottom: 24px;
  }

  .mr-register-done-page .mr-register-actions {
    margin-top: 79px;
  }
}

@media (min-width: 1280px) {
  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .fs-l-main {
    padding: 0 80px 100px;
  }
}

@media (min-width: 1600px) {
  :is(#fs_Register, #fs_RegisterVerification, .mr-register-done-page) .fs-l-main {
    max-width: 1648px;
    padding: 0 24px 100px;
  }
}

/* 会員登録完了: futureshop's own completion copy (.fs-c-registerSuccessMessage, 「ご登録いただき、
   ありがとうございました。…」) and its マイページ / 戻る buttons, which mr.register.done's
   block already stands for. */
.mr-register-done-page :is(.fs-c-registerSuccessMessage, .fs-l-main .fs-c-buttonContainer) {
  display: none;
}

/* ==========================================================================
   会員登録 - メールアドレス認証 (/p/register/verification, #fs_RegisterVerification)

   The page 会員登録's 次へ opens: futureshop's guide 「送信された認証コードを入力してください。」,
   then form#fs_form with the address the code went to, the 認証コード field and
   認証コードを再送信する (.fs-c-button--resendVerificationCode), and the 登録 / 戻る buttons.
   Its title is mr.register.verify (register-verify-head.html). The container, title,
   messages, table, labels, 必須 badges, fields and input-assist errors are 会員登録's rules
   above, which name this page too; this adds the guide's place and the buttons. The page
   has not been seen yet (it only opens mid-registration), so the buttons are matched by
   role rather than by exact class: every button in a .fs-c-buttonContainer takes the dark
   pill, anything named --back the outlined one, and the resend button a small outline.
   ========================================================================== */

#fs_RegisterVerification .fs-c-inputInformation__message {
  text-align: center;
}

#fs_RegisterVerification .fs-c-inputTable__dataCell {
  font-size: 13px;
  line-height: 1.8;
}

#fs_RegisterVerification .fs-l-main .fs-c-buttonContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
}

#fs_RegisterVerification .fs-c-buttonContainer :is(button, a) {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0 44px;
  border: 1px solid var(--mr-ink);
  border-radius: 999px;
  background: var(--mr-ink);
  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;
  cursor: pointer;
  transition: opacity var(--mr-ease);
}

#fs_RegisterVerification .fs-c-buttonContainer :is(button, a):hover {
  color: #fff;
  opacity: 0.85;
}

#fs_RegisterVerification .fs-c-buttonContainer :is(button, a)::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;
}

#fs_RegisterVerification .fs-c-buttonContainer :is(button, a) .fs-c-button__label::before {
  content: none;
}

/* 戻る: outlined, the arrow on the left pointing back. */
#fs_RegisterVerification .fs-l-main [class*="fs-c-button--back"],
#fs_RegisterVerification .fs-l-main [class*="fs-c-button--back"]:hover {
  background: #fff;
  color: var(--mr-ink);
}

#fs_RegisterVerification .fs-l-main [class*="fs-c-button--back"]::after {
  right: auto;
  left: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 25'%3E%3Cpath d='M13.9082 24.4012C13.1272 25.1822 11.8601 25.1822 11.0791 24.4012L0.585938 13.908C-0.19509 13.127 -0.19505 11.86 0.585939 11.0789L11.0791 0.585779C11.8602 -0.195268 13.1272 -0.195268 13.9082 0.58578C14.6889 1.36678 14.6889 2.63294 13.9082 3.4139L6.82813 10.494L28.9844 10.494C30.0888 10.4941 30.9844 11.3895 30.9844 12.494C30.9841 13.5983 30.0887 14.4939 28.9844 14.494L6.82813 14.494L13.9082 21.5731C14.6889 22.3541 14.6889 23.6202 13.9082 24.4012Z' fill='%23333333'/%3E%3C/svg%3E");
}

/* 認証コードを再送信する: a small outline, apart from the way forward. */
#fs_RegisterVerification .fs-l-main .fs-c-button--resendVerificationCode,
#fs_RegisterVerification .fs-l-main .fs-c-button--resendVerificationCode:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 24px;
  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;
  line-height: 1;
  cursor: pointer;
}

#fs_RegisterVerification .fs-l-main .fs-c-button--resendVerificationCode::after {
  content: none;
}

@media (min-width: 768px) {
  #fs_RegisterVerification .fs-c-inputInformation__message {
    margin-bottom: 40px;
  }

  #fs_RegisterVerification .fs-c-inputTable__dataCell {
    font-size: 16px;
  }

  #fs_RegisterVerification .fs-l-main .fs-c-buttonContainer {
    gap: 40px;
    margin-top: 60px;
  }

  #fs_RegisterVerification .fs-c-buttonContainer :is(button, a) {
    max-width: 360px;
    height: 60px;
    padding: 0 56px;
    font-size: 16px;
  }

  #fs_RegisterVerification .fs-c-buttonContainer :is(button, a)::after {
    right: 24px;
    width: 18px;
    height: 15px;
  }

  #fs_RegisterVerification .fs-l-main [class*="fs-c-button--back"]::after {
    right: auto;
    left: 24px;
  }

  #fs_RegisterVerification .fs-l-main .fs-c-button--resendVerificationCode,
  #fs_RegisterVerification .fs-l-main .fs-c-button--resendVerificationCode:hover {
    height: 44px;
    padding: 0 32px;
    font-size: 14px;
  }
}