/*スクロールリンクの形状*/
.scroll-top {
    /*表示位置*/
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    visibility: hidden; 
    transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
    /*縦書き*/
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    /*改行禁止*/
    white-space: nowrap;
    /*矢印の動き*/
    animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
    opacity: 1;
    visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
    content:"";
    position: absolute;
    top:0;
    right:0;
    width:1px;
    height: 50px;
    background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
    right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
    content:"";
    position: absolute;
    top:0;
    right:0;
    width:1px;
    height: 50px;
    background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
    right:0;
}