/* 新サイトでの変更（2026-10-22）: PC・スマホのヘッダー。旧テーマの CSS は書き換えず、最後に読み込むこのファイルで上書きする。
   見た目は brainplus-sales.jp のヘッダーに寄せた（上端のオレンジ帯・濃紺のグラデーション・白文字・オレンジの資料請求ボタン）。
   マークアップの差し替え（ロゴ・ボタン・電話番号と SNS の削除）は scripts/php-to-html.mjs の SITE_CHANGES */

:root {
	--hdr-stripe: 4px;
	--hdr-bar: 96px;
	--hdr-accent: #fed7aa;
}

/* ロゴ（PC・スマホ共通）: events.sb-service.co.jp のヘッダーと同じ。半透明の角丸の中に SBS ロゴ、右に「営業を科学する」と社名 */
.hdr-logo:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	align-items: center;
	color: #fff;
	font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
	white-space: nowrap;
	transition: opacity 0.2s;
}

.hdr-logo:hover:not(.et-legacy *):not(.tw-body *) {
	opacity: 0.8;
}

.hdr-logo__mark:not(.et-legacy *):not(.tw-body *) {
	flex-shrink: 0;
	margin-right: 16px;
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(4px);
	transition: transform 0.3s;
}

.hdr-logo:hover .hdr-logo__mark:not(.et-legacy *):not(.tw-body *) {
	transform: scale(1.05);
}

.hdr-logo__mark img:not(.et-legacy *):not(.tw-body *) {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.hdr-logo__text:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	flex-direction: column;
}

.hdr-logo__catch:not(.et-legacy *):not(.tw-body *) {
	color: var(--hdr-accent);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.025em;
}

