/*スクロールリンクの形状*/
.scroll-top {
    /*表示位置*/
    position: fixed;
    bottom: 10px;
    z-index: 99;
    /*はじめは非表示*/
    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;
    left: 10px;
}

@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;
}

/*検証のためのCSS*/