@charset "utf-8";

body {
  font-family: メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  background-color: #eee;
}

html, body, #map {
    height: 100%;
    width: 100%;
}

a:visited{
  color: inherit;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* sub-content*/
.sub-content {
  margin: 10px 0;
}

/* button */
.change-area {
  z-index: 1000;
  position: absolute;
  top: 80px;
  right: 0;
}

.change-area button {
  border-top: 1px solid #c3c3c3;
  border-right: none;
  border-bottom: 1px solid #c3c3c3;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  margin: 5% 0;
  display: block;
  width: 65px;
  line-height: 1.5em;
  padding: 2px 0;
}

/* tab */
.tab{
  overflow:hidden;
}
.tab li{
  background:#fff;
  float:left;
  width: 50%;
  padding: 15px 0;
  text-align: center;

}
.tab li.select{
  background:#f99cbe;
  color: #fff;
}
.content li{
  padding: 10px 0;
  width: 100%;
}
.hide {
  display:none;
}

.sel-serch-type {
  text-align: center;
}

.sel-serch-type a {
    width: 80%;
    margin: 30px 0;
    font-size: 18px;
    background-color: #FBCFCF;
    line-height: 1.5em;
    color: #fff;
    border: none;
    padding: 10px;
    box-shadow: 0 1px 2px 2px #c3c3c3;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
}

#content-map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin-top: 50px;
  margin-bottom:50px;
}

#dtl-info {
  width: 100%;
  height: 100px;
  background-color: #fafafa;
  position: absolute;
  bottom: 50px;
  z-index: 1000;
}

#dtl-info > .header {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid pink;
  margin-bottom: 5px;
}
#dtl-info > .header > span {
  float: left;
  color: #666;
  padding-left: 6px;
  font-size: 14px;
  line-height: 1.5em;
}

#dtl-info > .header > button {
  border: none;
  background-color: #fafafa;
  color: #666;
  float: right;
  font-size: 14px;
}

#dtl-info > .content {
  height: 80px;
  width: 100%;
}

#dtl-info > .content > .left {
  display: inline-block;
  width: 74%;
  /* background: #eee; */
  vertical-align: top;
}

#dtl-info > .content > .left > p {
}


#dtl-info > .content > .right {
  display: inline-block;
  width: 23%;
}

#dtl-info > .content > .right > a {
  height: 60px;
  background-color: #fbcfcf;
  width: 100%;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 5px;
  color: #666;
}

.open-routing {
  height: 32px;
}

.popup-custom .leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 0px;
  min-width: 180px;
  max-width: 300px;
}

.popup-custom .shop-info {
  margin-bottom: 15px;
  text-align: center;
}

.popup-custom .shop-title {
  color: #333;
  margin-bottom: 10px;
}

.shop-route {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: #25a2d4;
  padding: 5% 0;
  color: #fff !important;
}

.bl-red { border-left: 5px solid #FF0000;}
.bl-orange { border-left: 5px solid #FF8C00;}
.bl-yellow { border-left: 5px solid #FFFF00;}
.bl-green { border-left: 5px solid #00FF7F;}
.bl-blue { border-left: 5px solid #40aadd;}
.bl-violet { border-left: 5px solid #8A2BE2;}
.bl-gley { border-left: 5px solid #c3c3c3;}

.bl-btn-off {
  opacity: 0.8;
}

header {
  height: 50px;
  background-color: #8DCCAD;
  /* border-bottom: 2px solid #f99cbe; */
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
  position: fixed;
  top:0;
  overflow: hidden;
  width: 100%;
  display: table;
}

/*
header > h1 {
  padding: 4px;
}
*/
header h1 img {
  position: relative;
  top: 6px;
}

header .left {
  width: 15%;
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
}

header .left a,
header .left a:visited{
  color: #fff;
}

header .center {
  width: 65%;
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
}

header .right {
  width: 15%;
  display: inline-block;
  display: table-cell;
  vertical-align: middle;
}

footer {
  height: 50px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

#other-info {
    position: absolute;
    bottom: 50px;
    height: 15px;
    /* width: 100%; */
    /* background: rgba(255, 255, 255, 0.7); */
    float: left;
    padding: 0 5px;
    color: #333;
    font-size: 11px;
    line-height: 1.3em;
    z-index: 1000;
}

#other-info > a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  color: #0078A8;
}

.leaflet-marker-pane .awesome-marker i {
  font-size: 18px;
  margin-top: 18px;
}

.leaflet-marker-pane .svg-inline--fa {
  vertical-align: -1.1em;
}

.mt-20per {
  margin-top : 20% !important;
}

.f-size-15 {
  font-size: 15px;
}
@media screen and ( min-width:768px )
{

  header .left { width: 5%;}
  header .center {width: 75%;}
  header .right {width: 5%;}

  .change-area button {
    font-size: 16px;
    width: 80px;
  }
}

@media screen and ( min-width:1025px )
{

/*  #content-map { margin-bottom:100px;} */

/*  footer { height: 100px; } */
}