@charset "UTF-8";

/* ===============================
	共通スタイル
=============================== */
/* メインビジュアル */
#btnScroll {
	width: 40px;
	height: 40px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
}

#btnScroll.visible {
    opacity: 1;
}

#btnScroll span {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/chevron-down-solid.svg) no-repeat center center;
	background-size: 100% auto;
    -webkit-animation: scrollbtn 1.5s infinite;
    animation: scrollbtn 1.5s infinite;
}

@keyframes scrollbtn {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0, 20px);
		transform:  translate(0, 20px);
        opacity: 0;
    }
}

/* 人力車 */
#jinrikisha {
	width: 265px;
	height: 185px;
	background: url(../img/jinrikisha.png) no-repeat left top;
	animation: run 0.5s steps(3) infinite;
}

.jinrikisha-wrap {
	position: absolute;
	top: 10px;
	left: 0;
	animation: move 15s linear infinite;
	transform: translateX(-265px);
}

@keyframes run {
	to {
		background-position: -795px 0;
	}
}

@keyframes move {
	0% {
		left: 0;
	}
	100% {
		left: 130%;
	}
}

#jinrikisha::before {
	content: '';
	display: block;
	width: 307px;
	height: 86px;
	background: url(../img/jinrikisha-kage.png) no-repeat;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 36px);
}

/* スライドショー・ナビゲーション */
.lineup-slide {
	position: relative;
}

.lineup-slide ul.slide-pagination-text {
	display: flex;
	justify-content: center;
}

.lineup-slide ul.slide-pagination-text li {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-feature-settings: normal;
	position: relative;
}

.lineup-slide ul.slide-pagination-text li:first-child::before {
	content: '';
	display: block;
	width: 1px;
	height: 10%;
	background: #000;
	position: absolute;
	top: 1em;
	left: 0;
}

.lineup-slide ul.slide-pagination-text li::after {
	content: '';
	display: block;
	width: 1px;
	height: 10%;
	background: #000;
	position: absolute;
	top: 1em;
	right: 0;
}

.lineup-slide ul.slide-pagination-text li a {
	display: block;
	padding: 1em;
	text-align: left;
	position: relative;
	cursor: pointer;
}

.lineup-slide ul.slide-pagination-text li a.active::before {
	content: '';
	display: block;
	width: 60px;
	height: 8px;
	background: #c7000b;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -30px;
}

#slide2 ul.slide-pagination-text li a.active::before {
	background: #b1a459;
}

.lineup-slide .slide-next, .lineup-slide .slide-prev {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	z-index: 2;
	cursor: pointer;
	text-decoration: none;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	#jinrikisha {
	  width: 132px;
	  height: 92px;
	  background-size: auto 100%;
	}
	.jinrikisha-wrap {
		position: absolute;
		top: 10px;
		transform: translateX(-132px);
	}
	@keyframes run {
	  to {
	    background-position: -397px 0;
	  }
	}
	@keyframes move {
		0% {
			left: 0;
		}
		100% {
			left: 150%;
		}
	}
	#jinrikisha::before {
		width: 153px;
		height: 43px;
		background-size: auto 100%;
		transform: translate(-50%, 15px);
	}

	/* スライドショー・ナビゲーション */
	.lineup-slide {
		margin: 3rem 0 0 0;
		padding: 0 5%;
	}
	.lineup-slide ul.slide-pagination-text li a.active::before {
		width: 3em;
		margin-left: -1.5em;
	}
	.lineup-slide .slide-next, .lineup-slide .slide-prev {
		width: 30px;
		height: 30px;
		margin-top: -12px;
	}
	.lineup-slide .slide-prev {
		background: url(../img/lineup-prev_sp.png) no-repeat center center;
		background-size: auto 100%;
		left: 1%;
	}
	.lineup-slide .slide-next {
		background: url(../img/lineup-next_sp.png) no-repeat center center;
		background-size: auto 100%;
		right: 1%;
	}

}

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

	/* スライドショー・ナビゲーション */
	.lineup-slide {
		width: 920px;
		margin: 8rem auto 0;
	}
	.lineup-slide .slide-prev {
		background: url(../img/lineup-prev.png) no-repeat center center;
		background-size: auto 100%;
		left: 1rem;
	}
	.lineup-slide .slide-next {
		background: url(../img/lineup-next.png) no-repeat center center;
		background-size: auto 100%;
		right: 1rem;
	}
}