/**
 * 「商品をさがす」ブロック / 0件時の復帰導線
 *
 * 高齢のお客様が主要層のため、以下を下限としている。
 * ・文字16px以上（入力欄は18px。16px未満だとiOS Safariが自動ズームする）
 * ・タップ領域56px以上
 * ・テキストのコントラスト7:1以上、枠線は3:1以上
 * ・focus-visible を必ず可視化（outline:none を書かない）
 */

.find-block__title {
	/* 見出しスタイルは .top-section__title で統一 */
}

/* ---- 検索 ---- */

.find-search {
	max-width: 720px;
	margin: 0 auto;
}

.find-search__label {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text-primary, #1a1a1a);
	margin-bottom: 0.25rem;
}

.find-search__hint {
	font-size: 1rem;
	color: #4A4A4A; /* 白背景に対し 9.0:1 */
	margin: 0 0 0.75rem;
}

.find-search__row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.find-search__input {
	flex: 1 1 18rem;
	min-height: 56px;
	padding: 0.75rem 1rem;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--color-text-primary, #1a1a1a);
	background: #fff;
	border: 2px solid #767676; /* 白背景に対し 4.5:1 */
	border-radius: 3px;
}

.find-search__submit {
	min-height: 56px;
	min-width: 120px;
	padding: 0.75rem 1.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	background: var(--color-primary, #14453D);
	border: 2px solid var(--color-primary, #14453D);
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.find-search__submit:hover {
	background: var(--color-primary-hover, #1A5C52);
	border-color: var(--color-primary-hover, #1A5C52);
}

/* ---- 商品一覧への導線 ---- */

.find-block__all {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 720px;
	min-height: 64px;
	margin: 1.5rem auto 0;
	padding: 0.85rem 1.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: var(--color-primary, #14453D);
	border: 2px solid var(--color-primary, #14453D);
	border-radius: 3px;
	transition: background-color 0.2s ease;
}

.find-block__all:hover,
.find-block__all:focus {
	background: var(--color-primary-hover, #1A5C52);
	border-color: var(--color-primary-hover, #1A5C52);
	color: #fff;
}

.find-block__note {
	max-width: 720px;
	margin: 0.5rem auto 0;
	font-size: 1rem;
	color: #4A4A4A;
	text-align: center;
}

/* ---- 0件時 ---- */

.no-results {
	max-width: 720px;
	margin: 2rem auto 3rem;
	padding: 0 1rem;
}

.no-results__title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text-primary, #1a1a1a);
	margin: 0 0 0.75rem;
}

.no-results__lead {
	font-size: 1rem;
	line-height: 1.8;
	margin: 0 0 0.5rem;
}

.no-results__tips {
	font-size: 1rem;
	line-height: 1.9;
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
}

.no-results__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.no-results__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0.8rem 1.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: var(--color-primary, #14453D);
	border: 2px solid var(--color-primary, #14453D);
	border-radius: 3px;
}

.no-results__btn--ghost {
	color: var(--color-primary, #14453D);
	background: #fff;
}

.no-results__btn:hover {
	background: var(--color-primary-hover, #1A5C52);
	border-color: var(--color-primary-hover, #1A5C52);
	color: #fff;
}

.no-results__contact {
	font-size: 1rem;
	line-height: 1.8;
	margin: 1.25rem 0 0;
}

/* ---- フォーカス表示（outline:none は書かない）---- */

.find-search__input:focus-visible,
.find-search__submit:focus-visible,
.find-block__all:focus-visible,
.no-results__btn:focus-visible {
	outline: 3px solid var(--color-primary, #14453D);
	outline-offset: 2px;
}

/* ---- PC ---- */

@media (min-width: 768px) {
	.no-results__actions {
		flex-direction: row;
	}

	.no-results__btn {
		flex: 1;
	}
}

/* ---- 検索の例（押せるリンク）---- */

.find-search__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.find-search__examples li {
	margin: 0;
	list-style: none;
}

.find-search__example {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 1rem;
	font-size: 1rem;
	color: var(--color-primary, #14453D);
	text-decoration: underline;
	background: #fff;
	border: 1px solid #767676;
	border-radius: 999px;
}

.find-search__example:hover,
.find-search__example:focus {
	color: #fff;
	background: var(--color-primary, #14453D);
	border-color: var(--color-primary, #14453D);
}

.find-search__example:focus-visible {
	outline: 3px solid var(--color-primary, #14453D);
	outline-offset: 2px;
}

/* ---- ORフォールバックの通知 ---- */

.search-fallback-notice {
	max-width: 900px;
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text-primary, #1a1a1a);
	background: var(--color-bg-warm, #F8F7F4);
	border-left: 4px solid var(--color-primary, #14453D);
	border-radius: 3px;
}