@charset "UTF-8";
/* ==========================================================================
   ヘッダー（全ページ共通）
   カンプ実測: 外周 padding 16px ／ 白バー 1408×80px・角丸32px
             バー内 padding 0 32px ／ ロゴ 208×40 ／ ナビ 14px・gap 16px
             Instagram 31.19px ／ お問い合わせボタン 181×48
   ========================================================================== */

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding: 16px;
}

.c-header-bar {
  height: 80px;
  padding: 0 32px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32px;
  box-shadow: var(--shadow-header);
}


.c-btn--header {
  min-width: 130px;
  padding: 6px 0;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  background: var(--c-gradient_header);
}

/* ロゴ（がちょうアイコン＋院名の文字を1枚の画像で書き出している） */
.c-header-logo {
  flex-shrink: 0;
  width: 208px;
  width: 16%;
}

/* .c-header-logo img {
  display: block;
  width: 208px;
} */

/* トップページのみ h1。h1 の中に img を入れられないため background-image で表示する */
.c-header-logo--h1 {
  height: 40px;
  background-image: url("/system_panel/uploads/images/top_logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  /* background-size: 208px 40px; */
  aspect-ratio: 208 / 40;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1px;
  width: 210px;
}

/* グローバルナビ（8項目） */
.c-header-nav {
  gap: 16px;
  margin-left: 32px;
}

.c-header-nav a {
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.c-header-right {
  gap: 16px;
  margin-left: auto;
}

.c-header-insta {
  flex-shrink: 0;
  width: 31px;
  margin-left: 10px;
}

.c-header-insta img {
  display: block;
  width: 31px;
  height: 31px;
}

/* ハンバーガー（SP・タブレット） */
.c-header-hamburger {
  position: relative;
  width: 32px;
  height: 24px;
  margin-left: auto;
}

.c-header-hamburger p {
  position: absolute;
  left: -9999px;
}

.c-header-hamburger::before,
.c-header-hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--c-navy);
  border-radius: 2px;
}

.c-header-hamburger::before {
  top: 3px;
  box-shadow: 0 8px 0 var(--c-navy);
}

.c-header-hamburger::after { top: 19px; }

/* ------------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------------ */

  @media (max-width: 1279.98px) {
  .c-header-bar { padding: 0 20px; }
  .c-header-nav { gap: 12px; margin-left: 20px; }
  .c-header-nav a { font-size: 0.9125rem; }
  .c-header-right { gap: 12px; }
}

@media (max-width: 1198px) {
  .c-header-nav a { font-size: 0.78rem; }
  .c-header-right .c-btn--header{
    min-width: 100px !important;
    min-height: 35px;
    padding: 4px 4px;
    font-size: 0.8125rem;
  }
  .c-header-logo--h1{
    width: 160px;
  }

}

@media (max-width: 991.98px) {
  .c-header { padding: 0px; }
  .c-header-bar { height: 48px; padding: 0 16px; border-radius: 0; }
  /* ↓ 高さだけ指定（幅は下のブロックで可変にする） */
  .c-header-logo--h1 { height: 25px; }
  /* 狭い画面ではボタンとハンバーガーを縮めず、ロゴ側を縮める。
     ロゴは max-width までで、入らないぶんは縮小（h1版は background-size: contain
     で画像も一緒に縮む）。320px でもボタンの文字とハンバーガーが潰れない */
  .c-header-logo {
    /* 幅は 150px を基準に、入らないぶんだけ縮む（h1版は文字を隠していて
       中身の幅が0なので width: auto にすると潰れてしまう） */
    flex-shrink: 1;
    min-width: 0;
    width: 150px;
    /* 縮んだときもボタンとの間隔を確保する */
    margin-right: 12px;
  }

  .c-header-logo img { width: 100%; }

  .c-header-logo--h1 {
    background-size: contain;
    background-position: left center;
  }
  /* ハンバーガーが出る幅でも「お問い合わせ」ボタンを残す（ハンバーガーの左）。
     PCと同じ c-btn--primary のグラデボタンをそのまま使い、バーの高さ54pxに
     収まるサイズに詰める。Instagram アイコンは HTML 側で d-none にしている。
     ボタンのモディファイアがページごとに違う（index=c-btn--header /
     当院について=c-btn--lg / 他=c-btn--sm）ので、c-header-right の中の
     .c-btn を対象にしてクラス名に依存しないようにしている。
     767px以下の .c-btn { width: 100% } もこの詳細度で打ち消せる。 */
  .c-header-right .c-btn {
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 4px 14px;
    font-size: 0.8125rem;
  }

  .c-header-right .c-btn--header{
    min-width: 80px !important;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    min-height: 30px;
    padding: 4px 4px;
    font-size: 0.6125rem;
  }

  /* ボタンの右にハンバーガー。margin-left: auto が両方にあると
     余白が2等分されてしまうので、ハンバーガー側は固定の間隔にする */
  .c-header-hamburger { flex-shrink: 0; margin-left: 16px; }
}