/*////////////////////////////////////////////////////////////////////////////*/

/*! [components/search-widget] search-widget.css */

/*////////////////////////////////////////////////////////////////////////////*/


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

	検索ボタン

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


/*	コンテナー
------------------------------------------------------------------------------*/

#search-button {
	--search-open-button-color: #111;
	--search-open-text-color: #FFF;
	--search-open-button-icon-size: 2em;
	--search-open-button-padding: 1em;
	--search-open-button-width: calc(var(--search-open-button-icon-size) + var(--search-open-button-padding) * 2);
	--search-open-button-right: 1em;
	--search-open-button-bottom: 1em;
	--search-open-button-filter: drop-shadow(2px 2px 4px rgb(0 0 0 / .07));
	/**/
	position: sticky;
	z-index: 99;/* #site_headerより下 */
	left: 0;
	bottom: 0;
	width: 100%;
}

#search-button > .archive-container,
#search-button > .article-container {
	position: relative;
	padding-left: 0;
	padding-right: 0;
}

#search-button > .article-container {
	max-width: calc(var(--content-width) + var(--inner-gap) + var(--inner-padding) * 2 + var(--search-open-button-width) * 2 + var(--search-open-button-right) * 2);
}

#search-button > .archive-container,
#search-button > .article-container.with-sidebar {
	max-width: calc(var(--content-width) + var(--inner-gap) + var(--sidebar-width) + var(--inner-padding) * 2 + var(--search-open-button-width) * 2 + var(--search-open-button-right) * 2);
	/*
	height: 100px;
	background: rgb(255 0 0 / .5);
	*/
}

@media (max-width: 1023px) {/* サイドバー落ち */

	#search-button {
		/*display: none;/* ヘッダーナビ内の検索ボタンを表示するため */
	}

/**/}


/*	検索ボタン
------------------------------------------------------------------------------*/

#search-dialog-open-button {
	cursor: pointer;
	position: absolute;
	right: var(--search-open-button-right);
	bottom: var(--search-open-button-bottom);
	padding: var(--search-open-button-padding);
	background: var(--search-open-button-color);
	border: none;
	border-radius: 50%;
	color: var(--search-open-text-color);
	fill: var(--search-open-text-color);
	filter: var(--search-open-button-filter);
	transition: filter .2s ease-out;
}

#search-dialog-open-button svg {
	display: block;
	width: var(--search-open-button-icon-size);
	height: var(--search-open-button-icon-size);
}

.is-scroll-lock #search-dialog-open-button {
	display: none;
}

@media (any-hover: hover) {

	#search-dialog-open-button:hover {
		filter: brightness(125%);
	}

/**/}
@media (any-hover: none) {

	#search-dialog-open-button:active {
		filter: brightness(125%);
	}

/**/}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/


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

	body

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

body {
	overflow-y: scroll;
}

body.is-scroll-lock {
	position: fixed;
	left: 0;
	padding-top: var(--wp-adminbar-height, 0);/* WordPress管理バー分のガタツキ回避 */
	width: 100%;
}


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

	検索ダイアログ

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


/*	変数
------------------------------------------------------------------------------*/

#search-dialog,
#filter-form {
	--dialog-bg-color-rgb: 17 17 17;
	--dialog-text-color-rgb: 255 255 255;
	--dialog-gap: 1.5em;
}


/*	親コンテナー
------------------------------------------------------------------------------*/

#search-dialog {
	display: none;
	/**/
	position: relative;
	color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	fill: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
}

.is-scroll-lock #search-dialog {
	position: fixed;
	z-index: 200;/* 最前面 */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/**/
	display: flex;
	align-items: center;
	justify-content: center;
}


/*	幅コンテナー
------------------------------------------------------------------------------*/

#search-dialog-backdrop {
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / .3);
	/**/
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	/**/
	transition: opacity .2s ease-out;
	opacity: 0;
	/**/
	transform: translate3d(0,0,0);
	will-change: backdrop-filter;
	contain: paint;
}

body:not(.is-scroll-lock) #search-dialog-backdrop {
	pointer-events: none;
}

body.is-scroll-lock > *:not(#search-dialog) {
	z-index: -1; /* ※必須 */
}

