@charset "UTF-8";
/*
* 競馬共助会 採用情報CSS（recruit / requirements専用）
* customize.css から採用情報関連のスタイルを分離したファイル。
* 読み込み対象: recruitページ配下 / requirements投稿タイプの単一・アーカイブ
*/

/*=====================================================================================================
目次（Ctrl+F / Cmd+Fでセクション名を検索してください）
---------------------------------------------------------------------------------------------------
- 募集職種一覧：基本レイアウト
- 採用区分・勤務先フィルター
- 募集職種カード
- 絞り込み0件表示
- もっと見る
- 一覧：タブレット調整
- 一覧：スマートフォン調整
- 募集職種詳細
- 詳細下部：採用区分ナビ
- 詳細共通：タイトル・サマリー・リンク
- Hover / Focus
- 募集職種一覧カード：最終調整
=====================================================================================================*/

/*=====================================================================================================
ブレークポイントの運用ルール
---------------------------------------------------------------------------------------------------
基本は「SP（〜767px）」「タブレット（768px〜1199px）」「PC（1200px〜）」の3段階。
=====================================================================================================*/

/*-------------------------------------------------------------------------------------------------募集職種一覧：基本レイアウト*/
.recruit_requirements{
	margin:50px 0 0;
}
.recruit_requirements_header{
	text-align:center;
}
.recruit_requirements_header h2{
	margin:0;
	font-size:32px;
	line-height:1.45;
}
@media screen and (max-width:767px){
	.recruit_requirements{margin:30px 0 0;}
	.recruit_requirements_header h2{font-size:26px;}
	.page_body,
	.recruit_requirements,
	.recruitment_list,
	.recruitment_detail{
		width:100%;
		max-width:100%;
		min-width:0;
	}
}
.recruitment_card{
	position:relative;
	display:flex;
	flex-direction:column;
	padding:18px 20px 16px;
	border:1px solid #ddd8cf;
	border-radius:8px;
	color:var(--color-text);
	background:#fff;
	text-decoration:none;
	transition:border-color .25s ease;
}
.recruitment_card::after{
	content:"";
	position:absolute;
	inset:0;
	border:1px solid transparent;
	border-radius:inherit;
	pointer-events:none;
	transition:border-color .25s ease;
}
.recruitment_card_top{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:12px 18px;
}
.recruitment_date{
	font-size:15px;
	font-weight:600;
}
.recruitment_date--urgent{
	position:absolute;
	top:-30px;
	right:-4px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:80px;
	height:80px;
	margin:0;
	border-radius:50%;
	border:0;
	color:var(--color-main);
	background:#ffd84d;
	font-size:20px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.04em;
	text-align:center;
}
.recruitment_date--urgent > span{
	display:block;
	transform:rotate(-9deg);
}
@media screen and (max-width:767px){
	.recruitment_date--urgent{
		top:-16px;
		right:0;
		width:60px;
		height:60px;
		font-size:1.5rem;
	}
}
@media screen and (min-width:768px) and (max-width:1199px){
	.recruitment_date--urgent{
		top:-27px;
		right:-2px;
		width:84px;
		height:84px;
		font-size:19px;
	}
}

/*-------------------------------------------------------------------------------------------------採用区分・勤務先フィルター*/
.recruit_filter_tabs{
	display:grid;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	border-bottom:2px solid var(--color-main);
}
.recruit_filter_tab{
	position:relative;
	min-width:0;
	min-height:66px;
	padding:12px 8px;
	border:1px solid #d7d9dc;
	border-bottom:0;
	color:var(--color-text);
	background:#fff;
	font:inherit;
	font-size:15px;
	font-weight:700;
	line-height:1.4;
	cursor:pointer;
}
.recruit_filter_tab + .recruit_filter_tab{
	border-left:0;
}
.recruit_filter_tab.is-active{
	border-color:var(--color-main);
	color:#fff;
	background:var(--color-main);
}
.recruit_filter_tab.is-active::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-12px;
	width:0;
	height:0;
	transform:translateX(-50%);
	border-top:12px solid var(--color-main);
	border-right:12px solid transparent;
	border-left:12px solid transparent;
}
.recruit_filter_tab:focus-visible{
	z-index:2;
	outline:3px solid #333;
	outline-offset:2px;
}
/* 共通：セレクトボックスの枠線・矢印アイコンなど基本見た目
   （.recruit_facility_filter select / .recruit_filter_select / .recruitment_category_form select の3箇所で使用。
   幅・高さ・文字サイズなど表示箇所ごとに変わる値は、それぞれの宣言側で指定する） */
