@charset "utf-8";
/***** デフォルトはスマートフォン *****/
body{
	background-image: url(./img/back.jpg);
	background-repeat:repeat;
}

.topimg{
	width: 100%;
}
/* 湯気の出るアニメーション start */
@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.5
  }
  66% {
    transform: rotateY(10deg);
    transform: scaleY(1.8, 1);
    opacity: 0.4
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(60deg);
    transform: scaleY(2, 1.8);
    opacity: 0
  }
}
@keyframes steam02 {
  0% {
    bottom: -400px;
    filter: blur(16px);
    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.4
  }
  66% {
    transform: rotateY(2deg);
    transform: scaleY(1, 1.2)
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(50deg);
    transform: scaleY(1.2, 1.4);
    opacity: 0
  }
}
.steamWrap {
  /* width: 740px; */
  width: 100%;
  /* margin: 100px auto 0; */
 margin: 0 auto;
}
.steamBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}
.steamBox > img {
  width: 100%;
  display: block
}
.steam01 {
  position: absolute;
  right: 0;
  animation: steam01 10s infinite linear;
  opacity: 0
}
.steam02 {
  position: absolute;
  left: 0;
  animation: steam02 14s infinite linear;
  opacity: 0
}
.steam03 {
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  animation: steam02 12s infinite linear;
  animation-delay: 6s;
  opacity: 0
}
.steam01 img, .steam03 img {
  width: 750px;
  height: 800px
}
.steam02 img {
  width: 399px;
  height: 600px
}
@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.5
  }
  66% {
    transform: rotateY(10deg);
    transform: scaleY(1.8, 1);
    opacity: 0.4
  }
  100% {
    bottom: 0;
    filter: blur(20px);
    transform: rotateY(60deg);
    transform: scaleY(2, 1.8);
    opacity: 0
  }
}
/* 湯気の出るアニメーション end */
.youtube_wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}
.youtube_text{
	text-align: right;
	margin: 1rem;
}
/**==================================================**/
/**=          画面サイズ768px以上の指定              **/
/**==================================================**/
@media screen and (min-width:768px){
}
/**==================================================**/
/**=          画面サイズ1024px以上の指定             **/
/**==================================================**/
@media screen and (min-width:1280px){
	.youtube_wrapper {
	    position: relative;
	    width: 100%;
	}
}