@charset "UTF-8";

/* =========================================================
 ベース設定
========================================================= */
html, body {
    height: 100%;
}

/* 地図 */
#map_canvas {
  width: 100%;
/*  height: -moz-calc(100% - 93px);
  height: -webkit-calc(100% - 93px);
  height: calc(100% - 93px);*/
  z-index: 1;
}

.header {
  width: 100%;
  border-bottom: solid 1px #ccc;
  position: relative;
  z-index: 2;
}

/* いまどこロゴ */
#imadokoLogo {
}
#imadokoLogo img{
  height: inherit;
} 

/* イベントのロゴ */
#eventLogo {
/*  position: fixed;*/
}
#eventLogo img {
 height: inherit; 
}
/* ゲストランナー */
#guest{
  position: relative;
  z-index: 3;
}

/* 現在地ボタン. */
#mylocation {
  position: fixed;
  z-index: 2;
}

/* 更新アニメーション */
.loader_box{
  z-index: 4;
}

/* ポップアップ */
#infoPopup {
  z-index: 2;
  display: none;
  text-align: center;
  min-height: 50px;
  padding: 15px;
  position: absolute;
  background-color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
  -moz-box-shadow: 0px 0px 9px #999;
  -webkit-box-shadow: 0px 0px 9px #999;
  box-shadow: 0px 0px 9px #999;
  /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}

/* clearfix -----------------> */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.clearfix {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* <------------------------ */

/* =========================================================
 レスポンシブ設定
========================================================= */

/* ----- スマートフォン or タブレット ----- */

@media (max-width: 1023px) {
  /* 地図 */
  #map_canvas {
/*    height: -moz-calc(100% - 56px - 80px);
    height: -webkit-calc(100% - 56px - 80px);
    height: calc(100% - 56px - 80px);*/
  }
  .header {
    height: 56px;
  }

  /* ハンバーガーメニュー */
  .menu-button {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: 14px;
    top: 15px;
  }
  .menu-button i {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background: #aaa;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
    position: relative;
    left: 5px;
    top: 14px;
  }
  .menu-button i:before, .menu-button i:after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background: #aaa;
    position: absolute;
    transform: rotate(0deg);
    transition: all 0.3s !important;
  }
  .menu-button i:before {
    -webkit-transform: translateY(8px);
    -ms-transform: translateY(8px);
    transform:translateY(8px);
  }
  .menu-button i:after {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform:translateY(-8px);
  }


  /* 現在地ボタン. */
  #mylocation {
    position: fixed;
    bottom: 112px;
    right: 10px;
    /* background: white url("http://www.imadokoplus.com/guest/mylocation@2x.png") no-repeat center; */
    background: white url("../../../guest/mylocation@2x.png") no-repeat center;
    background-size: 16px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }
  #mylocation:active{
    background-color: rgb(250, 250, 250);
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.5);
  }

  /* ゲストの現在地ボタン */
  #guest{
    border-top: solid 1px #ccc;
  }

  #guest_box {
    margin: 0 auto;
    width: 96%;
  }

  #guest_controller.mask {
    float: left;
    /*width: calc(100% - 52px);*/
    margin: 8px auto 0;
    overflow-x: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
  }

  #guest_list{
    display: inline-table;
    max-width: 100%;
    padding-left: 0;
    margin-bottom: 0;
  }

  #guest_list li {
    display: table-cell;
    padding-right: 10px;
  }

  #guest_list img {
    width: 60px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  }

  .guest_scroll_btn {
    display: block;
    float: left;
    width: 20px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
  }

  #scroll_left.guest_scroll_btn {
    margin-right: 6px;
    margin-top: 18px;
  }
  #scroll_right.guest_scroll_btn {
    margin-left: 6px; 
    margin-top: 18px;
  }
  /* 矢印 */
  .arrow{
    position: relative;
  }
  .arrow::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
    
  }
  .arrow-left::after{
    border-bottom: 2px solid #2C76B3;
    border-left: 2px solid #2C76B3;
  }
  .arrow-right::after{
    border-top: 2px solid #2C76B3;
    border-right: 2px solid #2C76B3;
    margin-right: 5px;
  }

  /* ヘッダーメニュー */
  #header_nav {
    position: absolute;
    top: -38px;
    z-index: 1;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
  }
  #header_nav_menu {
    height: 94px;
    text-align: right;
  }
  .header_nav_list {
    /* padding: 12px 20px 12px 0; */
    padding: 12px;
    margin: 0 16px;
  }

  /* 更新間隔 */
  #interval_selector {
    border-bottom: 1px solid #ccc;
  }
  #interval_selector span{
    color: white;
  }
  #interval_btn {
  }

  /* 更新ボタン */
  #reload {
    /* background: white url("http://www.imadokoplus.com/guest/reload@2x.png") no-repeat center; */
    background: white url("../../../guest/reload@2x.png") no-repeat center;
    background-size: 16px;
    position: fixed;
    bottom: 168px;
    right: 10px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.8);
    text-align: center;
  }
