@charset "utf-8";
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
}
@keyframes steam01 {
  0% {
    bottom: -600px;
    filter: blur(16px);
    transform: rotateY(0deg);
    transform: scale(0.6, 1);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(1, 1.4);
    opacity: 0.8
  }
  66% {
    transform: rotateY(10deg);
    transform: scaleY(1.8, 1);
    opacity: 0.6
  }
  100% {
    bottom: 0;
    filter: blur(40px);
    transform: rotateY(60deg);
    transform: scaleY(2, 1.8);
    opacity: 0
  }
}
@keyframes steam02 {
  0% {
    bottom: -400px;
    filter: blur(14px);
    transform: rotateY(0deg);
    transform: scale(0.6, 0.6);
    opacity: 0
  }
  11% { opacity: 0.1 }
  33% {
    transform: rotateY(40deg);
    transform: scale(0.8, 1);
    opacity: 0.7
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1, 1.2)
  }
  100% {
    bottom: 0;
    filter: blur(40px);
    transform: rotateY(50deg);
    transform: scaleY(1.2, 1.4);
    opacity: 0
  }
}
.steamWrap {
  width: 100%;
  max-width:1200px;
  margin: 120px auto 0
}
.steamBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius:32px;
}
.steamBox > img {
  width: 100%;
  display: block
}
.steam01 {
  position: absolute;
  right: -100px;
  animation: steam01 10s infinite linear;
  opacity: 0
}
.steam02 {
  position: absolute;
  left: 0;
  animation: steam02 13s infinite linear;
  opacity: 0
}
.steam03 {
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  animation: steam02 9s infinite linear;
  animation-delay: 6s;
  opacity: 0
}
.steam01 img, .steam03 img {
  width: 100%;
  height: 800px
}
.steam02 img {
  width: 100%;
  height: 800px
}

.ramen_title {
  position: absolute;
  top:0px;
}

.ramen_title img {
  width: 100%;
}

.rank2 {
  position: absolute;
  top: 0;
  right: 0;
  text-align:right;
}

.rank2 img {
  width:100%;
}

.catch {
  margin: 0 auto 40px;
  font-size: 22px;
  text-align: center;
  line-height: 1.8em;
  color: #fff;
}



.br_sp { display:none; }

@media (max-width: 768px){

/*.steamWrap { margin: 60px auto 0 }*/
.steamWrap { margin: 0px auto 0 }

.steamBox { border-radius: 0px; }
.steamBox > img {
  width: auto;
  height:350px;
  margin-left:-50px;
  display: block
}

.ramen_title img {
  width: 100%;
/*  margin-top:10%;*/

}

.rank2 img {
  width:70%;
}

.catch {
  margin: 0 10px 40px;
  font-size: 15px;
  text-align: center;
  line-height: 1.8em;
}

.br_sp { display:block; }

}