/* グローバルナビゲーションバーに関する設定 */


/* ■■■ 全体配置 ■■■ */

#navigation {
  /*background-color: #439DD1;*/
  /*margin: 0 0 22px;*/
  }

/* ■■■ カバー画像 ■■■ */

#navigation div.cover {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0px;
  width: 100%;
  height: 266px;
  overflow: hidden;
  }

#navigation img.coverimage {
  left: 0px;
  top: 0px;
  width: 100%;
  min-height: 266px;
  min-width: 800px;
  }

#navigation img.shadowimage {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  min-height: 266px;
  min-width: 800px;
  }

#navigation div.cover h1 {
  position: absolute;
  left: 1em;
  color: white;
  line-height:150%;
  padding: 0;
  font-size:120%;
  white-space: nowrap;
  }
#navigation div.cover h1:first-of-type {
  letter-spacing: 3px;
  word-spacing: 1em;
  bottom: 2em;
  }
#navigation div.cover h1:last-of-type {
  letter-spacing: -1px;
  word-spacing: 0.25em;
  bottom: 0.5em
  }

/* ■■■ カバー画像無し ■■■ */

#navigation div.affiliation {
  padding: 2px 10px;
  margin: 0;
  background-color: #439DD1;
  background-image: url(shadow_revbanner.png);
  background-size: 100% 100%
  }

#navigation div.affiliation h1,
#navigation h2{
  margin: 0;
  font-size: small;
  font-weight: normal;
  line-height: 1.2em;
  color: white;
  white-space: nowrap;
  }
#navigation div.affiliation h1:first-of-type{
  word-spacing: 1em;
  }
#navigation div.affiliation h1:last-of-type{
  word-spacing: 0.25em;
  }

/* ■■■ リスト：表示直後 ■■■ */

#navigation ul {
  /* 全体の設定 */
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: auto;
  }

#navigation ul:after {
  /* CLEARFIX */
  content: "";
  display: block;
  clear: both;
  }

#navigation ul > li {
  /* リスト配置に関する設定 */
  width: 20%;
  float: left; /*左寄せ（改行しない）*/
  text-align: center;
  position: relative; /* 子メニュー表示用 */
  line-height: 2em;
  }


#navigation ul > li > a,
#navigation ul > li > span.nolink {
  /* リスト中のリンクに関する設定 */
  display: block;
  margin: 0;
  background-color: #439DD1;
  color: white;
  text-decoration: none;
  height: 2em; /* 要素サイズを確定 */
  border-bottom: 5px solid #224668;
  }

#navigation ul > li > a.now {
  /* 表示中（class="now"）の設定 */
  background-color: #224668;
  }

#navigation ul > li:hover > a{
  /* ホバー擬似要素 */
  background-color: #224668;
  }

/* ■■■ リスト：サブメニュー表示 ■■■ */

#navigation ul > li > ul {
  /* サブメニューの表示設定 */
  overflow: hidden;
  position: absolute; /* 表示されても他に影響を与えない */
  list-style-type: none;
  list-style: none;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  }

#navigation ul > li > ul > li{
  /* サブメニューの初期状態 */
  width: 100%;
  overflow: hidden;  /* 最初は隠す */
  height: 0; /* 最初は高さゼロ */
  transition: .3s; /* -xxx- シリーズを記述？ */
  }

#navigation ul > li > ul > li > a{
  text-align: left;
  padding: 0 1em;
  }

#navigation ul > li:hover >  ul > li,
#navigation ul > li:active > ul > li{
  /* ホバー・アクティブ時にサブメニュー表示 */
  overflow: visible;
  height: 2em;
  }

#navigation ul > li:hover > ul > li.underline,
#navigation ul > li:hover > ul > li:last-child{
  /* 最終行の下にバーを表示 */
  border-bottom: 5px solid #224668;
  }