@charset "utf-8";
/* CSS Document */

/* 右上MENU
------------------------------*/

/* header_sp画像の高さが変わるので、メニューの上からの位置は、
ブラウザ横幅によって変動するのは、しょうがない　*/

.nav-content {
	position: absolute;
	width: 100%;
	top: -200%; /* upper space default */
	z-index: 2;
	-webkit-transition: 1.5s top;
	transition: 1.5s top;
	background-color: #0E293D;
	/*　透明度　*/
filter:alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
		padding-top: 12%;
		padding-bottom: 4%;
	}
.nav-content ul li {
	font-size: 18px;
	list-style-type: none;
	text-decoration: none;
	width: 100%;
	padding-bottom: 8%;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.nav-content ul li a {
	text-align: center;
	color: #fff;
	text-decoration: none;
}

.is-open .nav-content {
  top: 9.4%; /* upper space when it open */
}

.menu-button {
	display: block;
	position: absolute;
	right: 4%;
	top: 1%;
	height: 8%;
	width: 8%;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
		}
.menu-button i {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 3px;
	background: #2980b9; /* 3 solid line middle */
	-webkit-transition: background 0.5s;
	transition: background 0.5s;
	position: relative;
	left: 5px;
	top: 14px;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
				 }
.menu-button i:before,
.menu-button i:after {
      content: "";
      display: block;
	width: 100%;
      height: 2px;
      border-radius: 3px;
      background: #2980b9; /* 3 solid line upper and bottom */
      position: absolute;
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transition: all 0.3s !important;
              transition: all 0.3s !important;
														 }
.menu-button i:before {
      -webkit-transform: translateY(8px);
          -ms-transform: translateY(8px);
              transform: translateY(8px); 
														}
.menu-button i:after {
      -webkit-transform: translateY(-8px);
          -ms-transform: translateY(-8px);
              transform: translateY(-8px); 
														}
.is-open .menu-button i {
  background: #2980b9; 
		}
.is-open .menu-button i:after {
    -webkit-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg);
            transform: translateY(0px) rotate(-45deg); 
												}
.is-open .menu-button i:before {
    -webkit-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg);
            transform: translateY(0px) rotate(45deg); 
												}


#js-cover {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0px;
  opacity: 0;
  z-index: 1; 
		}


.header_sp .header_sp_heading {
	position: absolute;
	width: 100%;
	z-index: 3;
	background-color: #2980b9;
}
.menu-button p {
	font-size: 64%;
	letter-spacing: 0em;
	word-spacing: 0em;
	margin: 0px;
	padding: 0px;
	position: relative;
	left: 5px;
	top: 24px;
	color: #2c3e50;
}