/* Navigation panel based on 00_menu_pc.psd. */
html { scrollbar-gutter: stable; }

.menu-shade {
 position: fixed;
 inset: 0;
 z-index: 90;
 background: transparent;
}

.site-menu {
 position: fixed;
 inset: 0 0 0 auto;
 z-index: 99;
 width: min(583px, 100%);
 height: 100dvh;
 overflow-x: hidden;
 overflow-y: auto;
 overscroll-behavior: contain;
 background: rgb(255 255 255 / 88%);
 padding: 130px 75px 88px 62px;
 color: #55594f;
 font-size: 18px;
 line-height: 1.8;
}

.menu-open .site-header { background: transparent; pointer-events: none; }
.menu-open .header-phone { opacity: .1; }
.menu-open .brand,
.menu-open .menu-toggle { pointer-events: auto; }

.site-menu ul { padding: 0; margin: 0; list-style: none; }
.site-menu .menu-list > li { position: relative; }
.site-menu .menu-list > li > a {
 display: flex;
 align-items: center;
 min-height: 55px;
 padding: 8px 0;
 font-size: inherit;
 line-height: 1.8;
 white-space: nowrap;
}
.site-menu .current-menu-item > a,
.site-menu a[aria-current="page"] { color: var(--pink); }

.site-menu .menu-item-has-children > a { width: 304px; }
.site-menu .menu-item-has-children > a::after {
 content: "";
 flex: 1;
 height: 1px;
 margin-left: 12px;
 background: #c3c6be;
}
.site-menu .sub-menu {
 position: absolute;
 z-index: 1;
 left: 314px;
 top: 0;
 width: max-content;
}
.site-menu .sub-menu a {
 display: flex;
 align-items: center;
 min-height: 55px;
 padding: 8px 0;
 font-size: inherit;
 line-height: 1.8;
 white-space: nowrap;
}

.menu-contact {
 display: flex;
 align-items: center;
 gap: 30px;
 margin-top: 34px;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--green);
 font-size: 24px;
 line-height: 1.4;
}
.menu-contact svg {
 width: 18px;
 height: 18px;
 fill: none;
 stroke: var(--green);
 stroke-width: 1.2;
}
.menu-phone { display: block; margin-top: 20px; }
.menu-phone small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.menu-phone-number {
 display: flex;
 align-items: center;
 white-space: nowrap;
 font-size: 48px;
 line-height: 1.2;
 letter-spacing: -.03em;
}
.menu-phone-number svg {
 width: 34px;
 height: 38px;
 margin-right: 5px;
 fill: none;
 stroke: currentColor;
 stroke-width: .85;
 flex-shrink: 0;
}
.menu-social { margin-top: 42px; }
.menu-instagram { display: inline-flex; color: var(--pink); }
.menu-instagram svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-instagram .instagram-dot { fill: currentColor; stroke: none; }

@media (max-width: 600px) {
 .site-menu { width: 100%; padding: 105px 25px 55px; font-size: 15px; }
 .site-menu .menu-list > li > a,
 .site-menu .sub-menu a { min-height: 50px; }
 .site-menu .menu-item-has-children > a { width: calc(100% - 135px); }
 .site-menu .sub-menu { left: calc(100% - 123px); }
 .menu-contact { margin-top: 30px; font-size: 22px; }
 .menu-phone-number { font-size: 40px; }
 .menu-phone-number svg { width: 29px; height: 34px; }
 .menu-social { margin-top: 35px; }
}

@media (max-width: 360px) {
 .site-menu { padding-left: 20px; padding-right: 20px; font-size: 14px; }
 .site-menu .menu-item-has-children > a { width: calc(100% - 126px); }
 .site-menu .sub-menu { left: calc(100% - 115px); }
 .menu-phone-number { font-size: 36px; }
}

/* Panel size from 00_menu_pc.psd: 632px wide, ends below the Instagram icon with a rounded corner. */
@media (min-width: 601px) {
 .site-menu {
  width: min(632px, 100%);
  bottom: auto;
  height: auto;
  max-height: 100dvh;
  padding-bottom: 60px;
  border-bottom-left-radius: 20px;
  background: rgb(255 255 255 / 90%);
 }
}

/* SP menu (00_menu_sp.psd): full-width panel, 18px items, sub-menu stacked under its parent. */
@media (max-width: 600px) {
 .site-menu {
  bottom: auto;
  height: auto;
  max-height: 100dvh;
  padding: 118px 40px 60px;
  font-size: 18px;
  background: rgb(255 255 255 / 90%);
 }
 .site-menu .menu-list > li > a { min-height: 55px; padding: 6px 0; }
 .site-menu .menu-item-has-children > a { width: auto; }
 .site-menu .menu-item-has-children > a::after { content: none; }
 .site-menu .sub-menu {
  position: static;
  width: auto;
  margin: -4px 0 6px 20px;
  padding-left: 20px;
  border-left: 1px solid #c3c6be;
  font-size: 16px;
 }
 .site-menu .sub-menu a { min-height: 40px; padding: 2px 0; }
 .menu-contact { margin-top: 26px; font-size: 24px; }
 .menu-phone-number { font-size: 45px; }
 .menu-social { margin-top: 24px; }
}

@media (max-width: 360px) {
 .site-menu { padding-left: 24px; padding-right: 24px; font-size: 16px; }
 .site-menu .menu-item-has-children > a { width: auto; }
 .menu-phone-number { font-size: 38px; }
}