/* ノイズ1 */
  .noise1a {
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation:  noise-flicker1 0.5s infinite steps(1);
  }
  @keyframes noise-flicker1 {
    0%   { clip-path: polygon(0%  5%, 100%  5%, 100%  6%, 0%  6%);filter: brightness(4.3) contrast(5.2); opacity: 0.45;left: -2vw;}
    10%  { clip-path: polygon(0% 80%, 100% 80%, 100% 97%, 0% 97%);filter: brightness(1.9) contrast(1.3); opacity: 0.5;}
    20%  { clip-path: polygon(0% 12%, 100% 12%, 100% 16%, 0% 16%);filter: brightness(2.4) contrast(0.2); opacity: 0.4;}
    30%  { clip-path: polygon(0% 12%, 100% 12%, 100% 95%, 0% 95%);filter: brightness(0.9) contrast(1.1); opacity: 0.45;}
    32%  { clip-path: polygon(0% 12%, 100% 12%, 100% 95%, 0% 95%);filter: brightness(1.9) contrast(2.1); opacity: 0.75;left: -4vw;}
    34%  { clip-path: polygon(0% 12%, 100% 12%, 100% 95%, 0% 95%);filter: brightness(2.9) contrast(3.1); opacity: 0.75;left: -6vw;}
    36%  { clip-path: polygon(0% 12%, 100% 12%, 100% 95%, 0% 95%);filter: brightness(3.9) contrast(4.1); opacity: 0.75;left: -8vw;}
    38%  { clip-path: polygon(0% 12%, 100% 12%, 100% 95%, 0% 95%);filter: brightness(4.9) contrast(5.1); opacity: 0.75;left: -10vw;}
    40%  { clip-path: polygon(0% 29%, 100% 29%, 100% 32%, 0% 32%);filter: brightness(1.0) contrast(1.0); opacity: 0.4; }
    50%  { clip-path: polygon(0% 60%, 100% 60%, 100% 62%, 0% 62%);filter: brightness(0.9) contrast(1.1); opacity: 0.45;}
    60%  { clip-path: polygon(0%  3%, 100%  3%, 100%  8%, 0%  8%);filter: brightness(0.5) contrast(0.9); opacity: 0.4; left: -1vw;}
    70%  { clip-path: polygon(0% 13%, 100% 13%, 100% 15%, 0% 15%);filter: brightness(0.3) contrast(0.9); opacity: 0.35;}
    80%  { clip-path: polygon(0% 50%, 100% 50%, 100% 65%, 0% 65%);filter: brightness(1.8) contrast(3.0); opacity: 0.4; left: -1vw;}
    90%  { clip-path: polygon(0% 21%, 100% 21%, 100% 24%, 0% 24%);filter: brightness(1.2) contrast(1.0); opacity: 0.3;}
   100%  { clip-path: polygon(0% 42%, 100% 42%, 100% 58%, 0% 58%);filter: brightness(0.7) contrast(3.2); opacity: 0.5;left:  -1vw;}
  } 

