body 
{
  margin        : 0;                                             /* ボディのマージンをすべて削除 */
  display       : flex;                                          /* body 要素をフレックスコンテナに設定 */
  flex-direction: column;                                        /* フレックスアイテム（子要素）を縦方向に並べる */
  min-height    : 100vh;                                         /* body最小値高さをビューポートと同じに設定 */
  font-family   : Arial, sans-serif;                             /* メインフォントArial、代替フォントsans-serif */
}

/*■ビューポート
　ビューポート (viewport) とは、ウェブブラウザで表示可能な範囲のことを指します。具体的には、ユーザーがスクロールせずに
見ることのできるブラウザウィンドウの見える部分です。

■フレックスコンテナ (Flex Container)
　CSSの「Flexbox（フレックスボックス）」レイアウトモジュールで子要素（フレックスアイテム）を管理するための親要素のこと
です。
*/

header 
{
  background-color   : darkgreen;                                    /* 背景色を暗い緑色に設定 */
  background-image   : url("../b/imageFile/backGround.jpg");         /* 指定されたパスにある画像を背景画像として使用 */
  background-size    : 100%;                                         /* 横幅を100%、高さを40%に設定 */
  background-repeat  : no-repeat;                                    /* 背景画像を繰り返し表示しない設定 */
  background-position: center;                                       /* 背景画像を要素の中央に配置 */
  min-height         : 40vh;                                         /* 要素の高さをビューポートの高さの40%に設定 */
  width              : 100%;                                         /* 横幅を100%に設定して横長にする */
  display            : flex;                                         /* header1要素をフレックスコンテナに設定 */
  justify-content    : center;                                       /* フレックスアイテム水平方向に中央揃え */
  align-items        : center;                                       /* フレックスアイテムを垂直方向に中央揃え */
  padding            : 0 10px;                                       /* headerの内側の余白をすべて 0 に設定 */
  position           : relative;                                     /* 要素を「相対位置」に配置 */
}
header img 
{
  position: absolute;                                                /* 画像の位置を絶対位置で指定 */
  top     : 0;                                                       /* 画像の上端を親要素の上端配置 */
  left    : 0;                                                       /* 画像の左端を親要素の左端配置*/
  margin  : 10px;                                                    /* 画像の外側に 10px の余白を追加 */
}
header h1 
{
  color     : white;                                                 /* h1 要素の文字色を白 (white) に設定 */
  font-size : 3em;                                                   /* font-size プロパティは、文字のサイズを指定 */
  margin    : 0;                                                     /* 要素の外側の余白を設定 */
  text-align: center;                                                /* テキストの水平方向の配置を決定 */
}
.header2 {
  display         : flex;                                            /* header2要素をフレックスコンテナに設定 */ */
  justify-content : space-between;                                   /* ﾌﾚｯｸｽｱｲﾃﾑ(span.font-style、select.select)の 間に均等なｽﾍﾟｰｽ設定 */
  align-items     : center;                                          /* フレックスアイテムを 垂直方向の中央 */
  background-color: darkgreen;                                       /* 背景色をダークグリーンに設定 */
  height          : 3%;                                              /* 高さを親要素の3%に設定 */
  display         : flex;                                            /* フレックスボックスレイアウトを適用 */
  padding         : 0 10px;                                          /* 上下のパディングは0、左右のパディングは10pxに設定 */
}
.select {
  margin-left: auto;                                                 /* 左側にできるだけ多くの余白を作ることで、selectを右端に移動 */
}
.font-style{
  color           : white;                                           /* 背景色をダークグリーンに設定 */
  font-weight     : bold;                                            /* フォント強調  */
  text-align      : left;                                            /* 文字列を右へ配置 */
}
.main {
  display         : flex;                                            /* フレックスボックスレイアウトを適用 */
  flex            : 1;                                               /* 要素をフレックスコンテナ内で拡張させる */
  justify-content : space-between;                                   /* アイテムの水平方向の間隔を均等に配置 */
}
.left, .right {
  width           : 20%;                                             /* 幅を20%に設定 */
  padding         : 30px 10px;                                       /* 上下に30px、左右に10pxのパディングを設定 */
  box-sizing      : border-box;                                      /* パディングとボーダーを要素の幅と高さに含める */
}

.left a {
  color          : black;                                            /* リンクのテキスト色を黒に設定 */
  text-decoration: none;                                             /* 下線を削除 */
  padding        : 20px 20px 20px 20px;                              /* 上下左右に20pxのパディングを追加 */
}

.left a:hover {
  text-decoration: underline;                                        /* マウスオーバー時に下線を表示 */
}

.left .menu li {
  line-height: 2;                                                    /* 行の高さを指定（数値を変えて調整） */
}

.right {
  font-size: 12px;                                                   /* フォントサイズを設定 */
}

.center {
  width     : 60%;                                                   /* 幅を親要素の60%に設定 */
  padding   : 10px;                                                  /* 内側の余白を上下左右に10px追加 */
  overflow-y: auto;                                                  /* 垂直方向（y軸）のスクロールを自動的に表示 */
}

footer {
  background-color: darkgreen;                                       /* 背景色をダークグリーンに設定 */
  color           : white;                                           /* 文字色を白に設定 */
  text-align      : right;                                           /* 文字を右揃えに設定 */
  height          : 30px;                                            /* 高さを調整 */
  bottom          : 0;                                               /* ビューポートの一番下に配置 */
  width           : 100%;                                            /* 横幅を100%に設定 */
  color           : white;                                           /* 文字色を白に設定 */
  line-height     : 30px;                                            /* テキストの垂直中央揃え */
  padding         : 0px;                                             /* 高さを低くするために余白を小さく設定 */
  font-size       : 1em;                                             /* フォントサイズを1emに設定 */
  flex-shrink     : 0;                                               /* フッターが縮まないようにする */
}

footer a {
  color           : white;                                            /* メールリンクの文字色を白に設定 */
  text-decoration : none;                                             /* 必要に応じて下線を削除 */
}

footer a:hover {
  text-decoration : underline;                                        /* ホバー時に下線を表示（オプション） */
}