/* Header — home.jpg の軽く清潔なナビゲーションに統一 */
.header-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

html,
body { overflow-x: clip; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 200px;
  border-bottom: 1px solid #e5f2f4;
  background:
    radial-gradient(ellipse at 18% -35%, rgba(116, 213, 207, .24) 0 34%, transparent 35%),
    radial-gradient(ellipse at 72% -45%, rgba(112, 204, 222, .22) 0 38%, transparent 39%),
    linear-gradient(135deg, #f5fcfc 0%, #eaf9fa 48%, #f8fcfb 100%);
  box-shadow: 0 5px 24px rgba(31, 83, 103, .045);
  backdrop-filter: blur(14px);
}

.site-header-inner {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 112px 88px;
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-inline: auto;
}

.site-header-inner::before,
.site-header-inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 48% 52% 44% 56%;
}

.site-header-inner::before {
  top: 18px;
  left: 43%;
  width: 150px;
  height: 72px;
  opacity: .24;
  background:
    radial-gradient(circle at 12% 25%, #48bdc8 0 3px, transparent 3.5px),
    radial-gradient(circle at 31% 66%, #48bdc8 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 22%, #75d5c0 0 3px, transparent 3.5px),
    radial-gradient(circle at 85% 58%, #75d5c0 0 2px, transparent 2.5px);
}

.site-header-inner::after {
  top: 26px;
  right: 36%;
  width: 90px;
  height: 54px;
  opacity: .13;
  background: repeating-radial-gradient(ellipse at center, #55bfc8 0 2px, transparent 2.5px 12px);
}

.logo,
.logo .custom-logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding-left: clamp(28px, 4vw, 76px);
  padding-right: 24px;
}

.logo img,
.logo .custom-logo {
  width: 350px;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 1121px) {
  .site-header:not(.is-compact) .logo img,
  .site-header:not(.is-compact) .logo .custom-logo {
    width: 430px;
    max-width: 430px;
    max-height: 82px;
    filter:
      drop-shadow(.65px 0 0 rgba(255, 255, 255, .68))
      drop-shadow(-.65px 0 0 rgba(255, 255, 255, .68))
      drop-shadow(0 .65px 0 rgba(255, 255, 255, .62))
      drop-shadow(0 -.65px 0 rgba(255, 255, 255, .62))
      drop-shadow(0 3px 6px rgba(28, 102, 126, .1));
  }
}

.gnav {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  height: 88px;
  margin: 0;
  background:
    radial-gradient(circle at 8% 45%, rgba(89, 194, 200, .12) 0 2px, transparent 2.5px),
    radial-gradient(circle at 92% 28%, rgba(244, 130, 157, .11) 0 2px, transparent 2.5px),
    linear-gradient(180deg, rgba(239,250,251,.92) 0%, rgba(226,246,248,.96) 100%);
  border-top: 1px solid #e1eef0;
  border-bottom: 1px solid #dfedef;
}

.gnav::before,
.gnav::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 110px;
  height: 18px;
  opacity: .25;
  background: radial-gradient(ellipse at center, #5cc8cf 0 2px, transparent 2.5px) 0 0 / 18px 12px;
  transform: rotate(-3deg);
}
.gnav::before { left: 4vw; bottom: 5px; }
.gnav::after { right: 4vw; top: 6px; transform: rotate(3deg); }

.gnav__list,
.gnav__submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnav__list {
  position: relative;
  z-index: 1;
  justify-content: center;
  width: calc(100% - clamp(28px, 3vw, 64px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0;
  height: 88px;
}

.gnav__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 88px;
}

.gnav__item::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 0;
  width: 2px;
  background: radial-gradient(circle, rgba(25, 112, 137, .52) 1.1px, transparent 1.3px) center top / 2px 7px repeat-y;
}

.gnav__item:last-child::after {
  content: "";
  position: absolute;
  top: 27px;
  right: 0;
  bottom: 27px;
  width: 2px;
  background: radial-gradient(circle, rgba(25, 112, 137, .52) 1.1px, transparent 1.3px) center top / 2px 7px repeat-y;
}
.gnav__parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.gnav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 88px;
  padding: 0 4px;
  color: #173c72;
  font-size: clamp(14px, 1.18vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: clamp(.06em, .11vw, .13em);
  white-space: nowrap;
}

.gnav__text { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.gnav__label { display: block; }
.gnav__en {
  display: block;
  color: #199fc5;
  font-size: clamp(8px, .66vw, 10px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: clamp(.16em, .2vw, .28em);
}

/* 完成案のPCナビには大きなイラストアイコンを置かない */
.gnav__link .gnav__icon { display: none; }

.gnav__link::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 7px;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  background: #21bcc5;
  transition: right .22s ease, left .22s ease;
}

.gnav__item:hover .gnav__link::after,
.gnav__item:focus-within .gnav__link::after {
  right: 0;
  left: 0;
}

.gnav__submenu-button {
  position: relative;
  top: -11px;
  right: auto;
  flex: 0 0 auto;
  width: 8px;
  height: 12px;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  color: #21bcc5;
  background: transparent;
  cursor: pointer;
}

.gnav__submenu-button svg {
  width: 6px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: .28;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gnav__submenu {
  position: absolute;
  top: calc(100% - 12px);
  left: 50%;
  z-index: 10;
  width: max-content;
  min-width: 230px;
  padding: 10px;
  border: 1px solid #e4f1f3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 18px 46px rgba(35, 77, 97, .13);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.gnav__item--has-child:hover > .gnav__submenu,
.gnav__item--has-child:focus-within > .gnav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.gnav__submenu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 10px;
  color: #244671;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.gnav__submenu a:hover,
.gnav__submenu a:focus-visible {
  color: #159fa9;
  background: #effafb;
}

.gnav__submenu-item--separator {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(36, 70, 113, .14);
}

.gnav__submenu-icon,
.gnav__contact-icon,
.header-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.gnav__submenu-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #53c7ce;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-btns {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: stretch;
  grid-column: 3;
  grid-row: 1;
  position: relative;
  z-index: 2;
  justify-self: end;
  align-self: center;
  gap: 8px;
  height: 96px;
  margin-left: 0;
  margin-right: 12px;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.tel-btn,
.reserve-btn,
.medical-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  font-size: 0;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  transition: filter .22s ease;
}

.tel-btn img,
.reserve-btn img,
.medical-form-btn img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: contain;
}

.tel-btn:hover,
.reserve-btn:hover,
.medical-form-btn:hover {
  transform: none;
  filter: brightness(1.035);
}

.tel-btn {
  width: 286px;
  min-width: 286px;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.tel-btn small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, .88);
  font-size: 10px;
  font-weight: 500;
}

.tel-btn strong { font-size: 21px; letter-spacing: .045em; }

.reserve-btn {
  width: 166px;
  min-width: 166px;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  letter-spacing: .05em;
}

.reserve-btn small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .9);
  font-size: 10px;
  font-weight: 500;
}
.reserve-btn strong { display: block; font-size: 18px; }

.medical-form-btn {
  display: inline-flex;
  width: 150px;
  min-width: 150px;
  height: 96px;
  align-items: center;
  justify-content: center;
  transition: filter .22s ease;
}

.medical-form-btn img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: contain;
}