.hdr-logo__name:not(.et-legacy *):not(.tw-body *) {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

/* ボタン（PC・スマホ共通）: 資料請求は brainplus-sales.jp の btn-orange と同じ立体のオレンジ、メルマガ登録は白枠 */
.hdr-btn:not(.et-legacy *):not(.tw-body *) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	height: 42px;
	padding: 0 20px;
	border-radius: 999px;
	font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.hdr-btn--primary:not(.et-legacy *):not(.tw-body *) {
	position: relative;
	overflow: hidden;
	background: linear-gradient(to bottom, #fb923c, #f97316, #dc2626);
	box-shadow: 0 4px 0 0 #b91c1c, 0 6px 16px rgba(234, 88, 12, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
}

.hdr-btn--primary:hover:not(.et-legacy *):not(.tw-body *) {
	box-shadow: 0 2px 0 0 #b91c1c, 0 4px 12px rgba(234, 88, 12, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.2);
	transform: translateY(2px);
}

/* 光が横切る演出（brainplus-sales.jp の cta-shine） */
.hdr-btn--primary:not(.et-legacy *):not(.tw-body *)::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	transform: translateX(-160%) skewX(-20deg);
	animation: hdr-shine 3.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hdr-shine {
	0% { transform: translateX(-160%) skewX(-20deg); }
	45%, 100% { transform: translateX(360%) skewX(-20deg); }
}

.hdr-btn--ghost:not(.et-legacy *):not(.tw-body *) {
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
}

.hdr-btn--ghost:hover:not(.et-legacy *):not(.tw-body *) {
	background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.hdr-btn--primary:not(.et-legacy *):not(.tw-body *)::before {
		animation: none;
		opacity: 0;
	}
}

/* PC ヘッダー */
@media screen and (min-width: 770px) {
	#pcHead:not(.et-legacy *):not(.tw-body *) {
		background: linear-gradient(to right, #0f172a, #1e3a8a, #1e293b);
		box-shadow: var(--shadow-md);
	}

	#pcHead:not(.et-legacy *):not(.tw-body *)::before {
		content: '';
		display: block;
		height: var(--hdr-stripe);
		background: linear-gradient(to right, #fb923c, #ef4444, #ec4899);
	}

	/* .pHead は position を付けない（メガメニューを #pcHead 基準の全幅で出すため） */
	/* メニューが 9 項目と多いので、brainplus-sales.jp のような 1280px の枠に入れず画面幅いっぱいに並べる */
	.pHead:not(.et-legacy *):not(.tw-body *) {
		gap: 24px;
		height: var(--hdr-bar);
		padding: 0 32px;
		background: transparent;
	}

	.pHead h1:not(.et-legacy *):not(.tw-body *) {
		flex-shrink: 0;
		width: auto;
		padding: 0;
	}

	.pMenu:not(.et-legacy *):not(.tw-body *) {
		flex: 1 1 auto;
		align-self: stretch;
		width: auto;
		min-width: 0;
	}

	.pMenu > ul:not(.et-legacy *):not(.tw-body *) {
		justify-content: center;
		gap: clamp(0px, 0.3vw, 10px);
		height: 100%;
	}

	.pMenu > ul > li:not(.et-legacy *):not(.tw-body *) {
		flex: 0 0 auto;
		width: auto;
		font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
		font-size: clamp(12px, 0.95vw, 15.5px);
		font-weight: 400;
	}

	/* 高さいっぱいを当たり判定にして、メニューの下端（＝サブメニューの上端）までマウスが届くようにする */
	.pMenu > ul > li > a:not(.et-legacy *):not(.tw-body *) {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0;
		color: rgba(255, 255, 255, 0.88);
		white-space: nowrap;
	}

	/* 項目名は丸い背景の中に置く。マウスを乗せている・サブメニューを開いている項目は背景を明るくして、どれを選んでいるか分かるようにする */
	.pMenu > ul > li > a > span:not(.et-legacy *):not(.tw-body *) {
		padding: 0.5em 0.6em;
		border-radius: 999px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.pMenu > ul > li > a:hover > span:not(.et-legacy *):not(.tw-body *),
	.pMenu > ul > li.is-open > a > span:not(.et-legacy *):not(.tw-body *) {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}

	/* 今いるページはオレンジの文字 */
	.pMenu > ul > li.current-menu-item > a > span:not(.et-legacy *):not(.tw-body *) {
		color: var(--hdr-accent);
	}

	/* サブメニュー・メガメニューは、急に出し入れせずフェードで切り替える（隣の項目へ移ると、前のメニューが消えながら次が出る）。
	   開閉は LegacyBehaviors.tsx が親項目に is-open を付け外しする。キーボード（Tab）で項目に来たときも開く
	   （:focus-within だとマウスで押した後もフォーカスが残って閉じなくなるので :focus-visible で判定） */
	.pMenu .parent .sub:not(.et-legacy *):not(.tw-body *) {
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
	}

	.pMenu .parent.is-open .sub:not(.et-legacy *):not(.tw-body *),
	.pMenu .parent:has(:focus-visible) .sub:not(.et-legacy *):not(.tw-body *) {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
	}

	/* 隣の項目へ切り替えるときは、前のメニューをすぐ消す（消えかけと出かけが重なると、両方が半透明になって後ろの写真が透けて読みにくい） */
	.pMenu:has(.parent.is-open) .parent:not(.is-open) .sub:not(.et-legacy *):not(.tw-body *) {
		visibility: hidden;
		opacity: 0;
		transition: none;
	}

	/* サービスのメガメニューだけは、ヘッダーの下から上→下へカーテンのように広がって開く（2026-10-23 ユーザーの録画の動き）。
	   開くときは約 0.28 秒でゆっくり止まる動き、閉じるときは約 0.14 秒で素早く引っ込める。
	   透明にはせず、内容は動かさずに表示する範囲（clip-path）だけを動かす。box-shadow が切れないよう、左右・下は広めに取る */
	.pMenu .parent .sub.svc-mega:not(.et-legacy *):not(.tw-body *) {
		opacity: 1;
		transform: none;
		clip-path: inset(0 -40px 100% -40px);
		transition: clip-path 0.14s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.14s;
	}

	.pMenu .parent.is-open .sub.svc-mega:not(.et-legacy *):not(.tw-body *),
	.pMenu .parent:has(:focus-visible) .sub.svc-mega:not(.et-legacy *):not(.tw-body *) {
		clip-path: inset(0 -40px -80px -40px);
		transition: clip-path 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
	}

	.pMenu:has(.parent.is-open) .parent:not(.is-open) .sub.svc-mega:not(.et-legacy *):not(.tw-body *) {
		clip-path: inset(0 -40px 100% -40px);
		transition: none;
	}

	/* 旧テーマの現在地・ホバーの下線（文字下の短い線、項目幅いっぱいの太い線）は使わない。現在地は文字色で示す */
	.pMenu .current-menu-item:not(.et-legacy *):not(.tw-body *) {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.pMenu ul li span:not(.et-legacy *):not(.tw-body *)::after {
		content: none;
	}

	.pBtn:not(.et-legacy *):not(.tw-body *) {
		flex-shrink: 0;
		gap: 10px;
		width: auto;
	}
}

/* 1280〜1560px: 社名（日本語）を出したまま収まるよう、余白とボタンを少し詰める */
@media screen and (min-width: 1280px) and (max-width: 1560px) {
	.pHead:not(.et-legacy *):not(.tw-body *) {
		gap: 16px;
		padding: 0 24px;
	}

	.pMenu > ul > li > a > span:not(.et-legacy *):not(.tw-body *) {
		padding: 0.5em 0.42em;
	}

	.pBtn:not(.et-legacy *):not(.tw-body *) {
		gap: 8px;
	}

	.pBtn .hdr-btn:not(.et-legacy *):not(.tw-body *) {
		height: 38px;
		padding: 0 14px;
		font-size: 13.5px;
	}
}

/* 幅が狭い PC（1279px 以下）: 社名の文字を外してマークだけにし、メニューに幅を回す */
@media screen and (min-width: 770px) and (max-width: 1279px) {
	.pHead .hdr-logo__text:not(.et-legacy *):not(.tw-body *) {
		display: none;
	}

	.pHead .hdr-logo__mark:not(.et-legacy *):not(.tw-body *) {
		margin-right: 0;
	}

	.pMenu > ul > li:not(.et-legacy *):not(.tw-body *) {
		font-size: clamp(12px, 1.1vw, 14px);
	}
}

@media screen and (min-width: 770px) and (max-width: 1100px) {
	.pHead:not(.et-legacy *):not(.tw-body *) {
		gap: 14px;
		padding: 0 16px;
	}

	.pMenu > ul:not(.et-legacy *):not(.tw-body *) {
		gap: 0;
	}

	.pMenu > ul > li > a > span:not(.et-legacy *):not(.tw-body *) {
		padding: 0.45em 0.42em;
	}

	.pMenu > ul > li:not(.et-legacy *):not(.tw-body *) {
		font-size: clamp(10px, 1.3vw, 14px);
	}

	.pBtn .hdr-btn:not(.et-legacy *):not(.tw-body *) {
		height: 36px;
		padding: 0 12px;
		font-size: 12.5px;
	}
}

/* タブレット（960px 以下）: メルマガ登録ボタン（フッターにもある）を外す */
@media screen and (min-width: 770px) and (max-width: 960px) {
	.pBtn .hdr-btn--ghost:not(.et-legacy *):not(.tw-body *) {
		display: none;
	}
}

/* 旧ヘッダーの高さ（ボタン画像の高さ＝画面幅の 6.1036%）を前提に、各ページの先頭に余白が付いている。
   新しいヘッダーの高さとの差だけページ全体をずらし、ヘッダーと本文の位置関係を旧サイトと同じにする */
@media screen and (min-width: 770px) {
	#wrap > header + div:not(.et-legacy *):not(.tw-body *) {
		margin-top: calc(var(--hdr-stripe) + var(--hdr-bar) - 6.1036vw);
	}
}

/* サブメニュー共通: 親項目のすぐ下に出す。上に透明の当たり判定を足し、親との間をマウスが通っても閉じないようにする */
.pMenu .sub:not(.et-legacy *):not(.tw-body *)::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 24px;
}

/* セミナー・講座／事例集／企業情報のサブメニュー（2026-10-22 ユーザー指示で、サービスのメガメニューと同じ見た目に作り直し）。
   角を丸めた白い枠に、紺の太字の項目を並べる。右端の › はこのサイト内、↗ は別サイト（新しいタブで開く） */
.pMenu li > ul.sub:not(.et-legacy *):not(.tw-body *),
.pMenu .seminar_child:not(.et-legacy *):not(.tw-body *) {
	top: calc(100% + 8px);
	width: auto;
	min-width: 15em;
	padding: 8px;
	border: 1px solid #e3e6ef;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--shadow-md);
}

.pMenu li > ul.sub li:not(.et-legacy *):not(.tw-body *) {
	width: 100%;
	padding: 0;
	font-size: inherit;
}

.pMenu li > ul.sub li a:not(.et-legacy *):not(.tw-body *),
.pMenu .seminar_child a:not(.et-legacy *):not(.tw-body *) {
	position: relative;
	display: block;
	margin: 0;
	padding: 11px 40px 11px 14px;
	border-radius: 8px;
	color: #1a1f4a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pMenu li > ul.sub li a:not(.et-legacy *):not(.tw-body *)::after,
.pMenu .seminar_child a:not(.et-legacy *):not(.tw-body *)::after {
	content: '›';
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: #000066;
	font-size: 18px;
	font-weight: 400;
}

.pMenu li > ul.sub li a[target='_blank']:not(.et-legacy *):not(.tw-body *)::after,
.pMenu .seminar_child a[target='_blank']:not(.et-legacy *):not(.tw-body *)::after {
	content: '↗';
	font-size: 14px;
}

.pMenu li > ul.sub li a:hover:not(.et-legacy *):not(.tw-body *),
.pMenu .seminar_child a:hover:not(.et-legacy *):not(.tw-body *) {
	background: #eef0f8;
	color: #000066;
}



/* サービスのメガメニュー（content/site/service-menu.html。2026-10-22 作り直し、同日サービス一覧ページと揃えた見た目に更新）
   分類ごとに白い枠でまとめ、各サービスに写真の小さな画像と対象者ラベルを付けた。別サイトへのリンクは ↗ */
.pMenu .svc-mega:not(.et-legacy *):not(.tw-body *) {
	top: 100%;
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	border-top: 1px solid #e3e6ef;
	background: #f5f6fa;
	box-shadow: var(--shadow-md);
	font-size: 16px;
	font-weight: 400;
	text-align: left;
}

/* 旧テーマの .pMenu ul li（幅 1/8・0.7vw・中央寄せ）より強い指定で打ち消す */
.pMenu .svc-mega ul li:not(.et-legacy *):not(.tw-body *) {
	position: static;
	width: auto;
	font-size: inherit;
	text-align: left;
}

.svc-mega__inner:not(.et-legacy *):not(.tw-body *) {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 40px 28px;
}

.svc-mega__head:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
}

.svc-mega__title:not(.et-legacy *):not(.tw-body *) {
	color: #000066;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.pMenu .svc-mega__all:not(.et-legacy *):not(.tw-body *) {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.65em 1.4em;
	border-radius: 999px;
	background: #000066;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s;
}

.pMenu .svc-mega__all:hover:not(.et-legacy *):not(.tw-body *) {
	background: #1f2d8a;
}

.svc-mega__body:not(.et-legacy *):not(.tw-body *) {
	display: grid;
	/* minmax(0, …) で、1行に収めた対象者ラベルの長さに列幅が引っぱられないようにする */
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 28px;
}

.svc-mega__area-title:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #000066;
	font-size: 18px;
	font-weight: 700;
}

.svc-mega__area-title img:not(.et-legacy *):not(.tw-body *) {
	width: 22px;
}

.svc-mega__cols:not(.et-legacy *):not(.tw-body *) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.svc-mega__col:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.svc-mega__box:not(.et-legacy *):not(.tw-body *) {
	padding: 12px 10px 10px;
	border: 1px solid #e3e6ef;
	border-radius: 12px;
	background: #fff;
}

.svc-mega__group:not(.et-legacy *):not(.tw-body *) {
	margin: 0 0 4px;
	padding-left: 8px;
	color: #5a6386;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.pMenu .svc-mega__list a:not(.et-legacy *):not(.tw-body *) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 30px 7px 8px;
	border-radius: 8px;
	color: #1a1f4a;
	line-height: 1.4;
	transition: background 0.15s;
}

.pMenu .svc-mega__list a:hover:not(.et-legacy *):not(.tw-body *) {
	background: #eef0f8;
}

.svc-mega__thumb:not(.et-legacy *):not(.tw-body *) {
	flex: 0 0 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 8px;
	background: #1c2340;
}

.svc-mega__thumb img:not(.et-legacy *):not(.tw-body *) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(1.22) contrast(1.12) saturate(1.1);
}

