@charset "UTF-8";
/*==========================
	index
============================*/
.swiper-container {
	height: 100%;
	width: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
/*==========================
	description
============================*/
.description {
	background: url(../img/index/bgMap.png) no-repeat left center;
	background-size:307px auto;
	-webkit-background-size:307px auto;
	-moz-background-size:307px auto;
	-o-background-size:307px auto;
	margin: 0 auto 100px;
	padding: 150px 0;
}
.description h2 {
	font-size: 18px;
}
.description h2, .description p {
	padding: 0 0 0 375px;
}
.description .lengthTitle1 {
	float: left;
}
/*==========================
	contentsLink
============================*/
.contentsLink {
	margin: 0 auto 180px;
	width: 1008px;
}
.contentsLink li {
	float: left;
	margin: 0 5px;
	max-width: 326px;
	position: relative;
}
.contentsLink li a:hover {
	opacity: 1;
}
.nameImg {
	bottom: -90px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
}
.linkImg {
	overflow: hidden;
}
.linkImg img{
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	filter: grayscale(0%);
	transition:0.5s;
	transition:0.5s;
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}
.contentsLink li a:hover .linkImg img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transform: rotate(3.5deg) scale(1.1);
	transform: rotate(3.5deg) scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
/*==========================
	howTo
============================*/
.howTo {
	padding: 60px 0;
}
.howTo .lengthTitle2 {
	float: left;
}
.howtoImg {
	float: right;
	max-width: 416px;
}
.cookingText {
	float: left;
	max-width: 412px;
	padding: 60px 0 0 25px;
}
.cookingText h2 {
	font-size: 18px;
}
.cookingText p {
	line-height: 2;
}
.cookingText a {
	display: inline-block;
	padding: 20px 0 0;
	position: relative;
	z-index: 1;
}
.cookingText a:after {
	background: #00561f;
	bottom: 0;
	content: "";
	content: '';
	display: block;
	height: 1px;
	left: 50%;
	position: absolute;
	width: 100%;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: -1;
}
.cookingText a:hover {
	color: #ffffff;
}
.cookingText a:hover::after {
	background: #00561f;
	height: 25px;
	width: 100%;
}
/*==========================
	aside
============================*/
aside {
	padding: 100px 0 90px 0;
}
.lengthTitle3 {
	margin: 0 auto 30px;
	text-align: center;
}
#instafeed {
	display: none;
	margin: 0 auto;
	width: 1008px;
}
#instafeed li {
	float: left;
	margin: 0 4px 8px 4px;
	width: 244px;
}
/* Media Queries ================================================== */
@media screen and (max-width: 786px) {
	/*==========================
		index
	============================*/
	.swiper-container {
		height: 100%;
		width: 100%;
	}
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	/*==========================
		description
	============================*/
	.description {
		background: url(../img/index/bgMap.png) no-repeat 100% 90%;
		background-size:200px auto;
		-webkit-background-size:200px auto;
		-moz-background-size:200px auto;
		-o-background-size:200px auto;
		margin: 0 auto 10%;
		padding: 10% 5% 40% 5%;
	}
	.description h2 {
		font-size: 16px;
	}
	.description h2, .description p {
		padding: 0;
	}
	.description .lengthTitle1 {
		float: left;
	}
	/*==========================
		contentsLink
	============================*/
	.contentsLink {
		margin: 0 auto 10%;
		width: 90%;
	}
	.contentsLink li {
		float: none;
		margin: 0 0 5%;
		max-width: 100%;
		position: relative;
		width: 100%;
	}
	.contentsLink li a:hover {
		opacity: 1;
	}
	.nameImg {
		bottom: auto;
		left: auto;
		margin: auto;
		position: relative;
		right: auto;
	}
	.linkImg {
		overflow: hidden;
	}
	.linkImg img{
		-webkit-filter: none;
		-moz-filter: none;
		-o-filter: none;
		-ms-filter: none;
		filter: none;
		transition:0;
		transition:0;
		-webkit-transform: none;
		transform: none;
	}
	.contentsLink li a:hover .linkImg img {
		-webkit-filter: none;
		-moz-filter: none;
		-o-filter: none;
		-ms-filter: none;
		filter: none;
		-webkit-transform: none;
		transform: none;
		-webkit-transition: none;
		transition: none;
	}
	/*==========================
		howTo
	============================*/
	.howTo {
		padding: 15% 0;
	}
	.howTo .lengthTitle2 {
		float: left;
		width: 13%;
	}
	.howtoImg {
		float: right;
		max-width: 83%;
	}
	.cookingText {
		clear: both;
		float: none;
		max-width: 100%;
		padding: 10% 0 0;
	}
	.cookingText h2 {
		font-size: 16px;
	}
	.cookingText p {
		line-height: 2;
	}
	.cookingText a {
		display: inline-block;
		padding: 5% 0 0;
		position: relative;
		z-index: 1;
	}
	.cookingText a:after {
		background: #00561f;
		bottom: 0;
		content: "";
		content: '';
		display: block;
		height: 1px;
		left: auto;
		position: absolute;
		width: 100%;
		transition: 0s;
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		z-index: -1;
	}
	.cookingText a:hover {
		color: #1b1b1b;
	}
	.cookingText a:hover::after {
		background: #00561f;
		height: 1px;
		width: 100%;
	}
	/*==========================
		aside
	============================*/
	aside {
		padding: 15% 0 10% 0;
	}
	.lengthTitle3 {
		margin: 0 auto 8%;
		max-width: 10%;
		text-align: center;
	}
	#instafeed {
		height: 350px;
		margin: 0 auto;
		overflow: auto;
		width: 90%;
		-webkit-overflow-scrolling: touch;
	}
	#instafeed li {
		margin: 0 0 3% 0;
		width: 48.5%;
	}
	#instafeed li:nth-child(odd) {float: left;}
	#instafeed li:nth-child(even) {float: right;}
}
/* Media Queries ================================================== */