@charset "UTF-8";

@media screen and (max-width:500px){

#top-head{
  height:  50px;
  }
  
body{
  font-size:2vw;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

  }

.logo img{
  position: absolute;
  left: -30px;
  max-width: 300px;
  height: auto;
  }
  
#wrap{
  width: 100%;
  margin-top: 80px;
  padding: 10px 0px 0px 0px;
  }
  
footer{
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  margin-left: -15px;
  }
  
#work{
  width: 100%;
  margin-bottom: 0;
  }

.work-name{
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  }
  
.work-image{
  margin: 0.6em auto;
}

#work video{
  margin: 0.6em auto;
}
  
.caption{
  width: 75%;
  margin: 30px auto 0px auto;
}

.about-caption{
  margin: 30px 0px 0px 30px;
}
 
h1{
  font-size: 4.5vw;
  margin: 0px 0px 8px 30px;
  }

small{
  font-size: 2vw;
  margin: 0px 0px 0px 30px;
  }
  
p{
  font-size: 3vw;
  margin: 0px 0px 0px 0px;
  }  
  
hr.line1 {
  width: 40%;
  border-top: 1px solid lightgray;
  margin: 70px auto 80px auto; 
}

.index-grid {
  margin-top: 60px;
  margin: 80px 0px 0px 0px; 
  display: grid;
  grid-template-columns:1fr ;
  grid-gap: 4px;
}
  
.grid {
   grid-gap: 20px;
}

.about-main{
  width: auto;
}
  
.sp-buttons {
  z-index: 2;
  bottom: 60px;
}
  
}