.recruit_facility_filter select,
.recruit_filter_select,
.recruitment_category_form select{
	padding:0 42px 0 15px;
	border:1px solid #bbb;
	border-radius:8px;
	background-color:#fff;
	background-image:url(images/form_select.svg);
	background-repeat:no-repeat;
	background-position:right 15px center;
	background-size:11px auto;
	font:inherit;
	font-weight:600;
}
.recruit_filter_select{
	display:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
.recruit_facility_filter{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:12px;
	margin-top:24px;
}
.recruit_facility_filter[hidden]{
	display:none;
}
.recruit_facility_filter label{
	font-size:14px;
	font-weight:700;
}
.recruit_facility_filter select{
	width:260px;
	height:48px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	font-size:15px;
	color:var(--color-text);
}
/*-------------------------------------------------------------------------------------------------募集職種カード*/
.recruitment_list{
	position:relative;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:18px;
	width:100%;
	margin:54px auto 100px;
	padding:0;
	list-style:none;
}
.recruitment_list > li,
.recruitment_list > li + li{
	position:relative;
	display:flex;
	min-width:0;
	margin-top:0;
}
.recruitment_list .recruitment_card{
	width:100%;
	height:100%;
}
.recruitment_list > li[hidden]{
	display:none;
}
.recruitment_list.is-filter-empty{
	display:none;
}
.recruitment_card--urgent .recruitment_card_top{
	padding-right:0;
}
.recruitment_badge,
.recruitment_urgent{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:30px;
	padding:3px 14px;
	border:1px solid var(--color-main);
	border-radius:8px;
	font-size:14px;
	font-weight:700;
	line-height:1.4;
}
.recruitment_badge{
	color:var(--color-main);
	background:#fff;
}
/*-------------------------採用区分バッジ：総合職*/
.recruitment_badge--general{
	color:#356b91;
	border-color:#8fb8d1;
	background:#f0f7fb;
}
/*-------------------------採用区分バッジ：常勤嘱託医療技術者*/
.recruitment_badge--medical_technical{
	color:#39735b;
	border-color:#91c0aa;
	background:#f0f8f4;
}
/*-------------------------採用区分バッジ：競馬場特定・開催嘱託*/
.recruitment_badge--racecourse_contract{
	color:#725a8f;
	border-color:#b7a3cc;
	background:#f7f3fa;
}
/*-------------------------採用区分バッジ：アルバイト・パート*/
.recruitment_badge--part_time{
	color:#d94a27;
	border-color:#f0a28e;
	background:#fff4f0;
}
.recruitment_list.is-recruit-type-filtered .recruitment_badge{
	display:none;
}
.recruitment_list.is-recruit-type-filtered .recruitment_meta,
.recruitment_list.is-recruit-type-filtered .recruitment_facility--general{
	margin-top:0;
}
.recruitment_urgent{
	position:absolute;
	top:-12px;
	right:-10px;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	padding:0;
	border:1px solid var(--color-main);
	border-radius:50%;
	background:#ffd84d;
	color:var(--color-main);
	font-size:13px;
	font-weight:700;
	line-height:1;
	box-shadow:none;
}
.recruitment_meta{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:0 14px;
	margin-top:10px;
	font-size:14px;
	line-height:1.5;
	font-weight:600;
	color:#666;
}

/*-------------------------勤務先・勤務地：総合職は複数勤務地のため縦表示*/
.recruitment_facility--general{
	display:block;
	margin-top:10px;
	color:#666;
	font-size:14px;
	font-weight:600;
	line-height:1.5;
}
.recruitment_location--general{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;
	overflow:hidden;
	margin-top:6px;
	color:#777;
	font-size:14px;
	font-weight:500;
	line-height:1.55;
}
.recruitment_external_icon{
	width:16px;
	height:16px;
}
.recruitment_list > li.has_edit_link .recruitment_card{
	padding-right:22px;
}
.recruitment_list > li > .hensyu,
.recruitment_list > li .recruitment_card--urgent + .hensyu{
	top:auto;
	right:auto;
	bottom:20px;
	left:20px;
}
/*-------------------------------------------------------------------------------------------------絞り込み0件表示*/
.recruitment_filter_empty{
	margin:54px auto 100px;
	padding:70px 20px;
	border:1px solid #ddd8cf;
	border-radius:12px;
	background:#fff;
	font-size:18px;
	font-weight:600;
	text-align:center;
}
.recruitment_filter_empty p{
	margin:0;
}

/* =====================================================================================================
もっと見る
もっと見る表示時のみ、一覧下部を白くフェード
===================================================================================================== */
.recruitment_list:has(+ .recruitment_more_wrap:not([hidden]))::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:140px;
	background:linear-gradient(
		to bottom,
		rgba(255,255,255,0),
		rgba(255,255,255,.82) 55%,
		#fff 100%
	);
	pointer-events:none;
}

