/* ハロウィン期間限定テーマ
   halloween.js が 2026/11/1 0:00(JST) 以降は自動で html.halloween を外す。
   完全に消す時は各ページの <link href="halloween.css"> と <script src="halloween.js"> を削除。 */

html.halloween {
  --navy: #2c1f45;
  --navy-mid: #46336b;
  --navy-light: #f3ecfa;
}

html.halloween header { border-bottom: 3px solid #e8803a; }
html.halloween .logo span { color: #f4a85e; }
html.halloween .section-title::after,
html.halloween #menu .section-title::after { background: #e8803a; }
html.halloween .dot { background: rgba(244,168,94,0.55); }
html.halloween .dot.active { background: #e8803a; }

/* ヒーロー：紫がかったオーバーレイ */
html.halloween .slide::after {
  background: linear-gradient(to bottom, rgba(70,35,110,0.32) 0%, rgba(18,8,36,0.70) 100%);
}

/* ヒーローの飾り（コウモリ・かぼちゃ） */
.halloween-deco { display: none; }
html.halloween .halloween-deco {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
/* コウモリ：画面を横切って飛ぶ（.bat）＋体の上下（svg）＋羽をパタパタ（.wing）
   羽は左右に分けて、肩の付け根を支点に回転させる */
.halloween-deco .bat { --flap: 0.2s; position: absolute; left: 0; opacity: 0.92; animation: hw-fly-r 11s linear infinite; }
.halloween-deco .bat.rev { animation-name: hw-fly-l; }
.halloween-deco .bat svg, .halloween-deco .pumpkin svg { width: 100%; height: auto; display: block; }
.halloween-deco .bat svg { overflow: visible; animation: hw-bob calc(var(--flap) * 2.6) ease-in-out infinite alternate; }
.halloween-deco .bat svg path { fill: #1a1128; }
.halloween-deco .bat .wing { animation-duration: var(--flap); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.halloween-deco .bat .wr { transform-origin: 34px 11px; animation-name: hw-wing-r; }
.halloween-deco .bat .wl { transform-origin: 30px 11px; animation-name: hw-wing-l; }
.halloween-deco .b1 { top: 92px;  width: 88px; --flap: 0.2s;  animation-duration: 10s; animation-delay: -3s; }
.halloween-deco .b2 { top: 150px; width: 62px; --flap: 0.17s; animation-duration: 13s; animation-delay: -7s; }
.halloween-deco .b3 { top: 235px; width: 40px; --flap: 0.14s; animation-duration: 15s; animation-delay: -11s; opacity: 0.78; }
.halloween-deco .b4 { top: 118px; width: 52px; --flap: 0.16s; animation-duration: 9s;  animation-delay: -1s; }
.halloween-deco .b5 { top: 290px; width: 34px; --flap: 0.13s; animation-duration: 12s; animation-delay: -8s; opacity: 0.72; }
.halloween-deco .pumpkin { position: absolute; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); animation: hw-glow 2.8s ease-in-out infinite alternate; }
.halloween-deco .p2 { animation-delay: -1.4s; }
.halloween-deco .p1 { bottom: 74px; left: 4%; width: 96px; }
.halloween-deco .p2 { bottom: 66px; right: 5%; width: 72px; }
.halloween-deco .hw-label {
  position: absolute; left: 0; right: 0; bottom: 64px;
  text-align: center; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.4em; color: #f4a85e;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
@keyframes hw-fly-r {
  0%   { transform: translate(-16vw, 0); }
  12%  { transform: translate(2vw, -26px); }
  25%  { transform: translate(21vw, 14px); }
  38%  { transform: translate(37vw, -22px); }
  50%  { transform: translate(52vw, 18px); }
  62%  { transform: translate(68vw, -18px); }
  75%  { transform: translate(84vw, 16px); }
  88%  { transform: translate(101vw, -14px); }
  100% { transform: translate(118vw, 0); }
}
@keyframes hw-fly-l {
  0%   { transform: translate(118vw, 0); }
  12%  { transform: translate(101vw, 22px); }
  25%  { transform: translate(84vw, -16px); }
  38%  { transform: translate(68vw, 20px); }
  50%  { transform: translate(52vw, -18px); }
  62%  { transform: translate(37vw, 16px); }
  75%  { transform: translate(21vw, -22px); }
  88%  { transform: translate(2vw, 14px); }
  100% { transform: translate(-16vw, 0); }
}
@keyframes hw-wing-r {
  0%   { transform: rotate(-34deg); }
  100% { transform: rotate(28deg); }
}
@keyframes hw-wing-l {
  0%   { transform: rotate(34deg); }
  100% { transform: rotate(-28deg); }
}
@keyframes hw-bob {
  0%   { transform: translateY(-7%) rotate(-4deg); }
  100% { transform: translateY(7%) rotate(4deg); }
}
@keyframes hw-glow {
  0%   { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
  100% { filter: drop-shadow(0 0 16px rgba(255,150,50,0.75)); }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-deco .bat, .halloween-deco .bat svg, .halloween-deco .bat .wing, .halloween-deco .pumpkin { animation: none; }
  .halloween-deco .b1 { left: 7%; }
  .halloween-deco .b2, .halloween-deco .b3, .halloween-deco .b4, .halloween-deco .b5 { display: none; }
}
@media (max-width: 640px) {
  .halloween-deco .b1 { top: 84px; width: 60px; }
  .halloween-deco .b2 { top: 128px; width: 44px; }
  .halloween-deco .b3 { display: none; }
  .halloween-deco .b4 { top: 108px; width: 38px; }
  .halloween-deco .b5 { display: none; }
  .halloween-deco .p1 { bottom: 66px; left: 3%; width: 62px; }
  .halloween-deco .p2 { bottom: 60px; right: 3%; width: 50px; }
  .halloween-deco .hw-label { font-size: 0.66rem; letter-spacing: 0.3em; bottom: 58px; }
}

/* フッターにかぼちゃ */
html.halloween footer .footer-name::before {
  content: '';
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='22' cy='38' rx='14' ry='20' fill='%23e07a30'/><ellipse cx='42' cy='38' rx='14' ry='20' fill='%23e07a30'/><ellipse cx='32' cy='38' rx='13' ry='21' fill='%23f0924a'/><path d='M30 18C30 12 32 10 37 8' stroke='%234e7a55' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
}