/* =========================
   LOADING
========================= */
/* =========================
   LOADING
========================= */

#loader{
  position:fixed;
  inset:0;
  background:#0f0f0f;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  z-index:9999;
  transition:opacity .5s ease;
}

#loader.fade-out{
  opacity:0;
}

#loader-canvas{
position:fixed;
inset:0;
width:100%;
height:100%;
z-index:1;
}


.loader-content{
  position:relative;
  z-index:2;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.loader-logo{
  font-size:48px;
  font-weight:700;
  color:#fff;
  margin-bottom:20px;
}

.loader-logo span{
  color:#ff6a00;
}

.loader-bar{
  width:250px;
  height:6px;
  background:rgba(255,255,255,0.1);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:15px;
}

.loader-fill{
  width:0;
  height:100%;
  background:#ff6a00;
  animation:loadBar 2s linear forwards;
}

.loader-text{
  color:#fff;
  display:flex;
  gap:2px;
  font-size:18px;
}

.loader-text .dot{
  opacity:.2;
  animation:waveDot 1s infinite;
}

.loader-text .dot:nth-child(2){animation-delay:.2s}
.loader-text .dot:nth-child(3){animation-delay:.4s}

#main-content{
  opacity:0;
  transition:opacity .4s ease;
}

#main-content.show{
  opacity:1;
}

@keyframes loadBar{
  0%{width:0}
  100%{width:100%}
}

@keyframes waveDot{
  0%,60%,100%{transform:translateY(0);opacity:.2}
  30%{transform:translateY(-5px);opacity:1}
}

#loader.fade-out { opacity:0; transition: opacity 0.5s ease; }
#main-content { opacity:0; transition: opacity 0.3s ease; }
#main-content.show { opacity:1; }

/* =========================
   スマホ
========================= */

@media (max-width:768px){

.loader-logo {
    font-size:32px;
    font-weight:700;
    color:#fff;
    margin-bottom:20px;
}

.loader-logo span { color:#ff6a00; }

.loader-bar { width:170px; height:5px; background: rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; margin-bottom:15px; }
.loader-fill { width:0; height:100%; background:#ff6a00; animation: loadBar 2s linear forwards; }
@keyframes loadBar { 0%{width:0} 100%{width:100%} }

.loader-text { color:#fff; display:flex; justify-content:center; gap:2px; font-size:16px; }
.loader-text .dot { opacity:0.2; transform: translateY(0); animation: waveDot 1s infinite; }
.loader-text .dot:nth-child(1){ animation-delay:0s }
.loader-text .dot:nth-child(2){ animation-delay:0.2s }
.loader-text .dot:nth-child(3){ animation-delay:0.4s }
@keyframes waveDot {
  0%,60%,100%{ transform:translateY(0); opacity:0.2 }
  30%{ transform:translateY(-5px); opacity:1 }
}

#loader.fade-out { opacity:0; transition: opacity 0.5s ease; }
#main-content { opacity:0; transition: opacity 0.3s ease; }
#main-content.show { opacity:1; }
}