html.js body {
  opacity: 0;
}
html.js body.js-loaded {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.4, 0.4, 0, 1);
}
html.js body.js-leaving {
  opacity: 0 !important;
  transition: opacity 0.28s cubic-bezier(0.4, 0.4, 0, 1);
}

/* news list: hide the category pill badge when it has no label (e.g. an
   article with no category set), instead of showing an empty grey pill.
   news/index.html and the top-page news preview each capture this badge as
   a separate component instance with its own hash, so both need the rule. */
.sd[data-s-0da7f5e0-a88e-431c-a66a-4b116bcfc427]:empty,
.sd[data-s-07fd4628-a3cc-4e53-a741-bfd283202105]:empty {
  display: none;
}

/* menu page: #facial duplicates the "Facial" heading and a quick-nav pill row
   that isn't shown anywhere on the live site either. On narrow screens this
   off-screen duplicate leaked a sliver of text ("M" from CELLULAM) that
   overlapped the real "Facial" heading in #facial-1. Hide its contents but
   keep #facial itself in the DOM so `/menu/#facial`-style anchor links still
   scroll to the right place. */
.sd[data-s-3984b2a5-fb5b-4ce9-b976-54413c9d0496],
.sd[data-s-a174434b-7cd4-4f33-8f3b-6df9f65b4ba8] {
  display: none;
}

/* menu page "Combination" section: flex-direction switches to row at the
   840px breakpoint but is never switched back to column at 540px, so its
   heading/table children lay out side-by-side and the section's own box
   collapses to the height of one row. The breadcrumb that follows it in the
   DOM then renders overlapping the pricing table. */
@media screen and (max-width: 540px) {
  .sd[data-s-4f0a3dfc-7502-4513-b8e7-426cb381232a] {
    flex-direction: column !important;
  }
}

/* menu page: the wrapper around Body/Head + Facial + Combination has a
   hardcoded pixel height captured from STUDIO's editor instead of height:auto,
   so it no longer matches its children's real height once the layout fixes
   above change how tall they render. That mismatch pushed the breadcrumb
   after it up into the Combination pricing table. Let it size to content. */
.sd[data-s-88717810-13e4-4e0f-87be-cd78821e19c7] {
  height: auto !important;
}

/* menu page: the page's root canvas had a stray 430px of bottom padding at
   the mobile breakpoint, leaving a large blank gap after the footer. */
@media screen and (max-width: 540px) {
  .sd[data-s-ee6ea964-0df1-4083-8bb2-1fd36ab856b1] {
    padding-bottom: 0 !important;
  }
}

/* menu page: #bodyhead's mobile-breakpoint padding-top was mis-captured as
   120px (duplicating the tablet value) instead of the live site's actual
   16px, leaving a large blank gap before "Body / Head". */
@media screen and (max-width: 540px) {
  .sd[data-s-aebe09c1-4e04-43f9-861d-0cd8b1aa758a] {
    padding-top: 16px !important;
  }
}

/* menu page: this "スクロール" hint's sibling (the pregnancy-notice text) is
   absolutely positioned elsewhere, so on mobile the hint rendered floating
   alone in blank space. The live site doesn't show this element at all
   (it isn't in its DOM), so hide it here too rather than trying to re-attach
   it to whatever it originally hinted at. */
.sd[data-s-fb677e64-8fee-4d17-9c96-9f8a095b56cd] {
  display: none !important;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.4, 0.4, 0, 1), transform 0.9s cubic-bezier(0.4, 0.4, 0, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-type="carousel"] {
  justify-content: flex-start !important;
  isolation: isolate;
}
[data-type="carousel"] > div {
  transition: transform 1000ms cubic-bezier(0.4, 0.4, 0, 1) !important;
}
[data-type="carousel"] .image {
  z-index: 0 !important;
}
[data-type="carousel"] .image:before {
  z-index: 0 !important;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0.4, 0, 1);
}
.mobile-menu .material-icons {
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
.mobile-menu .fa-brands {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.mobile-menu__panel {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f3f1e9;
  box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.2);
  padding-top: 60px;
}
.mobile-menu__header {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #1d465f;
  border-bottom: 1px solid #333333;
}
.mobile-menu__header img {
  width: 107px;
  height: auto;
}
.mobile-menu__close {
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  color: #fffef2;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
}
.mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px;
  border-bottom: 1px solid #333333;
  color: #1d465f;
  font-family: var(--s-font-6c8feba7);
  font-size: 16px;
  letter-spacing: 0.2em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.4, 0.4, 0, 1), transform 0.5s cubic-bezier(0.4, 0.4, 0, 1),
    background 0.2s, color 0.2s;
}
.mobile-menu__item i {
  font-size: 18px;
  color: #1d465f;
  transition: color 0.2s;
}
.mobile-menu.is-open .mobile-menu__item {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu__item:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu__item:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu__item:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu__item:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu__item:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu__item:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu__item:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu__item:hover,
.mobile-menu__item:active {
  background: #1d465f;
  color: #fffef2;
}
.mobile-menu__item:hover i,
.mobile-menu__item:active i {
  color: #fffef2;
}
.mobile-menu__footer {
  background: #1d465f;
  color: #ffffff;
  padding: 45px 20px;
}
.mobile-menu__footer img {
  width: 240px;
  max-width: 100%;
  height: auto;
}
.mobile-menu__footer a,
.mobile-menu__footer p {
  color: #ffffff;
  font-family: var(--s-font-6c8feba7);
  font-size: 14px;
  line-height: 1.8;
  text-decoration: none;
}
.mobile-menu__address {
  display: block;
  margin: 24px 0 0 0;
}
.mobile-menu__tel {
  margin: 8px 0 0 0;
}
.mobile-menu__instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0 0;
  font-size: 16px;
}
body.mobile-menu-open {
  overflow: hidden;
}
@media screen and (min-width: 841px) {
  .mobile-menu {
    display: none;
  }
}

@media screen and (max-width: 540px) {
  .sd[data-s-d8b241fb-ec0f-4807-9ae9-9ea3c413f7c2] {
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* The desktop navigation's Therapist label needs slightly more room than its
   fixed STUDIO width once the intended Mincho font has loaded. */
.sd[data-s-8bdf6de2-733b-4e1b-912a-89869fef96f6] {
  white-space: nowrap;
}