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

/*==================================================================================

Header

==================================================================================*/

header {
	width: 98%;
	margin: 0 auto;
	padding: 1% 0;
	box-sizing: border-box;
	font-size: 10px;
}

/* h1 */

h1 {
	position: relative;
	float: left;
	width: 20%;
	padding-top: 0.5%;
}

h1 a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}

/*
Nav
-------------------------------------------------- */

#sp-nav {
	display: none;
}

#nav ul {
	float: right;
	width: 45%;
}

#nav ul li {
	position: relative;
	float: left;
	width: 15%;
	margin-right: 2%;
	text-align: center;
}

#nav ul li a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}

#nav ul li:hover p {
	color: #009b54;
}

#nav ul li:last-child {
	margin-right: 0;
}

#nav ul li img {
	width: 35%;
	margin-bottom: 8%;
}



/* ◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇																		 

Responsive

◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇ */


@media (max-width: 1025px) {

/*==================================================================================

Header

==================================================================================*/

	header {
		padding: 3%  3%  5% 0;
	}	

/* h1 */

	h1 {
		width: 60%;
		padding-top: 0;
	}

/*
Nav
-------------------------------------------------- */

	#nav {
		display: none;
	}

	#modal-area {
		position: absolute;
		top: 2.5%;
		right: 3%;
		padding: 1.3% 2% 1%;
		font-family: 'Josefin Sans', sans-serif;
		font-weight: 600;
		color: #fff;
		background: #009b54;
		border-radius: 3px;
		box-sizing: border-box;
	}
	
	#sp-nav {
		display: block;
	}
	
	#nav-modal {
		position: relative;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 9999;
	}
	
	.open-menu {
		-webkit-filter: blur(4px);
		-ms-filter: blur(4px);
		filter: blur(4px);
	}
	
	.close-menu {
		-webkit-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	
	.close-nav-modal {
		position: absolute;
		top: 0;
		right: 3%;
		font-size: 40px;
		font-weight: 900;
		color: #009b54;
	}

/* nav-list */

	#modal-nav-list ul {
		width: 90%;
		height: 100%;
		margin: 0 auto;
		margin-top: 30%;
		font-size: 12px;
		text-align: center;
	}
	
	#modal-nav-list ul li {
		position: relative;
		float: left;
		width: 48%;
		margin-right: 4%;
		padding: 6% 3%;
		border: 1px solid #009b54;
		border-radius: 5px;
		box-sizing: border-box;
	}
	
	#modal-nav-list ul li:nth-child(2n) {
		margin-right: 0;
	}
	
	#modal-nav-list ul li:nth-child(n+3) {
		margin-top: 6%;
	}
	
	#modal-nav-list ul li img {
		width: 30%;
		margin-bottom: 6%;
	}
	
	#modal-nav-list ul li a {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
}


/* iPhone 横 */
@media screen and (min-width: 568px) {

/* h1 */

	header {
		padding: 1% 1% 2%;
	}

	h1 {
		width: 50%;
	}

/*
Nav
-------------------------------------------------- */

	#modal-area {
		top: 4%;
		right: 3%;
		padding: 1% 2% 1%;	
	}

/* nav-list */

	#modal-nav-list ul {
		margin-top: 12%;
	}
	
	#modal-nav-list ul li {
		width: 31%;
		margin-right: 3%;
	}
	
	#modal-nav-list ul li:nth-child(2n) {
		margin-right: 3%;
	}
	
	#modal-nav-list ul li:nth-child(3n) {
		margin-right: 0;
	}
	
	#modal-nav-list ul li:nth-child(n+3) {
		margin-top: 0;
	}
	
	#modal-nav-list ul li:nth-child(n+4) {
		margin-top: 3%;
	}
}


/* iPad 縦 */
@media screen and (min-width: 768px) {	
	
/*
Nav
-------------------------------------------------- */

/* h1 */

	h1 {
		float: none;
		width: 60%;
		margin: 0 auto;
		padding-top: 0;
	}

/*
Nav
-------------------------------------------------- */

	#sp-nav {
		display: none;
	}
	
	#nav {
		display: block;
	}
	
	#nav ul {
		float: none;
		width: 100%;
		margin-top: 4%;
		margin-bottom: 0.5%;
	}
	
	#nav ul li {
		width: 16%;
		margin-right: 0.8%;
	}
	
	#nav ul li img {
		width: 35%;
		margin-bottom: 8%;
	}
	
	#nav ul li p {
		font-size: 13px;
	}
}


/* iPad 横 */
@media screen and (min-width: 992px) {

/*
Nav
-------------------------------------------------- */

/* h1 */

	h1 {
		width: 50%;
		margin-top: 0.5%;
	}

/*
Nav
-------------------------------------------------- */

	#nav ul {
		margin-top: 3%;
	}

	#nav ul li {
		width: 15%;
		margin-right: 2%;
	}
	
	#nav ul li img {
		width: 32%;
	}
	
	#nav ul li p {
		font-size: 14px;
		white-space: nowrap;
	}

}


@media screen and (min-width: 1200px) {
	
	header {
		padding: 0;
	}

/* h1 */

	h1 {
		float: left;
		width: 20%;
		padding-top: 0.5%;
	}

/*
Nav
-------------------------------------------------- */

	#nav ul {
		float: right;
		width: 45%;
		margin-top: 1%;
		margin-right: 1%;
	}
	
	#nav ul li img {
		width: 35%;
	}
}