@charset "utf-8";

/* 2026.03.26 add by 405design */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --blue: #00539e;
}


/* 求める人財像 */
.box-seek-value {
	position: relative;
  background: rgba(255, 255, 255, .4) url("../img/recruit/person_bkg.webp") no-repeat center center / cover;
  background-blend-mode: lighten;
	&::before {
    content: "";
		position: absolute;
    right: 0;
    top: 0;
		z-index: -1;
    width: 591px;
    aspect-ratio: 591 / 100;
    /* background: url("../img/text-recuite-value_2.webp") no-repeat center center / contain; */
	}
	@media (max-width: 768px) {
		background: url("../img/recruit/person_bkg_sp.webp") no-repeat center center / cover;
		&::before {
			content: none;
		}
	};

	h3 {
		margin-top: 1.5em;
		line-height: 1.4;
		text-align: center;
		font-size: 3rem;
		@media (max-width: 768px) {
			font-size: 2.2rem;
		};

		span {
			font-size: 5rem;
			color: var(--blue);
			@media (max-width: 768px) {
				display: block;
				font-size: 3.6rem;
			};
		}
	}

	.person-content {
		position: relative;
		max-width: 864px;
		width: 100%;
		aspect-ratio: 864 / 660;
		margin: 11rem auto 0 auto;
		background: url("../img/recruit/person_circle.svg") no-repeat center center / 66%;
		@media (max-width: 768px) {
			margin-top: 10rem;
			aspect-ratio: auto;
			background: revert;
		};

		.person-item {
			position: relative;
			width: fit-content;
			margin-inline: auto;
			text-align: center;
			&::before {
				content: "";
				position: absolute;
				top: -60px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
				width: 100px;
				aspect-ratio: 100 / 68;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				@media (max-width: 768px) {
					width: 80px;
				};
			}
			&:nth-child(1) {
				&::before {
					background-image: url("../img/recruit/person_01.svg");
				}
			}
			&:nth-child(2) {
				&::before {
					background-image: url("../img/recruit/person_02.svg");
				}
			}
			&:nth-child(3) {
				&::before {
					background-image: url("../img/recruit/person_03.svg");
				}
			}

			@media (max-width: 768px) {
				& + .person-item {
					margin-top: 11rem;
				}
			};

			@media (min-width: 769px) {
				&:nth-child(1) {
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					z-index: 1;
				}
				&:nth-child(2) {
					position: absolute;
					top: 49%;
					left: 0;
					z-index: 1;
				}
				&:nth-child(3) {
					position: absolute;
					top: 49%;
					right: 0;
					z-index: 1;
				}
			};

			h4 {
				font-size: 4.2rem;
				color: var(--blue);
				@media (max-width: 768px) {
					font-size: 3.2rem;
				};
			}
			h5 {
				margin-top: .3em;
				font-size: 2.2rem;
				@media (max-width: 768px) {
					font-size: 2rem;
				};
			}
			p {
				margin-block: .5em 0;
				font-size: 1.8rem;
				@media (max-width: 768px) {
					font-size: 1.6rem;
				};
			}
		}
	}
}


/* 菱光社とは */
.box-recruit-about {
	position: relative;
	background: url("../img/recruit/about_bkg.webp") no-repeat center center / cover;
	@media (max-width: 768px) {
		background: url("../img/recruit/about_bkg.webp") no-repeat 82% center / cover;
	};
	@media (min-width: 769px) {
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 0;
			max-width: 1920px;
			width: 100%;
			height: 100%;
			background: url("../img/recruit/about_bkg_dia_dark.svg") no-repeat center center / contain;
			mix-blend-mode: multiply;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 0;
			max-width: 1920px;
			width: 100%;
			height: 100%;
			background: url("../img/recruit/about_bkg_dia_light.svg") no-repeat center center / contain;
			mix-blend-mode: screen;
		}
	};
	.rec-about-inner {
		position: relative;
		z-index: 1;
		padding-block: 12rem;
		text-align: center;
		p {
			line-height: 2.4;
			font-size: 1.8rem;
			font-weight: normal;
			@media (max-width: 768px) {
				text-align: left;
				font-size: 1.6rem;
			};
		}
		.button-has-right-arrow {
			background-color: #fff;
			color: var(--blue);
			&::after {
				display: inline-block;
				width: 25px;
				height: 14px;
				margin-left: 10px;
				background: url("../img/arrow-right-b.svg") no-repeat 0 0 scroll;
				background-size: 100% auto;
				content: "";
			}
		}
	}

}