/**
 * モバイル用のCSS
 */

/* === === === リセットスタイル === === === */
.bl_npSuggestContainerMobile {
	box-sizing: border-box;
	font-size: 14px;
	color: #545454;
	line-height: 1;
}

.bl_npSuggestContainerMobile * {
	word-break: break-all;
	/* 文字の改行に関する禁則処理を解除してどこでも開業できるようにする */
	word-wrap: break-word;
	/* 必要に応じて単語の途中で改行 */
	-ms-overflow-style: none;
	/* IE でスクロールバーを表示しない */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: sans-serif;
	vertical-align: baseline;
	background: transparent;
}

.bl_npSuggestContainerMobile *::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.bl_npSuggestContainerMobile a {
	color: #545454;
	text-decoration: none;
}

/* === === === モジュール === === === */
/* --- --- --- コンテナ --- --- --- */
.bl_npSuggestContainerMobile {
	position: absolute;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin-top: 1px;
}

.bl_npSuggestContainerMobile .bl_npSuggestContainerMobile_searchboxComponent {
	width: 100%;
	margin: 0;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestContainerMobile_eventComponent {
	width: 100%;
	background-color: #fff;
}

/* --- --- --- サジェスト --- ---- --- */
.bl_npSuggestContainerMobile .bl_npSuggestKeywordList {
	border: 0;
	margin-bottom: 1px;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_header {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_body::after {
	content: '';
	padding: .25em;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar {
	width: 0;
	height: .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar-track {
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: .25em;
	margin-right: .5em;
	border: 1px solid #d4d9dc;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item:last-child {
	border-bottom: 1px solid #d4d9dc;
	margin-right: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item:focus,
.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item .el_npSuggestAnnotationLabel {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item>* {
	margin-right: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_item>*:first-child {
	margin-left: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestKeywordList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}

/* --- --- --- サーチコンポーネント --- ---- --- */
.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList {
	border: 0;
	margin-bottom: 1px;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_header {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}

.bl_npSuggestSearchKeywordList_body::after {
	content: '';
	padding: .25em;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_body::-webkit-scrollbar {
	width: 0;
	height: .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_body::-webkit-scrollbar-track {
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_body::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

.bl_npSuggestSearchKeywordList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: .25em;
	margin-right: .5em;
	border: 1px solid #d4d9dc;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_item:last-child {
	border-bottom: 1px solid #d4d9dc;
	margin-right: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_item:focus,
.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}

.bl_npSuggestContainerMobile .bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_item .el_npSuggestAnnotationLabel {
	display: none;
}

.bl_npSuggestSearchKeywordList_item>* {
	margin-right: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_item>*:first-child {
	margin-left: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestSearchKeywordList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}

/* --- --- --- 検索履歴 --- ---- --- */
.bl_npSuggestContainerMobile .bl_npSuggestHistoryList {
	border: 0;
	margin-bottom: 1px;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_header {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_body::after {
	content: '';
	padding: .25em;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar {
	width: 0;
	height: .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar-track {
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: .25em;
	margin-right: .5em;
	border: 1px solid #d4d9dc;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item:last-child {
	border-bottom: 1px solid #d4d9dc;
	margin-right: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item:focus,
.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item .el_npSuggestAnnotationLabel {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item>* {
	margin-right: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_item>*:first-child {
	margin-left: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestHistoryList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em;
}

/* --- --- --- ランキング --- --- --- */
.bl_npSuggestContainerMobile .bl_npSuggestRankingList {
	border: 0;
	margin-bottom: 1px;
	counter-reset: bl_npSuggestRankingList 0;
	/* 変数名と初期値を定義 */
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_header {
	display: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_body::after {
	content: '';
	padding: .25em;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_body::-webkit-scrollbar {
	width: 0;
	height: .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_body::-webkit-scrollbar-track {
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_body::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: pointer;
	counter-increment: bl_npSuggestRankingList;
	/* カウンタをインクリメント */
	flex-shrink: 0;
	border-radius: .25em;
	margin-right: .5em;
	border: 1px solid #d4d9dc;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item:last-child {
	margin-right: 0;
	border-bottom: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item>* {
	margin-right: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item>*:first-child {
	margin-left: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item:focus,
.bl_npSuggestContainerMobile .bl_npSuggestRankingList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_icon {
	font-weight: bold;
	color: #a9a9a9;
}

.bl_npSuggestContainerMobile .bl_npSuggestRankingList_icon::before {
	content: counter(bl_npSuggestRankingList) '.';
}

/* --- --- --- サジェスト商品詳細(カード) --- --- --- */
.bl_npSuggestContainerMobile .bl_npSuggestItemList {
	border: 1px solid #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_header {
	font-size: 0.75em;
	padding: .5em;
	background-color: #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_header>span {
	margin: 0 .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body {
	padding: .5em 0 .5em .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body::after {
	/* スクロールの端はpaddingが効かないので、padding分の疑似要素を入れる */
	content: '';
	padding: .25em;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_item {
	display: block;
	flex: 0 0 7em;
	margin: 0 .5em 0 0;
	box-shadow: 1px 1px 2px 1px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_item:last-child {
	margin: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_item:focus,
.bl_npSuggestContainerMobile .bl_npSuggestItemList_item:hover {
	box-shadow: 2px 2px 3px 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body::-webkit-scrollbar {
	width: 0;
	height: .3em;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body::-webkit-scrollbar-track {
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_body::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

/* --- --- --- サジェスト商品詳細(メディア) --- --- --- */
.bl_npSuggestContainerMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_body {
	display: block;
	padding: .5em .5em 0 .5em;
	overflow-y: auto;
	max-height: 400px;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_item {
	display: flex;
	height: 6em;
	margin: 0 0 .5em 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList_item:last-child {
	margin: 0;
}

.bl_npSuggestContainerMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_body::-webkit-scrollbar {
	width: .3em;
	height: 0;
}

/* --- --- --- メディア --- --- --- */
.bl_npSuggestContainerMobile .bl_npSuggestMedia {
	background-color: #fff;
	display: flex;
	height: 6em;
}

.bl_npSuggestContainerMobile .bl_npSuggestMedia_imgWrapper {
	position: relative;
	flex: 0 1 35%;
	overflow-y: hidden;
}

.bl_npSuggestContainerMobile .bl_npSuggestMedia_imgWrapper>img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.bl_npSuggestContainerMobile .bl_npSuggestMedia_body {
	flex: 1;
	padding: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestMedia_ttl {
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}

.bl_npSuggestContainerMobile .bl_npSuggestMedia_price {
	font-size: .8em;
}

/* --- --- --- カード --- --- --- */
.bl_npSuggestContainerMobile .bl_npSuggestCard {
	display: block;
	background-color: #fff;
}

.bl_npSuggestContainerMobile .bl_npSuggestCard_imgWrapper {
	position: relative;
	padding-top: 75%;
	/* widthに対しての割合 */
	overflow: hidden;
}

.bl_npSuggestContainerMobile .bl_npSuggestCard_imgWrapper>img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.bl_npSuggestContainerMobile .bl_npSuggestCard_body {
	padding: .5em;
}

.bl_npSuggestContainerMobile .bl_npSuggestCard_ttl {
	font-size: .8em;
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}

.bl_npSuggestContainerMobile .bl_npSuggestCard_price {
	font-size: .6em;
}