@charset "UTF-8";
/* CSS Document */

/* ローディング全体 */
.loader-wrap {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 表示後に非表示 */
body.loaded .loader-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 中央のローディング本体 */
.loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ローディングバー：左から右に伸びる */
.loading-bar {
  width: 0;
  height: 1px;
  background-color: #2d2721;
  transition: width 1.2s ease;
  opacity: 1;
  margin-bottom: 40px;
  align-self: flex-start; /* 左から伸びる */
  position: absolute;
  top: 50%;
  left: calc(50% - 100px);
}

/* 非表示化（フェードアウト） */
.loading-bar.done {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* SVGの初期状態 */
.loader svg {
  width: 180px;
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* SVGの描画開始時に表示 */
.loader svg.active {
  opacity: 1;
}

/*----------------------------------*/
/*SVGのサイズ*/
.loader svg {
  width: 180px;
  height: auto;
}

svg .svg-elem-1 {
  stroke-dashoffset: 2259.4658203125px;
  stroke-dasharray: 2259.4658203125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(45, 39, 33);
}