/* hb header 2026-10-09 */
/* B案ヘッダー（Figma PC 3587:5257 上端 76px / SP 3587:6125 上端 70px）。全ページ共通・絶対パス。
   数値は Figma の px。PC は 1920 基準、SP（767px 以下）は 390 基準で --hb-u に掛ける。 */

.hb-header {
  --hb-u: min(1px, calc(100vw / 1920));
  --hb-c-text:     #333333;
  --hb-c-muted:    #666666;
  --hb-c-gold:     #B2995F;
  --hb-c-orange:   #F17200;
  --hb-c-navy:     #244496;
  --hb-c-beige:    #F5F0EB;
  --hb-c-line:     #E2D8C2;
  --hb-c-white:    #FFFFFF;
  --hb-c-band-pc-from: #AF8B46;
  --hb-c-band-pc-to:   #876C2F;
  --hb-c-band-sp-from: #8E6B26;
  --hb-c-band-sp-to:   #5C4309;
  --hb-c-panel-tri: rgba(255, 255, 255, .8);
  --hb-ff-serif: "Noto Serif JP", serif;
  --hb-ff-sans:  "Noto Sans JP", sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(76 * var(--hb-u));
  z-index: 20;
  font-feature-settings: normal;
  line-height: 1;
}
.hb-header .hb-sp { display: none; }
.hb-header,
.hb-header *,
.hb-header *::before,
.hb-header *::after { box-sizing: border-box; }

/* ---------- PC ---------- */
.hb-beige {
  position: absolute;
  left: calc(388.72 * var(--hb-u));
  top: calc(14 * var(--hb-u));
  width: calc(385.5 * var(--hb-u));
  height: calc(51.609 * var(--hb-u));
  border-radius: calc(4 * var(--hb-u));
  background: var(--hb-c-beige);
}

.hb-logo {
  position: absolute;
  display: block;
  left: calc(118.66 * var(--hb-u));
  top: calc(6.72 * var(--hb-u));
  width: calc(257.494 * var(--hb-u));
  height: calc(37.7188 * var(--hb-u));
}
.hb-logo img {
  position: absolute;
  display: block;
  max-width: none;
}
.hb-logo-mark {
  left: 0;
  top: 0;
  width: calc(31.3015 * var(--hb-u));
  height: calc(37.7188 * var(--hb-u));
}
.hb-logo-text {
  left: calc(46.65 * var(--hb-u));
  top: calc(1.92 * var(--hb-u));
  width: calc(210.844 * var(--hb-u));
  height: calc(34.0988 * var(--hb-u));
}

.hb-pill {
  position: absolute;
  left: calc(384.22 * var(--hb-u));
  top: calc(5.32 * var(--hb-u));
  width: calc(125 * var(--hb-u));
  height: calc(21 * var(--hb-u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--hb-u)) calc(10 * var(--hb-u));
  border: 1px solid var(--hb-c-gold);
  border-radius: calc(20 * var(--hb-u));
  background: var(--hb-c-white);
}
.hb-pill-text,
.hb-band-text {
  display: block;
  flex: none;
  font-family: var(--hb-ff-serif);
  font-weight: 500;
  font-size: calc(12 * var(--hb-u));
  line-height: 1.36;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.hb-pill-text { color: var(--hb-c-gold); }

.hb-band {
  position: absolute;
  left: calc(121.22 * var(--hb-u));
  top: calc(47.61 * var(--hb-u));
  width: calc(251 * var(--hb-u));
  height: calc(17 * var(--hb-u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--hb-u)) calc(10 * var(--hb-u));
  border-radius: calc(2 * var(--hb-u));
  background: linear-gradient(90deg, var(--hb-c-band-pc-from), var(--hb-c-band-pc-to));
}
.hb-band-text { color: var(--hb-c-white); }

.hb-clinics {
  position: absolute;
  left: calc(398.71 * var(--hb-u));
  top: calc(30.58 * var(--hb-u));
  font-family: var(--hb-ff-sans);
  font-weight: 300;
  font-size: calc(14 * var(--hb-u));
  line-height: 1.2;
  color: var(--hb-c-muted);
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ナビ（3587:5374）: 線（幅 0・高 41.5）→ gap16 → 文字 の並び */
.hb-gnav {
  position: absolute;
  left: calc(791.2 * var(--hb-u));
  top: calc(14 * var(--hb-u));
}
.hb-gnav-list,
.hb-gnav-item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--hb-u));
}
.hb-gnav-item {
  position: relative;
  --pcnav-u: min(1px, 0.09259259vw);
}
.hb-gnav-line {
  position: relative;
  flex: none;
  width: 0;
  height: calc(41.5 * var(--hb-u));
}
.hb-gnav-line > img {
  position: absolute;
  display: block;
  max-width: none;
  top: calc(20.25 * var(--hb-u));
  width: calc(41.5 * var(--hb-u));
  height: calc(1 * var(--hb-u));
  transform: rotate(-90deg);
}
.hb-gnav-line--a > img { left: calc(-20.75 * var(--hb-u)); }
.hb-gnav-line--b > img { left: calc(-21.25 * var(--hb-u)); }
.hb-gnav-link {
  position: relative;
  display: block;
  font-family: var(--hb-ff-serif);
  font-weight: 300;
  font-size: min(calc(15 * var(--hb-u)), calc(13.8333px + 0.0608vw));
  line-height: 1.6;
  color: var(--hb-c-text);
  text-align: center;
  white-space: nowrap;
}

