/* ------------------
page-title
-------------------- */

.page-title {
	z-index: 1;
}

/* ------------------
field
-------------------- */

.field {
	padding-top: 50px;
}

.field .text {
	font-size: calc(1.8rem / 1.6);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.field > .text {
	margin-inline: 20px;
}

.field .text a {
	border-bottom: 1px solid var(--blue);
}

.field .text a[target="_blank"]::after {
	display: inline-block;
	width: 18px;
	height: 18px;
	content: "";
	background: url(/jp-ja/recruit/img/icon_external.svg) no-repeat 100% 50% /
		auto 100%;
}

@media (width >= 751px) {
	/* PC */

	.field {
		padding-top: 80px;
	}

	.field > .text {
		max-width: 1200px;
		padding-inline: 40px;
		margin-inline: auto;
	}
} /* @media */

/* ------------------
section
-------------------- */

.section {
	padding: 50px 20px 0;
}

.section .sub-title {
	margin-bottom: 10px;
	font-size: calc(3.8rem / 1.6);
	font-weight: 400;
	letter-spacing: 0.08em;
}

@media (width >= 751px) {
	/* PC */

	.section {
		padding: 130px 0 0;
	}

	.section .sub-title {
		margin-bottom: 30px;
		font-size: calc(6rem / 1.6);
	}
} /* @media */

/* ------------------
domestic map
-------------------- */

.domestic .map {
	position: relative;
	margin: 30px -20px;
}

.domestic .map ul {
	position: absolute;
	inset: 0;
}

.domestic .map ul li {
	position: absolute;
	display: inline-block;
	font-size: calc(1rem / 1.6);
	font-weight: 700;
	background: #fff;
	border: 1px solid var(--blue);
	border-radius: 4px;
}

.domestic .map ul li:nth-child(1) {
	top: calc(88 / 390 * 100vw);
	right: calc(43 / 390 * 100vw);
}

.domestic .map ul li:nth-child(2) {
	right: calc(101 / 390 * 100vw);
	bottom: calc(48 / 390 * 100vw);
}

.domestic .map ul li:nth-child(3) {
	top: calc(179 / 390 * 100vw);
	left: calc(184 / 390 * 100vw);
}

.domestic .map ul li:nth-child(4) {
	top: calc(12 / 390 * 100vw);
	left: calc(178 / 390 * 100vw);
}

.domestic .map ul li:nth-child(5) {
	top: calc(166 / 390 * 100vw);
	left: calc(97 / 390 * 100vw);
}

.domestic .map ul li:nth-child(6) {
	bottom: calc(20 / 390 * 100vw);
	left: calc(80 / 390 * 100vw);
}

.domestic .map ul li:nth-child(7) {
	bottom: calc(52 / 390 * 100vw);
	left: calc(87 / 390 * 100vw);
}

.domestic .map ul li:nth-child(8) {
	top: calc(86 / 390 * 100vw);
	left: calc(49 / 390 * 100vw);
}

@media (width >= 751px) {
	/* PC */

	.domestic > .text {
		max-width: 1200px;
		padding-inline: 40px;
		margin-inline: auto;
	}

	.domestic .sub-title {
		max-width: 1200px;
		padding-inline: 40px;
		margin-inline: auto;
	}

	.domestic .map {
		height: 1644px;
		margin: -780px 0 0;
		background: url(/jp-ja/recruit/culture/img/img_field_domestic_map.png)
			no-repeat 50% 0 / auto;
	}

	.domestic .map ul {
		position: relative;
		top: 780px;
		max-width: 1500px;
		height: 868px;
		margin-inline: auto;
	}

	.domestic .map ul li {
		font-size: calc(1.6rem / 1.6);
		line-height: 1.3;
		letter-spacing: 0;
		background: transparent;
		border: none;
		border-radius: 0;
	}

	.domestic .map ul li span {
		border-bottom: 2px solid var(--blue);
	}

	.domestic .map ul li:nth-child(1) {
		top: 448px;
		right: 160px;
	}

	.domestic .map ul li:nth-child(2) {
		right: 140px;
		bottom: 198px;
	}

	.domestic .map ul li:nth-child(3) {
		top: 555px;
		left: 814px;
	}

	.domestic .map ul li:nth-child(4) {
		top: 460px;
		left: 720px;
	}

	.domestic .map ul li:nth-child(5) {
		top: 488px;
		left: 493px;
	}

	.domestic .map ul li:nth-child(6) {
		bottom: 212px;
		left: 270px;
	}

	.domestic .map ul li:nth-child(7) {
		bottom: 231px;
		left: 444px;
	}

	.domestic .map ul li:nth-child(8) {
		top: 505px;
		left: 190px;
	}
} /* @media */

@media (width <= 1500px) and (width >= 751px) {
	/* TABLET */

	.domestic .map {
		height: calc(1644 / 1500 * 100vw);
		margin: calc(-710 / 1500 * 100vw) 0 0;
		background-size: auto 100%;
	}

	.domestic .map ul {
		top: calc(710 / 1500 * 100vw);
		height: calc(868 / 1500 * 100vw);
	}

	.domestic .map ul li {
		font-size: calc(16 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(1) {
		top: calc(448 / 1500 * 100vw);
		right: calc(160 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(2) {
		right: calc(140 / 1500 * 100vw);
		bottom: calc(198 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(3) {
		top: calc(555 / 1500 * 100vw);
		left: calc(790 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(4) {
		top: calc(460 / 1500 * 100vw);
		left: calc(700 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(5) {
		top: calc(488 / 1500 * 100vw);
		left: calc(493 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(6) {
		bottom: calc(212 / 1500 * 100vw);
		left: calc(270 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(7) {
		bottom: calc(231 / 1500 * 100vw);
		left: calc(444 / 1500 * 100vw);
	}

	.domestic .map ul li:nth-child(8) {
		top: calc(505 / 1500 * 100vw);
		left: calc(190 / 1500 * 100vw);
	}
} /* @media */

/* ------------------
domestic gallery
-------------------- */

.domestic .gallery .item {
	margin-bottom: 30px;
}

.domestic .gallery h3 {
	margin-bottom: 14px;
	font-size: calc(2.2rem / 1.6);
	font-weight: 700;
	line-height: calc(32 / 22);
}

@media (width >= 751px) {
	/* PC */

	.domestic .gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 50px 26px;
		max-width: 1200px;
		padding-inline: 40px;
		margin: 30px auto 150px;
	}

	.domestic .gallery .item {
		margin-bottom: 0;
	}

	.domestic .gallery h3 {
		margin-bottom: 8px;
		font-size: calc(2.4rem / 1.6);
		line-height: calc(32 / 24);
	}

	.domestic .gallery .item:nth-child(4) h3 {
		margin: -8px 0 4px;
		font-size: calc(1.8rem / 1.6);
		line-height: calc(22 / 18);
	}
} /* @media */

/* ------------------
slider
-------------------- */

.slider {
	position: relative;
	margin-bottom: 14px;
}

.slider img {
	border-radius: 10px;
}

.slider .btn-view {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 110px;
	padding-right: 40px;
	font-size: calc(1.8rem / 1.6);
	font-weight: 700;
	color: #fff;
	text-align: center;
	background: var(--blue);
	border-radius: 10px;
}

.slider .btn-view::after {
	position: absolute;
	top: calc(50% - 9px);
	right: 17px;
	width: 16px;
	height: 18px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
	background: #fff;
}

.slider-thumbnail img {
	border-radius: 6px;
}

.slider .swiper-button-prev,
.slider .swiper-button-next {
	width: 30px;
	height: 30px;
	border-top: 1px solid #b3b3b3;
	border-right: 1px solid #b3b3b3;
}

.slider .swiper-button-prev {
	transform: rotate(-135deg);
}

.slider .swiper-button-next {
	transform: rotate(45deg);
}

.slider .swiper-button-prev::after,
.slider .swiper-button-next::after {
	display: none;
}

@media (width >= 751px) {
	/* PC */

	.slider {
		margin-bottom: 16px;
	}

	.slider .btn-view {
		width: 68px;
		padding-right: 20px;
		font-size: calc(1.4rem / 1.6);
		border-radius: 10px;
	}

	.slider .btn-view::after {
		top: calc(50% - 5px);
		right: 7px;
		width: 10px;
		height: 11px;
	}

	.slider .swiper-button-prev,
	.slider .swiper-button-next {
		width: 60px;
		height: 60px;
	}

	.slider .swiper-button-prev {
		left: 60px;
	}

	.slider .swiper-button-next {
		right: 60px;
	}
} /* @media */

/* ------------------
modal
-------------------- */

.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: rgb(0 0 0 / 20%);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.modal-overlay.is-open {
	z-index: 100000;
	pointer-events: auto;
	opacity: 1;
}

.modal-inner {
	width: 100%;
	max-height: 100svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #000;
	opacity: 0;
	transition:
		transform 0.22s ease,
		opacity 0.22s ease;
	transform: translateY(8px) scale(0.995);
}

.modal-overlay.is-open .modal-inner {
	opacity: 1;
	transform: none;
}

.modal-inner h3 {
	padding: 15px;
	margin-bottom: 15px;
	font-size: calc(2.2rem / 1.6);
	font-weight: 700;
	color: #fff;
	text-align: center;
	background: #808080;
	border-radius: 0 0 10px 10px;
}

.modal-inner .modal-close {
	float: right;
	width: auto;
	margin: 0 20px 15px;
	color: #fff;
	text-decoration: underline;
	opacity: 1;
}

.modal-inner .slider-set {
	padding: 16px;
	margin: 15px 20px;
	clear: right;
	font-size: calc(1.8rem / 1.6);
	font-weight: 600;
	background: #fff;
}

.modal-inner .slider p {
	margin-top: 10px;
	font-size: calc(1.6rem / 1.6);
	font-weight: 400;
	line-height: 1.5;
}

.modal-inner .slider-thumbnail .swiper-slide {
	cursor: pointer;
}

@media (width >= 751px) {
	/* PC */

	.modal-inner {
		max-width: 1072px;
		height: auto;
		background: #fff;
		border-radius: 10px;
	}

	.modal-inner h3 {
		padding: 8px;
		margin-bottom: 25px;
		font-size: calc(2.4rem / 1.6);
		letter-spacing: 0.08em;
		border-radius: 8px;
	}

	.modal-inner .modal-close {
		margin: 0 30px 30px;
		color: #000;
	}

	.modal-inner .slider-set {
		padding: 0;
		margin: 0 auto 80px;
	}

	.modal-inner .slider {
		margin-bottom: 45px;
		text-align: center;
	}

	.modal-inner .slider img {
		max-width: 727px;
	}

	.modal-inner .slider p {
		max-width: 727px;
		margin: 10px auto;
		font-size: calc(1.6rem / 1.6);
		text-align: left;
		letter-spacing: 0.06em;
	}

	.modal-inner .slider-thumbnail {
		max-width: 454px;
	}
} /* @media */

/* ------------------
overseas
-------------------- */

.overseas {
	padding-bottom: 20px;
	background: #e6f5ff;
}

.overseas .num {
	display: flex;
	gap: 0 40px;
	justify-content: center;
	padding: 15px;
	margin-block: 30px 20px;
	color: #fff;
	background: var(--blue);
	border-radius: 10px;
}

.overseas .num p {
	font-size: calc(1.8rem / 1.6);
	line-height: 1.2;
}

.overseas .num p span {
	font-size: calc(2.4rem / 1.6);
	font-weight: 700;
}

.overseas .note {
	margin-block: 20px;
	font-size: calc(1.6rem / 1.6);
}

.overseas .item {
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin-bottom: 20px;
	background: #fff;
}

.overseas .item img {
	order: 3;
	width: calc(310 / 390 * 100vw);
	margin-top: 20px;
}

.overseas .item img.landscape {
	width: calc(240 / 390 * 100vw);
	margin-inline: auto;
}

.overseas .item h3 {
	order: 1;
	margin-bottom: 5px;
	font-size: calc(1.6rem / 1.6);
}

.overseas .item p {
	order: 2;
	font-size: calc(1.5rem / 1.6);
	line-height: calc(24 / 15);
}

@media (width >= 751px) {
	/* PC */

	.overseas {
		position: relative;
		padding-block: 50px 90px;
	}

	.overseas .sub-title,
	.overseas .text {
		max-width: 1200px;
		padding-inline: 40px;
		margin-inline: auto;
	}

	.overseas .num {
		position: absolute;
		top: 106px;
		right: 150px;
		flex-direction: column;
		gap: 20px 0;
		width: 220px;
		height: 220px;
		padding: 0;
		margin-block: 0;
		text-align: center;
		border-radius: 50%;
	}

	.overseas .num p {
		font-size: calc(2rem / 1.6);
	}

	.overseas .num p span {
		font-size: calc(2.8rem / 1.6);
	}

	.overseas .note {
		position: absolute;
		right: 150px;
		bottom: -80px;
		font-size: calc(1.4rem / 1.6);
		text-align: right;
	}

	.overseas .map {
		position: relative;
		max-width: 1500px;
		padding-block: 130px 90px;
		margin: 50px auto 0;
	}

	.overseas .map picture {
		display: block;
		text-align: right;
	}

	.overseas .item {
		position: absolute;
		box-sizing: border-box;
		width: min(220px, calc(220 / 1500 * 100vw));
		padding: min(14px, calc(14 / 1500 * 100vw));
		margin-bottom: 0;
		background: rgb(255 255 255 / 60%);
	}

	.overseas .item.america {
		top: min(87px, calc(87 / 1500 * 100vw));
		right: min(245px, calc(245 / 1500 * 100vw));
		width: min(265px, calc(245 / 1500 * 100vw));
	}

	.overseas .item.germany {
		top: 0;
		left: min(360px, calc(360 / 1500 * 100vw));
	}

	.overseas .item.germany img {
		width: min(153px, calc(153 / 1500 * 100vw));
	}

	.overseas .item.singapore {
		top: min(421px, calc(421 / 1500 * 100vw));
		right: min(455px, calc(455 / 1500 * 100vw));
	}

	.overseas .item.singapore img.landscape {
		width: min(125px, calc(125 / 1500 * 100vw));
	}

	.overseas .item.malaysia {
		top: min(625px, calc(625 / 1500 * 100vw));
		right: min(725px, calc(725 / 1500 * 100vw));
	}

	.overseas .item.brazil {
		right: min(179px, calc(179 / 1500 * 100vw));
		bottom: 0;
	}

	.overseas .item.brazil img.landscape {
		width: min(93px, calc(93 / 1500 * 100vw));
	}

	.overseas .item.finland {
		top: min(153px, calc(153 / 1500 * 100vw));
		left: min(93px, calc(93 / 1500 * 100vw));
	}

	.overseas .item.netherlands {
		top: min(276px, calc(276 / 1500 * 100vw));
		left: min(93px, calc(93 / 1500 * 100vw));
	}

	.overseas .item.spain {
		top: min(399px, calc(399 / 1500 * 100vw));
		left: min(93px, calc(93 / 1500 * 100vw));
	}

	.overseas .item.india {
		top: min(502px, calc(502 / 1500 * 100vw));
		left: min(376px, calc(376 / 1500 * 100vw));
	}

	.overseas .item.china {
		top: min(210px, calc(210 / 1500 * 100vw));
		left: min(620px, calc(620 / 1500 * 100vw));
		width: min(264px, calc(264 / 1500 * 100vw));
	}

	.overseas .item img {
		width: 100%;
		margin-top: min(10px, calc(10 / 1500 * 100vw));
	}

	.overseas .item img.landscape {
		width: auto;
		margin-inline: 0;
	}

	.overseas .item h3 {
		margin-bottom: 0;
		font-size: min(calc(1.6rem / 1.6), calc(16 / 1500 * 100vw));
		line-height: 1.2;
	}

	.overseas .item p {
		font-size: min(calc(1.4rem / 1.6), calc(14 / 1500 * 100vw));
		line-height: calc(20 / 14);
	}

	.overseas .item.america img,
	.overseas .item.germany img {
		order: 1;
		margin: 0 0 min(10px, calc(10 / 1500 * 100vw));
	}

	.overseas .item.america h3,
	.overseas .item.germany h3 {
		order: 2;
	}

	.overseas .item.america p,
	.overseas .item.germany p {
		order: 3;
	}
} /* @media */

@media (width <= 1200px) and (width >= 751px) {
	.overseas .num {
		right: 20px;
		width: 190px;
		height: 190px;
	}
} /* @media */

/* ------------------
feature
-------------------- */

.feature {
	padding-top: 30px;
}

.feature-title {
	position: relative;
	padding-top: 10px;
	margin-bottom: 20px;
	font-size: calc(2rem / 1.6);
	border-top: 1px solid #1c326f;
}

.feature-title::before {
	position: absolute;
	top: -1px;
	left: 0;
	width: 8em;
	height: 8px;
	content: "";
	background: #1c326f;
}

.feature .item {
	padding: 20px 20px 0;
	background: #f5f5ee;
}

.feature .item + .item {
	margin-top: 20px;
}

.feature h4 {
	margin-bottom: 20px;
	font-size: calc(2rem / 1.6);
	line-height: 1.4;
	color: #1c326f;
}

.feature img {
	display: block;
	margin: 0 auto 24px;
}

.feature .text {
	margin-bottom: 20px;
	font-size: calc(1.6rem / 1.6);
	font-weight: 400;
}

.feature .text ul {
	margin: 1em 0 0 1em;
	list-style-type: disc;
}

.feature .text ul li a {
	border-bottom: 1px solid var(--blue);
}

.feature button {
	display: block;
	max-width: 160px;
	margin-inline: auto;
	font-size: calc(1.8rem / 1.6);
	color: #fff;
	text-align: center;
	background: #34487e;
	border-radius: 10px 10px 0 0;
}

.feature button[aria-expanded="false"]::after {
	margin-left: 5px;
	content: "＋";
}

.feature button[aria-expanded="true"]::after {
	margin-left: 5px;
	content: "－";
}

@media (width >= 751px) {
	/* PC */

	.feature {
		max-width: 1200px;
		padding: 60px 40px 0;
		margin-inline: auto;
	}

	.feature-title {
		margin-bottom: 25px;
	}

	.feature-title::before {
		width: 15em;
	}

	.feature .item {
		box-sizing: border-box;
		width: 50%;
		max-width: 560px;
		padding: 30px min(50px, calc(50 / 1210 * 100%)) 0;
	}

	.feature .item + .item {
		margin-top: 0;
	}

	.feature h4 {
		margin-bottom: 40px;
	}

	.feature .text {
		margin-bottom: 50px;
	}

	.feature button {
		max-width: 110px;
		font-size: calc(1.6rem / 1.6);
	}
} /* @media */