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

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

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

/* アニメーション要素までスクロールした時のスタイル（時間差フェードイン用） */
.animation-delay.active {
    opacity: 1;
}

/* --- スクロールすると浮かぶアニメーション（さくや） --- */
.animation-sakuya {
  opacity: 0;
  transform: translate(100px, -100px); 
  transition: all 1s ease-out;
}

/* アニメーション要素までスクロールした時のスタイル（さくや） */
.animation-sakuya.active {
  opacity: 1;
  transform: translate(0, 0);
}



/*ページトップへ戻るボタン*/
#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;
}