/* Y'S GEAR : sp_oil.css */


/*==============================================*
 *  [ oilMain ] 
 *==============================================*/

.oilMain {
	background-color: #44434e;
	background-image: url(../img/main_img.png), url(../img/main_bg.jpg);
	background-position: left 8% top 2.5%, center top;
	background-repeat: no-repeat, no-repeat;
	background-size: 27.55% auto, 100% auto;
	color: #fff;
}

@media screen and (max-width: 768px) {
	.oilMain {
		background-position: left 20px top 2.5%, center top;
		background-size: 24% auto, 100% auto;
		color: #fff;
	}
} /* */

@media screen and (max-width: 568px) {
	.oilMain { background-position: left 20px top 20px, center top; }
} /* */


/*==============================================*
 *  [ about ] 
 *==============================================*/

.oilMain .about { padding: 9% 60px 0 36%; }

.oilMain .about p { margin: 0 0 17% -5px; }

.oilMain .about section { margin: 0; }
.oilMain .about dl { padding-left: 30px; }
.oilMain .about dt {
	position: relative;
	margin: 30px 0 7px;
	color: #ffcc33;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
}
.oilMain .about dt::before {
	position: absolute;
	top: 0;
	left: -30px;
	width: 20px;
	height: 20px;
	background: url(../img/about_icon.svg) center center no-repeat;
	background-size: contain;
	content: "";
}
.oilMain .about dd { font-size: 1.6rem; }

@media screen and (max-width: 768px) {
	.oilMain .about { padding: 9% 20px 0 30%; }
} /* */

@media screen and (max-width: 568px) {
	.oilMain .about { padding: 0 10px; }

	.oilMain .about p {
		margin: 0;
		padding: 15% 0 15% 33%;
	}
	
	.oilMain .about h2 { text-align: center; }
	.oilMain .about h2 img {
		width: 100%;
		max-width: 330px;
	}
	.oilMain .about dl { padding-left: 25px; }
	.oilMain .about dt { font-size: 1.8rem; }
	.oilMain .about dt::before {
		left: -25px;
		width: 16px;
		height: 16px;
	}
} /* */


/*==============================================*
 *  [ conclusion ] 
 *==============================================*/

.oilMain .conclusion {
	padding: 9% 60px 0;
	background: url(../img/conclusion_bg.png) center top no-repeat;
	background-size: 100% auto;
	text-align: center;
}
.oilMain .conclusion p { margin: 30px 0 40px; }

@media screen and (max-width: 768px) {
	.oilMain .conclusion { padding: 9% 20px 0; }
} /* */

@media screen and (max-width: 568px) {
	.oilMain .conclusion {
		margin-top: 40px;
		padding: 0 20px 0;
		background: url(../img/conclusion_bg_sp.png) center top no-repeat;
		background-size: 100% auto;
	}
	
	.oilMain .conclusion > img { width: 130px; }
	.oilMain .conclusion p img {
		width: 100%;
		max-width: 310px;
	}
	.oilMain .conclusion figure img {
		width: 100%;
		max-width: 260px;
	}
} /* */


/*==============================================*
 *  [ point ] 
 *==============================================*/

.oilMain .point { padding: 0 60px 60px; }

.oilMain .point h2 {
	padding: 15px;
	background: #d00e27;
	font-size: 2.4rem;
	line-height: 1.2;
	text-align: center;
}

.oilMain .point section { padding-left: 55px; }
.oilMain .point section:nth-of-type(1) { background: url(../img/point_001.png) left top no-repeat; }
.oilMain .point section:nth-of-type(2) { background: url(../img/point_002.png) left top no-repeat; }
.oilMain .point section:nth-of-type(3) { background: url(../img/point_003.png) left top no-repeat; }
.oilMain .point section h3 {
	margin-bottom: 25px;
	color: #ffcc33;
	font-size: 2rem;
	line-height: 1;
}

.oilMain .point div {
	margin-top: 80px;
	padding: 20px;
	border: 1px solid #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
.oilMain .point div p { margin: 0; }
.oilMain .point div b {
	display: inline-block;
	color: #ffcc33;
	font-size: 2.6rem;
}

@media screen and (max-width: 768px) {
	.oilMain .point { padding: 0 20px 60px; }
	.oilMain .point section {
		margin-left: 20px;
		margin-right: 20px;
	}
} /* */

@media screen and (max-width: 568px) {
	.oilMain .point { padding: 0 10px 40px; }

	.oilMain .point h2 {
		padding: 10px;
		font-size: 1.8rem;
	}

	.oilMain .point section {
		margin: 20px 0 20px 5px;
		padding-left: 25px;
		background-size: 15px auto !important;
	}
	.oilMain .point section h3 {
		margin-bottom: 10px;
		font-size: 1.8rem;
	}
	
	.oilMain .point div {
		margin-top: 40px;
		padding: 15px;
		font-size: 1.6rem;
		text-align: left;
	}
	.oilMain .point div b { font-size: 2rem; }
} /* */