@charset "utf-8";

/*========= スクロールダウンのためのCSS ===============*/


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    bottom:3%;
    right:3%;
    /*矢印の動き1秒かけて永遠にループ*/
    animation: arrowmove 1.5s ease-in-out infinite;
    z-index: 9999;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:2%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-38px;
	bottom:58px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 2px;
    right: 2px;
    /*矢印の形状*/
    width: 50px;
    height: 50px;
    background-color: #0000ff;
    border-radius: 100px;
}

.scrolldown4:after{
	content:"\025bc";
    /*描画位置*/
	position: absolute;
	bottom:15px;
	right:19.5px;
    /*矢印の形状*/
    color:#fff;
}