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

  /* common */
  .container{
    width: 90%;
    margin: 0 auto;
  }

  .imgTtl{
    margin-bottom: 30px;
  }
.imgTtl img{
  height: 50px;
  width: auto;
}

.imgTtl span{
  font-size: 12px;
}


.pcNone{
  display: block;
}

.spNone{
  display: none;
}
  

  /*header*/

  header{
    padding: 20px;
  }

  header .logo img{
    height: 15px;
  }

  .headerIn .btnWrap{
    display: none;
  }

  
  /* footer*/
  
  .footerIn{
    display: block;
  }
   #footer .logo{
     width: 100%;
     text-align: center;
     margin-bottom: 50px;
   }

  #footer .logo img{
    height: 25px;
  }

  .footerIn .nav{
  justify-content: space-between;
}
  .footerIn .nav nav{
    margin: 0;
  }


  .footerIn .nav a{
    font-size: 12px;
    margin-bottom: 10px;
  }

  .copy{
    font-size: 12px;
  }

  /* hero */
  
  #hero{
    background: url(../images/hero_bg_sp.webp) #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  #hero .hero_ttl span{
    white-space: nowrap;
    font-size: 22px;
    margin-bottom: 20px;
  }

  #hero .hero_txt{
    padding-top: 140px;
    width: 100%;
    padding-bottom: 60px;
  }

  #hero .hero_ttl{
    padding: 0; 
    width: 70%;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .hero-badge{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .hero-badge .badge{
    margin: 0 5px;
    font-weight: 800;
    padding: 10px;
    font-size: 16px;
  }


  #hero .btnWrap.sp a{
    display: block;
    width: 60%;
    font-size: 15px;
    padding: 15px 0;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  #hero .hero_ttl img{
    height: auto;
  }

  .secTtl{
    margin-top: 20px;
  }

  .btnWrap.sp{
    display: block;
  }

  /* about */
  
  .aboutIn{
    display: block;
  }

  .aboutItem{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 30px;
  }


  /* howtouse*/
  .flowWrap{
    display: block;
  }

  .flowWrap .flow{
    margin: 0;
  }
  
  .flow.item{
    width: 100%;
    margin-bottom: 20px;
  }

  .flow.item img{
    width: 100%;
    max-width: 150px; 
  }

  .flow.item span{
    font-size: 20px;
    display: block;
  }

  .flow.arrow{
    width: 100%;
    display: flex;
    -webkit-justify-content: center;
            justify-content: center;
    margin-bottom: 20px;
  }

  .flow.arrow img{
    width: 100px;
    margin: 0 auto;
  }

#howtouse > div > div.howtouseIn > div:nth-child(2){
  padding-left: 0;
}



  /* optimal */

  .optimalIn{
    display: block;
  }

  .optimalItem{
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding: 40px;
    padding-bottom: 80px;
  }

  .optimalItem .ttl{
    font-size: 24px;
    margin-bottom: 30px;
  }

  .optimalItem ul li{
    font-size: 17px;
  }

  .faqIn dl{
    max-width: 500px;
  }

  .custom-frame p{
    font-size: 14px;
  }

  
}