/*  
    ローディング画面の背景
--------------------------------------------------------------------------*/
#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #56d6ff99;
  z-index: 9999999999999999999999;
  visibility: hidden;
}
#loading .inner{
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
#loading .inner .card{
  background: #FFF;
    width: 90%;
    max-width: 360px;
    margin: 0 auto;
    padding: 30px 20px 30px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    position: relative;
    gap: 15px;
}
#loading .inner .card img{
  width: 80px;
  height: 80px;
}
#loading .inner .card p{
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #333;
}
#loading.loading{
  visibility: visible;
}

@media screen and (max-width: 320px) {
  #loading .inner .card{
    width: 90%;
  }
  #loading .inner .card img{
    width: 64px;
    height: 64px;
  }
  #loading .inner .card p{
    font-size: 14px;
  }
}