@charset "utf-8";
body{background: #F2EEE7;}

/*---------------------#fv-----------------------*/
#fv{background: url(../images/mission/fv.jpg?v=2) no-repeat center center; background-size: cover; padding: 236px 0 167px; position: relative;}
#fv img.logo{position: absolute; bottom: 0px;}
#fv h2{color: #fff;text-align: center; font-size: 16px;line-height: 170%; font-family: 'Noto-Sans-JP-Regular';}
#fv h2 span{font-family: 'Noto-Sans-JP-Medium';}
#fv h2 span.title{font-size: 24px;font-family: 'Montserrat-Medium';}
#fv h2 span.big{font-size: 36px; letter-spacing: 0.1em;line-height: 174%;}

/*---------------------#passion-----------------------*/

#passion{padding: 119px 0 0;}

#passion .bg_orange{ background: linear-gradient(90deg,#FDAC3D,#FF7800 70% );   background-size: 100% 90%;   background-position: bottom;   background-repeat: no-repeat; margin: 55px 0 0;}
#passion .bg_orange .flex{display: flex; justify-content: space-between;align-items: flex-end; padding: 0 0 55px;}
#passion .bg_orange .flex .text_box{padding: 87px 0 0 59px;}
#passion .bg_orange .flex h4{ color: #fff; font-size: 30px; font-family: 'Noto-Sans-JP-Regular'; line-height: 150%; }
#passion .bg_orange .flex p{color: #fff; font-family: 'Noto-Sans-JP-Regular'; line-height: 175%; padding: 31px 0 0;}

/*---------------------#mission-----------------------*/

#mission{padding: 146px 0 0;}
#mission .title_box{text-align: center; padding: 0 0 73px;}
#mission .title_box p{line-height: 175%; font-family: 'Noto-Sans-JP-Regular'; padding: 16px 0 0;}
#mission .bg_2{background: url(../images/mission/bg_1.jpg?v=1) no-repeat center center; background-size: cover; padding: 128px 0;}
#mission .bg_2 .flex{ display: flex; align-items: center; justify-content: center;}
#mission .bg_2 .flex h4{width: 50%; height: auto; text-align: center; color: #ffff; font-size: 14px;padding: 0px 35px 0 0;letter-spacing: 0.05em;}
#mission .bg_2 .flex h4 img{padding: 0 0 18px;}
#mission .bg_2 .flex p{width: 50%; height: auto; line-height: 234%; font-size: 18px; color: #ffff; font-family: 'Noto-Sans-JP-Regular'; letter-spacing: 0.05em;}

#mission .list{padding: 109px 0 114px;}
#mission .list .box{background: #fff; display: flex; border-radius: 15px; padding: 59px;}
#mission .list .box:not(:last-child){margin: 0 0 50px; }
#mission .list .box.left{ flex-direction: row-reverse;}
#mission .list .box .text_box{padding: 0 0 0 60px;}
#mission .list .box.left .text_box{padding: 0 60px 0 0;}
#mission .list .box h4{font-size: 24px; color: #FF7800; line-height: 140%;}
#mission .list .box p{line-height: 180%; font-family: 'Noto-Sans-JP-Regular'; padding: 9px 0 0;}


/*---------------------#company-----------------------*/
#company{background: #FAF9F7; padding: 148px 0 92px;}
#company .h3_center{text-align: left;}
#company .h3_center:before {left: 0%;transform: translateX(-0%);-webkit-transform: translateX(-50%);}
#company .flex{padding: 45px 0 0; display: flex; justify-content: space-between;}
#company .logo{width: 379px;}
#company .flex table{width: 821px;}
#company .flex table tr th{text-align: left;vertical-align: top; width: 156px; border-bottom: 2px solid #FF7800; padding-bottom: 23px; line-height: 163%;}
#company .flex table tr td{vertical-align: top;border-bottom: 2px solid #F2EDE4; padding-bottom: 23px; line-height: 163%;font-family: 'Noto-Sans-JP-Regular';}
#company .flex table tr:not(:first-child) th{padding-top: 26px;}
#company .flex table tr:not(:first-child) td{padding-top: 26px;}
#company .btn_orange{width: 228px; height: auto; margin: 91px auto 0; color: #fff; position: relative; text-align: center; font-size: 14px; letter-spacing: 0.07em; display: block; background:#FF7800; padding: 19px 0; border-radius: 100px;}
#company .btn_orange:after{content: ""; display: block; border-bottom: 2px solid #fff; border-right: 2px solid #fff; width: 8px; height: 8px; transform: translateY(-50%) rotate(-45deg); position: absolute; right: 20px; top: 50%;　-webkit-transform:　translateY(-50%) rotate(-45deg);}

@media only screen and (max-width: 768px) {
	h3.h3_center{font-size: 26px;}
	.h3_center .en {font-size: 14px; margin: 0 auto 6px;}
	.title_box p{padding: 16px 0 0; font-size: 14px; width: 90%; margin: 0 auto;}
	
	/*---------------------#fv-----------------------*/
	#fv{background: url(../images/mission/fv.jpg?v=2) no-repeat center center; background-size: cover; padding: 150px 0 92px; }
	#fv img.logo{width: 80%;height: auto;}
	#fv h2{ font-size: 14px;}
	#fv h2 span.title{font-size: 18px;}
	#fv h2 span.big{font-size: 32px;}

	/*---------------------#passion-----------------------*/
	
	#passion{padding: 60px 0 0;}
	
	#passion .bg_orange{margin: 30px 0 0;}
	#passion .bg_orange .flex{display: flex; flex-direction: column; padding: 0 0 27px;}
	#passion .bg_orange .flex .text_box{padding: 25px 0 0;}
	#passion .bg_orange .flex h4{ font-size: 24px;}
	#passion .bg_orange .flex p{padding: 20px 0 0; font-size: 14px}
	
	/*---------------------#mission-----------------------*/
	
	#mission{padding: 73px 0 0;}
	#mission .title_box{padding: 0 0 37px;}
	#mission .title_box p{padding: 16px 0 0;}
	#mission .bg_2{background: url(../images/mission/bg_1.jpg?v=1) no-repeat center center; background-size: cover; padding: 64px 0}
	#mission .bg_2 .flex{ flex-direction: column;}
	#mission .bg_2 .flex h4{width: 100%; font-size: 11px;padding: 0 0 15px;}
	#mission .bg_2 .flex h4 img{padding: 0 0 10px; width: 70%; margin: 0 auto; }
	#mission .bg_2 .flex p{width: 100%; height: auto; font-size: 11px; text-align: center;}
	
	#mission .list{padding: 55px 0 57px;}
	#mission .list .box{border-radius: 15px; padding: 20px; flex-direction: column;}
	#mission .list .box:not(:last-child){margin: 0 0 28px; flex-direction: column;}
	#mission .list .box .text_box{padding: 20px 0 0;}
	#mission .list .box.left .text_box{padding: 30px 0 0;}
	#mission .list .box h4{font-size: 20px;}
	#mission .list .box p{padding: 9px 0 0; font-size: 14px;}
	#mission .list .box.left {flex-direction: column;}
	
	/*---------------------#company-----------------------*/
	#company{padding: 75px 0 46px;}
	#company .flex{padding: 30px 0 0;flex-direction: column;}
	#company .logo{width: 102px;}
	#company .flex table{width: auto; padding: 40px 0 0; display: inline-block;}
	#company .flex table tbody{ width: 100%; display: block;}
	#company .flex table tr{display: block;width: 100%;}
	#company .flex table tr th{padding-bottom: 4px; width: 45%;display: block;border-bottom: none;}
	#company .flex table tr td{padding-bottom: 10px;padding-top: 0px; display: block;width: 100%;}
	#company .flex table tr:not(:first-child) th{padding-top: 24px;}
	#company .flex table tr:not(:first-child) td{padding-top: 0px;}
	#company .btn_orange{width: 228px; height: auto; margin: 45px auto 0; font-size: 14px; padding: 19px 0; }
	#company .btn_orange:after{width: 8px; height: 8px;right: 20px; top: 50%;}
}