/**
 * No.23 サイトヘッダー。
 *
 * Figma: header（186:4882）／ drawer（186:2870）
 * - scrolled=false: 白背景・下線・フルナビ
 * - scrolled=up: ピル型 progress + ロゴ徽章 + ナビ再表示
 * - scrolled=down: 進捗バーのみ（PC 8px / SP 5px、操作なし）
 * - drawer: ヘッダー下パネル（fade・overflow-y・body scroll lock）
 * - contact: SP アコーディオン（ボタン直下・右端、fade＋上から 0.5rem / 0.3s）
 * - ステート切替アニメは JS（translateY 退避→切替→復帰）
 *
 * ホバー例外（ガイドライン）:
 * ロゴ色・ドロワー開閉・メニューアイコン等は data-hover-* ではなく
 * 本ファイルの要素 CSS に直接記述する（scrolled / drawer 状態と連動するため）。
 */

/* --- ルート --- */

/*
 * 実ページ先頭の余白。--site-header-height は .site-header 上で scrolled により変わるため、
 * 文書の初期オフセット用に :root へ同じ初期値を置く。
 * プレビュー文書は wp_head より後で body の padding を上書きする。
 * SP サイドバーの sticky top はここでは変えない（T3.3）。
 */
:root {
	--site-header-height-pc: 6.625rem; /* 106px */
	--site-header-height-sp: 5.4375rem; /* 87px */
	--site-header-height: var(--site-header-height-pc);
}

@media (max-width: 767px) {
	:root {
		--site-header-height: var(--site-header-height-sp);
	}
}

body {
	padding-block-start: var(--site-header-height);
}

.site-header {
	--site-header-height-pc: 6.625rem; /* 106px */
	--site-header-height-sp: 5.4375rem; /* 87px */
	--site-header-height: var(--site-header-height-pc);
	--site-header-progress-height-down: 0.5rem; /* 8px（PC） */
	--site-header-progress-height-up-pc: 2.8125rem; /* 45px */
	--site-header-progress-height-up-sp: 2.1875rem; /* 35px */
	--site-header-inline-pc: 2rem; /* 32px */
	--site-header-inline-sp: 1rem; /* 16px */
	/* 切替時の退避距離は常にデフォルト高（down の薄いバーでもはみ出さない） */
	--site-header-slide-distance: var(--site-header-height-pc);
	--scroll-progress: 0%;
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	/* ドロワーをヘッダー下へ出すため overflow は visible（クリップは __inner 側で不要） */
	overflow: visible;
	max-height: var(--site-header-height);
	background-color: var(--wp--preset--color--base-white);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	color: var(--wp--preset--color--base-black);
	transform: translateY(0);
	will-change: transform;
}

/* プレビュー用ライブデモのみ前面へ */
.site-header--demo {
	z-index: 1000;
}

.site-header *,
.site-header *::before,
.site-header *::after {
	box-sizing: border-box;
}

/* --- progress --- */

.site-header__progress {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: var(--site-header-progress-height-down);
	pointer-events: none;
}

.site-header__progress-bg,
.site-header__progress-bar {
	position: absolute;
	background-color: var(--wp--preset--color--logo-blue);
	border-radius: var(--wp--custom--radius--pill, 500px);
}

.site-header__progress-bg {
	opacity: var(--wp--custom--opacity--50, 0.5);
}

/*
 * バーはトラックと同じ幅のまま左へずらし、トラック（clip-path）で切り抜く。
 * 幅を --scroll-progress にすると、高さより狭いとき角丸が縮んで先端が半円にならないため。
 */
.site-header__progress-bar {
	opacity: var(--wp--custom--opacity--100, 1);
	width: 100%;
	transform: translateX(calc(var(--scroll-progress) - 100%));
}

/* --- inner --- */

.site-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--site-header-height-pc);
	padding-inline: var(--site-header-inline-pc);
}

/* --- menu (drawer toggle) --- */

.site-header__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* 44px */
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 500px);
	background: transparent;
	color: inherit;
	cursor: pointer;
	z-index: 2;
}

.site-header__menu:focus {
	outline: none;
}

.site-header__menu:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

