/*--------------------------------------------------------------------------
 close
---------------------------------------------------------------------------*/
.btn-close {
  display: block;
  width: 100px;
  height: auto;
  padding: 10px 20px;
  position: fixed;
  background: #bf9a77;
  z-index: 10;
  top: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
.btn-close {
  display: block;
  width: 60px;
  height: auto;
  padding: 5px 10px;
  position: fixed;
  background: #bf9a77;
  z-index: 10;
  top: 0;
  right: 0;
}
}

/*--------------------------------------------------------------------------
 header
---------------------------------------------------------------------------*/
header {
  width: 100%;
  height: 35px;
  position: relative;
}

header h1 img {
  display: block;
  width: 20%;
  max-width: 300px;
  height: auto;
  padding: 40px;
  position: relative;
  background: #fff;
  z-index: 10;
}

@media screen and (max-width: 1200px) {
header {
  width: 100%;
  height: 5px;
}
header h1 img {
  padding: 20px;
}
}

@media screen and (max-width: 768px) {
header h1 img {
  width: 150px;
  padding: 10px 15px;
}
}

/*--------------------------------------------------------------------------
 Main visual
---------------------------------------------------------------------------*/
#hero {
 width: 96.354%;
 width : -webkit-calc(100% - 70px);
 width : calc(100% - 70px);
 min-height: 800px;
 margin: 0 auto;
 position: relative;
}
#hero .hero-img {
 width: 100%;
 height: 100%;
 padding: 0;
 position: relative;
}
#hero .hero-img::before {
  content: "";
  width: 100%;
  height: 100%;
  height : -webkit-calc(100% - 70px);
  height : calc(100% - 70px);
  position: absolute;
  top: 0;
  left: 0;
  background: url(../chapel/img/omotesandou/hero.jpg) center bottom no-repeat;
  -webkit-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
}
  #sapporo #hero .hero-img::before {background: url(../chapel/img/sapporo/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #otaru #hero .hero-img::before {background: url(../chapel/img/otaru/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #sendai #hero .hero-img::before {background: url(../chapel/img/sendai/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omotesandou #hero .hero-img::before {background: url(../chapel/img/omotesandou/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #odaiba #hero .hero-img::before {background: url(../chapel/img/odaiba/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #shinagawa #hero .hero-img::before {background: url(../chapel/img/shinagawa/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #yokohama #hero .hero-img::before {background: url(../chapel/img/yokohama/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba #hero .hero-img::before {background: url(../chapel/img/chiba/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba_kaihin #hero .hero-img::before {background: url(../chapel/img/chiba_kaihin/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omiya #hero .hero-img::before {background: url(../chapel/img/omiya/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #urawa #hero .hero-img::before {background: url(../chapel/img/urawa/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #niigata #hero .hero-img::before {background: url(../chapel/img/niigata/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kanazawa #hero .hero-img::before {background: url(../chapel/img/kanazawa/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nagoya #hero .hero-img::before {background: url(../chapel/img/nagoya/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #osaka #hero .hero-img::before {background: url(../chapel/img/osaka/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kyoto #hero .hero-img::before {background: url(../chapel/img/kyoto/hero.jpg) center no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #mosaic #hero .hero-img::before {background: url(../chapel/img/mosaic/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nishinomiya #hero .hero-img::before {background: url(../chapel/img/nishinomiya/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okayama #hero .hero-img::before {background: url(../chapel/img/okayama/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #hiroshima #hero .hero-img::before {background: url(../chapel/img/hiroshima/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #matsuyama #hero .hero-img::before {background: url(../chapel/img/matsuyama/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #fukuoka #hero .hero-img::before {background: url(../chapel/img/fukuoka/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kumamoto #hero .hero-img::before {background: url(../chapel/img/kumamoto/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #miyazaki #hero .hero-img::before {background: url(../chapel/img/miyazaki/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okinawa #hero .hero-img::before {background: url(../chapel/img/okinawa/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #iledere #hero .hero-img::before {background: url(../chapel/img/iledere/hero.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
