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

/* page style */

header {
	/* background: #3498db; */
}
h1 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 2em;
	text-align: center;
	transform: translateY(-50%);
}



/* demo style */
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	/* height: 200px; */
	/* background: #3498db; */
	transition: .3s;
}
header h1 {
	color: #fff;
	transition: .3s;
}
.is-animation {
	/* height: 100px; */
	background: rgba(0, 0, 0, 0.7);
}
.is-animation h1 {
	color: #000;
}


header {
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

.nav-button {
  display: none;
}
.nav a {
	text-decoration: none;
	font-size: 14px;
	color: #FFF;
}

.nav ul {
}
.nav li {
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
  }

.nav li a img {
  height: 25px;
  width: auto;
}
.nav-wrap.open {
  display: block;
}
.nav-wrap.close {
  display: none;
}

.nav li a:hover {
	opacity: 1;
	/*color: #de021c;*/
}
.nav li a{
  position: relative;
  text-decoration: none;
  padding: 0 5px 10px 5px;
}
.nav li a::before{
  border-bottom: solid 2px #FFF;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  width: 0;
}
.nav li a::before {
  left: 0%;
}
.nav li a:hover::before{
	width: 100%;
}
.nav li a.icon::before {
	display: none;
}
.nav li a.icon:hover{
	opacity: 0.7;
}






header .logo img {
	vertical-align: middle;
}
@media screen and (min-width: 769px) {
	header {
		padding: 20px;
	}
	.nav-wrap {
		display: block !important;
		padding-top: 10px;
	}
	.content {
	  padding: 20px;
	}
	header .logo {
	  width: 300px;
	}
}
@media screen and (max-width: 768px) {
	header {
		padding: 15px 1em;
	}
	header .logo {
		width: 200px;
	}
	.nav-button {
		display: block;
		cursor: pointer;
		}
		.nav-wrap {
		position: fixed;
		left: 0;
		top: 0;
		display: none;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.9);
		width: 100%;
		height: 100%;
	}
	.nav-wrap .nav {
		height: 100%;
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.nav-wrap .nav li {
		display: block;
		margin: 2em;
	}
	.nav-wrap .nav li a {
		color: #fff;
		font-size: 18px;
	  }

	/*メニューボタンのエフェクト*/
	.nav-button,
	.nav-button span {
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.nav-button {
		z-index: 20;
		position: relative;
		width: 35px;
		height: 28px;
	}
	.nav-button span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
		border-radius: 4px;
	}
	.nav-button span:nth-of-type(1) {
		top: 0;
	}
	.nav-button span:nth-of-type(2) {
		top: 12px;
	}
	.nav-button span:nth-of-type(3) {
		bottom: 0;
	}
	.nav-button.active span:nth-of-type(1) {
		-webkit-transform: translateY(16px) rotate(-45deg);
		transform: translateY(16px) rotate(-45deg);
	}
	.nav-button.active span:nth-of-type(2) {
		opacity: 0;
	}
	.nav-button.active span:nth-of-type(3) {
		-webkit-transform: translateY(-16px) rotate(45deg);
		transform: translateY(-8px) rotate(45deg);
	}
}