h1 {
  /* タイトルの文字設定 */
  font-size: min(7vw, 3rem);
  color: white;

  /* タイトルのレイアウト調整 */
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column; /* 子要素の並び方向を縦に */
  gap: 16px;

  /* 上下左右の中央に揃える */
  justify-content: center;
  align-items: center;
}

h2 {
  /* 表題の文字設定 */
  font-size: 2rem;
  color: green;

  /* 表題のレイアウトを調整 */
  margin: 32px 0px;
  padding: 8px;
  border-left: solid 5px green; /* 左側に線をつける */
}

h3 {
  /* 見出しの文字設定 */
  font-size: 1.5rem;

  /* 見出しのレイアウト設定 */
  margin: 16px 0;
  padding: 8px;

  /* 見出し周りの見た目調整 */
  border: solid 1.5px green; /* グレーの線で囲む */
  border-radius: 30px; /* 角を丸くする */
  background-color: white; /* 背景色を白色に */
}

main {
  /* ウェブサイト全体を中央にする */
  align-content: center;
}

article {
  /* 記事全体のレイアウト調整 */
  margin: auto;
  padding: 0 32px;
  max-width: 800px; /* 記事の最大幅を設定 */
}

b {
  /* 文中に使う強調するタグの文字設定 */
  font-weight: bold;
}

li {
  /* リスト要素の間隔調整 */
  margin: 8px; 
  font-family: Yu Gothic; 
  font-weight: bold; 
  text-align: center; 
}

/* ここから、ナビゲーション(ページへのリンク)のレイアウト調整 */
nav {
  margin: 4px;
  display: flex; /* 要素を、横に並べていく。 */
  overflow-x: scroll; /* 画面に入り切らなかった場合、横スクロールできるようにする */
  font-size: 1.2rem; /* 文字サイズの調整 */

  /* スクロールバーを非表示にする */
  -ms-overflow-style: none; /* (古い) Edge でスクロールバーを非表示にする */
  scrollbar-width: none; /* Firefox でスクロールバーを非表示にする */
}

/* Chrome でスクロールバーを非表示にする */
nav::-webkit-scrollbar {
  display: none;
}

/* ナビゲーションの子要素(a)に対して、適用される */
nav > a {
  flex: 0 0 auto; /* 一行で表示 */
  padding: 8px 1rem; /* リンクとして機能する領域を広げる */
  text-decoration: none; /* デフォルトで入る下線を消す */
  color: gray; /* リンクの文字色をグレーにする */
}

/* リンクにカーソルをあわせたとき、見た目を変える */
nav > a:hover {
  color: blue; /* カーソルに合わせたとき青色にする */
  font-weight: bold;
  font-family: Yu Gothic; 
}

/* ナビゲーションにおいて、現在いるページをわかりやすくするため、リンクの見た目を変える。 */
.active-nav-link {
  border-bottom: solid 4px; /* 下に先を引く */
  color: dimgray;
  font-family: Yu Gothic; 
}
/* ここまで、ナビゲーション(ページへのリンク)のレイアウト調整 */

/* ここから、index で使われるウェブサイトタイトルのレイアウト調整 */
.index-title {
  height: 70vh; /* 高さを全体の 70% に指定 */
  position: relative; /* 画像と文字を重ねるため、相対位置にする */
  overflow: hidden; /* 表示領域を超えたとき、見えなくする */
}

.index-image {
  height: 70vh; /* 背景画像の高さ調整(index-title の height と揃えること) */
  width: 100%; /* 背景画像の幅調整 */
  position: absolute; 

  /* 表示領域と画像サイズが違うとき、どのように処理するか */
  object-fit: cover; /* アスペクト比を維持したまま画像を拡大 */
}

.index-text {
  padding: 0 32px; /* 上下はなし、左右に余白 */
  text-align: center; /* 文字を中央に配置 */

  /* 文字レイアウトの指定 */
  background-color: rgba(0, 0, 0, 0.3); /* 文字の背景色を半透明な黒色に指定 */
  font-size: min(7vw, 5rem); /* 画面幅の 7% か 文字サイズの 5倍 の小さい方 */
  /* スマートフォン、タブレット、パソコンにおいて一行できれいに表示されるよう、調整している。*/
}
/* ここまで、index で使われるウェブサイトタイトルのレイアウト調整 */

