@charset "utf-8";

/* 採用ページ（新サイト skyo 向け）
--------------------------------------------- */
.p-recruit .c-section-heading,
body.page .p-recruit .c-section-heading {
	text-align: center;
}
.p-recruit .c-section-heading__jp,
.p-recruit .c-section-heading__ja {
	display: block;
	color: #008982;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
}
.p-article.p-recruit {
	padding-top: 130px;
	margin-bottom: 0;
	background-color: #edf6f2;
}
.p-recruit-hero + .p-article.p-recruit {
	padding-top: 80px;
}
.p-recruit-sec p {
	line-height: 1.9;
	color: #393939;
}
.p-recruit a[href^="tel"] {
	text-decoration: none;
}

/* password */
.p-recruit-password {
	max-width: 640px;
	text-align: center;
	margin: 0 auto 80px;
}
.p-recruit-password__lead {
	margin-bottom: 30px;
}
.p-recruit-password .post-password-form input[type="password"] {
	padding: 12px 16px;
	font-size: 16px;
	width: 240px;
	max-width: 100%;
	border: 1px solid #ddd;
	border-radius: 6px;
}
.p-recruit-password .post-password-form input[type="submit"] {
	background: linear-gradient(237deg, #33bf9a 1.65%, #008982 61.43%);
	color: #fff;
	border: none;
	padding: 12px 24px;
	cursor: pointer;
	font-size: 16px;
	border-radius: 9999px;
}

/* panorama + chalkboard hero */
.p-recruit-panorama {
	margin: 0;
	width: 100%;
	height: 360px;
	overflow: hidden;
	background: #d8d8d8;
	line-height: 0;
}
.p-recruit-panorama img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.p-recruit-hero {
	background: #1f3a2e;
	text-align: center;
	padding: 88px 20px 80px;
	margin: 0;
}
.p-recruit-hero .container {
	max-width: 760px;
}
.p-recruit-hero__kicker {
	color: #d8c07a;
	letter-spacing: 0.28em;
	font-size: 13px;
	margin-bottom: 28px;
}
.p-recruit-hero__title {
	color: #fff;
	font-size: 40px;
	line-height: 1.45;
	letter-spacing: 0.04em;
	text-align: center;
	font-weight: 700;
}
.p-recruit-hero__lead {
	margin-top: 28px;
	font-size: 16px;
	color: #cfdcd5;
	line-height: 2;
}
.p-recruit-hero__accent {
	margin-top: 32px;
	color: #d8c07a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
}
.p-recruit-hero__accent::before {
	content: "";
	display: block;
	width: 280px;
	max-width: 70%;
	height: 1px;
	background: #d8c07a;
	margin: 0 auto 28px;
}

/* PC: message / work / requirements / contact */
@media (min-width: 992px) {
	#message > .container,
	#work > .container,
	#requirements > .container,
	#tel > .container {
		max-width: 1100px;
	}
}

/* photos / message / work */
.p-recruit-photo {
	margin: 0;
}
.p-recruit-photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.p-recruit-message__intro {
	color: #008982;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 28px;
}
.p-recruit-sec ul:not(.p-recruit-env__notes) {
	margin: 0 0 1.6em;
	padding-left: 0;
	list-style: none;
}
.p-recruit-sec ul:not(.p-recruit-env__notes) li {
	position: relative;
	padding-left: 1.2em;
	margin-bottom: 0.5rem;
	line-height: 1.9;
	list-style: none;
}
.p-recruit-sec ul:not(.p-recruit-env__notes) li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 8px;
	height: 8px;
	background-color: #008982;
	border-radius: 50%;
}
.p-recruit-message__sign {
	margin-top: 28px;
	font-weight: 700;
	text-align: right;
}
.p-recruit-cta {
	margin-top: 40px;
	text-align: center;
}
.p-recruit-sec h3 {
	color: #393939;
	font-size: 22px;
	line-height: 1.6;
	margin: 0 0 28px;
	font-weight: 700;
}

/* staff blog banner */
.p-recruit-staff {
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	line-height: 0;
}
.p-recruit-staff img {
	width: 100%;
	height: auto;
	display: block;
}
.p-recruit-staff img.p-recruit-staff__sp {
	display: none;
}
@media screen and (max-width: 767px) {
	.p-recruit-staff img.p-recruit-staff__pc {
		display: none;
	}
	.p-recruit-staff img.p-recruit-staff__sp {
		display: block;
	}
}

/* environment slider */
.p-recruit-env__lead {
	text-align: center;
	margin-bottom: 30px;
}
.env-slider {
	overflow: hidden;
	margin: 0 auto 0;
	max-width: 100%;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}