/* IconDrawer: 二重線 → open 時は各 line に rotate */
.icon-drawer {
	--icon-drawer-travel: calc(0.5rem - 1px);
	--icon-drawer-line-duration: 0.5s;
	position: relative;
	display: block;
	width: 1.375rem; /* 22px 相当 */
	height: 0.5rem;
	transform-origin: center center;
}

.icon-drawer__line {
	position: absolute;
	inset-inline: 0;
	display: block;
	height: 1px;
	background-color: currentColor;
	transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
	transform-origin: center center;
}

.icon-drawer__line:nth-child(1) {
	top: 0;
}

.icon-drawer__line:nth-child(2) {
	bottom: 0;
}

.site-header__menu[data-state="open"] .icon-drawer__line:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.site-header__menu[data-state="open"] .icon-drawer__line:nth-child(2) {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%) rotate(-45deg);
}

/* close 時 hover: 上下入れ替え（中央で最大拡縮＝縦回転風） */
@keyframes icon-drawer-line-top {
	0% {
		transform: scaleX(1) scaleY(1) translateY(0);
		opacity: 1;
	}

	50% {
		transform: scaleX(1.25) scaleY(2) translateY(calc(var(--icon-drawer-travel) / 2));
		opacity: 1;
	}

	100% {
		transform: scaleX(1) scaleY(1) translateY(var(--icon-drawer-travel));
		opacity: 1;
	}
}

@keyframes icon-drawer-line-bottom {
	0% {
		transform: scaleX(1) translateY(0);
		opacity: 1;
	}

	50% {
		transform: scaleX(0.75) translateY(calc(var(--icon-drawer-travel) / -2));
		opacity: 0.5;
	}

	100% {
		transform: scaleX(1) translateY(calc(-1 * var(--icon-drawer-travel)));
		opacity: 1;
	}
}

/* --- logo（__inner に対して左右中央） --- */

/* トップだけロゴを h1 で包む。箱を作らず、ロゴの配置・見た目は h1 が無いときと同じ。 */
.site-header__title {
	display: contents;
}

.site-header__logo .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header__logo.logo-cc {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	padding: 1rem;
	border-radius: 0 0 var(--wp--custom--radius--sm, 8px) var(--wp--custom--radius--sm, 8px);
	text-decoration: none;
	color: inherit;
	transition: transform var(--hover-duration, 0.25s ease);
}

.logo-cc__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

.logo-cc__img--square.logo-cc__img--lg {
	width: 6.125rem; /* 98px */
	height: 4.5625rem; /* 73px */
}

.logo-cc__img--square.logo-cc__img--lg.logo-cc__img--tone-default {
	display: block;
}

.logo-cc__img--square.logo-cc__img--sm,
.logo-cc__img--icon,
.logo-cc__img--lg.logo-cc__img--tone-hover {
	display: none;
}

/* PC hover 用: 黒／青を重ねて切替 */
.logo-cc__img--lg.logo-cc__img--tone-default,
.logo-cc__img--lg.logo-cc__img--tone-hover {
	transition: opacity var(--hover-duration, 0.25s ease);
}

/* --- contact --- */

.site-header__contact {
	--site-header-contact-menu-anim: 0.3s;
	--site-header-contact-menu-enter-y: -0.5rem; /* 開くとき上オフセット */
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--custom--atom--lg, 0.75rem);
	z-index: 2;
}

.site-header__contact-links {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--atom--lg, 0.75rem);
}

.site-header__contact-link {
	font-size: var(--wp--preset--font-size--text-xs, 0.875rem);
	padding-inline: 0.75rem;
	text-decoration: none;
}

a.site-header__contact-link:hover,
a.site-header__contact-link:focus,
a.site-header__contact-link:focus-visible {
	text-decoration: none;
}

.site-header__contact-mail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem; /* 36px */
	height: 2.75rem; /* 44px */
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.site-header__contact-mail:focus {
	outline: none;
}

.site-header__contact-mail:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.site-header__contact-mail .icon {
	width: 2rem;
	height: 2rem;
}

.site-header__contact-mail--toggle {
	display: none;
}

