@charset "utf-8";

/*************************************************
 * Description: 【ヘッダー】ヘッダーユーティリティ
 * Package: ecp_header_utility
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2017/11/
 * Notes: 
*************************************************/
#block_ecp_header_utility {
	height: 100%;
}
#block_ecp_header_utility .block_inner {
	height: 100%;
}
#block_ecp_header_utility .section_body {
	height: 100%;
}

/* テキストリンクカラー */
#block_ecp_header_utility a:link,
#block_ecp_header_utility a:visited {
	color: inherit;
}
#block_ecp_header_utility a:hover {
	text-decoration: none;
}


/*************************************************
 *
 * ユーティリティナビエリア
 *
*************************************************/
#block_ecp_header_utility .util_nav_area {
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#block_ecp_header_utility .util_nav_area .item_util {
	display: flex;
}


/* ==============================================
 * .util_btn 汎用ボタン
=============================================== */
#block_ecp_header_utility .util_nav_area .util_btn {
	height: 100%;
	color: #72705D;
}
#block_ecp_header_utility .util_nav_area .util_btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}
#block_ecp_header_utility .util_nav_area .util_btn a:hover {
}
#block_ecp_header_utility .util_nav_area .util_btn i {
	color: #B09D7C;
}
#block_ecp_header_utility .util_nav_area .util_btn i + span {
}
@media ( max-width: 767px ) {
	#block_ecp_header_utility .util_nav_area .util_btn {
		min-width: 40px;/* ボタン横幅サイズ */
		border-left: solid 1px #ccc;
	}
	#block_ecp_header_utility .util_nav_area .util_btn a {
		padding: 0 10px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i {
		font-size: 24px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i.ion-ios-person {
		font-size: 30px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i + span {
		display: none;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#block_ecp_header_utility .util_nav_area .util_btn {
	}
	#block_ecp_header_utility .util_nav_area .util_btn a {
		padding: 0 10px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i {
		font-size: 24px;
		margin-right: 5px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i.ion-ios-person {
		font-size: 32px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i + span {
		font-size: 11px;
	}
}
@media ( min-width: 980px ) {
	#block_ecp_header_utility .util_nav_area .util_btn + .util_btn {
		margin-left: 20px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn {
		font-size: 13px;
	}
	#block_ecp_header_utility .util_nav_area .util_btn a {
	}
	#block_ecp_header_utility .util_nav_area .util_btn a:hover {
		text-decoration: underline;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i {
		font-size: 150%;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i.ion-ios-person {
		font-size: 200%;
	}
	#block_ecp_header_utility .util_nav_area .util_btn i.ion-unlocked {
	}
	#block_ecp_header_utility .util_nav_area .util_btn i + span {
		margin-left: 5px;
	}
}

/*
/* ==============================================
 * 検索窓
=============================================== *--/
#block_ecp_header_utility .search_products_area {
}
#block_ecp_header_utility .search_products_area.hidden {
	display: none;
	/* display:noneで要素を隠して後続の要素のレイアウトが崩れることがあるなら（Firefoxで確認）、positionプロパティで隠すと対策可？
	position: absolute;
	top: 0px;
	left: -9999px;
	*--/
}

/* 検索窓パーツ（PC・モバイル用共通） 
----------------------------------------------- *--/
#block_ecp_header_utility .search_input {
	position: relative;
}
#block_ecp_header_utility .search_input input[type="text"] {
	width: 200px;
	height: 35px;
	box-sizing: border-box;
	padding-left: 0.5em;
	padding-right: 30px;
	border-radius: 3px;
}
#block_ecp_header_utility .search_input input[type="text"]:focus {
}
#block_ecp_header_utility .search_input a.btn_search {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	padding-right: 5px;
}
#block_ecp_header_utility .search_input a.btn_search i {
	font-size: 20px;
	color: #9A9A9A;
	transition: color .3s;
}
#block_ecp_header_utility .search_input a.btn_search:hover i {
	color: #000;
}
#block_ecp_header_utility .search_input a.btn_search span {
	display: inline-block;
	width: 0;
	text-indent: -9999px;
}
#block_ecp_header_utility .search_input *::-moz-placeholder {
}

/* デバイスごと（PC・モバイル用） *--/
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#block_ecp_header_utility .search_products_area {
		padding: 0 10px;
	}
	#block_ecp_header_utility .search_input input[type="text"] {
		height: 28px;
	}
}
@media ( min-width: 980px ) {
	#block_ecp_header_utility .search_products_area {
		padding: 0 20px;
	}
}

/* 検索トグルボタン（検索窓出現ボタン）
----------------------------------------------- *--/
#block_ecp_header_utility .util_toggle_search {
}
#block_ecp_header_utility .util_toggle_search.hidden {
	display: none;
	/* display:noneで要素を隠して後続の要素のレイアウトが崩れることがあるなら（Firefoxで確認）、positionプロパティで隠すと対策可？
	position: absolute;
	top: 0px;
	left: -9999px;
	*--/
}
#block_ecp_header_utility .util_toggle_search a {
}
#block_ecp_header_utility .util_toggle_search i {
	font-size: 20px;
}
#block_ecp_header_utility .util_toggle_search span {
	/*
	display: inline-block;
	width: 0;
	text-indent: -9999px;
	*--/
	display: none;
}

/* 折り畳み型検索フォーム（スマホ用）
----------------------------------------------- *--/
#block_ecp_header_utility .search_products_folding {
	position: absolute;
	top: 100%;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	z-index: 99;
	background-color: hsla(0, 0%, 0%, 0.7);
	display: none;
}
#block_ecp_header_utility .search_products_folding .search_input {
	max-width: 500px;
	margin: 0 auto;
}
#block_ecp_header_utility .search_products_folding .search_input input[type="text"] {
	width: 100%;
	height: 40px;
}
@media ( max-width: 767px ) {
	header {
		position: relative;
	}
	#block_ecp_header_utility .search_products_folding {
		position: absolute;
		top: 100%;
		left: 0;
	}
	#block_ecp_header_utility .search_products_area {
		display: none;
		/* display:noneで要素を隠して後続の要素のレイアウトが崩れることがあるなら（Firefoxで確認）、positionプロパティで隠すと対策可？
		position: absolute;
		top: 0px;
		left: -9999px;
		*--/
	}
}
*/

/* ==============================================
 * カート情報
=============================================== */
@media ( max-width: 767px ) {
	#block_ecp_header_utility .util_cartinfo {
		position: relative;
	}
	#block_ecp_header_utility .util_cartinfo .quantity {
		position: absolute;
		top: 3px;
		right: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		width: 17px;
		height: 17px;
		background-color: #b00;
		color: #fff;
		border-radius: 50%;
	}
	#block_ecp_header_utility .util_cartinfo .quantity .text {
		display: none;
	}
	#block_ecp_header_utility .util_cartinfo .quantity .ten {
		display: none;
	}
	#block_ecp_header_utility .util_cartinfo .totalprice {
		display: none;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#block_ecp_header_utility .util_cartinfo {
	}
	#block_ecp_header_utility .util_cartinfo .quantity {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		width: 21px;
		height: 21px;
		background-color: #b00;
		color: #fff;
		border-radius: 50%;
	}
	#block_ecp_header_utility .util_cartinfo .quantity .text {
		display: none;
	}
	#block_ecp_header_utility .util_cartinfo .quantity .ten {
		display: none;
	}
	#block_ecp_header_utility .util_cartinfo .totalprice {
		display: none;
	}
}
@media ( min-width: 980px ) {
	#block_ecp_header_utility .util_cartinfo {
		height: 30px !important;
		font-size: 13px;
		border: solid 1px #B09D7C;
		border-radius: 3px;
		line-height: 1;
	}
	#block_ecp_header_utility .util_cartinfo a {
		height: 100%;
	}
	#block_ecp_header_utility .util_cartinfo a:hover {
		text-decoration: none !important;
	}
	#block_ecp_header_utility .util_cartinfo i {
		display: none;
	}
	#block_ecp_header_utility .util_cartinfo .quantity {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 10px;
		color: #B09D7C;
	}
	#block_ecp_header_utility .util_cartinfo .quantity .text {
	}
	#block_ecp_header_utility .util_cartinfo .totalprice {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 10px;
		background-color: #B09D7C;
		color: #fff;
	}
	#block_ecp_header_utility .util_cartinfo .totalprice .text {
	}
}