@media all and (max-width: 1000px) {
  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }

  footer {
    text-align: center;
  }

  .top-wrapper h1 {
    font-size: 32px;
  }

  .heading h2 {
    font-size: 20px;
  }
}

/* スマホ向けレイアウト */
@media all and (max-width: 670px){
  
    
    header {
  /*ヘッダーを固定*/
  position: fixed;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 9999;
}
    a{
        letter-spacing: 0.2em;
    }
    p{
        letter-spacing: 0.2em;
    }
   
    .top {
        display: flex;
        height: 80px;
    
    }
    .top img{
        width: 80%;
    }
    .top h1{
        font-size: 35px;
        margin-left: 30px;
        
    }
    
    .top a{
        width: auto;
    }
    
    .top p{
        height: auto;
        font-size: 0.5rem;
    }
    .back_ground img{
    width: 85%;
    max-width: 1200px;
    margin-top: 60px;
        }
    
    .hole {
        text-align: initial;
    }
    .hole1{
        display: none;
    }
    .hole2{
        display: block;
    }
.hole2 img{
 width: 100vw;
background: transparent;
    z-index: 0;
}
.hole h1{
    padding: 100px 0 0 30px;
    font-weight: normal;
    font-size: 35px;
    text-align: left;
    color: #000;
    margin: 0 0 20px 0;
   z-index: 0;
    letter-spacing: 0.2em;
}
.hole a{
    display: block;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: normal;
    font-size: 15px;
    text-align: left;
    color: #000;
    padding: 10px 0 0 30px;

}
    #nav{
  position: absolute;
　top: 0;
　/*ナビメニューを左に隠した状態になる*/
  left: -40%;
  width: 80%;
  height: 100vh;
  background: rgba(255,255,255,0.9);
　/*０.7秒かけてナビメニューがスライドする*/
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
  font-size: 30px;
}
#nav li a{
  display: block;
  text-decoration: none;
  color: #000000;
  margin: 0 20px;
  padding: 50px 20px;
  transition: .5s;
 font-size: 30px;
}
#nav li a:hover{
  color: #ffffff;
  background: #cd5c5c;
  border-bottom: none;
}
#hamburger {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 35px;
  cursor: pointer;
  transition: 1s;
    }
    
  .inner_line {
  display: block;
  position: absolute;
  right: 0;
  width: 40px;
  height: 1px;
  background-color: #000;
  transition: 1s;
  border-radius: 4px;
}
    
#line1 {
  top: 10px;
}
#line2 {
  top: 25px;
}
#line3 {
  top: 40px;
}

    .about a{
        width: 90%;
        left: 0;
    }
.menu-icon {

float: right;
display: block!important;
width: 70px;
height: 70px;
border-radius: 0px 0px 0px 30px;
background: rgba(112, 112, 112, 0.16);
border: 1px solid rgba(112, 112, 112, 0);
}
    .back_ground {
        margin: 0 auto;
    }
    .under_top{
        display: block;
    }
.wrapper ul{
    display: none;
}
    .wrapper2 ul{
        display: none;
    }
.content_wrapper{
    flex-direction: column;
    justify-content: center;
  align-items: center;
}
    .content_wrapper2{
    flex-direction: column;
    justify-content: center;
  align-items: center;
        margin-top: 0;
}
.service_wrapper a{
    width: auto;
    margin: 20px;
}
    .content_wrapper a{
        display: block;
    }
    .contact a{
        width: 90%;
    }
    .and_more p{
        margin-right: auto;
        text-align: center;
    }
 .img_wrapper{

display:flex;
justify-content: flex-start;
overflow-x:scroll;

}

    .img_wrapper img{
    width: 40vw;
    height: 30vw;
    border: 1px solid #fff;
    box-shadow: 10px 10px 10px #999;
    margin:2vw;
    display:flex;
    overflow-x:scroll;
    text-align:center;
}

       
    
    
    
    /*about CSS */
    .About_text a{
        padding: 0px 20px;
    }
    .company {
        flex-direction: column;
    }
    .company img{
        margin: auto;
    }
    .company p{
        margin:auto;
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    .menber_content1{
        flex-direction: column;
    }
    .menber_photo {
        margin: auto;
        text-align: center;
    }
    .menber_photo img{
        margin: auto;
        text-align: center;
    }
    .menber_text{
        margin: 20px 0 0 0;
    }
    .menber_text p{
        text-align: center;
    }
    .menber_text a{
        font-size: 10px;   
        line-height: 20px;
        margin: 20px;
    }
    
    
    
    /*Works css*/
    .works_content h1{
        font-size: 1.5rem;
    }
    .works_content a{
        width: 80%;
        font-size: 0.7rem;
        padding-left: 0;
    }
    
    /*contect css*/
    form{
        width: 100vw;
    }
    .item{
        margin-left: 5vw;
    }
    
    /*serviceのCSS*/
    .price_content img{
        width: 50vw;
    }
    .price_content{
        flex-wrap: wrap;
    }
    .price{
               -webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
        clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
        
    }
    
    .pack_wrapper{
        flex-direction: column;
        text-align: center;
    }
    .pack_content{
        margin: 2vw auto;
    }
    .pack_content img{
        width: 70vw;
    }
    .option h2{
        font-size: 0.2em;
    }
    .flow_content a{
    width: 80vw;
    display: block;
    margin: 0 auto 10vw auto;
    letter-spacing: 0.2em;
    font-size: 12px;
}

    
    /*footer css*/
  
    .footer_list a{
        margin: 0;
    }
.footer_list p{
    letter-spacing: 0;
}
  
nav li{
    font-size: 1.3rem;
    margin: 5px;
    text-align: left;
    width: 100px;
}
nav ul{
    width: auto;
    padding-left: 20px;
}

/*ブログのCSS*/
.blog li{
    width: 100vw;
    font-size: 20px;
}
.blog ul{
    width: 100vw;
    display: block;
    padding: 0;
    margin: 20px auto;
}
    .blog p{
        font-size: 15px;
    }
    .blog a{
    font-size: 25px;
    display: block;
    margin: 5vw auto;
    text-align: center;
    }
    .text {
        width: 90vw;
    }
}