@charset "utf-8";
/* ---------------------------------------- 共通 ---------------------------------------- */
h3{font-size: 14px; font-family: 'Noto-Sans-JP-Medium'; text-align: center;line-height: 140%;}
h3 span{font-size: 39px;font-family: alternate-gothic-no-3-d, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.05em;}
.flex{display: flex;}
.bg_box{}
#fv.fv_box .lower_fv {background: url(../images/purpose/fv_1.png?var=1341) no-repeat right center; background-size: 100%;}

/* ---------------------------------------- .link_box ---------------------------------------- */
.link_box {padding: 111px 0 37px;}
.link_box h3{text-align: center; font-size: 29px;font-family: 'Noto-Sans-JP-Bold';}
.link_box h3 img{display: inline-block; padding: 0 0 17px;}
.link_box ul{ display: flex;  padding: 150px 98px 0;}
.link_box ul li{ text-align: center;}

.link_box ul li:not(:last-child){padding-right: 180px;}
/*
.link_box ul li:nth-child(1){padding-right: 274px;}
.link_box ul li:nth-child(2){padding-right: 294px;}
*/
.link_box ul li a{font-size: 12px; font-family: 'Noto-Sans-JP-Medium'; text-align: center; line-height: 160%;display: block; position: relative; padding: 0 0 20px;}
.link_box ul li a:before{display: block; content: ""; width: 10px; height: 10px; transform: translateX(-50%) rotateZ(45deg); left: 50%; bottom: 0px; border-bottom: 1px solid #42A449; border-right: 1px solid #42A449; position: absolute;}
.link_box ul li a span{letter-spacing: 0.05em; font-family: alternate-gothic-no-3-d, sans-serif; font-weight: 400; font-style: normal; font-size: 30px;}

/* ---------------------------------------- #philosophy ---------------------------------------- */
#philosophy{padding: 129px 0 296px; background:url(../images/purpose/bg_1.png?var=1341) no-repeat center top; background-size: cover; border-radius: 50px 50px 0 0; }
#philosophy h3{color: #fff;}
#philosophy h4{color: #fff; text-align: center; font-size: 23px;font-family: alternate-gothic-no-3-d, sans-serif; font-weight: 400; font-style: normal; line-height: 210%; padding: 76px 0 0;}
#philosophy h4 span{font-size: 42px;font-family: 'Noto-Sans-JP-Bold';}
#philosophy p{text-align: center; color: #fff; line-height: 250%;font-family: 'Noto-Sans-JP-Medium'; padding: 60px 0 0;font-size: 20px;}
#philosophy #misson{padding: 60px 0 0;}

/* ---------------------------------------- #coporate ---------------------------------------- */
#coporate{background: #F2F2F2; border-radius: 50px 50px 0 0; padding: 133px 0 230px; margin: -133px 0 0;}
#coporate .flex{align-items: center;}
#coporate .flex.sub_title{padding: 91px 0 0;}
#coporate .flex h4 span{font-size: 44px; font-family: 'Noto-Sans-JP-Bold'; line-height: 91%;}
#coporate .flex p{padding: 0 0 0 79px; font-size: 20px; line-height: 200%;}

#coporate .bg_white{border-radius: 50px; background: #FFFFFF; padding: 55px 40px 79px; margin: 65px 0 0;}
#coporate .bg_white .flex{display: flex; align-items: center;}
#coporate .bg_white .flex .title_box{width: 505px; height: auto; margin: 0px 0 0 41px;}
#coporate .bg_white .flex .title_box h4{font-size: 36px;line-height: 170%;font-family: 'Noto-Sans-JP-Bold'; }
#coporate .bg_white .flex .title_box p{padding: 28px 0 0; font-size: 16px;line-height: 263%;}

/* ---------------------------------------- #message ---------------------------------------- */
#message{position: relative; margin: -87px 0 0;}
#message .bg_white{background: #FFFFFF; border-radius: 50px 50px 0 0; position: relative; z-index: 1; padding: 0 0 152px;}
#message .bg_white .flex{padding: 102px 0 0 ; display: flex; justify-content: flex-end; align-items: flex-start; max-width: 1100px; margin: 0 auto;}
#message .bg_white .flex .box{width: 100%; height: auto; }
#message .bg_white .flex .box h3{text-align: center;}
#message .bg_white .flex .box h3 span{display: inline-block; padding: 0 10px 0 0;}
#message .bg_white .flex .box h4{padding: 53px 0 0;text-align: center}
#message .bg_white .flex .box h4 span{font-size: 36px; font-family: 'Noto-Sans-JP-Bold'; line-height: 167%;}
#message .bg_white .flex .box p.text{line-height: 219%;font-family: 'Noto-Sans-JP-Regular'; font-size: 16px; padding: 45px 0 0 ;}
#message .bg_white .flex .box p.text_2{padding: 53px 0 0 ;line-height: 167%;  margin: 0 0 0 auto; width:295px;}
#message .bg_white .flex .box p.text_2 span{font-size: 16px;font-family: 'Noto-Sans-JP-Medium';  }
#message .bg_white .flex .box p.text_2 img.logo{display: inline-block; width: 150px; height: auto; margin: 0 0 0 20px;}
@media only screen and (max-width: 768px) {
	/* ---------------------------------------- 共通 ---------------------------------------- */
	h3{font-size: 16px; }
	h3 span{font-size: 30px;}
	.flex{display: flex;}
	#fv.fv_box .lower_fv {background: url(../images/purpose/fv_1-sp.png?var=1341) no-repeat top center; background-size: 100%;}
	
	/* ---------------------------------------- .link_box ---------------------------------------- */
	.link_box {padding: 55px 0 19px;}
	.link_box h3{text-align: center; font-size:18px;}
	.link_box h3 img{ display: inline-block; padding: 0 0 10px; width: 130px;}
	.link_box ul{ display: flex; justify-content: center; padding: 75px 0px 0;}
	.link_box ul li{ text-align: center;}
	
	.link_box ul li:not(:last-child){padding-right: 20px;}
/*
	.link_box ul li:nth-child(1){padding-right: 20px;}
	.link_box ul li:nth-child(2){padding-right: 20px;}
*/
	.link_box ul li a{font-size: 11px; padding: 0 0 20px;}
	.link_box ul li a:before{width: 10px; height: 10px; }
	.link_box ul li a span{font-size: 22px;}
	
	/* ---------------------------------------- #philosophy ---------------------------------------- */
	#philosophy{padding: 65px 0 190px; background:url(../images/purpose/bg_1-sp.png?var=1341) no-repeat center top; background-size: cover; border-radius: 25px 25px 0 0;}

	#philosophy h4{font-size: 17px;padding: 38px 0 0;}
	#philosophy h4 span{font-size: 25px;}
	#philosophy p{padding: 25px 0 0;font-size: 13px;}
	
	#philosophy #misson{padding: 25px 0 0;}

	
	/* ---------------------------------------- #coporate ---------------------------------------- */
	#coporate{border-radius: 25px 25px 0 0; padding: 65px 0 115px; margin: -65px 0 0;}
	#coporate .flex{align-items: center;}
	#coporate .flex.sub_title{padding: 45px 0 0;flex-direction: column;}
	#coporate .flex h4{text-align: left; width: 100%; padding: 0 0 15px;}
	#coporate .flex h4 span{font-size: 26px; line-height: 91%;text-align: left;}
	#coporate .flex p{padding: 0; font-size: 16px; line-height: 200%;}
	
	#coporate .bg_white{border-radius: 25px;  padding:27px 20px 39px; margin: 32px 0 0;}
	#coporate .bg_white .flex{ display: flex; align-items: center; flex-direction: column;}
	#coporate .bg_white .flex img{width: 70%; height: auto; margin: 0 auto; display: block;}
	#coporate .bg_white .flex .title_box{width: 100%; height: auto; margin: 25px 0 0;}
	#coporate .bg_white .flex .title_box h4{font-size: 20px;}
	#coporate .bg_white .flex .title_box p{padding: 0; font-size: 13px;}
	
	/* ---------------------------------------- #message ---------------------------------------- */
	#message{position: relative; margin: -40px 0 0;}
	#message .bg_white{ border-radius: 25px 25px 0 0; padding: 0 0 76px;}
	#message .bg_white .flex{padding: 50px 0 0; display: flex; flex-direction: column-reverse; flex-direction: column; width: 90%; margin: 0 auto;}
	#message .bg_white .flex .box{width: 100%; height: auto; }
	#message .bg_white .flex .box h3 span{padding: 0 10px 0 0;}
	#message .bg_white .flex .box h4{padding: 26px 0 0;}
	#message .bg_white .flex .box h4 span{font-size: 20px; }
	#message .bg_white .flex .box p.text{font-size: 13px; padding: 23px 0 0 ;}
	#message .bg_white .flex .box p.text_2{padding: 26px 0 0 ;line-height: 167%;  margin: 0 0 0 auto; width: 205px;}
	#message .bg_white .flex .box p.text_2 span{font-size: 13px;}
	#message .bg_white .flex img{width: 100%; height: auto; max-width: 639px;margin: 50px 0 0; min-width: auto;}
	#message .bg_white .flex .box p.text_2 img.logo{width: 100px; margin: 0 0 0 10px; }

}