@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 灯油 ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  hero
  
----------------------------------------------------------------------------------------------------*/

.hero {
  width:100%;
  background:url(../image/hero_bg.jpg) no-repeat center top;
}

.hero h2 {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(../image/hero.png) no-repeat center center;
}

@media print,screen and (min-width:641px) {
  .hero h2 { height:400px; }
}

@media screen and (max-width:640px) {
  .hero { background-size:cover; }
  .hero h2 {
    height:0;
    padding-top:34%;
    background-size:cover;
  }
}


/*-----------------------------------------------------------------------------------
  注文ページ
-----------------------------------------------------------------------------------*/

.hero-order {
  width:100%;
  background:url(../image/hero_bg.jpg) no-repeat center top;
}

.hero-order h2 {
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(../image/hero-order.png) no-repeat center center;
}

@media print,screen and (min-width:641px) {
  .hero-order h2 { height:180px; }
}

@media screen and (max-width:640px) {
  .hero-order { background-size:cover; }
  
  .hero-order h2 {
    height:0;
    padding-top:18%;
    background-size:cover;
  }
}


/*----------------------------------------------------------------------------------------------------

  配送地域
  
----------------------------------------------------------------------------------------------------*/

.area-warp {
  background-color:#4881ca;
  color:#fff;
}

.area_head {
  float:left;
  font-size:156.2%;
  line-height:1;
  padding-top:3rem;
  background-color:#306ab4;
  text-align:center;
  box-sizing:border-box;
}

.area_body {
  box-sizing:border-box;
  padding:1.75rem 0;
  text-align:left;
}

.area_body ul {
  list-style:none;
  letter-spacing:-0.5rem;
  margin-bottom:0.75rem;
}

.area_body li {
  display:inline-block;
  letter-spacing:normal;
  background-color:#fff;
  line-height:1;
  color:#306ab4;
  font-size:118.8%;
  margin-right:8px;
  padding:0.5rem 1rem;
}

@media print,screen and (min-width:641px) {
  .area {
    width:900px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .area_head {
    width:245px;
  }

  .area_body {
    margin-left:275px;
  }
}

@media screen and (max-width:640px) {
  .area {
    width:640px;
  }
  
  .area_head {
    width:170px;
  }

  .area_body {
    margin-left:195px;
  }
}


/*----------------------------------------------------------------------------------------------------

  ホームタンクの洗浄
  
----------------------------------------------------------------------------------------------------*/

.hometank-warp {
  background-color:#ebf2fa;
}

@media print,screen and (min-width:641px) {
  .hometank-warp {
    padding-top:50px;
    padding-bottom:60px;
  }
}

@media screen and (max-width:640px) {
  .hometank-warp {
    padding-top:2rem;
    padding-bottom:2rem;
  }
}

.hometank-warp .l-headline:after {
  content:"";
  display:block;
  width:100%;
  height:0.5rem;
}

.hometank {
  background-color:#fff;
  box-sizing:border-box;
  display:block;
}

.hometank .photo {
  max-width:250px;
  display:inline-block;
  float:right;
  margin-left:1rem;
}

.hometank .price {
  color:#ea282d;
  font-size:118.8%;
  font-weight:bold;
  display:inline-block;
  margin-top:1rem;
}

.hometank .price b,
.hometank .price small {
  display:inline-block;
  vertical-align:middle;
}

.hometank .price b {
  margin-left:2rem;
}

.hometank .priceS {
  font-size:93.8%;
  background-color:#fae061;
  color:#1e3241;
  font-weight:normal;
  display:inline-block;
  vertical-align:middle;
  line-height:1;
  padding:0.5em 0.5em 0.5em 0.75em;
  position:relative;
}

.hometank .priceS:after {
  width:0;
  height:0;
  content:"";
  display:inline-block;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
  border-right:1em solid transparent;
  border-left:1em solid #fae061;
  position:absolute;
  right:-2em;
  top:50%;
  margin-right:1px;
  transform:translateY(-50%);
}

.hometank p {
  padding-top:0.25rem;
}

@media print,screen and (min-width:641px) {
  .hometank {
    padding:1.5rem;
  }
  
  .hometank p { padding:0.25rem; }
}

@media screen and (max-width:640px) {
  .hometank {
    padding:1.25rem;
    width:640px;
  }
  
  .hometank .photo {
    max-width:35%;
    margin-top:0.25rem;
  }
  
  .hometank .price {
    display:block;
  }
}


/*----------------------------------------------------------------------------------------------------

  灯油配送ご注文
  
----------------------------------------------------------------------------------------------------*/
  
@media print,screen and (min-width:641px) {
  .order-warp {
    padding-top:60px;
  }
}

@media screen and (max-width:640px) {
  .order-warp {
    padding-top:2rem;
  }
}

.order-mess {
  text-align:center;
}

.order-mess .tel {
  display:inline-block;
  vertical-align:baseline;
  line-height:1;
}

.order-mess .tel a,
.order-mess .tel b {
  display:inline-block;
  vertical-align:middle;
}

.order-mess .tel b { margin-right:0.25rem; }

.order-mess .tel a:before {
  content:"";
  width:1.75rem;
  height:1.75rem;
  display:inline-block;
  background:url(../../image/icon/fDial-green.gif) no-repeat center center;
  background-size:contain;
  vertical-align:middle;
  margin-left:0.5rem;
  margin-right:0.5rem;
}

@media screen and (max-width:640px) {
  .order-mess { padding-top:0.25rem; }
}


/*-----------------------------------------------------------------------------------
  注意事項
-----------------------------------------------------------------------------------*/

.order-alartBox {
  border:1px solid #f1cf2b;
  background-color:#fefbea;
  box-sizing:border-box;
  padding:1.5rem;
}

@media print,screen and (min-width:641px) {
  .order-alartBox { margin-top:30px; margin-bottom:-10px; }
}

@media screen and (max-width:640px) {
  .order-alartBox { padding:1.25rem; margin-top:1.5rem; }
}


/*-----------------------------------------------------------------------------------
  フォーム
-----------------------------------------------------------------------------------*/

/* ホームタンク */
.fm_tank-select {
  box-sizing:border-box;
  background-image:url(../image/hometank_s.png);
  background-repeat:no-repeat;
  background-color:#f3f4f6;
}

@media print,screen and (min-width:641px) {
  .fm_tank-select {
    margin-bottom:40px;
    padding-top:1.75rem;
    padding-bottom:1.75rem;
    background-position:40px bottom;
    background-size:160px auto;
    padding-left:260px;
  }
  
  .fm_tank-select li { width:25%; }
}

@media screen and (max-width:640px) {
  .fm_tank-select {
    margin-bottom:1.75rem;
    padding-top:1.5rem;
    padding-bottom:1.5rem;
    background-position:10px bottom;
    background-size:150px auto;
    padding-left:180px;
  }
  
  .fm_tank-select li { width:40%; margin-right:1em !important; }
}


/*----------------------------------------------------------------------------------------------------

  お問い合わせ
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .inquiry-warp {
    padding-bottom:60px;
  }
}

@media screen and (max-width:640px) {
  .inquiry-warp {
    padding-bottom:2rem;
  }
}

.inquiry {
  text-align:center;
  border:2px solid #7fc688;
  box-sizing:border-box;
}

.inquiry .responBlock {
  padding-top:35px;
  padding-bottom:30px;
}

.inquiry .mail {
  margin-top:25px;
}

@media screen and (max-width:640px) {
  .inquiry .responBlock {
    width:640px;
    padding-top:1.75rem;
    padding-bottom:1.5rem;
  }
}