/**
 * PC用のCSS
 */

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

.bl_npSuggestContainerDetail * {
	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_npSuggestContainerDetail *::-webkit-scrollbar{
	width: 0;
	height: 0;
 }
.bl_npSuggestContainerDetail a {
	color: #545454;
	text-decoration: none;
}


/* === === === モジュール === === === */

/* --- --- --- コンテナ --- --- --- */
html:not(.sp) .bl_npSuggestContainerDetail {
	position: absolute;
	z-index: 1000;
	width: 450px;
	margin-top: -1px;
}
.bl_npSuggestContainerDetail {
	position: absolute;
	z-index: 1000;
	width: 70%;
	margin-top: -1px;
}

.bl_npSuggestContainerDetail .bl_npSuggestContainerDetail_searchboxComponent {
	margin: 0 1px;
	background-color: #fff;
	display: grid;
}

.bl_npSuggestContainerDetail .bl_npSuggestContainerDetail_eventComponent {
	background-color: #fff;
}

/* --- --- --- サジェスト --- ---- --- */
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList {
	border: 1px solid #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_header {
	font-size: 0.75em;
	padding: .5em;
	background-color: #d4d9dc;
	font-weight: bold;
display:none;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_header::after {
	content: 'サジェスト';
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_body {
	/* height: calc(2em * 2); */
	overflow-y: auto;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid #d4d9dc;
	cursor: pointer;
	height: 40px;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item:last-child {
	border-bottom: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item:focus,
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item:hover {
	background-color: #f5f5f5;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item > * {
	margin-right: 0.6em;
	align-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_item > *:first-child {
	margin-left: .5em;
	line-height: 42px;
}
.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}


.bl_npSuggestContainerDetail .bl_npSuggestKeywordList_keyword

/* --- --- --- サーチコンポーネント --- ---- --- */
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList {
	border: 1px solid #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_header {
	font-size: 0.75em;
	padding: .5em;
	background-color: #d4d9dc;
	font-weight: bold;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_header::after {
	content: 'キーワード';
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_body {
	/* height: calc(2em * 2); */
	padding: 0 .3em;
	overflow-y: auto;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid #d4d9dc;
	cursor: pointer;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item:last-child {
	border-bottom: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item:focus,
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item:hover {
	background-color: #f5f5f5;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestSearchKeywordList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}

/* --- --- --- 検索履歴 --- ---- --- */
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList {
	border: 1px solid #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_header {
    font-size: 12px;
    padding: 12px;
    background-color: #F0F0F0;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_header::after {
	content: '検索履歴'
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_body {
	/* height: calc(2em * 2); */
	overflow-y: auto;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid #d4d9dc;
	cursor: pointer;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item:last-child {
	border-bottom: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item:focus,
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item:hover {
	background-color: #f5f5f5;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestHistoryList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}

/* --- --- --- ランキング --- --- --- */
.bl_npSuggestContainerDetail .bl_npSuggestRankingList {
	counter-reset: bl_npSuggestRankingList 0; /* 変数名と初期値を定義 */
	border: 1px solid #d4d9dc;
	order: 2;
	border-top: 0px;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_header {
font-size: 12px;
    padding: 12px;
    background-color: #F0F0F0;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_header::after {
	content: 'キーワードランキング';
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_body {
	/* height: calc(2em * 3); */
	overflow-y: auto;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom: 1px solid #d4d9dc;
	cursor: pointer;
	counter-increment: bl_npSuggestRankingList; /* カウンタをインクリメント */
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item:last-child {
	border-bottom: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item:focus,
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_item:hover {
	background-color: #f5f5f5;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_keyword::after {
content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #686868;
    border-left: 2px solid #686868;
    transform: rotate(135deg);
    position: absolute;
    right: 10px;
}

.bl_npSuggestContainerDetail .bl_npSuggestRankingList_icon {
	display: flex;
    justify-content: center;
    align-items: center;
	font-weight: bold;
	color: #fff;
    background-color: #A8A9AA;
    border-radius: 50%;
font-size: 10px;
    width: 21px;
    height: 21px;
    letter-spacing: normal;
    line-height: normal;
}
.bl_npSuggestContainerDetail .bl_npSuggestRankingList_icon::before {
	content: counter(bl_npSuggestRankingList) '';
}


/* --- --- --- サジェスト商品詳細(カード) --- --- --- */
.bl_npSuggestContainerDetail .bl_npSuggestItemList {
	border: 1px solid #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_header {
	font-size: 0.75em;
	padding: .5em;
	background-color: #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_header > span {
	margin: 0 .3em;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body {
	padding: .5em 0 .5em .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body::after { /* スクロールの端はpaddingが効かないので、padding分の疑似要素を入れる */
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_item {
	display: block;
	flex: 0 0 7em;
	margin: 0 .5em 0 0;
	box-shadow: 1px 1px 2px 1px #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_item:last-child {
	margin: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_item:focus,
.bl_npSuggestContainerDetail .bl_npSuggestItemList_item:hover {
	box-shadow: 2px 2px 3px 2px #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_body::-webkit-scrollbar-thumb{
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}

/* --- --- --- サジェスト商品詳細(メディア) --- --- --- */
.bl_npSuggestContainerDetail .bl_npSuggestItemList__media .bl_npSuggestItemList_body {
	display: block;
	padding: .5em .5em 0 .5em;
	overflow-y: auto;
	max-height: 400px;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList__media .bl_npSuggestItemList_item {
	display: flex;
	height: 6em;
	margin: 0 0 .5em 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList_item:last-child {
	margin: 0;
}
.bl_npSuggestContainerDetail .bl_npSuggestItemList__media .bl_npSuggestItemList_body::-webkit-scrollbar{
		width: .3em;
		height: 0;
}

/* --- --- --- メディア --- --- --- */
.bl_npSuggestContainerDetail .bl_npSuggestMedia {
	background-color: #fff;
	display: flex;
	height: 6em;
}
.bl_npSuggestContainerDetail .bl_npSuggestMedia_imgWrapper {
	position: relative;
	flex: 0 1 35%;
	overflow-y: hidden;
}
.bl_npSuggestContainerDetail .bl_npSuggestMedia_imgWrapper > img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.bl_npSuggestContainerDetail .bl_npSuggestMedia_body {
	flex: 1;
	padding: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestMedia_ttl {
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}
.bl_npSuggestContainerDetail .bl_npSuggestMedia_price {
	font-size: .8em;
}

/* --- --- --- カード --- --- --- */
.bl_npSuggestContainerDetail .bl_npSuggestCard {
	display: block;
	background-color: #fff;
}
.bl_npSuggestContainerDetail .bl_npSuggestCard_imgWrapper {
	position: relative;
	padding-top: 75%; /* widthに対しての割合 */
	overflow: hidden;
}
.bl_npSuggestContainerDetail .bl_npSuggestCard_imgWrapper > img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.bl_npSuggestContainerDetail .bl_npSuggestCard_body {
	padding: .5em;
}
.bl_npSuggestContainerDetail .bl_npSuggestCard_ttl {
	font-size: .8em;
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}
.bl_npSuggestContainerDetail .bl_npSuggestCard_price {
	font-size: .6em;
}
</style>

<style>
/**
 * モバイル用のCSS
 */

/* === === === リセットスタイル === === === */
.bl_npSuggestContainerDetailMobile {
	box-sizing: border-box;
	font-size: 14px;
	color: #545454;
	line-height: 1;
}
.bl_npSuggestContainerDetailMobile * {
	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_npSuggestContainerDetailMobile *::-webkit-scrollbar{
	width: 0;
	height: 0;
 }
.bl_npSuggestContainerDetailMobile a {
	color: #545454;
	text-decoration: none;
}
/* === === === モジュール === === === */
/* --- --- --- コンテナ --- --- --- */
.bl_npSuggestContainerDetailMobile {
	position: absolute;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin-top: 1px;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestContainerDetailMobile_searchboxComponent {
	width: 100%;
	margin: 0;
	background-color: #fff;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestContainerDetailMobile_eventComponent {
	width: 100%;
	background-color: #fff;
}
/* --- --- --- サジェスト --- ---- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList {
	border: 0;
	margin-bottom: 1px;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_header {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_body::after {
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_body::-webkit-scrollbar-thumb{
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}
.bl_npSuggestContainerDetailMobile .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_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item:last-child {
	border-bottom: 1px solid #d4d9dc;
	margin-right: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item:focus,
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item .el_npSuggestAnnotationLabel {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestKeywordList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}
/* --- --- --- サーチコンポーネント --- ---- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList {
	border: 0;
	margin-bottom: 1px;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_header {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}
.bl_npSuggestSearchKeywordList_body::after {
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestContainerDetailMobile .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_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_item:last-child {
	border-bottom: 1px solid #d4d9dc;
	margin-right: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_item:focus,
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_item .el_npSuggestAnnotationLabel {
	display: none;
}
.bl_npSuggestSearchKeywordList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestSearchKeywordList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em 0;
}
/* --- --- --- 検索履歴 --- ---- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList {
	border: 0;
	margin-bottom: 1px;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_header {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_body::after {
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_body::-webkit-scrollbar-thumb{
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}
.bl_npSuggestContainerDetailMobile .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_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item:last-child {
	border-bottom:	1px solid #d4d9dc;
	margin-right: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item:focus,
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item .el_npSuggestAnnotationLabel {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestHistoryList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em;
}
/* --- --- --- ランキング --- --- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList {
	border: 0;
	margin-bottom: 1px;
	counter-reset: bl_npSuggestRankingList 0; /* 変数名と初期値を定義 */
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_header {
	display: none;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_body {
	display: flex;
	justify-content: flex-start;
	padding: .5em;
	overflow-y: auto;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_body::after {
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_body::-webkit-scrollbar-thumb{
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}
.bl_npSuggestContainerDetailMobile .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_npSuggestContainerDetailMobile .bl_npSuggestRankingList_item:last-child {
	margin-right: 0;
	border-bottom: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_item > * {
	margin-right: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_item > *:first-child {
	margin-left: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_item:focus,
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_item:hover {
	color: #fff;
	border-color: #009fcc;
	background-color: #009fcc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_label {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	padding: .75em 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_keyword {
	display: flex;
	align-items: center;
	flex-grow: 1;
	white-space: nowrap;
	overflow-x: auto;
	padding: .75em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_icon {
	font-weight: bold;
	color: #a9a9a9;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestRankingList_icon::before {
	content: counter(bl_npSuggestRankingList) '.';
}
/* --- --- --- サジェスト商品詳細(カード) --- --- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList {
	border: 1px solid #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_header {
	font-size: 0.75em;
	padding: .5em;
	background-color: #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_header > span {
	margin: 0 .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body {
	padding: .5em 0 .5em .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body::after { /* スクロールの端はpaddingが効かないので、padding分の疑似要素を入れる */
	content: '';
	padding: .25em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_item {
	display: block;
	flex: 0 0 7em;
	margin: 0 .5em 0 0;
	box-shadow: 1px 1px 2px 1px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_item:last-child {
	margin: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_item:focus,
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_item:hover {
	box-shadow: 2px 2px 3px 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body::-webkit-scrollbar{
	width: 0;
	height: .3em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body::-webkit-scrollbar-track{
	border-radius: .5em;
	box-shadow: inset 0 0 2px #d4d9dc;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_body::-webkit-scrollbar-thumb{
	background: #666;
	border-radius: .5em;
	box-shadow: none;
}
/* --- --- --- サジェスト商品詳細(メディア) --- --- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_body {
	display: block;
	padding: .5em .5em 0 .5em;
	overflow-y: auto;
	max-height: 400px;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_item {
	display: flex;
	height: 6em;
	margin: 0 0 .5em 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList_item:last-child {
	margin: 0;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestItemList__media .bl_npSuggestItemList_body::-webkit-scrollbar{
		width: .3em;
		height: 0;
}
/* --- --- --- メディア --- --- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia {
	background-color: #fff;
	display: flex;
	height: 6em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia_imgWrapper {
	position: relative;
	flex: 0 1 35%;
	overflow-y: hidden;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia_imgWrapper > img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia_body {
	flex: 1;
	padding: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia_ttl {
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestMedia_price {
	font-size: .8em;
}
/* --- --- --- カード --- --- --- */
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard {
	display: block;
	background-color: #fff;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard_imgWrapper {
	position: relative;
	padding-top: 75%; /* widthに対しての割合 */
	overflow: hidden;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard_imgWrapper > img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard_body {
	padding: .5em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard_ttl {
	font-size: .8em;
	max-height: 3em;
	overflow-y: auto;
	margin-bottom: 1em;
}
.bl_npSuggestContainerDetailMobile .bl_npSuggestCard_price {
	font-size: .6em;
}
</style>

<style>
/**
 * PC・モバイル共用のCSS
 */

/* === === === エレメント === === === */
/* --- --- --- 太字 --- --- --- */
.el_bold {
	display: inline-block;
	font-weight: bold;
}

/* -- --- --- hitnumラベル --- --- --- */
.el_npSuggestHitnumLabel {
	font-size: .75em;
	color: #666;
}

/* --- --- --- カテゴリラベル --- --- --- */
.el_npSuggestColumnLabel {
	display: none;
	padding: .3em .7em;
	background-color: #d4d9dc;
	border-radius: .3em;
	color: #666;
	font-size: .75em;
}
.el_npSuggestColumnLabel__::after { content: 'キーワード'; }
.el_npSuggestColumnLabel__ranking::after { content: 'キーワード'; }
.el_npSuggestColumnLabel__query::after { content: '自動学習'; }
.el_npSuggestColumnLabel__word::after { content: '抽出キーワード'; }
.el_npSuggestColumnLabel__title::after { content: '商品名'; }
.el_npSuggestColumnLabel__path::after { content: 'カテゴリ'; }
.el_npSuggestColumnLabel__narrow1::after { content: 'narrow1'; }
.el_npSuggestColumnLabel__narrow2::after { content: 'narrow2'; }
.el_npSuggestColumnLabel__narrow3::after { content: 'narrow3'; }
.el_npSuggestColumnLabel__narrow4::after { content: 'narrow4'; }
.el_npSuggestColumnLabel__narrow5::after { content: 'narrow5'; }
.el_npSuggestColumnLabel__narrow6::after { content: 'narrow6'; }
.el_npSuggestColumnLabel__narrow7::after { content: 'narrow7'; }
.el_npSuggestColumnLabel__narrow8::after { content: 'narrow8'; }
.el_npSuggestColumnLabel__narrow9::after { content: 'narrow9'; }
.el_npSuggestColumnLabel__narrow10::after { content: 'narrow10'; }
.el_npSuggestColumnLabel__keyword1::after { content: 'keyword1'; }
.el_npSuggestColumnLabel__keyword2::after { content: 'keyword2'; }
.el_npSuggestColumnLabel__keyword3::after { content: 'keyword3'; }
.el_npSuggestColumnLabel__keyword4::after { content: 'keyword4'; }
.el_npSuggestColumnLabel__keyword5::after { content: 'keyword5'; }
.el_npSuggestColumnLabel__keyword6::after { content: 'keyword6'; }
.el_npSuggestColumnLabel__keyword7::after { content: 'keyword7'; }
.el_npSuggestColumnLabel__keyword8::after { content: 'keyword8'; }
.el_npSuggestColumnLabel__keyword9::after { content: 'keyword9'; }
.el_npSuggestColumnLabel__keyword10::after { content: 'keyword10'; }

/* -- --- --- 注釈ラベル --- --- --- */
.el_npSuggestAnnotationLabel {
	display: inline-block;
	padding: 0 .7em;
	color: #009fcc;
	font-size: .75em;
}

/* --- --- --- 削除ボタン --- --- --- */
.el_npSuggestCrossBtn {
	position: relative;
	display: inline-block;
	padding: .7em;
	border-radius: .7em;
	color: #666;
	cursor: pointer;
	transition: .25s;
}
.el_npSuggestCrossBtn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: .8em;
	height: .1em;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}
.el_npSuggestCrossBtn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: .1em;
	height: .8em;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}
.el_npSuggestCrossBtn:focus,
.el_npSuggestCrossBtn:hover {
	background-color: #686868;
	color: #fff;
}

/* --- --- --- 王冠マーク --- --- --- */
.el_npSuggestCrownIcon {

    display: flex;
    justify-content: center;
    align-items: center;	
}
.el_npSuggestCrownIcon::before {
	background-color: #C2A944;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
	content: '1';
	line-height: 20px;
	text-align: center;
	letter-spacing: -1px;
}


/* --- --- --- 王冠マーク(シルバー) --- --- --- */
.el_npSuggestCrownIcon.el_npSuggestCrownIcon__silver::before {
	content: '2';
	background-color: #808080;
}


/* --- --- --- 王冠マーク(ブロンズ) --- --- --- */
.el_npSuggestCrownIcon.el_npSuggestCrownIcon__bronze::before {
	content: '3';
	background-color: #852A00;
}


.suggest_arrow{
content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #686868;
    border-left: 2px solid #686868;
    transform: rotate(135deg);
    position: relative;
    top: 16px;
}
