.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;
}
*/
body:has(.c-preloader-spacer) #container {
  transform:translateY(-100px);	
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}
body:has(.is-end+.c-preloader-spacer) #container {
  transform:translateY(0px);	
}
/*
body:not(.start_first_animation) { pointer-events:auto; overflow:hidden; position:fixed; width:100%; }
*/
body.hide_preloader .c-preloader.is-end { display:none; }


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

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

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

.c-preloader__logo-text {
  font-family:var(--tcd-logo-font-type);
  font-weight:var(--tcd-logo-font-weight, 600);
  font-size: var(--tcd-preloader-logo-font-size-pc);
  color: var(--tcd-preloader-logo-font-color);
  line-height: 1.5;
}

.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-catch.vertical {
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-align:left;
  line-height:2;
}

.c-preloader__logo-image + .c-preloader__logo-catch,
.c-preloader__logo-text + .c-preloader__logo-catch {
  animation-delay: 1.2s;
}

/* 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-catch span { opacity:0; display:block; }
.c-preloader__before-catch span.animate { opacity:1; transition: opacity 1.4s ease 0.4s; }


.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 .logo_text {
  font-family:var(--tcd-logo-font-type);
  font-weight:var(--tcd-logo-font-weight, 600);
  font-size: var(--tcd-preloader-logo-font-size-pc);
  color: var(--tcd-preloader-logo-font-color);
  line-height: 1.5;
}
.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-text {
    font-size: var(--tcd-preloader-logo-font-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 .logo_text {
    font-size: var(--tcd-preloader-logo-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;
  }
}

/* オープニングアニメーション */
.opening_animation {
	width:100%; height:100%;
  position:fixed; top:0; left:0;
	transition: opacity 0.7s ease;
}


.opening_animation img {
  width: auto;
  height: var(--tcd-preloader-image-size-pc);
  position:absolute;
  left:50%; top:50%; transform: translate(-50%, -50%) scale(0.5);
  z-index:1;
  transform-origin: center center;
}
@keyframes opening_img_animation {
  0% { transform:translate(-50%, -50%) scale(0.5) ; }
  100% { transform:translate(-50%, -50%) scale(1) ; }
}
@media (max-width: 767px) {
  .opening_animation img { height: var(--tcd-preloader-image-size-sp); }
}

.opening_animation .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;
  position:absolute;
  left:50%; top:50%; transform: translate(-50%, -50%);
  z-index:2;
  display:block;
}
.opening_animation .catch.vertical {
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-align:left;
  line-height:2;
}
@media (max-width: 1200px) {
  .opening_animation .catch { font-size: calc( (var(--tcd-preloader-catch-font-size-pc) + var(--tcd-preloader-catch-font-size-sp)) / 2 ); }
}
@media (max-width: 767px) {
  .opening_animation .catch { font-size: var(--tcd-preloader-catch-font-size-sp); }
}

.c-preloader:has(.opening_animation) {
  row-gap: 0px;
  padding: 0px;
  background: none;
  clip-path: none;
  transition: none;
}
.c-preloader:has(.opening_animation).is-end {
	opacity:1 !important;
}

/* 全体のアニメーション */
.opening_animation img { animation: opening_img_animation 1.7s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards; }
.opening_animation .catch span { opacity:0; display:block; }
.opening_animation .catch span.animate { opacity:1; transition: opacity 1.5s ease; }
body.hide-opening-animation-content .opening_animation { opacity:0; }
body:has(.opening_animation):not(.end-opening-animation) { height:100vh; overflow:hidden; background-color: var(--tcd-preloader-bg-color); }
body:has(.opening_animation):not(.end-opening-animation) #container { height:100vh; overflow:hidden; clip-path: inset(50% round 15px); }
body:has(.opening_animation):has(.c-preloader.is-end) #container {  animation: opening_animation 1.5s ease 0s forwards; }
@keyframes opening_animation{
  0% { clip-path: inset(50% round 15px); }
  60% { clip-path: inset(20% round 15px); }
  70% { clip-path: inset(20% round 15px); }
  100% { clip-path: inset(0% round 0px); }
}