@charset "utf-8";

/* ==================================
list.css
================================== */

/* ==================================
for brand
================================== */
.bg_black+ .bg_color #breadcrumbs {
  background:#000;
  border-bottom:1px solid #000;
}
.bg_black + .bg_color #breadcrumbs li,
.bg_black + .bg_color #breadcrumbs li a {
  color:#fff;
}

.bg_gray + .bg_color #breadcrumbs {
  background:#eee;
  border-bottom:1px solid #eee;
}
.bg_gray + .bg_color #breadcrumbs li,
.bg_gray + .bg_color #breadcrumbs li a {
  color:#424242;
}
#list #brand-category h1 {
	width:100%;
}

/* ==================================
brand
================================== */
#main-view,
#shopvisual_pc,
#specialMv {
  padding-bottom:40px;
  background:#fff;
  text-align:center;
}
/* brand_a */
.brand_a #main-view,
.bg_black + .bg_color #main-view {
  padding-top:0;
  background:#000;
}

/* brand_b */
.brand_b #main-view,
.bg_gray + .bg_color #main-view {
  padding-top:0;
  background:#eee;
}


/* ==================================
main / main-ttl
================================== */
#list #main #main-ttl h1 {
	font-size: 20px;
	color: #333;
	border-bottom: solid 1px #ededed;
	margin: 7px 0 20px;
	padding: 0 0 9px;
	line-height: 1.5;
	font-weight: normal;
}

/* ==================================
main / list-header
================================== */
#list #list-header {
  position:relative;
  padding-bottom:30px;
	height: 33px;
}

/* item-sort */
#list #list-header .item-sort {
  position:absolute;
  top:0;
  right:101px;
}
#list #list-header .item-sort .sod_select {
	width: 200px;
  border:none;
  padding:7px 0 9px 15px;
  text-align:right;
}
#list #list-header .item-sort .sod_select .sod_list_wrapper {
  width:160px;
  border:1px solid #e6e6e6;
  border-radius:3px;
}
#list #list-header .item-sort .sod_list {
  text-align:left;
}

/* view-change */
#list #list-header .view-change {
  position:absolute;
  top:0;
  right:0;
  font-size:0;
}
#list #list-header .view-change li {
  display:inline-block;
  margin-left:15px;
  font-size:0;
	background-color: #6e6e6e;
	width: 33px;
	height: 33px;
}
#list #list-header .view-change a {
	background-color: #eaeaea;
	display: inherit;
	width: 100%;
	height: 100%;
}
#list #list-header .view-change a:hover {
	background-color: #6e6e6e;
}
#list #list-header .view-change span {
  display:block;
  width:19px;
  height:19px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
	margin: 7px auto;
}
#list #list-header .view-change .small span {
  background-image:url(../../images/button/btn-view-small.png);
	background-position: 50% 50%;
}
#list #list-header .view-change .large span {
  background-image:url(../../images/button/btn-view-large.png);
	background-position: 50% 50%;
}
#list #list-header .view-change a:hover {
  opacity:1;
}


/* ==================================
main / item-list
================================== */
#list .item-list .item li {
  float:left;
}
#list .item-list .item li a {
	display:block;
	position:relative;
}
#list .item-list .item .link_unit {
	display:inline;
	position:relative;
}
#list .item-list .item .value_unit {
	display:inline;
	position:relative;
	color:#C0C0C0;
}
#list .item-list .item li .item_img{
	transition: opacity .3s ease-out;
}
#list .item-list .item li .item_img:hover {
	opacity: 0.6;
}
#list .item-list .item li span {
  display: block;
  font-size: 14px;
  word-wrap: break-word;
}
#list .item-list .item li img {
	max-width:100%;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin: 0px 4px 4px 0px !important;
}
#list .item-list .item li .item_img {
	position:relative;
	margin:0;
}
#list .item-list .item li .rank_num {
  	display: none;
}
#list .item-list .item li .rank_num img {
	border: none;
	width: 30px;
	height: 30px;
}
#list .item-list .item li .item_status {
	width:100%;
	text-align:left;
	font-size: 0;
}
#list .item-list .item li .item_status img {
	display:inline;
	width:auto;
	margin:3px 3px 0 0 !important;
	border:none;
  max-height:18px;
	-webkit-backface-visibility: hidden;
}
#list .item-list .item li .item-brand {
  margin-top: 9px;
}
#list .item-list .item li .item-name {
  margin-top: 4px;
	font-weight: bold;
}
#list .item-list .item li .item-price {
  margin-top: 3px;
	font-weight: bold;
}
#list .item-list .item li .item_icon {
	margin-top: 5px;
	font-size: 0;
}
#list .item-list .item li .item_icon img {
  display:inline;
  border:none;
  vertical-align:middle;
  max-height:18px;
	-webkit-backface-visibility: hidden;
}
#list .item-list .item li .message {
	margin-top: 4px;
	font-size: 12px;
	font-weight: bold;
}
#list .item-list .item li .sale-message {
	margin-top: 3px;
	margin-bottom: -3px;
	font-size: 12px;
}


