@charset 'UTF-8';

/**
 * 検索ボックス全体
 * デザインに合わせてbackground等を調整してください。
 */
#searchWrapper{
	width:100vw;
	height:100vh;
	display:none;
	align-items:center;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.5);
	z-index: 100;
}

/**
 * 検索ボックス表示部分
 * デザインに合わせてmax-width等を調整してください。
 */
#searchWrapper .inner{
	text-align:center;
	width:100%;
	max-width:500px;
	z-index: 9999;
	margin: 0 auto
}

/**
 * 検索ボックス閉じるボタン
 * デザインに合わせてwidth等を調整してください。
 */
#searchWrapper .inner .close{
	display:inline-block;
	width:80px;
	margin-top:2rem;
	padding:1rem;
	background:#FFF;
}

/**
 * 背景クリック時に閉じる
 * 不要な場合には削除してください。
 */
#searchWrapper .bg{
	width:100vw;
	height:100vh;
	align-items:center;
	position:fixed;
	top:0;
	left:0;

	z-index: 110;
}