/* ここから、ウェブサイトロゴのレイアウト調整 */
.logo {
  padding: 0px 16px; /* ロゴまわりの余白を指定 */
}

.logo > img {
  height: 100px; /* 画像の高さ指定 */
}
/* ここまで、ウェブサイトロゴのレイアウト調整 */

/* ここから、各ページで使うタイトルのレイアウト調整 */
.title {
  height: 20vw; /* 高さを全体の 20% に指定 */
  position: relative; /* 画像と文字を重ねるため、相対位置にする */
  overflow: hidden; /* 表示領域を超えたとき、見えなくする */
}

.subtitle {
  font-size: 0.4em; /* 親要素文字サイズの 0.4 倍に指定 */
}

/* タイトル後ろにある画像 */
.featured-image {
  position: absolute;
  width: 100%; /* 最大幅 */
  height: auto; /* アスペクト比を維持したまま、高さを自動調整 */
}
/* ここまで、各ページで使うタイトルのレイアウト調整 */

/* ここから、各節のレイアウト調整 */
.flex {
  display: flex; /* フレックスレイアウト */
  flex-wrap: wrap; /* 要素が領域内に収める*/
  gap: 16px; /* 要素同士の間隔を指定 */
}

/* 各節の画像、テキストが flex 内できれいに表示されるようレイアウト調整 */
.flex > * {
  flex: 1 1 320px; /* .flex の子要素において、伸長係数と縮小係数を設定 */
  /* 幅が 320px を下回る場合、横に並ばず下に配置される */
}

.img-right {
  /* コンテンツを左から順に配置する */
  flex-direction: row;
}

.img-left {
  /* コンテンツを右から順に配置する */
  flex-direction: row-reverse;
  /* テンプレートの HTML はテキスト→画像の順に記述されているため、左に画像になる*/
}

.explanation-figure {
  flex-basis: 25%; /* 図のサイズ指定 */
  /* 幅の 25% を下回る場合、横に並ばず下に配置される */
}

.explanation-figure > img {
  /* 図のアスペクト比を維持したまま画像をリサイズ */
  width: 100%;
  height: auto;
}
/* ここまで、各節のレイアウト調整 */

/* ここから、横並びにするレイアウト */
.grid {
  display: grid; /* グリッドレイアウト */
  grid-template-columns: repeat(4, 1fr); /* 4列に指定 */
  justify-content: space-between; /* 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */
  text-align: center; /* 文字の左右中央揃え */
}

.grid-image {
  width: 80%;
  clip-path: circle(50%); /* 丸に切り抜く */
}
/* ここまで、横並びにするレイアウト */

/*  リスト */
.points {
  font-weight: bold; /* フォントのスタイルを指定 */
  color: green; /* 色を指定 */
}

/* ここからテーブル（表）のレイアウト調整 */
.table {
  width: 100%; /* テーブル（表）の幅を指定*/
  margin-bottom: 1em; /* 領域間のスペースを指定 */
  border-collapse: collapse; /* 隣接するセルのボーダーを重ねて表示*/
  border: 1px solid gray; /* ボーダーのスタイルを指定*/
}

th {
  padding: 10px; /* 領域内のスペースを指定 */
  text-align: center; /* テキストを中央に配置 */
  vertical-align: middle; /* 縦方向の揃え位置を中央に配置*/
  border: 1px solid gray; /* ボーダーのスタイルを指定*/
  background: lightgreen; /* 背景のスタイルを指定*/
  width: 20%; /* 見出しの幅を指定*/
}

td {
  padding: 10px; /* 領域内のスペースを指定*/
  text-align: left; /* テキストを左揃えに配置 */
  border: 1px solid gray; /* ボーダーのスタイルを指定*/
}
/* ここまでテーブル（表）のレイアウト調整 */

/* ここから、フッター(ページへのリンク)のレイアウト調整 */
footer {
  margin: 36px auto;
  text-align: center;
}

/* 区切り線 */
hr {
  margin-top: 2em; /* 領域間のスペースを指定 */
}

.footer-logo {
  margin-bottom: 1em; /* 領域間のスペースを指定 */
}

.footer-text {
  font-size: 0.8em; /* ロゴ下のテキストサイズを指定 */
}
/* ここまで、フッター(ページへのリンク)のレイアウト調整 */