@media screen and (min-width:1200px) { /*pc*/
/*Navbar sp*/
 .sp{
  display: none!Important;
 }
}

@media screen and (min-width:1000px) and (max-width:1199px) { /*pc*/
/*Navbar sp*/
 .sp{
  display: none!Important;
 }
}

@media screen and (min-width:750px) and (max-width:999px) { /*tablet*/
/*Navbar pc*/
 .navbar{
  padding: 0.5em 2em;
 }

/*Navbar sp*/
 .sp{
  display: none!Important;
 }

 /*attention*/
 .attention {
  padding: 1em 0 0;
  margin: 0 1em;
 }
 .attention p {
  padding: 0;
 }
}
@media screen and (min-width:400px) and (max-width:749px) { /*sp*/
 *{
  line-height: 2em;
  font-size:12px;
 }

/*sp*/
 h2{
  font-size:25px;
 }
 h3{
  font-size:20px;
 }
 h4{
  font-size:17px;
 }
 dl{
  margin-bottom: 0;
 }

/*Navbar pc*/
 .pc{
  display: none!Important;
 }

/*howto*/
 a.btn--yellow {
   font-size: 20px;
   font-weight: bold;
   margin: 1em 1em;
   color: #fff;
   background-color: #4682b4;
   border-bottom: 5px solid #1c63a0;
 }

 /*attention*/
 .attention {
  padding: 1em 0 0;
  margin: 0 1em;
 }
 .attention p {
  padding: 0;
 }
}
@media screen and (max-width:399px) { /*minisp*/
 *{
 line-height: 2em;
 font-size:12px;
 }

/*sp*/
 h2{
  font-size:25px;
 }
 h3{
  font-size:20px;
 }
 h4{
  font-size:17px;
 }
 dl{
  margin-bottom: 0;
 }

/*Navbar pc*/
 .pc{
  display: none!Important;
 }
 /*logo*/
 #logo img{
   top:-10px;
 vertical-align: top;
  width: 100%;
  line-height: 1.0em;
 }

 /*howto*/
  a.btn--yellow {
    font-size: 20px;
    font-weight: bold;
    margin: 1em 1em;
    color: #fff;
    background-color: #4682b4;
    border-bottom: 5px solid #1c63a0;
  }

 /*attention*/
 .attention {
  padding: 1em 0 0;
  margin: 0 1em;
 }
 .attention p {
  padding: 0;
 }
}