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

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

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

/* --- --- --- カテゴリラベル --- --- --- */
.el_npSuggestColumnLabel {
	display: inline-block;
	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: 'ブランド';
}

.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: 'カテゴリ名';
}

.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;
	background-color: #d3d6dd;
	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: #ff4500;
	color: #fff;
}

/* --- --- --- 王冠マーク --- --- --- */
.el_npSuggestCrownIcon {
	display: inline-block;
	position: relative;
	padding: .5em;
}

.el_npSuggestCrownIcon::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 10%;
	width: 0;
	height: 0;
	border-top: 0;
	border-right: .5em solid transparent;
	border-bottom: .9em solid #fb0;
	border-left: .5em solid transparent;
	transform: translateX(-50%);
}

.el_npSuggestCrownIcon::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 10%;
	width: 0;
	height: 0;
	border-top: .3em solid transparent;
	border-right: .5em solid #fb0;
	border-bottom: .4em solid #f90;
	border-left: .5em solid #fb0;
	transform: translateX(-50%);
}

/* --- --- --- 王冠マーク(シルバー) --- --- --- */
.el_npSuggestCrownIcon.el_npSuggestCrownIcon__silver::before {
	border-bottom-color: #ccc;
}

.el_npSuggestCrownIcon.el_npSuggestCrownIcon__silver::after {
	border-color: #ccc;
	border-top-color: transparent;
	border-bottom-color: #aaa;
}

/* --- --- --- 王冠マーク(ブロンズ) --- --- --- */
.el_npSuggestCrownIcon.el_npSuggestCrownIcon__bronze::before {
	border-bottom-color: #d98;
}

.el_npSuggestCrownIcon.el_npSuggestCrownIcon__bronze::after {
	border-color: #d98;
	border-top-color: transparent;
	border-bottom-color: #c76;
}