/* 2026年10月限定。採用済み3体のスプライトと追加4体の透明PNGを表示する。 */
.oce-halloween-mark {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	transform: translateY(-50%);
}
.oce-halloween-mark:hover,
.oce-halloween-mark:focus-visible { background: rgba(237,20,85,.12); }
.oce-halloween-mark:focus-visible,
.oce-halloween-close:focus-visible,
.oce-halloween-option:focus-visible { outline: 3px solid #1d4c79; outline-offset: 1px; }
.oce-halloween-icon {
	display: block;
	height: 64px;
	background: url('../images/oce-halloween-characters.png') no-repeat;
	background-size: 192px 64px;
}
.oce-halloween-mark.is-bat .oce-halloween-icon { width: 71px; }
.oce-halloween-mark.is-ghost .oce-halloween-icon { width: 55px; }
.oce-halloween-mark.is-jack .oce-halloween-icon { width: 64px; background-position: -128px 0; }
.oce-halloween-mark.is-bat .oce-halloween-icon,
.oce-halloween-mark.is-ghost .oce-halloween-icon,
.oce-halloween-logo.is-bat .oce-halloween-icon,
.oce-halloween-gallery.is-ghost .oce-halloween-icon,
.oce-halloween-voice.is-bat .oce-halloween-icon,
.oce-halloween-section.is-bat .oce-halloween-icon { background-size: contain; background-position: center; }
.oce-halloween-mark.is-bat .oce-halloween-icon,
.oce-halloween-logo.is-bat .oce-halloween-icon,
.oce-halloween-voice.is-bat .oce-halloween-icon,
.oce-halloween-section.is-bat .oce-halloween-icon { background-image: url('../images/oce-halloween-bat.png'); }
.oce-halloween-mark.is-ghost .oce-halloween-icon,
.oce-halloween-gallery.is-ghost .oce-halloween-icon { background-image: url('../images/oce-halloween-ghost.png'); }
.oce-halloween-mark.is-zombie .oce-halloween-icon,
.oce-halloween-mark.is-vampire .oce-halloween-icon,
.oce-halloween-mark.is-franken .oce-halloween-icon,
.oce-halloween-mark.is-witchhat .oce-halloween-icon { width: 64px; background-size: contain; background-position: center; }
.oce-halloween-mark.is-zombie .oce-halloween-icon { background-image: url('../images/oce-halloween-zombie.png'); }
.oce-halloween-mark.is-vampire .oce-halloween-icon { background-image: url('../images/oce-halloween-vampire.png'); }
.oce-halloween-mark.is-franken .oce-halloween-icon { background-image: url('../images/oce-halloween-franken.png'); }
.oce-halloween-mark.is-witchhat .oce-halloween-icon { background-image: url('../images/oce-halloween-witch-hat.png'); }
.oce-halloween-mark.is-visible .oce-halloween-icon { animation: oce-halloween-float 8s ease-in-out infinite; }
.oce-halloween-mark.is-bat.is-visible .oce-halloween-icon { animation: oce-halloween-flutter 8s ease-in-out infinite; }
.oce-halloween-logo {
	top: -11px;
	right: auto;
	left: -56px;
	width: 44px;
	height: 44px;
	pointer-events: none;
	transform: none;
}
.oce-halloween-logo.is-jack .oce-halloween-icon {
	width: 38px;
	height: 38px;
	background-size: 114px 38px;
	background-position: -76px 0;
}
.oce-halloween-logo.is-bat .oce-halloween-icon {
	width: 44px;
	height: 40px;
}
.oce-halloween-logo.is-franken .oce-halloween-icon,
.oce-halloween-logo.is-vampire .oce-halloween-icon { width: 40px; height: 40px; }
.oce-halloween-logo.is-zombie .oce-halloween-icon { width: 44px; height: 44px; }
.oce-halloween-logo.is-witchhat .oce-halloween-icon { width: 42px; height: 40px; }
.oce-halloween-logo.is-visible .oce-halloween-icon { animation: oce-halloween-rock 8s ease-in-out infinite; transform-origin: 50% 80%; }
.oce-halloween-gallery { top: 25%; right: 0; width: 56px; height: 56px; }
.oce-halloween-gallery.is-ghost .oce-halloween-icon {
	width: 52px;
	height: 60px;
}
.oce-halloween-school { right: 0; width: 64px; height: 64px; }
.oce-halloween-voice { right: auto; left: 0; width: 64px; height: 64px; }
.oce-halloween-voice.is-bat .oce-halloween-icon {
	width: 62px;
	height: 56px;
}
.oce-halloween-section,
.oce-halloween-campus { right: 0; }
.oce-halloween-section.is-bat .oce-halloween-icon {
	width: 64px;
	height: 58px;
}
/* 講師ページの校舎見出しは中央寄せの inline-block。右の余白にマークを収め、校名と重ねない。 */
.lecturerList h3.oce-halloween-campus-host[class^="lecturer-title-"] { padding-right: 76px; }
html.oce-halloween-on #shibuyaCampus,
html.oce-halloween-on #ginzaCampus { scroll-margin-top: 88px; }
@media (min-width: 769px) {
	.oce-halloween-logo { top: -2px; left: 338px; }
	.oce-halloween-voice { left: max(0px, calc(50% - 390px)); }
}
@media (max-width: 360px) {
	#lessonFee .sectionTitle > h3:last-of-type .oce-halloween-mark,
	#lessonFee .sectionTitle > h3:last-of-type .oce-halloween-mark.is-vampire .oce-halloween-icon,
	#lessonFee .sectionTitle > h3:last-of-type .oce-halloween-mark.is-franken .oce-halloween-icon { width: 50px; height: 50px; }
	#lessonFee .sectionTitle > h3:last-of-type .oce-halloween-mark.is-jack .oce-halloween-icon {
		width: 50px;
		height: 50px;
		background-size: 150px 50px;
		background-position: -100px 0;
	}
}
/* 「レベルに応じて選べるコース」は 345px 未満で右端のマークに届くため、右に余白を取って文字をよける。 */
@media (max-width: 359px) {
	/* 320px ではロゴの左が 60px しかないため、画面端に寄りすぎないようロゴとの間を少し詰める。 */
	.oce-halloween-logo { left: -52px; }
	html.oce-halloween-on #courseLevel > .sectionTitle > h3 { box-sizing: border-box; padding-right: 64px; }
}
.oce-halloween-overlay {
	position: fixed;
	inset: 0;
	z-index: 10020;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(23, 37, 74, .48);
	overscroll-behavior: contain;
}

