@charset "utf-8";

*{ box-sizing: border-box;word-break: break-all;}

/* key color */
:root {
  --sitekey:#ffffff;
  --sitefont:"Teko","Noto Sans JP", sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
    font-family:"Noto Sans JP", sans-serif;
    font-size: 16px;
	line-height: 1.7em;
	color: #fff;
	background-color: #000;
}

body:before{ display: block; content: ""; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: -2; background-image: url("../images/bg_v03.webp"); background-size: cover; background-position: center; opacity: 0.3;}
body:after{ display: block; content: ""; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: -1; background-image: url("../images/bg_txt.webp"); background-size:auto 100% ; background-position: bottom left; background-repeat: no-repeat; opacity: 0.2;}

body#topbg:before{opacity: 0.75;}
body#topbg:after{ background-position: center right; opacity: 0.45;}

.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 769px){
	.sp_only{display: initial;}
	.pc_only{display: none!important;}
	
	body#topbg:before{opacity: 0.5;}
	body#topbg:after{ opacity: 0.3;}
	
	body#topbg:after{ background-size: 50%; background-position: right top;}
	
}

html {overflow-y:scroll; height:100%;}
a {   cursor: pointer;color:var(--sitekey); outline:none; text-decoration:none;}
a:hover {  color:var(--sitekey); }
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)";}

