@charset "utf-8";


/************************************************
  SP layout
************************************************/

.center_pc {
	text-align: left;
}

#recruit .head {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 20px;
	gap: 4px;
	margin-bottom: 24px;
	font-weight: bold;
}

#recruit .head span {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #666;
	letter-spacing: 0px;
}

#recruit .recruit_culture .head {
	display: block;
}

.recruit_values,
.recruit_culture {
	padding: 16px 0;
}

.recruit_info,
.recruit_code {
	padding: 16px 24px;
}

.recruit_info .black-button {
	display: inline-block;
	background-color: black;
	color: white;
	text-align: center;
	margin-top: 16px;
	padding: 8px 16px;
	font-weight: bold;
	text-decoration: none;
}

.recruit_info .black-button:hover {
	opacity: 0.7;
}

.recruit_values {
	background: linear-gradient(135deg, rgba(243, 248, 251, 1) 0%, rgba(216, 225, 233, 1) 70%);
}

.recruit_values .value_container {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	background-color: white;
	padding: 24px;
	margin-bottom: 24px;
	letter-spacing: 2px;
	font-weight: bold;
}

.recruit_values .value_container .header {
	text-align: center;
	font-size: 18px;
	margin-bottom: 16px;
}

.recruit_values .value_container .content {
	max-width: 650px;
	margin: 0 auto;
}

.recruit_code .value_container {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	background: linear-gradient(135deg, rgba(243, 248, 251, 1) 0%, rgba(216, 225, 233, 1) 70%);
	padding: 24px;
	margin-bottom: 24px;
	letter-spacing: 2px;
	font-weight: bold;
}

.recruit_code .value_container .header {
	text-align: center;
	font-size: 18px;
	margin-bottom: 16px;
}

.recruit_code .value_container .content {
	max-width: 650px;
	margin: 0 auto;
}

.recruit_culture {
	background: linear-gradient(135deg, rgba(243, 248, 251, 1) 0%, rgba(216, 225, 233, 1) 70%);
}

.recruit_culture .content_container {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 16px;
	margin-bottom: 32px;
	font-weight: bold;
	letter-spacing: 2px;
}

.recruit_culture .content_container .content {
	flex: 1;
	max-width: 200px;
}

.recruit_culture .content_container img {
	width: 90px;
}

.recruit_culture .content_container .content .title {
	font-size: 20px;
	border-bottom: 1px solid #cecece;
	margin-bottom: 6px;
	padding-bottom: 3px;
}

.recruit_culture .content_container .content .description {
	font-size: 11px;
}

.recruit_culture .content_container .img-wrapper {
	position: relative;
	display: inline-block;
}

.recruit_culture .content_container .img-wrapper .shadow {
	position: absolute;
	top: 8px;
	left: -8px;
	width: 100%;
	height: 100%;
	background-color: #adbfcf;
	z-index: 1;
}

.recruit_culture .content_container .img-wrapper img {
	position: relative;
	z-index: 2;
}

.section_top {
	position: relative;
	padding: 0;
}

.section_top .img_container {
	display: none;
	width: 90%;
	margin: 0 auto;
}

.section_top .img_container img {
	width: 100%;
	max-height: 650px;
	object-fit: cover;
	opacity: 0;
	animation: fadeInUp 1s ease-out forwards;
}

.section_top .img_container img:nth-child(1) {
	animation-delay: 0.1s;
}

.section_top .img_container img:nth-child(2) {
	animation-delay: 0.3s;
}

.section_top .img_container img:nth-child(3) {
	animation-delay: 0.5s;
}

.section_top .img_container img:nth-child(4) {
	animation-delay: 0.7s;
}

.section_top .img_container img:nth-child(5) {
	animation-delay: 0.9s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.section_top .swiper_container {
	display: block;
}

.top_swiper,
.top_swiper2 {
	width: 100%;
	max-height: 220px;
}

.top_swiper img,
.top_swiper2 img {
	object-fit: cover;
	object-position: center top;
	max-height: 220px;
}

.section_top .recruit_text {
	position: absolute;
	bottom: -6.5cqw;
	left: 50%;
	transform: translateX(-50%);
	mix-blend-mode: normal;
	letter-spacing: 4px;
	color: rgb(187 232 225 / 80%);
	font-size: 18.5cqw;
	font-weight: bold;
	z-index: 2;
}

.section_catchphrase {
	padding: 40px 16px;
	text-align: center;
}

.section_catchphrase h3 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 16px;
}