/* ==================================
main / item-list .item-large (3column)
================================== */
#list .item-list.item-large .item li {
  width:230px;
	margin: 0 0 40px;
  padding:0 0 40px 40px;
	border-bottom: solid 1px #ededed;
}
#list .item-list.item-large .item li:nth-child(3n+1) {
  clear:both;
  padding-left:0;
}
#list .item-list.item-large .item li:nth-last-child(-n+3) {
	margin: 0;
}

/* ==================================
main / item-list .item-small (5column)
================================== */
#list .item-list.item-small .item li {
  width:132px;
	margin: 0 0 40px;
  padding:0 0 40px 24px;
	border-bottom: solid 1px #ededed;
}
#list .item-list.item-small .item li:nth-child(5n+1) {
  clear:both;
  padding-left:0;
}
#list .item-list.item-small .item li:nth-last-child(-n+5) {
	margin: 0;
}

/* ==================================
main / list-footer
================================== */
#list #list-footer {
  position:relative;
	margin-top: -1px;
	border-top: solid 1px #ededed;
	height: 130px;
}
#list #list-footer .item-count{
  position:absolute;
  top:0;
  left:0;
	font-size: 16px;
	line-height: 40px;
	padding-top: 40px;
  padding-bottom:50px;
}
#list #list-footer .pager {
	padding-top: 40px;
  padding-bottom:50px;
}

/* main / pager*/
#list .pager{
  position:absolute;
  top:0;
  right:0;
  text-align:center;
  font-size:0;
}
#list .pager li {
  display:inline-block;
  font-size:18px;
  margin:0 5px;
  vertical-align:top;
}
#list .pager span,
#list .pager a {
  box-sizing:border-box;
  display:block;
  width:40px;
  height:40px;
  line-height:40px;
  color:#383838;
	border: solid 1px #e7f7eb;
	box-sizing: border-box;
}
#list .pager a:hover {
  background:#e7f7eb;
	text-decoration: none;
}
#list .pager .current span {
  background:#e7f7eb;
}
#list .pager span.here {
  background:#e7f7eb;
  color:#666666;
}
#list .pager .ellipsis,
#list .pager .ellipsis span {
  width:40px;
  margin:0;
	border: none;
}
#list .pager .prev {
  margin-right:9px;
}
#list .pager .next {
  margin-left:9px;
}
#list .pager .prev span,
#list .pager .next span,
#list .pager .prev a,
#list .pager .next a {
  position:relative;
  width:39px;
	height: 39px;
  background:#6e6e6e;
  border:none;
  color:#fff;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
#list .pager .prev a:hover,
#list .pager .next a:hover {
	opacity: .8;
}
#list .pager .prev span:after,
#list .pager .next span:after,
#list .pager .prev a:after,
#list .pager .next a:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:39px;
  height:39px;
}
#list .pager .next span:after,
#list .pager .next a:after {
  background: url(../../images/button/bt_pager-next.png)no-repeat;
}
#list .pager .prev span:after,
#list .pager .prev a:after {
  background: url(../../images/button/bt_pager-prev.png)no-repeat;
}


