/* クリスマス仕様 */
/* Base */
html:before {
    background-image: none;
}
main {
    background: none;
}
/* 降雪エフェクト */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.snow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
}
.snow-pile {
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(230, 240, 255, 1) 30%,
        rgba(255, 255, 255, 0.9) 100%
    );
    border-radius: 50% 50% 0 0 / 30% 30% 0 0; /* 山が上向き */
    animation: snowPile 30s ease-out forwards; /* 標準5s → 10s(ゆっくり) */
    pointer-events: none;
    box-shadow: 0 -2px 8px rgba(200, 220, 255, 0.6);
    z-index: 1;
}
@keyframes snowPile {
    0% {
        height: 0;
        opacity: 0;
        top: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        height: 15px;
        opacity: 1;
        top: -5px;
    }
}

/* ボケボケ背景用のコンテナ */
.bokeh-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* 光る円の基本スタイル */
.bokeh-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(5px);
}

/* 個別の円のスタイル */
.bokeh-circle:nth-child(1) {
  background: #4edc2d;
  box-shadow: 0 0 8px 7px #4edc2d;
  bottom: 8%;
  left: -2%;
  width: 153px;
  height: 153px;
  opacity: 0.16;
  animation: flash 5s infinite linear;
}

.bokeh-circle:nth-child(2) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 10%;
  left: 0%;
  width: 110px;
  height: 110px;
  opacity: 0.4;
  animation: flash 5s infinite linear;
}

.bokeh-circle:nth-child(3) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 32%;
  left: 28%;
  width: 150px;
  height: 150px;
  opacity: 0.1;
  animation: flash 8s infinite linear;
}

.bokeh-circle:nth-child(4) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: -8%;
  left: 15%;
  width: 165px;
  height: 165px;
  opacity: 0.1;
  animation: flash 4s infinite linear;
}

.bokeh-circle:nth-child(5) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 52%;
  left: 23%;
  width: 80px;
  height: 80px;
  opacity: 0.4;
  animation: flash 3s infinite linear;
}

.bokeh-circle:nth-child(6) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 70%;
  left: 18%;
  width: 173px;
  height: 173px;
  opacity: 0.1;
  animation: flash 7s infinite linear;
}

.bokeh-circle:nth-child(7) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 67%;
  left: 26%;
  width: 150px;
  height: 150px;
  opacity: 0.1;
  animation: flash 6s infinite linear;
}

.bokeh-circle:nth-child(8) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 51%;
  left: 39%;
  width: 80px;
  height: 80px;
  opacity: 0.4;
  animation: flash 7s infinite linear;
}

.bokeh-circle:nth-child(9) {
  background: #4edc2d;
  box-shadow: 0 0 8px 7px #4edc2d;
  top: 78%;
  left: 40%;
  width: 80px;
  height: 80px;
  opacity: 0.4;
  animation: flash 10s infinite linear;
}

.bokeh-circle:nth-child(10) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 3%;
  left: 47%;
  width: 120px;
  height: 120px;
  opacity: 0.1;
  animation: flash 5s infinite linear;
}

.bokeh-circle:nth-child(11) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 30%;
  left: -10%;
  width: 180px;
  height: 180px;
  opacity: 0.3;
  animation: flash 8s infinite linear;
}

.bokeh-circle:nth-child(12) {
  background: #4edc2d;
  box-shadow: 0 0 8px 7px #4edc2d;
  top: 28%;
  left: 50%;
  width: 180px;
  height: 180px;
  opacity: 0.2;
  animation: flash 4s infinite linear;
}

.bokeh-circle:nth-child(13) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  opacity: 0.3;
  animation: flash 8s infinite linear;
}

.bokeh-circle:nth-child(14) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 76%;
  left: 63%;
  width: 150px;
  height: 150px;
  opacity: 0.2;
  animation: flash 5s infinite linear;
}