.section_catchphrase p {
	font-size: 14px;
	line-height: 1.5;
}

/* Values Venn Diagram */
.recruit_values_venn {
	background-image: url('../img/recruit/value_background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0 16px;
	min-height: 400px;
	position: relative;
}

.recruit_values_venn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.1);
	z-index: 1;
}

.recruit_values_venn .section_header {
	position: relative;
	z-index: 10;
	margin-bottom: 32px;
}

.recruit_values_venn .head {
	display: flex;
	align-items: baseline;
	font-size: 28px;
	gap: 12px;
	margin-bottom: 0;
	font-weight: bold;
	justify-content: flex-start;
}

.recruit_values_venn .head span {
	font-size: 12px;
	font-weight: normal;
	color: #333;
	letter-spacing: 1px;
}

.venn_container {
	position: relative;
	z-index: 5;
	max-width: 400px;
	margin: 0 auto;
	height: 380px;
}

.venn_circle {
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 20px;
	color: black;
	mix-blend-mode: normal;
	opacity: 0;
}

.venn_circle h3 {
	font-size: 15px;
	font-weight: bold;
	margin: 8px 0 2px;
	letter-spacing: 1px;
}

.venn_circle p {
	font-size: 9px;
	padding: 0 6px;
	letter-spacing: 0px;
	text-align: left;
	min-height: 41px;
}

.venn_circle .circle_icon {
	width: 35px;
	height: 35px;
	filter: brightness(0) invert(1);
}

.circle_top {
	background: linear-gradient(133deg, rgba(255, 255, 255, 1) 0%, rgb(64 200 194 / 85%) 45%);
	top: 0;
	left: 50%;
	transform: translateX(-50%) scale(0.8) translateY(-50px);
	z-index: 3;
}

.venn_container.is-visible .circle_top {
	animation: enterTop 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.circle_left {
	background: linear-gradient(40deg, rgba(255, 255, 255, 1) 0%, rgb(145 195 228 / 85%) 60%);
	bottom: 64px;
	left: 4px;
	z-index: 2;
	transform: scale(0.8) translateX(-50px);
}

.venn_container.is-visible .circle_left {
	animation: enterLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.2s;
}

.circle_right {
	background: linear-gradient(317deg, rgba(255, 255, 255, 1) 0%, rgb(125 212 238 / 85%) 60%);
	bottom: 64px;
	right: 4px;
	z-index: 2;
	transform: scale(0.8) translateX(50px);
}

.venn_container.is-visible .circle_right {
	animation: enterRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.4s;
}

@keyframes enterTop {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.8) translateY(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1) translateY(0);
	}
}

