/* ローディング */
:root {
  --loading_color_background: #fff;
  --loading_color_bar1: transparent;
  --loading_color_bar2: transparent;
  --loading_color_bar3: transparent;
  --loading_color_barbg: transparent;
  --loading_color_text: #3a64c9;
  --loading_text:
  "";
  --loading_url:
  "";
}
#progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background-color: var(--loading_color_background);
}
#progress > #progress_text {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 1px;
  width: 100%;
  color: var(--loading_color_text);
  text-align: center;
  font-size: 24px;
  transform: translate(-50%,-50%);
}
#progress > #progress_text::after{
  content: '';
  position: absolute;
  top: -240px;
  left: 0;
  right: 0;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  background: url(/files/loading.gif) no-repeat;
}
#progress > #progress_text::before {
  position: relative;
  margin-right: 3%;
  padding-right: 3%;
  border-right: solid 2px #3a64c9;
  content: "LOADING";
  font-size: 24px;
}
#progress > #progress_bar {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 100%;
  height: 2px;
  background-color: var(--loading_color_barbg);
  transform: translate(-50%,-50%);
}
#progress > #progress_bar > p {
  width: 0;
  height: 100%;
  background-color: var(--loading_color_bar1);
  transition: width 1.0s cubic-bezier(0.4, 0.4, 0, 1);
}