@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,figure,nav,footer,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	line-height: 1.6;
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #525252;
}
body{
	background: #fff;
}
ol,ul,li,dl,dt,dd{
list-style: none;
  margin: 0;
  padding: 0;
}
a {
text-decoration: none;
}


img {
vertical-align: bottom;
border: none;
}

#wrapper {
	overflow: hidden;
	width: 100%;
}

a:hover img {
filter: brightness(115%);
filter: saturate(210%);
transition: all .3s;
}
/*---------------------------------------------------------------------------------------------*/
h2.tit {
    padding: 0px 0px 20px 0px;
    position: relative;
    text-align: center;
    font-size: 360%;
    font-weight: bold;
}
/*---------------------------------------------------------------------------------------------*/
header{
	width:100%;
	overflow: hidden;
	padding: 10px 0px;
	background: #FF0012;
	}
header .inner{
width: 1000px;
overflow: hidden;
margin: 0px auto;
}
header .logo{
	padding-top:5px;
	float: left;
	width: 240px;
}
header .logo img{
	width: 100%;
}
header .right{
	float: right;
	width: 400px;
}
header .right img{
	width: 100%;
}

header h1{
	font-size: 100%;
	color:#fff;
}
header h1 span{
	font-size: 100%;
	}

/*---------------------------------------------------------------------------------------------*/
.main{
	width: 100%;
	margin-bottom: 30px;
	overflow: hidden;
	background: #FFF;
}
.main .inner{
	overflow: hidden;
	margin: 0px auto;
	padding: 0px 0px;
	text-align: center;
	position:relative;	/* 相対位置指定 */
	width: 1100px;
}
.main .inner img{
	width: 95%;
}
.main .inner div.btn{
	position:absolute;	/* 絶対位置指定 */
	top:320px;
	left:0;
	right:0;
}
.main .inner div.btn img{
	width: 280px;

}
/*-top_txt--------------------------------------------------------------------------------------------*/
.top_txt{
	width: 100%;
	margin-bottom: 30px;
}
.top_txt .inner{
	width: 1100px;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	font-size: 130%;
	line-height: 200%;
}
.top_txt .inner span{
	font-size:inherit;
	line-height: inherit;
	color:#FF0012;
}

/*-bnr--------------------------------------------------------------------------------------------*/

ul.bnr{
	width: 1000px;
	margin:0px auto;
	padding: 50px 0% 50px 0%;
	display:flex;/*横並び*/
	align-items:top;/*天地センター*/
	flex-wrap:wrap;
	justify-content:space-between;
	}
	ul.bnr li{
		width: 48%;
		text-align: center;
	}
	ul.bnr li img{
		width: 100%;
	}
/*-notice--------------------------------------------------------------------------------------------*/
.notice{
	width: 100%;
	margin-bottom: 30px;
}
.notice .inner{
	width: 1000px;
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	font-size: 100%;
	line-height: 160%;
}
.notice .inner p.tit{
	margin-bottom: 5px;
	padding:5px;
	background:#FF0012;
	text-align:center;
	color:#fff;
	font-size:110%;
	letter-spacing:10px;
	line-height:1;
}
.notice .inner p{
	font-size:inherit;
	line-height: inherit;
}


/*oil_block-------------------------------------------------------------------------------------------*/
.oil_block{
	width: 1000px;
	margin:0px auto;
	margin-bottom: 60px;
	padding: 0px 0px 10px 0px;
	background: #F7F4F0;
}
.oil_block h2{
	margin-bottom: 5px;
	padding:15px;
	background:#009023;
	text-align:center;
	color:#FFFF00;
	font-size:280%;
	line-height:1;
}

.oil_block h2 span{
	font-size:60%;
	color:inherit;
}

.oil_block .inner{
	width: 800px;
	margin:0px auto;
	padding:10px 0px 60px 0px;
	text-align:center;
}

/*-footer--------------------------------------------------------------------------------------------*/
footer{
	clear: both;
	width: 100%;
	padding: 30px 0px;
	text-align: center;
	background: #525252;
}

footer .inner{
width: 1000px;
	margin: 0px auto;
	text-align: center;
	color: #FFF;
	overflow: hidden;
}
footer .inner div.link{
	width: 50%;
	float:left;
	text-align: left;
	overflow: hidden;
}
footer .inner a{
	margin-right: 40px;
	color: #FFF;
}
footer .inner div.copy{
	width: 100%;
	float:right;
	text-align: center;
	font-size: 85%;
	overflow: hidden;
	color: #fff;
}
/*table----------------------------------------------------------------------*/
table.oil_table{
    margin: 0px 0px 20px 0px;
width:100%;
text-align:center;
border:1px solid #969696;
border-collapse:collapse;
border-spacing:0px;

}
table.oil_table th,table.oil_table td{
padding:10px 8px 10px 8px;
vertical-align: middle;
border:1px solid #969696;
text-align:left;
font-size:160%;
line-height: 130%;
background: #FFF;
text-align: center;
}
table.oil_table th{
width:260px;
background: #cdecec;
font-size:160%;
text-align: left;
}
table.oil_table th span{
	font-size:80%;
}
table.oil_table td.price{
	font-size: 260%;
	line-height:1;
	color: #FF0004;
	font-family: "M PLUS 1p";
	font-weight: 900;
}
table.oil_table td.price span{
	font-size: 70%;
		line-height:1;
	color: inherit;
	font-weight: bold;
}
table.oil_table td.price span.txt{
	font-size: 40%;
	color: inherit;
	font-weight: bold;
}
table.oil_table td.no{
	font-size:130%;
	color: #666666;
	font-family: "M PLUS 1p";
	font-weight: 900;
}
table.oil_table td.normal{
	width: 250px;
	background: #F1812B;
	color: #fff;
}
table.oil_table td.eco{
	background: #8DC73F;
	color: #fff;
}
p.table_txt{
	text-align: left;
	margin-bottom: 40px;
}
/*member------------------------------------------------------------------------------------------*/
.oil_block h3{
	margin-bottom: 10px;
	padding:10px 0px;
	background:#F1812B;
	text-align:center;
	color:#FFF;
	font-size:180%;
	line-height:1;
}
.oil_block h3.eco{
	background:#8DC73F;
}
.oil_block h3.diesel{
	background:#0071BC;

}
.oil_block.member h2{
	background:#2E6BA8;
}
table.oil_table.member td.card{
	background: #F85100;
	color: #FFFF00;
	font-weight: bold;
}
table.oil_table.member td.normal{
	background: #B3B3B3;
	color: #fff;
	font-weight: bold;
}
table.oil_table.member td.normal span.notice{
	color: #fff;
	font-weight: bold;
	padding-left: 10px;
}
table.oil_table.member td.price.card{
	background: #FFFF9A;
	color: #F85100;
	font-weight: bold;
}
table.oil_table.member td.price.normal{
	background: #fff;
	color: #666666;
}
/*page-top------------------------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 90%;
}

#page-top a {
    background: #98AABE;
    text-decoration: none;
    color: #fff;
    padding: 20px 20px;
    text-align: center;
    display: block;
    border-radius: 5px;
	border:1px solid #FFF;

}
#page-top a:hover {
    text-decoration: none;
    background: #ff0004;
}