/* 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: #ffffff;
  background-image:  linear-gradient(#EDEEEF 1px, transparent 1px), linear-gradient(to right, #EDEEEF 1px, #ffffff 1px);
  background-size: 28px 28px;
}

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

.note {
  margin-top: 0;
}

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

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

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

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

.note {
    line-height: 1.6;
  }

/* 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: 14vw;
    margin: 20vh auto 4vh;
  }

}