@charset "utf-8";

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

/* ヘッダーメイン画像 */
#bkgImg {background-image: url("../../images/safety/mainImg.jpg");}

/* コンテンツ全体のpタグの文字 */
.saftey p {
	font-family: "游ゴシック", sans-serif;
	font-weight: 500;
}

/* タイトル */
.tit01 {text-align: center;}

/* h3 */
.safety h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	text-align: center;
}
.safety h3::after {
	width: 21px;
	height: 2px;
	display: block;
	position: absolute;
	content: "";
	background-color: #4B4B4B;
	left: 50%;
	margin-left: -10.5px;
}

/* パンくずリストの背景＆青背景 */
#roadnav,
.bkgLtblue {background-color: #F1F7FF;}

/* effort
---------------------------------------- */
#effort article {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
}
#effort section {background-color: rgba(255, 255, 255, 0.6);}
#effort h4 {
	font-family: "Noto Sans JP", sans-serif;
	color: #004FB8;
	font-weight: 500;
	text-align: center;
}

/* svg */
#effort section div {text-align: center;}
#effort svg {fill: #004FB8;}
#carIcon svg {
	width: 102px;
	height: 68px;
}
#educationIcon svg {
	width: 59px;
	height: 81px;
}
#handleIcon svg {
	width: 70px;
	height: 70px;
}

/* policy
---------------------------------------- */
.policy .numberBox {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
}
.policy .numberBox section {font-weight: 500;}
#qualit .policy .numberBox section {background-color: rgba(255, 255, 255, 0.6);}
#environ .policy .numberBox section {background-color: rgba(231, 231, 231, 0.3);}
.policy .numberBox header {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #004FB8;
	border-bottom: 2px solid #004FB8;
}

/* environ
---------------------------------------- */

