#container{overflow: hidden;}
#top_animation{width:100%;overflow: hidden;position: relative;height: 100vh;display: flex;justify-content: center;align-items: center;z-index: 1000;/*background-color: rgba(0, 0, 0, 0.5); */}
#year-animation {display: inline-block;color: #ffffff;text-align: center;position: absolute;left:0;right: 0; top: 35vh;margin: auto; transition: transform 5s;transition-timing-function: linear;
font-size: 21.94444vw;line-height: 1;letter-spacing: 0.12em;white-space: nowrap;z-index: 10;font-family: 'Voyage-Regular', 'Kosugi', vdl-v7mincho, serif;overflow: hidden;}

.year-animation1{transform: translate3d(0, 0, 0) scale(3.8);}
.year-animation2{transition: transform 1s;  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);  transform: translate3d(80%, -50%, 0) scale(100);}
.top_animation{height:auto !important;z-index: 10 !important;}
.top_photo {position: relative;width: 100%;overflow: hidden;transition: background-image 2s ease-in-out, opacity 2s ease-in-out;background-size: cover;background-position: center;}
.top_photo img{width: 100%;}

.top_photo::before {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-size: cover;background-position: center;opacity: 1;transition: opacity 2s ease-in-out;z-index: 1;}
.top_photo::after {content: '';position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-size: cover;background-position: center;opacity: 0;transition: opacity 2s ease-in-out;z-index: 0;}

@keyframes top_animation_bg {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}	
.skip-animation {position: absolute;bottom:10px;right: 10px;z-index: 10;padding: 5px 10px;background-color: #f00;color: #fff;border: none;cursor: pointer;display: none;}

.animation-element{position:absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto;max-width: 400px;width: 100%;justify-content: center;align-items: center;}
.animation-elementin {width: 100%;height: auto;display: flex;text-align: center;margin: auto; justify-content: center;align-items: center;}

.fade-image { position: absolute;opacity: 0;animation: none;width: 100%;}

.fade-image:nth-child(1) {
    animation: fadeAnimation1 16s 1;
}

.fade-image:nth-child(2) {
    animation: fadeAnimation2 16s 1;
}

.fade-image:nth-child(3) {
    animation: fadeAnimation3 16s 1;
}

.fade-image:nth-child(4) {
    animation: fadeAnimation4 16s 1 forwards;
}

/* 1番目の画像アニメーション */
@keyframes fadeAnimation1 {
    0%, 15% { opacity: 0; }
    20%, 60% { opacity: 1; }
    65%, 100% { opacity: 0; }
}

/* 2番目の画像アニメーション */
@keyframes fadeAnimation2 {
    0%, 40% { opacity: 0; }
    45%, 65% { opacity: 1; }
    70%, 100% { opacity: 0; }
}

/* 3番目の画像アニメーション */
@keyframes fadeAnimation3 {
    0%, 70% { opacity: 0; }
    75%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* 4番目の画像アニメーション */
@keyframes fadeAnimation4 {
    0%, 86% { opacity: 0; }
    90%, 100% { opacity: 1; } 
    100% { opacity: 1; }
}

.animation-element2{position: absolute;bottom: 0;right: 0;max-width: 400px;width: 100%;}
.top_photo_bg_sp{display: none;}

@media (max-width: 720px) {
.year-animation1{transform: translate3d(0, 0, 0) scale(12.8);}
.fade-image{width: 70%;}
.animation-element2{text-align: right; display: none;}
.animation-element2 img{width: 50%;text-align: left; display: none;}
.top_photo_bg_pc{display: none;}
.top_photo_bg_sp{display: block;}
.fade-image:nth-child(2),.fade-image:nth-child(3){width: 70%;}
}