.header-btn__icon svg,
.gnav__contact-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-button,
.gnav__contact { display: none; }

.menu-button {
  position: relative;
  z-index: 1002;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #d8edef;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.menu-button span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: #1eb4bd;
  transition: top .22s ease, transform .22s ease, opacity .22s ease;
}
.menu-button span:nth-child(1) { top: 15px; }
.menu-button span:nth-child(2) { top: 21px; }
.menu-button span:nth-child(3) { top: 27px; }
.menu-button.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity: 0; }
.menu-button.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* スクロール後：メニューと予約導線を1段へまとめる */
@media (min-width: 1121px) {
  .site-header,
  .site-header-inner,
  .site-header .logo,
  .site-header .gnav,
  .site-header .gnav__list,
  .site-header .gnav__item,
  .site-header .gnav__link,
  .site-header .header-btns,
  .site-header .tel-btn,
  .site-header .reserve-btn,
  .site-header .medical-form-btn,
  .site-header .tel-btn img,
  .site-header .reserve-btn img,
  .site-header .medical-form-btn img {
    transition: height .32s ease, width .32s ease, min-width .32s ease, padding .32s ease, opacity .22s ease, transform .32s ease;
  }

  .site-header.is-compact { height: 88px; box-shadow: 0 8px 28px rgba(33, 79, 98, .1); }

  .site-header.is-compact .site-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 88px;
    height: 88px;
    background: #f7fcfd;
  }

  .site-header.is-compact .site-header-inner::before,
  .site-header.is-compact .site-header-inner::after {
    opacity: 0;
  }

  .site-header.is-compact .logo {
    display: none;
  }

  .site-header.is-compact .gnav {
    grid-column: 1;
    grid-row: 1;
    height: 88px;
    border-top: 0;
    border-bottom: 0;
    min-width: 0;
  }

  .site-header.is-compact .gnav__list { justify-content: flex-start; width: 100%; height: 88px; }
  .site-header.is-compact .gnav__item { flex: 1 1 0; min-width: 0; }
  .site-header.is-compact .gnav__parent { width: 100%; min-width: 0; }
  .site-header.is-compact .gnav__item { height: 88px; }
  .site-header.is-compact .gnav__item::before,
  .site-header.is-compact .gnav__item:last-child::after { top: 27px; bottom: 27px; }

  .site-header.is-compact .gnav__link {
    flex: 0 1 auto;
    width: auto;
    height: 88px;
    padding-inline: 3px;
    font-size: clamp(11px, .95vw, 15px);
    letter-spacing: clamp(.03em, .06vw, .08em);
  }

  .site-header.is-compact .gnav__en { font-size: clamp(7px, .58vw, 9px); }
  .site-header.is-compact .gnav__submenu-button { margin-left: 1px; }

  .site-header.is-compact .header-btns {
    grid-column: 2;
    grid-row: 1;
    height: 88px;
    gap: 6px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 0;
    box-shadow: none;
  }

  .site-header.is-compact .tel-btn { width: 220px; min-width: 220px; height: 88px; }
  .site-header.is-compact .tel-btn img { width: 220px; min-width: 220px; height: 88px; }
  .site-header.is-compact .reserve-btn { width: 126px; min-width: 126px; height: 88px; }
  .site-header.is-compact .reserve-btn img { width: 126px; min-width: 126px; height: 88px; }
  .site-header.is-compact .medical-form-btn { width: 114px; min-width: 114px; height: 88px; }
  .site-header.is-compact .medical-form-btn img { width: 114px; min-width: 114px; height: 88px; }
}

