.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):has(.c-preloader.is-end).index_slider_layout_type2 {
  background-color: #fff;
}

/*
 * #containerをclip-pathで切り抜かず、
 * ロード画面の影で角丸の窓を作る
 */
.c-preloader:has(.opening_animation)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: var(--tcd-preloader-bg-color);
  box-shadow: 0 0 0 100vmax var(--tcd-preloader-bg-color);
  pointer-events: none;
}

.c-preloader:has(.opening_animation) .opening_animation {
  z-index: 1;
}

.c-preloader:has(.opening_animation).is-end::before {
  background: transparent;
  animation: opening_reveal_animation 1.5s ease forwards;
}

body.end-opening-animation .c-preloader:has(.opening_animation) {
  display: none;
}

body:has(.opening_animation).index_slider_layout_type2:not(.end-opening-animation) #index_header_content_wrap {
  --opening-frame-inset-block: 100px;
  --opening-frame-inset-inline: 100px;
  --opening-header-height: 100px;
  --opening-frame-radius: 15px;
  clip-path: inset(0px round 0px);
  transition: none;
  z-index: 1001;
}

body:has(.opening_animation):has(.c-preloader.is-end).index_slider_layout_type2:not(.end-opening-animation) #index_header_content_wrap {
  animation: opening_type2_frame_animation 0.8s ease 1.5s both;
}

body:has(.opening_animation):has(.c-preloader.is-end).index_slider_layout_type2:not(.end-opening-animation) #index_header_content {
  width: 100vw;
  height: 100svh;
  animation: opening_type2_frame_content_animation 0.8s ease 1.5s both;
}

body:has(.opening_animation).index_slider_layout_type2.end-opening-animation #index_header_content_wrap {
  clip-path: inset(100px round 15px);
  transition: none;
}

@media (max-width: 1200px) {
  body:has(.opening_animation).index_slider_layout_type2:not(.end-opening-animation) #index_header_content_wrap {
    --opening-frame-inset-block: 60px;
    --opening-frame-inset-inline: 60px;
    --opening-header-height: 60px;
  }

  body:has(.opening_animation).index_slider_layout_type2.end-opening-animation #index_header_content_wrap {
    clip-path: inset(60px round 15px);
  }
}

@media (max-width: 767px) {
  body:has(.opening_animation).index_slider_layout_type2:not(.end-opening-animation) #index_header_content_wrap {
    --opening-frame-inset-block: 60px;
    --opening-frame-inset-inline: 20px;
  }

  body:has(.opening_animation).index_slider_layout_type2.end-opening-animation #index_header_content_wrap {
    clip-path: inset(60px 20px round 15px);
  }
}

@keyframes opening_reveal_animation {
  0% {
    inset: 50%;
    border-radius: 15px;
    box-shadow: 0 0 0 100vmax var(--tcd-preloader-bg-color);
    animation-timing-function: ease-out;
  }

  60% {
    inset: 20%;
    border-radius: 15px;
    box-shadow: 0 0 0 100vmax var(--tcd-preloader-bg-color);
  }

  70% {
    inset: 20%;
    border-radius: 15px;
    box-shadow: 0 0 0 100vmax var(--tcd-preloader-bg-color);
  }

  100% {
    /* 角丸の外周を画面外へ出し、四隅にロード画面の色を残さない */
    inset: -15px;
    border-radius: 15px;
    box-shadow: 0 0 0 100vmax var(--tcd-preloader-bg-color);
  }
}

@keyframes opening_type2_frame_animation {
  0% {
    top: calc(0px - var(--opening-frame-radius));
    left: calc(0px - var(--opening-frame-radius));
    width: calc(100% + var(--opening-frame-radius) + var(--opening-frame-radius));
    height: calc(100svh + var(--opening-frame-radius) + var(--opening-frame-radius));
    margin-bottom: calc(
      0px - var(--opening-header-height) -
      var(--opening-frame-radius) - var(--opening-frame-radius)
    );
    border-radius: var(--opening-frame-radius);
  }

  100% {
    top: var(--opening-frame-inset-block);
    left: var(--opening-frame-inset-inline);
    width: calc(100% - var(--opening-frame-inset-inline) - var(--opening-frame-inset-inline));
    height: calc(100svh - var(--opening-frame-inset-block) - var(--opening-frame-inset-block));
    margin-bottom: calc(
      0px - var(--opening-header-height) +
      var(--opening-frame-inset-block) +
      var(--opening-frame-inset-block)
    );
    border-radius: var(--opening-frame-radius);
  }
}

@keyframes opening_type2_frame_content_animation {
  0% {
    top: var(--opening-frame-radius);
    left: var(--opening-frame-radius);
  }

  100% {
    top: calc(0px - var(--opening-frame-inset-block));
    left: calc(0px - var(--opening-frame-inset-inline));
  }
}