#top {
    font-family: 'TATSUTAfont', sans-serif;
    height: 100svh;
    width: 100svw;
    position: relative;
    overflow: hidden;
}
#top::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../assets/tokura.webp);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;

    opacity: 0;

    animation: bgFadeIn 1s ease 0.5s forwards;
}

#top div {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    z-index: 1; /* 背景より手前に表示 */
}

#top h1 {
    font-size: 30svw;
    margin: 0;
    line-height: 0.9;
    animation: flicker 5s infinite;
}

@keyframes bgFadeIn {
    0%, 15%, 30%, 45% { opacity: 0.2; }
    10%, 40%         { opacity: 0.9; } 
    50%, 70%, 85%, 100% { opacity: 1; }
    60%, 90%            { opacity: 0.2; } 
}

@keyframes flicker {
  0%, 50% { opacity: 1; }
  52% { opacity: 0.5; }
  53% { opacity: 0.95; }
  54% { opacity: 0.1; }
  55% { opacity: 0.8; }
  56% { opacity: 0.6; }
  58% { opacity: 1; }
  59%, 80% { opacity: 1; }
  82% { opacity: 0.9; }
  83% { opacity: 0; }
  84% { opacity: 0.7; }
  85% { opacity: 0.2; }
  86% { opacity: 0.9; }
  87% { opacity: 0.12; }
  88% { opacity: 0.4; }
  89% { opacity: 1; }
  92% { opacity: 0.9; }
  93% { opacity: 0; }
  94% { opacity: 0.7; }
  95% { opacity: 0.2; }
  96% { opacity: 0.9; }
  97% { opacity: 0.12; }
  98% { opacity: 0.4; }
  99% { opacity: 1; }
}

#top p {
    font-size: 4svw;
    margin: 0;
    animation: flicker 6s infinite;
}