@keyframes enterLeft {
	0% {
		opacity: 0;
		transform: scale(0.8) translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}

@keyframes enterRight {
	0% {
		opacity: 0;
		transform: scale(0.8) translateX(50px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateX(0);
	}
}

.bg_gradient_grey {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(229, 233, 236, 0.85) 70%);
}

.sectionPDF {
	margin-top: 40px;
	padding: 0 16px;
	padding-bottom: 40px;
}

.section_how_we_work {
	padding: 40px 24px;
}

.how_we_work_container {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.how_we_work_item {
	background: linear-gradient(140deg,
			rgba(214, 240, 236, 1) 0%,
			rgba(233, 246, 255, 1) 40%,
			rgba(241, 249, 255, 1) 70%,
			rgba(212, 235, 255, 1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 16px;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease-out;
}

.how_we_work_container.is-visible .how_we_work_item {
	opacity: 1;
	transform: translateY(0);
}

.how_we_work_container.is-visible .how_we_work_item:nth-child(2) {
	transition-delay: 0.2s;
}

.how_we_work_item_icon {
	width: 40px;
	height: 40px;
}

.how_we_work_item_content {
	flex: 1;
}

.how_we_work_item_content h3 {
	font-size: 18px;
	font-weight: bold;
}

.sectionPDF_container {
	position: relative;
	width: 100%;
	height: 196px;
	transition: all 0.3s ease;
	overflow: hidden;
}

/* PDF Loading Spinner */
.pdf-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 5;
}

.loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid rgba(129, 134, 160, 0.2);
	border-top: 3px solid #8186a0;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 16px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* PDF Swiper Wrapper */
.pdf-swiper-wrapper {
	position: relative;
	background: white;
	border-radius: 16px;
	padding: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: none;
}

.pdf-swiper-wrapper.active {
	display: block;
}

.pdf-swiper {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.pdf-swiper.loaded {
	opacity: 1;
}

.pdf-swiper-wrapper .swiper {
	width: 100%;
	height: 100%;
}

.pdf-swiper .swiper-wrapper {
	align-items: center;
}

.pdf-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fc;
	width: 100%;
	height: auto;
}

.pdf-swiper .swiper-slide canvas {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	display: block;
}

/* Navigation Buttons */
.pdf-swiper-wrapper .swiper-button-next,
.pdf-swiper-wrapper .swiper-button-prev {
	color: #8186a0;
	background: rgba(255, 255, 255, 0.9);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.pdf-swiper-wrapper .swiper-button-next:after,
.pdf-swiper-wrapper .swiper-button-prev:after {
	font-size: 16px;
	font-weight: bold;
}

.pdf-swiper-wrapper .swiper-button-next:hover,
.pdf-swiper-wrapper .swiper-button-prev:hover {
	background: white;
	color: #333;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pdf-swiper-wrapper .swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	min-height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section_walfare {
	margin-top: 40px;
	padding: 0 16px;
}

.welfare_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.welfare_item {
	border: 1px solid black;
	height: auto;
	padding: 20px 8px;
	position: relative;
	margin-right: -1px;
	margin-bottom: -1px;
}

.welfare_item_icon {
	float: initial;
	margin: 0 auto;
	position: relative;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
}

.welfare_item_content {
	margin-top: 16px;
}

.welfare_item_content h3 {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 8px;
}

.welfare_item_content p {
	font-size: 11px;
}

.background_gradient {
	background: linear-gradient(140deg,
			rgba(214, 240, 236, 1) 0%,
			rgba(233, 246, 255, 1) 40%,
			rgba(241, 249, 255, 1) 70%,
			rgba(212, 235, 255, 1) 100%);
}

.section_right_fit {
	margin-top: 40px;
	padding: 40px 0;
}

.right_fit_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.right_fit_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	flex: 0 0 calc(50% - 40px);
	max-width: calc(50% - 40px);
	padding: 24px 16px;
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}

.right_fit_item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered animation delays for right_fit items */
.right_fit_item:nth-child(1) { transition-delay: 0.1s; }
.right_fit_item:nth-child(2) { transition-delay: 0.2s; }
.right_fit_item:nth-child(3) { transition-delay: 0.3s; }
.right_fit_item:nth-child(4) { transition-delay: 0.4s; }
.right_fit_item:nth-child(5) { transition-delay: 0.5s; }

.right_fit_item.is-visible:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.right_fit_item_icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.right_fit_item_icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.right_fit_item_content {
	text-align: center;
	width: 100%;
}

.right_fit_item_content h3 {
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 8px;
}

.right_fit_item_content p {
	font-size: 8px;
	line-height: 1.6;
}

.section_flow {
	background-image: url('../img/recruit/flow_SP.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 40px 16px;
}

.section_flow h3 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 16px;
	margin-top: 8px;
}

.flow_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.flow_wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

/* Connecting line for mobile (vertical) */
.flow_wrapper::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: white;
	transform: translateX(-50%) scaleY(0);
	transform-origin: top;
	z-index: 1;
	transition: transform 1s ease-out;
}

.flow_wrapper.line-visible::before {
	transform: translateX(-50%) scaleY(1);
}

.flow_item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 4px;
	background: white;
	padding: 16px;
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.flow_item.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* Staggered animation delays for flow items */
.flow_item:nth-child(1) { transition-delay: 0.1s; }
.flow_item:nth-child(2) { transition-delay: 0.2s; }
.flow_item:nth-child(3) { transition-delay: 0.3s; }
.flow_item:nth-child(4) { transition-delay: 0.4s; }
.flow_item:nth-child(5) { transition-delay: 0.5s; }
.flow_item:nth-child(6) { transition-delay: 0.6s; }

.flow_pill {
	padding: 4px 8px;
	border-radius: 16px;
	font-size: 8px;
	font-weight: bold;
}

.flow_pill.red {
	background: #EAADBC;
	color: white;
}

.flow_pill.blue {
	background: #91AFE5;
	color: white;
}

.section_recruitment {
	padding: 40px 16px;
}

.recruitment_container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.recruitment_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Data Section */
.section_data {
	padding: 40px 16px;
}

.data_grid_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.data_item_1,
.data_item_2,
.data_item_3 {
	grid-column: 1 / -1;
}

.data_item_4,
.data_item_5,
.data_item_6,
.data_item_7,
.data_item_8,
.data_item_9,
.data_item_10,
.data_item_11 {
	grid-column: span 1;
}

.data_item {
	display: flex;
	flex-direction: column;
	background: white;
	padding: 12px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.data_item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered animation delay for each item */
.data_item_1 { transition-delay: 0.1s; }
.data_item_2 { transition-delay: 0.2s; }
.data_item_3 { transition-delay: 0.3s; }
.data_item_4 { transition-delay: 0.4s; }
.data_item_5 { transition-delay: 0.5s; }
.data_item_6 { transition-delay: 0.3s; }
.data_item_7 { transition-delay: 0.4s; }
.data_item_8 { transition-delay: 0.5s; }
.data_item_9 { transition-delay: 0.3s; }
.data_item_10 { transition-delay: 0.3s; }
.data_item_11 { transition-delay: 0.4s; }

.data_item_title {
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 8px;
	border-bottom: 1px solid #cecece;
	padding-bottom: 8px;
}

.data_item_content {
	flex: 1;
	padding-top: 8px;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.data_item_1 .upper_row {
	display: flex;
	gap: 14px;
	align-items: flex-end;
	justify-content: center;
}

.data_item_1 .icon_container {
	width: 80%;
	height: 54px;
	text-align: center;
	margin: 12px auto;
}

.data_item_1 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_1 .lower_row {
	text-align: center;
}

.data_item_1 .biggest_font {
	font-size: 15px;
	font-weight: bold;
}

.biggest_font span {
	font-size: 28px;
	font-weight: bold;
}

.data_item_1 .big_font {
	font-size: 14px;
}

.data_item_2 .data_item_content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.data_item_2 .text_content {
	font-size: 10px;
	line-height: 1.5;
}

.data_item_2 .text_content .color_green {
	font-weight: bold;
	margin-left: 4px;
	font-size: 11px;
}

.data_item_2 .icon_container {
	width: 90px;
	flex-shrink: 0;
}

.data_item_2 .icon_container img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.data_item_3 .data_item_content {
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 16px 0;
}

.data_item_3 .icon_container {
	height: 60px;
}

.data_item_3 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_3 .color_green {
	font-size: 36px;
}

.data_item_4 .data_item_content {
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

.data_item_4 .icon_container {
	height: 24px;
}

.data_item_4 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_4 .color_green {
	font-size: 22px;
}

.data_item_5 .data_item_content {
	font-size: 14px;
}

.data_item_5 .content_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

.data_item_5 .icon_container {
	height: 24px;
}

.data_item_5 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_5 .color_green {
	font-size: 22px;
}

.data_item_5 .lower_row {
	margin-top: 8px;
	font-size: 6px;
}

.data_item_6 .data_item_content {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.data_item_6 .icon_container {
	height: 32px;
}

.data_item_6 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_6 .color_green {
	font-size: 24px;
}

.data_item_7 .data_item_content {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.data_item_7 .icon_container {
	position: relative;
	height: 70px;
}

.data_item_7 .absolute_wrapper {
	position: absolute;
	top: 4px;
	left: 11px;
}

.data_item_7 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_7 .color_green {
	font-size: 24px;
}

.data_item_8 .text_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 16px;
	font-size: 9px;
}

.data_item_8 .text_item {
	text-align: center;
}

.data_item_8 .bigger_text {
	font-size: 11px;
}

.data_item_8 .bigger_text .color_green {
	font-size: 16px;
	font-weight: bold;
}

.data_item_9 .data_item_content {
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.data_item_9 .icon_container {
	height: 32px;
}

.data_item_9 .icon_container img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.data_item_9 .color_green {
	font-size: 24px;
}

.data_item_10 .text_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 16px;
	font-size: 9px
}

.data_item_10 .text_item {
	text-align: center;
}

.data_item_10 .bigger_text {
	font-size: 11px;
}

.data_item_10 .bigger_text .color_green {
	font-size: 16px;
	font-weight: bold;
}

.data_item_11 .text_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 6px;
}

.data_item_11 .text_item {
	display: flex;
	align-items: center;
	text-align: center;
}

.data_item_11 .bigger_text {
	font-size: 6px;
}

.data_item_11 .bigger_text .color_green {
	font-size: 10px;
	font-weight: bold;
}

.chart_container {
	height: 52px;
	width: 80%;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: -8px;
}

.chart_container_2 {
	height: 52px;
	width: 80%;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	margin-top: 12px;
}

.chart_container canvas, .chart_container_2 canvas {
	max-width: 100% !important;
	max-height: 100% !important;
}

.big_font span {
	font-size: 26px;
	font-weight: bold;
}

.color_green {
	color: #00A89E;
}

/* Interview Section */
.section_interview {
	margin-top: 40px;
	padding: 40px 0;
	overflow: hidden;
}

.interview_container {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.interview_item_content {
	background: white;
	text-align: left;
	margin-top: 16px;
}

.interview_item_content_main {
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 4px;
}

.interview_item_content_sub {
	display: flex;
	gap: 4px;
	font-size: 2.5vw;
	color: #666;
}

.interview-swiper {
	width: 100%;
	padding: 20px 0 50px 0;
}

.interview-swiper .swiper-wrapper {
	align-items: baseline;
}

.interview-swiper .swiper-slide {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	opacity: 0.6;
}

.interview-swiper .swiper-slide a {
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none;
}

.interview-swiper .swiper-slide-active {
	opacity: 1;
}

.interview-swiper .swiper-slide img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: block;
}

.interview-swiper .swiper-slide:hover img {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	transform: translateY(-4px);
}

.interview-swiper .swiper-pagination {
	bottom: 0;
}

.interview-swiper .swiper-pagination-bullet {
	background: #8186a0;
	opacity: 0.5;
}

.interview-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: #333;
}

/************************************************

  PC layout

************************************************/
@media screen and (min-width: 768px) {
	.center_pc {
		text-align: center;
	}

	#recruit .head {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		font-size: 38px;
		gap: 32px;
		margin-bottom: 32px;
		font-weight: bold;
	}

	#recruit .head span {
		font-size: 16px;
		font-weight: normal;
		color: #333;
		letter-spacing: 0px;
	}

	.recruit_info,
	.recruit_values,
	.recruit_code,
	.recruit_culture {
		padding: 72px 0;
	}

	.recruit_values .value_container,
	.recruit_code .value_container {
		padding: 48px 24px;
	}

	.recruit_values .value_container .header,
	.recruit_code .value_container .header {
		font-size: 26px;
		margin-bottom: 36px;
	}

	.recruit_values .value_container .content,
	.recruit_code .value_container .content {
		font-size: 20px;
	}

	.recruit_info .black-button {
		margin-top: 32px;
		padding: 16px 32px;
	}

	.recruit_culture .content_container {
		margin-top: 60px;
		margin-bottom: 60px;
		justify-content: center;
	}

	.recruit_culture .content_container .content {
		max-width: 700px;
	}

	.recruit_culture .content_container img {
		width: 175px;
	}

	.recruit_culture .content_container .content .title {
		font-size: 26px;
		margin-bottom: 12px;
		padding-bottom: 6px;
	}

	.recruit_culture .content_container .content .description {
		font-size: 20px;
	}

	.recruit_culture .content_container .img-wrapper .shadow {
		top: 16px;
		left: -16px;
	}

	/* SECTION Values Venn Diagram - PC */
	.recruit_values_venn {
		padding: 40px 32px;
		min-height: 700px;
	}

	.recruit_values_venn .head {
		font-size: 48px;
		gap: 24px;
		margin-bottom: 48px;
	}

	.recruit_values_venn .head span {
		font-size: 18px;
	}

	.venn_container {
		max-width: 900px;
		height: 700px;
		margin-top: 60px;
	}

	.venn_circle {
		width: 300px;
		height: 300px;
		padding: 40px;
	}

	.venn_circle h3 {
		font-size: 24px;
		margin: 16px 0 12px;
		letter-spacing: 2px;
	}

	.venn_circle p {
		font-size: 15px;
		letter-spacing: 1px;
		text-align: left;
		min-height: 68px;
	}

	.venn_circle .circle_icon {
		width: 80px;
		height: 80px;
	}

	.circle_top {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.circle_left {
		bottom: 35px;
		left: 100px;
	}

	.circle_right {
		bottom: 35px;
		right: 100px;
	}
}

/************************************************
  SECTION How We Work - PC
************************************************/
@media screen and (min-width: 768px) {
	.section_how_we_work {
		padding: 80px 32px;
	}

	.how_we_work_container {
		flex-direction: row;
		gap: 20px;
	}

	.how_we_work_item {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		padding: 32px 24px;
	}

	.how_we_work_item_icon {
		width: 60px;
		height: 60px;
	}

	.how_we_work_item_content {
		flex: 1;
	}

	.how_we_work_item_content h3 {
		font-size: 24px;
		font-weight: bold;
	}

	/* PDF Section - Desktop */
	.sectionPDF {
		padding: 0 32px;
		padding-bottom: 80px;
	}

	.sectionPDF_container {
		height: 420px;
		width: 100%;
		margin: 0 auto;
		padding: 32px 64px
	}

	.pdf-swiper-wrapper {
		width: 65%;
		padding: 24px 0;
	}

	.pdf-swiper-wrapper .swiper {
		width: calc(100% - 64px);
	}

	.pdf-swiper-wrapper .swiper-button-next,
	.pdf-swiper-wrapper .swiper-button-prev {
		width: 50px;
		height: 50px;
	}

	.pdf-swiper-wrapper .swiper-button-next {
		right: -60px;
	}

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

	.pdf-swiper-wrapper .swiper-button-next:after,
	.pdf-swiper-wrapper .swiper-button-prev:after {
		font-size: 20px;
	}

	/* SECTION Right Fit - PC */
	.section_right_fit {
		margin-top: 80px;
		padding: 100px 32px;
	}

	.right_fit_container {
		gap: 24px;
	}

	.right_fit_item {
		flex: 0 0 calc(33.333% - 64px);
		max-width: calc(33.333% - 64px);
		padding: 32px 24px;
	}

	.right_fit_item_icon {
		width: 60px;
		height: 60px;
	}

	.right_fit_item_content h3 {
		font-size: 20px;
		margin-bottom: 12px;
	}

	.right_fit_item_content p {
		font-size: 14px;
	}

	.section_flow {
		background-image: url('../img/recruit/flow_PC.jpg');
	}

	.section_flow h3 {
		text-align: left;
		margin-top: 40px;
	}

	.flow_container {
		grid-template-columns: repeat(1, 1fr);
	}

	.flow_wrapper {
		flex-direction: row;
		gap: 16px;
	}

	/* Connecting line for desktop (horizontal) */
	.flow_wrapper::before {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		width: auto;
		height: 6px;
		transform: translateY(-50%) scaleX(0);
		transform-origin: left;
	}

	.flow_wrapper.line-visible::before {
		transform: translateY(-50%) scaleX(1);
	}

	.flow_item {
		flex-direction: column;
		gap: 4px;
		min-height: 120px;
		justify-content: center;
		padding: 12px;
	}

	.flow_pill {
		padding: 4px 12px;
		font-size: 11px;
	}

	.recruitment_container {
		display: flex;
		flex-direction: row;
		gap: 32px;
	}

	/* Interview Section - Desktop */
	.section_interview {
		margin-top: 80px;
		padding: 80px 0;
	}

	.interview_item_content_main {
		font-size: 13px;
		margin-bottom: 8px;
	}
	
	.interview_item_content_sub {
		gap: 4px;
		font-size: 0.65vw;
	}

	.interview-swiper {
		padding: 30px 0 60px 0;
	}

	.data_grid_container {
		grid-template-columns: repeat(6, 1fr);
	}

	.data_item {
		padding: 24px;
	}

	.data_item_title {
		font-size: 16px;
	}

	.data_item_1,
	.data_item_2 {
		grid-column: span 3;
	}

	.data_item_3,
	.data_item_4,
	.data_item_5,
	.data_item_6,
	.data_item_7,
	.data_item_8,
	.data_item_9,
	.data_item_10,
	.data_item_11 {
		grid-column: span 2;
	}

	.data_item_1 .icon_container {
		height: 116px;
	}

	.data_item_1 .upper_row {
		gap: 48px;
	}

	.data_item_1 .biggest_font {
		font-size: 24px;
	}

	.biggest_font span {
		font-size: 52px;
	}

	.data_item_1 .big_font {
		font-size: 20px;
	}

	.big_font span {
		font-size: 32px;
	}

	.data_item_2 .data_item_content {
		gap: 32px;
	}

	.data_item_2 .text_content {
		font-size: 16px;
	}

	.data_item_2 .text_content .color_green {
		font-size: 22px;
		margin-left: 8px;
	}

	.data_item_2 .icon_container {
		width: 200px;
	}

	.data_item_3 .data_item_content {
		margin: 32px 0;
		font-size: 32px;
	}

	.data_item_3 .icon_container {
		height: 75px;
	}

	.data_item_3 .color_green {
		font-size: 48px;
	}

	.data_item_4 .data_item_content {
		font-size: 32px;
		gap: 16px;
		margin: 32px 0;
	}

	.data_item_4 .icon_container {
		height: 65px;
	}

	.data_item_4 .color_green {
		font-size: 48px;
	}

	.data_item_5 .data_item_content {
		font-size: 32px;
	}

	.data_item_5 .content_wrapper {
		gap: 16px;
		margin: 12px 0;
	}

	.data_item_5 .icon_container {
		height: 65px;
	}

	.data_item_5 .color_green {
		font-size: 48px;
	}

	.data_item_5 .lower_row {
		margin-top: 20px;
		font-size: 11px;
	}

	.data_item_6 .data_item_content {
		font-size: 32px;
		gap: 16px;
	}

	.data_item_6 .icon_container {
		height: 65px;
	}

	.data_item_6 .color_green {
		font-size: 48px;
	}

	.data_item_7 .data_item_content {
		font-size: 32px;
		gap: 16px;
	}

	.data_item_7 .icon_container {
		height: 140px;
	}

	.data_item_7 .absolute_wrapper {
		top: 20px;
		left: 20px;
	}

	.data_item_7 .color_green {
		font-size: 48px;
	}

	.data_item_8 .text_wrapper {
		font-size: 16px;
		line-height: normal;
	}

	.data_item_8 .bigger_text {
		font-size: 24px;
	}

	.data_item_8 .bigger_text .color_green {
		font-size: 32px;
	}

	.data_item_9 .data_item_content {
		font-size: 32px;
		gap: 16px;
	}

	.data_item_9 .icon_container {
		height: 65px;
	}

	.data_item_9 .color_green {
		font-size: 48px;
	}

	.data_item_10 .text_wrapper {
		font-size: 16px;
		line-height: normal;
	}

	.data_item_10 .bigger_text {
		font-size: 24px;
	}

	.data_item_10 .bigger_text .color_green {
		font-size: 32px;
	}

	.data_item_11 .text_wrapper {
		font-size: 16px;
	}

	.data_item_11 .bigger_text {
		font-size: 18px;
	}

	.data_item_11 .bigger_text .color_green {
		font-size: 24px;
	}

	.chart_container {
		width: 80%;
		margin: 0 auto;
		height: 160px;
		margin-top: -24px;
	}

	.chart_container_2 {
		width: 80%;
		margin: 0 auto;
		height: 160px;
		margin-top: 12px;
	}

	.section_top {
		padding: 16px;
	}

	.section_top .img_container {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}

	.section_top .swiper_container {
		display: none;
	}

	.section_top .recruit_text {
		mix-blend-mode: overlay;
		color: #ffffff;
		bottom: -4.5cqw;
		letter-spacing: 12px;
		font-size: 15cqw;
	}

	.section_catchphrase {
		margin-top: 40px;
		padding: 40px 16px;
	}

	.section_catchphrase h3 {
		font-size: 28px;
		margin-bottom: 28px;
	}

	.section_catchphrase p {
		font-size: 18px;
	}

	.section_data {
		padding: 80px 16px;
	}

	.welfare_container {
		grid-template-columns: repeat(3, 1fr);
	}

	.welfare_item {
		height: 140px;
		padding: 52px 42px 24px;
	}

	.welfare_item_content h3 {
		text-align: left;
		font-size: 16px;
	}

	.welfare_item_content p {
		font-size: 12px;
	}

	.welfare_item_icon {
		float: right;
		top: -16px;
		right: 0px;
		width: 42px;
		height: 42px;
	}
}

.sp_only {
	display: block;
}

.pc_only {
	display: none;
}

@media screen and (min-width: 768px) {
	.sp_only {
		display: none;
	}

	.pc_only {
		display: block;
	}
}