@charset "UTF-8";

/*----------------------------------------------------------
ページ共通レイアウト設定
---------------------------------------------------------- */
#body-wrapper {
  background: none;
}

#body {
  width: 100%;
  background: none;
}

#body-inner {
  width: 100%;
  padding: 0;
  margin: 0;
}

.one-col #centercol {
  width: 100%;
}

#main {
  width: 100%;
  padding: 0;
  margin: 0;
}

#Carea {
  width: 100%;
}

/*------------    reset()    ------------*/
.obWrap *{margin:0;padding:0;box-sizing:border-box;}
.obWrap ul,ol{list-style:none;}
.obWrap ul::after{content:"";display:none;}
.obWrap img{width:100%;vertical-align:bottom;border:0;}
.obWrap a{text-decoration:none!important;}

/*------------    common    ------------*/
.obWrap{letter-spacing:0.1rem;}
.obWrap span{display:block;}
.obWrap div > *,.obWrap section > *{margin:0 auto;}
.text{text-align:center;line-height:2;border:none;background:none;}
div[class*="contentBg"] > ul,section[class*="contentBg"] > ul{display:flex;justify-content:space-between;}
div[class*="contentBg"] > ul figcaption,section[class*="contentBg"] > ul figcaption{color:#FFF;font-weight:bold;}
div[class*="contentBg"] > ul .oilLink,section[class*="contentBg"] > ul .oilLink{background:#064129;}
div[class*="contentBg"] > ul .batteryLink,section[class*="contentBg"] > ul .batteryLink{background:#04345c;}
div[class*="contentBg"] > ul .newitemLink,section[class*="contentBg"] > ul .batteryLink{background:#04345c;}

/* ========================================
                   top 共通
   ======================================== */
.top-titleBg{background:url(../img/top-bg1.jpg)no-repeat;background-size:cover;}
.top-contentBg{background:url(../img/top-bg3.jpg);}
.top-contentBg > ul li:nth-of-type(1) figure{box-shadow:8px 8px 0px 0px #333333;}
.top-contentBg > ul li:nth-of-type(2) figure{box-shadow:8px 8px 0px 0px #333333;}
.top-contentBg > ul figcaption{position:relative;padding:4% 5%;}
.top-contentBg-ex{background:url(../img/top-bg2.jpg) no-repeat center / cover;}
.top-contentBg > ul figcaption::after{content:"〉";position:absolute;right:3%;}

/* ========================================
                   oil 共通
   ======================================== */
.oil-titleBg{background:url(../img/oil-bg1.jpg)no-repeat;background-size:cover;}
.oil-contentBg{background:url(../img/top-bg3.jpg);}
.oil-contentBg > h3{text-align:center;color:#064129!important;line-height:1.5;font-weight:bold;letter-spacing:3px;}
.oil-contentBg > .wrench::after{content:"";display:block;background:url(../img/oil-bg2.jpg) no-repeat center / cover;}
.oil-contentBg > ul figcaption{padding:5%;}
.oil-contentBg > ul ol{margin-top:5%;}
.oil-contentBg > ul ol li{padding:0 2% 0 1em;text-indent:-1em;color:#000;}
.oil-contentBg > ul ol li::before{content:"・"}
.oil-contentBg > ul ol li span{margin-left:3%;}

/*------------    itemPattern    ------------*/
section[class*="pattren"]{background:url(../img/oil-bg6.jpg) repeat-x top center / cover;}
section[class*="pattren"] > p::after{content:"";display:block;width:100%;}
.funnel::after{background:url(../img/oil-bg3.png) no-repeat center / cover;}
.nozzle::after{background:url(../img/oil-bg4.png) no-repeat center / cover;}
.saucer::after{background:url(../img/oil-bg5.png) no-repeat center / cover;}
.pump::after{background:url(../img/oil-bg7.png) no-repeat center / cover;}

.topLink a{position:relative;display:block;background:#331b0c;width:80%;max-width:350px;margin:12% auto 0;text-align:center;color:#FFF!important;}
.topLink a::after{content:"〉";position:absolute;right:3%;}
.topLink::after{content:"";display:none!important;}

/* ========================================
                 battery 共通
   ======================================== */
.battery-titleBg{background:url(../img/battery-bg1.jpg)no-repeat;background-size:cover;}
.battery-contentBg{background:url(../img/top-bg3.jpg);}
.battery-contentBg > h3{text-align:center;color:#04345c!important;line-height:1.5;font-weight:bold;letter-spacing:3px;}
.battery-contentBg > .b-terminal::after{content:"";display:block;background:url(../img/battery-bg2.jpg) no-repeat center / cover;}
.battery-contentBg > ul{flex-wrap:wrap;}
.battery-contentBg > ul figcaption{padding:5%;}
.battery-contentBg > ul ol{margin-top:5%;}
.battery-contentBg > ul ol li{padding:0 2% 0 1em;text-indent:-1em;color:#000;}
.battery-contentBg > ul ol li::before{content:"・"}
.battery-contentBg > ul ol li span{margin-left:3%;}

/*------------    itemPattern    ------------*/
.t-cover::after{background:url(../img/battery-bg3.png) no-repeat center / cover;}
.pd-terminal545::after{background:url(../img/battery-bg4.png) no-repeat center / cover;}
.b-frame::after{background:url(../img/battery-bg5.png) no-repeat center / cover;}
.e-cable545::after{background:url(../img/battery-bg6.png) no-repeat center / cover;}
.tw-wrench545::after{background:url(../img/battery-bg7.png) no-repeat center / cover;}
.m-backup545::after{background:url(../img/battery-bg8.png) no-repeat center / cover;}
.b-clip545::after{background:url(../img/battery-bg9.png) no-repeat center / cover;}
.a-clip::after{background:url(../img/battery-bg10.png) no-repeat center / cover;}
.b-meter545::after{background:url(../img/battery-bg11.png) no-repeat center / cover;}
.b-brush545::after{background:url(../img/battery-bg12.png) no-repeat center / cover;}