/* "srchset.css" */
/* ------------------------------ */

.outer_srchset {
	background-color:			white;
	border-radius:				0.5rem;
	box-shadow:					inset 0 6px 10px -10px rgba(0, 0, 0, 0.2);
	display:					none;
	height:						fit-content;
	left:						50%;
	max-height:					calc(100dvh	- 2rem);;
	max-width:					60rem;
	overflow-y:					auto;
	position:					fixed;
	top:						50%;
	transform:					translate(-50%, -50%);
	width:						calc(100dvw	- 2rem);
	z-index:					11;
}
form.srchset {
	display:					flex;
	flex-direction:				column;
	margin:						0 auto;
	padding:					0 1rem;
	width:						100%;
}
@media screen and (min-width:1px) and (max-width:600px) {
	.outer_srchset {
		height:					calc(100dvh	- 2rem);
	}
}


/* ------------------------------ */
/* HTML Tag */

.srchset fieldset {
	border:				none;
	display:			flex;
	flex-direction:		column;
	gap:				8px;
	height	:			100%;
	margin:				0;
	min-width:			0;
	padding:			0;
	width:				100%;
}
.srchset legend {
	color:				var(--color-gray-700);
	display:			block;
	font-size:			0.875rem;
	font-weight:		600;
	letter-spacing:		0.06em;
	margin-bottom:		4px;
	text-transform:		uppercase;
	width:				100%;
}

/* ラジオボタン */
.srchset_radios input[type="radio"] {
	/* 本体を視覚的に隠すが、フォーカスやクリックは効かせる */
	height:				0;
	opacity:			0;
	position:			absolute;
	width:				0;
}
.srchset_radios label {
	border:				2px solid var(--color-gray-200);
	border-radius:		1.5rem;
	cursor:				pointer;
	display:			inline-block;
	font-size:			0.875rem;
	font-weight:		500;
	padding:			0.375rem 0.75rem;
	transition:			background-color 0.15s, border-color 0.15s;
	text-align:			center;
	user-select:		none;
}
.srchset_radios label:hover {
	background-color:	var(--color-primary-100);
}
.srchset_radios input[type="radio"]:checked + label {
	/* チェックされているinputの直後のlabelにスタイル適用 */
	background-color:	var(--color-primary-100);
	border:				2px solid var(--color-primary-700);
	color:				var(--color-primary-700);
	font-weight:		600;
}
.srchset_radios input[type="radio"]:focus-visible + label {
	/* キーボード操作時に、フォーカスを見えるようにする */
	outline:			2px solid black;
	outline-offset:		2px;
}

/* チェックボックス */
.srchset_checkbtns {
	align-items:				center;
	display:					flex;
	gap:						0.25rem;
}
.srchset_checkbtns input[type="checkbox"] {
	accent-color:				var(--color-primary-575);
	height:						1.25rem;
	width:						1.25rem;
}

/* HTML Tag */
/* ------------------------------ */
/* 詳細検索 | ヘッダー */

.srchset_header {
	align-items:				center;
	background-color:			white;
	border-bottom:				1px solid var(--color-primary-200);
	display:					flex;
	justify-content:			space-between;
	padding:					1rem 0.5rem;
	position:					sticky;
	top:						0;
	z-index:					1;
}
.srchset_ttl {
	font-size:					1.2rem;
	font-weight:				600;
	letter-spacing:				0.02em;
}
.srchset_close {
	appearance:					none;
	background:					none;
	border:						none;
	border-radius:				0.315rem;
	color:						var(--color-gray-400);
	padding:					0.25rem;
	transition:					background 0.15s, color 0.15s;
}
.srchset_close:hover {
	background:					var(--color-primary-200);
	color:						var(--color-primary-700);
}

/* 詳細検索 | ヘッダー */
/* ------------------------------ */
/* 詳細検索 | ボディ */

.srchset_body {
	display:					grid;
	grid-template-columns:		1fr 1fr;
	gap:						1.5rem;
	padding:					1rem 0;
}
.srchset_body_left {
	display:					flex;
	flex-direction:				column;
	gap:						1.5rem;
}
.srchset_body_right {
	display:					flex;
	flex-direction:				column;
	gap:						1.5rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.srchset_body {
		display:				flex;
		flex-direction:			column;
	}
}

/* 詳細検索 | ボディ */
/* ------------------------------ */
/* 詳細検索 | 記事カテゴリー */

.srchset_key_input {
	background:					var(--color-background);
	border:						1px solid var(--color-primary-200);
	border-radius:				0.315rem;
	color:						var(--color-text-primary);
	font-family:				inherit;
	font-size:					0.875rem;
	outline:					none;
	padding:					0.5rem 0.5rem 0.5rem 1.75rem;
	transition:					background 0.15s, border-color 0.15s;
	width:						100%;
}
.srchset_key_input::placeholder {
	color:						var(--color-gray-400);
}
.srchset_key_input:focus {
	background:					var(--color-text-inverse);
	border-color:				var(--color-primary-400);
}

