/* ======================================
   section
====================================== */
#pageBody > #merit {
	max-width : 1200px;
	margin : 0 auto;
	padding-bottom : 70px;
}

#pageBody > #meritDetail {
	max-width : 100%;
	margin-bottom : 0;
	padding : 30px 0 100px;
	background-color : #f2f2f2;
}

#pageBody > #flow {
	max-width : 1200px;
	margin : 0 auto;
	padding : 100px 0;
}

/* ======================================
	 meritDetail
  ====================================== */
#meritDetail > .inner {
	max-width : 1200px;
	margin : 0 auto 30px;
}

#meritDetail > .inner h3 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.875rem;
	line-height : 1.3;
	margin-bottom : 80px;
	text-align : center;
}

#meritDetail > .inner h3 .hdg-top {
	display : inline-block;
	font-size : 1.25rem;
	margin-bottom : 15px;
}

#meritDetail > .inner h3 .hdg-en {
	display : block;
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	font-size : 1rem;
	font-weight : 600;
	margin-top : 20px;
	letter-spacing : 0.05em;
}

#meritDetail > .inner .meritDetailBox {
	display : flex;
	flex-wrap : wrap;
	margin : 0 -20px;
}

#meritDetail > .inner .meritDetailBox > li {
	flex-basis : 50%;
	max-width : 50%;
	padding : 0 20px;
}
#meritDetail > .inner .meritDetailBox > .long {
	flex-basis : 100%;
	max-width : 100%;
	padding : 0 20px;
}

#meritDetail > .inner .meritDetailBox > li > div {
	height : 100%;
	padding : 55px;
	background-color : #ffffff;
}

#meritDetail > .inner .meritDetailBox > li > div h2 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.6rem;
	line-height : 1.3;
	margin-bottom : 35px;
	color : #334666;
}

#meritDetail > .inner .meritDetailBox > li > div h2 span {
	display : inline-block;
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	font-size : 1.4rem;
	font-weight : 400;
	margin-bottom : 15px;
	letter-spacing : 0.05em;
	color : #ffa213;
}

#meritDetail > .inner .meritDetailBox > li > div p {
	font-size : 1rem;
	margin-bottom : 25px;
}
#meritDetail > .inner .meritDetailBox > li > div .attent {
	font-size : 1rem;
	margin-bottom : 0;
	padding : 25px;
	color : #ffffff;
	background : #a79970;
}
#meritDetail > .inner .meritDetailBox > li > div p span {
	font-weight : bold;
}
#meritDetail > .inner .meritDetailBox > li > div .img {
	text-align : center;
}

#meritDetail > .inner .meritDetailBox > li > div .img img {
	max-width : 100%;
}

#meritDetail > .inner .meritDetailBox > li:nth-of-type(n + 3) {
	margin-top : 40px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	#pageBody > #merit {
		padding : 0 30px 70px;
	}
	#pageBody > #detail {
		padding : 30px 30px 0;
	}
	#pageBody > #meritDetail {
		padding : 30px 30px 60px 30px;
	}
	#merit .meritBox h2 {
		flex-basis : 40%;
		max-width : 40%;
	}
	#merit .meritBox p {
		flex-basis : 50%;
	}
	#meritDetail > .inner {
		margin : 0 auto 60px;
	}
}

@media screen and (max-width: 767px) {
	#pageBody > #merit {
		padding : 0 20px 70px;
	}
	#pageBody > #detail {
		padding : 30px 20px 0;
	}
	#pageBody > #meritDetail {
		padding : 30px 20px;
	}
	#pageBody > #flow {
		padding : 100px 20px 70px;
	}
	#merit > p {
		text-align : left;
	}
	#merit .meritBox {
		flex-direction : column;
		align-items : stretch;
	}
	#merit .meritBox h2 {
		flex-basis : auto;
		max-width : 100%;
		margin : 0 0 20px 0;
	}
	#merit .meritBox p {
		flex-basis : auto;
	}
	#merit .meritBox + .meritBox {
		margin-top : 70px;
	}
	#detail > p {
		text-align : left;
	}
	#meritDetail > .inner .meritDetailBox {
		flex-direction : column;
	}
	#meritDetail > .inner .meritDetailBox > li {
		flex-basis : auto;
		max-width : 100%;
	}
	#meritDetail > .inner .meritDetailBox > li > div {
		padding : 40px 20px;
	}
	#meritDetail > .inner .meritDetailBox > li + li {
		margin-top : 40px;
	}
	#flow .flowBox {
		flex-direction : column;
	}
	#flow .flowBox > li {
		flex-basis : auto;
		max-width : 100%;
	}
	#flow .flowBox > li + li {
		margin-top : 65px;
	}
}