/* ノイズ2 */
  .noise2a {
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: noise-flicker2 1s infinite steps(1);
  }
  @keyframes noise-flicker2 {
    0%   { clip-path: polygon(0% 50%, 100% 50%, 100% 60%, 0% 60%);filter: brightness(1.0) contrast(1.0); opacity: 0.4; left:  -1vw;}
    2%   { clip-path: polygon(0% 50%, 100% 50%, 100% 60%, 0% 60%);filter: brightness(0.5) contrast(1.0); opacity: 0.4; left:  -2vw;}
    4%   { clip-path: polygon(0% 50%, 100% 50%, 100% 60%, 0% 60%);filter: brightness(1.0) contrast(4.0); opacity: 0.4; left:  -1vw;}
    6%   { clip-path: polygon(0% 50%, 100% 50%, 100% 60%, 0% 60%);filter: brightness(2.0) contrast(7.0); opacity: 0.4; left: -3vw;}
    8%   { clip-path: polygon(0% 50%, 100% 50%, 100% 60%, 0% 60%);filter: brightness(3.0) contrast(4.0); opacity: 0.4; left: -6vw;}
    10%  { clip-path: polygon(0% 70%, 100% 70%, 100% 85%, 0% 85%);filter: brightness(1.0) contrast(1.5); opacity: 0.5; left: -10vw;}
    20%  { clip-path: polygon(0% 90%, 100% 90%, 100% 92%, 0% 92%);filter: brightness(4.9) contrast(3.1); opacity: 0.45;}
    30%  { clip-path: polygon(0% 20%, 100% 20%, 100% 22%, 0% 22%);filter: brightness(1.1) contrast(0.9); opacity: 0.35;}
    40%  { clip-path: polygon(0% 10%, 100% 10%, 100% 15%, 0% 15%);filter: brightness(2.8) contrast(1.9); opacity: 0.4; }
    50%  { clip-path: polygon(0% 85%, 100% 85%, 100% 95%, 0% 95%);filter: brightness(1.2) contrast(1.0); opacity: 0.5; }
    60%  { clip-path: polygon(0% 88%, 100% 88%, 100% 89%, 0% 89%);filter: brightness(9.9) contrast(4.9); opacity: 0.5; left: -2vw;}
    70%  { clip-path: polygon(0% 40%, 100% 40%, 100% 43%, 0% 43%);filter: brightness(1.0) contrast(1.0); opacity: 0.4; }
    80%  { clip-path: polygon(0% 79%, 100% 79%, 100% 80%, 0% 80%);filter: brightness(4.1) contrast(3.5); opacity: 0.4; }
    90%  { clip-path: polygon(0% 20%, 100% 20%, 100% 25%, 0% 25%);filter: brightness(0.3) contrast(0.9); opacity: 0.35;left: -5vw;}
   100%  { clip-path: polygon(0%  0%, 100%  0%, 100%  8%, 0%  8%);filter: brightness(0.9) contrast(3.2); opacity: 0.35;left: -2vw;}
  }
/* ノイズ3 */
  .noise3a {
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: noise-flicker3 0.9s infinite steps(1);
  }
  @keyframes noise-flicker3 {
    0%   { clip-path: polygon(0% 10%, 100% 10%, 100% 13%, 0% 13%);filter: brightness(1.0) contrast(1.0); opacity: 0.4; }
    10%  { clip-path: polygon(0% 70%, 100% 70%, 100% 75%, 0% 75%);filter: brightness(2.2) contrast(1.5); opacity: 0.5; left: -2vw;}
    20%  { clip-path: polygon(0% 64%, 100% 64%, 100% 67%, 0% 67%);filter: brightness(8.0) contrast(7.1); opacity: 0.45;left:  -1vw;}
    30%  { clip-path: polygon(0% 30%, 100% 30%, 100% 35%, 0% 35%);filter: brightness(1.1) contrast(0.9); opacity: 0.35;}
    40%  { clip-path: polygon(0%  0%, 100%  0%, 100%  5%, 0%  5%);filter: brightness(2.8) contrast(1.9); opacity: 0.4; }
    50%  { clip-path: polygon(0% 55%, 100% 55%, 100% 75%, 0% 75%);filter: brightness(1.2) contrast(1.0); opacity: 0.5; }
    60%  { clip-path: polygon(0% 88%, 100% 88%, 100% 95%, 0% 95%);filter: brightness(0.9) contrast(1.1); opacity: 0.45;left: -4vw;}
    70%  { clip-path: polygon(0% 42%, 100% 42%, 100% 43%, 0% 43%);filter: brightness(4.2) contrast(5.3); opacity: 0.7; left: -4vw;}
    80%  { clip-path: polygon(0% 49%, 100% 49%, 100% 69%, 0% 69%);filter: brightness(1.1) contrast(1.5); opacity: 0.4; }
    90%  { clip-path: polygon(0% 58%, 100% 58%, 100% 91%, 0% 91%);filter: brightness(0.1) contrast(0.3); opacity: 0.4; left: -3vw;}
   100%  { clip-path: polygon(0% 20%, 100% 20%, 100% 22%, 0% 22%);filter: brightness(0.9) contrast(3.2); opacity: 0.35;left: -1vw;}
  }
