@charset "UTF-8";
/* CSS Document */

#wrapper { position:relative; width:100%; min-width:1000px; overflow:hidden; }
.inner{ position:relative; width:1000px; margin:auto; }
.pc_none { display:none; }
.kosugi { font-family: 'Kosugi Maru', sans-serif; font-weight: normal; }
.en { font-family: 'Kosugi Maru', sans-serif; }
.ico { position: relative; }
.ico:before { position: absolute; content: ""; top: 0; left: 0; background-repeat: no-repeat; background-size: contain; }

.en.red { color: #d00a0a; }
.en.blue { color: #0a4bd0; }
.en.orange { color: #ea6b0d; }
.en.green { color: #009944; }
.en.pink { color: #c663b7; }

/* button */
.push { display:inline-block; -webkit-transition:all .3s; transition:all .3s; -webkit-transform:scale(1); transform:scale(1); }
.push:hover { -webkit-transform:scale(0.98); transform:scale(0.98); }
.btn1 { text-align: center; }
.btn1 > * { display: block; width: 100%; max-width: 300px; padding: 5px 20px; font-size: 17px; color: #fff; border-radius: 5px; border: 2px solid; margin: 0 auto; -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn1.orange > * { background-color: #ea6b0d; border-color: #ea6b0d; }
a:hover .btn1.orange > *, .btn1.orange > *:hover { background-color: #fff; color: #ea6b0d; }

/* bg */
.bgBe { background-image: url(../img/bg_stripe_be.png); }
.bgGn { background-image: url(../img/bg_stripe_gn.png); }

/* title */
.conttl1 { position: relative; max-width: 1000px; width: 100%; font-size: 35px; text-align: center; font-family: 'Kosugi Maru', sans-serif; font-weight: normal; line-height: 1; margin:0 auto 35px; }
.conttl1:before { position: absolute; content: ""; width: 100%; bottom: 25px; left: 0; right: 0; border-bottom:2px solid #ffef02; }
.conttl1 .wrap { position: relative; display: inline-block; padding: 0 10px; }
.conttl1 .wrap:before { position: absolute; content: ""; width: 100%; bottom: 25px; left: 0; right: 0; border-bottom:2px solid #009944; }
.conttl1 .en { font-size: 20px; color: #059932; }
.conttl2 { position: relative; font-size: 25px; font-family: 'Kosugi Maru', sans-serif; font-weight: normal; padding-left: 50px; }
.conttl2:before { position:absolute; content:""; top:0; left:0; background-size:contain; background-repeat:no-repeat; display:inline-block; width:33px; height:33px; }
.conttl2 .en { font-size:15px; }
.subTtl { padding:8px 20px; font-size:18px; font-family:'Kosugi Maru', sans-serif; text-align:center; color:#059932; background:#ffef02; }

.webtokuten { margin:55px auto; text-align:center; }
.webtokuten img { max-height:500px; }

/* --header------------------------ */
header { padding: 20px 0; }
.logoBox { width: 33%; }
.logoBox .txt { margin:0 0 10px; font-weight:bold; font-size: 12px; color: #000022; }
.infoBox { width: 65%; text-align:center; justify-content:flex-end; -webkit-justify-content:flex-end; align-items: end;}
.infoBox .telBox { width: 48%; }
.infoBox .telBox .shop_ttl { width: 100%; padding: .5em; border-radius: 5px; color: #fff; font-size: .9em; }
.infoBox .telBox.otocenter .shop_ttl { background: #0a4bd0; }
.infoBox .telBox.otogarary .shop_ttl { background: #049931; }

.infoBox .telBox .tel { margin: 5px; font-size: 18px; }
.infoBox .telBox .tel span { display: block; }

.infoBox .btnContact { width: 20%; margin-top: 0; text-align: center; margin-left: 2%; }
.infoBox .btnContact a { display: block; height: 100%; background-color: #ea6b0d; border: 2px solid #ea6b0d; border-radius: 5px; color: #fff; font-weight: bold; line-height: 20px; padding: 16px; }
.infoBox .btnContact a:hover { background-color: #049931; border: 2px solid #049931; }
.infoBox .btnContact .ico { display: block; margin-bottom: 5px; }
.infoBox .btnContact .ico img { width: 35%; }
/*.infoBox .btnContact .ico:before { width: 23px; height: 14px; top: 3px; left: -20px; background-image: url(../img/ico_mail.png); }*/

.infoBox .hour { margin: 0; text-align: center; font-size: 13px; }

.infoBox .btnLine { width: 19%;}
.infoBox .btnLine img { max-width: 75px;}
.infoBox .btnLine span { display: inline-block; color: #53B535; font-size: .8em; font-weight: bold; letter-spacing: -1px;}


/* --gnav------------------------ */
#gnav { position:relative; background-color: #fff; z-index:0; border-top: 8px solid #ffef02; }
#gnav::before { content:""; position:absolute; width:100%; height:1px; left:-0; bottom:16px; background:#c0c0c0; z-index:-1; }
#gnav .nav { max-width: 1000px; margin: 0 auto; flex-wrap: nowrap; -webkit-flex-wrap: nowrap; }
#gnav .nav li a { display: block; }
#gnav .nav li .ico { margin:17px 0 13px; font-size: 17px; line-height: 1.2; padding-left: 40px; font-weight:bold; }
#gnav .nav li .ico:before { width: 32px; height: 32px; -webkit-transition: all 0.3s; transition: all 0.3s; }
#gnav .nav li.top .ico:before { background-image: url(../img/ico_home.png); }
#gnav .nav li.zaiko .ico:before { background-image: url(../img/ico_zaiko.png); }
#gnav .nav li.reason .ico:before { background-image: url(../img/ico_reason.png); }
#gnav .nav li.about .ico:before { background-image: url(../img/ico_about.png); }
#gnav .nav li.company .ico:before { background-image: url(../img/ico_company.png); }
#gnav .nav li .en { font-size: 15px; font-weight:normal; display: block; }
#gnav .nav li a:hover .ico:before { top: -7px; }
.menu-button { display:none; }

/* --contents------------------------ */

/* --footer------------------------ */
.floNav { position:fixed; right:0; bottom:20px; z-index:200; }
.floNav li { position:relative; width:130px; height:80px; margin-bottom:10px; }
.floNav #flo_oil { height:125px; }
.floNav li img { position:absolute; top:0; right:0; -webkit-transition:all .3s; transition:all .3s; }
.floNav li:hover img { right:-10px; }

footer { margin-top: 60px; border-top: 8px solid #ffff00; }
footer .logoBox,
footer .infoBox { margin: 30px auto 20px; }
footer .footerNav { margin:20px auto 50px; }
footer .footerNav > ul:not(:first-of-type) { margin-left:35px; }
footer .footerNav > ul li { margin-bottom: 5px; }
footer .footerNav > ul > li > a { padding-left: 1.6em; font-size: 16px; font-weight: bold; position: relative; }
footer .footerNav > ul > li > a:before { content:""; position: absolute; top:0; left:0; width:18px; height:18px; background: url(../img/ico_arrow.png); }
footer .footerNav > ul > li > ul { margin: 5px auto 0 1.6em; }

footer .copy { margin: 0; text-align: center; background-color: #ea6b0d; color: #fff; font-size: 13px; padding: 8px 0; }
footer .copy a { text-decoration: underline; color: #fff; }

.bnrList { /* width:100%; */ margin:30px 0; }
.bnrList li { width:23%; margin: 0 1% 1em; }


/*店舗情報
-----------------------------------------------------------*/
#shopInfo { margin-top:75px; padding:45px 0 55px; background:url("../img/bg_gr.png"); position:relative; }
  #shopInfo .shopCon { width:48%; }
  #shopInfo .shopCon .shopTtl { margin:0 auto; padding:5px 0; font-size:22px; color:#bf1956; text-align:center; }
  #shopInfo .shopData { border:5px solid #fff; }
  #shopInfo .shopData .map { width:100%; padding-top:50%; position:relative; }
  #shopInfo .shopData .map iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

  #shopInfo .shopData figure { text-align:center; }
  #shopInfo .shopData .tel { margin:0 auto; padding:10px; font-size:21px; font-weight:bold; color:#fff; text-align:center; line-height:1;  background:#bf1956; }
  #shopInfo .shopData .tel em { margin-left:5px; font-size:34px; }
  #shopInfo .shopData > .flex { padding:10px 13px; background:#062f4f; }
  #shopInfo .shopData dl { width: 49%; color:#fff; background:#062f4f; }
  #shopInfo .shopData dl dt { float:left; width:80px; font-weight:bold; text-align:center; background:#a81d4e; }
  #shopInfo .shopData dl dd { margin:0 0 10px 90px; }
  #shopInfo .shopData .shopImg { width: 49%; margin: 0; }





/*IE*/
@media all and (-ms-high-contrast:none){
  .push img { width:100%; }
}