/*
 * SP contact メニュー（Figma 49:3125）。
 * 既定は非表示。SP（max-width:767px）で display:block。
 */
.site-header__contact-menu {
	--site-header-contact-menu-bg: color-mix(
		in srgb,
		var(--wp--preset--color--logo-blue, #004098) 70%,
		transparent
	);
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem); /* 8px — 三角の余白 */
	right: 0;
	z-index: 30;
	box-sizing: border-box;
	width: 9.75rem; /* 156px */
	margin: 0;
	padding: 0;
	background-color: var(--site-header-contact-menu-bg);
	color: var(--wp--preset--color--base-white, #fff);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(var(--site-header-contact-menu-enter-y));
	transition:
		opacity var(--site-header-contact-menu-anim) ease,
		visibility var(--site-header-contact-menu-anim) ease,
		transform var(--site-header-contact-menu-anim) ease;
}

.site-header__contact-menu[data-state="open"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* 上向き三角（ボタン中央寄り） */
.site-header__contact-menu::before {
	content: '';
	position: absolute;
	top: -0.6875rem; /* ≈11px */
	right: 0.4375rem; /* (36px ボタン - 22px 三角) / 2 */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0.6875rem 0.6875rem;
	border-color: transparent transparent var(--site-header-contact-menu-bg) transparent;
	pointer-events: none;
}

.site-header__contact-menu-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1px;
	width: 100%;
	padding: var(--wp--custom--atom--rg, 0.5rem);
}

.site-header__contact-menu a.site-header__contact-menu-link,
.site-header__contact-menu a.site-header__contact-menu-link:visited,
.site-header__contact-menu a.site-header__contact-menu-link:hover,
.site-header__contact-menu a.site-header__contact-menu-link:focus,
.site-header__contact-menu a.site-header__contact-menu-link:active {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: var(--wp--custom--atom--rg, 0.5rem) 0.75rem;
	border: 0;
	border-bottom: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--base-white, #fff);
	color: var(--wp--preset--color--base-white, #fff);
	font-family: var(--wp--preset--font-family--jp-sans, sans-serif);
	font-size: var(--wp--preset--font-size--text-xs, 0.875rem);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1;
	text-align: center;
	text-decoration: none;
}

.site-header__contact-menu a.site-header__contact-menu-link:last-child {
	border-bottom: 0;
}

.site-header__contact-menu a.site-header__contact-menu-link:focus {
	outline: none;
}

.site-header__contact-menu a.site-header__contact-menu-link:focus-visible {
	outline: 1px solid var(--wp--preset--color--base-white, #fff);
	outline-offset: 2px;
}

.site-header__contact-menu-label {
	display: block;
	white-space: nowrap;
}

/* ========== scrolled=down: 進捗バーのみ ========== */

.site-header[data-scrolled="down"] {
	--site-header-height: var(--site-header-progress-height-down);
	min-height: var(--site-header-progress-height-down);
	height: var(--site-header-progress-height-down);
	max-height: var(--site-header-progress-height-down);
	background: transparent;
	border-block-end-color: transparent;
	pointer-events: none;
}

.site-header[data-scrolled="down"] .site-header__inner {
	display: none;
}

.site-header[data-scrolled="down"] .site-header__progress {
	display: block;
	inset: 0;
	height: 100%;
	clip-path: inset(0);
}

.site-header[data-scrolled="down"] .site-header__progress-bg,
.site-header[data-scrolled="down"] .site-header__progress-bar {
	inset-block: 0;
	inset-inline-start: 0;
	height: 100%;
	border-radius: 0;
}

/* progress__bg: 全幅トラック（scrolled=up と同じ logo-blue + opacity-50） */
.site-header[data-scrolled="down"] .site-header__progress-bg {
	width: 100%;
	background-color: var(--wp--preset--color--logo-blue);
	opacity: var(--wp--custom--opacity--50, 0.5);
}

.site-header[data-scrolled="down"] .site-header__progress-bar {
	border-start-end-radius: var(--wp--custom--radius--pill, 500px);
	border-end-end-radius: var(--wp--custom--radius--pill, 500px);
}

/* ========== scrolled=up: ピル + ナビ ========== */

.site-header[data-scrolled="up"] {
	max-height: var(--site-header-height-pc);
	background: transparent;
	border-block-end-color: transparent;
}

.site-header[data-scrolled="up"] .site-header__progress {
	display: block;
	inset-block-start: 1.875rem; /* 30px */
	inset-inline: var(--wp--custom--molecule--rg, clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem));
	inset-block-end: auto;
	height: var(--site-header-progress-height-up-pc);
	clip-path: inset(0 round var(--wp--custom--radius--pill, 500px));
}

.site-header[data-scrolled="up"] .site-header__progress-bg,
.site-header[data-scrolled="up"] .site-header__progress-bar {
	inset: 0 auto 0 0;
	height: 100%;
	width: 100%;
}

.site-header[data-scrolled="up"] .site-header__inner {
	min-height: var(--site-header-height-pc);
	/* progress 外側 = molecule--rg、バー内の drawer/contact 余白 = atom--xxl */
	padding-inline: calc(
		var(--wp--custom--molecule--rg, clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem))
		+ var(--wp--custom--atom--xxl, 1rem)
	);
}

.site-header[data-scrolled="up"] .site-header__menu {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--wp--preset--color--base-white);
}

