@charset "utf-8";
/*
 * ================================================
 *
 * [contact]
 *
 * ================================================
 */

/**
 * ---------------------------------------------------
 * pageTitleVox
 * ---------------------------------------------------
 */
#pageTitleVox {
	width: 100%;
	height: 360px;
	background: linear-gradient(rgba(3, 63, 108, 0.4), rgba(3, 63, 108, 0.4)), url(../../images/content/philosophy/pageTitleBg.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}
#pageTitleVox .inner{
	width: 90%;
	height: 360px;
	margin: 0 auto;
	position: relative;
}

/**
 * ---------------------------------------------------
 * pageTitle
 * ---------------------------------------------------
 */
#pageTitle {
	top: 25%;
	left: 0;
	color: #fff;
	width: 100%;
	z-index: 999;
	text-align: left;
	position: absolute;
}
#pageTitle .en{
	font-size: 8rem;
	font-family: 'DM Serif Display', serif;
}
#pageTitle .ja{
	display: block;
	margin-top: -10px;
	font-size: 2.8rem;
/*	font-family: 'Noto Serif JP', serif;*/
	font-family: 'Noto Sans JP', sans-serif;
}

/**
 * ---------------------------------------------------
 * main
 * ---------------------------------------------------
 */
#philosophy {
	margin: 120px 0 160px;
	padding: 120px 0 100px;
	background:linear-gradient(90deg, #cde1e9 0%, #cde1e9 38%, #E8F1EF 38%, #E8F1EF 100%);
}
#philosophy .inner {
	width: 100%;
	max-width: 1100px;
	text-align: center;
	margin: 0 auto;
}
#philosophy .inner .philosophyBox{
	width: 100%;
	padding: 80px 40px;
	background: #fff;
	font-family: 'Noto Serif JP', serif;
}
#philosophy .inner .philosophyBox h2{
	font-size: 2.8rem;
	text-align: left;
	display: inline-block;
	margin: 0 auto;
}
#philosophy .inner .philosophyBox h2 span.circle {
	display: block;
}
	#philosophy .inner .philosophyBox h2 span.circle:before {
		content:'◯';
		display: inline-block;
		padding-right: 10px;
		color: #525252;
	}
#philosophy .inner .philosophyBox h2 span.green {
	color: #009944;
}
#philosophy .inner .philosophyBox ul{
	width: 750px;
	padding: 0;
	margin: 70px auto 0;
	list-style: none;
	font-family: 'Noto Sans JP', sans-serif;
}
#philosophy .inner .philosophyBox ul li{
	position: relative;
	padding-left: 20px;
	text-align: left;
	margin-bottom: 20px;
}
#philosophy .inner .philosophyBox ul li::before{
	top: 0;
	left: 0;
	content: "・";
	position: absolute;
}

/**
 ****************************************************
 *
 * screens smaller than 767
 *
 ****************************************************
 */
@media only screen and (max-width: 767px) {
/**
 * pageTitleVox
 */
#pageTitleVox {
	height: 140px;
}
#pageTitleVox .inner{
	height: 140px;
}
/**
 * pageTitle
 */
#pageTitle .en{
	font-size: 4rem;
}
#pageTitle .ja{
	font-size: 1.4rem;
}

#philosophy .inner .philosophyBox h2 span.circle {
	position: relative;
	padding-left: 30px;
}
#philosophy .inner .philosophyBox h2 span.circle:before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

/**
* contact
*/
#philosophy {
	margin: 3em 0;
	padding: 3em 0;
	background:linear-gradient(90deg, #cde1e9 0%, #cde1e9 42%, #E8F1EF 42%, #E8F1EF 100%);
}
#philosophy .inner {
	width: 90%;
}
#philosophy .inner .philosophyBox{
	padding: 40px 20px;
}
#philosophy .inner .philosophyBox h2{
	font-size: 2rem;
}
#philosophy .inner .philosophyBox ul{
	width: 100%;
	margin: 40px auto 0;
}

}