@charset "utf-8";
/**philosophyPage
********************/
#promise .promiseList{
	width:min(84vw,740px);
	margin:0 auto;
}
#promise .promiseList li{
	display:flex;
	position:relative;
}
#promise .promiseList li+li{background:url("../img/common/bar.svg") no-repeat left top;}
#promise .promiseList li .int{text-align:center;}
#promise .promiseList li .int:before{
	content:"PROMISE";
	display:block;
	width:100%;
	font-family:dnp-shuei-mgothic-std,sans-serif;
	font-weight:bold;
	line-height:1.0;
	text-align:center;
	color:#006039;
}
#promise .promiseList li .int img{margin:0 auto;}
#promise .promiseList h3{
	line-height:1.722;
	color:#006039;
	opacity:0;
	transition:opacity 0.8s ease-in-out 0.8s;
}
#promise .promiseList li.show h3{opacity:1;}
#promise .promiseList h3 span{background:linear-gradient(transparent 60%, #eff5f0 60%);}
#promise .promiseList p.txt{
	line-height:2.066;
	opacity:0;
	transition:opacity 0.8s ease-in-out 1.6s;
}
#promise .promiseList li.show p.txt{opacity:1;}

@media (max-width:768.98px){
	.pgSec figure{background-color:#fbf8ec;}
	#philosophy h2{
		top:calc(50% - 24.889vw);
		right:-1.778vw;
	}
	#mission,
	#message{margin-top:8.889vw;}
	#mission img+img{margin-top:5.333vw;}
	#mission h2{
		top:calc(50% - 39.022vw);
		right:-1.778vw;
	}
	#mission h3{margin-right:-16px;}
	#message h2{
		top:calc(50% - 17.556vw);
		right:-1.778vw;
	}
	#promise .promiseList{margin-top:54px;}
	#promise .promiseList li{
		padding:32px 0 42px;
		flex-wrap:wrap;
		align-items:center;
	}
	#promise .promiseList li+li{background-size:auto 1.5px;}
	#promise .promiseList li .int{width:78px;}
	#promise .promiseList li .int:before{
		font-size:calc(10 / 16 * 1rem);
		letter-spacing:2px;
		text-indent:2px;
	}
	#promise .promiseList li .int img{
		width:40px;
		margin-top:35px;
	}
	#promise .promiseList li h3{
		flex:1;
		margin-left:12px;
		padding-top:43px;
		font-size:calc(15 / 16 * 1rem);/*****14 > 15*****/
		letter-spacing:1px;
	}
	#promise .promiseList li .txt{
		width:100%;
		padding-top:20px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:0.4px;
	}
}
@media (min-width:769px){
	#philosophy{margin-top:140px;}
	#philosophy figure,
	#message figure{
		margin-left:auto;
		text-align:right;
	}
	#philosophy figure{padding:155px 0;}
	#philosophy h2{
		top:calc(50% - 163px);
		right:-22px;
	}
	#mission .inner{flex-direction:row-reverse;}
	#mission figure{
		padding:90px 0 110px;
		margin-right:auto;
		text-align:left;
	}
	#mission img+img{margin-top:40px;}
	#mission h2{
		top:calc(50% - 175px);
		left:-22px;
	}
	#mission h3{margin-right:-16px;}
	#message figure{padding:90px 0;}
	#message h2{
		top:calc(50% - 110px);
		right:-22px;
	}
	#promise .promiseList{margin-top:54px;}
	#promise .promiseList li{padding:42px 0 54px;}
	#promise .promiseList li+li{background-size:auto 2px;}
	#promise .promiseList li .int{width:100px;}
	#promise .promiseList li .int:before{
		font-size:calc(11 / 16 * 1rem);
		letter-spacing:2.5px;
		text-indent:2.5px;
	}
	#promise .promiseList li .int img{
		width:40px;
		margin-top:35px;
	}
	#promise .promiseList li h3{
		width:262px;
		margin-left:12px;
		padding-top:38px;
		font-size:calc(18 / 16 * 1rem);
		letter-spacing:1px;
	}
	#promise .promiseList li .txt{
		flex:1;
		padding:36px 10px 0 0;
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:0.7px;
	}
}
@media (min-width:769px) and (max-width:1279.98px){
	.pgSec figure{background-color:#fbf8ec;}
	#philosophy figure,
	#mission figure,
	#message figure{
		padding-right:110px;
		padding-left:110px;
	}
}
@media (min-width:1280px){
	#philosophy,
	#message{background:linear-gradient(to left,#ffffff 0%,#ffffff 50%,#fbf8ec 50%,#fbf8ec 100%);}
	#philosophy figure,
	#message figure{padding-right:130px;}
	#philosophy .txtBox,
	#message .txtBox{padding-left:180px;}
	#philosophy .txtBox{padding-top:134px;}
	#mission{background:linear-gradient(to left,#fbf8ec 0%,#fbf8ec 50%,#ffffff 50%,#ffffff 100%);}
	#mission figure{
		padding-left:90px;
		padding-right:40px;
	}
	#mission .txtBox{
		padding-top:156px;
		padding-right:180px;
	}
	#message .txtBox{padding-top:136px;}
}