#hero .copy {
 width: 20%;
 max-width: 130px;
 position: absolute;
 top: -webkit-calc(7vw + 140px);
 top: calc(7vw + 140px);
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
}
#hero .discount {
 width: 225px;
 position: absolute;
 left: 1.5vw;
 bottom: 100px;
}
#hero .date {
 padding: 10px 30px;
 position: absolute;
 bottom: 30px;
 left: 0;
 background: #fff;
 font-family: kozuka-mincho-pr6n, serif;
 font-weight: 400;
 font-size: 13px;
 font-weight: bold;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #hero .hero-img::before {
  background: url(../chapel/img/omotesandou/hero@2x.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }

  #sapporo #hero .hero-img::before {background: url(../chapel/img/sapporo/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #otaru #hero .hero-img::before {background: url(../chapel/img/otaru/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #sendai #hero .hero-img::before {background: url(../chapel/img/sendai/hero@2x.jpg) center center no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omotesandou #hero .hero-img::before {background: url(../chapel/img/omotesandou/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #odaiba #hero .hero-img::before {background: url(../chapel/img/odaiba/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #shinagawa #hero .hero-img::before {background: url(../chapel/img/shinagawa/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #yokohama #hero .hero-img::before {background: url(../chapel/img/yokohama/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba #hero .hero-img::before {background: url(../chapel/img/chiba/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba_kaihin #hero .hero-img::before {background: url(../chapel/img/chiba_kaihin/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omiya #hero .hero-img::before {background: url(../chapel/img/omiya/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #urawa #hero .hero-img::before {background: url(../chapel/img/urawa/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #niigata #hero .hero-img::before {background: url(../chapel/img/niigata/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kanazawa #hero .hero-img::before {background: url(../chapel/img/kanazawa/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nagoya #hero .hero-img::before {background: url(../chapel/img/nagoya/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #osaka #hero .hero-img::before {background: url(../chapel/img/osaka/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kyoto #hero .hero-img::before {background: url(../chapel/img/kyoto/hero@2x.jpg) center no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #mosaic #hero .hero-img::before {background: url(../chapel/img/mosaic/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nishinomiya #hero .hero-img::before {background: url(../chapel/img/nishinomiya/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okayama #hero .hero-img::before {background: url(../chapel/img/okayama/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #hiroshima #hero .hero-img::before {background: url(../chapel/img/hiroshima/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #matsuyama #hero .hero-img::before {background: url(../chapel/img/matsuyama/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #fukuoka #hero .hero-img::before {background: url(../chapel/img/fukuoka/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kumamoto #hero .hero-img::before {background: url(../chapel/img/kumamoto/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #miyazaki #hero .hero-img::before {background: url(../chapel/img/miyazaki/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okinawa #hero .hero-img::before {background: url(../chapel/img/okinawa/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #iledere #hero .hero-img::before {background: url(../chapel/img/iledere/hero@2x.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
}

@media screen and (max-width: 1500px) {
 #hero .copy {
  max-width: 100px;
 }
}

@media screen and (max-width: 1200px) {
 #hero {
  width : 98%;
  width : -webkit-calc(100% - 10px);
  width : calc(100% - 10px);
  margin: 0 auto;
  padding: 0;
 }
 #hero .hero-img::before {
  height : -webkit-calc(100% - 10px);
  height : calc(100% - 10px);
          background-size: cover;
 }
}
@media screen and (max-width: 960px) {
 #hero { min-height: initial;}
 #hero .hero-img {
  width: 100%;
  height: 100%;
  padding: 0 0 5px;
  position: relative;
 }
 #hero .copy {
  width: 140px;
  max-width: initial;
 }
 #hero .discount { 
  bottom: 60px;
 }
 #hero .date {
  bottom: 0;
 }
}