.site-header[data-scrolled="up"] .site-header__logo.logo-cc {
	width: 5.125rem; /* 82px */
	height: 5.125rem;
	padding: var(--wp--custom--atom--xxl, 1rem);
	border-radius: var(--wp--custom--radius--pill, 500px);
	background-color: var(--wp--preset--color--base-white);
	box-shadow: var(--wp--custom--shadow--logo, 0 4px 4px rgba(0, 0, 0, 0.25));
}

.site-header[data-scrolled="up"] .logo-cc__img--square {
	display: none !important;
}

.site-header[data-scrolled="up"] .logo-cc__img--icon.logo-cc__img--lg.logo-cc__img--tone-default {
	display: block;
	width: 3.125rem; /* 50px */
	height: 2.8125rem; /* 45px */
}

.site-header[data-scrolled="up"] .logo-cc__img--icon.logo-cc__img--lg.logo-cc__img--tone-hover {
	display: none;
	width: 3.125rem;
	height: 2.8125rem;
}

.site-header[data-scrolled="up"] .site-header__contact-link {
	color: var(--wp--preset--color--base-white);
}

.site-header[data-scrolled="up"] .site-header__contact-mail {
	color: var(--wp--preset--color--base-white);
	height: 2rem;
	width: 2rem;
}

.site-header[data-scrolled="up"] .site-header__contact-mail .icon {
	width: 2rem;
	height: 2rem;
}

/* ========== レスポンシブ ========== */

@media (max-width: 767px) {
	.site-header,
	.site-header[data-scrolled="up"] {
		max-height: var(--site-header-height-sp);
		--site-header-height: var(--site-header-height-sp);
		--site-header-slide-distance: var(--site-header-height-sp);
		--site-header-progress-height-down: 0.3125rem; /* 5px SP */
	}

	.site-header .site-header__inner {
		min-height: var(--site-header-height-sp);
		padding-inline: var(--site-header-inline-sp);
	}

	.site-header .site-header__contact-links,
	.site-header .site-header__contact-mail--link {
		display: none;
	}

	.site-header .site-header__contact-mail--toggle {
		display: inline-flex;
	}

	.site-header .site-header__contact-menu {
		display: block;
	}

	.site-header .site-header__menu {
		order: 0;
		width: 2.25rem;
		height: 2.75rem;
	}

	.site-header .site-header__logo.logo-cc {
		padding: 0.5rem;
	}

	.site-header .logo-cc__img--square.logo-cc__img--lg {
		display: none;
	}

	.site-header .logo-cc__img--square.logo-cc__img--sm {
		display: block;
		width: 4.625rem;
		height: 3.4375rem;
	}

	.site-header[data-scrolled="up"] .site-header__progress {
		inset-block-start: 1.625rem;
		/* SP ヘッダー例外: 左右は atom--xxl（他セクションの molecule--rg とは別） */
		inset-inline: var(--wp--custom--atom--xxl, 1rem);
		height: var(--site-header-progress-height-up-sp);
	}

	.site-header[data-scrolled="up"] .site-header__inner {
		min-height: var(--site-header-height-sp);
		padding-inline: calc(var(--wp--custom--atom--xxl, 1rem) * 2);
	}

	.site-header[data-scrolled="up"] .site-header__logo.logo-cc {
		width: 3.25rem;
		height: 3.25rem;
		padding: 0.5rem;
	}

	.site-header[data-scrolled="up"] .logo-cc__img--icon.logo-cc__img--lg {
		display: none !important;
	}

	.site-header[data-scrolled="up"] .logo-cc__img--icon.logo-cc__img--sm {
		display: block;
		width: 2.25rem;
		height: 2.0625rem;
	}

	/* SP の scrolled=up は背景を白のまま。アイコンはプログレスバー上なので白 */
	.site-header[data-scrolled="up"] {
		background-color: var(--wp--preset--color--base-white);
	}
}

