/* CSS Document */
#mainBlock {
	padding-top: 108.5px;
}

#mainVisual {
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 600;
	background-image: url(../img/FV.png);
	background-size: cover;
	margin-bottom: 150px;
}
#mainVisual .top_logo {
	text-align: center;
	position: absolute;
	width: 46%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

:root {
	--position-guide-line: calc(208 / 1500 * 100%);
}
#images {
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 8120;
}
#images figure {
	position: absolute;
	opacity: 0;
	transform: translateY(50px);
	transition: all 1.5s;
}
#images figure.active {
	opacity: 1;
	transform: translateY(0);
}
#images .img01 {
	top: 0;
	left: 0;
	width: calc(638 / 1500 * 100%);
}
#images .img02 {
	top: calc(266 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(602 / 1500 * 100%);
}
#images .img03 {
	top: calc(891 / 8120 * 100%);
	left: var(--position-guide-line);
	width: calc(525 / 1500 * 100%);
}
#images .img04 {
	top: calc(1347 / 8120 * 100%);
	right: 0;
	width: calc(729 / 1500 * 100%);
}
#images .img05 {
	top: calc(1985 / 8120 * 100%);
	left: var(--position-guide-line);
	width: calc(379 / 1500 * 100%);
}
#images .img06 {
	top: calc(2154 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(651 / 1500 * 100%);
}
#images .img07 {
	top: calc(2604 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(369 / 1500 * 100%);
}
#images .img08 {
	top: calc(2771 / 8120 * 100%);
	left: 0;
	width: calc(871 / 1500 * 100%);
}
#images .img09 {
	top: calc(3204 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(326 / 1500 * 100%);
}
#images .img10 {
	top: calc(3360 / 8120 * 100%);
	left: 50%;
	transform: translateX(-50%) translateY(50px);
	width: calc(326 / 1500 * 100%);
}
#images .img10.active {
	transform: translateX(-50%) translateY(0);
}
#images .img11 {
	top: calc(3535 / 8120 * 100%);
	left: var(--position-guide-line);
	width: calc(326 / 1500 * 100%);
}
#images .img12 {
	top: calc(4004 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(484 / 1500 * 100%);
}
#images .img13 {
	top: calc(4306 / 8120 * 100%);
	left: var(--position-guide-line);
	width: calc(549 / 1500 * 100%);
}
#images .img14 {
	top: calc(4543 / 8120 * 100%);
	right: 0;
	width: calc(699 / 1500 * 100%);
}
#images .img15 {
	top: calc(5375 / 8120 * 100%);
	left: var(--position-guide-line);
	width: calc(666 / 1500 * 100%);
}
#images .img16 {
	top: calc(5875 / 8120 * 100%);
	left: 0;
	width: calc(495 / 1500 * 100%);
}
#images .img17 {
	top: calc(5875 / 8120 * 100%);
	right: var(--position-guide-line);
	width: calc(755 / 1500 * 100%);
}
#images .img18 {
	top: calc(6388 / 8120 * 100%);
	left: 0;
	width: 100%;
}
#images .img19 {
	top: calc(7288 / 8120 * 100%);
	left: 0;
	width: 100%;
}

#logo {
	padding: 200px 0;
}
#logo figure {
	text-align: center;
	max-width: 60%;
	margin: 0 auto;
}
@media screen and (min-width:769px) {
	#logo figure a img {
		transition: all .3s;
	}
	#logo figure a:hover img {
		opacity: .7;
	}
}

@media screen and (max-width:768px) {
	#mainVisual {
		aspect-ratio: 750 / 400;
		background-image: url(../img/FV_sp.png);
		margin-bottom: 50px;
	}
	#mainVisual .top_logo {
		width: 74%;
	}

	:root {
		--position-guide-line: calc(40 / 750 * 100%);
	}
	#images {
		aspect-ratio: 750 / 5100;
	}
	#images figure {
		transform: translateY(30px);
	}
	#images .img01 {
		width: calc(303 / 750 * 100%);
	}
	#images .img02 {
		top: calc(152 / 5100 * 100%);
		width: calc(377 / 750 * 100%);
	}
	#images .img03 {
		top: calc(519 / 5100 * 100%);
		width: calc(344 / 750 * 100%);
	}
	#images .img04 {
		top: calc(797 / 5100 * 100%);
		width: calc(336 / 750 * 100%);
	}
	#images .img05 {
		top: calc(1190 / 5100 * 100%);
		width: calc(245 / 750 * 100%);
	}
	#images .img06 {
		top: calc(1300 / 5100 * 100%);
		width: calc(398 / 750 * 100%);
	}
	#images .img07 {
		top: calc(1582 / 5100 * 100%);
		width: calc(254 / 750 * 100%);
	}
	#images .img08 {
		top: calc(1725 / 5100 * 100%);
		width: calc(427 / 750 * 100%);
	}
	#images .img09 {
		top: calc(2037 / 5100 * 100%);
		right: 0;
		width: calc(230 / 750 * 100%);
	}
	#images .img10 {
		top: calc(2147 / 5100 * 100%);
		width: calc(230 / 750 * 100%);
		transform: translateX(-50%) translateY(30px);
	}
	#images .img11 {
		top: calc(2277 / 5100 * 100%);
		left: 0;
		width: calc(230 / 750 * 100%);
	}
	#images .img12 {
		top: calc(2649 / 5100 * 100%);
		width: calc(326 / 750 * 100%);
	}
	#images .img13 {
		top: calc(2788 / 5100 * 100%);
		width: calc(325 / 750 * 100%);
	}
	#images .img14 {
		top: calc(3008 / 5100 * 100%);
		width: calc(365 / 750 * 100%);
	}
	#images .img15 {
		top: calc(3486 / 5100 * 100%);
		width: calc(410 / 750 * 100%);
	}
	#images .img16 {
		top: calc(3786 / 5100 * 100%);
		width: calc(288  / 750 * 100%);
	}
	#images .img17 {
		top: calc(3795 / 5100 * 100%);
		width: calc(402 / 750 * 100%);
	}
	#images .img18 {
		top: calc(4158 / 5100 * 100%);
	}
	#images .img19 {
		top: calc(4654 / 5100 * 100%);
	}

	#logo {
		padding: 100px 0;
	}
}

@media screen and (max-width:767px) {
	#mainBlock {
		padding-top: 68px;
	}
}