@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;
 }

/*story*/
 .story {
  padding: 1em 5em 1em 1.5em;
 }
 .ginchan{
  width: 20%;
  bottom: -20px;
 }
/*howto*/
 #howto .qr{
  width: 75%;
  padding: 10em;
  margin: 0 auto;
 }
 #howto .qr .code{
  top: 45px;
  left: 50px;
 }
 #howto .qr .code img{
  width: 60%;
 }
 #howto .qr .linebtn{
  top: 140px;
  right: 60px;
 }
}

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

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

/*story*/
 .story {
  padding: 1em 5em 1em 1.5em;
 }
 .ginchan{
  width: 25%;
  bottom: -20px;
 }
/*howto*/
 #howto .qr{
  width:90%;
  padding: 10em;
  margin: 0 auto;
 }
 #howto .qr .code{
  top: 45px;
  left: 20px;
 }
 #howto .qr .code img{
  width: 50%;
 }
 #howto .qr .linebtn{
  top: 140px;
  right: 45px;
 }
}
@media screen and (min-width:400px) and (max-width:749px) { /*sp*/
 *{
  line-height: 2em;
  font-size:15px;
 }

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

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

/*story*/
 #story {
  margin-top: 3em;
  margin-bottom: 5em;
 }
 .story {
  padding: 1em 3.5em 1em 1.5em;
  margin: 0;
 }
 .ginchan{
  width: 27%;
  right: 5px;
  bottom: -40px;
 }
/*howto*/
 #howto .qr{
  position: static;
  width:100%;
  padding: 1em;
  margin: 0 auto;
 }
 #howto .qr .code{
  position: static;
  top: 0;
  left: 0;
 }
 #howto .qr .code h3{
  font-size: 15px;
  margin: 0;
 }
 #howto .qr .code a{
  font-size: 20px;
 }
 #howto .qr .code img{
  width: 40%;
 }
 #howto .qr .linebtn{
  position: static;
  top: 0;
  right: 0;
 }
 #howto .qr .linebtn img{
  width: 40%;
 }
 /*attention*/
 .attention {
  margin: 0;
 }
 /*footer*/
 footer {
  padding-top: 0;
}
}
@media screen and (max-width:399px) { /*minisp*/
 *{
 line-height: 2em;
 font-size:15px;
 }

/*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;
 }

/*story*/
 #story {
  margin-top: 3em;
  margin-bottom: 5em;
 }
 .story {
  padding: 1em 1.5em;
  margin: 0;
 }
 .ginchan{
  width: 26%;
  right: 12px;
  bottom: -30px;
 }
/*howto*/
 #howto .qr{
  position: static;
  width:100%;
  padding: 1em;
  margin: 0 auto;
 }
 #howto .qr .code{
  position: static;
  top: 0;
  left: 0;
 }
 #howto .qr .code h3{
  font-size: 15px;
  margin: 0;
 }
 #howto .qr .code a{
  font-size: 20px;
 }
 #howto .qr .code img{
  width: 40%;
 }
 #howto .qr .linebtn{
  position: static;
  top: 0;
  right: 0;
 }
 #howto .qr .linebtn img{
  width: 40%;
 }
 /*attention*/
 .attention {
  margin: 0;
 }
 /*footer*/
 footer {
  padding-top: 0;
 }
}