/* ノイズ4 */
  .noise4a {
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation:  noise-flicker4 0.8s infinite steps(1);
  }
  @keyframes noise-flicker4 {
    0%   { clip-path: polygon(0% 50%, 100% 50%, 100% 54%, 0% 54%);filter: brightness(1.0) contrast(1.0); opacity: 0.4; left: -3vw; }
    10%  { clip-path: polygon(0% 12%, 100% 12%, 100% 16%, 0% 16%);filter: brightness(1.2) contrast(1.2); opacity: 0.5; }
    20%  { clip-path: polygon(0% 60%, 100% 60%, 100% 68%, 0% 68%);filter: brightness(0.9) contrast(1.1); opacity: 0.45;left: -2vw;}
    30%  { clip-path: polygon(0% 60%, 100% 60%, 100% 68%, 0% 68%);filter: brightness(1.1) contrast(0.9); opacity: 0.35;left: -1vw; }
    40%  { clip-path: polygon(0%  1%, 100%  1%, 100%  5%, 0%  5%);filter: brightness(1.8) contrast(1.9); opacity: 0.4; }
    50%  { clip-path: polygon(0% 16%, 100% 16%, 100% 25%, 0% 25%);filter: brightness(3.2) contrast(3.0); opacity: 0.5; left: -5vw;}
    60%  { clip-path: polygon(0% 78%, 100% 78%, 100% 82%, 0% 82%);filter: brightness(0.9) contrast(1.1); opacity: 0.45;}
    70%  { clip-path: polygon(0% 59%, 100% 59%, 100% 62%, 0% 62%);filter: brightness(3.0) contrast(4.0); opacity: 0.4; left: -2vw; }
    80%  { clip-path: polygon(0% 89%, 100% 89%, 100% 99%, 0% 99%);filter: brightness(2.1) contrast(4.5); opacity: 0.4; left: -3vw;}
    90%  { clip-path: polygon(0% 37%, 100% 37%, 100% 45%, 0% 45%);filter: brightness(0.9) contrast(0.9); opacity: 0.35;}
   100%  { clip-path: polygon(0% 21%, 100% 21%, 100% 22%, 0% 22%);filter: brightness(5.9) contrast(3.2); opacity: 0.5 ;left: -1vw;}
  }

/* ノイズ5 */
  .noise5a {
    z-index: 2;
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation:  noise-flicker5 0.7s infinite steps(1);
  }
  @keyframes noise-flicker5 {
    0%   { clip-path: polygon(0%  5%, 100%  5%, 100% 10%, 0% 10%);filter: brightness(1.3) contrast(1.2); opacity: 0.45;left: -3vw;}
    10%  { clip-path: polygon(0% 20%, 100% 20%, 100% 27%, 0% 27%);filter: brightness(0.9) contrast(1.1); opacity: 0.35;left: -2vw;}
    20%  { clip-path: polygon(0% 70%, 100% 70%, 100% 75%, 0% 75%);filter: brightness(1.4) contrast(1.2); opacity: 0.35;left: -4vw;}
    30%  { clip-path: polygon(0% 78%, 100% 78%, 100% 83%, 0% 83%);filter: brightness(0.9) contrast(0.9); opacity: 0.5; left: -3vw;}
    40%  { clip-path: polygon(0% 42%, 100% 42%, 100% 50%, 0% 50%);filter: brightness(1.2) contrast(1.3); opacity: 0.5; left: -4vw;}
    50%  { clip-path: polygon(0% 62%, 100% 62%, 100% 68%, 0% 68%);filter: brightness(1.0) contrast(1.1); opacity: 0.45;left: -1vw;}
    60%  { clip-path: polygon(0% 33%, 100% 33%, 100% 38%, 0% 38%);filter: brightness(1.1) contrast(0.9); opacity: 0.4; left: -1vw;}
    70%  { clip-path: polygon(0% 85%, 100% 85%, 100% 91%, 0% 91%);filter: brightness(1.1) contrast(1.0); opacity: 0.4; left: -5vw;}
    80%  { clip-path: polygon(0% 55%, 100% 55%, 100% 59%, 0% 59%);filter: brightness(0.8) contrast(1.0); opacity: 0.4; left: -2vw;}
    90%  { clip-path: polygon(0% 92%, 100% 92%, 100% 98%, 0% 98%);filter: brightness(0.9) contrast(1.2); opacity: 0.35;left: -1vw;}
   100%  { clip-path: polygon(0%  2%, 100%  2%, 100% 98%, 0% 98%);filter: brightness(0.9) contrast(3.2); opacity: 0.35;left: -1vw;}
  }