/*-------------------------もっと見る表示時の一覧下余白*/
.recruitment_list:has(+ .recruitment_more_wrap:not([hidden])){
	margin-bottom:0;
	padding-bottom:35px;
}
.recruitment_more_wrap{
	position:relative;
	z-index:2;
	margin:-18px 0 100px;
	text-align:center;
}
.recruitment_more_button{
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:8px 24px;
	border:0;
	background:transparent;
	color:var(--color-main);
	font:inherit;
	font-size:16px;
	font-weight:700;
	line-height:1.4;
	cursor:pointer;
}
.recruitment_more_button::after{
	content:"";
	width:10px;
	height:10px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(45deg);
	transition:transform .2s ease;
}
.recruitment_more_button:hover::after,
.recruitment_more_button:focus-visible::after{
	transform:translateY(4px) rotate(45deg);
}
.recruitment_more_button:focus-visible{
	outline:2px solid var(--color-main);
	outline-offset:4px;
}

/*-------------------------------------------------------------------------------------------------一覧：タブレット調整（768px〜1199px）*/
@media screen and (min-width:768px) and (max-width:1199px){
	.recruit_filter_tabs{
		display:none;
	}
	.recruit_filter_select{
		display:block;
		width:100%;
		height:48px;
		font-size:16px;
	}
	.recruitment_list{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:18px;
		margin-top:40px;
	}
	.recruitment_filter_empty{
		margin:40px auto 100px;
	}
}

/*-------------------------------------------------------------------------------------------------一覧：スマートフォン調整（767px以下）*/
@media screen and (max-width:767px){
	.recruit_filter_title{
		margin:0 0 14px !important;
		font-size:16px !important;
		line-height:1.5;
	}
	.recruit_filter_tabs{
		display:none;
	}
	.recruit_filter_select{
		display:block;
		width:100%;
		height:48px;
		font-size:15px;
	}
	.recruitment_list{
		grid-template-columns:1fr;
		gap:16px;
		margin:32px auto 70px;
	}
	.recruitment_card{
		padding:16px 16px 14px;
	}
	.recruitment_list > li.has_edit_link .recruitment_card{
		padding-right:18px;
	}
	.recruitment_location{
		font-size:14px;
	}
	.recruitment_filter_empty{
		margin:32px auto 70px;
	}
	.recruitment_filter_empty p{
		font-size:15px !important;
		line-height:1.7;
	}
	.recruitment_more_wrap{
		margin:-10px 0 70px;
	}
	.recruitment_list:has(+ .recruitment_more_wrap:not([hidden]))::after{
		height:110px;
	}
	.recruit_facility_filter{
		display:block;
		margin-top:18px;
	}
	.recruit_facility_filter label{
		display:block;
		margin-bottom:8px;
		font-size:14px;
	}
	.recruit_facility_filter select{
		width:100%;
		height:54px;
	}
	.recruitment_meta{
		display:flex;
		align-items:baseline;
		flex-wrap:wrap;
		gap:0 10px;
		margin-top:10px;
	}
	.recruitment_meta .recruitment_facility,
	.recruitment_meta .recruitment_location{
		display:inline;
		margin:0;
	}
	.recruitment_list.is-recruit-type-filtered .recruitment_meta{
		margin-top:0;
	}
	.recruitment_facility--general{
		margin-top:10px;
	}
	.recruitment_list.is-recruit-type-filtered .recruitment_facility--general{
		margin-top:0;
	}
}