/* 追随ヘッダーは導線を段階的に整理し、ナビの文字幅を確保する。 */
@media (min-width: 1121px) and (max-width: 1500px) {
  .site-header.is-compact .medical-form-btn {
    display: none;
  }

  .site-header.is-compact .gnav__link {
    padding-inline: 6px;
    font-size: clamp(12px, 1.02vw, 15px);
  }
}

@media (min-width: 1121px) and (max-width: 1280px) {
  .site-header.is-compact .reserve-btn {
    display: none;
  }

  .site-header.is-compact .header-btns {
    margin-left: 10px;
  }
}

@media (max-width: 1120px) {
  /* backdrop-filter は fixed 子要素の包含ブロックを作るため、
     SPメニューがヘッダー高の中だけに閉じ込められないよう解除する。 */
  .site-header,
  .site-header.site-header--lower-visual {
    height: 72px;
    isolation: isolate;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header-inner { z-index: 1; display: flex; width: calc(100% - 36px); height: 72px; }
  .logo img, .logo .custom-logo { width: min(340px, 48vw); max-height: 50px; }
  .header-btns { display: none; }
  .menu-button { display: block; }

  .gnav {
    position: absolute;
    top: 72px;
    right: -18px;
    bottom: auto;
    z-index: 1001;
    width: min(430px, 100vw);
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    margin: 0;
    padding: 18px 22px 100px;
    overflow-y: auto;
    background: #fff;
    box-shadow: -14px 20px 42px rgba(35, 77, 97, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
  }
  .gnav::before, .gnav::after { display: none; }
  .gnav.is-open { opacity: 1; visibility: visible; transform: translateX(0); }
  .menu-button { z-index: 1002; pointer-events: auto; touch-action: manipulation; }
  .site-header .gnav {
    border-color: #e6f0f2;
    background: #fff !important;
    backdrop-filter: none;
  }
  .gnav__list { display: block; width: 100%; height: auto; }
  .gnav__item { display: block; height: auto; border-bottom: 1px solid #e9f2f4; }
  .gnav__item::before, .gnav__item:last-child::after { display: none; }
  .gnav__parent { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; }
  .gnav__link { height: auto; min-height: 58px; padding: 14px 6px; font-size: 16px; letter-spacing: .06em; }
  .gnav__link::after { display: none; }
  .gnav__link .gnav__icon { display: none; }
  .gnav__submenu-button {
    position: relative;
    top: auto;
    right: auto;
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0 6px;
    place-items: center;
    border-radius: 50%;
    color: #159fa9;
    background: #eaf9fa;
  }
  .gnav__submenu-button svg { display: none; }
  .gnav__submenu-button::before,
  .gnav__submenu-button::after {
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }
  .gnav__submenu-button::after { transform: rotate(90deg); }
  .gnav__submenu-button[aria-expanded="true"]::after { transform: rotate(0); }

  .gnav__submenu {
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    padding: 0 8px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #f5fbfc;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .3s ease, padding .3s ease;
  }
  .gnav__item--has-child:hover > .gnav__submenu,
  .gnav__item--has-child:focus-within > .gnav__submenu { transform: none; }
  .gnav__item.is-submenu-open > .gnav__submenu { max-height: 700px; padding: 4px 8px 10px; }
  .gnav__submenu a { padding: 8px 10px; font-size: 14px; line-height: 1.45; }

  .gnav__contact { display: grid; gap: 10px; margin-top: 24px; }
  .gnav__contact-tel,
  .gnav__contact-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 18px;
    border-radius: 999px;
  }
  .gnav__contact-tel { border: 1px solid #8bd7dc; color: #159fa9; background: #fff; }
  .gnav__contact-tel small { display: block; font-size: 9px; }
  .gnav__contact-tel strong { display: block; font-size: 18px; }
  .gnav__contact-reserve { color: #fff; background: #f25f87; font-size: 15px; font-weight: 700; }
  body.is-menu-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .site-header,
  .site-header.site-header--lower-visual { height: 66px; }
  .site-header-inner { width: calc(100% - 24px); }
  .logo img, .logo .custom-logo { width: min(176px, 58vw); max-height: 45px; }
  .gnav {
    top: 66px;
    right: -12px;
    height: calc(100vh - 66px);
    height: calc(100dvh - 66px);
    padding: 14px 16px 100px;
  }
  .menu-button { width: 42px; height: 42px; }
  .menu-button span { left: 12px; }
  .menu-button span:nth-child(1) { top: 13px; }
  .menu-button span:nth-child(2) { top: 19px; }
  .menu-button span:nth-child(3) { top: 25px; }
  .menu-button.is-open span:nth-child(1),
  .menu-button.is-open span:nth-child(3) { top: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .gnav, .gnav__submenu, .menu-button span, .gnav__link::after { transition: none; }
}

/* 下層ページのロゴ・ナビを、ページタイトルと同じ写真の上に重ねる。 */
.site-header.site-header--lower-visual {
  position: absolute;
  width: 100%;
  border-bottom-color: rgba(255,255,255,.54);
  background: rgba(255,255,255,.34);
  box-shadow: none;
  backdrop-filter: blur(5px);
}

.site-header.site-header--lower-visual .gnav {
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.58);
}

/* 下層ページでも、スクロール後の1段ナビは画面上部へ固定する。 */
@media (min-width: 1121px) {
  .site-header.site-header--lower-visual.is-compact {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f7fcfd;
    box-shadow: 0 8px 28px rgba(33, 79, 98, .1);
    backdrop-filter: blur(14px);
  }

  .site-header.site-header--lower-visual.is-compact .gnav {
    background: #f7fcfd;
    border-color: transparent;
  }
}