/* ===== サイト共通ヘッダー（ロゴ＋ナビゲーションの1行レイアウト） ===== */
/* 仕様: ロゴ左・ピル型ナビ右の1行構成。
 *   旧来は width:760px 固定だったが、共通枠の流動化（.column が
 *   max-width:880px の可変幅化）に合わせて、ヘッダーも max-width:760px
 *   ＋ width:100% で最大幅 760px のソフト流動レイアウトとする。
 *   画面が 760px 未満になった際にヘッダーが親をはみ出さないようにする。
 *   padding-left と padding-right を 20px ずつ取ることでロゴが左端に
 *   ぴったり付かないようにする。box-sizing: border-box を指定し、padding
 *   込みで全体最大幅 760px を維持する。
 */
.site-header {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* ===== ロゴ ===== */
/* RSS_Logo.gif の元画像は4000×752px（アスペクト比5.32:1）と横長。
 * 高さ40pxで表示すると幅約213pxとなり、ナビ(約432px)と並べても余裕を持って収まる。
 * imgのborderはレガシー対応で明示的に0指定。
 */
.site-header__logo img {
	height: 40px;
	width: auto;
	border: 0;
	display: block;
}

/* ===== ナビ本体（ピルを横並びにする ul） ===== */
.site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}

/* サブメニューの絶対位置基準にするため li を position: relative にする */
.site-nav__item {
	position: relative;
}

/* ===== ピル型リンク（通常時） ===== */
/* border-radius: 999px で完全な角丸にしピル型を実現する */
.site-nav__link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: bold;
	color: #00708A;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

/* ホバー: 中ティール背景＋ブランドティール文字
 * #F4FAFB（ほぼ白）だと反応が見えにくいため #D6EEF2 まで濃くして明確なフィードバックにする。
 * アクティブ状態（#0095B4 塗り＋白文字）より控えめなので階層は保たれる。
 */
.site-nav__link:hover {
	background: #D6EEF2;
	color: #0095B4;
}

/* アクティブ: ブランドティール塗りつぶし＋白文字（現在ページの強調） */
.site-nav__link.is-active {
	background: #0095B4;
	color: #FFFFFF;
}

/* ===== サブメニュー（ホバーでフワッと展開） ===== */
/* opacity と transform でアニメ。visibilityで非表示時のクリック無効化を保証
 * min-width: 140px で短いラベル（EBRAIN等）でも適度な余白を確保しつつ、
 * 長いラベル（情報セキュリティーポリシー等）はコンテンツに合わせて自然に幅が広がる。
 */
.site-nav__sub {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 140px;
	background: #FFFFFF;
	border: 1px solid #CFE6EC;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 100;
}

/* 親 li にホバーされたらサブメニューを表示する */
.site-nav__item--has-sub:hover .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* サブメニュー内のリンク
 * text-align: left を明示指定（ページ全体の <center> タグから継承される center を上書き）。
 * モダンUIではドロップダウン内のテキストは左寄せが標準。
 * white-space: nowrap で長いラベル（情報セキュリティーポリシー等）の折り返しを防止。
 */
.site-nav__sub a {
	display: block;
	padding: 8px 16px;
	font-size: 14px;
	color: #333333;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

/* サブメニューのホバー色も親ピルと統一して、明確なフィードバックを与える */
.site-nav__sub a:hover {
	background: #D6EEF2;
	color: #0095B4;
}

/* ============================================================
   ハンバーガーボタン（デフォルト非表示）
   ------------------------------------------------------------
   PC 表示では使わない。スマホ表示（768px以下）でのみ表示し、
   タップでナビ本体をドロワー風に開閉する。
   ============================================================ */
.site-nav-toggle {
	display: none;
}

/* ============================================================
   スマホ表示（768px以下）：ハンバーガーメニューに切り替える
   ------------------------------------------------------------
   - ヘッダーの padding を狭める
   - ロゴを小さく
   - ピル横並びのナビを隠し、ハンバーガー＋ドロワーに切替
   - サブメニューはホバー展開を止め、常時インライン展開
   ============================================================ */
@media (max-width: 768px) {
	.site-header {
		position: relative;
		padding: 12px 16px;
	}

	.site-header__logo img {
		height: 32px;
	}

	/* ハンバーガーボタン本体（3本バーを縦に並べた正方形に近い形） */
	.site-nav-toggle {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 28px;
		height: 22px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	/* ハンバーガーの 3 本バー（縦に等間隔） */
	.site-nav-toggle__bar {
		display: block;
		height: 3px;
		background: #0095B4;
		border-radius: 2px;
	}

	/* ナビ本体：通常時は隠す（ドロワー閉状態） */
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #FFFFFF;
		border-top: 1px solid #CFE6EC;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		z-index: 99;
	}

	/* data-state="open" のときに表示（JS が切替） */
	.site-nav[data-state="open"] {
		display: block;
	}

	/* ナビリストを縦並びに */
	.site-nav__list {
		flex-direction: column;
		gap: 0;
		padding: 8px 0;
	}

	.site-nav__item {
		width: 100%;
	}

	/* ピル形状を解除し、ブロックリンクに */
	.site-nav__link {
		display: block;
		padding: 14px 20px;
		border-radius: 0;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}

	/* サブメニュー：絶対配置とフェード演出を解除し、常時インライン展開 */
	.site-nav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: #F4FAFB;
		border: 0;
		border-radius: 0;
		padding: 4px 0;
		min-width: 0;
	}

	.site-nav__sub a {
		padding: 10px 36px;
		font-size: 13px;
		white-space: normal;
	}
}

/* ============================================================
   極小画面（480px以下）：ロゴをさらに縮小
   ============================================================ */
@media (max-width: 480px) {
	.site-header__logo img {
		height: 28px;
	}
}