@media screen and (max-width: 768px) {
  #hero .hero-img::before {
  height : -webkit-calc(100% - 10px);
  height : calc(100% - 10px);
  background: url(../chapel/img/omotesandou/hero-sp.jpg) center bottom no-repeat;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  }

  #sapporo #hero .hero-img::before {background: url(../chapel/img/sapporo/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #otaru #hero .hero-img::before {background: url(../chapel/img/otaru/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #sendai #hero .hero-img::before {background: url(../chapel/img/sendai/hero-sp.jpg) center center no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omotesandou #hero .hero-img::before {background: url(../chapel/img/omotesandou/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #odaiba #hero .hero-img::before {background: url(../chapel/img/odaiba/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #shinagawa #hero .hero-img::before {background: url(../chapel/img/shinagawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #yokohama #hero .hero-img::before {background: url(../chapel/img/yokohama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba #hero .hero-img::before {background: url(../chapel/img/chiba/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba_kaihin #hero .hero-img::before {background: url(../chapel/img/chiba_kaihin/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omiya #hero .hero-img::before {background: url(../chapel/img/omiya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #urawa #hero .hero-img::before {background: url(../chapel/img/urawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #niigata #hero .hero-img::before {background: url(../chapel/img/niigata/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kanazawa #hero .hero-img::before {background: url(../chapel/img/kanazawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nagoya #hero .hero-img::before {background: url(../chapel/img/nagoya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #osaka #hero .hero-img::before {background: url(../chapel/img/osaka/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kyoto #hero .hero-img::before {background: url(../chapel/img/kyoto/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #mosaic #hero .hero-img::before {background: url(../chapel/img/mosaic/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nishinomiya #hero .hero-img::before {background: url(../chapel/img/nishinomiya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okayama #hero .hero-img::before {background: url(../chapel/img/okayama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #hiroshima #hero .hero-img::before {background: url(../chapel/img/hiroshima/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #matsuyama #hero .hero-img::before {background: url(../chapel/img/matsuyama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #fukuoka #hero .hero-img::before {background: url(../chapel/img/fukuoka/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kumamoto #hero .hero-img::before {background: url(../chapel/img/kumamoto/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #miyazaki #hero .hero-img::before {background: url(../chapel/img/miyazaki/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okinawa #hero .hero-img::before {background: url(../chapel/img/okinawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #iledere #hero .hero-img::before {background: url(../chapel/img/iledere/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }

#hero .copy {
 width: 13%;
 max-width: initial;
 margin: 0 auto;
 position: absolute;
 top: 80px;
 left: 0;
 right: 0;
 -webkit-transform: none;
 -ms-transform: none;
 transform: none;
}
 #hero .discount { 
  display: none;
 }
#hero .date {
 padding: 10px;
 background: #fff;
 text-align: center;
 font-size: 11px;
 font-weight: bold;
 right: 0;
 bottom: -50px;
}
}

@media screen and (max-width: 425px) {
 #hero {}
 #hero .hero-img {
  width: 100%;
  height: 100%;
  min-height: initial;
  padding: 49px 0 5px;
  position: relative;
 }
 #hero .hero-img::before {
  height : -webkit-calc(100% - 10px);
  height : calc(100% - 10px);
  background: url(../chapel/img/omotesandou/hero-sp.jpg) center bottom no-repeat;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
 }
 
  #sapporo #hero .hero-img::before {background: url(../chapel/img/sapporo/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #otaru #hero .hero-img::before {background: url(../chapel/img/otaru/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #sendai #hero .hero-img::before {background: url(../chapel/img/sendai/hero-sp.jpg) center center no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omotesandou #hero .hero-img::before {background: url(../chapel/img/omotesandou/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #odaiba #hero .hero-img::before {background: url(../chapel/img/odaiba/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #shinagawa #hero .hero-img::before {background: url(../chapel/img/shinagawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #yokohama #hero .hero-img::before {background: url(../chapel/img/yokohama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba #hero .hero-img::before {background: url(../chapel/img/chiba/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #chiba_kaihin #hero .hero-img::before {background: url(../chapel/img/chiba_kaihin/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #omiya #hero .hero-img::before {background: url(../chapel/img/omiya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #urawa #hero .hero-img::before {background: url(../chapel/img/urawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #niigata #hero .hero-img::before {background: url(../chapel/img/niigata/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kanazawa #hero .hero-img::before {background: url(../chapel/img/kanazawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nagoya #hero .hero-img::before {background: url(../chapel/img/nagoya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #osaka #hero .hero-img::before {background: url(../chapel/img/osaka/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kyoto #hero .hero-img::before {background: url(../chapel/img/kyoto/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #mosaic #hero .hero-img::before {background: url(../chapel/img/mosaic/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #nishinomiya #hero .hero-img::before {background: url(../chapel/img/nishinomiya/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okayama #hero .hero-img::before {background: url(../chapel/img/okayama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #hiroshima #hero .hero-img::before {background: url(../chapel/img/hiroshima/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #matsuyama #hero .hero-img::before {background: url(../chapel/img/matsuyama/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #fukuoka #hero .hero-img::before {background: url(../chapel/img/fukuoka/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #kumamoto #hero .hero-img::before {background: url(../chapel/img/kumamoto/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #miyazaki #hero .hero-img::before {background: url(../chapel/img/miyazaki/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #okinawa #hero .hero-img::before {background: url(../chapel/img/okinawa/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
  #iledere #hero .hero-img::before {background: url(../chapel/img/iledere/hero-sp.jpg) center bottom no-repeat;
    -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
  }
}

