/* ===== ヘッダー商品検索（案B: 虫眼鏡アイコン→展開） ===== */
:root{
	--hs-orange:#ed6c24;
	--hs-orange-d:#d35e1a;
}

.header-search{ position:relative; display:flex; align-items:center; margin-left:14px; }

/* 虫眼鏡トグル */
.header-search-toggle{
	display:flex; align-items:center; justify-content:center;
	width:44px; height:44px; padding:0; cursor:pointer;
	background:#fff; border:2px solid var(--hs-orange); border-radius:50%;
	transition:background .2s, transform .2s;
}
.header-search-toggle:hover{ background:#fff6ec; }
.header-search-toggle svg{ display:block; }
.header-search-toggle .ic-close{ display:none; }
.header-search-toggle[aria-expanded="true"]{ background:var(--hs-orange); }
.header-search-toggle[aria-expanded="true"] .ic-search{ display:none; }
.header-search-toggle[aria-expanded="true"] .ic-close{ display:block; }

/* 展開パネル */
.header-search-panel{
	position:absolute; top:calc(100% + 12px); right:0; z-index:120;
	width:380px; max-width:80vw;
	background:#fff; border-radius:14px; padding:14px;
	box-shadow:0 10px 30px rgba(40,40,40,.18);
	opacity:0; visibility:hidden; transform:translateY(-8px);
	transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.header-search-panel::before{ /* 吹き出しの三角 */
	content:""; position:absolute; top:-7px; right:14px; width:14px; height:14px;
	background:#fff; transform:rotate(45deg); box-shadow:-2px -2px 4px rgba(40,40,40,.06);
}
.header-search.is-open .header-search-panel{ opacity:1; visibility:visible; transform:translateY(0); }

.header-search-form{ display:flex; }
.header-search-form-input{
	flex:1; min-width:0; height:46px; border:2px solid var(--hs-orange); border-right:none;
	border-radius:24px 0 0 24px; padding:0 18px; font-size:14px; color:#363636;
	background:#fff; outline:none; -webkit-appearance:none; appearance:none;
}
.header-search-form-input::placeholder{ color:#b3b3b3; }
.header-search-form-btn{
	display:flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer;
	background:var(--hs-orange); color:#fff; font-weight:700; font-size:14px;
	border-radius:0 24px 24px 0; padding:0 20px;
	box-sizing:border-box; -webkit-appearance:none; appearance:none; flex-shrink:0;
}
.header-search-form-btn:hover{ background:var(--hs-orange-d); }
.header-search-form-btn svg{ flex-shrink:0; }

/* 検索キーワードのクリア（×）ボタン（PC/SP・検索結果ページ共通の見た目） */
.js-search-clear{
	display:flex; align-items:center; justify-content:center; flex-shrink:0;
	width:24px; height:24px; padding:0; border:none; cursor:pointer;
	background:transparent; border-radius:50%;
}
.js-search-clear:hover{ background:#f0f0f0; }
.js-search-clear svg{ display:block; }

/* PC：常時展開の検索ボックス（クライアント指定デザイン） */
@media (min-width:1101px){
	.header-search-toggle{ display:none; }
	.header-search-panel{
		display:flex !important; position:static; width:auto; max-width:none;
		background:transparent; border-radius:0; padding:0; box-shadow:none;
		opacity:1; visibility:visible; transform:none;
	}
	.header-search-panel::before{ display:none; }
	.header-search-form{
		align-items:center; background:#fff;
		border:1px solid #e2e2e2; border-radius:999px;
		padding:4px 4px 4px 20px;
	}
	.header-search-form-input{
		flex:none; width:220px; height:38px; border:none; border-radius:0;
		padding:0; font-size:13px;
	}
	.header-search-form .js-search-clear{ margin:0 8px 0 4px; }
	.header-search-form-btn{
		flex-shrink:0; width:38px; height:38px; padding:0;
		border-radius:50%; justify-content:center;
		box-sizing:border-box; -webkit-appearance:none; appearance:none;
	}
	.header-search-form-btn span{ display:none; }
}

/* SP・ハンバーガー表示時：検索ボタンをハンバーガーの左隣に固定配置 */
@media (max-width:1100px){
	.header-search{ position:absolute; top:34px; right:53px; margin-left:0; z-index:9998; }
}

/* SP・タブレット：ヘッダー直下にスライドダウン表示（PC版とデザイントーンを統一） */
@media (max-width:1100px){
	.header-search-panel{
		position:fixed; left:0; right:0; top:79px; width:100%; max-width:none;
		background:transparent; border-radius:0; padding:14px 16px; box-shadow:none;
	}
	.header-search-panel::before{ display:none; }
	.header-search-form{
		align-items:center; background:#fff;
		border-radius:999px; padding:4px 4px 4px 20px;
		box-shadow:0 6px 20px rgba(40,40,40,.14);
	}
	.header-search-form-input{
		flex:1; height:44px; border:none; border-radius:0;
		padding:0; font-size:14px;
	}
	.header-search-form .js-search-clear{ margin:0 8px 0 4px; }
	.header-search-form-btn{
		flex-shrink:0; width:40px; height:40px; padding:0;
		border-radius:50%; justify-content:center;
		box-sizing:border-box; -webkit-appearance:none; appearance:none;
	}
	.header-search-form-btn span{ display:none; }
}

/* SP */
@media (max-width:768px){
	.header-search-toggle{ width:40px; height:40px; }
}

@media (max-width:650px){
	.header-search-panel{ top:65px; }
}