/* ハロウィン仕様 */
/* Base */
html:before { opacity: .3;}
.breadcrumb li:first-child a::before { /*content: "\1f383"*/content: "\1f47b";}
.ttl {
    position: relative;
}

.ttl:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://cdn1.cdn-fu-kakumei.com/292/common/img/h2_halloween.webp);
    background-repeat: no-repeat;
    background-position: center -265px;
    background-size: 470px;
    filter: brightness(0.6) contrast(1.3) saturate(0.8);
    z-index: -1;
    pointer-events: none;

    /* 楕円形スポットライト効果のマスク（幅470px × 高さ100px）
    -webkit-mask-image: radial-gradient(ellipse 250px 50px at var(--x, 50%) var(--y, 50%), 
        black 0%, 
        black 80%,
        rgba(0,0,0,0.8) 85%,
        rgba(0,0,0,0.5) 92%,
        rgba(0,0,0,0.2) 96%,
        transparent 100%
    );
    mask-image: radial-gradient(ellipse 250px 80px at var(--x, 50%) var(--y, 50%), 
        black 0%, 
        black 80%,
        rgba(0,0,0,0.8) 85%,
        rgba(0,0,0,0.5) 92%,
        rgba(0,0,0,0.2) 96%,
        transparent 100%
    );
    
    transition: --x 0.1s ease, --y 0.1s ease; */     
}
@media (max-width: 480px) {
  .ttl:before { background-position: center -200px;}
}

#top .ttlPink {
    position: relative;
}

#top .ttlPink:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(https://cdn1.cdn-fu-kakumei.com/292/common/img/h2_halloween.webp);
    background-repeat: no-repeat;
    background-position: center -265px;
    background-size: 470px;
    filter: brightness(0.6) contrast(1.3) saturate(0.8);
    z-index: -1;
    pointer-events: none;

    /* 楕円形スポットライト効果のマスク（幅470px × 高さ100px）
    -webkit-mask-image: radial-gradient(ellipse 250px 50px at var(--x, 50%) var(--y, 50%), 
        black 0%, 
        black 80%,
        rgba(0,0,0,0.8) 85%,
        rgba(0,0,0,0.5) 92%,
        rgba(0,0,0,0.2) 96%,
        transparent 100%
    );
    mask-image: radial-gradient(ellipse 250px 80px at var(--x, 50%) var(--y, 50%), 
        black 0%, 
        black 80%,
        rgba(0,0,0,0.8) 85%,
        rgba(0,0,0,0.5) 92%,
        rgba(0,0,0,0.2) 96%,
        transparent 100%
    );
    
    transition: --x 0.1s ease, --y 0.1s ease; */     
}
@media (max-width: 480px) {
  #top .ttlPink:before { background-position: center -275px;}
}

#top .ranking_box h3.ttl:before { background-image: none;}
#privacy .ttl:before,
#profile .ttl:before,
#schedule .top_schedule .ttl:before,
#coupon .contents .ttl:before,
#event .contents .ttl:before,
#ranking .ranking_box .ttl:before,
#mixitup .ttl:before,
#mixitup_cos .ttl:before,
#history-section .ttlPink:before,
#magazine .ttl:before,
.system2 .ttl:before,
.system3 .ttl:before,
.system4 .ttl:before,
.system5 .ttl:before,
.system6 .ttl:before,
.system7 .ttl:before,
.system8 .ttl:before,
.system9 .ttl:before,
.system10 .ttl:before,
.system11 .ttl:before,
.point_content3 .ttl:before,
.point_content4 .ttl:before,
.point_content5 .ttl:before,
.point_content6 .ttl:before,
.point_content7 .ttl:before,
.point_content8 .ttl:before { background-image: none;}
#I, #T { font-size: 2.4em;}
#I {
  opacity: 1;
  animation: flickerI 2s linear  reverse infinite;
}
#I::after {
  content: '';
  width: 150%;
  -webkit-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  -moz-box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
  box-shadow: -35px 0px 60px 8px rgba(255,255,255,1);
}
#L, #G {
  animation: flickerLG 2s linear reverse infinite;
  position: relative;
}
#L::after, 
#L::before  {
  content:' ';
  width: 100px;
  height: 100px;
  background: var(--white);
  position: absolute;
  top: -50%;
  left: 100%;
  border-radius: 100%;
  opacity: 0.05;
  filter: blur(10px);
}
#L::after {
  width: 200px;
  height: 200px;
  top: -150%;
  left: -5%;
  opacity: 0.1;
  filter: blur(10px);
}
#H {
  animation: flickerH 2s linear reverse infinite
}

#T {
  animation: flickerH 2s linear reverse infinite
}

