@charset "UTF-8";
/* style_sp.css */

@media screen and (max-width:600px) {

img {
	height: auto;
	width: 100%;
}
/*--------------------
1:body
--------------------*/
body {
	color: #000;
	font-family: "Noto Sans Japanese", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
#wrapper.page {
	padding-top: 56px;
}
.pc { display: none;}

/*--------------------
2:header, nav
--------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	height: 56px;
	padding: 8px 3vw;
	width: 100%;
	z-index: 10;
	-webkit-transition: background-color .5s ease;
	transition: background-color .5s ease;
}
header.fixed { background-color: #fff;}
header .content {
	position: relative;
}
header h1 {
	display: none;
	position: relative;
	z-index: 12;
}
header.fixed h1 { display: block;}
header h1 img {
	height: 40px;
	width: auto;
}
header nav {
	display: none;
	position: absolute;
	top: -8px;
	height: 100vh;
	margin: 0 -3vw;
	background: #fff;
	padding-top: 56px;
	width: 100vw;
	z-index: 11;
}
header nav ul {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: auto;
	width: 90vw;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
header nav ul li { margin: 16px 0;}
header nav ul li a {
	background-color: #93bb4b;
	border-radius: 10px;
	color: #fff;
	display: block;
	font-weight: bold;
	height: 50px;
	line-height: 50px;
	/*padding-top: 16px;*/
	text-align: center;
	text-decoration: none;
	-webkit-transition: background-color .5s ease;
	transition: background-color .5s ease;
}
#nav-btn {
	position: absolute;
	top: 0;
	right: 1vw;
	height: 28px;
	margin: 6px 0;
	width: 28px;
	z-index: 12;
}
#nav-btn span {
	position: absolute;
	top: 4px;
	left: 0;
	background: #93bb4b;
	border-radius: 1px;
	display: inline-block;
	height: 2px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.4s ease;
	width: 100%;
}
/*header.fixed #nav-btn span { background: #93bb4b;}*/
#nav-btn span:nth-of-type(2) { top: 14px}
#nav-btn span:nth-of-type(3) { top: 24px}

#nav-btn.act span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(45deg);
	transform: translateY(10px) rotate(45deg);
}
#nav-btn.act span:nth-of-type(2) { opacity: 0;}
#nav-btn.act span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(-45deg);/*-11 45*/
	transform: translateY(-10px) rotate(-45deg);
}



}/*media*/