@media (min-width: 768px) {
	.site-header .site-header__contact-mail--toggle {
		display: none;
	}

	.site-header .site-header__contact-menu {
		display: none;
	}

	.site-header .logo-cc__img--square.logo-cc__img--sm {
		display: none;
	}

	/* --- PC hover: drawer --- */
	.site-header .site-header__menu {
		transition:
			background-color var(--hover-duration, 0.25s ease),
			color var(--hover-duration, 0.25s ease),
			transform var(--hover-duration, 0.25s ease);
		transform-origin: center center;
	}

	/* scrolled=false: 背景なし・線のみ logo-blue（ライン入れ替えアニメ） */
	.site-header[data-scrolled="false"] .site-header__menu:hover,
	.site-header[data-scrolled="false"] .site-header__menu:focus-visible {
		background-color: transparent;
		color: var(--wp--preset--color--logo-blue);
		transform: none;
	}

	/* scrolled=up: 背景 logo-blue・線白（ライン入れ替えアニメ） */
	.site-header[data-scrolled="up"] .site-header__menu:hover,
	.site-header[data-scrolled="up"] .site-header__menu:focus-visible {
		background-color: var(--wp--preset--color--logo-blue);
		color: var(--wp--preset--color--base-white);
		transform: none;
	}

	/* drawer close: 上下ラインが拡大/縮小しながら入れ替わる */
	.site-header[data-drawer="close"] .site-header__menu:hover .icon-drawer__line:nth-child(1),
	.site-header[data-drawer="close"] .site-header__menu:focus-visible .icon-drawer__line:nth-child(1) {
		animation: icon-drawer-line-top var(--icon-drawer-line-duration, 0.5s) ease-out forwards;
	}

	.site-header[data-drawer="close"] .site-header__menu:hover .icon-drawer__line:nth-child(2),
	.site-header[data-drawer="close"] .site-header__menu:focus-visible .icon-drawer__line:nth-child(2) {
		animation: icon-drawer-line-bottom var(--icon-drawer-line-duration, 0.5s) ease-out forwards;
	}

	/* drawer open: 閉じるボタンと同じ rotate */
	.site-header[data-drawer="open"] .site-header__menu:hover,
	.site-header[data-drawer="open"] .site-header__menu:focus-visible {
		transform: none;
	}

	.site-header[data-drawer="open"] .site-header__menu:hover .icon-drawer,
	.site-header[data-drawer="open"] .site-header__menu:focus-visible .icon-drawer {
		animation: hover-icon-rotate var(--hover-icon-rotate-duration, 0.6s) forwards;
	}

	/* --- PC hover: contact link 下線色 --- */
	.site-header[data-scrolled="false"] .site-header__contact-link[data-hover-underline] .menu-link__label::after {
		background-color: var(--wp--preset--color--logo-blue);
	}

	/* scrolled=up: 下線は白のまま（text change で currentColor が変わっても固定） */
	.site-header[data-scrolled="up"] .site-header__contact-link[data-hover-underline] .menu-link__label::after {
		background-color: var(--wp--preset--color--base-white);
	}

	/* scrolled=up: contact メールアイコン hover は白（false は logo-blue のまま） */
	.site-header[data-scrolled="up"] .site-header__contact-mail--link:hover,
	.site-header[data-scrolled="up"] .site-header__contact-mail--link:focus-visible,
	.site-header[data-scrolled="up"] .site-header__contact-mail--link.is-preview-hover {
		color: var(--wp--preset--color--base-white);
	}

	.site-header[data-scrolled="up"] .site-header__contact-mail--link:hover .icon,
	.site-header[data-scrolled="up"] .site-header__contact-mail--link:focus-visible .icon,
	.site-header[data-scrolled="up"] .site-header__contact-mail--link.is-preview-hover .icon {
		color: var(--wp--preset--color--base-white);
	}

	/* --- PC hover: logo（色 = blue アセットへ） --- */
	.site-header .logo-cc__img--square.logo-cc__img--lg.logo-cc__img--tone-hover,
	.site-header .logo-cc__img--icon.logo-cc__img--lg.logo-cc__img--tone-hover {
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		pointer-events: none;
	}

	.site-header[data-scrolled="false"] .logo-cc__img--icon.logo-cc__img--lg.logo-cc__img--tone-hover {
		display: none; /* false 時は icon 非表示のまま */
	}

	.site-header[data-scrolled="up"] .logo-cc__img--square.logo-cc__img--lg.logo-cc__img--tone-hover {
		display: none; /* up 時は square 非表示のまま */
	}

	.site-header .site-header__logo.logo-cc:hover .logo-cc__img--lg.logo-cc__img--tone-default,
	.site-header .site-header__logo.logo-cc:focus-visible .logo-cc__img--lg.logo-cc__img--tone-default {
		opacity: 0;
	}

	.site-header .site-header__logo.logo-cc:hover .logo-cc__img--lg.logo-cc__img--tone-hover,
	.site-header .site-header__logo.logo-cc:focus-visible .logo-cc__img--lg.logo-cc__img--tone-hover {
		opacity: 1;
	}

	/* scrolled=up: 色 + 拡大 1.1 */
	.site-header[data-scrolled="up"] .site-header__logo.logo-cc:hover,
	.site-header[data-scrolled="up"] .site-header__logo.logo-cc:focus-visible {
		transform: translate(-50%, -50%) scale(1.1);
	}
}

