@charset 'UTF-8';
/*----------------------------------------

	- detailed_search
	- area
	- free_word
	- work_location
		- modal-content
			- work_location--area
			- work_location--station
	- job
	- salary
	- working_status
	- extra

-----------------------------------------*/

/*----------------------------------------
detailed_search - 詳細検索
-----------------------------------------*/
.detailed_search {
	margin-top: 48px;
}

.detailed_search .fieldset:not([class*='work_location--']) {
	display: grid;
	grid-template-columns: 280px 1fr;
}

.detailed_search .fieldset:not([class*='work_location--'])>div {
	border-top: 1px solid var(--color_cmn-line);
}

.detailed_search .fieldset:not([class*='work_location--'])>div:first-of-type {
	padding: 48px 32px;
	background-color: var(--color_mist-200);
}

.detailed_search .fieldset:not([class*='work_location--'])>div:nth-of-type(2) {
	padding: 48px 0 48px 48px;
}

/* sp */
@media screen and (max-width: 800px) {
	.detailed_search {
		margin-top: 32px;
	}

	.detailed_search.inner_box {
		max-width: unset;
		width: 100%;
	}

	.detailed_search .fieldset:not([class*='work_location--']) {
		grid-template-columns: 1fr;
	}

	.detailed_search .fieldset:not([class*='work_location--'])>div:first-of-type {
		padding: 16px;
	}

	.detailed_search .fieldset:not([class*='work_location--'])>div:nth-of-type(2) {
		max-width: 640px;
		width: 100%;
		margin-inline: auto;
		padding: 32px 24px;
		border-top: 0;
	}

	.detailed_search .pulldown_m,
	.detailed_search .pulldown_m>select {
		width: 100%;
	}
}

@media screen and (max-width: 400px) {
	.detailed_search .fieldset:not([class*='work_location--'])>div:nth-of-type(2) {
		max-width: unset;
	}
}

/*----------------------------------------
area - 地域
-----------------------------------------*/

/*----------------------------------------
free_word - フリーワード
-----------------------------------------*/
.free_word input {
	width: 100%;
}

/*----------------------------------------
work_location - 勤務地
-----------------------------------------*/
.work_location .choice {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.work_location .output_text {
	margin-top: 24px;
}

/* sp */
@media screen and (max-width: 800px) {
	.work_location .choice {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
	}

	.work_location .btn_s2 {
		width: 100%;
	}
}

/*----------------------------------------
work_location--area - エリアを選択
work_location--station - 沿線・駅を選択
-----------------------------------------*/
.modal-content .fieldset {
	display: grid;
	grid-template-columns: 1fr;
	border-bottom: 1px solid var(--color_cmn-line);
}

.modal-content .fieldset+.fieldset {
	margin-top: 32px;
}

.modal-content .heading_l2 {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	align-items: flex-end;
}

.modal-content .heading_l2+.fieldset {
	margin-top: 32px;
}

.modal-content .heading_m2b+.fieldset {
	margin-top: 32px;
}

.modal-content .heading_m2b {
	margin-top: 32px;
}

.modal-content .fieldset+.heading_m2b {
	margin-top: 80px;
}

.modal-content .category_list {
	display: flex;
	flex-wrap: wrap;
	gap: 8.5px 24px;
	align-items: flex-start;
}

.modal-content .category_list+.category_list {
	margin-top: 48px;
}

.modal-content .category_list .heading_s3 {
	width: 100%;
}

.modal-content .category_list li:not(.heading_s3) {
	width: 160px;
}

.modal-content .category_list label {
	display: flex;
	align-items: flex-start;
	width: fit-content;
}

/* 0件の表示 */
.modal-content .category_list label:has(input:disabled) {
	color: var(--color_cmn-text--inactive);
}

.modal-content .accordion-box {
	padding-top: 16px;
	padding-inline: 32px;
}

.modal-content .accordion-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

/* close */
.modal-content .accordion-btn::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 27px;
	margin-inline: 12px;
	background-image: var(--ic_ac_open);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* open */
.modal-content .accordion-btn.active::after {
	background-image: var(--ic_ac_close);
}

@media (hover: hover) {
	/* close */
	.modal-content .accordion-btn:hover::after {
		background-color: var(--color_aquamarine-500);
		background-image: unset;
		mask-image: var(--ic_ac_open);
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
	}
	/* open */
	.modal-content .accordion-btn.active:hover::after {
		mask-image: var(--ic_ac_close);
	}
}

.modal-content .accordion-box.active {
	padding-bottom: 24px;
}

.modal-content .add_conditions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
	margin-top: 48px;
}

