/*スクロールすると浮かぶアニメーション*/
.animation {
    opacity: 0;
    position: relative;
    transition: opacity 1.5s;
}

/* --- スクロールすると浮かぶアニメーション（時間差フェードイン用） --- */
.animation-delay {
    opacity: 0;
    position: relative;
    transition: opacity 2.5s ease 0.3s;
    /* ← 0.3秒遅れて開始 */
}

/* アクティブ時 */
.animation-delay.active {
    opacity: 1;
}

/*アニメーション要素までスクロールした時のスタイル*/
.active {
    opacity: 1;
}

/*ページトップへ戻るボタン*/
#page-top a {
    position: fixed;
    right: 15px;
    bottom: 65px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: none;
    background: #CE7F60;
    color: #fff;
    padding: 0px;
    z-index: 20000;
    font-size: 16px;
    font-weight: lighter;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page-top a:hover {
    background-color: #fff;
    border: #CE7F60 solid 1px;
    color: #CE7F60;
}