@charset "UTF-8";

/*Scrollテキストの描写*/
#sub01 .scroll-item span {
	/*描画位置*/
	position: absolute;
	left: -28px;
	bottom: 60px;
	/*テキストの形状*/
	color: #000;
	text-shadow: #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px;
	font-size: 2.4rem;
	letter-spacing: 0.05em;
}


#sub01 .scroll-item {
	/*描画位置※位置は適宜調整してください*/
	position: absolute;
	bottom: 1%;
	right: 50%;
	/*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1.2s ease-in-out infinite;
	margin-bottom: 14em;
}

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

	50% {
		bottom: 2%;
	}

	100% {
		bottom: 1%;
	}
}



/* 矢印の描写 */
#sub01 .scroll-item:before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 8px;
	width: 1px;
	height: 20px;
	background: #000;
	box-shadow: #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px;
	transform: skewX(-142deg);
}

#sub01 .scroll-item:after {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom: 0;
	right: 0;
	/*矢印の形状*/
	width: 1px;
	height: 50px;
	background: #000;
	box-shadow: #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px;
}

/* スクロールアイコン */
#sub01 .scroll-item.none {
	/* opacity: 0; */
	display: none;
}

.page-navi-fix-wrap.none {
	display: none;
}

/* スクロールアニメーション */
.scroll-fade-in {
	opacity: 0;
	transition-duration: 1s;
}

.scroll-fade-in.passed {
	opacity: 1;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	article {
		overflow: hidden;
	}

	/* 追尾ナビ */
	.page-navi-fix-wrap {
		display: none;
	}


	#sub01 .scroll-item span {
		left: -20px;
		bottom: 36px;
		font-size: 1.6rem;

	}

	#sub01 .scroll-item {
		margin-bottom: 18em;
	}

	/* 矢印の描写 */
	#sub01 .scroll-item:before {
		right: 4px;
		height: 10px;
		transform: skewX(-142deg);
	}

	#sub01 .scroll-item:after {
		height: 30px;
		background: #000;
		box-shadow: #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px, #fff 1px 0 8px;
	}




}

/* ====================================
	PC&タブレット、画面専用スタイル
===================================== */
@media only screen and (min-width: 768px) {

	/* 追尾ナビ */
	article {
		overflow: hidden;
	}

	#pageNavi {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		width: 20px;
		height: 100%;
		min-height: 100vh;
		position: fixed;
		top: 0vh;
		/* right: 0; */
		right: 64px;
		z-index: 50;
		opacity: 1;
		transform: translate(50px, 0);
		-webkit-transform: translate(50px, 0);
		transition: .2s;
	}

	/* .passed #pageNavi {
		opacity: 1.0;
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
	} */

	/* .passed.hidden #pageNavi {
		opacity: 0;
		transform: translate(50px, 0);
		-webkit-transform: translate(50px, 0);
	} */

	#pageNavi.fix {
		position: fixed;
		z-index: 50;
	}


	#pageNavi img {
		display: block;
	}

	#pageNavi ul.list-navi li {
		margin-top: 8px;
		position: relative;
	}

	#pageNavi ul.list-navi li a {
		display: block;
		width: 3px;
		height: 31px;
		text-decoration: none;
		background-color: #a0a0a0;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		/* overflow: hidden; */
		transition: all 0.3s ease-in-out;
	}

	/* #pageNavi .sun {
		position: relative;
		display: block;
		width: 30px;
		height: 20px;
		margin-bottom: 15px;
		background: url(images/navi-sub.png) no-repeat center center;
		background-size: contain;
	}

	#pageNavi .moon {
		position: relative;
		display: block;
		width: 30px;
		height: 20px;
		margin-top: 15px;
		background: url(images/navi-sub.png) no-repeat center center;
		background-size: contain;
	} */

	#pageNavi ul.list-navi li a.active,
	#pageNavi ul.list-navi li a:hover {
		width: 3px;
		height: 31px;
		background-color: #606060;
		opacity: 1;
	}

	#pageNavi ul.list-navi li.top a.active,
	#pageNavi ul.list-navi li.top a:hover {
		width: 3px;
		height: 31px;
		background-color: #305DA3;
		opacity: 1;
	}


	#pageNavi ul.list-navi li a:hover {
		text-decoration: none;
		/* transition: all 0.5s ease-in-out; */
	}

	/* ナビ吹き出し */
	#pageNavi ul.list-navi li a:hover .nav-arrow {
		opacity: 1;
	}

	#pageNavi .nav-arrow {
		position: absolute;
		right: 0px;
		top: 4px;
		width: max-content;
		color: #606060;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.8;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all .2s .2s;
		opacity: 0;
		display: block;
		padding-right: 1.4rem;
		/* text-shadow: #f3f2ef 0px 0 6px; */
	}

	#pageNavi .top .nav-arrow {
		color: #305DA3;
	}





	/* 右吹き出し */
	/* .nav-arrow:after,
	.nav-arrow:before {
		border: solid transparent;
		content: '';
		height: 0;
		width: 0;
		pointer-events: none;
		position: absolute;
		left: 100%;
		top: 50%;
	}



	.nav-arrow:after {
		border-color: rgba(255, 255, 255, 0);
		border-top-width: 3px;
		border-bottom-width: 3px;
		border-left-width: 11px;
		border-right-width: 11px;
		margin-top: -4px;
		margin-right: -.5px;
		border-left-color: rgba(255, 255, 255, 0.7);
	} */

	/* .nav-arrow:before {
		border-color: rgba(158, 158, 158, 0);
		border-top-width: 4px;
		border-bottom-width: 4px;
		border-left-width: 12px;
		border-right-width: 12px;
		margin-top: -4.9px;
		margin-left: .4px;
		border-left-color: #9E9E9E;
	} */

}

/* ====================================
	印刷専用スタイル
===================================== */
@media print {

	.page-navi-fix-wrap {
		display: none;
	}

}

/* ====================================
	IE専用スタイル
===================================== */
@media all and (-ms-high-contrast: none) {
	#pageNavi .nav-arrow {
		width: 130px;
		right: 14px;
		text-align: right;
	}

	.nav-arrow:after,
	.nav-arrow:before {
		left: 99%;
	}

}