.bokeh-circle:nth-child(15) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 12%;
  left: 69%;
  width: 80px;
  height: 80px;
  opacity: 0.3;
  animation: flash 10s infinite linear;
}

.bokeh-circle:nth-child(16) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 74%;
  left: 70%;
  width: 140px;
  height: 140px;
  opacity: 0.5;
  animation: flash 6s infinite linear;
}

.bokeh-circle:nth-child(17) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: 24%;
  left: 72%;
  width: 220px;
  height: 220px;
  opacity: 0.2;
  animation: flash 10s infinite linear;
}

.bokeh-circle:nth-child(18) {
  background: #4edc2d;
  box-shadow: 0 0 5px 4px #4edc2d;
  top: 48%;
  left: 80%;
  width: 200px;
  height: 200px;
  opacity: 0.2;
  animation: flash 3s infinite linear;
}

.bokeh-circle:nth-child(19) {
  background: #e95744;
  box-shadow: 0 0 5px 4px #e95744;
  top: 20%;
  left: 85%;
  width: 70px;
  height: 70px;
  opacity: 0.6;
  animation: flash 5s infinite linear;
}

.bokeh-circle:nth-child(20) {
  background: #fef6ec;
  box-shadow: 0 0 5px 4px #fef6ec;
  top: -15%;
  left: 90%;
  width: 200px;
  height: 200px;
  opacity: 0.4;
  animation: flash 8s infinite linear;
}

/* 1/4 が 赤 */
.bokeh-circle:nth-child(4n+1) {
  background: #E63946;
  box-shadow: 0 0 10px 6px rgba(230, 57, 70, 0.6);
}

/* 1/4 が 緑 */
.bokeh-circle:nth-child(4n+2) {
  background: #2D6A4F;
  box-shadow: 0 0 10px 6px rgba(45, 106, 79, 0.6);
}

/* 1/4 が ゴールド */
.bokeh-circle:nth-child(4n+3) {
  background: #FFD700;
  box-shadow: 0 0 10px 7px rgba(255, 215, 0, 0.7);
}

/* 1/4 が ホワイト（きらめき） */
.bokeh-circle:nth-child(4n) {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 15px 10px rgba(255,255,255,0.6);
}

/* ボケアニメーション */
@keyframes flash {
  0% {
    opacity: 0.1;
    filter: blur(5px);
  }
  30% {
    opacity: 0.6;
    filter: blur(10px);
  }
  60% {
    opacity: 0.2;
    filter: blur(50px);
  }
  90% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.5;
    filter: blur(10px);
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .bokeh-circle {
    transform: scale(0.5);
  }
}

#index span.lg,
#profile span.lg,
#privacy span.lg,
.system2 span.lg,
.system3 span.lg,
.system4 span.lg,
.system6 span.lg,
.system7 span.lg,
.system8 span.lg,
.system9 span.lg,
.system10 span.lg,
.system11 span.lg,
.faq_content span.lg,
.point_content3 span.lg,
.point_content4 span.lg,
.point_content5 span.lg,
.point_content6 span.lg,
.point_content7 span.lg,
.point_content8 span.lg,
.garls-class span.lg,
.cosplaylist span.lg {
    text-shadow: none;
    animation: none;
}

.lg {
      position: relative;
      text-shadow: 
        0 0 5px rgba(193, 202, 255, 0.8),  
        0 0 10px rgba(193, 202, 255, 0.7), 
        0 0 15px rgba(193, 199, 255, 0.6),
        0 0 20px rgba(193, 202, 255, 0.5), 
        0 0 10px rgba(193, 199, 255, 0.4); 
    
      animation: neonBlink 3s infinite alternate; /* 1.5s デフォルト  */
}