/* ========== ドロワー（drawer） ========== */

/*
 * 閉じているときは display: none（画面内に置いたままだと loading="lazy" の画像も読み込まれるため）。
 * フェードは display を allow-discrete で遷移させ、開くときの始点を @starting-style で指定する。
 * 非対応のブラウザではフェードなしで開閉する。
 */
.drawer {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--site-header-height);
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	height: calc(100dvh - var(--site-header-height));
	max-height: calc(100dvh - var(--site-header-height));
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: var(--wp--preset--color--base-white);
	color: var(--wp--preset--color--base-black);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		display 0.3s allow-discrete;
}

.site-header[data-drawer="open"] .drawer,
.drawer[data-state="open"] {
	display: block;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@starting-style {
	.site-header[data-drawer="open"] .drawer,
	.drawer[data-state="open"] {
		opacity: 0;
	}
}

/* scrolled=up + drawer open: 見た目はそのまま、背景だけ白＋下線（false と同じ） */
.site-header[data-scrolled="up"][data-drawer="open"] {
	background-color: var(--wp--preset--color--base-white);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.drawer__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.drawer__body {
	width: 100%;
}

.drawer__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 20rem; /* 320px */
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base-white);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--base-black);
	overflow: hidden;
}

/* 縦線は各項目の右側に引き、行の最後の列だけ消す（項目数が列数で割り切れないときも最後の項目の右に線が出る） */
.drawer__item:not(:nth-child(3n)) {
	border-inline-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--base-black);
}

/* tablet-wide 以下（theme.json max 1023px）: 2 × 3 */
@media (max-width: 1023px) {
	.drawer__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.drawer__item:nth-child(3n) {
		border-inline-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--base-black);
	}

	.drawer__item:nth-child(2n) {
		border-inline-end: 0;
	}
}

