.main {
  grid-row: 2 / 10;
  background-color: #edf2f3c5;
}

form {
  width: 40%;
  color: #222222;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 1.5em;
}

.fomeName {
  color: #524e4e;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1em;
}

form div {
  padding: 2% 7%;
}

form input[type="text"],
form input[type="password"] {
  border-radius: 10px;
  padding: 0.2em;
  text-indent: 0.3em;
  font-size: calc((100vw - 320px) / 140 + 16px);
  border: 3px solid #d4d4d4;
}

form button {
  width: 100%;
  letter-spacing: 0.5em;
  margin: 5% 0;
  padding: 0.2em 0;
}

.errorMsg {
  display: grid;
  grid-row: 2 / 10;
}

dialog {
  width: auto;
  height: auto;
  min-width: 50%;
  min-height: 17em;
  background: #f8f8f8;
  border-radius: 3%;
  border: 2px solid #a7a0a0;
  box-shadow: 2px 2px 4px gray;
  padding: 1em;
  z-index: 99999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  vertical-align: middle;
  place-content: center;
  overflow: hidden;
  white-space: pre-wrap;
}

dialog p {
  font-size: calc((100vw - 320px) / 140 + 16px);
}

.dlgBtn {
  display: flex;
  grid-auto-flow: column;
  place-content: center;
}

.dlgBtn button:first-of-type {
  margin-right: 1em;
}

/*
.msg {
  text-align: center;
}

.link {
  color: #4b9adb;
  border-bottom: 2px solid #4b9adb;
}
 */

/* 携帯縦向き */
  @media screen and (max-width: 480px) {

    form {
      width: 80%;
    }

    dialog {
	    width: 75%;
    }

  }

/* 携帯横向き */
  @media (orientation: landscape) and (max-width: 767px) {

    form {
      width: 60%;
      margin-top: 0;
    }

    form div {
      padding: 1% 7%;
    }

    dialog {
      min-height: 10em;
    }

  }
  
/* iPad 縦向き */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

    form {
      width: 60%;
    }

    dialog {
	    width: 60%;
    }

  }

/* iPad 横向き */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

    .contents {
      background-color: #edf2f3c5;
    }

    form {
      width: 60%;
    }

    dialog {
	    width: 50%;
    }

  }