.srchset_key_wrap {
	position:					relative;
}
.srchset_key_wrap .icon {
	left:						0.5rem;
	padding:					0.125rem 0.125rem;
	position:					absolute;
	top:						50%;
	transform:					translateY(-50%);
	width:						1.125rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	/*
		iOS でフォーカスが当たると自動で拡大されてしまう現象を防ぐため、
		16px 以上のテキストサイズを明示的に指定する必要がある。
	*/
	.srchset_key_input {
		font-size:				1rem;
	}
}


/* 詳細検索 | 記事カテゴリー */
/* ------------------------------ */
/* 詳細検索 | 記事カテゴリー */

.srchset_cat_input {
	background:					var(--color-background);
	border:						1px solid var(--color-primary-200);
	border-radius:				0.315rem;
	color:						var(--color-text-primary);
	font-family:				inherit;
	font-size:					0.875rem;
	outline:					none;
	padding:					0.5rem 0.5rem 0.5rem 1.75rem;
	transition:					background 0.15s, border-color 0.15s;
	width:						100%;
}
.srchset_cat_input::placeholder {
	color:						var(--color-gray-400);
}
.srchset_cat_input:focus {
	background:					var(--color-text-inverse);
	border-color:				var(--color-primary-400);
}
.srchset_cat_wrap {
	position:					relative;
}
.srchset_cat_wrap .icon {
	left:						0.5rem;
	padding:					0.125rem 0.125rem;
	position:					absolute;
	top:						50%;
	transform:					translateY(-50%);
	width:						1.125rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	/*
		iOS でフォーカスが当たると自動で拡大されてしまう現象を防ぐため、
		16px 以上のテキストサイズを明示的に指定する必要がある。
	*/
	.srchset_cat_input {
		font-size:				1rem;
	}
}


.srchset_cat_list {
	display:					flex;
	flex:						1;
	flex-direction:				column;
	gap:						1px;
	overflow-y:					auto;
}
/* 動的生成される clsSel 向けスタイル */
.srchset .cls_sel {
	height:						20rem;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.srchset .cls_sel {
		height:					10rem;
	}
	.srchset .cls_sel li {
		overflow:			hidden;
		text-overflow:		ellipsis;
		white-space:		nowrap;
	}
}
.srchset_cat_list .cat_item {
	align-items:			center;
	border-radius:			6px;
	color:					var(--color-gray-700);
	cursor:					pointer;
	display:				flex;
	font-size:				13px;
	gap:					8px;
	padding:				6px 8px;
	transition:				background 0.1s;
	user-select:			none;
}
.srchset_cat_list .cat_item:hover {
	background:				var(--color-primary-100);
}
.srchset_cat_list .cat_item.is_selected {
	background:				var(--color-primary-200);
	color:					var(--color-primary-700);
	font-weight:			500;
}
.srchset_cat_list .cat_item input[type="checkbox"] {
	accent-color:			var(--color-primary-600);
	flex-shrink:			0;
	height:					13px;
	pointer-events:			none;
	width:					13px;
}

/* 詳細検索 | 記事カテゴリー */
/* ------------------------------ */
/* 詳細検索 | 期間 */

.srchset_trm_range {
	align-items:			center;
	display:				flex;
	flex-direction:			column;
	gap:					6px;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.srchset_trm_range {
		font-size:			0.75rem;
	}
}
.srchset_trm_select_wrap {
	flex:					1;
	min-width:				0;
}
.srchset_trm_sep {
	color:					var(--color-gray-400);
	flex-shrink:			0;
	font-size:				12px;
}
.srchset_trm_range:has(select:disabled) {
	/* disabled が一見分かりにくいため、文字ごと薄くする */
	opacity:				0.4;
}

.srchset_trm_range input[type="text"] {
	border:					1px solid var(--color-gray-300);
	border-radius:			0.25rem;
	padding:				0.375rem 0.75rem;
}

/* 詳細検索 | 期間 */
/* ------------------------------ */
/* 詳細検索 | 表示順 */

.search_field {
	display:				flex;
	flex-direction:			column;
}
.srchset_radios.trm {
	column-gap:				0.25rem;
	display:				flex;
	flex-wrap:				wrap;
	row-gap:				0.5rem;
}
.srchset_radios.order {
	column-gap:				0.25rem;
	display:				flex;
	width:					100%;
}

/* 詳細検索 | 表示順 */
/* ------------------------------ */
/* 詳細検索 | フッター */

.srchset_footer {
	align-items:			center;
	background-color:		white;
	bottom:					0;
	border-top:				1px solid var(--color-primary-200);
	display:				flex;
	flex-wrap:				wrap;
	gap:					8px;
	justify-content:		space-between;
	padding:				1rem 0 1.5rem 0;
	position:				sticky;
	z-index:				1;
}
/* リセットボタン */
.search_btn__reset {
	background:				transparent;
	border:					none;
	border-radius:			0.315rem;
	color:					var(--color-primary-600);
	font-size:				0.875rem;
	font-weight:			600;
	letter-spacing:			-0.03em;
	padding:				0.5rem 0.375rem;
}
@media (hover: hover) {
	.search_btn__reset:hover {
		background-color:		var(--color-primary-100);
	}
}
/* 検索ボタン */
.srchset_search_btn {
	background:				var(--color-primary-600);
	border:					1px solid transparent;
	color:					var(--color-text-inverse);
	max-width:				100%;
	width:					12rem;
}