.drawer__item-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--molecule--xxs, 1.125rem);
	flex: 1 1 auto;
	width: 100%;
	padding-block-start: var(--wp--custom--molecule--xs, 1.25rem);
	padding-block-end: var(--wp--custom--atom--xxl, 1rem);
	padding-inline: var(--wp--custom--atom--xxl, 1rem);
	box-sizing: border-box;
}

.drawer__item-inner > .drawer-submenu {
	width: 100%;
	flex: 1 1 auto;
}

.drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--custom--atom--md, 0.625rem);
	width: 100%;
}

.drawer__label {
	display: inline-flex;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--text-md, 1rem);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1.25;
}

/* theme.json の a:hover underline を打ち消し（data-hover-underline の ::after のみ使う） */
a.drawer__label:hover,
a.drawer__label:focus,
a.drawer__label:focus-visible {
	text-decoration: none;
}

.drawer__label:focus {
	outline: none;
}

.drawer__label:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

/* SP 用 +/−（PC では非表示）。アコーディオン開閉は JS */
.drawer__submenu-toggle {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	appearance: none;
}

.drawer__submenu-toggle .icon {
	inline-size: 1.375rem;
	block-size: 1.5rem;
}

.drawer__submenu-toggle [data-icon="minus"] {
	display: none;
}

.drawer__submenu-toggle[data-state="open"] [data-icon="plus"] {
	display: none;
}

.drawer__submenu-toggle[data-state="open"] [data-icon="minus"] {
	display: inline-flex;
}

.drawer__submenu-toggle:focus {
	outline: none;
}

.drawer__submenu-toggle:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

/* PC: card__action（右下三角）を流用。hover は __item 起点 */
.drawer__item > .card__action {
	--card-action-size: 2.75rem;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	box-sizing: border-box;
	width: var(--card-action-size);
	height: var(--card-action-size);
	padding: var(--wp--custom--atom--xs, 0.25rem);
	pointer-events: none;
	color: var(--wp--preset--color--base-white);
}

.drawer__item > .card__action::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 var(--card-action-size) var(--card-action-size);
	border-color: transparent transparent color-mix(in srgb, var(--wp--preset--color--base-black) 10%, transparent) transparent;
	transition: border-color 0.5s ease;
}

.drawer__item > .card__action .icon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

.drawer__item > .card__action [data-hover-action] {
	transition: transform 0.5s ease;
}

.drawer__foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"home sns contact"
		"close close close";
	align-items: center;
	gap: var(--wp--custom--atom--xxl, 1rem);
	width: 100%;
	padding-block: 0 var(--wp--custom--molecule--lg, 1.75rem);
	padding-inline: var(--site-header-inline-pc);
	box-sizing: border-box;
}

.drawer__foot-home {
	grid-area: home;
	justify-self: start;
}

.drawer__foot-sns {
	grid-area: sns;
	justify-self: center;
}

.drawer__foot-contact {
	grid-area: contact;
	justify-self: end;
}

.drawer__foot-close {
	grid-area: close;
	justify-self: center;
}

.drawer__foot .wp-block-button,
.drawer__foot .wp-block-button__link {
	max-width: 20.5rem; /* 328px */
	min-width: 10.5rem; /* 168px */
}

/* 静止時は base-black、hover（invert / bg-slide）は logo-blue＋文字は base-white */
.drawer__foot .btn[data-variant="outline"],
.drawer__foot .wp-block-button.is-style-outline :is(.btn, .wp-block-button__link),
.drawer__foot .wp-block-button.is-style-primary :is(.btn, .wp-block-button__link) {
	--hover-invert-a: var(--wp--preset--color--base-white);
	--hover-invert-b: var(--wp--preset--color--logo-blue);
	color: var(--wp--preset--color--base-black);
	border-color: var(--wp--preset--color--base-black);
}

