/* フォームの入力と送信には触れない、2026年10月だけのヘッダー装飾。 */
html.oce-halloween-form #header .logo { position: relative; display: inline-block; vertical-align: top; }
html.oce-halloween-form #header .logo::after {
    content: '';
    position: absolute;
    right: -50px;
    top: -7px;
    width: 49px;
    height: 44px;
    background: url('halloween-bat.png?v=20261006a') center / contain no-repeat;
    pointer-events: none;
    animation: oce-form-bat-flutter 8s ease-in-out infinite;
}
@keyframes oce-form-bat-flutter {
    0%, 4%, 22%, 100% { transform: rotate(0); }
    9% { transform: translateY(-2px) rotate(-7deg); }
    15% { transform: rotate(4deg); }
}
/* スマホではロゴ(右端135px固定)と右寄せの見出しのすき間が「画面幅-308px」になる。
   すき間の半分の大きさにして中央に置き、見出しに詰まって見えないようにする。 */
@media screen and (max-width: 480px) {
    html.oce-halloween-form #header .logo::after {
        --oce-bat-gap: calc(100vw - 308px);
        --oce-bat-w: clamp(22px, calc(var(--oce-bat-gap) * 0.5), 36px);
        right: auto;
        left: calc(100% + (var(--oce-bat-gap) - var(--oce-bat-w)) / 2);
        top: calc(50% - var(--oce-bat-w) * 0.45);
        width: var(--oce-bat-w);
        height: calc(var(--oce-bat-w) * 0.9);
    }
}
/* すき間が42px未満では22pxでも窮屈なので出さない。 */
@media screen and (max-width: 349px) {
    html.oce-halloween-form #header .logo::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.oce-halloween-form #header .logo::after { animation: none; }
}