@charset "utf-8";

/*----------------------------------------
  サイト共通 スタイルシート
----------------------------------------*/

/* ヘッダー */
.pageTitle {background: url("../../images/business/bgTitle.jpg") no-repeat center / cover;}

/* 見出し */
.headWrap {
	max-width: 980px;
	padding: 0 1rem;
}
.headBox {position: relative;}
.business h2 {
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 700;
	font-weight: bold;
}
.business h2 span.headBlue {color: #009DD8;}
.business h2 span.egTxt {
	font-family: "Open Sans";
	font-weight: 600;
	display: block;
	color: #4A5F88;
}
p.navy {
	background-color: #1C2D4F;
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 400;
	color: #fff;
	text-align: center;
	margin: 0 auto;
	position: relative;
}
p.navy::after {
	position: absolute;
	content: "";
	display: inline-block;
	background: url("../../images/common/arrow.png") no-repeat center;
	width: 41.17px;
	height: 32.53px;
	left: 0;
	right: 0;
	margin: 0 auto;
	background-size: auto 100%;
}

/* 挑戦
---------------------------------------- */
#charange {
	position: relative;
	background: url("../../images/business/challenge.jpg") no-repeat center center / cover;
	z-index: 1;
}
#charange header {
	font-family: "Open Sans";
	font-weight: 900;
	font-style: italic;
	color: #fff;
}
#charange header::after {
	content: "～ 挑戦 ～";
	font-style: normal;
	font-weight: bold;
	color: #009DD8;
}
#charange p {
	color: #fff;
	line-height: 1.93em;
}

/* 技術
---------------------------------------- */
#tecContents {background: url("../../images/business/technology.jpg") no-repeat center center / cover;}
#numberBlueWrapBox {
	max-width: 960px;
	margin: 0 auto;
}
#numberBlueWrap01,
#numberBlueWrap02 {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	padding: 0 1rem;
}
.numberBlueBox {
	background-color: rgba(0,157,216,0.3);
	width: 100%;
	color: #fff;
	flex: 1 0 255px;
}
.numberBlueBox h3 {border-bottom: 1px solid #009DD8;}
.numberBlueBox h3 span.numberTxt {
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 400;
}
.numberBlueBox h3 span.number {
	display: inline-block;
	vertical-align: bottom;
	font-family: "Open Sans";
	font-weight: 600;
	color: #009DD8;
}
.numberBlueBox p {
	width: 100%;
	line-height: 1.93em;
}

/* 私たちにできること
---------------------------------------- */

#numberWhitWrap {
	display: flex;
	max-width: 980px;
	margin: 0 auto;
	text-align: left;
	flex-wrap: wrap;
}
.numberWhiteBox {
	width: 100%;
	color: #1C2D4F;
	position: relative;
}

