@charset "utf-8";


html, body{
  min-width: 990px !important;
}

#container{
  min-width: 990px !important;
}


#headerInner{
  margin: 0 auto 0px;
	width: 100%;
}



/* =========================================================
   top.css（春日クリニック）
   完成版：縦センター揃え＋最終調整
   ========================================================= */
/* ===== base ===== */ :root {

  
  --utility-bg: #F5F4F3;
  --utility-line: #ebe8e3;
  --nav-red: #a43a42;
  --nav-red-hover: #8f2a2d;
  --nav-brown: #9a7b57;
  --nav-brown-hover: #866a4a;
  --nav-text: #fff;
  --util-text: #5b4636;
}
#container {
  background: none;
}
.site-header {
  background-color: #FFF;
  box-sizing: border-box;
}
.header-container {
  width: 950px;
  margin: 0 auto;
}
/* ===== header top ===== */
.header-top {
  position: relative;
  z-index: 400;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .10);
  background-color: #FFF;
}
.header-top__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.brand__logo {
  flex: 0 0 auto;
}
.brand__logo img {
  height: 23px;
}
.brand__tagline {
  margin-left: auto;
}
.brand__tagline img {
  height: 14px;
}
/* ===== utility ===== */
.header-utility {}
#headerInner .clearfix,
.header-utility__inner {
/* フロートに変更
	display: flex;
  justify-content: space-between;
  align-items: stretch;*/
	width: 950px;
}
/* 左H1 */

#headerInner h1  {
float: none;
}


.site-header .header-utility h1,
#headerInner h1{
  font-size: 12px;
  line-height: 1;
  padding: 13px 0px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 442px;
  font-weight: normal;
	float: left;
}





/* utility strip：帯は必ず 475px に固定 */
.utility-strip {
  width: 496px; /* ★これが必須 */
	float: right;
  display: flex;
  align-items: stretch;
  background: var(--utility-bg);
  border-left: 1px solid var(--utility-line);
  border-right: 1px solid var(--utility-line);
  border-radius: 0 0 6px 6px; /* 左上 右上 右下 左下 */
  overflow: hidden;
	box-sizing: border-box;
}
/* 4つは帯の中で等分（はみ出しゼロ） */
a.utility-strip__item {
  flex: 1 1 0; /* ★等分配分 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  font-size: 11px;
  color: var(--util-text);
  border-right: 1px solid var(--utility-line);
  text-decoration: none;
  min-width: 0; /* ★はみ出し防止の保険 */
  font-weight: 500;
}
a.utility-strip__item:hover {
  color: #8f2a2d;
}
/* 先頭だけ “左余白” を追加（幅は変えない） */
a.utility-strip__item:first-child {
  flex: 1.3 1 0; /* 先頭だけ少し広い */
  justify-content: flex-start;
  padding-left: 16px;
}
a.utility-strip__item:last-child {
  flex: 1.1 1 0; /* 先頭だけ少し広い */
  padding-right: 16px;
}
/* 最後の区切り線を消す */
a.utility-strip__item:last-child {
  border-right: none;
}
/* アイコン */
.utility-icon {
  width: 20px;
  height: auto;
  flex: 0 0 auto;
}

/* utility の中にプルダウンを持つための器 */
.utility-item{
  position: relative;
  flex: 1 1 0;          /* 既存の等分を維持 */
  min-width: 0;
}

/* 既存の a.utility-strip__item はそのまま使える */

/* =========================================================
   Utility dropdown（整理版）
========================================================= */

/* utility-strip はプルダウンを出すので visible に */
.utility-strip{
  overflow: visible; /* hidden だと必ず切れます */
  position: relative;
  z-index: 300;     
}

/* 既存 a.utility-strip__item と同じ“枠”として振る舞わせる */
.utility-item{
  position: relative;
  flex: 1.5 1 0;       /* 既存の等分配分を維持 */
  min-width: 0;
  display: flex;     /* 中の a を帯の高さに合わせやすくする */
}

/* ドロップダウン本体 */
.utility-sub{
  list-style: none;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  /* 触れないように（見えない時の誤クリック防止） */
  pointer-events: none;
}

/* 開く条件：PC hover + iPad tap/キーボード */
.utility-item:hover > .utility-sub,
.utility-item:focus-within > .utility-sub{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ドロップダウンリンク */
.utility-sub a{
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  white-space: nowrap;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px dotted #AAA;
}

.utility-sub a:hover{
  background: #FFF0F0;
}




/* ===== header main ===== */
.header-main {}
.header-main__inner {
  display: grid;
  grid-template-columns: 282px 167px 1fr;
  column-gap: 0px;
  /* ★ ここが最重要 */
  align-items: center; /* ← 縦センター揃え */
  min-height: 90px; /* 高さを安定させる */
	clear: both;
}
/* ===== clinic logo ===== */
.clinic {
  display: flex;
  align-items: center;
}
.clinic__name img {
  height: 44px;
  margin-bottom: 10px;
  margin-left: 3px;
}
/* ===== buttons ===== */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
a.btn-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #8f2a2d;
  font-size: 13px;
  font-weight: 500;
  color: #8f2a2d;
  background: #fff;
  text-decoration: none;
}
a.btn-header:hover {
  background: #F9D3D3;
}
a.btn-primary {
  background: #FFF0F0;
  padding: 12px 5px 9px;
}
a.btn-outline {
  font-size: 11px;
  padding: 7px 5px 6px;
}
/* =========================================================
   電話番号ブロック（最終版・overflowなし）
   ========================================================= */
