/* common */
@charset "utf-8";

html {
  font-family: 'Roboto', 'Noto Sans JP', 'Helvetica Neue', 'Helvetica',
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Arial', 'Yu Gothic',
    'Meiryo', sans-serif;
  background-color: #2e2e36;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 80vw;
  margin: auto;
  text-align: center;
  color: white;
}

.note {
  margin-top: 0;
}

.warn {
  padding: 2vh 4vw;
  margin: 2vh auto;
  background: #cee0f8;
  border-radius: 8px;
  font-weight: bold;
}

footer {
  margin-top: auto;
  padding: 5vh;
  color: #9ca0a3;
  font-size: 0.8rem;
}

/* SP用　ウィンドウ幅が最大600px未満の場合に適用 */

.logo {
  width: 36vw;
  margin: 24vh auto 4vh;
}

.note {
  line-height: 1.6;
  font-size: 0.9rem;
}

/* TB用　ウィンドウ幅が最大600px以上の場合に適用 */
@media screen and (min-width: 600px) {
  .note {
    line-height: 1.7;
  }

  .logo {
    width: 20vw;
    margin: 26vh auto 4vh;
  }
}

/* PC用 ウィンドウ幅が1,025px以上の場合に適用 */
@media screen and (min-width: 1025px) {
  .logo {
    width: 16vw;
    margin: 20vh auto 4vh;
  }
}