/*-------------------------------------------------------------------------------------------------募集職種詳細*/
.recruitment_detail{
	width:min(960px, 100%);
	margin:60px auto 100px;
}
.recruitment_detail_header{
	position:static;
	top:auto;
	right:auto;
	z-index:auto;
	width:auto;
	max-width:none;
	min-width:0;
	height:auto;
	text-align:left;
	transition:none;
	padding-bottom:0;
	border-bottom:0;
}
.recruitment_detail_header.has_edit_link{
	position:relative;
	padding-right:82px;
}
.recruitment_detail_meta{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:12px 18px;
}

/* 詳細ページ上部の「急募」は採用区分バッジと同じベーススタイルを使い、色だけ変更 */
.recruitment_badge--urgent{
	color:var(--color-main);
	background:#ffd84d;
}
.recruitment_detail_title{
	margin:18px 0 0;
	font-size:34px;
	line-height:1.45;
}

@media screen and (max-width:767px){
	.recruitment_detail{margin:35px auto 70px;}
	.recruitment_detail_header{padding-bottom:0;}
	.recruitment_detail_title{font-size:27px;}
}

/* 募集要項見出し直後の間隔 */
.recruitment_detail_header + table,
.recruitment_detail_header + .recruitment_closed_notice{
	margin-top:20px;
}

/*-------------------------------------------------------------------------------------------------募集終了のお知らせ*/
.recruitment_closed_notice{
	padding:24px 30px;
	border:1px solid #ddd8cf;
	border-radius:10px;
	background:#f8f6f1;
	color:var(--color-text);
	font-size:18px;
	font-weight:700;
	line-height:1.7;
	text-align:center;
}
.recruitment_closed_notice p{
	margin:0;
}

/* 終了案内と募集要項表の間 */
.recruitment_closed_notice + table{
	margin-top:30px;
}

@media screen and (max-width:767px){
	.recruitment_detail_header + table,
	.recruitment_detail_header + .recruitment_closed_notice{
		margin-top:10px;
	}
	.recruitment_closed_notice + table{
		margin-top:20px;
	}
	.recruitment_closed_notice{
		padding:20px 15px;
		font-size:16px;
	}
}

/*-------------------------------------------------------------------------------------------------詳細下部：採用区分ナビ*/
.recruitment_category_nav{
	display:block;
	width:min(1180px, calc(100vw - 60px));
	margin-top:64px;
	margin-left:50%;
	padding-top:64px;
	border-top:1px solid #ddd8cf;
	transform:translateX(-50%);
}
.recruitment_category_title{
	display:block;
	margin:0;
	font-size:25px;
	line-height:1.5;
	text-align:center;
}
.recruitment_category_tabs{
	display:grid;
	grid-template-columns:repeat(5, minmax(0, 1fr));
	margin-top:28px;
	border-bottom:2px solid var(--color-main);
}
.recruitment_category_tabs a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:0;
	min-height:66px;
	padding:12px 8px;
	border:1px solid #d7d9dc;
	border-bottom:0;
	color:var(--color-text);
	background:#fff;
	font-size:15px;
	font-weight:700;
	line-height:1.4;
	text-align:center;
	text-decoration:none;
	transition:color .2s ease, background-color .2s ease;
}
.recruitment_category_tabs a + a{border-left:0;}