/* ==================================
ranking
================================== */
#d_ranking.common{
	width: 1000px;
  margin: 60px auto auto;
}
#d_ranking.common img{
  width: 100%;
}
#d_ranking.common a{
  cursor: pointer;
}
#d_ranking.common span{
  font-size: 14px;
  line-height: 1.5;
}
#d_ranking.common span.item_status img {
	width: auto;
}
#d_ranking.common h2{
  color: #111;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1.5px;
  margin-bottom: 50px;
}
#list #ranking .ranking-tab li{
	width: auto;
	margin-right: 0;
}
#list #ranking-clm{
	padding: 20px 0 30px 20px;
}
#list .list_item #ranking-clm ul{
	overflow: inherit;
}
#list .list_item #ranking-clm li{
	width: 130px;
	margin-right: 20px;
}

/* ==================================
SHOP TOP
================================== */
#list h2.hl{
	font-size: 18px;
	font-weight: normal;
	text-align: center;
}
#list h2.hl img{
	height: 30px;
	width: auto;
	display: inline-block;
	margin-bottom: 10px;
}
#list h2.hl span{
	display: block;
}
#list h3.hl{
	font-size: 22px;
	font-weight: bold;
	color: #333333;
	background: url(../../images/common/st_line.png) left top no-repeat;
	padding: 20px 0 25px;
}
#list h4.hl{
	font-size: 18px;
	font-weight: bold;
	padding-left: 16px;
	border-left: 4px solid #10ad3c;
	margin-bottom: 15px;
}
#list .shopMV{
	margin-bottom: 40px;
}
#list .shopBlogUnit{
	background: url("../../images/shoptop/bg_shopblog.png")right top no-repeat #faf9eb;
	padding-bottom: 50px;
	margin-bottom: 50px;
}
#list .shopBlogUnit h3{
	color: #111;
	font-size: 28px;
	font-weight: bold;
}
#list .shopBlogUnit .innerUnit{
	border-bottom: 1px solid #ddd;
	text-align: center;
	margin-bottom: 50px;
	padding: 50px 30px 40px;
}
#list .shopBlogUnit.single{
	padding-bottom: 0;
}
#list .shopBlogUnit.single .innerUnit{
	border-bottom: none;
}
#list .shopBlogUnit .innerUnit p{
	font-size: 15px;
	line-height: 2;
	padding-top: 10px;
}
#list .shopBlogUnit .btnBasic{
	margin-top: 40px;
}
#list .shopBlogUnit .staffAdvisor{
	border-top: 1px solid #ddd;
	text-align: center;
	margin-top: 50px;
	padding: 40px 30px 0;
}
#list .shopBlogUnit .staffAdvisor ul{
	overflow: hidden;
	width: 630px;
	margin: 20px auto 0;
}
#list .shopBlogUnit .staffAdvisor li{
	float: left;
	width: 190px;
	margin-right: 30px;
}
#list .shopBlogUnit .staffAdvisor li:last-child{
	margin-right: 0;
}
#list .shopBlogUnit .staffAdvisor .staff_data{
	font-size: 14px;
	font-weight: bold;
	padding-top: 8px;
}
#list .shopBlogUnit .staffAdvisor .staff_name{
	font-size: 12px;
	padding-top: 6px;
}
#list .shopBlogUnit h2.hl{
	color: #111;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 1.5px;
}
#list .shopBlogUnit h2.hl span{
	font-size: 16px;
	font-weight: normal;
}
#list #blogList{
	margin: 0 30px;
}
#list #blogList ul{
	overflow: hidden;
	margin-top: 35px;
}
#list #blogList li{
	float: left;
	width: 220px;
	margin-right: 25px;
}
#list #blogList li:last-child{
	margin-right: 0;
}
#list #blogList a {
	text-decoration: none;
}
#list #blogList a .blogImg{
	overflow: hidden;
	width: 220px;
	height: 165px;
	background: #fff;
	position: relative;
}
#list #blogList a img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	transition: opacity .3s ease-out;
}
#list #blogList a .blog_data{
	color: #999;
	font-size: 14px;
	padding-top: 10px;
	display: block;
}
#list #blogList a .blog_title{
	color: #111;
	font-size: 14px;
	font-weight: normal;
	display: block;
	transition: color .3s ease-out;
}
#list #blogList a:hover .blog_title{
	color: #10ad3c;
}
#list #blogList a:hover img{
	opacity: 0.7;
}
#list .shopBnr{
	margin: 50px 0 -20px;
}
#list .shopBnr ul{
	overflow: hidden;
}
#list .shopBnr li{
	width: 240px;
	height: 180px;
	position: relative;
	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
	overflow: hidden;
}
#list .shopBnr li:nth-child(3n){
	margin-right: 0;
}
#list .shopBnr li img{
	width: 100%;
	transition: opacity .3s ease-out;
}
#list .shopBnr li a:hover img{
	opacity: 0.6;
}
#list .shopBnr li.cate a:hover img{
	opacity: 1;
}
#list .shopBnr li p{
	font-size: 17px;
	background: rgba(255,255,255,0.8);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 5px;
	transition: bottom .3s ease-out;
}
#list .shopBnr li p::after{
	content: "";
    background: url(../../images/common/arrow_green.png) center right / 21px 18px no-repeat;
    width: 21px;
    height: 18px;
	position: absolute;
	right: 20px;
	top: 13px;
}
#list .shopBnr li a:hover p{
	bottom: -40px;
}
#list #d_shopRecommend{
	margin: 50px 0;
}
#list #d_newItem{
	margin: 50px 0;
}
#list .list_item{

}
#list .list_item ul{
	overflow: hidden;
}
#list .list_item li{
	float: left;
	width: 170px;
	margin-right: 30px;
	font-size: 0;
}
#list .list_item li:last-child{
	margin-right: 0;
}
#list .list_item li span{
	word-break: break-all;
	display: block;
}
#list .list_item .item_img{
	border: 1px solid #ededed;
	box-sizing: border-box;
	display: block;
	transition: opacity .3s ease-out;
}
#list .list_item .item_img img{
	width: 100%;
}
#list .list_item .item_status{
	width: 100%;
	margin: 11px 0 0;
	text-align: left;
}
#list .list_item .item_status img{
	display: inline;
	width: auto;
	margin: 0 2px 2px 0;
	border: none;
	height: 22px;
	-webkit-backface-visibility: hidden;
}
#list .list_item .item-brand{
	font-size: 14px;
	margin-top: 5px;
}
#list .list_item .item-name{
	font-size: 14px;
	font-weight: bold;
	margin-top: 4px;
}
#list .list_item .item-price{
	font-size: 14px;
	margin-top: 3px;
	font-weight: bold;
}
#list .list_item a:hover{
	opacity: 0.6;
}
/* slick */
#list .list_item .slick-track{
	margin-left: 0;
	margin-right: 0;
}
#list .list_item .slick-track li {
	margin: 0;
}
#list .list_item .slick-track a {
	display: block;
	position: relative;
	padding: 0 12px;
}
#list .list_item .slick-list{
	margin: 0 20px;
}
#list .list_item .slick-prev{
	font-size: 0;
	border: none;
	position: absolute;
	left: 0;
	top: 73px;
	background: url("../../images/button/arrow_prev.png") center left / 24px 37px no-repeat;
	width: 24px;
	height: 37px;
	cursor: pointer;
	z-index: 50;
}
#list .list_item .slick-next{
	font-size: 0;
	border: none;
	position: absolute;
	right: 0;
	top: 73px;
	background: url("../../images/button/arrow_next.png") center right / 24px 37px no-repeat;
	width: 24px;
	height: 37px;
	cursor: pointer;
	z-index: 60;
}

/* ブランドビジュアル */
#list .brand_contents {
  width: 1000px;
  margin: auto auto 30px;
  text-align: center;
}
#list .brand_contents img {
  width: 100%;
}
#list .brand_contents .brand_visual {
  width: 100%;
  margin: auto auto 30px;
}
#list .brand_contents .brand_logo {
  width: 300px;
  margin: auto auto 30px;
}
#list .brand_contents .brand_about {
  line-height: 1.6;
  font-size: 14px;
}

/* おすすめ商品の価格赤文字 */
.recommended-price .item-price{
  color: red;
}