@charset "UTF-8";
#container {
  opacity: 0;
  /* transition-delay（0.5s）を追加して、loaderが消え始めてから少し遅れて出すと高級感が出ます */
  -webkit-transition: opacity 1.8s ease 0.5s;
  transition: opacity 1.8s ease 0.5s;
}

/* ローディングが終わったらこのクラスを付けて表示させる */
#container.is-loaded {
  opacity: 1;
}

/* 2回目以降（htmlに .is-visited が付いたとき）の特別ルール */
.is-visited #container {
  opacity: 1 !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/* --- 2. ローディング画面（被せもの） --- */
/* JSオフ環境ではローディングを出さない（思いやり） */
.no-js #loader {
  display: none !important;
}

/* 基本は非表示（2回目以降もこれに該当する） */
#loader {
  display: none;
}

#loader.is-visible {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /*SP等アドレスバーを含めた高さ*/
  background-color: var(--color-main); /* 背景 */
  z-index: 99999;
  opacity: 1; /* 初期状態は不透明 */
  visibility: visible; /* visibleに設定しておいて、visibilityにもアニメーションさせることでふわっと感をより強調 */
  -webkit-transition: opacity 2s ease, visibility 2s;
  transition: opacity 2s ease, visibility 2s; /* 2秒かけてふわっと消える設定(opacityとvisibilityは同じ秒数で！) */
}

.loader-inner {
  text-align: center;
}

/* --ローディング画面自体が消える時のクラス-- */
#loader.is-hide {
  opacity: 0;
  visibility: hidden; /*loaderにvisibilityを付与しているのでこちらで見えなくする設定が必要*/
  pointer-events: none; /* これがないと、下のコンテンツがクリックできない */
}

/* 文字の初期状態 */
.loading-text {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 2s ease, -webkit-transform 2s ease;
  transition: opacity 2s ease, -webkit-transform 2s ease;
  transition: opacity 2s ease, transform 2s ease;
  transition: opacity 2s ease, transform 2s ease, -webkit-transform 2s ease;
  width: 100%; /*画像のサイズ*/
  max-width: 200px;
}

/* 親に .is-animating が付いたら、文字を浮かび上がらせる */
#loader.is-animating .loading-text {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* CSS部分：バーの見た目と動き */
.loading-bar-wrap {
  width: 200px; /* バーの横幅 */
  height: 1px; /* バーの太さ */
  /*background: #eee;      バーの下地の色 */
  margin: 20px auto 0; /* 文字との間隔 */
  overflow: hidden;
  position: relative;
  opacity: 0; /* 最初は隠しておく */
  -webkit-transition: opacity 1.5s ease;
  transition: opacity 1.5s ease;
}

/* 文字がアクティブになったらバーも表示 */
#loader.is-animating .loading-text + .loading-bar-wrap {
  opacity: 1;
}

/* --- バーの演出（delayで時間差を作る） --- */
.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-whitetrans), 0.8); /* バーの色 */
  -webkit-transform: scaleX(0);
          transform: scaleX(0); /* 最初は長さゼロ */
  -webkit-transform-origin: left;
          transform-origin: left;
  /* transitionに「0.8s」のディレイ（待機時間）を追加 */
  -webkit-transition: -webkit-transform 1.5s ease 0.8s;
  transition: -webkit-transform 1.5s ease 0.8s;
  transition: transform 1.5s ease 0.8s;
  transition: transform 1.5s ease 0.8s, -webkit-transform 1.5s ease 0.8s; /* 1.5秒かけて伸びる */
}

/* 文字がアクティブになったらバーを伸ばす */
#loader.is-animating .loading-text + .loading-bar-wrap .loading-bar {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}