@charset "UTF-8";
/* ==========================================================
   2026-09 HP改修（採用LP誘導）共通パーツ
   styles.css は gulp 再コンパイル禁止のため、追加・上書きはこのファイルで行う
   ブランド色: #E3AAAA（ピンク） / 濃色 #483F43 / 文字 #444
   ========================================================== */

/* 採用LP遷移ボタン（MOREボタンの雰囲気に寄せた細身スタイル。CTAなのでMOREより少しだけ大きい） */
.c-lp-btn {
	background-color: #E3AAAA;
	border: 2px solid #E3AAAA;
	border-radius: 999px;
	color: #fff;
	display: block;
	font-size: 0.8125rem;
	font-weight: bold;
	letter-spacing: 0.13em;
	line-height: 1.4;
	margin: 0 auto;
	max-width: 16.25rem;
	padding: 0.6875rem 2.5rem 0.6875rem 1.75rem;
	position: relative;
	text-align: center;
	transition: opacity .3s;
	width: 100%;
}

.c-lp-btn::after {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	height: 0.375rem;
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 0.375rem;
}

.c-lp-btn:hover {
	opacity: .75;
}

.c-lp-btn--sub {
	background-color: #fff;
	color: #E3AAAA;
}

.c-lp-btn--blue {
	background-color: #48729a;
	border-color: #48729a;
	color: #fff;
}

.c-lp-btn--sub.c-lp-btn--blue {
	background-color: #fff;
	border-color: #48729a;
	color: #48729a;
}

.c-lp-buttons {
	background-color: #fff;
	border-radius: 10px;
	margin: 3.75rem auto 0;
	max-width: 22.5rem;
	padding: 1.75rem 1.25rem;
	text-align: center;
}

.c-lp-buttons_title {
	color: #444;
	font-size: 1.125rem;
	font-weight: bold;
	letter-spacing: 0.08em;
}

.c-lp-buttons_lead {
	color: #444;
	font-size: 0.8125rem;
	line-height: 1.8;
	margin-top: 0.5rem;
}

.c-lp-buttons_list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* インタビュー記事スライダー */
.c-interview-slider {
	margin: 2.5rem auto 0;
	max-width: 20rem;
}

.c-interview-slider_item {
	padding: 0.25rem 0.5rem 0.75rem;
}

.c-interview-slider_card.c-card {
	height: auto;
	margin: 0 auto;
	padding-bottom: 1.25rem;
	width: 100%;
}

/* 日付がタイトル(最大3行)と重ならないよう静的配置にする */
.c-interview-slider_card .c-card_date {
	bottom: auto;
	left: auto;
	margin-top: 0.75rem;
	position: static;
}

/* スライドごとの高さが違ってもナビが動かないよう、カードの高さを揃える
   （adaptiveHeightは使わない。revise.js側でも無効化済み） */
.c-interview-slider .slick-track {
	display: flex;
}

.c-interview-slider .slick-slide {
	height: auto;
}

.c-interview-slider .slick-slide > div,
.c-interview-slider .slick-slide .c-interview-slider_item,
.c-interview-slider .slick-slide .c-interview-slider_card.c-card {
	height: 100%;
}

.c-interview-slider_nav {
	align-items: center;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	margin-top: 1rem;
}

.c-interview-slider_arrow {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: opacity .3s;
	width: 2.125rem;
}

.c-interview-slider_arrow:hover {
	opacity: .7;
}

.c-interview-slider_count {
	color: #444;
	font-family: "Barlow", sans-serif;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	min-width: 3.5rem;
	text-align: center;
}

/* 1画面1記事を大きく見せる */
@media screen and (min-width: 768px) {
	.c-interview-slider {
		max-width: 26.25rem;
	}
}

/* ==========================================================
   front-page.php: TOPページ改修（求職者を優先する並び順）
   ========================================================== */

/* Recruitセクション: MOREボタンを新卒/中途の2ボタンに置き換え。
   PC・SPとも縦に並べて中央揃え。2つとも同じ見た目（白塗り・白枠・文字ピンク）にし、
   中途を下位に見せないようにする。ピンクの丸い背景(.p-toprecruit_bg::after)の上に
   乗るため、配色はこのセクション内だけ反転して視認性を確保する */
.p-topRecruit_button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9375rem;
}

.p-topRecruit_button .c-lp-btn {
	background-color: #fff;
	border-color: #fff;
	color: #E3AAAA;
	max-width: none;
	white-space: nowrap;
	width: 13.75rem;
}

/* ボタンを縦並びにした分、ピンクの円(.p-toprecruit_bg::after)の下端が
   セクション下端からはみ出さないよう、下paddingを増やす（measure.pyで確認） */