/* ホバーのメガメニュー（現行 01_header.css の .fv-gnav-item 系を移植）。
   三角の先端は 69.16u＝現行 A の 2 行項目（お悩み・医院一覧）の実測先端と同じ位置（B のリンク下端 62u + 7.16u）。 */
.hb-gnav-item--know > .hb-gnav-link::after,
.hb-gnav-item--trouble > .hb-gnav-link::after,
.hb-gnav-item--clinics > .hb-gnav-link::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(7.16 * var(--hb-u));
  width: 0;
  height: 0;
  border-left: calc(24 * var(--pcnav-u)) solid transparent;
  border-right: calc(24 * var(--pcnav-u)) solid transparent;
  border-bottom: calc(24 * var(--pcnav-u)) solid var(--hb-c-panel-tri);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  pointer-events: none;
}
.hb-gnav-item:hover > .hb-gnav-link::after,
.hb-gnav-item:focus-within > .hb-gnav-link::after {
  opacity: 1;
  visibility: visible;
}
.hb-gnav-item > .pcnav-panel {
  position: fixed;
  top: calc(50 * var(--hb-u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}
.hb-gnav-item:hover > .pcnav-panel,
.hb-gnav-item:focus-within > .pcnav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* TEL / WEB / 相談（1384〜1920 の 536 幅を右端に揃える） */
.hb-cta {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(536 * var(--hb-u));
  height: calc(76 * var(--hb-u));
}
.hb-tel {
  position: absolute;
  display: block;
  left: 0;
  top: calc(-2 * var(--hb-u));
  width: calc(159 * var(--hb-u));
  height: calc(77 * var(--hb-u));
  border: 1px solid var(--hb-c-line);
  background: var(--hb-c-white);
}
.hb-tel-col {
  position: absolute;
  left: calc(6 * var(--hb-u) - 1px);
  top: calc(16 * var(--hb-u) - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 * var(--hb-u));
}
.hb-tel-label {
  display: block;
  font-family: var(--hb-ff-sans);
  font-weight: 300;
  font-size: calc(14 * var(--hb-u));
  line-height: 1;
  letter-spacing: calc(0.84 * var(--hb-u));
  color: var(--hb-c-muted);
  white-space: nowrap;
}
.hb-tel-row,
.hb-btn-row {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  line-height: 0;
}
.hb-tel-row > *,
.hb-btn-row > * { grid-area: 1 / 1; }
.hb-tel-num {
  display: block;
  margin-left: calc(11.8 * var(--hb-u));
  font-family: var(--hb-ff-serif);
  font-weight: 400;
  font-size: min(calc(21 * var(--hb-u)), calc(12.8333px + 0.4253vw));
  line-height: 1;
  color: var(--hb-c-orange);
  white-space: nowrap;
}
.hb-tel-icon {
  display: block;
  max-width: none;
  margin-top: calc(5.67 * var(--hb-u));
  width: calc(12.694 * var(--hb-u));
  height: calc(15.327 * var(--hb-u));
}
.hb-corner {
  position: absolute;
  display: block;
  max-width: none;
}
.hb-corner--tel {
  left: calc(136.77 * var(--hb-u) - 1px);
  top: calc(54.78 * var(--hb-u) - 1px);
  width: calc(14.998 * var(--hb-u));
  height: calc(14.998 * var(--hb-u));
}
.hb-btn {
  position: absolute;
  top: 0;
  width: calc(190 * var(--hb-u));
  height: calc(75 * var(--hb-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(9 * var(--hb-u)) calc(48 * var(--hb-u)) calc(12 * var(--hb-u));
}
.hb-btn--web { left: calc(156 * var(--hb-u)); background: var(--hb-c-navy); }
.hb-btn--consult { left: calc(346 * var(--hb-u)); background: var(--hb-c-orange); }
.hb-btn > .hb-corner {
  left: calc(170 * var(--hb-u));
  top: calc(52.78 * var(--hb-u));
  width: calc(15 * var(--hb-u));
  height: calc(15 * var(--hb-u));
}
.hb-btn-col {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7 * var(--hb-u));
}
.hb-btn-pill {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(150 * var(--hb-u));
  height: calc(22 * var(--hb-u));
  padding: calc(7 * var(--hb-u)) calc(10 * var(--hb-u));
  border-radius: calc(4 * var(--hb-u));
  background: var(--hb-c-white);
  font-family: var(--hb-ff-sans);
  font-weight: 400;
  font-size: calc(13 * var(--hb-u));
  line-height: 1;
  white-space: nowrap;
}
.hb-btn--web .hb-btn-pill { color: var(--hb-c-navy); }
.hb-btn--consult .hb-btn-pill { color: var(--hb-c-orange); }
.hb-btn-text {
  display: block;
  font-family: var(--hb-ff-serif);
  font-weight: 500;
  font-size: min(calc(17 * var(--hb-u)), calc(13.5000px + 0.1823vw));
  line-height: 1;
  color: var(--hb-c-white);
  text-align: center;
  white-space: nowrap;
}
.hb-btn--web .hb-btn-text { margin-left: calc(23.38 * var(--hb-u)); }
.hb-btn--consult .hb-btn-text { margin-left: calc(10.53 * var(--hb-u)); }
.hb-trk-a { letter-spacing: calc(-3.23 * var(--hb-u)); }
.hb-trk-b { letter-spacing: calc(-5.95 * var(--hb-u)); }
.hb-trk-c { letter-spacing: calc(-1.7 * var(--hb-u)); }
.hb-btn-icon {
  display: block;
  max-width: none;
}
.hb-btn-icon--web {
  margin-top: calc(1.24 * var(--hb-u));
  width: calc(19.874 * var(--hb-u));
  height: calc(17.759 * var(--hb-u));
}
.hb-btn-icon--consult {
  margin-top: calc(1.01 * var(--hb-u));
  width: calc(12.451 * var(--hb-u));
  height: calc(17.52 * var(--hb-u));
}

.hb-menu { display: none; }

/* ---------- 追従ナビ（pcnav）のロゴ: 現行 .pcnav-logo 246.24×42.4 の枠に B ロゴを幅基準で収める ---------- */
.hb-pcnav-logo img {
  position: absolute;
  display: block;
  max-width: none;
}
.hb-pcnav-logo-mark {
  left: 0;
  top: calc(3.1649 * var(--pcnav-u));
  width: calc(29.9334 * var(--pcnav-u));
  height: calc(36.0703 * var(--pcnav-u));
}
.hb-pcnav-logo-text {
  left: calc(44.6111 * var(--pcnav-u));
  top: calc(5.001 * var(--pcnav-u));
  width: calc(201.6289 * var(--pcnav-u));
  height: calc(32.6085 * var(--pcnav-u));
}
/* pcnav のラベルを 1 行（お悩み・症状から探す／医院一覧・アクセス）にすると、現行の左右余白 10u では
   リストが右端の CTA（WEB 予約）に 24.6u 食い込む。左右余白を 6u にして、リスト右端〜CTA の間隔を
   ロゴ〜リストの間隔（14.77u）と同じ 14.94u にする（文字の大きさ・行の高さ・区切り線は現行のまま）。 */
.sec-pcnav .pcnav-link { padding: 0 calc(6 * var(--pcnav-u)); }

/* ---------- SP（390 基準） ---------- */
@media (max-width: 767px) {
  .hb-header {
    --hb-u: calc(100vw / 390);
    height: calc(70 * var(--hb-u));
  }
  .hb-header .hb-pc { display: none; }
  .hb-header .hb-sp { display: block; }

  .hb-logo {
    left: calc(4.5 * var(--hb-u));
    top: calc(5.67 * var(--hb-u));
    width: calc(201 * var(--hb-u));
    height: calc(29 * var(--hb-u));
    overflow: hidden;
  }
  .hb-logo-mark-sp {
    left: calc(0.804 * var(--hb-u));
    top: calc(-0.319 * var(--hb-u));
    width: calc(23.4695 * var(--hb-u));
    height: calc(28.2226 * var(--hb-u));
  }
  .hb-logo-text-sp {
    left: calc(33.788 * var(--hb-u));
    top: calc(1.099 * var(--hb-u));
    width: calc(158.075 * var(--hb-u));
    height: calc(25.513 * var(--hb-u));
  }

  .hb-header .hb-spband {
    position: absolute;
    left: calc(205 * var(--hb-u));
    top: calc(8.74 * var(--hb-u));
    width: calc(116 * var(--hb-u));
    height: calc(23 * var(--hb-u));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(7 * var(--hb-u)) calc(10 * var(--hb-u)) calc(8 * var(--hb-u));
    background: linear-gradient(90deg, var(--hb-c-band-sp-from), var(--hb-c-band-sp-to));
  }
  .hb-spband-text {
    display: block;
    flex: none;
    font-family: var(--hb-ff-serif);
    font-weight: 500;
    font-size: calc(12 * var(--hb-u));
    line-height: 1.36;
    color: var(--hb-c-white);
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .hb-trk-d { letter-spacing: calc(-3.68 * var(--hb-u)); }
  .hb-trk-e { letter-spacing: calc(-3.2 * var(--hb-u)); }
  .hb-trk-f { letter-spacing: calc(-5.6 * var(--hb-u)); }

  .hb-spbeige {
    position: absolute;
    left: calc(4.5 * var(--hb-u));
    top: calc(40.17 * var(--hb-u));
    width: calc(317 * var(--hb-u));
    height: calc(29.887 * var(--hb-u));
    border-radius: calc(2 * var(--hb-u));
    background: var(--hb-c-beige);
  }
  .hb-spclinics {
    position: absolute;
    left: calc(56.64 * var(--hb-u));
    top: calc(44.62 * var(--hb-u));
    font-family: var(--hb-ff-sans);
    font-weight: 300;
    font-size: calc(11 * var(--hb-u));
    line-height: 1.2;
    letter-spacing: calc(-0.11 * var(--hb-u));
    color: var(--hb-c-muted);
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .hb-spgroup {
    position: absolute;
    left: calc(28.29 * var(--hb-u));
    top: calc(44.62 * var(--hb-u));
    transform: translateX(-50%);
    font-family: var(--hb-ff-serif);
    font-weight: 500;
    font-size: calc(9 * var(--hb-u));
    line-height: 1.12;
    color: var(--hb-c-gold);
    text-align: center;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .hb-spgroup-num { font-size: calc(12 * var(--hb-u)); }
  .hb-spgroup-unit { font-size: calc(10 * var(--hb-u)); }
  .hb-spline {
    position: absolute;
    left: calc(51.26 * var(--hb-u));
    top: calc(43.74 * var(--hb-u));
    width: 0;
    height: calc(21.875 * var(--hb-u));
  }
  .hb-spline > img {
    position: absolute;
    display: block;
    max-width: none;
    left: calc(-10.4375 * var(--hb-u));
    top: calc(10.4375 * var(--hb-u));
    width: calc(21.875 * var(--hb-u));
    height: calc(1 * var(--hb-u));
    transform: rotate(90deg);
  }

  .hb-header .hb-menu {
    position: absolute;
    left: calc(345 * var(--hb-u));
    top: calc(24.92 * var(--hb-u));
    width: calc(37 * var(--hb-u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(9 * var(--hb-u));
  }
  .hb-menu-bars {
    position: relative;
    display: block;
    flex: none;
    width: calc(22.75 * var(--hb-u));
    height: calc(15.5 * var(--hb-u));
  }
  .hb-menu-bars > span {
    position: absolute;
    left: 0;
    width: calc(22.75 * var(--hb-u));
    height: calc(1.75 * var(--hb-u));
    background: var(--hb-c-muted);
  }
  .hb-menu-bars > span:nth-child(1) { top: 0; }
  .hb-menu-bars > span:nth-child(2) { top: calc(6.88 * var(--hb-u)); }
  .hb-menu-bars > span:nth-child(3) { top: calc(13.75 * var(--hb-u)); }
  .hb-menu-label {
    display: block;
    width: 100%;
    font-family: var(--hb-ff-sans);
    font-weight: 300;
    font-size: calc(13 * var(--hb-u));
    line-height: 1.2;
    color: var(--hb-c-muted);
    text-align: center;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

/* ---------- text-box-trim 非対応ブラウザ用: Chrome で trim 有無を実測した上下の差（u=1 の px）を負のマージンで再現 ---------- */
@supports not (text-box-trim: trim-both) {
  .hb-pill-text,
  .hb-band-text { margin-top: calc(-4.25 * var(--hb-u)); margin-bottom: calc(-3.3125 * var(--hb-u)); }
  .hb-clinics { margin-top: calc(-3.734 * var(--hb-u)); margin-bottom: calc(-2.797 * var(--hb-u)); }
  @media (max-width: 767px) {
    .hb-spband-text { margin-top: calc(-4.25 * var(--hb-u)); margin-bottom: calc(-3.3125 * var(--hb-u)); }
    .hb-spclinics { margin-top: calc(-2.9375 * var(--hb-u)); margin-bottom: calc(-2.1875 * var(--hb-u)); }
    .hb-spgroup { margin-top: calc(-1.4375 * var(--hb-u)); margin-bottom: calc(-2.078 * var(--hb-u)); }
    .hb-menu-label { margin-top: calc(-3.469 * var(--hb-u)); margin-bottom: calc(-2.594 * var(--hb-u)); }
  }
}