/*
 * スマホのメニュー(右上の三本線)の見た目と動き(2026-10-29 のオーナーの指示。docs/10 T-68)
 * 印の class(ib-mm-toggle・ib-mm-panel)と、動きの class(is-opening・is-closing)は /assets/js/mobile-menu.js が付ける。
 * 開け閉めそのもの(トップは hidden、ほかのページは .is-open)は、もとのページの CSS のまま
 */

/* 三本線 → ×。線の太さ 2px・間 4px なので、上と下の線を 6px 寄せて傾ける */
.ib-mm-toggle span {
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.ib-mm-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ib-mm-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.ib-mm-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* メニューはヘッダーの下に重ねて出す(ページの中身を押し下げないので、滑り込む動きがきれいに見える)。
   長いときは、メニューの中だけがスクロールする(ページのスクロールにつながらない) */
@media (max-width: 1119.98px) {
	.ib-mm-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 72px);
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-bottom: 1px solid #e6ddd3;
		box-shadow: 0 18px 36px rgba(31, 42, 77, 0.14);
	}
}

@keyframes ib-mm-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ib-mm-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-12px);
	}
}

@keyframes ib-mm-item {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ib-mm-panel.is-opening {
	animation: ib-mm-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* リンクを上から順に少しずつ出す */
.ib-mm-panel.is-opening a {
	animation: ib-mm-item 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--ib-mm-i, 0) * 28ms + 40ms);
}

.ib-mm-panel.is-closing {
	animation: ib-mm-out 0.22s ease both;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ib-mm-toggle span {
		transition: none;
	}

	.ib-mm-panel.is-opening,
	.ib-mm-panel.is-opening a,
	.ib-mm-panel.is-closing {
		animation: none;
	}
}