@charset "UTF-8";

/*********header*********/
.pc-header-logo{
  display:block;
  position:relative;
  float:left;
  margin-left:10vw;
  max-width:100vw;
}

.pc-header-logo img{
  position:absolute;
  width:10vw;
  height:auto;
  top:0vw;
}

.pc-header{
  display:block;
  z-index:999;
    width:100vw;
    height:auto;
  position: fixed;
  top: 0;
  left: 0;
    animation-name: slideDown;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-delay: 0s;
    transform-origin: 50% 50% 0;
    animation-duration: 1.4s;
    top: 1vw;
}

@keyframes slideDown {
  0% {
    top: -5vw;
  }
  100% {
    top: 1vw;
  }
}

.nav{
  display:block;
  position:relative;
  text-align:right;
  margin-right:10vw;
}

.nav li {
  margin-right:4vw;
  display: inline;
}

.nav li a {
  text-decoration: none;
  color: #fff;
  font-family:'Imperial';
  font-size:1vw;
  font-weight: lighter;
  overflow: hidden;
  top:1vw;
}

.nav li img{
  position:absolute;
  margin: 0 2vw;
  display: inline;
  width: 1.2vw;
  height: auto;
  bottom:0;
}

.nav li :hover {
  opacity:0.6;
  transition:0.6s;
}