.drawer__foot .btn[data-variant="outline"][data-hover-text="invert"]:hover,
.drawer__foot .btn[data-variant="outline"][data-hover-text="invert"]:focus-visible,
.drawer__foot .btn[data-variant="outline"][data-hover-text="invert"].is-preview-hover,
.drawer__foot .wp-block-button.is-style-outline :is(.btn, .wp-block-button__link)[data-hover-text="invert"]:hover,
.drawer__foot .wp-block-button.is-style-outline :is(.btn, .wp-block-button__link)[data-hover-text="invert"]:focus-visible,
.drawer__foot .wp-block-button.is-style-outline :is(.btn, .wp-block-button__link)[data-hover-text="invert"].is-preview-hover,
.drawer__foot .wp-block-button.is-style-primary :is(.btn, .wp-block-button__link)[data-hover-text="invert"]:hover,
.drawer__foot .wp-block-button.is-style-primary :is(.btn, .wp-block-button__link)[data-hover-text="invert"]:focus-visible,
.drawer__foot .wp-block-button.is-style-primary :is(.btn, .wp-block-button__link)[data-hover-text="invert"].is-preview-hover {
	color: var(--hover-invert-a);
}

.drawer__foot-sns .sns-links {
	margin: 0;
	gap: var(--wp--custom--atom--rg);
}

.drawer__foot-sns .sns-links__link {
	inline-size: auto;
	block-size: auto;
}

.drawer__foot-sns .sns-links__link .icon {
	inline-size: 2rem;
	block-size: 2rem;
}

/* body scroll lock（ドロワー表示中） */
html.is-drawer-open,
html.is-drawer-open body {
	overflow: hidden;
}

/* --- PC hover: card__action ＋ セカンダリはフェードイン / アウト --- */
@media (min-width: 768px) {
	.drawer__item:hover > .card__action::before,
	.drawer__item:focus-within > .card__action::before {
		border-color: transparent transparent var(--wp--preset--color--logo-blue) transparent;
	}

	.drawer__item:hover > .card__action [data-hover-action],
	.drawer__item:focus-within > .card__action [data-hover-action] {
		transform: translate(0);
	}

	.site-header .drawer__item-inner > .drawer-submenu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity 0.5s ease,
			visibility 0.5s ease;
	}

	.site-header .drawer__item:hover > .drawer__item-inner > .drawer-submenu,
	.site-header .drawer__item:focus-within > .drawer__item-inner > .drawer-submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* --- SP: リスト＋plus、フッター縦積み --- */
@media (max-width: 767px) {
	.site-header {
		--site-header-height: var(--site-header-height-sp);
	}

	.site-header[data-scrolled="down"] {
		--site-header-height: var(--site-header-progress-height-down);
	}

	.drawer__items {
		grid-template-columns: 1fr;
	}

	.drawer__item {
		min-height: 0;
		border-block-end-color: var(--wp--preset--color--line-grey);
		border-inline-end: 0 !important;
	}

	.drawer__item > .card__action {
		display: none;
	}

	.drawer__submenu-toggle {
		display: inline-flex;
	}

	.drawer__item-inner {
		gap: 0;
		padding-block-start: var(--wp--custom--atom--xxl, 1rem);
	}

	/* SP: アコーディオン（max-height + fade、0.5s） */
	.drawer__item-inner > .drawer-submenu {
		display: block;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		margin-block-start: 0;
		pointer-events: none;
		transition:
			max-height 0.5s ease,
			opacity 0.5s ease,
			visibility 0.5s ease,
			margin-block-start 0.5s ease;
	}

	.drawer__item[data-state="open"] > .drawer__item-inner > .drawer-submenu {
		max-height: 40rem;
		opacity: 1;
		visibility: visible;
		margin-block-start: var(--wp--custom--molecule--xxs, 1.125rem);
		pointer-events: auto;
	}

	.drawer__head {
		align-items: center;
	}

	.drawer__foot {
		grid-template-columns: 1fr;
		grid-template-areas:
			"contact"
			"home"
			"sns"
			"close";
		justify-items: center;
		padding-inline: var(--site-header-inline-sp);
		padding-block-end: var(--wp--custom--molecule--lg, 1.75rem);
	}

	.drawer__foot-home,
	.drawer__foot-sns,
	.drawer__foot-contact,
	.drawer__foot-close {
		justify-self: center;
	}

	.drawer__foot .wp-block-button {
		width: 100%;
		max-width: 20.5rem;
	}

	.drawer__foot .wp-block-button__link {
		width: 100%;
	}
}