/* blueBox */
.blueBox {
	background: url("../../images/safety/greenBg.jpg") no-repeat center center / cover;
	color: #fff;
	text-align: left;
}
.blueBox h4 {
	font-family: "游ゴシック", sans-serif;
	font-weight: bold;
}
.safety .blueBox p {text-align: left;}
.blueBox#health {background: url("../../images/safety/healthBg.jpg") no-repeat center center / cover;}
.blueBox .healthImg {max-width: 226.04px;}
.blueBox#green {background: url("../../images/safety/greenBg.jpg") no-repeat center center / cover;}
.blueBox #greenImg {max-width: 180px;}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	.safety .contentsWrap {padding-bottom: 6em;}
	
	/* コンテンツ全体のpタグの文字 */
	.safety .txtBox {text-align: left;}
	
	/* h3 */
	.safety h3 {
		font-size: 1.2em;
		line-height: 2em;
	}
	
	/* qualit
	---------------------------------------- */
	#qualitImg {margin: 2em 0 5em;}
	
	/* effort
	---------------------------------------- */
	#effort article {margin-bottom: 2em;}
	.safety #effort h3 {padding-bottom: 2em;}
	#effort section {
		padding: 2em 1em 2em;
		margin-bottom: 3em;
		width: 100%;
	}
	#effort section div {margin-bottom: 1.2em;}
	#effort h4 {
		font-size: 1.15em;
		line-height: 1.5em;
		margin-bottom: 1em;
	}
	
	/* policy
	---------------------------------------- */
	.safety .policy h3 {padding-bottom: 3em;}
	.policy .numberBox section {
		padding: 0 1em 1.5em;
		margin-bottom: 3em;
		width: 100%;
	}
	.policy .numberBox section:last-of-type {margin-bottom: 0;}
	.policy .numberBox header {
		max-width: 33px;
		font-size: 2em;
		line-height: 1.2em;
		margin: -0.6em auto 0.5em;
	}
	.policy .numberBox p {line-height: 1.75em;}
	#qualit .policy {padding-bottom: 5%;}
	
	/* environ
	---------------------------------------- */
	.contentsWrap#environ {padding-top: 6em;}
	.blueBox {padding: 3em 1.3em;}
	.blueBox h4 {
		font-size: 1.14em;
		line-height: 1.6em;
		text-align: center;
		margin-bottom: 1em;
	}
	.blueBox p {
		font-size: 1.14em;
		line-height: 1.75em;
	}
	
	/* health */
	.blueBox#health {margin: 4em 1em 0 1em;}
	.blueBox#health div:first-of-type {margin-bottom: 2em;}
	.blueBox#health div:last-of-type {margin-top: 1.5em;}
	.blueBox .healthImg {margin: 0 auto;}
	
	/* green */
	.blueBox#green {
		display: flex;
		flex-wrap: wrap;
		margin: 2em 0 4em;
	}
	.blueBox#green div:first-of-type {order: 2;}
	.blueBox#green div:last-of-type {
		order: 1;
		margin-bottom: 2em;
	}
	.blueBox #greenImg {
		margin: 0 auto;
		width: 100%;
	}
	
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	/* コンテンツ全体のpタグの文字 */
	.safety .txtBox {text-align: center;}
	.safety p {
		font-size: 1.14em;
		line-height: 2em;
	}
	
	/* タイトル */
	.tit01 {margin-bottom: 4.7em;}
	.safety .tit01 h2:after {
		left: 50%;
		margin-left: -10.5px;
	}
	
	/* h3 */
	.safety h3 {
		font-size: 1.57em;
		line-height: 2.5em;
		padding-bottom: 3.3em;
	}
	
	/* qualit
	---------------------------------------- */
	#qualitImg {margin: 2.8em 0 7.1em;}
	
	/* effort
	---------------------------------------- */
	#effort section {
		padding: 4.9% 1.78em 5.2% 1.78em;
		margin: 0 3.3% 10.52% 0;
		width: 31.1%;
	}
	#effort h4 {
		font-size: 1.42em;
		line-height: 1.5em;
		margin-bottom: 1.85em;
	}
	#effort section:last-of-type h4 {margin-bottom: 1em;}
	#effort section:last-of-type {margin-right: 0;}
	#effort p {text-align: left;}
	
	/* svg */
	#carIcon {margin-bottom: 1.92em;}
	#educationIcon {margin-bottom: 1em;}
	#handleIcon {margin-bottom: 1.8em;}
	
	/* policy
	---------------------------------------- */
	.policy {padding-bottom: 1.78em;}
	.policy .numberBox section {
		padding: 0 1.78em 7.08% 1.78em;
		margin: 0 3.3% 7.1% 0;
		width: 31.1%;
	}
	.policy .numberBox section:nth-child(3n) {margin-right: 0;}
	.policy .numberBox header {
		max-width: 57px;
		font-size: 3.57em;
		line-height: 1.1em;
		margin: -0.5em auto 0.5em;
	}
	.policy .numberBox p {
		max-width: 250px;
		text-align: left;
		line-height: 1.75em;
	}
	#qualit .policy .numberBox section:nth-child(4n),
	#qualit .policy .numberBox section:nth-child(5n),
	#qualit .policy .numberBox section:nth-child(6n) {margin-bottom: 0;}
	#environ .policy .numberBox section:nth-child(4n),
	#environ .policy .numberBox section:nth-child(5n),
	#environ .policy .numberBox section:nth-child(6n) {
		padding-bottom: 4.27%;
		margin-bottom: 0;
	}
	
	/* environ
	---------------------------------------- */
	#environ {margin-top: 1.78em;}
	
	/* blueBox */
	.blueBox {
		display: flex;
		align-items: center;
	}
	.blueBox h4 {
		font-size: 1.57em;
		line-height: 1.6em;
		margin-bottom: 0.9em;
	}
	.blueBox p {line-height: 1.75em;}
	
	/* health */
	.blueBox#health {
		padding: 3.2em 5.07em 3em 5.142em;
		margin-top: 7.5em;
	}
	.blueBox .healthImg {width: 80%;}
	#health div:first-of-type {
		max-width: 298px;
		margin-right: 2.85em;
		width: 100%;
	}
	#health div:last-of-type {margin-left: 1.92em;}
	
	/* green */
	.blueBox#green {
		padding: 2.71em 2.85em 2.82em 2.85em;
		margin: 3.57em 0 7.1em 0;
	}
	.blueBox #greenImg {
		min-width: 180px;
		width: 100%;
	}
	#green div:last-of-type {
		margin-left: 2.35em;
		max-width: 659px;
	}
	
}