/***********************************************************************************************************************

business.css

***********************************************************************************************************************/
.business{

}

.business main{
	overflow: hidden;
}



/* sec *********************************/
.sec_hd{
	position: relative;
}
.sec_lead{
	padding: 8% 0 0;
}
.sec_biz01{
	padding: 8% 0 0;
}
.sec_biz02{
	padding: 10% 0 0;
}
.sec_biz03{
	padding: 10% 0 0;
}
.biz_inner{
	padding: 5% 0 10%;
	background-color: #f7f7f7;
}


.sec_tech01{
	padding: 8% 0 0;
}
.sec_tech02{
	padding: 12% 0 0;
}
.sec_tech03{
	padding: 12% 0 0;
}
.tech_inner{
	padding: 0 0 10%;
	background-color: #f7f7f7;
}



@media screen and (max-width: 767px) {
.sec_lead{
	padding: 12% 0 0;
}
.sec_biz01{
	padding: 12% 0 0;
}
.sec_biz02{
	padding: 16% 0 0;
}
.sec_biz03{
	padding: 16% 0 0;
}
.biz_inner{
	padding: 8% 0 12%;
}

.sec_tech01{
	padding: 15% 0 0;
}
.sec_tech02{
	padding: 20% 0 0;
}
.sec_tech03{
	padding: 20% 0 0;
}
.tech_inner{
	padding: 0 0 12%;
}
}



/* hd_main *********************************/
.hd_main{
}
.hd_main img{
	width: 100%;
	height: auto;
}
.hd_main .pc{}
.hd_main .sp{ display: none;}


p.p_hd_ttl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	padding: 0;
	margin: 0;
	font-size: 40px;
	font-size: clamp(20px, 4vw, 40px);
	font-weight: 600;
	color: #fff;
	text-align: center;
}
p.p_hd_ttl .en{
	display: block;
	font-size: 16px;
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1;
}


@media screen and (max-width: 767px) {
.hd_main .pc{ display: none;}
.hd_main .sp{ display: block;}
}




/* list_subnavi *********************************/
.list_subnavi{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	width: 100%;
	max-width: 540px;
	margin: 8% auto 0;
}
.list_subnavi.ft{
	margin: 8% auto;
}

.list_subnavi li{
	width: 49%;
}
.list_subnavi li.active .btn_arrow{
	background-color: #000;
	background-image: none;
}


@media screen and (max-width: 767px) {
.list_subnavi.ft{
	margin: 12% auto;
}
}



/*** h1〜  **********************************/
h1.h1_ttl{
	font-size: 60px;
	font-size: clamp(30px, 6vw, 60px);
	font-weight: 900;
	text-align: center;
	margin-bottom: 0.4em;
}
h1.h1_ttl .sub{
	display: block;
	font-size: 22px;
	font-size: clamp(14px, 2.2vw, 22px);
	margin-bottom: 0.5em;
}
h1.h1_ttl .sub .small{
	font-size: 80%;
	padding-left: 1em;
}

h2.h2_ttl{
	font-size: 32px;
	font-size: clamp(22px, 3.2vw, 32px);
	font-weight: 700;
	line-height: 1.3em;
	margin-bottom: 1.2em;
}
.business_tech h2.h2_ttl{
	text-align: center;
	margin-bottom: 0;
}

h2.h2_ttl .en{
	display: block;/**/
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	line-height: 1.6em;
	margin-bottom: 0.5em;
}
h2.h2_ttl .en .big{
	font-size: 160%;
}

h3.h3_ttl{
	font-size: 44px;
	font-size: clamp(24px, 4.4vw, 44px);
	font-weight: 800;
	line-height: 1.5em;
	margin-bottom: 0.8em;
}
.business_tech h3.h3_ttl{
	text-align: center;
}

h4.h4_ttl{
	font-size: 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	margin-bottom: 1.2em;
}

h5.h5_service{
	font-size: 24px;
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 700;
	color: #004da0;
	margin-bottom: 0.5em;
}

p.p_lead{
	text-align: center;
}


@media screen and (max-width: 767px) {
h2.h2_ttl{
	text-align: center;
}
p.p_lead{
	text-align: justify;
}
p.p_lead .resp_autowrap{
	display: inline;
}
}


@media screen and (max-width: 639px) {
.business_biz h4.h4_ttl{
	text-align: center;
}
}


@media screen and (max-width: 400px) {
h1.h1_ttl .sub .small{
	display: block;
	padding-left: 0;
}
}





/*************************************************************************************
*************************************************************************************

事業紹介ページ

*************************************************************************************
**************************************************************************************/
.business_biz{
}




/*** biz_ttl_box **********************************/
.biz_ttl_box{
	position: relative;
}
.biz_ttl_box_txt{
	padding-top: 3em;
}
.biz_ttl_box_photo{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	width: 50%;
	max-width: 720px;
}
.biz_ttl_box_photo img{
	width: 100%;
	height: auto;
	box-shadow: 20px 20px 0 #f29600;
}



@media screen and (max-width: 767px) {
.biz_ttl_box_txt{
	padding-top: 0;
}
.biz_ttl_box_photo{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}
.biz_ttl_box_photo::after{
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #f7f7f7; 
}

.biz_ttl_box_photo figure{
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 100%;
	margin: 0 auto;
}
.biz_ttl_box_photo img{
	box-shadow: 10px 10px 0 #f29600;
}
}




