.fade-text{
    opacity: 0;
}
.fade-text.reveal{
    opacity: 0;
    animation: fade .4s ease-in .2s 1 normal forwards;
}
.fade-item{
    opacity: 0;
}
.fade-item.reveal{
    opacity: 0;
}
.fade-item.reveal:first-of-type{
    animation: fade .4s ease-in .2s 1 normal forwards;
}
.fade-item.reveal:nth-of-type(2){
    animation: fade .4s ease-in .6s 1 normal forwards;
}
.fade-item.reveal:nth-of-type(3){
    animation: fade .4s ease-in 1s 1 normal forwards;
}
.fade-item.reveal:nth-of-type(4){
    animation: fade .4s ease-in 1.4s 1 normal forwards;
}
.greeting-item-img-p.fade-item.reveal{
    animation: fade-name .4s ease-in 1s 1 normal forwards;
}
@keyframes fade {
    0% {
        opacity: 0;
        transform: translate3d(0,2rem,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}
@keyframes fade-name {
    0% {
        opacity: 0;
        transform: translate3d(-50%,2rem,0);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%,0,0);
    }
}
@media screen and (max-width:767px){
    .fade-item.fade-item-same.reveal:first-of-type{
        animation: fade .4s ease-in .2s 1 normal forwards;
    }
    .fade-item.fade-item-same.reveal:nth-of-type(2){
        animation: fade .4s ease-in .2s 1 normal forwards;
    }
    .fade-item.fade-item-same.reveal:nth-of-type(3){
        animation: fade .4s ease-in .2s 1 normal forwards;
    }
    .fade-item.fade-item-same.reveal:nth-of-type(4){
        animation: fade .4s ease-in .2s 1 normal forwards;
    }
}
/*	下層ヘッダー アニメーション
---------------------------------*/
.fade-text02{
    opacity: 0;
}
.fade-text02.reveal,
.fade-text02.reveal:after{
    animation-delay: var(--animation-delay, 2s);
    animation-iteration-count: var(--iterations, 1);
    animation-duration: var(--duration, 800ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.fade-text02.reveal{
    opacity: 0;
    display: inline-block;
    --animation-delay: var(--delay, 0);
    --animation-duration: var(--duration, 800ms);
    --animation-iterations: var(--iterations, 1);
    position: relative;
    animation-name: clip-text;
    white-space: nowrap;
    cursor: default;
}
.fade-text02.reveal:after{
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
}
.fade-text02.white.reveal:after{
    background-color: #fff;
}
@keyframes clip-text {
    from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    }
    to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    }
}
@keyframes text-revealer {
    0%, 50% {
    transform-origin: 0 50%;
    }

    60%, 100% {
    transform-origin: 100% 50%;
    }

    60% {
    transform: scaleX(1);
    }

    100% {
    transform: scaleX(0);
    }
}