/*========= 検索窓のためのCSS ===============*/

.searchArea {
	width: 2rem;
	height: 2rem;
	position: relative;
}

/*検索窓のエリア*/
.searchWrap {
	position: absolute;/*絶対配置にして*/
	z-index: 99;/*最前面に設定。数字は変更可*/
	top: -5px;
	right: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	padding: 5px;
}

.headerSearch{
	width: 0;
	opacity: 0;
	transition: 0.6s ease;
	pointer-events: none;
}

.headerSearch form{
	display: flex;
	align-items: center;
	justify-content: center;
}
.headerSearch input[type=text]{
	width: 100%;
	height: 2rem;
	border: 1px solid #c8c8c8;
	padding: 0.25em 0 0.25em 0.5em;
	border-radius: 0.25rem;
}
.headerSearch input[type=submit]{
	position: absolute;
	left: -9999px;
}
.headerSearchLabel{
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: 20%;
	height: 2rem;
	min-width: 3rem;
	padding: 0.25em 0.5em 0.25em 0.5em;
	overflow: hidden;
	color: #FFFFFF;
	background-color: #036EB8;
	white-space: nowrap;
	border: 1px solid #036EB8;
	transition: 0.4s ease;
	border-radius: 0.25rem;
}
.headerSearchLabel:hover{
	background-color: #FFFFFF;
	color: #036EB8;
}
#js-search{
	color: transparent;
	color: #FFFFFF;
	-webkit-appearance: none;/*SafariやChromeのデフォルトの設定を無効*/
	width: 2rem;
	height: 2rem;
	padding: 0.5rem;
	background: #036EB8 url("../../images/icon_search01.svg") no-repeat 0.25rem center;/*虫眼鏡アイコンを背景に表示*/
	background-size: 1.25rem 1.25rem;
	outline: none;
	cursor: pointer;/*カーソルを指マークに*/
	border: 1px solid #036EB8;
	border-radius: 0.25rem;
}
#js-search span{
	position: absolute;
	left: -9999px;
}

/* ~~ PCのみ ~~ */
@media screen and (min-width:768px) {

	/*.is-search{
		pointer-events: auto;
		display: block;
		width: 14.2857em;
		opacity: 1;
	}*/

}


/* ----------------------------------------------------------------------------- *
 * メディアクエリー
 * ----------------------------------------------------------------------------- */

/* ~~ スマホ ~~ */
@media screen and (max-width:767px) {

	.searchArea {
		width: auto;
		height: auto;
		padding: 2rem 0;
		position: relative;
	}

	.headerSearch{
		pointer-events: none;
		display: block;
		width: 100%;
		opacity: 1;
	}

	.searchWrap{
		position: relative;
		z-index: 99;
		width: 550px;
		top: 0;
		left: 1.25rem;
		padding: 0;
	}

	#js-search{
		cursor: auto;
	}


}