/*** biz_lead **********************************/
.biz_lead{
	width: 48%; /*48.3333333%*/
}


@media screen and (max-width: 767px) {
.biz_lead{
	width: 100%;
}
}




/*** biz_service **********************************/
.biz_service{
	margin-top: 8%;
}


@media screen and (max-width: 767px) {
.biz_service{
	margin-top: 12%;
}
}



/*** list_biz_service **********************************/
.list_biz_service{
	display: flex;
	flex-flow: wrap;
}
.list_biz_service li{
	width: 47.5%;
	margin: 5% 5% 0 0;
}
.list_biz_service li:nth-child(1),
.list_biz_service li:nth-child(2){
	margin-top: 0;
}

.list_biz_service li:nth-child(even){
	margin-right: 0;
}

.list_biz_service li dl{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.list_biz_service li dl dt{
	order: 2;
	width: 52.631579%;
}
.list_biz_service li dl dd{
	order: 1;
	width: 42.105263%;
}
.list_biz_service li dl dd img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 979px) {
.list_biz_service li dl dt{
	width: 100%;
	margin-top: 1.5em;
}
.list_biz_service li dl dd{
	width: 100%;
}
}



@media screen and (max-width: 639px) {
.list_biz_service li,
.list_biz_service li:nth-child(even){
	width: 90%;
	margin: 8% auto 0;
}
}




/*** biz_flow **********************************/
.biz_flow{
	margin-top: 8%;
}


@media screen and (max-width: 767px) {
.biz_flow{
	margin-top: 12%;
}
}




/*** list_flow **********************************/
.list_flow{
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1000px;
	margin: 3em auto 0;
}
.list_flow li.txt{
	font-size: 22px;
	font-size: clamp(16px, 2.2vw, 22px);
	font-weight: 700;
	writing-mode: vertical-rl;
	text-align: center;
	color: #004da0;
	padding: 2em 1em;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.list_flow li.arrow{
	width: 4%;
	background: url("/common/img/btn_arrow/btn_arrow_blue.svg") center center / contain no-repeat;
}


@media screen and (max-width: 639px) {
.list_flow{
	flex-flow: column;
}
.list_flow li.txt{
	writing-mode: horizontal-tb;
	padding: 1em 1em;
}
.list_flow li.arrow{
	position: relative;
	width: 100%;
	height: 40px;
	background: none;
}
.list_flow li.arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%) rotate(90deg);
	background: url("/common/img/btn_arrow/btn_arrow_blue.svg") center center / contain no-repeat;
}
}







/*************************************************************************************
*************************************************************************************

技術紹介ページ

*************************************************************************************
**************************************************************************************/
.business_tech{
}


/*** tech_ttl_box **********************************/
.tech_ttl_box{
	position: relative;
	top: -2em;
	width: 80%;
	max-width: 400px;
	margin: 0 auto 5%;
	padding: 0 0 2.5em;
	background-color: #fff;
}


/*** ph_tech_main **********************************/
.ph_tech_main{
	width: 100%;
	max-width: 960px;
	margin: 3% auto 0;
}



/********************************** 
tech_service 
tech_merit
**********************************/
.tech_service{
	margin-top: 8%;
}
.tech_merit{
	margin-top: 8%;
}


@media screen and (max-width: 767px) {
.tech_service{
	margin-top: 12%;
}
.tech_merit{
	margin-top: 12%;
}
}


/*** list_tech_service **********************************/
.list_tech_service{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.list_tech_service li{
}
.list_tech_service li.col2{
	width: 47.5%;
}
.list_tech_service li.col2:nth-child(3){
	margin-top: 5%;
}

.list_tech_service li.col3{
	width: 30%;
}


@media screen and (max-width: 767px) {
.list_tech_service li.col2,
.list_tech_service li.col3{
	width: 100%;
	margin-top: 5%;
}
.list_tech_service li.col3:first-child{
	margin-top: 0;
}
}




/*** tech_merit_box **********************************/
.tech_merit_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.tech_merit_box_l{
	width: 55%;
}
.tech_merit_box_r{
	width: 38.3333333%;
}


@media screen and (max-width: 639px) {
.tech_merit_box_l{
	width: 100%;
}
.tech_merit_box_r{
	width: 100%;
	margin-top: 30px;
}
}




/*** float_merit **********************************/
.float_merit{
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	border-top: 1px solid #e5e5e5;
}
.float_merit tr{
	border-bottom: 1px solid #e5e5e5;
}
.float_merit th{
	width: 8em;
	font-weight: 700;
	text-align: center;
	padding: 1.5em 0;
}
.float_merit td{
	color: #4d4d4d;
	padding: 1.5em 0;
}


/*** list_merit **********************************/
.list_merit{
}
.list_merit li{
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 700;
	text-align: center;
	padding: 0.5em 0.5em;
	margin-top: 15px; 
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.list_merit li:first-child{
	margin-top: 0;
}

.list_merit li .big01{
	font-size: 200%;
	padding-left: 0.2em;
}
.list_merit li .big02{
	font-size: 150%;
}



/*** list_job **********************************/
.list_job{
}
.list_job li{
	display: inline-block;
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 600;
	text-align: center;
	padding: 0.5em 1em;
	margin: 0 0.5em 1em 0;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}






/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}