@charset "utf-8";
/* CSS Document */

/* トップ　ロゴ------------------*/

	.img_logo{width: 80%;max-width: 500px; position: absolute;bottom:60px;left:0;right:0;z-index: 100;margin: 0 auto;}
	.vsp .img_logo{bottom:10px;}
	.img_logo img{width: 100%; animation: noise 5s infinite;}
	@keyframes noise { 
		0%,20%,22%,24%,26%,29%,31%,83%,85%,100% { opacity: 1;}
		23%,25%,28% { opacity: 0.8;}
		21%,27%,30%,84% { opacity: 0.95; }
		86%{transform: translate(0px, 0px);}
		86.5%{transform: translate(-2px, 0px);}
		87%{transform: translate(4px, 0px); opacity: 0.9;}
		88%{transform: translate(0px, 0px);opacity: 1;}
}
/* /トップ　ロゴ------------------*/

/* タイトル　グリッチ文字 ------------------*/
.scary-glitch {
  position: relative;
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  animation: glitch-skew 1.5s infinite linear alternate-reverse;
  text-shadow: 0 0 5px red, 0 0 1rem #0ff;
}

.scary-glitch::before,
.scary-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  mix-blend-mode: screen;
	opacity: 0.5;
}
.scary-glitch::before {
  color: red;
  animation: glitch-anim 6s infinite linear alternate-reverse;
}
.scary-glitch::after {
  color: lime;
  animation: glitch-anim2 10s infinite linear alternate-reverse;
}

/* 激しいズレ */
/*赤色*/
@keyframes glitch-anim {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-3px, -2px); }
  50% { clip-path: inset(10% 0 60% 0); transform: translate(3px, 2px); }
  100% { clip-path: inset(80% 0 80% 0); transform: translate(-3px, 1px); }
}
/*緑色*/
@keyframes glitch-anim2 {
  0% { clip-path: inset(0 0 70% 0); transform: translate(2px, 1px); }
  75% { clip-path: inset(20% 0 80% 0); transform: translate(-3px, 1px); }
  100% { clip-path: inset(0 0 70% 0); transform: translate(2px, -2px); }
}
@keyframes glitch-anim2 {
  0% { clip-path: inset(70% 0 0 0); transform: translate(2px, 1px); }
  25% { clip-path: inset(50% 0 20% 0); transform: translate(-2px, -3px); }
  50% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 2px); }
  75% { clip-path: inset(80% 0 20% 0); transform: translate(-3px, 1px); }
  100% { clip-path: inset(70% 0 0 0); transform: translate(2px, -2px); }
}

/* 全体の揺れ */
/*@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(1deg); }
  40% { transform: skew(-1deg); }
  60% { transform: skew(2deg); }
  80% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}*/

@media screen and (max-width: 768px) {	
h3.scary-glitch {font-size: 2.25rem;}
	}
/* /タイトル　グリッチ文字 ------------------*/

/*番宣背景の揺らぎ-------------------*/
#box_mov .vdo-body {
  filter: drop-shadow(-50px 10px 60px #801417);
  animation: shadow_movie 10s infinite alternate ease-in-out;
}

@keyframes shadow_movie {
  from {
    filter: drop-shadow(-80px 10px 40px #801417);
  }
  to {
    filter: drop-shadow(0px 40px 60px #801417);
  }
}
/*/番宣背景の揺らぎ-------------------*/