@charset "UTF-8";

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*アニメーションのキーフレーム設定（変更不要）*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {
	display: none;
}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 100;
	position: fixed;
	width: 40px;		/*幅*/
	height: 40px;
	line-height: 40px;	/*高さ*/
	bottom: 100px;		/*下から40pxの場所に配置*/
	right: 1%;			/*右から1%の場所に配置*/
	background: #008caf;	/*背景色*/
	color: #fff;		/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	border-radius: 50%;		/*円形にする*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}

/* デスクトップ時の補正（モバイルファースト） */
@media print, screen and (min-width:768px){
	body.is-fixed-pagetop .nav-fix-pos-pagetop a {
		width: 60px;
		height: 60px;
		bottom: 40px;
		line-height: 60px;
	}
	html {
		scroll-behavior: smooth;
	}
	.pagetop {
		height: 50px;
		width: 50px;
		position: fixed;
		right: 30px;
		bottom: 30px;
		background: #fff;
		border: solid 2px #000;
		border-radius: 50%;
		background: #25d2fd;	/*背景色*/
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
	
	.pagetop__arrow {
		height: 10px;
		width: 10px;
		border-top: 3px solid #000;
		border-right: 3px solid #000;
		transform: translateY(20%) rotate(-45deg);
	
	}
}