/*
 * ヘッダー（5項目＋お問い合わせCTAボタン）。TOP・下層ページ共通。base.css のヘッダー規則を上書きする。
 *   PC（1041px〜）：ロゴ左、ナビ右。項目は折り返さない（white-space: nowrap）。
 *   スマホ・タブレット（〜1040px）：ハンバーガー。開くと5項目が縦に並び、お問い合わせはボタン。
 * base.css は 1200px 以下でハンバーガーに切り替えるが、5項目は 1041px 以上で1行に収まるため、1041〜1200px は PC 表示へ戻す。
 */
.header .header-inner { max-width: 1280px; gap: 24px; }
.header .header-logo { flex: 0 0 auto; }
.header .nav-list a { white-space: nowrap; }
.header .nav-list a[aria-current="page"]:not(.nav-cta) { color: #c86f14; }
.header .nav-list a:focus-visible { outline: 3px solid #4f94d4; outline-offset: 3px; border-radius: 4px; }

/* お問い合わせCTA（TOPの .msv-btn と同じ配色：背景 #ef8f35／文字 #26190a） */
.header .nav-list a.nav-cta {
	display: inline-block;
	padding: 11px 24px;
	border-radius: 999px;
	background: #ef8f35;
	color: #26190a !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 2px 8px rgba(239, 143, 53, 0.35);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.header .nav-list a.nav-cta:hover,
.header .nav-list a.nav-cta:focus-visible {
	background: #e57f1f;
	color: #26190a !important;
	box-shadow: 0 4px 12px rgba(239, 143, 53, 0.5);
}
.header .nav-list a.nav-cta[aria-current="page"] { background: #26190a; color: #fff !important; box-shadow: none; }

/* 外来クリニック（/receipt/）への誘導（/receipt/ ヘッダーの訪問診療ボタンと同じ配色：背景 #f8a538／白文字） */
.header .nav-list a.nav-featured { background: #f8a538; color: #fff; font-weight: 700; transition: opacity .2s ease; }
.header .nav-list a.nav-featured:hover { color: #fff; opacity: .8; }

/* ロゴ右のサイト説明。ロゴの位置とヘッダーの高さは変えない（flex-end＋min-height:1.6em＝従来の行の高さ）。
   横並びのナビと並べると狭い 1041〜1120px と、ハンバーガーと並べると狭い 349px 以下では出さない（実測で決めた幅）。 */
.header .header-logo a { display: flex; align-items: flex-end; min-height: 1.6em; text-decoration: none; }
.header .header-tagline { margin: 0 0 3px 12px; padding-left: 12px; border-left: 1px solid #ddd; font-size: 12px; line-height: 1.4; font-weight: 700; color: #555; white-space: nowrap; }
@media (min-width: 1041px) and (max-width: 1120px) { .header .header-tagline { display: none; } }
@media (max-width: 480px) { .header .header-tagline { margin: 0 0 4px 8px; padding-left: 8px; font-size: 11px; } }
@media (max-width: 374px) { .header .header-tagline { margin: 0 0 6px 6px; padding-left: 6px; font-size: 10px; } }
@media (max-width: 349px) { .header .header-tagline { display: none; } }

/* 1041px以上：ナビを横1行で表示する（base.css の 1200px 以下の規則を打ち消す） */
@media (min-width: 1041px) {
	.header .hamburger { display: none; }
	.header .header-nav {
		position: static;
		width: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
		background: none;
		box-shadow: none;
		transition: none;
	}
	.header .nav-list { flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px 24px; }
	.header .nav-list li { width: auto; text-align: left; }
	.header .nav-list a { display: inline-block; padding: 0; border-bottom: 0; }
	.header .nav-list a.nav-cta { padding: 11px 24px; }
	.header .nav-list a.nav-featured { padding: 5px 14px; border-radius: 999px; line-height: 1.4; }
}

/* 〜1040px：ハンバーガー。開いたメニューが画面内に収まる（5項目で約330px）。タップ領域は各項目 約52px 以上 */
@media (max-width: 1040px) {
	.header .hamburger { display: flex; width: 44px; height: 44px; padding: 11px 7px; justify-content: space-between; }
	.header .hamburger-line { height: 3px; }
	.header .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
	.header .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
	.header .header-nav { max-height: 0; overflow: hidden; }
	.header .header-nav.active { max-height: calc(100vh - 70px); overflow-y: auto; padding: 8px 0 20px; }
	.header .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.header .nav-list a { display: block; padding: 16px 24px; font-size: 15px; white-space: normal; border-bottom: 1px solid #eee; }
	.header .nav-list li.nav-item-cta { padding: 16px 24px 4px; }
	.header .nav-list a.nav-cta { display: block; padding: 15px 20px; font-size: 16px; border-bottom: 0; }
}

/* 固定ヘッダー（高さ70px）でアンカーの見出しが隠れないようにする。管理バー（32px／46px）ぶんも加える */
:target { scroll-margin-top: 84px; }
#plan, #price, #faq, #related, #contact, [id^="hvr-"] { scroll-margin-top: 84px; }
.admin-bar #plan, .admin-bar #price, .admin-bar #faq, .admin-bar #related, .admin-bar #contact, .admin-bar [id^="hvr-"] { scroll-margin-top: 116px; }
html { scroll-padding-top: 84px; }