@charset "utf-8";

* { 
  font-family: "Noto Sans JP", sans-serif; 
  /* font-size: 16px; */
} 
body {
  max-width: 800px;
  margin-right: auto; 
  margin-left : auto;
}
#imgSha, #imgShi, #imgDa, #imgFu, #imgAr, #imgLowe {
  display: none;
}

#clickortap {
  font-size: 12px;
}
.btnA {
  width: 350px;
  font-size: 16px;
  border: none;
  color: #000000;
  border-radius: 10px;
  padding: 10px 20px;
  margin-top: 10px;
  position: relative;
  top: -2px;
}
.btnB {
  border:double;
  display:block;
  border-radius: 10px;
  padding: 10px 20px;
  color: black;
  background: #e4e4e4;
  font-size: 16px;
  margin-top: 20px;
  margin-left: auto;
  margin-bottom: 20px;
  position: relative;
  top: -2px;
  font-size: 12px;
  max-width: 250px;
}
#btnSha {
  background: #fd979e;
  box-shadow: 0 5px #e66871;
}
#btnShi {
  background: #6ec8bd;
  box-shadow: 0 5px #49857e;
}
#btnDa {
  background: #a9e5ff;
  box-shadow: 0 5px #7097a8;
}
#btnFu {
  background: #fffb94;
  box-shadow: 0 5px #b3af52;
}
#btnC {
  color: #fff;
  background: #e44650;
  box-shadow: 0 5px #882930;
}
#btnAr, #btnLowe {
  color: #ffffff;
  background: #707070;
  box-shadow: 0 5px #575757;
}
.btnA:hover, .btnB:hover {
  cursor: pointer;
  top: 1px;
  }
.note {
  color: red;
}

@media screen and (max-width: 640px) {
  body {
    margin: 0 5%;
  }
  .btnA {
    max-width: 200px;
    font-size: 12px;
  }
  img, video {
    width:100%;
    margin: 5% 0;
    }
}