@charset "utf-8";
/***************************************************************************************************
	page_top_mv.css
***************************************************************************************************/
/*
*/
#mv {
  position: fixed;
  left:0;
  top:0;
  width: 100%;
  height: 100dvh;
  background-color: #000000;
  pointer-events: none;
  transition:opacity .1s ease-out 0s;
}
/*  */
#mv .glitch {
  width:100%;
  height:100%;
	animation:mv_kf_1 2s linear .2s 1 normal both;
}
@keyframes mv_kf_1 {
	0% {opacity:0;}
  100% {opacity:1;}
}
#mv .glitch_1,
#mv .glitch_2,
#mv .glitch_3 {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#mv .glitch_1 {
  scale:1 1.11;
  animation:glitch_kf_3 2s infinite linear alternate;
	opacity:.5;
}
#mv .glitch_2 {
	scale:1.03 1;
  animation:glitch_kf_2 1.3s infinite linear alternate;
	opacity:.8;
}
#mv .glitch .g_1,
#mv .glitch .g_2,
#mv .glitch .g_3 {
	position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
	background-position: 50% 50%;
	background-size: clamp(700px, 70%, 1200px) auto;

  mix-blend-mode:screen;
}
#mv .glitch .g_1 {
  background-image: url('../images/mv_txt_01_03.svg');
}
#mv .glitch .g_2 {
	background-image: url('../images/mv_txt_01_02.svg');
}
#mv .glitch .g_3 {
  background-image: url('../images/mv_txt_01_01.svg');
}
#mv .glitch_2 .g_3 {
	scale:1.02 1;
}
#mv .glitch_3 .g_1 {
	translate:.1% .1%;
}
#mv .glitch_3 .g_2 {
	translate:-.1% -.1%;
}
#mv .glitch_3 .g_3 {
	animation: glitch_kf_1 .6s infinite linear;
}

@keyframes glitch_kf_1 {
	0% {translate:0 0; scale:1;}
	10% {translate:-.2% -.1%; scale:1.01;}
  35% {translate:0 0; scale:1;}
  60% {translate:.2% .1%; scale:1.01;}
  70% {translate:0 0; scale:1;}
}

@keyframes glitch_kf_2 {
	0% {clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);}
	10% {clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);}
	20% {clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);}
	30% {clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);}
	40% {clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);}
	50% {clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);}
	60% {clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);}
	70% {clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);}
	80% {clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
	90% {clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);}
	100% {clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);}
}
@keyframes glitch_kf_3 {
	0% {clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);}
	15% {clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);}
	25% {clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);}
	30% {clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
	45% {clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);}
	50% {clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);}
	65% {clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
	75% {clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
	80% {clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);}
	95% {clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);}
	100% {clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);}
}
/*
*/
#mv .ico_scroll {
	position:absolute;
	left:50%;
	top:96dvh;
	translate:-50% -100%;
	width:165px;
	height: 60px;
	animation:mv_kf_1 1s ease 1.2s 1 normal both;
	pointer-events: none;
}
#mv .ico_scroll > div {
	width:100%;
	height:100%;
	background-image: url('../images/ico_scroll_txt_01.svg');
	background-position: 50% 100%;
	background-size: 100% auto;
	transition:opacity .4s ease-out 0s;
}
#mv .ico_scroll.hide > div {
	opacity:0;
}
#mv .ico_scroll > div > div {
	width: 21px;
	height: 31px;
	left:50%;
	top:0;
	translate: -50% 0;
	border-radius: 10px;
	border:2px solid #ffffff;
}
#mv .ico_scroll > div > div::before {
	position: absolute;
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	left:50%;
	top:6px;
	scale:0;
	translate:-50% 0;
	border-radius: 100%;
	background-color: #ffffff;

	animation: ico_scroll_kf_1 2s infinite ease;
}
#mv .ico_scroll.hide > div > div::before {
	animation:none;
}
@keyframes ico_scroll_kf_1 {
	0% {top:6px; scale:0;}
	20% {top:6px; scale:1;}
	40% {scale:1;}
  70% {top:19px; scale:0;}
  100% {top:19px; scale:0;}
}


/***************************************************************************************************
  responsive
***************************************************************************************************/
@media screen and (width <= 800px) {
/*
*/


#mv .glitch .g_1,
#mv .glitch .g_2,
#mv .glitch .g_3 {
	background-size: min(500px, 75%) auto;
}
#mv .glitch .g_1 {
  background-image: url('../images/mv_txt_02_03.svg');
}
#mv .glitch .g_2 {
  background-image: url('../images/mv_txt_02_02.svg');
}
#mv .glitch .g_3 {
  background-image: url('../images/mv_txt_02_01.svg');
}
#mv .glitch_1 {
  scale:1 1.08;
	opacity:.3;
}
#mv .glitch_2 .g_3 {
	scale:1.05 1;
}
#mv .glitch_3 .g_1 {
	translate:.2% .2%;
}
#mv .glitch_3 .g_2 {
	translate:-.2% -.2%;
}
#mv .glitch_3 .g_3 {
	animation: glitch_kf_1 1s infinite linear;
}

@keyframes glitch_kf_1 {
	0% {translate:0 0; scale:1;}
	10% {translate:-1% -.2%; scale:1.02;}
  35% {translate:0 0; scale:1;}
  60% {translate:1% .2%; scale:1.02;}
  70% {translate:0 0; scale:1;}
}
/*
*/
#mv .ico_scroll {
	top:94dvh;
	transform-origin: 50% 100%;
	scale:.8;
}
/*  */
}