@charset "UTF-8";

@import url(../web-biz/common/css/_settings.css);

/* ================================================================================

  "AGL Group Site" Index PC Styles

================================================================================ */

/*
  Loader
-------------------------------------------------------------------------------- */
.loader-unit {
  position: fixed;
  z-index: 998;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: var(--wht);
  transition: all .75s;
  opacity: 1;
  visibility: visible;
}
.loader-unit.is-active {
  opacity: 0;
  visibility: hidden;
}
.loader {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  background-color: var(--d-blue);
  transition: all .75s;
  opacity: 0;
  visibility: hidden;
}
.loader.is-active {
  opacity: 1;
  visibility: visible;
}
.loader-logo {
  position: relative;
  z-index: 1000;
  transition: all .25s;
  opacity: 0;
  visibility: hidden;
}
.loader-logo.is-active {
  opacity: 1;
  visibility: visible;
}

.loader-logo svg {
  width: 300px;
  height: auto;
}

@media screen and (max-width:1920px) {
  .loader-logo svg { width: 15.625vw; }
}

@media screen and (max-width:1440px) {
  .loader-logo svg { width: 20vw; }
}

@media screen and (max-width:768px) {
  .loader-logo svg { width: 30vw; }
}

@media screen and (max-width:640px) {
  .loader-logo svg { width: 35vw; }
}

@media screen and (max-width:480px) {
  .loader-logo svg { width: 40vw; }
}

/*
  SVG Animation
-------------------------------------------------------------------------------- */
#mask path {
  fill-opacity: 0; /* 最初は透過0で見えない状態 */
  transition: fill-opacity .5s; /* カラーがつく際のアニメーション0.5秒で変化 */
  fill: none; /* 塗りがない状態 */
  stroke: var(--wht); /* 線の色 */
}
#mask.done path {
  fill: var(--wht); /* 塗りの色 */
  fill-opacity: 1; /* 透過1で見える状態 */
  stroke: none; /* 線の色なし */
}