body.is-scroll-lock #search-dialog-backdrop {
	opacity: 1;
}


/*	幅コンテナー
------------------------------------------------------------------------------*/

#search-dialog .search-dialog-inner {
	display: flex;
	flex-direction: column;
	/**/
	position: relative;
	z-index: 2;
	margin: 0 1em;
	padding: var(--space_4_2);
}

#search-dialog .search-dialog-inner > * {
	position: relative;
	z-index: 2;
}

/* 背景 */
#search-dialog .search-dialog-inner::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
	border-radius: var(--common-radius, 10px);
	box-shadow: 0 .125em .5em rgb(0 0 0 / .5);
}

@media (max-width: 720px) {

	#search-dialog .search-dialog-inner {
		margin: 1em;
	}

/**/}


/*	遷移状態表示
------------------------------------------------------------------------------*/

.is-transitioning {
	pointer-events: none;
}

.is-transitioning .with-sidebar > * {
	opacity: 0;
}

/**/

#search-dialog-transitioning {
	display: none;
	/**/
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
}

.is-transitioning #search-dialog-transitioning {
	display: block;
	position: absolute;
	opacity: 1;
}

#search-dialog-transitioning div {
	display: inline-block;
	width: .5em;
	height: .5em;
	margin: 0 .25em;
	background-color: rgb(255 255 255);
	border-radius: 100%;
	/**/
	animation: bouncedelay 1.4s infinite ease-in-out both;
}

#search-dialog-transitioning .dot1 {
	animation-delay: -0.6s;
}

#search-dialog-transitioning .dot2 {
	animation-delay: -0.3s;
}

@keyframes bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/*	ダイアログタイトル
------------------------------------------------------------------------------*/

.search-dialog-title {
	display: flex;
	align-items: center;
	position: relative;
	width: calc(100% + var(--space_4_2) * 2);
	margin: calc(var(--space_4_2) * -1) !important;
	margin-bottom: 2em !important;
	padding: 1em;
	background: rgb(var(--dialog-text-color-rgb) / .1);
	border-radius: var(--common-radius, 10px) var(--common-radius, 10px) 0 0;
	line-height: 1;
	font-weight: bold;
}

/*　右上閉じるボタン　*/
#search-dialog-close-button {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 1em;
	background: transparent;
	border: none;
	border-radius: 0 var(--common-radius, 10px) 0 0;
	color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	fill: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	transition: background-color .2s ease-out;
}

#search-dialog-close-button svg {
	display: block;
	width: 1em;
	height: 1em;
	transform: scale(1.5);
}

@media (any-hover: hover) {

	#search-dialog-close-button:hover {
		cursor: pointer;
		background: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
		color: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
		fill: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
	}

/**/}
@media (any-hover: none) {

	#search-dialog-close-button:active {
		background: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
		color: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
		fill: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
	}

/**/}


/*	ダイアログ本体コンテナー
------------------------------------------------------------------------------*/

.search-dialog-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--dialog-gap);
	/**/
	overflow-y: auto;
}

@media (max-width: 720px) {

	.search-dialog-content {
		grid-gap: 2em 1.5em;
	}

/**/}


/*	検索ガイド
------------------------------------------------------------------------------*/

.search-dialog-guide {
	grid-column: span 2;
	/**/
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: .5em;
	/**/
	max-width: 50em;
	line-height: 1.5;
	text-wrap: balance;
	font-size: 12px;
}

.search-dialog-guide::before {
	display: block;
	content: '';
	width: calc(1 / .75 * 1em);
	height: calc(1 / .75 * 1em);
	background: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	-webkit-mask-image: var(--i_svg);
	mask-image: var(--i_svg);
}


/*	フィールド共通
------------------------------------------------------------------------------*/

.search-field {
	--field-padding: .75em;
	/**/
	margin: 0;
	padding: 0;
	border: none;
}

.search-field legend {
	display: flex;
	align-items: center;
	/**/
	margin: 0 0 var(--field-padding);
	line-height: 1;
	font-size: 87.5%;
}

.search-field legend svg {
	flex: none;
	width: 1em;
	height: 1em;
	margin-right: .5em;
}