/*   #reload:hover{
  background-color: blue;
} */
  #reload:active{
    background-color: rgb(250, 250, 250);
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.5);
  }
  #reload img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 10px auto;
  }

  /* ポップアップ */
  #infoPopup {
    width: 70%;
    top: 40%;
    left: 15%;
  }

  /* 吹き出し */
  #balloon {
    display: none;
    position: absolute;
    bottom: 87px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #888;
    background-color: white;
    padding: 10px 15px;
    font-size: small;
    z-index: 5;
  }
  
  #balloon:before {
    content: ' ';
    position: absolute;
    border: 8px solid transparent;
    border-top-color: white;
    bottom: -14px;
    margin-left: -10px;
    z-index: 5;
  }

  #balloon:after {
    content: ' ';
    position: absolute;
    border: 8px solid transparent;
    border-top-color: #888;
    bottom: -16px;
    margin-left: -10px;
  }

  #instagram {
    position: fixed;
    bottom: 224px;
    right: 10px;
    background: white url(../../../guest/instagram@2x.png) no-repeat center;
    background-size: 16px;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 2;
  }

}
/* 
----- タブレット -----

@media (min-width: 768px) {
     
}

 */


/* ----- デスクトップ ----- */

@media (min-width: 1024px) {
  /* 地図 */
  #map_canvas {
    width: 100%;
    top: 80px;
    height: -moz-calc(100% - 83px - 80px);
    height: -webkit-calc(100% - 83px - 80px);
    height: calc(100% - 83px - 80px);
    z-index: 1;
  }
  .header {
    height: 83px;
  }

  /* 現在地ボタン. */
  #mylocation {
    position: fixed;
    bottom: 200px;
    right: 10px;
    background: white url("../../../guest/mylocation@2x.png") no-repeat center;
    background-size: 16px;
    border-radius: 2px;
    width: 40px;
    height: 40px;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }

  /* ゲストの現在地ボタン */
  #guest{
/*    position: absolute;
    top: 83px;
    width: 100%;*/

    position: absolute;
    top: 83px;
    width: 100%;
    overflow-y: hidden;
    height: 78px;
  }

  #guest_box {
    margin: 0 auto;
    width: 95%;
  }

  #guest_controller.mask {
    float: left;

    /*width: 90%;*/
    width: calc(100% - 92px);
    margin: 8px auto;
    overflow-x: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
  }

  #guest_list{
    display: inline-table;
    max-width: 100%;
    padding-left: 0;
  }

  #guest_list li {
    display: table-cell;
    padding-right: 10px;
  }

  #guest_list img {
    width: 60px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    cursor: pointer;
  }
  
  .guest_scroll_btn {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
  }
  .guest_scroll_btn:hover {
    background-color: #B1DCFF;
  }
  #scroll_left.guest_scroll_btn {
    margin-right: 6px;
    margin-top: 18px;
  }
  #scroll_right.guest_scroll_btn {
    margin-left: 6px; 
    margin-top: 18px;
  }
  /* 矢印 */
  .arrow{
    position: relative;
  }
  .arrow::after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
    
  }
  .arrow-left::after{
    border-bottom: 2px solid #2C76B3;
    border-left: 2px solid #2C76B3;
  }
  .arrow-right::after{
    border-top: 2px solid #2C76B3;
    border-right: 2px solid #2C76B3;
    margin-right: 5px;
  }


/*  #guest_controller {
    position: fixed;
    top: 10px;
    right: 160px;
  }

  #guest_controller li {
    display: inline-block;
    width: 60px;
    cursor: pointer;
    margin-right: 6px;
  }

  #guest_controller img {
    width: 60px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2);
  }*/

  .caption {
    text-align: center;
    font-weight: bold;
    color: #3f3f3f;
  }

  /* 更新間隔 */
  #header_nav {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 4;
  }

  #interval_btn {
    float: left;
  }

  /* 更新時間セレクトボックス */  
  #interval_selector {
    position: fixed;
    right: 188px;
    top: 15px;
  }

  /* 更新ボタン */
  #interval_btn {
    position: fixed;
    right: 34px;
    top: 10px;
  }

  #reload {
    /* background: white url("http://www.imadokoplus.com/guest/reload@2x.png") no-repeat top 5px right 14px; */
    background: white url("../../../guest/reload@2x.png") no-repeat top 5px right 14px;
    background-size: 16px;
    border-radius: 5px;
    width: 125px;
    height: 28px;
    box-shadow: 0px 1px 4px 0px rgb(55, 139, 162);
    cursor: pointer;
    padding-top: 3px;
    color: red;
  }
  #reload:hover{
    color: #20B7D6;
  }
  #reload:active{
    box-shadow: 0px 0px 2px 0px rgb(55, 139, 162);
    margin-top: 2px;
  }
  #reload span {
    left: 0;
    padding-left: 10px;
    text-align: left;
    display: block;
  }

  /* ポップアップ */
  #infoPopup {
    width: 400px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
  }

  /* 吹き出し */
  #balloon {
    display: none;
    position: absolute;
    top: 170px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #888;
    background-color: white;
    padding: 10px 15px;
    font-size: small;
    z-index: 5;
  }
  
  #balloon:before {
    content: ' ';
    position: absolute;
    border: 6px solid transparent;
    border-bottom-color: white;
    top: -12px;
    left: calc(50% + 2px);
    margin-left: -10px;
    z-index: 5;
  }

  #balloon:after {
    content: ' ';
    position: absolute;
    border: 8px solid transparent;
    border-bottom-color: #888;
    top: -16px;
    left: 50%;
    margin-left: -10px;
  }

  #instagram {
    display: none;
  }
}