/* 基礎部分 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

a,
a:visited {
  color: inherit;
}

/* メニューの色 */
.a {
  background: #3399FF;
}

.b {
  background: #3333FF;
    line-height: 1.2em;
}

.c {
  background: green;
}

.d {
  background: #00FF99;
}

.e {
  background: #FFCC00;
}

.f {
  background: #FF8C00;
}

.g {
  background: lightblue;
}
.h {
  background: lightblue;
}
/* ナビゲーションの大きさ */
#header-nav {
  width: 96%;
  margin: auto;
}

/* カラム落ちの防止 */
.header-list {
  font-size: 0;
}

/* メインメニュー */
.menu-item {
  display: inline-block;
  width: 16%;
  position: relative;
}

.menu-item a {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: white;
}

/* サブメニュー */
.sub-menu {
  position: absolute;
  width: 100%;
  top: 50px;
}

.sub-menu-item {
  overflow: hidden;
  opacity: 0;
  height: 0;
  /* サブメニューが出現する速度の調整 */
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* メインメニューマウスカーソルが乗ったらサブメニューを出現させる */
.menu-item:hover > .sub-menu > .sub-menu-item {
  overflow: visible;
  opacity: 1;
  height: 70px;
}
.area {
 width: 100%;
 padding: 80px 0;
 background: url('../images/astronaut_planet_spacesuit_121169_3415x3415.jpg');
 background-size:100% auto;
 background-position : 50% 50%;
}
.title {
 text-align: center;
}
.span {
 display: inline-block;
 font-size: 1.6rem;
 padding: 20px;
 border-top: 2px solid #fff;
 border-bottom: 2px solid #fff;
 background-color: rgba(255, 255, 255, 0.5);
}