@charset "UTF-8";
/* ==========================================================================
   ヘッダー「診療科目」メガメニュー（PC）
   - .l-header__nav.pc は 768px 未満で非表示のため、SP には影響しない
   - 開閉は :hover / :focus-within のみで制御（JS 不要）
   ========================================================================== */

.l-header__nav.pc ul li.l-header__subjects {
  position: static; /* パネルの基準は position:fixed の .l-header */
}

.l-header__subjects__trigger {
  display: flex;
  align-items: center;
  color: #082d59;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s color;
}

.l-header__subjects:hover .l-header__subjects__trigger,
.l-header__subjects:focus-within .l-header__subjects__trigger {
  color: #06b4d7;
}

/* パネル：ヘッダー直下に全幅で表示。閉時は max-height:0 でクリップし、
   中身を translateY(-100%) にすることでヘッダーの裏から降りてくる動きにする */
.l-header__subjects__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.28s;
}

/* 開いたときの高さ上限は「ビューポート − ヘッダーの高さ」。
   --l-header-h はヘッダーの実測値で、header.html 内の JS が設定する
   （ヘッダー高はロゴ行＋ナビ＋可変の margin-top で決まり固定値にできないため）。
   JS が動かなくてもフォールバック値で破綻はしない。 */
.l-header__subjects:hover .l-header__subjects__panel,
.l-header__subjects:focus-within .l-header__subjects__panel {
  max-height: calc(100vh - var(--l-header-h, 120px));
  max-height: calc(100dvh - var(--l-header-h, 120px));
  visibility: visible;
  transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}

/* 3列まで落ちると11行になりビューポートに収まらないため、パネル内を縦スクロールさせる。
   overscroll-behavior:contain で、末尾まで来たときに背後のページが動くのを防ぐ。 */
.l-header__subjects__inner {
  background: #f5f5f5;
  padding: 32px 16px 40px;
  max-height: calc(100vh - var(--l-header-h, 120px));
  max-height: calc(100dvh - var(--l-header-h, 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);

  /* Firefox。はみ出したときだけ出るのは overflow:auto の標準挙動だが、
     macOS は既定でオーバーレイ表示になり、スクロールするまで見えない。
     スクロールできることが分かるよう常時表示にする。 */
  scrollbar-width: thin;
  scrollbar-color: #c0c9d4 transparent;
}

/* WebKit/Blink。::-webkit-scrollbar を指定すると非オーバーレイになり、
   スクロール可能な間ずっと表示される（収まっている場合は出ない）。 */
.l-header__subjects__inner::-webkit-scrollbar {
  width: 8px;
}

.l-header__subjects__inner::-webkit-scrollbar-track {
  background: transparent;
}

.l-header__subjects__inner::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #c0c9d4;
}

.l-header__subjects__inner::-webkit-scrollbar-thumb:hover {
  background: #a8b4c2;
}

.l-header__subjects:hover .l-header__subjects__inner,
.l-header__subjects:focus-within .l-header__subjects__inner {
  transform: translateY(0);
}

.l-header__subjects__container {
  max-width: 1008px;
  margin: 0 auto;
}

.l-header__subjects__heading {
  margin-bottom: 16px;
  color: #082d59;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-align: left;
}

.l-header__subjects__container > .l-header__subjects__heading + .l-header__subjects__list {
  margin-bottom: 32px;
}

.l-header__subjects__container > .l-header__subjects__list:last-child {
  margin-bottom: 0;
}

/* 最大5列・左寄せ。幅が足りなければ 4列・3列へ自動で減る。
   1列の最小幅 196px は最長ラベル「リハビリテーション科」が折り返さない下限。
   コンテナが max-width:1008px なので 1008 / 196 = 5.1 → 5列を超えることはない。
   PCナビは 768px 以上で表示されるため、768〜1024px でもここで破綻しない。

   base.min.css の `.l-header__nav.pc ul`（display:flex / justify-content:center /
   column-gap:24px）は子孫の ul にも当たってしまうので、li.l-header__subjects を
   挟んで詳細度で勝つ必要がある。ここを緩めると最終行が中央寄せになり、
   gap 24px のぶん1列ぶん減る。 */