.env-slider.is-dragging {
	cursor: grabbing;
}
.env-slider-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: recruit-marquee 60s linear infinite;
}
.env-slider.is-js .env-slider-track {
	animation: none;
}
.env-slider:hover .env-slider-track {
	animation-play-state: paused;
}
.env-slider-set {
	display: flex;
	flex-shrink: 0;
}
.env-slider-set img {
	height: 220px;
	width: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: none;
	flex-shrink: 0;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
}
@keyframes recruit-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.env-slider {
		animation: none;
		cursor: default;
	}
	.env-slider-track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		max-width: 1140px;
		margin: 0 auto;
		justify-content: center;
		transform: none !important;
		will-change: auto;
	}
	.env-slider-set:nth-child(2) {
		display: none;
	}
	.env-slider-set {
		flex-wrap: wrap;
		justify-content: center;
	}
	.env-slider-set img {
		height: 160px;
		margin: 0;
	}
}
.p-recruit-sec .p-recruit-env__notes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px 40px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	text-align: center;
	width: 100%;
	max-width: none;
}
.p-recruit-sec .p-recruit-env__notes li {
	list-style: none;
	line-height: 1.9;
}
.p-recruit-sec .p-recruit-env__notes li::before {
	content: "・";
}
.p-recruit-sec .p-recruit-env__notes li.is-full {
	flex-basis: 100%;
	width: 100%;
}
@media (min-width: 992px) {
	.p-recruit-sec .p-recruit-env__notes {
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}
}

/* requirements: reuse company-outline, keep dt top-aligned with a fixed label width */
.p-recruit .company-outline__row {
	align-items: stretch;
}
.p-recruit .company-outline__term {
	align-items: flex-start;
	flex: 0 0 174px;
	width: 174px;
	min-width: 174px;
	box-sizing: border-box;
	white-space: nowrap;
}
.p-recruit .company-outline__desc {
	flex: 1 1 auto;
	min-width: 0;
}

