@charset "Shift_JIS";

.cont-area { width: 100%; margin: 0;}
.genre-top-main img {
	max-width: 100%;
	height: auto;
}


/*============================================================
メイン見出し（h1）
============================================================*/
#genre-name::after {
 content: "";
 display: block;
 clear: both;
}
#genre-name {
 width: 100%;
 overflow: hidden;
 margin-bottom: 20px;
 border-top: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
}

#genre-name h1 {
 width: 75%;
 float:left;
 font-size: 2.5em;
 margin: 0 0 5px;
 padding: 10px 0 0;
 border-bottom: 1px solid #ddd;
 text-align: left;
}
#genre-name h1 span{ font-size: 0.5em; margin-left: 0.5em;}

#genre-name > div:nth-of-type(1){width:25%; float:right; text-align: center;}
#genre-name > div:nth-of-type(1) img{width:100%; max-width:150px; margin-top: 5px;}
#genre-name > div:nth-of-type(2){width: calc(75% - 10px); float:left; padding: 10px 5px;}

#genre-name > div a { color: #222; text-decoration: underline !important;}
#genre-name > div a:hover { color: #06f; text-decoration: none !important;}


/*============================================================
見出し
============================================================*/

.genre-top-main h2 {
 width: calc(100% - 20px);
 font-size: 14px;
 color: #666;
 margin: 25px 0px 10px;
 padding: 5px 10px;
 font-weight: bold;
 text-align: left;
 border-color: #999;
 border-width: 0 0 1px 0;
 border-style: solid;
 word-break: normal;
 background: #ffffff;
 background: -moz-linear-gradient(top, #ffffff 50%, #dddddd 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ffffff), color-stop(100%,#dddddd));
 background: -webkit-linear-gradient(top, #ffffff 50%,#dddddd 100%);
 background: -o-linear-gradient(top, #ffffff 50%,#dddddd 100%);
 background: -ms-linear-gradient(top, #ffffff 50%,#dddddd 100%);
 background: linear-gradient(to bottom, #ffffff 50%,#dddddd 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}
.genre-top-main h2 span { font-size: 11px; color: #666; font-weight: normal; padding-left: 1em;}

.genre-top-main h3{
 padding: 0 5px;
 border-bottom: 1px solid #cccc;
 border-top: 0;
 font-size: 1em;
 color: #444;
 margin: 20px 0 5px;
}

.genre-top-main h4{
 padding: 0 5px;
 border-left: 3px solid #cccc;
 font-size: 1em;
 color: #444;
 margin: 20px 0 5px;
}

.genre-top-main p {
 max-width: 100%;
 font-size: 1.0em;
 margin-top: 0;
 margin-bottom: 20px;
 line-height: 1.7em;
}
.genre-top-main .lead {
 max-width:100%;
 font-size: 1.2em;
 color: #666;
 line-height: 1.5em;
}


/*============================================================
記事
============================================================*/
.genre-top-main a.txt-link {font-size: 1.2em;display: block;}
.genre-top-main a.txt-link::after {
 font-family: FontAwesome /*FontAwesomeをフォント指定*/;
 margin-left: 3px;
 content: '\f08e' ;
}


/*============================================================
スライドバナー
============================================================*/
.sp-slide img{ width: 100%;}


/*============================================================
新着配信（PC最大6件/SP最大5件）
============================================================*/
ul.g-news-box {
 width: calc(100% - 22px);
 height: 146px;
 overflow: hidden;
 margin: 5px;
 padding: 5px 5px 0px;
 border: 1px solid #cccccc;
}
ul.g-news-box li {list-style: none; width: calc(33.33% - 6px); padding: 3px; float: left; margin-bottom: 5px;}
ul.g-news-box li a{color: #222;}
ul.g-news-box li img { width: 60px; height: 60px; float: left; border: 1px solid #cccccc; margin-right: 3px;}
ul.g-news-box li p{margin: 0; width: calc(100% - 65px); height: 63px; overflow: hidden; float: left; font-size: 12px; line-height: 130%;}
ul.g-news-box li a p:hover { text-decoration: underline !important; color: #f00;}



/*============================================================
カテゴリリンク
============================================================*/
.genre-navi { width: calc(100% - 10px ); margin: 10px 0px 10px 10px;}
.genre-navi ul{ padding: 0; font-size: 0;}

.genre-navi ul li {
 width: calc( 33.33% - 10px);
 font-size: 16px;
 float: none;
 margin-right: 10px;
 margin-bottom:15px;
 padding: 0px;
 display: inline-block;
 border: 0;
 border-radius: 0;
 text-align: left;
 overflow: hidden;
 vertical-align: top;
}

.genre-navi ul li a { display: block; color: #333333 !important; text-decoration: none;}
.genre-navi ul li a:hover { border-color: #999 !important; background-color: #e0efff !important; color: #444 !important;}

.genre-navi ul li.navi-accordion > a::before { display: none;}
.genre-navi ul li.navi-accordion > a::after, .genre-navi ul li.navi-accordion > a.guide-active::after { top: 0;}

.genre-navi ul li.navi-accordion > ul > li { margin: 0; text-indent: -1em;}
.genre-navi ul li.navi-accordion > ul > li > a { padding: 3px 2px 2px 1em !important; font-weight: normal;}

.genre-navi > ul > li > a { border-bottom: 1px solid #999; border-left: 5px solid #999; padding: 0 30px 0 0 !important; line-height: 30px; font-weight: bold; letter-spacing: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.genre-navi > ul > li > a > img { border-top: 1px solid #999; border-right: 1px solid #999; width: 40px; height: 30px; margin-right: 6px; vertical-align: bottom;}


/*============================================================
商品掲載4/5枠（ランキング等）
============================================================*/
.product-4box .product-waku .favoriteButton, .product-5box .product-waku .favoriteButton { display: none;}
.product-4box .waku-spec, .product-5box .waku-spec{	margin-bottom: 0;}







/* ################################################################## 768px以上 ################################################################## */
@media screen and (min-width: 768px) {


/*============================================================
商品掲載（ランキング）
============================================================*/
#genretop-ranking div.product-5box .product-waku { position: relative; }
#genretop-ranking .slider-pro {max-width: 100% !important;}
#genretop-ranking .sp-buttons {display: none;}
#genretop-ranking .sp-arrows {display: none;}


}

/* ################################################################## 767px以下 ################################################################## */
@media screen and (max-width: 767px) {

/*============================================================
メイン見出し（h1）
============================================================*/
#genre-name h1{
 font-size: 16px;
 width: 98%;
 background-color: #333;
 color: #FFFFFF;
 padding: 4px;
 margin: 8px 1%;
 text-align: center;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

#genre-name > div:nth-of-type(1){width:30%; float:right;}
#genre-name > div:nth-of-type(2){width:65%; float:left; padding:0 5px;}



/*============================================================
新着配信（PC最大6件/SP最大5件）
============================================================*/
ul.g-news-box { margin: 0; padding: 0; border: 0; width: 100%; height: auto;}
ul.g-news-box li {
 border: solid 1px #cccccc;
 margin: 12px 0;
 padding: 0;
 width: calc(100% - 7px);
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 font-size: 12px;
 line-height: 130%;
 background-image: url("//www.sofmap.com/images/system_icon_sp/go_right1.gif");
 background-repeat: no-repeat;
 background-position: right center;
 float: none;
}
ul.g-news-box li:nth-child(2n+1) { background-color: #f0f0f0;}
ul.g-news-box li a { position: relative; display: block; padding: 5px 25px 5px 5px; text-decoration: none; font-weight: normal;}
ul.g-news-box li img { float: left; margin-right: 4px; width: 45px; height: 45px; border: 1px solid #fff; text-align: left;}
ul.g-news-box li p { margin: 0px; display: block; width: 100%; height: auto; float: none; overflow: inherit;}
ul.g-news-box li p::after { content: ""; clear: both; height: 0; display: block; visibility: hidden;}
ul.g-news-box li:nth-child(n+6) { display: none;}

/*============================================================
別ページ用リンク
============================================================*/
.etc-navi ul li a {font-size: 14px !important;}


/*============================================================
カテゴリリンク
============================================================*/
#eztopics .toggle > ul
.genre-navi { width: 100%; margin: 0;}
.genre-navi ul li { width: 100%; margin: 0;}
.genre-navi > ul > li > a > img { display: none;}

.genre-navi > ul > li > a {
 border-color: #eee;
 border-left: 0;
 font-weight: normal;
 padding: 0 30px 0 15px !important;
 line-height: 35px;
}
.genre-navi ul li a:hover {	border-color: #eee !important;}
.genre-navi ul li a {
	color: #555 !important;
	border-bottom: 1px dotted #ccc;
	line-height: 36px;
	position: relative;
	0 30px 0 15px !important;
}
.genre-navi ul li a::after { content: "\f054"; font-family: FontAwesome; color: #aaa; top: 0; right: 5px; position: absolute;}

.genre-navi ul li.navi-accordion > ul{ display: none;}
.genre-navi ul li.navi-accordion > ul > li > a { padding: 0 30px 0 15px !important;}
.genre-navi ul li.navi-accordion > ul > li > a::before { content: ""; padding-left: 5px;}
.genre-navi ul li.navi-accordion > a::after, .navi-accordion > a.guide-active::after { position: absolute; right: 5px; top: 0px; color: #aaa !important;}





/*============================================================
商品掲載（ランキング）
============================================================*/
#genretop-ranking div.slider-pro .product-waku { margin: 0; padding: 0;}

#genretop-ranking div.slider-pro .waku-img { width: 30%; margin: 0; float: left;}
#genretop-ranking div.slider-pro .waku-img img { width: calc(100% - 10px); padding: 5px;}

#genretop-ranking div.slider-pro .waku-spec { width: calc(70% - 10px) !important; float: right; margin: 0 5px; padding: 0; overflow: hidden;}
#genretop-ranking div.slider-pro .list-maker_SP { margin: 0;}
#genretop-ranking div.slider-pro .result-product-info-price_SP { display: inline;}
#genretop-ranking div.slider-pro .result-product-info-taxdisp_SP {line-height: 1em; margin: 0;}

#genretop-ranking .product-waku .list-name_SP {height: 2.6em;}
#genretop-ranking .product-waku .list-name_SP ::before {top: 1.3em;}

#genretop-ranking .sp-horizontal .sp-arrows { bottom: 0; margin: 0; top: unset;}
#genretop-ranking .sp-arrow { font-size: 18px;}
#genretop-ranking .sp-horizontal .sp-previous-arrow {left: 0;}
#genretop-ranking .sp-horizontal .sp-next-arrow {right: 0;}
#genretop-ranking .sp-buttons { width: calc(100% - 30px); margin: 0 auto; padding-top: 2px;}


} /* ################################# 767px以下 ここまで */