@media (hover:hover) and (pointer:fine){
	.recruitment_category_tabs a:hover{color:#fff;background:var(--color-main);}
}
.recruitment_category_tabs a:focus-visible{
	position:relative;
	z-index:2;
	outline:2px solid var(--color-main);
	outline-offset:2px;
}
.recruitment_category_form{
	display:none;
}

@media screen and (max-width:1199px){
	.recruitment_category_tabs{
		display:none;
	}
	.recruitment_category_form{
		display:block;
		margin-top:28px;
	}
	.recruitment_category_form label{
		display:block;
		margin-bottom:10px;
		font-size:15px;
		font-weight:700;
	}
	.recruitment_category_form select{
		display:block;
		width:100%;
		height:58px;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
	}
	.recruitment_category_form .btn{
		display:flex;
		margin:24px auto 0;
		border:0;
		cursor:pointer;
	}
}

@media screen and (max-width:767px){
	.recruitment_category_nav{
		width:calc(100vw - 40px);
		margin-top:48px;
		padding-top:48px;
	}
	.recruitment_category_title{font-size:21px;}
	.recruitment_category_form{margin-top:22px;}
}
/*-------------------------------------------------------------------------------------------------詳細共通：タイトル・サマリー・リンク*/
.recruitment_title{
	display:block;
	margin-top:18px;
	font-size:28px;
	font-weight:700;
	line-height:1.4;
	transition:color .2s ease;
}
.recruitment_summary{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:0;
	margin-top:26px;
	border-top:1px solid #ddd8cf;
	border-bottom:1px solid #ddd8cf;
}
.recruitment_summary_item{
	display:block;
	min-width:0;
	padding:18px 24px;
}
.recruitment_summary_item + .recruitment_summary_item{
	border-left:1px solid #ddd8cf;
}
.recruitment_summary_label,
.recruitment_summary_value{
	display:block;
}
.recruitment_summary_label{
	color:var(--color-main);
	font-size:14px;
	font-weight:700;
}
.recruitment_summary_value{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	margin-top:7px;
	font-size:16px;
	font-weight:500;
	line-height:1.7;
}
.recruitment_summary_value small{
	font-size:12px;
	white-space:nowrap;
}
@media screen and (max-width:767px){
	.recruitment_title{font-size:24px;}
	.recruitment_summary{
		grid-template-columns:1fr;
		margin-top:20px;
	}
	.recruitment_summary_item{padding:14px 0;}
	.recruitment_summary_item + .recruitment_summary_item{
		border-top:1px solid #ddd8cf;
		border-left:0;
	}
	.recruitment_summary_value{font-size:15px;}
}
.recruitment_more{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	margin-top:auto;
	padding-top:12px;
	color:var(--color-text);
	font-size:16px;
	font-weight:700;
}
.recruitment_more span{
	color:var(--color-main);
	font-size:20px;
	transition:transform .2s ease;
}
/*-------------------------------------------------------------------------------------------------Hover / Focus*/
@media (hover:hover) and (pointer:fine){
	.recruitment_card:hover::after{border-color:var(--color-main);}
	.recruitment_card:hover .recruitment_title{color:var(--color-main);}
	.recruitment_card:hover .recruitment_more{color:var(--color-main);}
	.recruitment_card:hover .recruitment_more span{transform:translateX(4px);}
}
.recruitment_card:focus-visible{
	outline:2px solid var(--color-main);
	outline-offset:4px;
}
.recruitment_card:focus-visible .recruitment_more{color:var(--color-main);}
.recruitment_card:focus-visible .recruitment_title{color:var(--color-main);}

/*-------------------------------------------------------------------------------------------------募集職種一覧カード：最終調整*/
.recruitment_list .recruitment_title{
	margin-top:8px;
	font-size:20px;
	line-height:1.4;
}
.recruitment_list .recruitment_more{
	margin-top:auto;
	padding-top:20px;
	color:var(--color-main);
}

@media screen and (max-width:767px){
	.recruitment_list .recruitment_title{
		margin-top:5px;
		font-size:18px;
		line-height:1.4;
	}
	.recruitment_list > li,
	.recruitment_list > li + li{
		display:block;
	}
	.recruitment_list .recruitment_card{
		height:auto;
	}
}