@keyframes flickerI {
  0% {
    opacity: 0.4;
  }
  5% {
    opacity: 0.5;
  }
  10% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.85;
  }
  25% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.25;
  }
  45% {
    opacity: 0.5;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flickerLG {
  0% {
    opacity: 0.19;
  }
  5% {
    opacity: 0.2;
  }
  10% {
    opacity: 0.25;
  }
  15% {
    opacity: 0.35;
  }
  25% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.4;
  }
  35% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.25;
  }
  45% {
    opacity: 0.2;
  }
  60% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.35;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.4;
  }
}

@keyframes flickerH {
  0% {
    opacity: 0.15;
  }
  5% {
    opacity: 0.2;
  }
  10% {
    opacity: 0.12;
  }
  15% {
    opacity: 0.2;
  }
  25% {
    opacity: 0.15;
  }
  30% {
    opacity: 0.4;
  }
  35% {
    opacity: 0.05;
  }
  40% {
    opacity: 0.12;
  }
  45% {
    opacity: 0.15;
  }
  60% {
    opacity: 0.3;
  }
  70% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.18;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes flickerT {
  0% {
    opacity: 0.01;
  }
  5% {
    opacity: 0.05;
  }
  10% {
    opacity: 0.03;
  }
  15% {
    opacity: 0.1;
  }
  25% {
    opacity: 0.07;
  }
  30% {
    opacity: 0.1;
  }
  35% {
    opacity: 0.05;
  }
  40% {
    opacity: 0.06;
  }
  45% {
    opacity: 0.1;
  }
  60% {
    opacity: 0.;
  }
  70% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.;
  }
  90% {
    opacity: 0.0;
  }
  100% {
    opacity: 0.1;
  }
}    
@media (max-width: 480px) {
    .ttl:before {
        background-size: 96%;
    }
}

.bat {
    position: absolute;
    width: 50px;
    height: 50px;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

.bat svg {
    width: 100%;
    height: 100%;
    fill: #000;
}

/* Footer GoogleMap */
.bat1 {
    animation: fly1 15s infinite linear;
    top: 10%;
}

.bat2 {
    animation: fly2 18s infinite linear;
    top: 30%;
    animation-delay: -5s;
}

.bat3 {
    animation: fly3 20s infinite linear;
    top: 50%;
    animation-delay: -10s;
}

.bat4 {
    animation: fly4 16s infinite linear;
    top: 70%;
    animation-delay: -3s;
}

.bat5 {
    animation: fly5 22s infinite linear;
    top: 20%;
    animation-delay: -8s;
}

@keyframes fly1 {
    0% {
        left: -60px;
        transform: translateY(0px) scale(1) rotateY(0deg);
    }
    25% {
        transform: translateY(-20px) scale(1.2) rotateY(0deg);
    }
    50% {
        transform: translateY(20px) scale(0.8) rotateY(180deg);
    }
    75% {
        transform: translateY(-10px) scale(1.1) rotateY(180deg);
    }
    100% {
        left: calc(100% + 60px);
        transform: translateY(0px) scale(1) rotateY(0deg);
    }
}

@keyframes fly2 {
    0% {
        left: calc(100% + 60px);
        transform: translateY(0px) scale(1.3) rotateY(180deg);
    }
    25% {
        transform: translateY(30px) scale(0.9) rotateY(180deg);
    }
    50% {
        transform: translateY(-25px) scale(1.1) rotateY(0deg);
    }
    75% {
        transform: translateY(15px) scale(1) rotateY(0deg);
    }
    100% {
        left: -60px;
        transform: translateY(0px) scale(1.3) rotateY(180deg);
    }
}

@keyframes fly3 {
    0% {
        left: -60px;
        transform: translateY(0px) scale(0.7) rotateY(0deg);
    }
    30% {
        transform: translateY(-40px) scale(1) rotateY(0deg);
    }
    60% {
        transform: translateY(30px) scale(1.2) rotateY(180deg);
    }
    100% {
        left: calc(100% + 60px);
        transform: translateY(0px) scale(0.7) rotateY(0deg);
    }
}

@keyframes fly4 {
    0% {
        left: calc(100% + 60px);
        transform: translateY(0px) scale(1.1) rotateY(180deg);
    }
    40% {
        transform: translateY(-30px) scale(0.8) rotateY(180deg);
    }
    70% {
        transform: translateY(25px) scale(1.3) rotateY(0deg);
    }
    100% {
        left: -60px;
        transform: translateY(0px) scale(1.1) rotateY(180deg);
    }
}

@keyframes fly5 {
    0% {
        left: -60px;
        transform: translateY(0px) scale(0.9) rotateY(0deg);
    }
    20% {
        transform: translateY(40px) scale(1.2) rotateY(0deg);
    }
    50% {
        transform: translateY(-35px) scale(0.7) rotateY(180deg);
    }
    80% {
        transform: translateY(20px) scale(1.1) rotateY(180deg);
    }
    100% {
        left: calc(100% + 60px);
        transform: translateY(0px) scale(0.9) rotateY(0deg);
    }
}

/* 羽ばたきアニメーション */
.bat svg {
    animation: flap 0.3s infinite alternate;
}

@keyframes flap {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0.7);
    }
}