/*--------------------------------------------------------------------------
about
---------------------------------------------------------------------------*/
#about .top {

}
#about .top h2 {
  margin : 20px 0 15px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
#about .top h2 + p {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}

#about .cont {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

#about .cont .title {
  width: 90%;
  max-width: 700px;
  margin: 60px auto 30px;
  position: relative;
  text-align: center;
}

#about .cont .title::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  background: #ccc;
}

#about .cont .title h3 {
  display: inline-block;
  padding: 0 20px;
  background: #fff;
  position: relative;
  z-index: 10;
}

#about .cont ul.gallery {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

#about .cont ul.gallery li {
  margin-bottom: 1.25%;
  max-width: 32.3333%;
  flex: 0 1 32.3333%;
}
#about .cont ul.gallery li a {
  position: relative;
}
#about .cont ul.gallery li a .hit {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1200px) {
  #about .top h2 {
    margin: 60px 0 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
}

@media screen and (max-width: 768px) {
  #about .top h2 {
    margin: 30px 0 10px;
    font-size: 18px;
  }
  #about .top h2 + p {
    width: 90%;
    margin: 0 auto;
    font-size: 13px;
    text-align: left;
    line-height: 2em;
  }
  #about .top h2 + p br {
    display: none;
  }
  #about .cont {
    width: 100%;
  }
  #about .cont .title {
    margin: 40px auto 30px;
  }
  #about .cont .photo .title {
    margin: 60px auto 30px;
  }
  #about .cont .title h3 {
    font-size: 15px;
  }
  #about .cont ul.gallery li {
    margin-bottom: 0;
    max-width: 50%;
    flex: 0 1 50%;
  }
}

/*--------------------------------------------------------------------------
access
---------------------------------------------------------------------------*/
#access {

}
#access .title{
  margin: 80px 0 40px;
  text-align: center;
}
#access .title span {
  display: block;
  margin-bottom: 5px;
  font-size: 30px;
  letter-spacing: 0.15em;
}
#access .title h2 {
  font-size: 12px;
}

#access .place {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

