/*
コンテンツ
-------------------------------------------------------------------*/

#contents {
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 20px;
	}

.brandlogo {
	margin: 50px auto 0 auto;
	text-align: center;
	}
	
.brandlogo img {
	margin: 0 auto;
	display: block;
	border: none;
	}
	
h1 {
	text-align: center;
	margin-top: 5px;
	}
	
.brandstory {
	margin: 20px 0 0 0;
	}
	
.image-brand {
	margin: 60px auto 0 auto;
	text-align: center;
	}
	
.image-brand img {
	width: 100%;
	display: block;
	margin: 0 auto;
	}
	
	
@media screen and (max-width: 768px) {
	
	.brandlogo {
		margin: 40px auto 0 auto;
		text-align: center;
		}
	
	.brandlogo img {
		width: 35%;
		max-width: 220px;
		}
		
	h1 {
		display: none;
		}
		
	.image-brand {
	margin: 30px auto 0 auto;
	text-align: center;
	}
}



/*
デザインコンセプト
-------------------------------------------------------------------*/

@media screen and (min-width: 769px) {
	.tytle-concept {
		text-align: center;
		width: 200px;
		margin: 100px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}

@media screen and (max-width: 768px) {
	.tytle-concept {
		text-align: center;
		width: 200px;
		margin: 60px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}	

.image-concept {
	margin: 50px auto 0 auto;
	text-align: center;
	}
	
.image-concept img {
	width: 100%;
	max-width: 900px;
	display: block;
	margin: 0 auto;
	}
	
h2 {
	font-size: 17px;
	font-weight: bold;
	margin: 20px 0 0 0;
	}
	
.text-concept {
	margin: 10px 0 0 0;
	}		
		

/*
ディーター・ラムス
-------------------------------------------------------------------*/
	
@media screen and (min-width: 769px) {
	.wrap-dieterrams {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		margin: 60px 0 30px 0;
		padding: 30px;
		background-color: #CCC;
		}
	
	.image-dieterrams {
		width: 300px;
		}
	
	.image-dieterrams img {
		width: 100%;
		display: block;
		}
	
	.text-dieterrams {
		-webkit-flex: 1;
		flex: 1;
		padding: 0 0 0 30px;
		}
}

@media screen and (max-width: 768px) {
	.wrap-dieterrams {
		margin: 30px 0 0 0;
		padding: 30px;
		background-color: #CCC;
		}
	
	.image-dieterrams {
		}
	
	.image-dieterrams img {
		width: 55%;
		max-width: 440px;
		display: block;
		margin: 0 auto;
		}
	
	.text-dieterrams {
		margin: 10px 0 0 0;
		}
}


/*
レオナルド・ダ・ヴィンチ
-------------------------------------------------------------------*/
	
@media screen and (min-width: 769px) {
	.wrap-leonardodavinci {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		margin: 0;
		padding: 30px;
		background-color: #CCC;
		}
	
	.image-leonardodavinci {
		width: 300px;
		}
	
	.image-leonardodavinci img {
		width: 100%;
		display: block;
		}
	
	.text-leonardodavinci {
		-webkit-flex: 1;
		flex: 1;
		padding: 0 0 0 30px;
		}
}

@media screen and (max-width: 768px) {
	.wrap-leonardodavinci {
		margin: 30px 0 0 0;
		padding: 30px;
		background-color: #CCC;
		}
	
	.image-leonardodavinci {
		}
	
	.image-leonardodavinci img {
		width: 55%;
		max-width: 440px;
		display: block;
		margin: 0 auto;
		}
	
	.text-leonardodavinci {
		margin: 10px 0 0 0;
		}
}


/*
フィールドテスト
-------------------------------------------------------------------*/
	
@media screen and (min-width: 769px) {
	.wrap-fieldtest {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		margin: 60px 0 0 0;
		}
	
	.image-fieldtest {
		width: 60%;
		}
	
	.image-fieldtest img {
		width: 100%;
		display: block;
		}
	
	.text-fieldtest {
		-webkit-flex: 1;
		flex: 1;
		padding: 0 20px 0 0;
		}
}

@media screen and (max-width: 768px) {
	.wrap-fieldtest {
		margin: 60px 0 0 0;
		}
	
	.image-fieldtest {
		}
	
	.image-fieldtest img {
		width: 100%;
		display: block;
		}
	
	.text-fieldtest {
		margin: 10px 0 0 0;
		}
}
	

/*
ロゴに秘めた思い
-------------------------------------------------------------------*/

@media screen and (min-width: 769px) {
	.tytle-logo {
		text-align: center;
		width: 200px;
		margin: 100px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}

@media screen and (max-width: 768px) {
	.tytle-logo {
		text-align: center;
		width: 200px;
		margin: 60px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}	

.image-logo {
	margin: 50px auto 0 auto;
	text-align: center;
	}
	
.image-logo img {
	width: 100%;
	display: block;
	margin: 0 auto;
	}
	
.text-logo {
	margin: 10px 0 0 0;
	}
		

/*
生産地のこだわり
-------------------------------------------------------------------*/
	
@media screen and (min-width: 769px) {
	.tytle-place {
		text-align: center;
		width: 200px;
		margin: 100px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
	
	.wrap-place {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		margin: 50px 0 0 0;
		}
	
	.image-place {
		width: 60%;
		}
	
	.image-place img {
		width: 100%;
		display: block;
		}
	
	.text-place {
		-webkit-flex: 1;
		flex: 1;
		padding: 0 0 0 20px;
		}
}

@media screen and (max-width: 768px) {
	.tytle-place {
		text-align: center;
		width: 200px;
		margin: 60px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
	
	.wrap-place {
		margin: 50px 0 0 0;
		}
	
	.image-place {
		}
	
	.image-place img {
		width: 100%;
		display: block;
		}
	
	.text-place {
		margin: 10px 0 0 0;
		}
}


/*
まとめ
-------------------------------------------------------------------*/

@media screen and (min-width: 769px) {
	.tytle-end {
		text-align: center;
		width: 200px;
		margin: 100px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}

@media screen and (max-width: 768px) {
	.tytle-end {
		text-align: center;
		width: 200px;
		margin: 60px auto 0 auto;
		padding: 10px 0;
		border: 1px solid #333;
		}
}

.image-end {
	margin: 50px auto 0 auto;
	text-align: center;
	}
	
.image-end img {
	width: 100%;
	display: block;
	}
	
.text-end {
	margin: 10px 0 0 0;
	}
	
.wrap-end ul {
	margin: 80px 0;
	padding-left: 0;
	}
	
.wrap-end li {
	list-style-type: none;
	}
	
.wrap-end li a {
	display: block;
	width: 220px;
	color: #FFF;
	margin: 0 auto;
	padding: 10px 0;
	background-color: #333;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	}

.wrap-end li a:hover {
	text-decoration: underline;
	opacity:0.7;
	-moz-opacity:0.7;
	filter:alpha(opacity = 70);
	}