@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* header
---------------------------------------- */
/* メイン画像 */
#mainImageSlide li:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 52%;
	position: absolute;
}
#mainImageSlide li {
	width: 100%;
	display: block;
	background-repeat: repeat-y, no-repeat;
	background-position: center center, center center;
	background-size: cover, cover;
	position: relative;
}
#mainImage01 {background:url("../../images/index/grit.png"), url("../../images/index/mainImg01.jpg");}
#mainImage02 {background:url("../../images/index/grit.png"), url("../../images/index/mainImg02.jpg");}
#mainImage03 {background:url("../../images/index/grit.png"), url("../../images/index/mainImg03.jpg");}
#h1Wrap {position: relative;}
#h1Wrap p, #h1Wrap h1 {color: #fff;}
#h1Wrap h1 {font-weight: 700;}
#h1BoxWrap {
	display: flex;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	align-items: center;
}
#h1Wrap #h1Box {
	position: relative;
	z-index: 100;
}
#mainImageScroll {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 100;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}
#mainImageScroll a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
}
#mainImageScroll a:before {
	position: absolute;
	display: block;
	content: "";
	background-color: #fff;
	width: 1px;
	bottom: 0;
	left: 50%;
	margin-left: -1px;
	z-index: 100;
}
#h1Box p.enTit {
	transform: rotate(-1deg);
	margin-bottom: 1em;
	font-weight: 500;
}
#h1Box h1, #h1Box p {font-family: 'Noto Sans JP', sans-serif;}

/* contentsWrap */
#aboutUs .aboutImg {width: 100%;}
#aboutUs .tit01 h2 {text-align: center}
.contentsWrap h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

#aboutUs .btn01 {text-align: center;}
.bkgLtblue {background-color: #F1F7FF;}

/* trucks・service */
#trucks,
#service {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#trucks .absoluteWrap {
	position: absolute;
	background: url("../../images/index/trucks.jpg") no-repeat 98% / cover;
}
#service .absoluteWrap {
	position: absolute;
	background: url("../../images/index/service.jpg") no-repeat 92% / cover;
}
.contentsWrap .absoluteWrap:after {
	content: "";
	display: block;
	width: 100%;
}

/* safety */
#safety {
	background: url("../../images/index/safety.jpg") no-repeat;
	background-size: cover;
}
#safety .bkgWhite {
	width: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgba(255,255,255,0.7);
}
#safety h2 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	color: #fff;
}
#safety p {color: #fff;}
#safety .bkgWhite p {
	text-align: left;
	color: #000;
}
#safety .bkgWhite .greenMark {max-width: 143px;}
#safety .btn01 a, #recruit .btn01 a {
	background-color: rgba(255,255,255,0.00);
	color: #fff;
	border: #fff 2px solid;
}
#safety .btn01 a:before {background-color: #fff;}
#safety .btn01 a:after {
	width: 100%;
	color: #000;
}

