@charset "UTF-8";
/* ============================================================
  KINJO HALLOWEEN 2026 ― 派手盛り版（v2）スタイル
  ・kinjo-halloween.js とセットで /assets/event-halloween/ に置きます
  ・読み込みは header.php / footer.php の期間判定（10/1〜10/31）の中で行います
  ・クリックや予約の邪魔はしません
============================================================ */
:root{--kh-night:#12061f;--kh-purple:#3b0f5c;--kh-violet:#7b2cbf;--kh-orange:#ff7a00;--kh-gold:#ffd23f;--kh-green:#7cff4f}

/* ---------- 夜空の背景 ---------- */
html body{background:radial-gradient(1200px 600px at 85% -5%,#4b1a78 0%,transparent 60%),linear-gradient(180deg,#1a0830 0%,#12061f 45%,#0b0414 100%) fixed!important}
#kh-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 55% 35%,#fff,transparent),radial-gradient(1px 1px at 75% 15%,#fff,transparent),radial-gradient(1px 1px at 90% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 20% 85%,#fff,transparent);background-size:400px 400px;animation:kh-twinkle 4s ease-in-out infinite alternate;opacity:.7}
@keyframes kh-twinkle{to{opacity:.3}}
#kh-moon{position:fixed;top:90px;right:4vw;width:150px;height:150px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 35% 35%,#fff8d6,#ffd98a 55%,#f0a43a);box-shadow:0 0 60px 20px rgba(255,200,90,.35),0 0 160px 60px rgba(255,140,0,.18)}
#kh-moon:after{content:"";position:absolute;left:38px;top:40px;width:70px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%23140820' d='M32 8c2 0 3-3 3-5 1 2 2 3 2 5 7-6 18-7 27-3-6 2-8 6-8 11-4-3-8-3-11 1-2-3-6-4-8-1-2 3-3 7-5 10-2-3-3-7-5-10-2-3-6-2-8 1-3-4-7-4-11-1 0-5-2-9-8-11 9-4 20-3 27 3 0-2 1-3 2-5 0 2 1 5 3 5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 夜空を見せるための調整（既存の背景色が夜空を隠してしまうため） ---------- */
.sliderWrapper{background:transparent!important}
.subpage .topicpath li,.subpage .topicpath li a{color:#ffd9a8!important}
@media (min-width:769px){
  .main,.top .main{background:transparent!important}
}
@media (max-width:768px){
  .container,.top .container{background:transparent!important}
}

/* ---------- 上部リボン（カウントダウン付き） ---------- */
#kh-ribbon{position:relative;z-index:9998;background:linear-gradient(90deg,#ff7a00,#ff3d00,#7b2cbf,#ff7a00);background-size:300% 100%;animation:kh-slide 8s linear infinite;color:#fff;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;text-align:center;padding:10px 46px 24px;font-weight:900;letter-spacing:.08em;line-height:1.4;text-shadow:0 2px 0 #3b0f5c,0 0 12px rgba(0,0,0,.4);overflow:hidden}
@keyframes kh-slide{to{background-position:300% 0}}
#kh-ribbon .kh-big{font-size:22px}
#kh-ribbon .kh-cd{display:inline-block;margin-left:10px;padding:2px 12px;border-radius:999px;background:#12061f;color:var(--kh-gold);font-size:14px;box-shadow:0 0 12px var(--kh-gold)}
#kh-ribbon .kh-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;font-size:16px;cursor:pointer}
#kh-lights{position:absolute;left:0;right:0;bottom:0;height:20px;pointer-events:none;display:flex;justify-content:space-around}
#kh-lights i{width:12px;height:14px;border-radius:50% 50% 45% 45%;background:var(--kh-orange);box-shadow:0 0 10px 3px var(--kh-orange);animation:kh-blink 1.2s ease-in-out infinite}
#kh-lights i:nth-child(3n+1){background:var(--kh-green);box-shadow:0 0 10px 3px var(--kh-green);animation-delay:.4s}
#kh-lights i:nth-child(3n+2){background:#c77dff;box-shadow:0 0 10px 3px #c77dff;animation-delay:.8s}
@keyframes kh-blink{50%{opacity:.25;box-shadow:none}}

/* ---------- ヘッダー ---------- */
header{background:linear-gradient(180deg,#fff4e0,#ffe2b8)!important;border-bottom:4px solid var(--kh-orange)!important;box-shadow:0 6px 24px rgba(255,122,0,.45)}

/* ---------- グローバルナビ（PC表示のみ。スマホはスライドメニューのため対象外） ---------- */
@media (min-width:769px){
  nav{background:linear-gradient(180deg,#4a1475,#2a0a45)!important;border-bottom:3px solid var(--kh-orange)!important;box-shadow:0 0 18px rgba(123,44,191,.8)}
  nav .navigation>li>a,nav .navigation>li>span{color:#fff!important;text-shadow:0 0 8px rgba(255,122,0,.9);transition:transform .2s}
  nav .navigation>li:hover>a{transform:translateY(-2px) rotate(-2deg);color:var(--kh-gold)!important}
  nav .navigation>li.current>a,nav .navigation>li ul li.current>a{background:var(--kh-orange)!important;color:#12061f!important;text-shadow:none}
  nav .navigation>li ul li{background:#2a0a45!important}
  /* ヘッダーに線を足した分、スライダーの開始位置を下げる */
  .sliderWrapper{padding-top:150px}
}

/* ---------- メインスライダー：光る額縁 ---------- */
.slider,.slider_hotel{position:relative;border:6px solid var(--kh-orange)!important;border-radius:14px;box-shadow:0 0 0 4px var(--kh-purple),0 0 30px 8px rgba(255,122,0,.7),0 0 80px 20px rgba(123,44,191,.5)!important;animation:kh-glow 2.4s ease-in-out infinite alternate;overflow:hidden}
@keyframes kh-glow{to{box-shadow:0 0 0 4px var(--kh-purple),0 0 50px 14px rgba(255,160,0,.9),0 0 120px 30px rgba(170,60,255,.6)}}
#kh-stamp{position:absolute;left:14px;top:14px;z-index:5;pointer-events:none;background:#12061f;color:var(--kh-orange);border:3px solid var(--kh-orange);border-radius:10px;padding:6px 12px;font:900 18px/1 "Arial Black",sans-serif;letter-spacing:.1em;transform:rotate(-8deg);box-shadow:0 0 16px var(--kh-orange);animation:kh-wobble 2s ease-in-out infinite}
@keyframes kh-wobble{50%{transform:rotate(-3deg) scale(1.06)}}

/* ---------- 見出し：ネオン ---------- */
h2,.ttl_skin01,.ttl_skin02,.ttl_skin03,.ttl_skin04,.ttl_skin05{color:#ff7a00!important;text-shadow:0 0 6px rgba(255,122,0,.6),0 0 18px rgba(255,122,0,.4)}
.ttl_skin01:before,.ttl_skin03:before{content:"🎃";margin-right:.35em;display:inline-block;animation:kh-bounce 1.6s ease-in-out infinite}
@keyframes kh-bounce{50%{transform:translateY(-5px) rotate(10deg)}}

/* ---------- エリアボタン ---------- */
.mv_area{border-top:4px solid var(--kh-orange)!important;box-shadow:0 0 24px rgba(255,122,0,.35)}
.mv_arealink li a,.mv_area a{transition:transform .2s,box-shadow .2s}
.mv_arealink li a:hover,.mv_area a:hover{transform:scale(1.06) rotate(-1.5deg);box-shadow:0 0 18px var(--kh-orange)}
.box_map .item{transition:box-shadow .2s}
.box_map .item:hover{box-shadow:0 0 0 2px var(--kh-orange),0 0 18px var(--kh-orange)}

/* ---------- バナー類：光らせてゆらす ---------- */
.li_banner img,.bn_recommend img,.bnr_large img,.box_movie .bn img,.li_recommend img{border-radius:8px;box-shadow:0 0 0 3px var(--kh-orange),0 0 16px rgba(255,122,0,.55);transition:transform .25s}
.li_banner a:hover img,.bn_recommend a:hover img,.bnr_large a:hover img,.box_movie .bn a:hover img,.li_recommend a:hover img{transform:scale(1.04) rotate(1deg);box-shadow:0 0 0 3px var(--kh-gold),0 0 26px var(--kh-gold)}

/* ---------- フッター：墓場シルエット ---------- */
footer{position:relative;background:#0b0414!important;color:#d9c8f0!important;padding-top:70px!important}
footer:before{content:"";position:absolute;left:0;right:0;top:-1px;height:70px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath fill='%2312061f' d='M0 0h600v40c-30-10-50 5-80 0-20-4-30-14-50-6l-6-18h-14l-6 22c-30 6-60-10-90 0-12 4-20 2-30-2v-16a10 10 0 0 0-20 0v14c-30-6-60 8-100 2-14-2-24-10-40-8l-4-14h-12l-4 18c-20 6-34 0-50 4z'/%3E%3C/svg%3E") top/100% 100% no-repeat}

/* ---------- 飾り（クモの巣・クモ・かぼちゃ・コウモリ・おばけ） ---------- */
.kh-web{position:fixed;top:0;width:160px;height:160px;z-index:9997;pointer-events:none;opacity:.8}
.kh-web.l{left:0}.kh-web.r{right:0;transform:scaleX(-1)}
.kh-spider{position:fixed;top:0;right:90px;z-index:9997;pointer-events:none;animation:kh-drop 5s ease-in-out infinite alternate}
.kh-spider:before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:600px;background:rgba(255,255,255,.5)}
@keyframes kh-drop{0%{transform:translateY(30px)}100%{transform:translateY(180px)}}
.kh-pumpkins{position:fixed;left:0;bottom:-8px;z-index:9997;pointer-events:none;display:flex;align-items:flex-end;gap:2px}
.kh-pumpkins svg{filter:drop-shadow(0 0 14px rgba(255,140,0,.9));animation:kh-bob 2.6s ease-in-out infinite}
.kh-pumpkins svg:nth-child(2){animation-delay:.5s}.kh-pumpkins svg:nth-child(3){animation-delay:1s}
.kh-pumpkins .kh-face{animation:kh-flicker 3s infinite}
@keyframes kh-flicker{0%,100%{fill:#ffd23f}45%{fill:#ffb000}50%{fill:#5a2a00}55%{fill:#ffd23f}}
@keyframes kh-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.kh-bat{position:fixed;z-index:9997;pointer-events:none;left:-80px;animation:kh-fly linear forwards}
.kh-bat svg{width:100%;animation:kh-flap .2s ease-in-out infinite alternate}
@keyframes kh-fly{to{transform:translate(calc(100vw + 160px),var(--dy))}}
@keyframes kh-flap{to{transform:scaleY(.4)}}
.kh-ghost{position:fixed;z-index:9997;pointer-events:none;width:90px;top:40vh;right:-120px;transition:right 1.2s cubic-bezier(.3,1.6,.5,1),opacity .6s;filter:drop-shadow(0 0 16px rgba(200,180,255,.9))}
.kh-ghost{display:block;text-decoration:none}
.kh-ghost.in{right:10px;pointer-events:auto;cursor:pointer}
.kh-ghost.in:hover{transform:scale(1.08)}
.kh-ghost b{position:absolute;top:-30px;right:0;background:#fff;color:#3b0f5c;font:900 16px/1 sans-serif;padding:8px 10px;border-radius:12px;white-space:nowrap}
#kh-fx{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9996;pointer-events:none}

@media (max-width:767px){
  #kh-ribbon .kh-big{font-size:16px}#kh-ribbon .kh-cd{display:block;width:max-content;margin:4px auto 0;font-size:12px}
  #kh-moon{width:80px;height:80px;top:70px}#kh-moon:after{left:20px;top:22px;width:40px;height:22px}
  .kh-web{width:80px;height:80px}.kh-spider{display:none}
  .kh-pumpkins svg{width:44px!important}.kh-pumpkins svg:nth-child(3){display:none}
  .kh-ghost{width:60px}
  #kh-stamp{font-size:12px;padding:4px 8px}
}
@media (prefers-reduced-motion:reduce){
  .kh-bat,.kh-ghost,#kh-fx{display:none!important}
  .kh-spider,.kh-pumpkins svg,#kh-lights i,#kh-ribbon,.slider,.slider_hotel,#kh-stamp,#kh-sky{animation:none!important}
}
@media print{#kh-ribbon,#kh-sky,#kh-moon,.kh-web,.kh-spider,.kh-pumpkins,.kh-bat,.kh-ghost,#kh-fx{display:none!important}}