/*	テキストボックス・セレクトボックス共通
------------------------------------------------------------------------------*/

.search-control-textbox,
.search-control-text,
.search-control-select {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--field-padding);
	background: transparent;
	border: 1px solid rgb(var(--dialog-text-color-rgb) / .5);
	border-radius: 3px;
	line-height: 1;
	font-size: max(100%, 16px);
	color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	fill: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	transition: border-color .2s ease-out;
	/**/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.search-control-text:focus-visible,
.search-control-select:focus-visible,
.search-control-text:focus,
.search-control-select:focus,
.search-control-textbox.focus {
	outline: none;
	background: rgb(var(--dialog-text-color-rgb) / .1);
	border-color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
}

/**/

.search-control-textbox {
	--svg-size: 1em;
	--button-size: calc(var(--svg-size) + var(--field-padding) * 2);
	/**/
	display: flex;
	flex-direction: row;
	align-items: center;
	/**/
	overflow: hidden;
	position: relative;
	margin: 0;
	padding: 0;
}

.search-control-textbox > .search-control-text {
	flex-grow: 1;
	/**/
	height: var(--button-size);
	border-radius: 0;
	border-color: transparent;
	transition: none;
}

.search-control-textbox > .search-control-text:focus-visible,
.search-control-textbox > .search-control-text:focus {
	background: transparent;
	border-color: transparent;
}

/**/

.search-control-select option {
	color: initial;
}

/**/

@media (any-hover: hover) {

	.search-control-select:hover {
		cursor: pointer;
		border-color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	}

/**/}
@media (any-hover: none) {

	.search-control-select:active {
		border-color: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
	}

/**/}


/*	フリーワード検索
------------------------------------------------------------------------------*/

.query-freeword-form {
	grid-column: span 2;
}

/**/

.query-freeword-button {
	flex: none;
	/**/
	position: relative;
	width: var(--button-size);
	height: var(--button-size);
	margin: 0;
	padding: var(--field-padding);
	background: transparent;
	border: none;
	border-radius: 0;
	font-size: max(100%, 16px);
	transition: all .2s ease-out;
}

.query-freeword-button svg {
	display: block;
	width: var(--svg-size);
	height: var(--svg-size);
}

.query-freeword-button[disabled] svg {
	opacity: .3;
}

@media (any-hover: hover) {

	.query-freeword-button:not([disabled]):hover {
		cursor: pointer;
		background: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
		fill: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
	}

/**/}
@media (any-hover: none) {

	.query-freeword-button:not([disabled]):active {
		background: rgb(var(--dialog-text-color-rgb) / var(--dialog-text-color-a, 1));
		fill: rgb(var(--dialog-bg-color-rgb) / var(--dialog-bg-color-a, 1));
	}

/**/}


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

	フィルターフォーム

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

#filter-form {
	--dialog-text-color-rgb: var(--color-text-p-rgb);
	--dialog-bg-color-rgb: var(--color-bg-body-rgb);
	/**/
	display: block;
	margin: 0 0 2em;
	padding: 0 1em 1em;
	background: rgb(var(--color-text-h-rgb) / .07);
	border-radius: var(--common-radius, 10px);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-size: 16px;
}

.has-filter-form {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/**/

.filter-wrapper {
	display: flex;
	align-items: center;
}

.filter-wrapper .filter-legend {
	flex: none;
	float: left;
	/**/
	margin: .25em 1em .25em 0;
	font-weight: bold;
	white-space: nowrap;
	font-feature-settings: "palt";
}

.filter-control {
	background: rgb(var(--color-bg-body-rgb) / 1);
	border-color: rgb(var(--dialog-text-color-rgb) / 0);
	border-radius: 5px;
}

.filter-control.focus {
	background: rgb(var(--color-bg-body-rgb) / 1);
}

@media (max-width: 720px) {

	#filter-form .filter-legend {
		font-size: 10px;
	}

/**/}

/**/

.query-freeword-reset a {
	display: block;
	position: relative;
	z-index: 2;/* button要素よりも優先させる */
	color: inherit;
	fill: inherit;
}

.query-freeword-reset[disabled] a {
	pointer-events: none;
}

.query-freeword-reset svg {
	rotate: 45deg;
}