/* :root { */
/* アイコンカラー */
/* --tcd-preloader-icon-color: #ffffff; */
/* ロゴ */
/* --tcd-preloader-logo-size-pc: ;
  --tcd-preloader-logo-size-sp: ; */
/* キャッチフレーズ */
/* --tcd-preloader-catch-font-size-pc: ;
  --tcd-preloader-catch-font-size-sp: ;
  --tcd-preloader-catch-font-color: ;
  --tcd-preloader-catch-font-type: ; */
/* 背景色 */
/* --tcd-preloader-bg-color: #000000;
  --tcd-preloader-before-bg-color: #000000; */
/* アニメーション */
/* --tcd-preloader-animation-after-opacity: ;
  --tcd-preloader-animation-after-clip: ; */
/* } */

.c-preloader {
  position: fixed;
  inset: 0;
  z-index: calc(infinity);
  display: grid;
  align-content: center;
  place-items: center;
  text-align: center;
  row-gap: 50px;
  padding: 20px;
  background: var(--tcd-preloader-bg-color);
  clip-path: inset(0 0 0 0);
  transition: opacity 0.5s ease, clip-path 1s cubic-bezier(0.86, 0, 0.07, 1);
}

.c-preloader.is-end {
  pointer-events: none;
  opacity: var(--tcd-preloader-animation-after-opacity);
  clip-path: var(--tcd-preloader-animation-after-clip);
}

.c-preloader-spacer {
  margin-top: -100px;
  transition: margin 1s 0s cubic-bezier(0.23, 1, 0.32, 1);
}

.is-end+.c-preloader-spacer {
  margin-top: 0;
}


/* icon */
.c-preloader__icon {
  display: grid;
  font-size: 60px;
  color: var(--tcd-preloader-icon-color);
}

/* logo & catch */
.c-preloader__logo {
  animation: preloader1 1s ease 0.4s both;
}

.c-preloader__logo :where(img) {
  width: auto;
  height: var(--tcd-preloader-logo-size-pc);
}

.c-preloader__logo-catch {
  font-size: var(--tcd-preloader-catch-font-size-pc);
  font-family: var(--tcd-preloader-catch-font-type);
  font-weight: 600;
  color: var(--tcd-preloader-catch-font-color);
  line-height: 1.5;
  margin-block: calc((1em - 1lh) / 2);
}

.c-preloader__logo-image+.c-preloader__logo-catch {
  animation-delay: 0.8s;
}

/* catch > logo */
.c-preloader__before {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: inherit;
  background-color: var(--tcd-preloader-before-bg-color);
}

.c-preloader__before-catch {
  font-size: var(--tcd-preloader-catch-font-size-pc);
  font-family: var(--tcd-preloader-catch-font-type);
  font-weight: 600;
  color: var(--tcd-preloader-catch-font-color);
  line-height: 2.2;
  margin-block: calc((1em - 1lh) / 2);
  /* animation: preloader1 1s ease 0.5s both; */
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.55, 0.06, 0.68, 0.19) 0.2s;
}

.c-preloader__before-catch.is-active {
  opacity: 1;
}

/* 1枚目のアニメーション終了後にスライド */
.c-preloader__before.is-end {
  animation: preloader2 0.7s cubic-bezier(.83, 0, .17, 1) 2s both;
}

/* 2枚目のアニメーション開始 */
.c-preloader__before.is-end+.c-preloader__after {
  animation: preloader1 1s ease 3s both;
}

.c-preloader__after :where(img) {
  width: auto;
  height: var(--tcd-preloader-logo-size-pc);
}

@media (max-width: 767px) {
  .c-preloader {
    row-gap: 20px;
  }

  .c-preloader__icon {
    font-size: 50px;
  }

  .c-preloader__logo :where(img) {
    height: var(--tcd-preloader-logo-size-sp);
  }

  .c-preloader__logo-catch {
    font-size: var(--tcd-preloader-catch-font-size-sp);
  }

  .c-preloader__before-catch {
    font-size: var(--tcd-preloader-catch-font-size-sp);
  }

  .c-preloader__after :where(img) {
    height: var(--tcd-preloader-logo-size-sp);
  }
}

@keyframes preloader1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes preloader2 {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(100% 0 0 0);
  }
}