@media screen and (max-width: 800px) {
	.modal-content .heading_l2+.fieldset,
	.modal-content .fieldset+.fieldset {
		margin-top: 24px;
	}

	.modal-content .add_conditions {
		margin-top: 32px;
	}

	.modal-content .add_conditions .btn_s2 {
		max-width: 240px;
	}

	.modal-content .add_conditions .btn_m3 {
		max-width: 304px;
	}

	.modal-content .accordion-box {
		padding-inline: 0;
	}

	.modal-content .heading_l2 {
		font-size: var(--font-size28);
	}

	.modal-content .heading_l2 {
		font-size: var(--font-size28);
	}

	.modal-content .heading_l2 .font16 {
		font-size: var(--font-size14);
	}

	.modal-content .heading_m2b+.fieldset {
		margin-top: 24px;
	}

	.modal-content .fieldset+.heading_m2b {
		margin-top: 64px;
	}

	.modal-content .category_list {
		gap: 8px 16px;
	}

	.modal-content .category_list li.heading_s3 {
		width: 100%;
	}

	.modal-content .category_list li:not(.heading_s3) {
		flex: 1;
		min-width: 124px;
		width: auto;
	}
}

/*----------------------------------------
job - 職種
-----------------------------------------*/

.job .category_box {
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
}

.job .category_list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: flex-start;
}

.job .category_list .heading_s3 {
	width: 100%;
}

.job .category_list li:not(.heading_s3) {
	width: 220px;
}

.job .category_list label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: fit-content;
}

/* sp */
@media screen and (max-width: 800px) {
	.job .category_list {
		gap: 8.5px 16px;
	}

	.job .category_list li.heading_s3 {
		width: 100%;
	}

	.job .category_list li.heading_s3:has(+li) {
		margin-bottom: 8px;
	}

	.job .category_list li:not(.heading_s3) {
		flex: 1;
		min-width: 148px;
		width: auto;
	}
}

/*----------------------------------------
salary - 給与
-----------------------------------------*/

.salary .select_list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.salary select {
	width: 240px;
}

.salary .pulldown_m:not(:first-of-type).active {
	display: block;
}

.salary .pulldown_m:not(:first-of-type) {
	display: none;
}

/* sp */
@media screen and (max-width: 800px) {
	.salary .select_list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
	}

	.salary .pulldown_m,
	.salary select {
		width: 100%;
	}
}

/*----------------------------------------
working_status - 雇用形態
-----------------------------------------*/

.working_status ul {
	display: grid;
	gap: 8px 24px;
	grid-template-columns: repeat(auto-fit, minmax(auto, 220px));
}

.working_status label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: fit-content;
}

/* sp */
@media screen and (max-width: 800px) {
	.working_status ul {
		gap: 8px 16px;
		grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	}
}

/*----------------------------------------
extra - こだわり条件
-----------------------------------------*/

.extra .extra_box {
	display: grid;
	gap: 48px;
	grid-template-columns: 1fr;
}

.extra .extra_list {
	display: grid;
	gap: 8.5px 24px;
	grid-template-columns: repeat(auto-fit, minmax(auto, 220px));
	margin-top: 8px;
}

.extra .extra_list label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	width: fit-content;
}

/* sp */
@media screen and (max-width: 800px) {
	.extra .extra_list {
		gap: 8.5px 16px;
		grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	}
}

/*----------------------------------------
btn_box - 選択した条件で検索する
-----------------------------------------*/
.btn_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 104px;
}

/* sp */
@media screen and (max-width: 800px) {
	.btn_box {
		margin-top: 32px;
		flex-direction: column;
		gap: 16px;
	}
	.btn_box .btn_color_bright {
		max-width: 240px;
		width: 100%;
		--font-size: 16px;
	}

	.btn_box p:has([class*='btn_']) {
		max-width: 315px;
		width: 100%;
	}
}