/* 全体 */
.tel-wrap {
  display: flex;
  align-items: center; /* 縦位置センター */
  justify-content: flex-start; /* 中央寄せにしない */
  gap: 5px;
  width: 100%;
}
/* =========================
   左：メイン電話
   ========================= */
.tel-main {
  flex: 0 0 200px; /* 固定幅で安定 */
  text-align: center;
}
.tel-main__label {
  font-size: 15px;
  font-weight: 500;
  color: #8f2a2d;
  margin-bottom: 2px;
  line-height: 1.2;
}
.tel-main__num {
  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
a.tel-main__note {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-decoration: none;
}
a.tel-main__note:hover {
  text-decoration: underline;
}
/* =========================
   右：サブ電話（2段）
   ========================= */
.tel-side {
  flex: 0 0 282px; /* ← 明示的に幅を確保（はみ出し防止の本質） */
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
/* 1行（gridで左右列を固定） */
.tel-side__row {
  display: grid;
  grid-template-columns: 1fr 125px; /* 左：ラベル / 右：番号 */
  align-items: baseline;
  column-gap: 12px;
  padding: 8px 0;
}
/* 点線 */
.tel-side__row + .tel-side__row {
  border-top: 1px dotted #555;
}
/* 左ラベル */
.tel-side__label {
  font-size: 14px;
  font-weight: 500;
  color: #8f2a2d;
  white-space: nowrap;
}
/* 右番号（上下で完全に揃う） */
.tel-side__num {
  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size: 19px;
  font-weight: 500;
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}
/* 電話番号（数字）の字間をわずかに広げる */
.tel-main__num, .tel-side__num {
  letter-spacing: 0.02em;
}



/* =========================================================
   GLOBAL NAV（整理済み：PC+ iPad安定版）
   ・左：施設のご案内（茶）
   ・右：えんじ5等分
   ・dropdownは hover + focus-within で開く（iPad対応）
   ・overflowで切れないように最小限の開放
========================================================= */

.global-nav{
  margin-bottom: 17px;
  position: relative;
  z-index: 100;
}

/* ---------- ul ---------- */
.gnav{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 46px;
  background: none;
  border-radius: 6px;
  overflow: visible !important; /* ← プルダウンが切れる場合の最小保険 */
}

/* セパレータは使わない */
.gnav__sep{ display: none; }

/* ---------- 共通：アイテム ---------- */
.gnav__item{
  position: relative;
  transition: background-color 0.25s ease;
}

/* ---------- 文字詰め ---------- */
.gnav__item > a{ letter-spacing: 0.1em; }
.gnav__sub a{ letter-spacing: 0.03em; }

/* =========================================================
   左：施設のご案内（茶）
========================================================= */
.gnav__item--home{
  flex: 0 0 190px;
  background: var(--nav-brown);
  margin-right: 10px;
  border-radius: 6px;
}

.gnav__item--home > a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
}

.gnav__item--home:hover{
  background: #AE845B;
}

/* =========================================================
   右：えんじ帯（5等分）
========================================================= */
.gnav__item:not(.gnav__item--home){
  flex: 1 1 0;
  background: var(--nav-red);
}

/* リンク（高さは46pxに統一） */
.gnav__item:not(.gnav__item--home) > a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 100%;
}

.gnav__item:not(.gnav__item--home):hover{
  background: #B83B45;
}

/* 区切り線（上下余白あり） */
.gnav__item:not(.gnav__item--home)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: #FFF;
}

/* えんじ先頭（homeの次）は区切り線なし */
.gnav__item--home + .gnav__item::before{ display: none; }
/* sep が残る場合の保険 */
.gnav__item--home + .gnav__sep + .gnav__item::before{ display: none; }

/* 右端角丸（保険） */
.gnav > .gnav__item:last-child{
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* えんじ帯の左端（homeの直後）角丸（保険） */
.gnav__item--home + .gnav__item{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.gnav__item--home + .gnav__sep + .gnav__item{
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

/* =========================================================
   dropdown
========================================================= */
.gnav__sub{
  position: absolute;
  top: 46px;
  left: 0;
  min-width: 210px;

  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 5px 0;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;

  z-index: 99999; /* 前面 */
}

/* 開く条件：PC hover + iPad/キーボード focus */
.gnav__item:hover > .gnav__sub,
.gnav__item:focus-within > .gnav__sub{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 右端（外来診療）のドロップダウンは右揃えで開く */
.gnav > .gnav__item:last-child > .gnav__sub{
  left: auto;
  right: 0;
}


/* ドロップダウン項目 */
.gnav__sub a{
  display: block;
  padding: 10px 13px;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.gnav__sub a:hover{
  background: #FFF0F0;
}

.gnav__sub li.first a{ }

/* second（第2階層）にアイコンを付ける */
.gnav__sub li.second a{
  position: relative;
  padding-left: 34px; /* ← アイコン分の余白（既存） */
}

/* アイコン本体 */
.gnav__sub li.second a::before{
  content: "";
  position: absolute;
left: 20px;
top: 47%;
  transform: translateY(-50%);
  width: 5px;                /* アイコンサイズ */
  height: 5px;
  background: url("/images/ico/ico_second.png") no-repeat center center;
  background-size: contain;
}


.gnav__sub li.caution a{ color:#b11c2a;}