@charset "utf-8";
/*****************************
reset.css
*****************************/

*{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, caption, th, td, img, form {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  text-align: left;
  text-decoration: none;
}
body {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size:14px;
  color: #000;
  background:#fff;
  letter-spacing: 1.2px;
  line-height: 2em;
}
img {
  vertical-align: top;
  border: none;
}
ul li{
  list-style:none;
}
a{
  text-decoration: none;
  color: #000;
}
a:hover{
  color:#fe0000;
}
td,th{
  vertical-align:top;
}

#bottom_smoke{
  position: absolute;
  width:200%;
  left:0;
  top:0;
  display: flex;
/* animation:roop 160s linear infinite; */
}
.smoke{
  position: relative;
  background: url("../img/smoke_element.png") no-repeat center top;
  background-size:100% auto;
  opacity: 0.2;
}
@media screen and (min-width: 0px) and (max-width: 900px) {
  .smoke{
    opacity: 0.3;
  }
}
.smoke1{
  animation:expansion 20s linear infinite;
  transform-origin: center center;
  margin-left:-250px;
  width:calc(377px * 1);
  height: calc(329px * 1);
}
.smoke2{
  animation:expansion2 18s linear infinite;
  transform-origin: center center;
  margin-left:-280px;
  width:calc(377px * 1);
  height: calc(329px * 1);
}
.smoke3{
  animation:expansion3 23s linear infinite;
  transform-origin: center center;
  margin-left:-300px;
  width:calc(377px * 1);
  height: calc(329px * 1);
}

@keyframes roop{
  0%{
  left:0;
  }
  100%{
  left:-100%;
  }
}	
@keyframes expansion{
  0%{
  transform:rotate(180deg) scale(1);
  }
  50%{
  transform:rotate(360deg) scale(1.5);
  }
  100%{
  transform:rotate(540deg) scale(1);
  }
}	
@keyframes expansion2{
  0%{
  transform:rotate(406deg) scale(1.5);
  }
  40%{
  transform:rotate(202deg) scale(1);
  }
  100%{
  transform:rotate(46deg) scale(1.5);
  }
}	
@keyframes expansion3{
  0%{
  transform:rotate(360deg) scale(0.8);
  }
  50%{
  transform:rotate(180deg) scale(1);
  }
  100%{
  transform:rotate(0deg) scale(0.8);
  }
}