@charset "utf-8";

/*---------- 共通 ---------*/
h3{font-family: 'Noto-Sans-JP-Medium'; font-size: 22px; line-height: 150%;}
h3 span{font-size: 69px; line-height: 103%; display: inline-block; letter-spacing: 0.05em; padding: 0 0 9px;}
p.tt_title{font-size: 32px; line-height: 144%; color: #fff;font-family: 'Noto-Sans-JP-Bold';}
h4{font-size: 31px; line-height: 146%; color: #fff;font-family: 'Noto-Sans-JP-Medium';}
h4 span{font-size: 54px;font-family: 'Noto-Sans-JP-Bold'; line-height: 147%;}

/* ------------------------------------------------------------ .fv_tt ------------------------------------------------------------ */
p.fv_tt{text-align: center;padding: 60px 0 0;}

/* ------------------------------------------------------------ #philosophy ------------------------------------------------------------ */
#philosophy{padding: 72px 0 0;}
#philosophy .philosophy_title{position: relative; z-index: 1;}
#philosophy .philosophy_bg{background: url(../images/company/puilosophy_bg_1.jpg) no-repeat center center; background-size: cover; padding: 83px 0 16px; position: relative;}
#philosophy .philosophy_bg .tt_title{padding: 20px 0 0 ; position: relative;z-index: 1;}
#philosophy .philosophy_bg .box_list{position: relative; height: 1323px; width: 100%; margin: -40px 0 0;}
#philosophy .philosophy_bg h4{font-size: 31px; line-height: 146%; color: #fff;font-family: 'Noto-Sans-JP-Medium';}
#philosophy .philosophy_bg h4 span{font-size: 54px;font-family: 'Noto-Sans-JP-Bold'; line-height: 147%;}
#philosophy .philosophy_bg .box_list .box{width: 648px; height: 648px; color: #fff; position: absolute;top: 0px;}
#philosophy .philosophy_bg .box_list .box p{font-size: 18px; line-height: 184%; padding: 15px 0 0;}
#philosophy .philosophy_bg .box_list .box.box_1{background: url(../images/company/puilosophy_img_1.png) no-repeat center center; background-size: 100%; padding: 233px 0 245px; right: 106px;}
#philosophy .philosophy_bg .box_list .box.box_1 .text_box{width: 360px; margin: 0 0 0 158px;}
#philosophy .philosophy_bg .box_list .box.box_2{background: url(../images/company/puilosophy_img_2.png) no-repeat center center; background-size: 100%;left: 25px; top: 30%; padding: 120px 0 363px;}
#philosophy .philosophy_bg .box_list .box.box_2 .text_box{width: 372px; margin: 0 0 0 72px; text-align: right;}
#philosophy .philosophy_bg .box_list .box.box_3{background: url(../images/company/puilosophy_img_3.png) no-repeat center center; background-size: 100%; top: 51%; right: 119px; padding: 207px 0 237px;}
#philosophy .philosophy_bg .box_list .box.box_3 .text_box{width: 342px; margin: 0 0 0 171px;}

/* ------------------------------------------------------------ #ceo ------------------------------------------------------------ */
#ceo{padding: 60px 0 0;}
#ceo .flex{padding: 37px 100px 0; display: block; }
#ceo .flex .text_box{padding: 34px 0 0; width: 100%; margin: 0 69px 0 0; -webkit-animation-name: fadeInUp_3; animation-name: fadeInUp_3; animation-timing-function: ease-in-out;  animation-duration:0.6s;}
#ceo .flex .img_box{ -webkit-animation-name: fadeInUp_3; animation-name: fadeInUp_3; animation-timing-function: ease-in-out;  animation-duration:0.6s;}

#ceo .flex .text_box h4{font-size: 32px; line-height: 144%; color: #fff;font-family: 'Noto-Sans-JP-Medium';}
@-webkit-keyframes fadeInUp_3 {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp_3 {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
#ceo .flex .text_box p{line-height: 225%; padding: 14px 0 0;}

#ceo .profile{width: 700px; margin: 0 auto; padding: 70px 50px 0; }
#ceo .profile h4 {font-size: 20px; text-align: center; line-height: 180%;}
#ceo .profile h4 span{font-size: 40px;}
#ceo .profile p{line-height: 225%; padding: 20px 0 0;}

/* ------------------------------------------------------------ #company ------------------------------------------------------------ */
#company{padding: 100px 0 122px;}
#company table{width: 941px; height: auto; margin: 34px 0 0 88px; -webkit-animation-name: fadeInUp_2; animation-name: fadeInUp_2; animation-timing-function: ease-in-out;  animation-duration:0.6s;}
@-webkit-keyframes fadeInUp_2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }

  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes fadeInUp_2 {
  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }

  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
#company table tr:first-child th,
#company table tr:first-child td{border-top: 1px solid #fff;}
#company table th{border-bottom: 1px solid #fff; line-height: 250%; letter-spacing: 0.04em; font-size: 14px; text-align: left; width: 242px; vertical-align: top; padding: 31px 0 33px;}
#company table td{border-bottom: 1px solid #fff; line-height: 175%; letter-spacing: 0.04em; font-size: 16px; text-align: left; vertical-align: top;padding: 31px 0 33px;}

@media only screen and (max-width: 768px) {
	
	/*---------- 共通 ---------*/
	h3{font-size: 16px; text-align: center;}
	h3 span{font-size:35px; padding: 0 0 9px;}
	p.tt_title{font-size: 16px;font-family: 'Noto-Sans-JP-Medium';}
	h4{font-size: 16px; }
	h4 span{font-size: 35px;}
	
	/* ------------------------------------------------------------ .fv_tt ------------------------------------------------------------ */
	p.fv_tt{text-align: left;padding: 30px 0 0;}
	
	/* ------------------------------------------------------------ #philosophy ------------------------------------------------------------ */
	#philosophy{padding: 49px 0 0; overflow: hidden;}
	#philosophy .philosophy_bg{background: url(../images/company/puilosophy_bg_1.jpg) no-repeat center center; background-size: cover; padding: 23px 0 70px; position: relative; }
	#philosophy .philosophy_bg .tt_title{padding: 13px 0 0; }
	#philosophy .philosophy_bg .box_list{height: auto; width: 100%; margin: 0px; padding: 121% 0;}
	#philosophy .philosophy_bg h4{font-size:16px;}
	#philosophy .philosophy_bg h4 span{font-size: 35px; display: inline-block; padding: 0 0 5px;}
	#philosophy .philosophy_bg .box_list .box{width: 100%; height: auto; position: absolute;top: 0px;}
	#philosophy .philosophy_bg .box_list .box p{font-size: 12px; padding: 5px 0 0;}
	#philosophy .philosophy_bg .box_list .box.box_1{ padding: 28% 0 40%; right: -57px;}
	#philosophy .philosophy_bg .box_list .box.box_1 .text_box{width: 165px; margin: 0 auto;text-align: left;}
	#philosophy .philosophy_bg .box_list .box.box_2{left: -70px; top: 30%; padding: 36% 0%; width: 108%;}
	#philosophy .philosophy_bg .box_list .box.box_2 .text_box{width: 200px; margin: 0 auto 0 23%; text-align: left;}
	#philosophy .philosophy_bg .box_list .box.box_3{top: auto; right: -66px; padding: 31% 0%; bottom: 0px;}
	#philosophy .philosophy_bg .box_list .box.box_3 .text_box{width: 190px; margin: 0 auto; text-align: left;}
	
	/* ------------------------------------------------------------ #ceo ------------------------------------------------------------ */
	#ceo{padding: 30px 0 0;}
	#ceo .flex{padding: 20px 0 0; }
	#ceo .flex .flex_title{display: flex ; justify-content: space-between; align-items: center;}
	#ceo .flex .text_box{padding: 20px 0 0; width: 100%; margin: 0; -webkit-animation-name: fadeInUp_3; animation-name: fadeInUp_3; }
	#ceo .flex .img_box{ height: auto; }
	
	#ceo .flex .text_box h4{font-size: 20px; line-height: 144%; width: 100%;}
	@-webkit-keyframes fadeInUp_3 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
	
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInUp_3 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); }
	
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	#ceo .flex .text_box p{line-height: 200%; padding: 14px 0 0;}
	

	#ceo .profile{width: 100%; padding: 35px 0 0; }
	#ceo .profile h4 {font-size: 16px; text-align: left; }
	#ceo .profile h4 span{font-size: 25px;}
	#ceo .profile p{line-height: 200%; padding: 10px 0 0;}
	
	/* ------------------------------------------------------------ #company ------------------------------------------------------------ */
	#company{padding: 40px 0 10px;}
	#company table{width: 100%; height: auto; margin: 20px 0 0; -webkit-animation-name: fadeInUp_2; animation-name: fadeInUp_2; }
	@-webkit-keyframes fadeInUp_2 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	@keyframes fadeInUp_2 {
	  from { opacity: 0; -webkit-transform: translate3d(0, 5%, 0); transform: translate3d(0, 5%, 0); }
	
	  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	}
	#company table tr:first-child th{border-top: 1px solid #fff;}
	#company table tr:first-child td{border-top: none;}
	#company table th{border-bottom: none; line-height: 200%; font-size: 14px; padding: 15px 0 0;display: block;width: 100%;}
	#company table th.sp_table{border-bottom: 1px solid #fff;}
	#company table th.sp_table .flex{ align-items: flex-start; flex-direction: row;line-height: 200%; font-size: 14px; padding: 0 0 15px;}
	#company table th.sp_table .flex span{display: inline-block; width: 50%;line-height: 200%; font-size: 14px;}
	#company table td{border-bottom: 1px solid #fff; line-height: 200%; font-size: 14px; padding: 0 0 15px; display: block;width: 100%;}
	#company table th.PC,
	#company table td.PC{display: none;}
}