:root {
  /* 基本カラー */
  --base-white: #f5f5f5;
  --dark-blue: #112b43;
  --light-blue: #437290;
  --red: #db0000;

  /* monoカラー */
  --dark-gray:#111;
  --light-gray:#666;
  --more-lght-gray: #aaa;

  /* 透過系カラー */
  --box-shadow: rgba(0,0,0,0.3); /* for box-shadow */
}

@media(max-width:650px) {
  html {
    font-size: 12px;
  }
}

body {
  font-family: sans-serif;
  margin: 0;
  background: var(--base-white);
}

h1 { text-align: center; 
}

main {
  padding: 0 2rem;
}

/* ===============
   footer
===============*/
footer {
  margin: 4rem 0;
  background: var(--more-lght-gray);
  padding: 0.5rem 0;
}

footer .caution {
  text-align: center;
  font-size: 0.7rem;
  color: var(--base-white);
}

footer .rights {
  text-align: center;
  font-size: 0.8rem;
  color: var(--light-gray);
}