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

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

img{
	max-width:100%;
	vertical-align:bottom;
}

html{
	font-size:62.5%;
}

body{
	color:#333333;
	font-size:1.6rem;
	font-weight:400;
	line-height:1.5;
	font-family: 'Noto Sans JP', sans-serif;
}

a{
	text-decoration:none;
}

ul li{
	list-style:none;
}

header{
	padding:15px 0;
}

.index-header{
	height:700px;
	background-image:url("../images/logo-green.svg"),url("../images/main-visuai.png");
	background-repeat:no-repeat;
	background-size:70% 70%,cover;
	background-position:center center;
}

header .header_container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
}

header h1{
	margin:0;
	padding-left:15px;
	color:#008965;
	font-size:2.2rem;
	font-family: 'Zen Maru Gothic', serif;
}

.hamburger-menu {
	width: 80px;
	height: 80px;
	position: relative;
	border: none;
	background: transparent;
	appearance: none;
	padding: 0;
	cursor: pointer;
}
.hamburger-menu__bar {
	display: inline-block;
	width: 44%;
	height: 2px;
	background: #008965;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: .5s;
}
.hamburger-menu__bar:first-child {
	top: 16px;
}
.hamburger-menu__bar:nth-child(2) {
	top: 24px;
}
.hamburger-menu__bar:last-child {
	top: 32px;
}
.hamburger-menu--open .hamburger-menu__bar {
	top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
	display: none;
}
.navigation {
	display: none;
	background: #333333;
	position: absolute;
	top: 80px;
	width: 100%;
	z-index: 9999;
}
.navigation__list {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.navigation__list-item {
	border-bottom: solid 1px #474747;
}
.navigation__list-item:first-child {
	border-top: solid 1px #474747;
}
.navigation__list-item a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	display: block;
	padding: 24px 0;
	transition: .5s;
}

@media screen and (min-width:768px){
	.header_container{
		margin-right:30px;
	}
	
	.hamburger-menu{
		display:none
	}
	
	.navigation{
		display:block;
		position:static;
		width:490px;
		background-color:transparent;
	}
	
	.navigation__list{
		border:0;
		display:flex;
		justify-content:space-between;
	}
	
	li.navigation__list-item{
		border:0;
	}
	
	.navigation__list-item:first-child{
		border:0;
	}
	
	.navigation__list-item a{
		color:#008965;
		padding:15px 0;
	}
}