@charset "UTF-8";
/* CSS Document */
/*Theme Name:shutokatsumata
description:Wordpressoriginalテーマ
Version:1.0
author:natsuki
*/

.fadeout {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(50px);
  /* 一旦50px下におく */
  transition: 3.0s;
  /* ここの数字をいじってふわっとさせる時間を調整現在は1秒 */
}

.fadein {
  /* jsでクラスを追加したときに変更する箇所 */
  opacity: 1;
  /* 透過をなくしつつ */
  transform: translateY(0);
  /* 50px下にあるものを元の位置に戻す */
}


/* ここからトップに戻るボタンをスクロールしたら表示するcss */

.scrollTop {
  position: fixed;
  /* 追従させるのでfixedを指定 */
  bottom: 50px;
  /* 置く場所の指定 */
  right: 50px;
  /* 置く場所の指定 */
  display: block;
  /* aタグがインライン要素なのでブロック要素に変更 */
  width: 50px;
  /* 大きさの指定 */
  height: 50px;
  /* 大きさの指定 */
  border-radius: 50%;
  /* 円にするために */
  background: rgba(31, 80, 89, 0.7);
  /* 色の指定 */
  opacity: 0;
  /* 一回透過 */
  transition: 0.5s;
  /* 少しゆっくり表示させる */
}

.scrollTop::after {
  /* 円の中の矢印の指定 */
  content: "";
  /* 擬似要素を使うために入力 */
  position: absolute;
  /* 円のどこに置くかの指定 */
  top: 20px;
  /* 置く場所の指定 */
  left: 19px;
  /* 置く場所の指定 */
  transform: rotate(-135deg);
  /* 矢印の向きを回して上に向ける */
  display: block;
  /* 擬似要素がインライン要素なのでブロック要素に変更 */
  width: 15px;
  /* 矢印の大きさ */
  height: 15px;
  /* 矢印の大きさ */
  border-right: solid 3px #FFFFFF;
  /* 矢印の太さの指定 */
  border-bottom: solid 3px #FFFFFF;
  /* 矢印の太さの指定 */
}

.scrollTopIn {
  opacity: 1;
  /* くらすを書き換えて表示させる */
}