#access .place .map {
  max-width: 49%;
  flex: 0 1 49%;
}
#access .place .map iframe {
  width: 100%;
}
#access .place .cover {
  max-width: 49%;
  flex: 0 1 49%;
  background: url(../chapel/img/omotesandou/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover;
    -o-background-size: cover;
       background-size: cover;
}
#sapporo #access .place .cover {background: url(../chapel/img/sapporo/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#otaru #access .place .cover {background: url(../chapel/img/otaru/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#sendai #access .place .cover {background: url(../chapel/img/sendai/salon.jpg) center center no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#omotesandou #access .place .cover {background: url(../chapel/img/omotesandou/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#odaiba #access .place .cover {background: url(../chapel/img/odaiba/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#shinagawa #access .place .cover {background: url(../chapel/img/shinagawa/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#yokohama #access .place .cover {background: url(../chapel/img/yokohama/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#chiba #access .place .cover {background: url(../chapel/img/chiba/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#chiba_kaihin #access .place .cover {background: url(../chapel/img/chiba_kaihin/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#omiya #access .place .cover {background: url(../chapel/img/omiya/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#urawa #access .place .cover {background: url(../chapel/img/omiya/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#niigata #access .place .cover {background: url(../chapel/img/niigata/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#kanazawa #access .place .cover {background: url(../chapel/img/kanazawa/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nagoya #access .place .cover {background: url(../chapel/img/nagoya/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#osaka #access .place .cover {background: url(../chapel/img/osaka/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#kyoto #access .place .cover {background: url(../chapel/img/kyoto/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#mosaic #access .place .cover {background: url(../chapel/img/mosaic/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nishinomiya #access .place .cover {background: url(../chapel/img/nishinomiya/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#okayama #access .place .cover {background: url(../chapel/img/okayama/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#hiroshima #access .place .cover {background: url(../chapel/img/hiroshima/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#matsuyama #access .place .cover {background: url(../chapel/img/matsuyama/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#fukuoka #access .place .cover {background: url(../chapel/img/fukuoka/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#kumamoto #access .place .cover {background: url(../chapel/img/kumamoto/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#miyazaki #access .place .cover {background: url(../chapel/img/miyazaki/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#okinawa #access .place .cover {background: url(../chapel/img/okinawa/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}
#iledere #access .place .cover {background: url(../chapel/img/iledere/salon.jpg) center bottom no-repeat;
  -webkit-background-size: cover; -o-background-size: cover; background-size: cover;
}

@media screen and (max-width: 768px) {
#access .title {
  margin: 50px 0 20px;
}
#access .title span {
  margin-bottom: 2px;
  font-size: 24px;
  letter-spacing: 0.1em;
}
#access .place {
  width: 90%;
  max-width: 900px;
  height: 200px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
#access .place .map iframe {
  height: 200px;
}
}

#access table {
  width: 90%;
  max-width: 900px;
  margin: 40px auto 0; 
  border-top: 1px solid #d3d3d3;
}
#access table td {
  width: calc(100% - 220px);
  padding: 5%;
  border-bottom: 1px solid #d3d3d3;
  font-size: 14px;
  line-height: 1.8em;
}
#access table td.title {
  width: 200px;
  padding: 0;
  position: relative;
  vertical-align: middle;
}
#access table td.title br {
  display: none;
}

#access table td.title::after {
  content: "";
  display: block;
  width: 1px;
  height: 70%;
  background: #d3d3d3;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
}
#access table td .tel {
  display: block;
  margin-bottom: 5px;
  font-size: 30px;
  line-height: 30px;
}

@media screen and (max-width: 900px) {
#access table {
  margin: 30px auto 0; 
}
}

@media screen and (max-width: 768px) {
#access table {
  margin: 20px auto 0; 
}
#access table td {
  width: calc(100% - 110px);
  padding: 15px;
  font-size: 12px;
  line-height: 1.6em;
}
#access table td.title {
  width: 90px;
}
#access table td.title br {
  display: block;
}
#access table td .tel {
  margin-bottom: 5px;
  font-size: 20px;
  line-height: 20px;
}
}

#access .contact {
  margin: 60px 0 100px;
  text-align: center;
}
#access .contact ul {
  width: 90%;
  max-width: 640px;
  margin: 20px auto 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: center;
}
#access .contact ul li.online {
  max-width: 100%;
  flex: 0 1 100%;
  margin-bottom: 20px;
  background: #bf9a77;
  border-radius: 100px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#access .contact ul li.online:hover {
  background: #525252;
}
#access .contact ul li.back {
  max-width: 100%;
  flex: 0 1 100%;
  background: #999;
  border-radius: 100px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
#access .contact ul li.back:hover {
  background: #525252;
}
#access .contact ul li a {
  display: block;
  width: 100%;
  padding: 30px 0;
  color: #fff;
}

@media screen and (max-width: 768px) {
  #access .contact {
    margin: 30px 0 40px;
  }
  #access .contact p {
    font-size: 13px;
  }
  #access .contact ul {
    margin: 10px auto 0;
  }
  #access .contact ul li a {
    display: block;
    width: 100%;
    padding: 20px 0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
  }
  #access .contact ul li.online {
    margin-bottom: 10px;
  }
}