@charset "UTF-8";

		.job-flow-ver2 {
			position: relative;
			margin-bottom: 100px;
		}

		.job-flow-ver2>ul {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}

		.job-flow-ver2>ul>li {
			position: absolute;
			transform: scale(1);
			box-shadow: 1px 1px 2px rgba(51, 83, 76, 0);
			transition: all .4s;
		}

		.job-flow-ver2>ul>li:before {
			width: 20px;
			height: 20px;
			background-image: url("/fb-sp/fb/ja/about/careers/graduates/job/img/zoom-icon.svg");
			right: 0;
			top: 0;
		}

		.job-flow-ver2>ul>li:nth-child(-n + 4) {
			background: #01916D;
			width: 48.9%;
			padding: 1.1%;
		}

		.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) {
			background: #1E83BE;
			width: 48.9%;
		}

		.job-flow-ver2>ul>li:nth-child(-n + 4)>p {
			text-align: center;
			color: #FFF;
			font-size: min(1.2vw, 14px);
			padding: 0;
		}

		.job-flow-ver2>ul>li:nth-child(-n + 4)>ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 2%;
			position: relative;
		}

		.job01-button ul li {
			width: 24%;
			padding: 2% 0;
		}

		.job03-button ul li,
		.job04-button ul li {
			width: 32.33%;
			padding: 2.5% 0;
		}

		.job01-button ul li,
		.job03-button ul li,
		.job04-button ul li {
			background: #E6F4F0;
			color: #01916D;
			justify-content: center;
			display: flex;
			line-height: 1.4em;
			align-items: center;
			text-align: center;
			font-size: min(0.9vw, 11px);
		}

		.job01-button {
			top: 10%;
			z-index: 2;
		}

		.job03-button {
			top: 30.8%;
			z-index: 2;
		}

		.job04-button {
			top: 47.8%;
			z-index: 2;
		}

		.job05-button {
			top: 82%;
			z-index: 2;
		}

		.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) {
			width: 15.5%;
			padding: 0 1% 1%;
			height: 53.5%;
		}

		.job06-button {
			top: 10%;
			left: 51.1%;
			z-index: 2;
		}

		.job07-button {
			top: 10%;
			left: 67.8%;
			z-index: 2;
		}

		.job08-button {
			top: 10%;
			left: 84.7%;
			z-index: 2;
		}

		.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7)>p {
			text-align: center;
			color: #FFF;
			font-size: min(1.2vw, 14px);
			line-height: 1.6em;
			padding: 0;
			height: 18%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) ul {
			padding-top: 2%;
			height: 100%;
			z-index: 3;
		}

		.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) ul li {
			width: 100%;
			height: 18%;
			padding: 2% 0;
			margin-bottom: 3%;
			background: #E8F3F8;
			color: #1E83BE;
			justify-content: center;
			display: flex;
			line-height: 1.4em;
			align-items: center;
			text-align: center;
			font-size: min(0.9vw, 11px);
		}

		.job-flow-ver2>ul>li:nth-child(8) {
			top: 92%;
			left: 0;
			width: 100%;
			height: 8%;
			background-size: 200% auto;
			background-image: linear-gradient(90deg, #1e83be 0%, #8e58ad 22%, #01916d 40%, #01916d 5%, #8e58ad 75%, #1e83be 100%);
			background-position: center right;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.job-flow-ver2>ul>li:nth-child(8) p {
			color: #FFF;
			font-size: min(1.2vw, 14px);
		}

		@media (max-width: 768px) {
			.job-flow-ver2>ul>li:nth-child(-n + 4) {
				padding: 6px;
			}

			.job-flow-ver2>ul>li:nth-child(-n + 4)>ul {
				padding-top: 6px;
			}

			.job-flow-ver2>ul>li:nth-child(-n + 4)>p {
				text-align: center;
				color: #FFF;
				font-size: 11px;
				padding: 0;
			}

			.job01-button ul li {
				width: 24%;
				padding: 7px 0;
			}

			.job03-button ul li,
			.job04-button ul li {
				width: 32.33%;
				padding: 11px 0;
			}

			.job01-button ul li,
			.job03-button ul li,
			.job04-button ul li {
				background: #E6F4F0;
				color: #01916D;
				justify-content: center;
				display: flex;
				line-height: 1.4em;
				align-items: center;
				text-align: center;
				font-size: 9px;
			}

			.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7)>p {
				font-size: 11px;
				height: 50px;
			}

			.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) ul {
				padding-top: 0;
				height: 100%;
				z-index: 3;
			}

			.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7) ul li {
				width: 100%;
				height: 43px;
				padding: 2% 0;
				margin-bottom: 4px;
				font-size: 9px;
			}

			.job-flow-ver2>ul>li:nth-child(8) p {
				font-size: 11px;
			}
		}

		@media screen and (max-width: 700px) {
			.scroll-box .job-flow-ver2 {
				width: 800px;
			}

			.scroll-box .job-flow-ver2>ul {
				width: 800px !important;
				height: 100%;
			}
		}


		@media (hover: hover) {
			.job-flow-ver2>ul>li:hover {
				transform: scale(1.01);
				box-shadow: 1px 1px 2px rgba(51, 83, 76, 0.5);
			}

			.job-flow-ver2>ul>li:nth-child(-n + 4):hover {
				background: #0B6D54;
			}

			.job-flow-ver2>ul>li:nth-child(n + 5):nth-child(-n + 7):hover {
				background: #146A9D;
			}

			.job-flow-ver2>ul>li:nth-child(8):hover {
				background-position: center left;
			}
		}