@charset "UTF-8";

/* ベース */
body{
  /* background: #b0a0d7; */
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}

/* 見出し */
h1{
  color: blue;            /* bule → blue */
  text-align: center;
  margin: 16px 0;
}
h1 a{
  text-decoration: none;
  color: darkblue;
}

/* グローバルナビ */
#global_navi{
  width: 100%;
  clear: both;
  overflow: hidden;
  margin: 16px auto;
}

#global_navi ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;          /* floatやめて安定化 */
  gap: 1px;
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap;        /* 画面が狭い時に折り返し */
}

#global_navi ul li{
  background: skyblue;
  border: 1px solid black;
  border-radius: 5px;
  width: 145px;
  text-align: center;
  overflow: hidden;       /* 角丸の内側にhover色を収める */
}

#global_navi ul li a{
  display: block;         /* hoverを面で効かせる */
  padding: 8px 10px;
  text-decoration: none;
  color: darkblue;
}

#global_navi ul li a:hover{
  background-color: #FFAE57;
}

#global_navi ul li.current{
  background: darkorange;
}
#global_navi ul li.current a{
  color: #000;
}

hr{
  border: 0;
  border-top: 1px solid darkorange; /* より一般的 */
}

footer{
  /* background-color: gray; */
}