.arrow{ position:relative;}
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 4px;
    height: 4px;
    border: 1px solid;
    border-color: transparent #fff #fff transparent;
    transform: rotate(-45deg);
}
.arrow:hover::after{border-color: transparent #ccc #ccc transparent;}
.arrow.blk::after{ border-color: transparent #000 #000 transparent;}
.arrow.blk:hover::after{border-color: transparent #999 #999 transparent;}


/* =fade
/********************** fade *******************************/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%;background-color: #000;background-image : url( ../images/loading_b.gif );background-repeat : no-repeat; background-position : 50% 50%; z-index:99;}

/********************** header *******************************/

header{ overflow:hidden; text-align:left; position:fixed; right:0; top:0;width:25%;  height:100vh; z-index:999;}
header nav{ width:80%; margin:0 auto; transform: translate(0,-50%); position:absolute; top:50%; left:15%;transition:1.5s; text-align:left;}
header nav li{ font-family:var(--sitefont); letter-spacing: 0.05em; font-size: min(2vw,24px); line-height:1em; font-weight: 500; }
header nav li a{ display:block; color:#fff; padding:0.5em 0; transition:0.5s;}
header li a img{ width: 35px!important;}
header .sns_icon{display: flex; gap: 5%; justify-content: left;}

header nav li.icon{}

header .logo{ position: absolute; left:50%; top:6vw; transform: translate(-50%,-50%); width:50%;}
header .logo img{ width:100%;}

.top header nav{ top:calc(50vh - 2.5vw);}

/*
.top header{ width: 25%;}
.top header nav li a{padding:0.6em 0; }
*/
/* =navi CSS
------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 769px){
    .toggle_nav { overflow: hidden; position:absolute; top:0; left:0; box-sizing:border-box;}

    header{ width:100%; margin:0 auto; padding: 15px 5% 10px ; z-index:999; height:auto; overflow:inherit;}
    header .logo{ text-align:left; width:25%; margin:0; position:initial; right: auto; top:auto; transform:none;}

    header nav{padding-top: calc(30px + 6.5vw); top:0; left:0;}
    header nav ul{ width: 85%; margin: 0 auto;}
    header nav li a{ padding:3vw 0; color:#ccc; font-size:22px; line-height:1em;}
    header nav li a img{ width:40px!important;}

    header .sns_icon{margin: unset;}

    .top header{ width: 100%;}
    .top header nav{ top: 0;}

/**
* Navigation Defaults
*/
    .nav {position: fixed; z-index: 100; opacity: 0; right:0; color:#FFF; text-align:left; box-sizing:border-box;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: translate(100%, -100%) scale(0.5);
          transform: translate(100%, -100%) scale(0.5);
  border-radius: 100%;		  
}
    .nav-active .nav {opacity: 1; background-color:rgba(0, 0, 0, 0.85); border-radius: 0; width: 100%; height: 100%;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);}

/* Default navigation icon */
    .nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right: 5%; top: 10px; z-index: 200;}
    .nav-active .nav_trigger { opacity: 0.7;}
    .nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color: #fff;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
    .nav_icon:before,
    .nav_icon:after { content: ''; display: block; width: 30px; height: 2px; position: absolute; background: #fff;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
    .nav_icon:before { margin-top: -10px;}
    .nav_icon:after { margin-top: 10px;}

    .nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
    .nav-active .nav_icon:before { margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
    .nav-active .nav_icon:after { margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{}

.top_foot{ position:relative; z-index:1; padding:2.5vw 0 5vw 0; text-align: center; font-size: 14px;border-top: 1px solid #333; }
.top_foot .foot_l{ margin-bottom: 7vw;}
.top_foot .foot_l img{width: 100%;}
.top_foot .foot_l ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.top_foot .foot_l li{ width:33.33%; padding:1%; line-height: 0;}
.top_foot .foot_r .foot_contact{ margin:0 0 1em;}
.top_foot .foot_r .foot_contact span{ font-size: 11px; line-height: 1.5em; display: block;padding-top: 1em;}
.top_foot .foot_r small{ display: block; line-height: 2em;}

footer.top_foot{border-top: none; padding-top: 0;}

.top_foot .foot_sns{ margin-bottom: 3.5em;}
.top_foot .foot_sns .stit{ margin-bottom: 0.5em; font-size: 30px;}
.top_foot .foot_sns ul{ display: flex; justify-content: center; gap: 3%;}
.top_foot .foot_sns li{ width: 50px;}

footer.top_foot .foot_sns .stit{ font-size: 60px; margin-bottom: 0.25em; }

@media only screen and (max-width: 768px){
    footer{  padding:40px 0 60px; border-top:1px solid #666;}
	
	footer.top_foot{ width: 90%; margin: 0 auto;}
	
    .top_foot .foot_l{ width:100%; float:none;padding:0; margin-bottom:50px;}
    .top_foot .foot_l ul{ text-align:center; display: flex; flex-wrap:wrap; justify-content: flex-start;}
    .top_foot .foot_l li{ width:50%; max-width: inherit; padding:0 1%; display:inline-block; margin-bottom: 1.5%;}
    .top_foot .foot_r{ width:100%; float:none; padding:0; line-height:1.5em;}
    .top_foot .foot_r small{ font-size:10px; line-height:1.7em;}
    .top_foot .foot_r .foot_contact{ font-size:12px; line-height:1.4em;}
    .top_foot .foot_r .foot_contact span{ text-align: left; }
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#c3a368; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-size:12px;}
.page_top a:hover{background-color:#d1b582; text-decoration:none;}


@media only screen and (max-width: 768px){
.page_top{ display:none;}
}


.mod_mb_0{margin-bottom: 0!important;}
.mod_mb_0p5distance{margin-bottom: calc(var(--base_distance)*0.5)!important;}
.mod_mb_1p0distance{margin-bottom: calc(var(--base_distance)*1)!important;}
.mod_mb_1p5distance{margin-bottom: calc(var(--base_distance)*1.5)!important;}
.mod_mb_2p0distance{margin-bottom: calc(var(--base_distance)*2)!important;}
.mod_mb_2p5distance{margin-bottom: calc(var(--base_distance)*2.5)!important;}
.mod_mb_3p0distance{margin-bottom: calc(var(--base_distance)*3)!important;}
.mod_mb_3p5distance{margin-bottom: calc(var(--base_distance)*3.5)!important;}
.mod_mb_4p0distance{margin-bottom: calc(var(--base_distance)*4)!important;}
.mod_mb_4p5distance{margin-bottom: calc(var(--base_distance)*4.5)!important;}
.mod_mb_0p5gap{margin-bottom: calc(var(--base_gap)*0.5)!important;}
.mod_mb_1p0gap{margin-bottom: calc(var(--base_gap)*1)!important;}
.mod_mb_1p5gap{margin-bottom: calc(var(--base_gap)*1.5)!important;}
.mod_mb_2p0gap{margin-bottom: calc(var(--base_gap)*2)!important;}
.mod_mb_2p5gap{margin-bottom: calc(var(--base_gap)*2.5)!important;}
.mod_mb_3p0gap{margin-bottom: calc(var(--base_gap)*3)!important;}
.mod_mb_3p5gap{margin-bottom: calc(var(--base_gap)*3.5)!important;}
.mod_mb_4p0gap{margin-bottom: calc(var(--base_gap)*4)!important;}
.mod_mb_4p5gap{margin-bottom: calc(var(--base_gap)*4.5)!important;}


.mod_flex_box_01 , .mod_flex_box_02 , .mod_flex_box_03 , .mod_flex_box_04 { display: flex; flex-wrap:wrap; gap:var(--base_gap); justify-content: space-between;
	&.jst_center {justify-content: center; }
	&.ali_center {align-items: center; }
}
.mod_flex_box_01 { > div , > li {width: 100%;} }
.mod_flex_box_02 { > div , > li {width: calc((100% - var(--base_gap)*1)/2);} }
.mod_flex_box_03 { > div , > li {width: calc((100% - var(--base_gap)*2)/3);} }
.mod_flex_box_04 { > div , > li {width: calc((100% - var(--base_gap)*3)/4);} }
@media only screen and (max-width: 835px){
	.mod_flex_box_01,.mod_flex_box_02 {> div,> li {width: 100%;}}
	.mod_flex_box_03,.mod_flex_box_04 {> div,> li {width: calc((100% - var(--base_gap) * 1) / 2);}}
}


/* wrap settings
-------------------------------*/
.wrap_100px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 100px;}
.wrap_200px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 200px;}
.wrap_300px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 300px;}
.wrap_400px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 400px;}
.wrap_500px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 500px;}
.wrap_600px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 600px;}
.wrap_700px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 700px;}
.wrap_800px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 800px;}
.wrap_900px  { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 900px;}
.wrap_1000px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1000px;}
.wrap_1100px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1100px;}
.wrap_1200px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1200px;}
.wrap_1300px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1300px;}
.wrap_1400px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1400px;}
.wrap_1500px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1500px;}
.wrap_1600px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1600px;}
.wrap_1700px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1700px;}
.wrap_1800px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1800px;}
.wrap_1900px { position: relative; margin: 0 auto; width: var(--base_wrap_width); max-width: 1900px;}
.wrap_100px ,.wrap_200px ,.wrap_300px ,.wrap_400px ,.wrap_500px ,.wrap_600px ,.wrap_700px ,.wrap_800px ,.wrap_900px ,.wrap_1000px,.wrap_1100px,.wrap_1200px,.wrap_1300px,.wrap_1400px,.wrap_1500px,.wrap_1600px,.wrap_1700px,.wrap_1800px,.wrap_1900px{
	&.w_100{width: 100%;}
}

