/*-------------------------
  ヘッダー
-------------------------*/
header {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  vertical-align: middle;
  justify-content: space-between;
  align-items: center;
}

/* ヘッダーの上部 */
.header-top {
  margin: 20px 0px;
}

/* ヘッダーの下部ログアウトなど */
.header-bottom {
  text-align: right;
  margin-bottom: 3px;
}

/* ロゴ */
header .logo a {
  padding: 0 20px;
  color: #0550bf;
  font-size: 25px;
  letter-spacing: 0.2em;
}

header .version {
  color: #333333;
  font-weight: bold;
  font-size: 20px;
}

/* ロゴにカーソルを合わせたとき */
header .logo a:hover {
  opacity: 0.7;
}

/* ログイン情報とログアウト */
.header-item {
  height: 20px;
  margin-left: 10px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
  font-size: 13px;
}

/* ログアウトのリンク */
.header-item a {
  color: #333333;
}

/* ログアウトにカーソルを合わせたとき */
.header-item a:hover {
  opacity: 0.7;
}

/*-------------------------
  メニュー
-------------------------*/
nav {
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 0;
  background: #0550bf;
}

/* メニューリスト */
nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
  width: 20%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

/* メニューリンク */
nav li a {
  display: block;
  width: auto;
  margin: 0;
  padding: 12px 0;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}

/* メニューリストにカーソルを合わせた時 */
/* リスト */
nav li:hover {
  background: #2663bf;
}

/* リンク */
nav li a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* 表示中のページのメニューは色を変える */
nav ul li a.active {
  background: #053d90;
}

/* リンクのクリック範囲をセル内にする */
.cell-link {
  height: 0;
  padding: 0;
}

.cell-link a {
  display: block;
  width: 100%;
  height: 100%;
  align-items: center;
}

/*-------------------------
  ページタイトル
-------------------------*/
.title {
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 28px;
  font-weight: bold;
  color: #053d90;
}

/* ページタイトル+カレンダー要素 */
.main-top {
  margin: 10px;
}