.p-topRecruit {
	padding-bottom: 12.5rem;
}

@media screen and (min-width: 768px) {
	.p-topRecruit {
		padding-bottom: 18rem;
	}
}

/* 並び替えでRecruitがFV直後の最初のセクションになったため、
   上の余白を他のセクション(Company)と同じだけ取る */
.p-topRecruit {
	padding-top: 7.0625rem;
}

@media screen and (min-width: 768px) {
	.p-topRecruit {
		padding-top: 9.375rem;
	}
}

/* ボタンの列を上のリード文(.p-topRecruit_box)と同じ位置・幅にして、文章の下の中央に置く。
   styles.css の .p-topRecruit_button a の左右padding(SP 42px / PC 73px)が残ると
   文字がボタン中央からずれるので、左右対称のpaddingに戻す */
.p-topRecruit_button {
	margin-left: 31%;
	max-width: 13.3125rem;
}

.p-topRecruit_button .c-lp-btn {
	max-width: 100%;
	padding: 0.5625rem 2rem;
}

/* styles.css の hover(背景ピンク)で文字もピンクのままだと見えなくなるため、
   hover時は白文字・白枠のピンク塗りに反転させる */
.p-topRecruit_button .c-lp-btn:hover {
	background-color: #E3AAAA;
	border-color: #fff;
	color: #fff;
	opacity: 1;
}

@media screen and (min-width: 768px) {
	.p-topRecruit_button {
		margin-left: 42%;
		max-width: 23.25rem;
	}
}

/* Blogセクション（front-page）: RecruitとMiddle画像の間に移動したインタビュースライダー */
.p-topEvandblog .c-interview-slider {
	margin-top: 2.5rem;
}

/* Blogが最後のセクションでなくなったため、下側の丸い角は最後のセクション(News)側へ移す。
   MOREボタンはPCでは絶対配置で右下に浮いていたので、スライダー前後ボタンの下・中央へ */
@media screen and (min-width: 768px) {
	.p-topEvandblog--top {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.p-topEvandblog--top .p-topEvandblog_button {
		bottom: auto;
		margin-top: 2.5rem;
		position: static;
		right: auto;
		text-align: center;
	}
}

/* Newsが最後のセクションになったため、下側の丸い角とBlogと同程度の下余白を持たせる */
@media screen and (min-width: 768px) {
	.p-newsrelease {
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		padding-bottom: 6.25rem;
	}
}

/* CompanyのMOREボタン下端からBusiness見出しまでの空白が広すぎるため、
   padding-bottomを詰める（Businessのpadding-topは青い円上の余白なので変更しない） */
.p-topCompany {
	padding-bottom: 2.5rem;
}

@media screen and (min-width: 768px) {
	.p-topCompany {
		padding-bottom: 3.75rem;
	}
}

/* ==========================================================
   page-contact.php: Contactページ改修
   ========================================================== */

/* 「採用に関するお問い合わせ」ブロックは中間ブロックになったため、
   PCの下側角丸・下paddingを外し、下の「事業のお問い合わせ」ブロックと
   継ぎ目なく続ける（ブロック間の余白は事業ブロック側のpadding-topで確保） */
.p-contact-business--recruit {
	padding-bottom: 0;
}

@media screen and (min-width: 768px) {
	.p-contact-business--recruit {
		border-radius: 0;
	}
}

/* 採用ブロックのフォームは中途ページ用のグレー背景・大きな余白を持つため、
   事業のお問い合わせ（CF7）と同じ見た目になるよう打ち消す */
.p-contact-business--recruit .p-contact-form {
	background: transparent;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.p-contact-business--recruit .p-contact-form_read {
	margin-top: 1.9375rem;
}

/* 採用ブロックはピンク(Recruit)扱いなので、フォームのラベル・送信ボタンをピンクにして
   事業側（ブルー）と区別する */
.p-contact-business--recruit .p-contact-form_field label {
	color: #E3AAAA;
}

.p-contact-business--recruit .p-contact-form_submit input {
	color: #E3AAAA;
}

/* 「求人への応募」ブロック内の.c-lp-buttonsは白い箱の中の白い箱になってしまうため、
   薄グレー背景で箱として見えるようにする */
.p-contact-recruit .c-lp-buttons {
	background-color: #F0F0F0;
}

/* PCではリード文「…まとめています。」の「す。」だけが改行されるため、箱の最大幅を広げる
   （ボタン幅(.c-lp-btn)自体は変えない。SPは幅いっぱいのままなので変更不要） */
@media screen and (min-width: 768px) {
	.p-contact-recruit .c-lp-buttons {
		max-width: 24rem;
	}
}