/*----------------------------------------
	modal
------------------------------------------*/
:root {
  --z_loading:20000;
  --z_page_fade:15000;
  --z_modal:11000;
  --z_nav_trigger: 9999;
  --z_header_logo: 9999;
  --z_nav:9998;
  --z_sub_nav: 9997;
  --z_index_btn: 9997;
  --z_frame: 9996;
}
.cmn_modal_layer{--modal_btn_size: clamp(50px , 5vw , 70px); position: fixed; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100%); z-index: var(--z_modal); opacity: 0; visibility: hidden; pointer-events: none;transition: opacity 0.8s ease, visibility 0.8s ease 0.2;
	.modal_bg {position: fixed; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; transition: 0.6s;
		&::before { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color:#000; opacity: 0.6; }
	}
	.modal_inner { position: absolute; width: auto; height: auto; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: left; opacity: 0; transition: 0.6s;
		img {width: auto; height: auto; max-width: min(1400px, 94vw); max-height: 75vh; cursor: initial;
			&.img_mono_modal_content {width: auto!important; height: auto!important; cursor: initial!important;}
		}
		.modal_youtube_video_box {width: min(1200px, 94vw); padding-top: min( 90vh , calc(100% * 1080 / 1920) );
			iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
			img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
		}
		.modal_textbox {width: min(1000px, 94vw); height: calc(75vh); background-color: var(--c_white_l); color: var(--c_black_d); padding: clamp(12px , 4vw , 50px); text-align: left; overflow: hidden; font-size: clamp(13px , 2vw , 16px);
			&.scrollable {overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain;}
		}
	}	
	.modal_close_btn {position: absolute; top: 4px; right: 4px; width: var(--modal_btn_size); height: var(--modal_btn_size); background: no-repeat center url("../images/template_parts/btn_close_01.svg"); background-size: contain; cursor: pointer;}
	&.visible { opacity: 1; visibility: visible; pointer-events: auto;
		.modal_bg { opacity: 1; }
		.modal_inner { opacity: 1;}
	}
}
.cmn_slide_modal_layer {
	.modal_inner.slide_modal_content_box {
		.slide_modal_content {position: absolute; width: auto; height: auto; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; visibility: hidden; transition: 0.2s; pointer-events: none;
			&.slide_visible {opacity: 1; visibility: visible; pointer-events: initial;}
		}
	}
	.modal_prev_btn , .modal_next_btn {position: absolute; top: 50%; transform: translateY(-50%); height: min(270px , 25vh); width: min(80px , 10vw); background-color: var(--c_black); cursor: pointer; transition: 0.2s; -webkit-tap-highlight-color:rgba(0,0,0,0);
		&::before { position: absolute; display: block; content: ""; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 40%; height: 100%; background: no-repeat center url(../images/template_parts/icon_arrow_slidemodal_02.svg); background-size: contain; }
		&.disactive {opacity: 0.2; pointer-events: none;}
		&:focus {outline: none;}
	}
	.modal_prev_btn {left: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px;
		&::before {transform: translate(-50% , -50%) scale(-1,1);}
		&:hover {transform: translateY(-50%) translateX(-4px);}
	}
	.modal_next_btn {right: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px;
		&:hover {transform: translateY(-50%) translateX(4px);}
	}
}
@media only screen and (max-width: 835px){
	.slide_modal {
		.modal_prev_btn , .modal_next_btn { width: 12%; height: 20vh; background-size: 30% auto;}
		.modal_prev_btn {left: 0;}
		.modal_next_btn {right: 0;}
	}
}
.cmn_img_mono_modal_trigger {cursor: pointer;}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}