/*********firstview*********/
.main-background{
  display:block;
  height:100%;
  width:100%;
  animation-name: fadeIn;
  animation-duration: 5s;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.first-logo{
  position: relative;
  top:8vw;
}

.main-logo-01{
  position:absolute;
  width:100%;
  height:auto;
}

.main-logo-01 img{
  width: 28%;
  height: auto;
}

.main-logo-02{
  position:absolute;
  width:100%;
  height:auto;
  overflow: hidden;
}

.main-logo-02 img{
  width: 28%;
  height: auto;
  animation-name:animation01;
  animation-duration: 4s;
}

@keyframes animation01 { 
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.main-logo-03{
  position:absolute;
  width:100%;
  height:auto;
}

.main-logo-03 img{
  width: 28%;
  height: auto;
  animation-name: fadeIn;
  animation-duration: 5s;
}

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.main-logo-04{
  position:absolute;
  width:100%;
  height:auto;
}

.main-logo-04 img{
  width: 28%;
  height: auto;
    animation: animationFrames linear 4s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames linear 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames linear 4s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: animationFrames linear 4s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: animationFrames linear 4s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) skewX(0deg) ;
  }
  5% {
    transform:  translate(50px,-67px)  rotate(27deg) skewX(-11deg) ;
  }
  10% {
    transform:  translate(122px,-116px)  rotate(43deg) skewX(-29deg) ;
  }
  14% {
    transform:  translate(104px,-176px)  rotate(-34deg) skewX(5deg) ;
  }
  20% {
    transform:  translate(9px,-200px)  rotate(-58deg) skewX(21deg) ;
  }
  24% {
    transform:  translate(-94px,-183px)  rotate(-95deg) skewX(13deg) ;
  }
  25% {
    transform:  translate(-110px,-173px)  rotate(-98deg) skewX(8deg) ;
  }
  29% {
    transform:  translate(-176px,-132px)  rotate(-112deg) skewX(-11deg) ;
  }
  30% {
    transform:  translate(-184px,-127px)  rotate(-115deg) skewX(-8deg) ;
  }
  35% {
    transform:  translate(-224px,-103px)  rotate(-130deg) skewX(9deg) ;
  }
  40% {
    transform:  translate(-264px,-78px)  rotate(-162deg) skewX(4deg) ;
  }
  45% {
    transform:  translate(-250px,-3px)  rotate(-195deg) skewX(20deg) ;
  }
  49% {
    transform:  translate(-205px,47px)  rotate(-214deg) skewX(17deg) ;
  }
  50% {
    transform:  translate(-197px,57px)  rotate(-216deg) skewX(16deg) ;
  }
  54% {
    transform:  translate(-167px,97px)  rotate(-223deg) skewX(13deg) ;
  }
  55% {
    transform:  translate(-151px,99px)  rotate(-226deg) skewX(13deg) ;
  }
  60% {
    transform:  translate(-70px,110px)  rotate(-239deg) skewX(9deg) ;
  }
  66% {
    transform:  translate(67px,89px)  rotate(-269deg) skewX(7deg) ;
  }
  74% {
    transform:  translate(181px,31px)  rotate(-300deg) skewX(8deg) ;
  }
  80% {
    transform:  translate(185px,-43px)  rotate(-357deg) skewX(8deg) ;
  }
  83% {
    transform:  translate(185px,-43px)  rotate(-393deg) skewX(2deg) ;
  }
  88% {
    transform:  translate(185px,-43px)  rotate(-398deg) ;
  }
  100% {
    transform:  translate(0px,0px)  rotate(-360deg) skewX(0deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  rotate(0deg) skewX(0deg) ;
  }
  5% {
    -moz-transform:  translate(50px,-67px)  rotate(27deg) skewX(-11deg) ;
  }
  10% {
    -moz-transform:  translate(122px,-116px)  rotate(43deg) skewX(-29deg) ;
  }
  14% {
    -moz-transform:  translate(104px,-176px)  rotate(-34deg) skewX(5deg) ;
  }
  20% {
    -moz-transform:  translate(9px,-200px)  rotate(-58deg) skewX(21deg) ;
  }
  24% {
    -moz-transform:  translate(-94px,-183px)  rotate(-95deg) skewX(13deg) ;
  }
  25% {
    -moz-transform:  translate(-110px,-173px)  rotate(-98deg) skewX(8deg) ;
  }
  29% {
    -moz-transform:  translate(-176px,-132px)  rotate(-112deg) skewX(-11deg) ;
  }
  30% {
    -moz-transform:  translate(-184px,-127px)  rotate(-115deg) skewX(-8deg) ;
  }
  35% {
    -moz-transform:  translate(-224px,-103px)  rotate(-130deg) skewX(9deg) ;
  }
  40% {
    -moz-transform:  translate(-264px,-78px)  rotate(-162deg) skewX(4deg) ;
  }
  45% {
    -moz-transform:  translate(-250px,-3px)  rotate(-195deg) skewX(20deg) ;
  }
  49% {
    -moz-transform:  translate(-205px,47px)  rotate(-214deg) skewX(17deg) ;
  }
  50% {
    -moz-transform:  translate(-197px,57px)  rotate(-216deg) skewX(16deg) ;
  }
  54% {
    -moz-transform:  translate(-167px,97px)  rotate(-223deg) skewX(13deg) ;
  }
  55% {
    -moz-transform:  translate(-151px,99px)  rotate(-226deg) skewX(13deg) ;
  }
  60% {
    -moz-transform:  translate(-70px,110px)  rotate(-239deg) skewX(9deg) ;
  }
  66% {
    -moz-transform:  translate(67px,89px)  rotate(-269deg) skewX(7deg) ;
  }
  74% {
    -moz-transform:  translate(181px,31px)  rotate(-300deg) skewX(8deg) ;
  }
  80% {
    -moz-transform:  translate(185px,-43px)  rotate(-357deg) skewX(8deg) ;
  }
  83% {
    -moz-transform:  translate(185px,-43px)  rotate(-393deg) skewX(2deg) ;
  }
  88% {
    -moz-transform:  translate(185px,-43px)  rotate(-398deg) ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  rotate(-360deg) skewX(0deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) skewX(0deg) ;
  }
  5% {
    -webkit-transform:  translate(50px,-67px)  rotate(27deg) skewX(-11deg) ;
  }
  10% {
    -webkit-transform:  translate(122px,-116px)  rotate(43deg) skewX(-29deg) ;
  }
  14% {
    -webkit-transform:  translate(104px,-176px)  rotate(-34deg) skewX(5deg) ;
  }
  20% {
    -webkit-transform:  translate(9px,-200px)  rotate(-58deg) skewX(21deg) ;
  }
  24% {
    -webkit-transform:  translate(-94px,-183px)  rotate(-95deg) skewX(13deg) ;
  }
  25% {
    -webkit-transform:  translate(-110px,-173px)  rotate(-98deg) skewX(8deg) ;
  }
  29% {
    -webkit-transform:  translate(-176px,-132px)  rotate(-112deg) skewX(-11deg) ;
  }
  30% {
    -webkit-transform:  translate(-184px,-127px)  rotate(-115deg) skewX(-8deg) ;
  }
  35% {
    -webkit-transform:  translate(-224px,-103px)  rotate(-130deg) skewX(9deg) ;
  }
  40% {
    -webkit-transform:  translate(-264px,-78px)  rotate(-162deg) skewX(4deg) ;
  }
  45% {
    -webkit-transform:  translate(-250px,-3px)  rotate(-195deg) skewX(20deg) ;
  }
  49% {
    -webkit-transform:  translate(-205px,47px)  rotate(-214deg) skewX(17deg) ;
  }
  50% {
    -webkit-transform:  translate(-197px,57px)  rotate(-216deg) skewX(16deg) ;
  }
  54% {
    -webkit-transform:  translate(-167px,97px)  rotate(-223deg) skewX(13deg) ;
  }
  55% {
    -webkit-transform:  translate(-151px,99px)  rotate(-226deg) skewX(13deg) ;
  }
  60% {
    -webkit-transform:  translate(-70px,110px)  rotate(-239deg) skewX(9deg) ;
  }
  66% {
    -webkit-transform:  translate(67px,89px)  rotate(-269deg) skewX(7deg) ;
  }
  74% {
    -webkit-transform:  translate(181px,31px)  rotate(-300deg) skewX(8deg) ;
  }
  80% {
    -webkit-transform:  translate(185px,-43px)  rotate(-357deg) skewX(8deg) ;
  }
  83% {
    -webkit-transform:  translate(185px,-43px)  rotate(-393deg) skewX(2deg) ;
  }
  88% {
    -webkit-transform:  translate(185px,-43px)  rotate(-398deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  rotate(-360deg) skewX(0deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  rotate(0deg) skewX(0deg) ;
  }
  5% {
    -o-transform:  translate(50px,-67px)  rotate(27deg) skewX(-11deg) ;
  }
  10% {
    -o-transform:  translate(122px,-116px)  rotate(43deg) skewX(-29deg) ;
  }
  14% {
    -o-transform:  translate(104px,-176px)  rotate(-34deg) skewX(5deg) ;
  }
  20% {
    -o-transform:  translate(9px,-200px)  rotate(-58deg) skewX(21deg) ;
  }
  24% {
    -o-transform:  translate(-94px,-183px)  rotate(-95deg) skewX(13deg) ;
  }
  25% {
    -o-transform:  translate(-110px,-173px)  rotate(-98deg) skewX(8deg) ;
  }
  29% {
    -o-transform:  translate(-176px,-132px)  rotate(-112deg) skewX(-11deg) ;
  }
  30% {
    -o-transform:  translate(-184px,-127px)  rotate(-115deg) skewX(-8deg) ;
  }
  35% {
    -o-transform:  translate(-224px,-103px)  rotate(-130deg) skewX(9deg) ;
  }
  40% {
    -o-transform:  translate(-264px,-78px)  rotate(-162deg) skewX(4deg) ;
  }
  45% {
    -o-transform:  translate(-250px,-3px)  rotate(-195deg) skewX(20deg) ;
  }
  49% {
    -o-transform:  translate(-205px,47px)  rotate(-214deg) skewX(17deg) ;
  }
  50% {
    -o-transform:  translate(-197px,57px)  rotate(-216deg) skewX(16deg) ;
  }
  54% {
    -o-transform:  translate(-167px,97px)  rotate(-223deg) skewX(13deg) ;
  }
  55% {
    -o-transform:  translate(-151px,99px)  rotate(-226deg) skewX(13deg) ;
  }
  60% {
    -o-transform:  translate(-70px,110px)  rotate(-239deg) skewX(9deg) ;
  }
  66% {
    -o-transform:  translate(67px,89px)  rotate(-269deg) skewX(7deg) ;
  }
  74% {
    -o-transform:  translate(181px,31px)  rotate(-300deg) skewX(8deg) ;
  }
  80% {
    -o-transform:  translate(185px,-43px)  rotate(-357deg) skewX(8deg) ;
  }
  83% {
    -o-transform:  translate(185px,-43px)  rotate(-393deg) skewX(2deg) ;
  }
  88% {
    -o-transform:  translate(185px,-43px)  rotate(-398deg) ;
  }
  100% {
    -o-transform:  translate(0px,0px)  rotate(-360deg) skewX(0deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  rotate(0deg) skewX(0deg) ;
  }
  5% {
    -ms-transform:  translate(50px,-67px)  rotate(27deg) skewX(-11deg) ;
  }
  10% {
    -ms-transform:  translate(122px,-116px)  rotate(43deg) skewX(-29deg) ;
  }
  14% {
    -ms-transform:  translate(104px,-176px)  rotate(-34deg) skewX(5deg) ;
  }
  20% {
    -ms-transform:  translate(9px,-200px)  rotate(-58deg) skewX(21deg) ;
  }
  24% {
    -ms-transform:  translate(-94px,-183px)  rotate(-95deg) skewX(13deg) ;
  }
  25% {
    -ms-transform:  translate(-110px,-173px)  rotate(-98deg) skewX(8deg) ;
  }
  29% {
    -ms-transform:  translate(-176px,-132px)  rotate(-112deg) skewX(-11deg) ;
  }
  30% {
    -ms-transform:  translate(-184px,-127px)  rotate(-115deg) skewX(-8deg) ;
  }
  35% {
    -ms-transform:  translate(-224px,-103px)  rotate(-130deg) skewX(9deg) ;
  }
  40% {
    -ms-transform:  translate(-264px,-78px)  rotate(-162deg) skewX(4deg) ;
  }
  45% {
    -ms-transform:  translate(-250px,-3px)  rotate(-195deg) skewX(20deg) ;
  }
  49% {
    -ms-transform:  translate(-205px,47px)  rotate(-214deg) skewX(17deg) ;
  }
  50% {
    -ms-transform:  translate(-197px,57px)  rotate(-216deg) skewX(16deg) ;
  }
  54% {
    -ms-transform:  translate(-167px,97px)  rotate(-223deg) skewX(13deg) ;
  }
  55% {
    -ms-transform:  translate(-151px,99px)  rotate(-226deg) skewX(13deg) ;
  }
  60% {
    -ms-transform:  translate(-70px,110px)  rotate(-239deg) skewX(9deg) ;
  }
  66% {
    -ms-transform:  translate(67px,89px)  rotate(-269deg) skewX(7deg) ;
  }
  74% {
    -ms-transform:  translate(181px,31px)  rotate(-300deg) skewX(8deg) ;
  }
  80% {
    -ms-transform:  translate(185px,-43px)  rotate(-357deg) skewX(8deg) ;
  }
  83% {
    -ms-transform:  translate(185px,-43px)  rotate(-393deg) skewX(2deg) ;
  }
  88% {
    -ms-transform:  translate(185px,-43px)  rotate(-398deg) ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  rotate(-360deg) skewX(0deg) ;
  }
}

.first-text{
  display:block;
  position: relative;
  top: 34vw;
  width:100%;
  height:auto;
}

.first-text h1{
  position: relative;
  font-family: 'MyriadPro';
  color: #fff;
  margin:0;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.first-text h2{
  position: relative;
  font-family: 'MyriadPro';
  color: #fff;
  margin:1vw;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.first-text h3{
  position: relative;
  font-family: 'MyriadPro';
  color: #fff;
  margin:0;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}


/*********content-01*********/
.content-background-01{
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:80%;
  height:auto;
  background-color:#000000bd;
  margin:0 auto;
  top:50vw;
}


/*********features*********/
.features-title{
  display:inline-block;
  padding-top:6vw;
}

.features-title h1{
  position: relative;
  color: #fff;
  font-family: 'Imperial';
  font-size:2.5rem;
  letter-spacing:0.2rem;
  margin:0;
}

.features-title h2{
  position: relative;
  color: #fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  margin:0;
  padding-top:2vw;
}

.content-wrap-01{
  display:inline-block;
  width:100%;
  height:auto;
  margin:0 auto;
  padding-top:4vw;
  padding-bottom:4vw;
}


/*********features-img-01*********/
.features-img-01{
  float:left;
  max-width: 28%;
  height:auto; 
  margin:2vw 2vw;
}

.features-img-01 img{
  position:relative;
  width: 100%;
  height:auto; 
}

.features-img-01 h1{
  position: relative;
  color: #fff;
  font-family: 'Imperial';
  font-size:1.6rem;
  letter-spacing:0.2rem;
  margin:2vw 0;
}

.features-img-01 h2{
  position: relative;
  color: #fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  line-height:2;
}


/*********features-img-02*********/
.features-img-02{
  display:inline-block;
  float:left;
  max-width: 28%;
  height:auto; 
  margin:2vw 2vw;
}

.features-img-02 img{
  width: 100%;
  height:auto; 
}

.features-img-02 h1{
  position: relative;
  color: #fff;
  font-family: 'Imperial';
  font-size:1.6rem;
  letter-spacing:0.2rem;
  margin:2vw 0;
}

.features-img-02 h2{
  position: relative;
  color: #fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  line-height:2;
}


/*********features-img-03*********/
.features-img-03{
  display:inline-block;
  float:left;
  max-width: 28%;
  height:auto; 
  margin:2vw 2vw;
}

.features-img-03 img{
  width: 100%;
  height:auto; 
}

.features-img-03 h1{
  position: relative;
  color: #fff;
  font-family: 'Imperial';
  font-size:1.6rem;
  letter-spacing:0.2rem;
  margin:2vw 0;
}

.features-img-03 h2{
  position: relative;
  color: #fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  line-height:2;
}


/*********introduction*********/
.introduction{
  display:block;
  clear: both;
  margin:0 auto;
  padding-top:2vw;
}

.introduction h1{
  position:relative;
  color:#fff;
  font-family: 'Imperial';
  font-size:2.5rem;
  letter-spacing:0.2rem;
  margin:2vw auto;
}


/*********content-01*********/
.bartender-background{
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:100%;
  height:auto;
  background-color:#000;
  margin:0 auto;
  top:50vw;
}


/*********bartender*********/
.pc-bartender-background{
  clear:both;
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:100%;
  height:48.6vw;
  background-color:#000;
  content:url(../images/main/pc_08_ari.jpg);
  margin:0 auto;
  top:auto;
}

.pc-bartender-background:hover{
  clear:both;
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:100%;
  height:48.6vw;
  background-color:#000;
  content:none;
  margin:0 auto;
  top:auto;
}

.pc-bartender{
  display:inline-block;
  width:100%;
  height:auto;
  margin:0 auto;
}

.pc-bartender h1{
  position: absolute;
  width:100%;
  color: #fff;
  font-family: 'Imperial';
  font-size:1.4rem;
  letter-spacing:0.2rem;
  margin:0 auto;
  bottom:3vw;
  z-index:99999;
}

.pc-bartender img{
  width:100%;
  height:auto;
  margin:0 auto;
}


/*********bartender_2*********/
.pc-bartender-background2{
  clear:both;
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:100%;
  height:48.6vw;
  background-color:#000;
  content:url(../images/main/pc_08_ksk.jpg);
  margin:0 auto;
  top:auto;
}

.pc-bartender-background2:hover{
  clear:both;
  display:block;
  position:relative;
  text-align:-webkit-center;
  width:100%;
  height:48.6vw;
  background-color:#000;
  content:none;
  margin:0 auto;
  top:auto;
}

.pc-bartender2{
  display:inline-block;
  width:100%;
  height:auto;
  margin:0 auto;
}

.pc-bartender2 h1{
  position: absolute;
  width:100%;
  color: #fff;
  font-family: 'Imperial';
  font-size:1.4rem;
  letter-spacing:0.2rem;
  margin:0 auto;
  bottom:3vw;
  z-index:99999;
}

.pc-bartender2 img{
  width:100%;
  height:auto;
  margin:0 auto;
}


/*********content-02*********/
.content-background-02{
  display:inline-block;
  position: relative;
  text-align:-webkit-center;
  width:80%;
  height:auto;
  background-color:#000000bd;
  background-size:cover;
  margin:0 auto;
  top:50vw
}


/*********information_left*********/
.information-left{
  padding-top:6vw;
  position:relative;
  display:inline-block;
  width:40%;
  text-align:left;
  float:left;
  padding-left:4vw;
  margin-bottom:16vw;
}

.information-left h1{
  position:relative;
  color:#fff;
  font-family: 'Imperial';
  font-size:1.4rem;
  letter-spacing:0.2rem;
  margin:1vw auto;
}

.information-left h2{
  position:relative;
  color:#fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  line-height:2;
  margin:1vw auto;
  font-weight:100;
}

.information-left h3{
  position:relative;
  color:#fff;
  font-family: 'Imperial';
  font-size:1.4rem;
  letter-spacing:0.2rem;
  margin:1vw auto;
  padding-top:4vw;
}

.information-left h4{
  position:relative;
  color:#fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0.2rem;
  line-height:2;
  margin:1vw auto;
}


/*********information_right*********/
.information-right{
  padding-top:6vw;
  position:relative;
  display:inline-block;
  width:40%;
  text-align:left;
  float:right;
  padding-right:4vw;
  margin-bottom:16vw;
}

#map_canvas{
  width:100%;
  height:22vw;
}


/*********footer*********/
.footer{
  clear:both;
  display:block;
  position:re;
  max-width:100%;
  height:auto;
}

.footer-wrap{
  clear:both;
  background-color:#000;
  opacity:1;
  display:block;
  position:relative;
  width:100%;
  height:auto;
  margin:0 auto;
  top:48vw;
}

.footer-wrap img{
  position:relative;
  width:18%;
  margin:3vw 0;
  right:14vw;
  top:4vw;
}

.footer-logo img{
  position:relative;
  width:18%;
  margin:3vw 0;
  right:14vw;
  top:4vw;
}

.footer-logo img:hover{
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
0% {opacity: 0.3;}
100% {opacity: 1;}
}
@keyframes flash {
0% {opacity: 0.3;}
100% {opacity: 1;}
}

.footer-wrap h1{
  position:absolute;
  display:inline-block;
  color:#fff;
  font-family: 'Notera';
  font-size:2.4vw;
  font-weight:200;
  letter-spacing:0.2rem;
  bottom:16vw;
  left:56vw;
  transform: rotate(-14deg);
  opacity:0.8;
  margin-bottom:1vw;
}

.footer-icon-01{
  display:inline;
  position:relative;
  width:100%;
  height:auto;
}

.footer-icon-01 img{
  display:inline;
  position:relative;
  width:2.3vw;
  left:16.2vw;
  top:-8vw;
}

.footer-icon-01 img:hover{
  opacity:0.6;
  transition:0.6s;
}

.footer-icon-01 h2{
  position:relative;
  display:inline-block;
  color:#fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0rem;
  line-height:1;
  bottom:10vw;
  left:13vw;
}

.footer-icon-02{
  display:inline;
  position:relative;
  width:100%;
  height:auto;
}

.footer-icon-02 img{
  display:inline;
  position:relative;
  width:2.3vw;
  left:16.2vw;
  top:-8vw;
}

.footer-icon-02 img:hover{
  opacity:0.6;
  transition:0.6s;
}

.footer-icon-02 h3{
  position:relative;
  display:inline-block;
  color:#fff;
  font-family: 'Yugothic';
  font-size:0.8rem;
  letter-spacing:0rem;
  line-height:1;
  bottom:10vw;
  left:13vw;
}

.footer-wrap p{
  position:relative;
  width:100%;
  z-index:999;
  font-family: 'Yugothic';
  font-weight:400;
  font-size:0.7rem;
  letter-spacing:0.1rem;
  color: #fff;
  margin:0;
  bottom:2vw;
}


/*********PC_Glitch*********/
.pc-bt-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.45s linear infinite 0s forwards;
    animation-play-state: paused;
}

.pc-bt-wrapper:hover img{
    animation-play-state: running;
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

.pc-bt-wrapper img:nth-child(1){
    z-index: 9;
}
.pc-bt-wrapper img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.pc-bt-wrapper img:nth-child(3){
    animation-delay: 0.15s;
    z-index: 7;
}
.pc-bt-wrapper img:nth-child(4){
    animation-delay: 0.2s;
    z-index: 6;
}
.pc-bt-wrapper img:nth-child(5){
    animation-delay: 0.25s;
    z-index: 5;
}
.pc-bt-wrapper img:nth-child(6){
    animation-delay: 0.3s;
    z-index: 4;
}
.pc-bt-wrapper img:nth-child(7){
    animation-delay: 0.35s;
    z-index: 3;
}
.pc-bt-wrapper img:nth-child(8){
    animation-delay: 0.4s;
    z-index: 2;
}


/*********PC_Glitch*********/
.pc-bt-wrapper2 img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.45s linear infinite 0s forwards;
    animation-play-state: paused;
}

.pc-bt-wrapper2:hover img{
    animation-play-state: running;
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

.pc-bt-wrapper2 img:nth-child(1){
    z-index: 9;
}
.pc-bt-wrapper2 img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.pc-bt-wrapper2 img:nth-child(3){
    animation-delay: 0.15s;
    z-index: 7;
}
.pc-bt-wrapper2 img:nth-child(4){
    animation-delay: 0.2s;
    z-index: 6;
}
.pc-bt-wrapper2 img:nth-child(5){
    animation-delay: 0.25s;
    z-index: 5;
}
.pc-bt-wrapper2 img:nth-child(6){
    animation-delay: 0.3s;
    z-index: 4;
}
.pc-bt-wrapper2 img:nth-child(7){
    animation-delay: 0.35s;
    z-index: 3;
}
.pc-bt-wrapper2 img:nth-child(8){
    animation-delay: 0.4s;
    z-index: 2;
}


/*********SP_Glitch*********/
.sp-bt-wrapper img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.45s linear infinite 0s forwards;
    animation-play-state: paused;
}

.sp-bt-wrapper:hover img{
    top: 0px;
    left: 0px;
    position: absolute;  
    animation-play-state: running;
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

.sp-bt-wrapper img:nth-child(1){
    z-index: 9;
}
.sp-bt-wrapper img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.sp-bt-wrapper img:nth-child(3){
    animation-delay: 0.15s;
    z-index: 7;
}
.sp-bt-wrapper img:nth-child(4){
    animation-delay: 0.2s;
    z-index: 6;
}
.sp-bt-wrapper img:nth-child(5){
    animation-delay: 0.25s;
    z-index: 5;
}
.sp-bt-wrapper img:nth-child(6){
    animation-delay: 0.3s;
    z-index: 4;
}
.sp-bt-wrapper img:nth-child(7){
    animation-delay: 0.35s;
    z-index: 3;
}
.sp-bt-wrapper img:nth-child(8){
    animation-delay: 0.4s;
    z-index: 2;
}


/*********SP_Glitch*********/
.sp-bt-wrapper2 img{
    top: 0px;
    left: 0px;
    position: absolute;
    animation: showMe 0.45s linear infinite 0s forwards;
    animation-play-state: paused;
}

.sp-bt-wrapper2:hover img{
    top: 0px;
    left: 0px;
    position: absolute;  
    animation-play-state: running;
}

@keyframes showMe {
    0% { visibility: visible; z-index: 100; }
    12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
}

.sp-bt-wrapper2 img:nth-child(1){
    z-index: 9;
}
.sp-bt-wrapper2 img:nth-child(2){
    animation-delay: 0.1s;
    z-index: 8;
}
.sp-bt-wrapper2 img:nth-child(3){
    animation-delay: 0.15s;
    z-index: 7;
}
.sp-bt-wrapper2 img:nth-child(4){
    animation-delay: 0.2s;
    z-index: 6;
}
.sp-bt-wrapper2 img:nth-child(5){
    animation-delay: 0.25s;
    z-index: 5;
}
.sp-bt-wrapper2 img:nth-child(6){
    animation-delay: 0.3s;
    z-index: 4;
}
.sp-bt-wrapper2 img:nth-child(7){
    animation-delay: 0.35s;
    z-index: 3;
}
.sp-bt-wrapper2 img:nth-child(8){
    animation-delay: 0.4s;
    z-index: 2;
}