@charset "UTF-8";
.page-diversity-index {
	.diversity-hero.visual_header.bg {
		background: url(/jp/career/recruit/img/diversity/visual.jpg) no-repeat 50% 50%;
		background-size: cover;
	}
	.diversity-lead {
		margin-bottom: 3em;
	}

	.diversity-bullets {
		margin: 0;
		padding: 0 0 0 1.25em;
		li {
			list-style: disc;
		}
		&.mb {
			margin-bottom: 1em;
		}
	}

	.diversity-map {
		margin: 1rem 0 0;
		position: relative;
		overflow: hidden;
		aspect-ratio: 794/400;
		@media (max-width: 768px) {
			aspect-ratio: 315/350;
		}
	}
	.diversity-map::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.diversity-map iframe {
		border: 0;
	}

	.diversity-flow {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		align-items: flex-start;
		justify-content: flex-start;
		max-width: 100%;
		@media (max-width: 768px) {
			justify-content: center;
			align-items: unset;
			gap: 1rem;
			margin-top: 1rem;
		}
	}

	.diversity-flow__step {
		flex: 0 0 auto;
		width: 116px;
		text-align: center;
		@media (max-width: 768px) {
			width: calc(100% / 2 - 0.5rem);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
	}

	.diversity-flow__label {
		font-weight: 700;
		line-height: 1.7;
		min-height: 54px;
		@media (max-width: 768px) {
			min-height: auto;
		}
	}

	.diversity-flow__icon-wrap {
		width: 116px;
		margin: 0 auto;
		@media (max-width: 768px) {
			width: 60%;
			aspect-ratio: 1/1;
			position: relative;
			overflow: hidden;
		}
	}

	.diversity-flow__icon {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: center;
		aspect-ratio: 1/1;
		pointer-events: none;
		@media (max-width: 768px) {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 130%;
		}
	}

	.detail.diversity-flow-note {
		margin-top: 1rem;
	}
}