/* 写真のないサービスは分類のアイコン */
.svc-mega__thumb.is-icon:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef0f8;
}

.svc-mega__thumb.is-icon img:not(.et-legacy *):not(.tw-body *) {
	width: 22px;
	height: auto;
	filter: none;
}

.svc-mega__text:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.svc-mega__text b:not(.et-legacy *):not(.tw-body *) {
	color: #000066;
	font-size: 15px;
	font-weight: 700;
}

.svc-mega__text small:not(.et-legacy *):not(.tw-body *) {
	overflow: hidden;
	color: #6b7290;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 右端の印: 自社ページは「›」、別サイトは「↗」 */
.pMenu .svc-mega__list a:not(.et-legacy *):not(.tw-body *)::after {
	content: '›';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: #000066;
	font-size: 18px;
}

.pMenu .svc-mega__list a.is-external:not(.et-legacy *):not(.tw-body *)::after {
	content: '↗';
	font-size: 14px;
}

/* グロー・サポートの各サービスは小さなボタンで */
.svc-mega__chips:not(.et-legacy *):not(.tw-body *) {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 8px 2px;
}

.pMenu .svc-mega__chips a:not(.et-legacy *):not(.tw-body *) {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #d6dbea;
	border-radius: 999px;
	color: #1a1f4a;
	font-size: 13px;
	transition: background 0.15s, border-color 0.15s;
}

.pMenu .svc-mega__chips a:hover:not(.et-legacy *):not(.tw-body *) {
	border-color: #000066;
	background: #eef0f8;
	color: #000066;
}

.pMenu .svc-mega__chips a.is-external:not(.et-legacy *):not(.tw-body *)::after {
	content: ' ↗';
}

@media screen and (max-width: 1100px) {
	.svc-mega__inner:not(.et-legacy *):not(.tw-body *) {
		padding: 18px 20px 22px;
	}

	.svc-mega__body:not(.et-legacy *):not(.tw-body *),
	.svc-mega__cols:not(.et-legacy *):not(.tw-body *) {
		gap: 14px;
	}

	.svc-mega__text b:not(.et-legacy *):not(.tw-body *) {
		font-size: 14px;
	}
}

/* スマホのヘッダー（769px 以下）: 高さは旧と同じ 70px（本文の位置を変えないため）。帯 4px ＋ 本体 66px */
@media screen and (max-width: 769px) {
	#spHead:not(.et-legacy *):not(.tw-body *) {
		background: linear-gradient(to right, #0f172a, #1e3a8a, #1e293b);
		box-shadow: var(--shadow-md);
	}

	#spHead:not(.et-legacy *):not(.tw-body *)::before {
		content: '';
		display: block;
		height: var(--hdr-stripe);
		background: linear-gradient(to right, #fb923c, #ef4444, #ec4899);
	}

	.spMenuBox:not(.et-legacy *):not(.tw-body *) {
		height: 66px;
	}

	.spLogo:not(.et-legacy *):not(.tw-body *) {
		width: auto;
		aspect-ratio: auto;
		padding: 0 0 0 16px;
	}

	.spLogo .hdr-logo__mark:not(.et-legacy *):not(.tw-body *) {
		margin-right: 8px;
		padding: 6px;
	}

	.spLogo .hdr-logo__mark img:not(.et-legacy *):not(.tw-body *) {
		width: 32px;
		height: 32px;
	}

	.spLogo .hdr-logo__catch:not(.et-legacy *):not(.tw-body *) {
		font-size: 12px;
	}

	.spLogo .hdr-logo__name:not(.et-legacy *):not(.tw-body *) {
		font-size: 14px;
	}

	#drawrMenu:not(.et-legacy *):not(.tw-body *) {
		top: calc(var(--hdr-stripe) + 9px);
		right: 8px;
		width: 48px;
		height: 48px;
		background: transparent;
	}

	#drawrMenu span:not(.et-legacy *):not(.tw-body *),
	#drawrMenu span:not(.et-legacy *):not(.tw-body *)::before,
	#drawrMenu span:not(.et-legacy *):not(.tw-body *)::after {
		width: 26px;
		height: 2px;
		border-radius: 2px;
	}

	#drawrMenu span:not(.et-legacy *):not(.tw-body *)::before {
		transform: translateY(-8px) rotate(0deg);
	}

	#drawrMenu span:not(.et-legacy *):not(.tw-body *)::after {
		transform: translateY(8px) rotate(0deg);
	}

	/* 開いたメニュー: ヘッダーの下に濃紺で開く（開く位置は LegacyBehaviors.tsx がヘッダーの高さに合わせる） */
	.spNav:not(.et-legacy *):not(.tw-body *) {
		height: calc(100dvh - 70px);
		margin: 0;
		padding: 8px 24px 40px;
		background: linear-gradient(to bottom, #0f172a, #1e3a8a);
	}

	.spNav li:not(.et-legacy *):not(.tw-body *) {
		padding: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.spNav li:first-child:not(.et-legacy *):not(.tw-body *) {
		border-top: 0;
	}

	.spNav li a:not(.et-legacy *):not(.tw-body *) {
		padding: 14px 4px;
		color: rgba(255, 255, 255, 0.92);
		font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
		font-size: 16px;
		font-weight: 500;
		text-align: left;
	}

	.spSns:not(.et-legacy *):not(.tw-body *) {
		margin-top: 24px;
	}

	.spSns a img:not(.et-legacy *):not(.tw-body *) {
		filter: brightness(0) invert(1);
	}

	.spBtn:not(.et-legacy *):not(.tw-body *) {
		gap: 10px;
		width: 100%;
		margin-top: 24px;
	}

	.spBtn a:not(.et-legacy *):not(.tw-body *) {
		flex: 1 1 0;
		width: auto;
		height: 48px;
	}
}

/* 動きを減らす設定の人には、メニューのフェードを付けない（上の PC ヘッダーの指定より後ろに置く） */
@media (prefers-reduced-motion: reduce) {
	.pMenu .parent .sub:not(.et-legacy *):not(.tw-body *),
	.pMenu .parent.is-open .sub:not(.et-legacy *):not(.tw-body *) {
		transform: none;
		transition: none;
	}

	.pMenu .parent .sub.svc-mega:not(.et-legacy *):not(.tw-body *),
	.pMenu .parent.is-open .sub.svc-mega:not(.et-legacy *):not(.tw-body *) {
		transition: none;
	}
}