@keyframes neonBlink {
  0% {
    text-shadow: 
      0 0 5px rgba(193, 202, 255, 0.8),
      0 0 10px rgba(193, 202, 255, 0.7),
      0 0 15px rgba(193, 199, 255, 0.6),
      0 0 20px rgba(193, 202, 255, 0.5),
      0 0 10px rgba(193, 199, 255, 0.4);
  }
  25% {
    text-shadow: 
      0 0 3px rgba(193, 202, 255, 0.9),
      0 0 6px rgba(193, 202, 255, 0.8),
      0 0 9px rgba(193, 199, 255, 0.7),
      0 0 12px rgba(193, 202, 255, 0.6),
      0 0 15px rgba(193, 199, 255, 0.5);
  }
  50% {
    text-shadow: none; 
  }
  75% {
    text-shadow: 
      0 0 3px rgba(193, 202, 255, 0.9),
      0 0 6px rgba(193, 202, 255, 0.8),
      0 0 9px rgba(193, 199, 255, 0.7),
      0 0 12px rgba(193, 202, 255, 0.6),
      0 0 15px rgba(193, 199, 255, 0.5);
  }
  100% {
    text-shadow: 
      0 0 5px rgba(193, 202, 255, 0.8),
      0 0 10px rgba(193, 202, 255, 0.7),
      0 0 15px rgba(193, 199, 255, 0.6),
      0 0 20px rgba(193, 202, 255, 0.5),
      0 0 10px rgba(193, 199, 255, 0.4);
  }
}
/* 見出し雪エフェクト（必要最小限） */
.lg::before,
.lg::after {
  content: "✻";
  position: absolute;
  top: -10px;
  color: #FFF;
  font-size: 16px;
  opacity: 0.8;
}

.lg::before {
  left: -20px;
  animation: snow-left 3s infinite linear;
}

.lg::after {
  right: -20px;
  animation: snow-right 3s infinite linear;
}

#index .lg::before,
#index .lg::after,
#mixitup .lg::before,
#mixitup .lg::after,
#profile .lg::before,
#profile .lg::after,
#privacy .lg::before,
#privacy .lg::after,
.faq_content .lg::before,
.faq_content .lg::after,
.cosplaylist .lg::before,
.cosplaylist .lg::after { content: none; }

/* 見出し左側の雪のアニメーション */
@keyframes snow-left {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(35px) rotate(360deg); }
}

/* 見出し右側の雪のアニメーション（例:逆回転で少し速く落ちる） */
@keyframes snow-right {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(45px) rotate(-360deg); }
}

/* パンくずのホームをツリーに */
.breadcrumb li:first-child a::before {
    content: "\1F384";
}

/* GoogleMap上にサンタを飛ばす */
.footer-map {
    position: relative;
    overflow: hidden;
}

.santa {
    position: absolute;
    width: 120px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
    z-index: 10;
}

.santa1 {
    top: 15%;
    left: -150px;
    background-image: url(https://cdn1.cdn-fu-kakumei.com/292/common/img/right_santa.png);
    animation: flySanta1 25s linear infinite;
}

@keyframes flySanta1 {
    0% {
        left: -150px;
        transform: translateY(0);
    }
    100% {
        left: 110%;
        transform: translateY(-20px);
    }
}

.santa2 {
    top: 40%;
    right: -150px;
    left: auto;
    background-image: url(https://cdn1.cdn-fu-kakumei.com/292/common/img/left_santa.png);
    animation: flySanta2 30s linear infinite;
    animation-delay: 8s;
    animation-fill-mode: backwards;
}

@keyframes flySanta2 {
    0% {
        right: -150px;
        transform: translateY(0);
    }
    100% {
        right: 110%;
        transform: translateY(20px);
    }
}

.santa3 {
    top: 65%;
    left: -150px;
    background-image: url(https://cdn1.cdn-fu-kakumei.com/292/common/img/right_santa.png);
    animation: flySanta3 28s linear infinite;
    animation-delay: 15s;
    animation-fill-mode: backwards;
}

@keyframes flySanta3 {
    0% {
        left: -150px;
        transform: translateY(30px);
    }
    100% {
        left: 110%;
        transform: translateY(-10px);
    }
}