/*初期設定*/
#loading-bg {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  opacity:0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}
#loading {
  z-index: 10001;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#loading .spinner {
  width: 32px;
  height: 32px;
  clear: both;
  margin: 20px auto;
}

/* Spinner LoadBar */
#loading .loadbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20%;
  margin: auto;

  width: 100px;
  height: 18px;
  border: 1px #ff6928 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%, transparent 50%, #ff6928 50%, #ff6928 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  -webkit-animation: spLoadBar 0.8s infinite linear;
  animation: spLoadBar 0.8s infinite linear;
}

#loading-bg-s {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  opacity:0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

#loading-s {
  z-index: 10001;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#loading-s .spinner {
  width: 32px;
  height: 32px;
  clear: both;
  margin: 20px auto;
}

/* Spinner LoadBar */
#loading-s .loadbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20%;
  margin: auto;

  width: 100px;
  height: 18px;
  border: 1px #ff6928 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%, transparent 50%, #ff6928 50%, #ff6928 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  -webkit-animation: spLoadBar 0.8s infinite linear;
  animation: spLoadBar 0.8s infinite linear;
}

@-webkit-keyframes spLoadBar {
  from {
  background-position: 0px 0px;
  }
  to {
  background-position: -20px 0px;
  }
}
@keyframes spLoadBar {
  from {
  background-position: 0px 0px;
  }
  to {
  background-position: -20px 0px;
  }
}

/*アニメーション*/
/* 予約ポップアップ用ローディング設定 */
#loading-pop-bg {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #fff;
  opacity:0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}
#loading-pop {
  z-index: 10001;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#loading-pop .spinner {
  width: 32px;
  height: 32px;
  clear: both;
  margin: 20px auto;
}

/* Spinner LoadBar */
#loading-pop .loadbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 18px;
  border: 1px #ff6928 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%, transparent 50%, #ff6928 50%, #ff6928 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  -webkit-animation: spLoadBar 0.8s infinite linear;
  animation: spLoadBar 0.8s infinite linear;
}