:root {          }
.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;
} .c-preloader__icon {
display: grid;
font-size: 60px;
color: var(--tcd-preloader-icon-color);
} .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-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-image+.c-preloader__logo-catch {
animation-delay: 0.8s;
} .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) 2s both;
}
.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;
}
.c-preloader__after {
animation: preloader1 1s ease 3s 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-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);
}
}