/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* サーバのフォントフォルダからフォントを読み込む */
@font-face {
  font-family: 'DotGothic16'; 
  src: url('fonts/DotGothic16-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  font-display: swap; /* 読み込み前は代替フォントで表示 */
}

/* ページ全体の基本フォントサイズと色 */
html {
  font-size: 20px;  /* 基本サイズ20px */
}

body {
  font-family: 'DotGothic16', sans-serif; /* 基軸フォント指定 */
  font-size: 1rem;      /* htmlの1rem = 20px */
  font-weight: 300;     /* 少し細め */
  color: black;
  background-color: #e0f0ff; /* 薄い青 */
}

/* 見出しのサイズ設定 */
h1 { font-size: 4.0rem; } /* 50px */
h2 { font-size: 2rem; }   /* 40px */
h3 { font-size: 1.5rem; } /* 30px */
h4 { font-size: 1.2rem; } /* 24px */
h5 { font-size: 1rem; }   /* 20px */
h6 { font-size: 0.875rem; } /* 17.5px程度 */