@charset "shift_jis";
/* ������������������������������������������������

�@�@attention-topic-icon-area

������������������������������������������������ */
.topic-bnr {
margin: 0 auto 20px;
max-width: 1020px;
}

@media screen and (max-width:870px) {
.topic-bnr {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.topic-box {
width: 900px;
padding: 0 0 0 20px;
}
}

.top-item-area.item3.top-long-topic-bnr {
margin-bottom: 15px;
}

.attention-topic-icon-area {
	margin: 0 16px;
}
.attention-topic-icon-area .topic-menu {
	list-style: none;
	letter-spacing: -.40em;
}
.attention-topic-icon-area .topic-menu li {
	display: inline-block;
	letter-spacing: 1px;
	padding: 0 .5em;
	font-size: 1.2em;
	margin: 0 0 1em;
	text-align:center;
}
.attention-topic-icon-area .topic-menu a {
	display: inline-block;
}
.attention-topic-icon-area .topic-menu a:hover * {
	opacity:0.8;
}
.topic-txt {
	color: #111;
	display: inline-block;
	vertical-align: bottom;
}
.topic-icon:before {
	display: inline-block;
	padding: 0 .3em 0 0;
	color: #2976c6;
	font-size: 1.4em;
	vertical-align: bottom;
}
@media screen and (max-width:1099px) {
.attention-topic-icon-area .topic-menu {
		list-style: none;
		letter-spacing: -.40em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-line-pack: stretch;
		align-content: stretch;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
	.attention-topic-icon-area .topic-menu li {
		letter-spacing: normal;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		border-radius: 10px;
		margin: 0 .5% !important;
		background-color: #f6f6f6;
		width: 19%;
		-ms-flex-preferred-size: 18%;
		flex-basis: 19%;
		text-align: center;
	}
	.attention-topic-icon-area .topic-menu a {
		display: block;
		padding: .5em 0;
	}
	.topic-txt {
		color: #111;
		display: block;
	}
	.topic-icon {
		display: block;
	}S
	.topic-icon:before {
		font-size: 2.5em;
		padding: 0.2em 0;
	}
	.topic-txt {
		font-size: 12px;
		display: block;
		line-height: 1.3;
	}
}
@media screen and (max-width:870px) {.topic-icon:before {font-size: 2em; padding: 0;} .attention-topic-icon-area .topic-menu {margin: 0 3em;}}
@media screen and (max-width:720px) {.topic-icon:before {font-size: 1.8em;} .attention-topic-icon-area .topic-menu {margin: 0;}}
@media screen and (max-width:650px) {.topic-icon:before {font-size: 1.5em;}}
@media screen and (max-width:600px) {.topic-icon:before {font-size: 1.2em;}}
@media screen and (max-width:350px) {.topic-icon:before {font-size: 1em;}}

/* color */
.topic-icon.icon-new:before {color:#2976C6;}
.topic-icon.icon-sale2:before {color:#FF2A8A;}
.topic-icon.icon-outlet:before {color:#FF7139;}
.topic-icon.icon-restock:before {color:#A172FF;}
.topic-icon.icon-rank-mono:before {color:#339fbe;}
.topic-icon.icon-honten:before {color:#2AC3A2;}
.topic-icon.icon-point:before {color:#FF7139;}

@media screen and (max-width:1099px) {
.topic-menu li.nesage {background-color: #fbddf5;}
.topic-menu li.nesage .topic-icon:before , .topic-menu li.nesage .topic-txt {color: #b32a5d;}
.topic-menu li.rank {background-color: #ddfbf2;}
.topic-menu li.rank .topic-icon:before, .topic-menu li.rank .topic-txt {color: #2a94b3;}
.topic-menu li.service {background-color: #def6ff;}
.topic-menu li.service .topic-icon:before, .topic-menu li.service .topic-txt {color: #2976c6;}
.topic-menu li.getone {background-color: #ffe1be;}
.topic-menu li.getone .topic-icon:before, .topic-menu li.getone .topic-txt {color: #f16129;}
.topic-menu li.kumitate {background-color: #e2e9cd;}
.topic-menu li.kumitate .topic-icon:before, .topic-menu li.kumitate .topic-txt {color: #497915;}
}