.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: -0.25em;
}

.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);
/*  animation: preloader2 1s cubic-bezier(0.86, 0, 0.07, 1) 3s both; */
  animation: preloader2 0.6s ease 3.2s both;
  overflow:hidden;
}

.c-preloader__before:has(.bg_image){
  background:none;
}
.c-preloader__before .bg_image { display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1 overflow:hidden; }
.c-preloader__before .bg_image img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.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: 1.5;
  margin-block: -0.25em;
  animation: preloader1 1s ease 0.5s both;
  z-index:2;
}
.c-preloader__before-catch.vertical {
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-align:left;
  line-height:2;
}

.c-preloader__after {
  animation: preloader1 1s ease 4s 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 {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}