/************* ANIMATIONS ***************/

.anime{ position:relative; overflow:hidden; opacity:0; display: block;}

@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: var(--sitekey);}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(100px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_in { animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}

/* GLITCH */
.glitch{ overflow: hidden; position: relative;}
.glitch-img {position: absolute;top: calc(-1 * 5px);left: calc(-1 * 10px);width: calc(100% + 10px * 2);height: calc(100% + 5px * 2);background: url(../images/mainlogo.png) no-repeat 50% 0;background-color: transparent;background-size: 60%;transform: translate3d(0, 0, 0);background-blend-mode: none; opacity: 0;}
.glitch-img:nth-child(n+2) {opacity: 0}
.glitch-img:nth-child(n+2) {animation-duration: 4s;animation-delay: 0s;animation-timing-function: linear;animation-iteration-count: infinite}
.glitch-img:nth-child(2) {background-color: transparent;background-blend-mode: none;animation-name: glitch-anim-1}
.glitch-img:nth-child(3) {background-color: transparent;background-blend-mode: none;animation-name: glitch-anim-2}
.glitch-img:nth-child(4) {background-color: transparent;background-blend-mode: none;animation-name: glitch-anim-3}

.glitch2{ overflow: visible; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0.4; z-index: 1;}
.glitch2 .glitch-img{ background-image: url("../images/bg_v03.webp"); background-size: cover; background-position: center; opacity: 0;}

/* Animations */
@keyframes glitch-anim-1 {
    0% {opacity: 1;transform: translate3d(10px, 0, 0);-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);}
    2% {-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);}
    4% {-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);}
    6% {-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);}
    8% {-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);}
    10% {-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);}
    12% {-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);}
    14% {-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);}
    16% {-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);}
    18% {-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);}
    20% {-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);}
    21.9% {opacity: 1;transform: translate3d(10px, 0, 0);}
    22%,
    100% {opacity: 0;transform: translate3d(0, 0, 0);-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);clip-path: polygon(0 0, 0 0, 0 0, 0 0);}
}

@keyframes glitch-anim-2 {
    0% {opacity: 1;transform: translate3d(calc(-1 * 10px), 0, 0);-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);}
    3% {-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);}
    5% {-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);}
    7% {-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
    9% {-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);}
    11% {-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);}
    13% {-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
    15% {-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);}
    17% {-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);}
    19% {-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);}
    20% {-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);}
    21.9% {opacity: 1;transform: translate3d(calc(-1 * 10px), 0, 0);}
    22%,
    100% {opacity: 0;transform: translate3d(0, 0, 0);-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);clip-path: polygon(0 0, 0 0, 0 0, 0 0);}
}

@keyframes glitch-anim-3 {
    0% {opacity: 1;transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);}
    1.5% {-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);}
    2% {-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);}
    2.5% {-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);}
    3% {-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);}
    5% {-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);}
    5.5% {-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);}
    7% {-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);}
    8% {-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);}
    9% {-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);}
    10.5% {-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);}
    11% {-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);}
    13% {-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);}
    14% {-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);}
    14.5% {-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);}
    15% {-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);}
    16% {-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);}
    18% {-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);}
    20% {-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);}
    21.9% {opacity: 1;transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);}
    22%,
    100% {opacity: 0;transform: translate3d(0, 0, 0);-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);clip-path: polygon(0 0, 0 0, 0 0, 0 0);}
}