@media screen and (min-width: 768px) { /* PC・タブレット */

 .sitename {
  margin:15vh 0 10px 0;
  text-align:center;
  font-size:16pt;
  color:#111111;
 }
 #input {
  text-align:center;
 }
 #input .message {
  width:100%;height:50px;
  line-height:50px;
  color:red;
  font-size:18px;
 }
 #input input {
  width:250px;
  margin-bottom:10px;
  padding:10px 15px;
  border:none;
  border-radius:30px;
  font-size:14pt;
  outline:none;
  box-shadow:inset 2px 2px 5px #cccccc;
 }
 #input .button {
  display:inline-block;
  width:250px;
  margin:0px auto;
  padding:10px 15px;
  background:#1e90ff;
  border-radius:10px;
  font-size:14pt;
  color:white;
  cursor:pointer;
 }
 #notmember {
  font-size:14px;
 }
 #notmember .sorry {
  display:block;
  margin:10vh auto 20px auto;
  width:150px;
 }
 #notmember .login {
  width:200px;
  margin:20px auto;
  background:white;
  border-radius:40px;
  background: linear-gradient(135deg,  white , rgb(218, 202, 255) , white);
  background-size: 600% 600%;
  transition: background-position 1.0s ease;
 }
 #notmember .login div {
  margin:0 auto;
  padding:5px 0;
  border-radius:20px;
  font-size:20px;
  font-weight:bold;
  background: linear-gradient(45deg, purple, violet , pink);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
 }

} @media screen and (max-width: 767px) {  /* スマホ */

 .sitename {
  margin:15vh 0 10px 0;
  text-align:center;
  font-size:14pt;
 }
 #input {
  text-align:center;
 }
 #input .message {
  width:90%;height:40px;
  margin:0 auto;
  color:red;
  text-align:center;
  font-size:12px;
 }
 #input input {
  width:150px;
  margin-bottom:10px;
  padding:10px 15px;
  border:none;
  border-radius:30px;
  font-size:14pt;
  outline:none;
  box-shadow:inset 2px 2px 5px #cccccc;
 }
 #input .button {
  display:inline-block;
  width:150px;
  margin:0 auto;
  padding:5px 15px;
  background:#1e90ff;
  border-radius:10px;
  font-size:14pt;
  color:white;
  cursor:pointer;
 }
 #notmember {
  font-size:14px;
  text-align:center;
 }
 #notmember img {
  display:block;
  width:150px;
  margin:10vh auto 0 auto;
 }
 #notmember .login {
  width:200px;
  margin:20px auto;
  background:white;
  border-radius:40px;
  background: linear-gradient(135deg,  white , rgb(218, 202, 255) , white);
  background-size: 600% 600%;
  transition: background-position 1.0s ease;
 }
 #notmember .login div {
  margin:0 auto;
  padding:5px 0;
  border-radius:20px;
  font-size:20px;
  font-weight:bold;
  background: linear-gradient(45deg, purple, violet , pink);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
 }

}