@charset "UTF-8";

/*
検索key "=" + "n"

	=1		メインコンテンツ
	=1-1	美山工房紹介
	=1-2	WORKS
	=1-3	私たちが大切にしている4つのこと
	=1-4	事業概要
*/



/* ----------------------------------------------
	=1 メインコンテンツ
   ---------------------------------------------- */
.page_title {
	color: #72472F;
}

section:last-child {
	margin-bottom: 20px;
}

.section_title {
	background-color: #603813;
}

.sectionBox {
	padding: 0 15px;
}


/* =1-1 美山工房紹介
   ----------------------------------- */
.introduction .sectionBox {
	padding: 35px 30px;
	border-radius: 8px;
	background-color: #EAE0CA;
}

.introduction h2 {
	margin-bottom: 20px;
	color: #72472F;
	font-weight: bold;
	font-size: 2.7rem;
	text-shadow: 1px 1px 2px #BBBBBB;
	text-align: center;
}

.introduction h2 span {
	display: block;
	margin-top: 5px;
	color: #555555;
	font-size: 1.7rem;
	text-shadow: none;
}

.introduction .sectionBox p {
	text-align: center;
}


/* =1-2 WORKS
   ----------------------------------- */
/* contentList 白 aタグリスト */
.contentList_2col {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/* 3column 白 aタグリスト */
.contentList_2col li {
	width: calc(50% - 50px / 2);
	margin: 0 50px 30px 0;
	box-sizing: border-box;
}

.contentList_2col li:nth-child(2n) {
	margin-right: 0;
}

.contentList_3col li:nth-last-of-type(-n+3) {
	margin-bottom: 0;
}

.contentList_2col li img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.contentList_2col li h3 {
	margin-top: 15px;
	color: #72472F;
	font-weight: bold;
	font-size: 1.7rem;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
	text-align: center;
}

.contentList_2col li p {
	margin-top: 8px;
	font-size: 1.5rem;
	line-height: 1.6;
}

.contentList_2col li a {
	display: block;
	padding: 20px 20px 25px;
	box-shadow: 1px 1px #CCCCCC;
	border-radius: 10px;
	background-color: #FFFFFF;
	color: #000000;
	text-decoration: none;
}

.contentList_2col li a:hover {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}


/* =1-3 私たちが大切にしている4つのこと
   ----------------------------------- */
.important .sectionBox ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.important .sectionBox ul li {
	width: 44%;
	margin-bottom: 40px;
	padding: 20px 15px;
	border-radius: 8px;
	background-color: #EAE0CA;
	color: #72472F;
	font-weight: bold;
	font-size: 1.7rem;
	text-align: center;
}

.important .sectionBox p {
	text-align: center;
}


/* =1-4 事業概要
   ----------------------------------- */
.summary {
	margin-bottom: 40px;
}

.summary .sectionBox {
	display: flex;
	flex-wrap: wrap;
}

.summary .sectionBox_left {
	width: 37%;
	margin-right: 5%;
}

.summary img {
	width: 100%;
	height: auto;
}

.summary .sectionBox_right {
	width: 58%;
}

.summary .sectionBox_right dl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border-top: 1px dotted #603813;
}

.summary .sectionBox_right dt {
	width: 23%;
	padding: 10px 15px;
	border-bottom: 1px dotted #603813;
	box-sizing: border-box;
	background-color: #EAE0CA;
	color: #72472F;
	font-weight: bold;
	line-height: 1.6;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
}

.summary .sectionBox_right dd {
	width: calc(100% - 23%);
	padding: 10px 15px;
	border-bottom: 1px dotted #603813;
	box-sizing: border-box;
	background-color: #FFFFFF;
	line-height: 1.6;
}

.access .sectionBox_right dt:last-of-type,
.access .sectionBox_right dd:last-of-type {
	margin: 0;
	padding: 0;
	border: none;
}

@media screen and (max-width: 799px) {
	.summary .sectionBox {
		display: block;
		flex-wrap: nowrap;
	}
	
	.summary .sectionBox_left {
		width: auto;
		margin-right: 0;
		margin-bottom: 30px;
		text-align: center;
	}
	
	.summary .sectionBox_left img {
		max-width: 500px;
		height: auto;
	}
	
	.summary .sectionBox_right {
		width: auto;
	}
	
	.summary .sectionBox_right dl {
		display: block;
	}
	
	.summary .sectionBox_right dt {
		width: auto;
	}
	
	.summary .sectionBox_right dd {
		width: auto;
	}
}



/* =1-3 サブコンテンツリスト
   ----------------------------------- */
.subContent h2 {
	color: #603813;
}