/* recruit */
#recruit {
	background-image: url("../../images/index/job.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}
#recruit .tit01 h2, #recruit .tit01 h2 span {color: #fff;}
#recruit .tit01 h2:after {
	background-color: #fff;
	left: 50%;
	margin-left: -10.5px;
}
#recruit .btn01 a:before {background-color: #fff;}
#recruit .btn01 a:after {
	width: 100%;
	color: #004FB8;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* header
	---------------------------------------- */
	/* メイン画像 */
	#h1Wrap #h1Box {padding: 0 1em;}
	#mainImageScroll a {height: 4.2em;}
	#mainImageScroll a:before {height: 2.7em;}
	/*#mainImageSlide li {
		background-position: center center, center center;
		background-size: contain, cover;
	}*/
	#h1Box p.enTit {
		width: 51%;
	}
	#h1Box h1 {
		font-size: 2.42em;
		line-height: 1.5em;
		font-weight: 500;
	}
	#h1Box p {
		font-size: 1em;
		line-height: 1.64em;
	}
	
	/* aboutUs */
	#aboutUs .aboutImg {margin-bottom: 2em;}
	#aboutUs .aboutImg img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		object-position: 35% 100%;
	}
	.contentsWrap h3 {
		font-size: 1.5em;
		line-height: 1.5em;
	}
	.contentsWrap p {
		line-height: 1.5em;
		text-align: left;
		padding: 1.5em 0;
	}
	
	/* trucks service */
	.absoluteWrap {
		width: 100%;
		top: inherit;
		right: 0;
	}
	.absoluteWrap:after {
		padding-top: 70%;
	}
	#trucks .textWrap, #service .textWrap {
		padding-top: 85%;
		text-align: center;
	}
	#trucks.contentsWrap {padding-bottom: 0;}
	
	/* safety */
	#safety {background-position: 20%;}
	#safety .bkgWhite {
		padding: 2em;
		margin-bottom: 1.5em;
	}
	#safety .bkgWhite .greenMark {
		width: 43%;
		margin: 0 auto;
	}
	#safety h2 {font-size: 1.07em;}
	#safety h2 span {
		font-size: 1.5em;
		line-height: 1.2em;
	}
	#safety h3 {
		font-size: 1.14em;
		text-align: center;
		padding: 1em 0;
	}
	#safety.contentsWrap .bkgWhite p {padding: 0;}
	
	/* recruit */
	#recruit {background-position: bottom right;}
	#recruit.contentsWrap {padding-bottom: 6em;}
	
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){

	/* header
	---------------------------------------- */
	/* メイン画像 */
	#h1Wrap #h1Box {
		width: 100%;
		max-width: 960px;
		padding: 0 10px;
		margin: 0 auto;
	}
	#mainImageScroll a {height: 6.2em;}
	#mainImageScroll a:before {height: 4.7em;}
	#h1Box p.enTit {
		width: 30%;
	}
	#h1Box h1 {
		font-size: 5.28em;
		line-height: 1.3em;
		font-weight: 600;
		margin-bottom: 0.3em;
		letter-spacing: 4px;
	}
	#h1Box p {
		font-size: 1.4em;
		line-height: 1.9em;
		letter-spacing: 2px;
	}
	
	/* contentsWrap */
	.contentsWrap p {
		font-size: 1.14em;
		line-height: 2em;
	}
	.contentsWrap h3 {
		font-size: 1.85em;
		line-height: 1.8em;
		margin-bottom: 1.2em;
	}
	.contentsWrap .btn01 {margin-top: 5em;}

	/* aboutUs */
	#aboutUs .tit01 h2:after {
		left: 50%;
		margin-left: -10.5px;
	}
	#aboutUs .aboutImg {
		max-width: 960px;
		margin: 0 auto 4em;
	}
	#aboutUs.contentsWrap h3,
	#aboutUs.contentsWrap p {max-width: 766px;}
	#aboutUs.contentsWrap h3 {margin: 0 auto;}
	#aboutUs.contentsWrap .btn01 {margin-top: 0;}
	#aboutUs.contentsWrap p {margin: 2em auto;}
	
	/* trucks service */
	.contentsWrap .absoluteWrap {
		width: 50%;
		top: 7.5em;
		height: 588px;
	}
	.contentsWrap .textWrap {
		width: 42%;
		max-width: 378px;
	}
	#trucks .btn01 , #service .btn01 {margin-top: 3.78em;}
	#trucks .btn01 a, #service .btn01 a {width: 44%;}
	#trucks, #service {
		height: calc(588px + 7.5em);
		padding-top: 7.5em;
		padding-bottom: 0;
	}
	#trucks .tit01,
	#service .tit01 {margin-bottom: 4.5em;}
	#trucks .absoluteWrap {right: 0;}
	#service {margin-bottom: 7.5em;}
	#service .absoluteWrap {left: 0;}
	#service header h2,
	#service .textWrap {margin-left: 58%;}
	
	/* safety */
	#safety {background-position: 20% top;}
	#safety .bkgWhite {
		padding: 3% 13%;
		justify-content: center;
		align-items: center;
	}
	#safety .bkgWhite .greenMark {
		width: 45%;
		min-width: 143px;
		margin-right: 5%;
	}
	#safety .bkgWhite div:last-of-type {
		width: 100%;
		min-width: 450px;
	}
	#safety h2 {
		font-size: 1.42em;
		line-height: 1.8em;
		margin-bottom: 1em;
	}
	#safety h2 span {font-size: 1.5em;}
	#safety h3 {
		font-size: 1.42em;
		margin-bottom: 0;
	}
	#safety p {
		font-size: 1.14em;
		line-height: 2em;
		text-align: center;
		margin: 2.8em 0 2em;
	}
	#safety .bkgWhite p {
		margin: 4% 0 0;
		line-height: 1.75em;
	}
	#safety .btn01 a:before {background-color: #fff;}
	#safety .btn01 a:after {
		width: 100%;
		color: #000;
	}
	
	/* info */
	#info .flexBox {display: flex;}
	#info .flexBox header {
		width: 20%;
		min-width: 160px;
	}
	#info .flexBox ul {width: 80%;}
	
	/* recruit */
	#recruit {
		background-position: center center;
		text-align: center;
	}
	#recruit p {
		display: inline-block;
		text-align: center;
	}
	#recruit .tit01 {margin-bottom: 5em;}
	#recruit .btn01 a,
	#recruit .btn01 a:after {padding: 1.16em 0;}
}