@charset "utf-8";

/*------------------------*/
/*ページトップへ移動するボタン*/
/*------------------------*/


/*CSS変数を設定*/
:root {
 --scroll-page-top-button-bottom: 45px; /*「ページトップへ移動するボタンの下余白」*/
}


/*css矢印*/
#scroll_pagetop_button .arrow-top {
  position: relative;
  transform: rotate(270deg);
  top: 12px;
}
#scroll_pagetop_button .arrow-top::before,
#scroll_pagetop_button .arrow-top::after {
  content: ""; /* 疑似要素に指定必須 */
  width: 20px; /* 線の長さを指定 */
  height: 5px; /* 線の幅を指定 */
  display: inline-block; /* インラインブロックにする */
  border-radius: 3px; /* 線を角丸にする */
  background: #FFF;   /* 線の色を指定 */
  position: absolute; /* 相対位置に指定 */
}
#scroll_pagetop_button .arrow-top::before {
  top: calc(50% - 8px);
  transform: rotate(45deg); /* 45度回転させる */
}
#scroll_pagetop_button .arrow-top::after {
  bottom: calc(50% - 8px);
  transform: rotate(-45deg); /* -45度回転させる */
}





/* ページトップへ移動するボタンの画像 */
#scroll_pagetop_button img {
  width: 100%;
  height: auto;
  max-width: 50px;
}






/* ページトップへ移動するボタン枠 */
#scroll_pagetop_button {
  bottom: var(--scroll-page-top-button-bottom);
  position: fixed;
  right: 20px;
  opacity: 0;
  transition-duration: 0.2s;
  cursor:pointer;



  /*画像の場合、以下の設定は不要*/
  padding: 0px 0px 0px 0px;
  width: 55px;
  height: 60px;
  border: solid 1px #009385; /*枠線*/
  background: #01BCAA;       /*背景*/
  border-radius: 18px;        /*角の丸み*/
}