/* アイコン */
.supportIcon {text-align: center;}
.numberWhiteBox h3 {border-bottom: 1px solid #009DD8;}
.numberWhiteBox h3 span.numberTxt {
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 400;
}
.numberWhiteBox h3 span.number {
	display: inline-block;
	vertical-align: bottom;
	font-family: "Open Sans";
	font-weight: 600;
	color: #009DD8;
}
.numberWhiteBox p {line-height: 1.93em;}
.numberWhiteBox img {width: 100%;}

/* その他
---------------------------------------- */
#other {
	max-width: 980px;
	margin: 0 auto;
}
#other p {
	max-width: 920px;
	color: #1C2D4F;
	line-height: 1.93em;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px) {
	
	/*  見出し */
	.headWrap {margin: 3.5em auto 1em;}
	.headBox {padding-bottom: 3.2em;}
	.business h2 {
		font-size: 2.6rem;
		letter-spacing: .7rem;
		line-height: 1.5em;
	}
	.business h2 span.headBlue.bigTxt{font-size: 3.8rem;}
	.business h2 span.egTxt {
		font-size: 2rem;
		line-height: 3em;
		letter-spacing: .2rem;
		margin-top: -0.6em;
	}
	p.navy {
		line-height: 1.5em;
		padding: 0.5em;
	}
	p.navy::after {bottom: -3.2em;}
	
	/* 挑戦
	---------------------------------------- */
	#charange {padding: 5rem 2rem 6.5rem;}
	#charange header {
		font-size: 5rem;
		line-height: 0.96em;
	}
	#charange header::after {
		display: block;
		font-size: 2.5rem;
	}
	#charange p {margin-top: 1.5em;}
	
	/* 技術
	---------------------------------------- */
	#tecContents {padding: 2.5em 0;}
	#numberBlueWrap01 {display: block;}
	#numberBlueWrap01 div {margin-bottom: 2rem;}
	.numberBlueBox {padding: 1.2em 1em 1em;}
	.numberBlueBox h3  {padding-bottom: 0.5em;}
	.numberBlueBox h3 span.number {
		font-size: 4rem;
		padding-right: 0.1em;
	}
	.numberBlueBox h3 span.numberTxt {
		font-size: 2rem;
		text-align: center;
	}
	.numberBlueBox p {padding-top: 0.8em;}
	
	/* 私たちにできること
	---------------------------------------- */
	#numberWhitWrap {
		flex-wrap: wrap;
		padding: 0 2rem;
	}
	.numberWhiteBox  {padding-bottom: 3.5em;}
	.numberWhiteBox:first-of-type  {margin-top: -0.5em;}
	.numberWhiteBox:last-of-type  {padding-bottom: 0;}
	
	/* アイコン */
	.supportIcon #car {
		width: 149px;
		margin-bottom: -0.5em;
	}
	.supportIcon #printer {width: 117px;}
	.supportIcon #tire {width: 109.5px;}
	/* アイコンここまで */
	
	.numberWhiteBox h3 {padding-bottom: 0.5em;}
	.numberWhiteBox h3.h3other {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.numberWhiteBox h3 span.number {
		font-size: 4rem;
		padding-right: 0.1em;
	}
	.numberWhiteBox h3 span.numberTxt {
		font-size: 2rem;
		text-align: center;
	}
	.numberWhiteBox h3 span.numberTxt.numberTxt02 {
		text-align: left;
		line-height: 1.6em;
		margin-left: 0.2em;
	}
	.numberWhiteBox p {margin: 0.8em 0 1.5em;}
	
	/* その他
	---------------------------------------- */
	#other {padding: 3.5em 1rem;}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px) {
	
	/*  見出し */
	.headWrap {margin: 5em auto 2em;}
	.headBox {padding-bottom: 4em;}
	.business h2 {
		font-family: "BIZ UDPGothic", sans-serif;
		font-weight: 700;
		font-size: 6rem;
		letter-spacing: 1.4rem;
		line-height: 1.5em;
	}
	.business h2 span.headBlue .bigTxt{font-size: 9rem;}
	.business h2 span.egTxt {
		font-size: 2.5rem;
		line-height: 3em;
		letter-spacing: .3rem;
		margin-top: -0.8em;
	}
	p.navy {
		font-size: 1.5rem;
		line-height: 3.1em;
		max-width: 427px;
	}
	p.navy::after {bottom: -3.8em;}
	
	/* 挑戦
	---------------------------------------- */
	#charange {padding: 18.9rem 5rem;}
	#charange header {
		font-size: 9.5rem;
		line-height: 0.96em;
	}
	#charange header::after {
		font-family: "BIZ UDPGothic", sans-serif;
		font-weight: 700;
		font-size: 3rem;
		line-height: 3.06em;
		vertical-align: top;
		margin: 0.5em 0 0 0.8em;
	}
	#charange header,
	#charange p {margin-left: 5%;}
	#charange p {
		max-width: 794px;
		margin-top: 2.26em;
	}
	
	/* 技術
	---------------------------------------- */
	#technology {margin-bottom: 5em;}
	#tecContents {padding: 12rem 0;}
	#numberBlueWrap01 {max-width: 980px;}
	#numberBlueWrap02 {max-width: 655px;}
	#numberBlueWrap01 div {
		margin: 0.8%;
		max-width: 48.4%;
	}
	.numberBlueBox {padding: 1.4em;}
	.numberBlueBox h3 {
		padding: 0.5em 0 1.5em;
		display: flex;
	}
	.numberBlueBox h3 span.number {
		font-size: 7.5rem;
		padding-right: 0.2em;
	}
	.numberBlueBox h3 span.numberTxt {
		font-size: 2.5rem;
		text-align: left;
	}
	.numberBlueBox p {
		font-size: 1.5rem;
		line-height: 1.93em;
		padding-top: 1em;
	}
	
	/* 私たちにできること
	---------------------------------------- */
	#numberWhitWrap {padding: 2rem 1rem 3.2rem;}
	.numberWhiteBox {
		margin: 0.5rem 2.5%;
		flex: 1 0 265px;
		max-width: 45%;
		padding-bottom: 270px;
		position: relative;
	}
	.numberWhiteBox .imgBox img {display: none;}
	.numberWhiteBox .imgBox {
		display: block;
		padding-top: 270px;
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	.numberWhiteBox:nth-child(1) .imgBox {
		background: url(../../images/business/apparatus01.jpg) no-repeat center;
		background-size: cover;
	}
	.numberWhiteBox:nth-child(2) .imgBox {
		background: url(../../images/business/apparatus02.jpg) no-repeat center;
		background-size: cover;
	}
	.numberWhiteBox:nth-child(3) .imgBox {
		background: url(../../images/business/apparatus03.jpg) no-repeat center;
		background-size: cover;
	}
	
	/* アイコン */
	.supportIcon {padding-bottom: 3rem;}
	.supportIcon #car {width: 159px;}
	.supportIcon #printer {width: 127px;}
	.supportIcon #tire {width: 110.5px;}
	/* アイコンここまで */
	
	.numberWhiteBox h3 {
		padding: 0.5em 0 1.8em;
		display: flex;
	}
	.numberWhiteBox h3.h3other {padding-bottom: 0.8em;}
	.numberWhiteBox h3 span.number {
		padding-right: 0.2em;
		font-size: 7.5rem;
	}
	.numberWhiteBox h3 span.numberTxt {
		font-size: 2.5rem;
		text-align: left;
	}
	.numberWhiteBox h3 span.numberTxt02 {margin-top: -0.8em;}
	.numberWhiteBox p {
		font-size: 1.5rem;
		margin: 1.5em 0;
		height: auto;
	}
	.numberWhiteBox p#printerTxt {margin-bottom: 19rem;}
	.numberWhiteBox p#tireTxt {margin-bottom: 7.5rem;}
	
	/* その他
	---------------------------------------- */
	.business #other h2 {font-size: 4rem;}
	.business #other h2 span.egTxt {margin-top: -0.6em;}
	#other {padding: 2rem 1rem 10rem;}
	#other p {
		letter-spacing: 0.3px;
		margin-top: 1.5rem;
	}
}