/* ---- base (unchanged from the original design export) ---- */
*{box-sizing:border-box}
body{margin:0;background:#F7F4EF;color:#2A2A28;font-family:'Zen Kaku Gothic New',sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#1F5FA8;text-decoration:none}
a:hover{color:#164A85}
img{max-width:100%}

/* ---- FAQ accordion (native <details>, no JavaScript) ---- */
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq .faq-mark::after{content:"＋"}
.faq[open] .faq-mark::after{content:"－"}

/* ---- responsive ---- */
/* Header: keep the sticky bar compact on phones by letting the nav scroll
   sideways on its own row instead of wrapping to three stacked lines. */
/* The desktop header only fits on one line from ~960px up; between 700 and 960
   it wrapped to two rows and stood 144px tall. Use the compact bar (107px)
   everywhere below 960px instead. */
@media (max-width:959px){
  .site-head-inner{padding:12px 16px!important;gap:12px!important}
}

/* 769-959px: the five links still fit on their own row, so keep the two-row
   compact bar. Below 769px they no longer fit (アクセス・施術時間 was cut off
   at 390px), so that range gets the drawer further down instead. */
@media (min-width:769px) and (max-width:959px){
  .site-nav{order:3;width:100%;margin-left:0!important;flex-wrap:nowrap!important;overflow-x:auto;gap:18px!important;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{font-size:12.5px!important;white-space:nowrap}
  .head-cta{margin-left:auto}
}

/* ---- hamburger drawer (<=768px) ---- */
/* The toggle, the scrim and the drawer only exist below 769px; above it the
   header is exactly the original design. Only one of .site-nav / .nav-drawer
   is ever displayed, so the duplicated links never both reach the a11y tree. */
.nav-toggle{display:none;position:relative;flex-shrink:0;margin-left:auto;width:42px;height:42px;padding:0;border:1px solid #C9C3BB;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:1px;background:#2F4557;transition:transform .25s ease,opacity .2s ease}
.nav-scrim,.nav-drawer{display:none}

@media (max-width:768px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none!important}
  /* the header LINE button is dropped on phones - the fixed one at the bottom
     right is the only booking button at this width */
  .head-cta{display:none!important}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:80;background:rgba(47,69,87,.42);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}

  .nav-drawer{display:block;position:fixed;top:0;right:0;z-index:90;width:min(78vw,300px);height:100%;overflow-y:auto;padding:82px 22px 40px;background:#F7F4EF;border-left:1px solid #C9C3BB;box-shadow:-12px 0 32px rgba(18,35,63,.14);transform:translateX(100%);visibility:hidden;transition:transform .28s ease,visibility .28s ease}
  body.nav-open .nav-drawer{transform:translateX(0);visibility:visible}
  .nav-drawer a{display:block;font-size:14px;letter-spacing:.1em;color:#6B6660;text-decoration:none;padding:17px 2px;border-bottom:1px solid #E1DBD3;white-space:nowrap}
  /* current page: the desktop gold underline becomes a gold left rule so the
     row separators stay even */
  .nav-drawer a[aria-current="page"]{color:#2F4557;padding-left:12px;box-shadow:inset 3px 0 0 #C9A87C}

  /* the closed drawer parks 300px to the right of the viewport; clip (not
     hidden) keeps that off the scroll width without turning the root into a
     scroll container, which would break the sticky header */
  html{overflow-x:clip}
  /* lift the sticky bar over the scrim so the X stays tappable, and stop the
     page behind the drawer from scrolling */
  body.nav-open{overflow:hidden}
  body.nav-open .site-head{z-index:100!important}

  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* Below 376px the viewport is narrower than the widest minmax() track
   (320px + 2x28px padding), which pushed the page 1px into horizontal
   scroll. Every one of these grids is already a single column at this
   width, so pinning them to 1fr fixes the overflow without moving anything. */
@media (max-width:420px){
  [style*="auto-fit"]{grid-template-columns:1fr!important}
}

/* Reserve room under the footer so the fixed LINE button never sits on top
   of the copyright line on phones. */
/* The button is fixed at every width, so the gutter has to exist at every
   width too — above 600px it was overlapping the 開院 line on the right. */
.foot-bottom{padding-bottom:88px!important}

/* ---- hover states (inline styles require !important) ---- */
.hv1:hover{color:#2F4557!important;border-bottom:1px solid #C9A87C!important;}
.hv2:hover{background:#05B34D!important;}
.hv3:hover{border-color:#D98B95!important;color:#2F4557!important;}
.hv4:hover{border-color:#1F5FA8!important;}
.hv5:hover{background:#2F4557!important;color:#F7F4EF!important;}
.hv6:hover{background:#E8A0A8!important;color:#2F4557!important;}
.hv7:hover{color:#FFFFFF!important;}
.hv8:hover{background:#EDE7DD!important;}
.hv9:hover{background:#05B34D!important;color:#fff!important;}