/**
 * グローバルナビの見分け。
 *
 * ── 何が起きていたか（2026-09-22 編集長のご指摘） ──────
 *
 * Divi のヘッダーは `overlay-header` で、**背景が完全な透明**
 * （実測 rgba(255,255,255,0)・position absolute・z-index 9999）。
 * トップは背景の絵に重なるので成立するが、**白地の配下ページでは
 * 本文がナビの裏を流れ、どこまでがナビか分からない**。
 *
 * ── どう直したか ─────────────────────────────────
 *
 * 少しでもスクロールしたら、うっすら白を敷いて下に細い罫を引く。
 * **上端にいる間は今までどおり透明**（トップの絵の見え方を変えないため）。
 *
 * **位置も重なりも触っていない。** 触るとトップの組み方まで動く。
 */

.et-l--header .et_pb_section.overlay-header,
.et-l--header > .et_pb_section:first-child {
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	border-bottom: 1px solid transparent;
}

/* 動きを減らす設定の人には、切り替えを瞬時にする。 */
@media (prefers-reduced-motion: reduce) {

	.et-l--header .et_pb_section.overlay-header,
	.et-l--header > .et_pb_section:first-child {
		transition: none;
	}
}

/* スクロールしたときだけ。**!important が要る**——Divi は
   ビルダーの設定を `.et_pb_section_0_tb_header` のような強い指定で出す。 */
.et-l--header .star-nav--on,
.et-l--header .star-nav--on.et_pb_section {
	background-color: rgba( 255, 255, 255, 0.92 ) !important;
	border-bottom-color: rgba( 0, 0, 0, 0.08 ) !important;
}

/* すりガラス。効かないブラウザでは上の白さだけで足りる。 */
@supports ( backdrop-filter: blur( 8px ) ) or ( -webkit-backdrop-filter: blur( 8px ) ) {

	.et-l--header .star-nav--on {
		background-color: rgba( 255, 255, 255, 0.78 ) !important;
		-webkit-backdrop-filter: saturate( 1.6 ) blur( 10px );
		backdrop-filter: saturate( 1.6 ) blur( 10px );
	}
}