.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  align-items: start;
  justify-content: start;
  row-gap: 10px;
  column-gap: 0;
}

.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list li {
  display: block;
  width: auto;
  column-gap: 0;
}

.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list li::after {
  content: none; /* グローバルナビの区切り線を打ち消す */
}

.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 10px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  word-break: break-word;
  transition: 0.2s background-color;
}

.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list li a:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 色は既存の `.l-header__nav.pc ul li a`（および :hover）に詳細度で勝つ必要がある */
.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list--insurance li a,
.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list--insurance li a:hover {
  color: #06b4d7;
}

.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list--free li a,
.l-header__nav.pc ul li.l-header__subjects .l-header__subjects__list--free li a:hover {
  color: #ef6f74;
}

.l-header__subjects__list li a svg {
  flex-shrink: 0;
  width: 6px;
  height: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .l-header__subjects__panel,
  .l-header__subjects__inner {
    transition: none;
  }
}

/* ==========================================================================
   バーガーメニュー内「診療科目」＋科目一覧パネル（SP）
   - パネルは .c-burger-menu（fixed / 幅81.3vw / 高さ100%）の内側に重ねる。
     ヘッダーのハンバーガー（×）はこの上に残るので、×で全体を閉じられる。
   ========================================================================== */

/* 他のメニュー項目（<a>）と同じ見た目にしたいので button の既定スタイルを消す。
   ラベルの右横に「>」を出すため flex にしている（text-align では svg を並べられない）。 */
.c-burger-menu1__nav .c-burger-subjects__open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: inherit;
  cursor: pointer;
}

.c-burger-menu1__nav .c-burger-subjects__open svg {
  flex-shrink: 0;
  width: 6px;
  height: 11px;
}

.c-burger-subjects {
  /* z-index は付けない。付けるとヘッダーの×ボタン（position:relative / z-index:auto）
     より手前に重なり、閉じられなくなる。DOM順だけで×が上に来る。 */
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-00-white, #fff);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.2s, visibility 0.2s;
}

.c-burger-subjects.is-open {
  transform: translateX(0);
  visibility: visible;
}

.c-burger-subjects__inner {
  /* 上部はヘッダーの×ボタンと重ならない位置から始める */
  padding: 56px 16px 40px;
}

.c-burger-subjects__heading {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #c0c9d4;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.9px;
}

.c-burger-subjects__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.c-burger-subjects__list:not(:last-child) {
  margin-bottom: 32px;
}

.c-burger-subjects__list li {
  width: calc((100% - 4px) / 2);
}

.c-burger-subjects__list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 6px 8px;
  border: 2px solid;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-align: center;

  /* タップフィードバック。既定の半透明黒ハイライトは枠線付きタグだと汚く見えるので消し、
     :active で背景色＋わずかな縮みを自前で出す。0.1s は指を離した瞬間に見える速さ。 */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s, transform 0.1s;
}

.c-burger-subjects__list li a:active {
  transform: scale(0.96);
}

/* 長いラベル（発熱・インフルエンザ／リハビリテーション科 など）を1行に収める */
.c-burger-subjects__list li a.-tight {
  letter-spacing: -1.4px;
}

.c-burger-subjects__list--insurance li a {
  border-color: #cee7ef;
  color: #06b4d7;
}

.c-burger-subjects__list--insurance li a:active {
  border-color: #06b4d7;
  background-color: #e8f7fb;
}

.c-burger-subjects__list--free li a {
  border-color: #ffe4e4;
  color: #ef6f74;
}

.c-burger-subjects__list--free li a:active {
  border-color: #ef6f74;
  background-color: #fdeeef;
}

@media (prefers-reduced-motion: reduce) {
  .c-burger-subjects {
    transition: none;
  }

  .c-burger-subjects__list li a {
    transition: none;
  }

  .c-burger-subjects__list li a:active {
    transform: none;
  }
}