.oce-halloween-sheet {
	box-sizing: border-box;
	width: min(100%, 480px);
	max-height: 90vh;
	overflow: auto;
	padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
	border-top: 5px solid #ed1455;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: #17254a;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, .15);
}

.oce-halloween-sheet h2 {
	margin: 4px 48px 16px 0;
	font-size: 22px;
	color: #ed1455;
}

.oce-halloween-close {
	float: right;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	font-size: 27px;
	cursor: pointer;
}

.oce-halloween-question {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.oce-halloween-options {
	display: grid;
	gap: 9px;
	margin: 16px 0;
}

.oce-halloween-options button {
	min-height: 48px;
	padding: 10px 13px;
	border: 1px solid #c8cce0;
	border-radius: 9px;
	background: #fff;
	color: #17254a;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.oce-halloween-options button[disabled] {
	cursor: default;
}

.oce-halloween-options button.is-correct,
.oce-halloween-result.is-correct {
	border-color: #38a268;
	background: #e8f7ed;
	color: #126039;
}

.oce-halloween-options button.is-wrong {
	border-color: #c75555;
	background: #fff0f0;
}

.oce-halloween-result {
	min-height: 24px;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 700;
}
.oce-halloween-result.is-wrong {
	border-color: #c75555;
	background: #fff0f0;
	color: #842a2a;
}

@keyframes oce-halloween-float {
	0%, 4%, 22%, 100% { transform: translateY(0); }
	13% { transform: translateY(-4px); }
}
@keyframes oce-halloween-flutter {
	0%, 4%, 22%, 100% { transform: rotate(0); }
	9% { transform: translateY(-4px) rotate(-7deg); }
	15% { transform: translateY(-1px) rotate(4deg); }
}
@keyframes oce-halloween-rock {
	0%, 4%, 22%, 100% { transform: rotate(0); }
	13% { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.oce-halloween-mark.is-visible .oce-halloween-icon,
	.oce-halloween-mark.is-bat.is-visible .oce-halloween-icon,
	.oce-halloween-logo.is-visible .oce-halloween-icon { animation: none; }
}