/* flow */
.p-recruit-steps {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
}
.p-recruit-steps li {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
	background: #fff;
	padding: 24px 12px;
	text-align: center;
	position: relative;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.p-recruit-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #008982;
	border-right: 2px solid #008982;
	transform: translateY(-50%) rotate(45deg);
	z-index: 1;
}
.p-recruit-steps__num {
	display: block;
	color: #dfcd72;
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.p-recruit-steps__title {
	font-weight: 700;
	margin-top: 8px;
	margin-bottom: 0;
	color: #008982;
	line-height: 1.45;
	word-break: keep-all;
}
.p-recruit-steps__text {
	margin-top: 8px;
	margin-bottom: 0;
	font-size: 13px;
	color: #555;
	line-height: 1.6;
}
.p-recruit-note {
	margin-top: 20px;
	font-size: 13px;
	color: #555;
}

/* contact */
.p-recruit-contact__name {
	font-size: 16px;
	font-weight: 500;
	color: #393939;
	margin-bottom: 4px;
}
.p-recruit-contact__tel {
	margin: 12px 0 4px;
	font-size: 22px;
	font-weight: 700;
	color: #008982;
	line-height: 1.4;
}
.p-recruit-contact__tel a {
	color: #008982;
	font-weight: 700;
}
.p-recruit-contact__catch {
	margin-top: 16px;
	font-weight: 500;
	color: #393939;
}

/* form */
.p-recruit .c-form-card {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
}
.p-recruit .contact-block {
	width: 100%;
	margin: 0;
}
.p-recruit .contact-block dl {
	display: block;
	padding: 0 0 22px;
	border: none;
	margin: 0;
}
.p-recruit .contact-block dl dt {
	width: 100%;
	font-weight: 700;
	color: #393939;
	margin-bottom: 8px;
}
.p-recruit .contact-block dl dt .red {
	display: inline-block;
	margin-left: 8px;
	background: #008982;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 4px;
	vertical-align: middle;
}
.p-recruit .contact-block dl dt .gray {
	display: inline-block;
	margin-left: 8px;
	background: #eaeaea;
	color: #555;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 4px;
	vertical-align: middle;
}
.p-recruit .contact-block dl dd {
	width: 100%;
	margin: 0;
}
.p-recruit .contact-block input[type="text"],
.p-recruit .contact-block input[type="email"],
.p-recruit .contact-block input[type="tel"],
.p-recruit .contact-block textarea {
	padding: 14px 16px;
	width: 100%;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #edf6f2;
	box-sizing: border-box;
}
.p-recruit .contact-block textarea {
	min-height: 120px;
}
.p-recruit-form-privacy {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 24px;
	color: #555;
	font-size: 13px;
}
.p-recruit-form-privacy p {
	margin: 0;
	order: 2;
}
.p-recruit-form-privacy .mwform-checkbox-field {
	order: 1;
}
.p-recruit-form-privacy label {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}
.p-recruit-form-privacy .mwform-checkbox-field-text {
	display: none;
}
.p-recruit-form-privacy a {
	display: inline;
	color: #555;
	font-size: inherit;
	text-decoration: underline;
	order: 2;
}
.p-recruit .contact-block .submit-button {
	text-align: center;
	margin-top: 8px;
}
.p-recruit .contact-block input[type="submit"] {
	background: linear-gradient(237deg, #33bf9a 1.65%, #008982 61.43%);
	color: #fff;
	border: none;
	padding: 16px 48px;
	font-size: 16px;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	border-radius: 9999px;
	font-weight: 600;
}
.p-recruit .contact-block .error {
	color: #a11010;
	font-size: 13px;
}
.p-recruit .mwform-radio-field,
.p-recruit .mwform-checkbox-field {
	display: inline-block;
}
.p-recruit .mwform-radio-field input,
.p-recruit .mwform-checkbox-field input {
	width: auto;
	margin-right: 6px;
}
.p-recruit-form__tel {
	margin-top: 24px;
	text-align: center;
	color: #555;
	font-size: 13px;
}
.p-recruit-form__tel a {
	color: #555;
}

/* thanks */
.p-recruit-thanks {
	text-align: center;
	padding-bottom: 80px;
}
.p-recruit-thanks__title {
	color: #008982;
	font-size: 40px;
	line-height: 1.4;
	margin-bottom: 24px;
	font-weight: 700;
}
.p-recruit-thanks__lead {
	margin-bottom: 16px;
}

@media screen and (max-width: 991px) {
	.p-recruit .company-outline__term {
		flex: none;
		width: 100%;
		min-width: 0;
		white-space: normal;
	}
	.p-recruit-steps {
		flex-wrap: wrap;
		gap: 16px 12px;
	}
	.p-recruit-steps li {
		flex: 1 1 calc(50% - 12px);
		min-width: calc(50% - 12px);
		padding: 20px 16px;
	}
	.p-recruit-steps li:nth-child(even)::after,
	.p-recruit-steps li:last-child::after {
		content: none;
	}
}

@media screen and (max-width: 767px) {
	.p-recruit-panorama {
		height: 180px;
	}
	.p-recruit-hero {
		padding: 56px 16px 52px;
	}
	.p-recruit-hero__title {
		font-size: 24px;
	}
	.p-recruit-hero__kicker {
		letter-spacing: 0.16em;
		font-size: 12px;
	}
	.p-article.p-recruit {
		padding-top: 30px;
	}
	.p-recruit-hero + .p-article.p-recruit {
		padding-top: 40px;
	}
	.p-recruit-message__intro {
		font-size: 18px;
	}
	.p-recruit .c-button {
		width: 100%;
	}
	.env-slider-set img {
		height: 160px;
	}
	.p-recruit-steps {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 20px;
	}
	.p-recruit-steps li {
		width: 100%;
		max-width: 100%;
		flex: none;
		min-width: 0;
		padding: 20px 16px;
		margin-bottom: 0;
	}
	.p-recruit-steps li:not(:last-child)::after {
		content: "";
		right: auto;
		left: 50%;
		top: auto;
		bottom: -14px;
		transform: translateX(-50%) rotate(135deg);
	}
	.p-recruit-steps li:last-child::after {
		content: none;
	}
	.p-recruit-thanks__title {
		font-size: 28px;
	}
}

/* 採用ページの固定バー（エントリー / 電話）
--------------------------------------------- */
#form {
	scroll-margin-top: 120px;
}
.c-side-cta.c-side-cta--recruit {
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.c-side-cta--recruit .c-side-cta__entry,
.c-side-cta--recruit .c-side-cta__call {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #008982;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.15);
}
.c-side-cta--recruit .c-side-cta__entry:hover,
.c-side-cta--recruit .c-side-cta__call:hover {
	color: #fff;
	opacity: 0.9;
	text-decoration: none;
}
.c-side-cta--recruit .c-side-cta__entry {
	width: 57px;
	padding: 20px 10px;
	border-radius: 10px 0 0 10px;
}
.c-side-cta--recruit .c-side-cta__trigger-text {
	writing-mode: vertical-rl;
	letter-spacing: 0.2em;
}
.c-side-cta--recruit .c-side-cta__call {
	width: 57px;
	min-height: 57px;
	border-radius: 10px 0 0 10px;
	font-size: 18px;
}
.c-side-cta--recruit .c-side-cta__call span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 991px) {
	.c-side-cta.c-side-cta--recruit {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		padding: 0;
		overflow: hidden;
		box-sizing: border-box;
	}
	.c-side-cta.c-side-cta--recruit .c-side-cta__entry,
	.c-side-cta.c-side-cta--recruit .c-side-cta__call {
		flex: 1 1 0;
		width: 0;
		max-width: 50%;
		min-width: 0;
		overflow: hidden;
		box-sizing: border-box;
		min-height: 0;
		padding: 14px 8px;
		border-radius: 0;
		box-shadow: none;
	}
	.c-side-cta--recruit .c-side-cta__trigger-text {
		writing-mode: horizontal-tb;
		letter-spacing: 0.1em;
		font-size: 1rem;
	}
	.c-side-cta--recruit .c-side-cta__call {
		gap: 6px;
		background-color: #007068;
	}
	.c-side-cta--recruit .c-side-cta__call span {
		position: static;
		width: auto;
		min-width: 0;
		height: auto;
		margin: 0;
		overflow: hidden;
		clip: auto;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: clamp(11px, 3.4vw, 14.4px);
		letter-spacing: 0;
	}
	body.recruit {
		padding-bottom: 52px;
	}
}