/* フェード */
  .fadeInAnim{
    opacity: 0;
  }
  .fade_img {
    animation: focusIn 0.7s ease-out forwards;
  }
  @keyframes focusIn {
    0% {
      filter: blur(30px);
      opacity: 0;
    }
    50% {
      filter: blur(5px);
      opacity: 0.7;
    }
    100% {
      filter: blur(0);
      opacity: 1;
    }
  }
/* フォーカスイン処理 */
  .focusIn-button {
    animation: focusIn-button 0.5s forwards;
  }
  @keyframes focusIn-button {
    0% {
      filter: blur(30px);
      opacity: 0;
    }
    40% {
      filter: blur(5px);
      opacity: 0.7;
    }
    100% {
      filter: blur(0);
      opacity: 1;
    }
  }
/* フォーカスアウト処理 */
  .focusOut-button {
    animation: focusOut-button 0.5s forwards;
  }
  @keyframes focusOut-button {
    0% {
      filter: blur(0);
      opacity: 1;
    }
    60% {
      filter: blur(5px);
      opacity: 0.7;
    }
    100% {
      filter: blur(30px);
      opacity: 0;
      display:none;
    }
  }

/* 各タイトルボタン */
.buttonX {
  position: relative;
}
.buttonX::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  border: 3px solid #080;
  border-radius: 1.2vw;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  transform: scaleY(0.3);
  transform: skewY(0deg);
  transition: transform 0.2s, opacity 0.2s;
  background: rgba(255,255,255,0.2);
}
.buttonX:hover::before {
  opacity:1;
  transform:scaleY(1);
  transform: skewY(0deg);
  animation: buttonX-anim 0.8s;
  border-radius: 1.2vw;
  border:1px solid #0a0;
}
@keyframes buttonX-anim {
    0%{opacity:1;  transform:scaleY(0.1);border:3px solid #fff;}
    3%{opacity:0.5;transform:scaleY(0.3);border:3px solid #fff;}
   10%{border-radius: 1vw;}
   20%{opacity:0.8;transform:scaleY(1.1);border:1px solid #0f0;transform: skewY(-3deg);}
   25%{opacity:1;  transform:scaleY(1);  border:1px solid #fff;border-radius: 1.3vw;}
   30%{opacity:1;  transform:skewY(-2deg);}
  100%{opacity:1;  transform:scaleY(1);transform: skewY(0deg);border-radius: 1.2vw;border:1px solid #0a0;}
}
/* 各タイトル背景 */
.scanlines {
  overflow: hidden;
  position: relative;
}
.scanlinesY {
  display: block;
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 2px;
  z-index: 10;
  background: rgba(100, 160, 100, 0.5);
  opacity: 0.75;
  animation: scanlinesY-anim 5s linear infinite;
}
@keyframes scanlinesY-anim {
  0% {
    transform: translate3d(0, 500vh, 0);
  }
}
.scanlinesX {
  display: block;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: linear-gradient(to bottom,transparent 50%,rgba(0, 0, 0, 0.5));
  background-size: 100% 0.5vw;
  animation: scanlinesX-anim 2s steps(60) infinite;
}
@keyframes scanlinesX-anim {
  0% {
    background-position: 0 50%;
  }
}