@import "base.css";

/* 共通
******************************************/
#news ul li{
    min-height: 20px;
    background: url('../img/ico_circle_blue.gif') no-repeat 0 1px;
    padding: 0 0 0 23px;
}
#news ul li.hot{
    background: url('../img/ico_circle_orange.gif') no-repeat 0 1px;
}

/* 回り込みクリア */
#notice dl:after,
#notice ul#login:after,
.section:after,
#PRitem dl:after,
#healthCare:after,
.contentBt:after{
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	font-size: 0;
}


/* ヘッダ
******************************************/
#header div.menu{
	width: 100%;
	text-align: center;
}
#header div.menu img{
	margin: 8px 0 0 0;
}

#serarch form{
	clear:both;
}
/* ログイン、ワードリンクなど
******************************************/
#notice{
    background: url('../img/top_bg_herder.gif') repeat-x 0 0;
    padding: 8px 0 0 0;
}
#notice img.look{
	display: block;
	margin:0 0 5px 5px;
}
#notice .centerBlock{
    width: 306px;
    margin: 0 auto;
}
#notice dl{
    margin:0 auto;
}
#notice dd{
	margin:0 10px;
}
#notice p{
    clear: both;
	margin:auto 10px;
}
#notice #login li{
    float: left;
    margin: 0 3px 0 0;
}

/* 最新チェックした商品
******************************************/
#checkItem{
    margin: 0 0 20px 0;
}
.section{
    margin: 10px 5px;
    padding: 10px 5px;
    border-bottom: dotted 2px #CECEAD;
}
.section .body h4{
    padding: 0 0 5px 0;
}
.section .body span{
    display: block;
    color: #FF0000;
    font-weight: bold;
}
.section .itemimg{
    float: left;
    width: 138px;
    margin:0 10px 0 0;
    border: solid #C0C0C0 1px;
	text-align: center;
}


/* 最新ニュース
******************************************/
.design{
    background: #fff url('../img/bg_design.gif') no-repeat right top;
}
#news{
    padding: 5px 15px 0 15px;
}
#news .lastupdate{
    font-weight: bold;
}


/* キャンペーン
******************************************/
.campaign{
    text-align:center;
    padding: 5px 0 0 0;
}
.campaign a{
    display: block;
}


/* ランキング
******************************************/
#sellRanking {
	margin:20px auto;
}

#sellRanking p.title {
	width: 100%;
	text-align:center;
	background: url(../img/side_sellRanking_title_bg.gif) repeat-x;
}

#sellRanking #rankArticles { background: #f7f6f0; }

#sellRanking #rankArticles dl {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dotted #efe3be;
}

#sellRanking #rankArticles dl.top {
	padding-top: 0;
	border: none;
}

#sellRanking #rankArticles .dspCombined,
#sellRanking #rankArticles .dspAfter { margin-top: -1px; }

#sellRanking #rankArticles .dspFirst a,
#sellRanking #rankArticles .dspCombined a,
#sellRanking #rankArticles .dspAfter a {
	display: block;
	width: 160px;
	height: 24px;
	background-position: left top;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

#sellRanking #rankArticles .dspFirst a { background-image: url(..imag/side_sellRanking_title01.gif); }
#sellRanking #rankArticles .dspCombined a { background-image: url(../img/side_sellRanking_title02.gif); }
#sellRanking #rankArticles .dspAfter a { background-image: url(../img/side_sellRanking_title03.gif); }

#sellRanking #rankArticles .dspFirst a:hover,
#sellRanking #rankArticles .dspCombined a:hover,
#sellRanking #rankArticles .dspAfter a:hover,
#sellRanking #rankArticles p.current a {
	background-position: left -24px;
}

#sellRanking #rankArticles #rankFirst,
#sellRanking #rankArticles #rankCombined,
#sellRanking #rankArticles #rankAfter,
#sellRanking #rankArticles .cmnRank {
	padding: 10px;
	background: url(../img/side_sellRanking_bg.gif) no-repeat left top;
}

#sellRanking #rankArticles #rankFirst { display: block; padding: 10px; }
#sellRanking #rankArticles #rankCombined { display: none; padding: 10px; }
#sellRanking #rankArticles #rankAfter { display: none; padding: 10px; }

#sellRanking #rankArticles dl { position: relative; }

#sellRanking #rankArticles dt.img {
	margin-bottom: 7px;
	position:relative
	float:left;
	margin-right: 10px;
	text-align: center;
}

#sellRanking #rankArticles dt.img a {
	display: block;
	width: 138px;
	height: 100px;
	border: 1px solid #ddd;
	background: #fff;
	text-align: center;
	float:left;
	margin-right: 10px;
}

#sellRanking #rankArticles dt.img a:hover { border-color: #ccc; }

#sellRanking #rankArticles dt.img a img {
	display: block;
	width: 100px;
	margin: 0 auto;
	margin-right: 20px;
}

#sellRanking #rankArticles dt.rankNumb {
	position: absolute;
	top: -5px;
	left: 110px;
}

#sellRanking #rankArticles dl.top dt.rankNumb {
	top: -15px;
}
#sellRanking #rankArticles dd.itemName {
/*	clear: both;
	text-align: center;*/
	font-weight: bold;
/*	margin:10px auto;*/
}

#sellRanking #rankArticles dd.price { color: #f00; font-weight: bold; }

/* ハック
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.clrfix:after,
#sellRanking #rankArticles dl:after,
#sellRanking #rankTab:after,
#checkItems dl:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}


.clrfix,
#sellRanking #rankArticles dl,
#sellRanking #rankTab,
#checkItems dl {
	zoom:1;
}


/* オススメアイテム
******************************************/
#PRitem{
    padding: 10px 0 0 0;
}
#PRitem .itemBnner{
	margin:10px 0 0 0;
	text-align:center;
}
#PRitem dl{
    clear: both;
}
#PRitem dd{
/*    width: 320px;
    margin: 0 auto;*/
    padding: 5px;
    float: left;
}
#PRitem dl.category{
    margin: 5px 0 15px 0;
    padding: 0;
}
#PRitem dl.category dd{
/*    width: 320px;
    margin: 0 auto;*/
    padding: 0;
    line-height: 0;
    float: left;
}
#PRitem p{
    width: 320px;
    margin: 0 auto;
}
#PRitem div.category{
    clear:both;
    margin: 10px auto;
}

/* ヘルスケア
******************************************/
#healthCare{
    margin: 5px 0 10px 0;
}
#healthCare .slideBox{
    width: 265px;
    margin: 0 auto;
}
.slideBox .left-button,
.slideBox .right-button{
    padding:10px 0;
}
#healthCare .simpleSlide-slide a{
    margin: 0 5px;
}
#healthCare .textLink{
    clear: both;
}
/*
#healthCare img#healthCareTeach{
    float: left;
    margin: 20px 0 0 5px;
}
#healthCare .contents{
    min-height: 129px;
    background: #fff url('../img/img_teach.jpg') no-repeat left bottom;
    margin: 0 0 10px 0;
    padding: 0 0 0 150px;
}
#healthCare .contents ul{
    float: left;
    margin: 0 30px 10px 0;
}
#healthCare .contents ul a{
    color: #336699;
    text-decoration: none;
}
#healthCare p{
    text-align: center;
    margin: 0 10px 0 0;
}*/

/* トピックス
******************************************/
.UserExperiences dl.noticeTopics{
    line-height: 1.8em;
    margin: 0 10px 15px 10px;
}

.UserExperiences dl.noticeTopics dd{
	margin-bottom: 30px;
}

.UserExperiences dl.noticeTopics a{
    color: #000000;
    text-decoration: none;
}
.UserExperiences dl.noticeTopics dt{
	font-weight:bold;
	color:#55CC0D;
}
dt.tp_kuchi{
    background: #ffffff url(../img/ico_kuchikomi.gif) no-repeat left center;
    padding: 0 0 0 20px;
}
dt.tp_enquate{
    background: #ffffff url(../img/ico_enquate.gif) no-repeat left center;
    padding: 0 0 0 20px;
}
dt.tp_comic{
    background: #ffffff url(../img/ico_comic.gif) no-repeat left center;
    padding: 0 0 0 20px;
}
dt.tp_column{
    background: #ffffff url(../img/ico_column.gif) no-repeat left center;
    padding: 0 0 0 20px;
}



/* 最近チェックしたアイテム */
#contents .sec.chk-areaTopCenter li { float:left; width:150px;}
#contents .sec.chk-areaTopCenter li p {
	font-size:12px; line-height:1.4em; font-weight:bold; padding:10px 5px 5px;
}
#contents .sec.chk-areaTopCenter li img {
	display:block; width:80px; height:80px; margin:0 auto; border:#EEE 1px solid;
}
#contents .sec.chk-areaTopCenter li a { margin:0 5px;}
#contents .btn_style01 {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 20%, #f0f0f0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#ffffff), color-stop(100%,#f0f0f0));
	background: -webkit-linear-gradient(top,  #ffffff 20%,#f0f0f0 100%);
	background: -o-linear-gradient(top,  #ffffff 20%,#f0f0f0 100%);
	background: -ms-linear-gradient(top,  #ffffff 20%,#f0f0f0 100%);
	background: linear-gradient(to bottom,  #ffffff 20%,#f0f0f0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 );
}
#contents .btn_style01 {
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
#contents .btn_style01 {
	font-weight:bold;
	border:#E6E6E6 1px solid;
	box-shadow: inset 0 0 0 1px #FFFFFF;
	-webkit-box-shadow: inset 0 0 0 1px #FFFFFF;
	-moz-box-shadow: inset 0 0 0 1px #FFFFFF;
}


#contents .detail_btn {
	display: block; padding: 6px 0;
	text-align: center; color:#62A7CE;
}

#contents .view { width:300px;}





/* 190124追加
******************************************/

@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 768px) {
  /*既存のヘッダーの調整*/
  #pageH1-forSp-layout2017 {
    margin-bottom: 0 !important;
  }
  #sp_net_cb1 a {
    display: block;
  }
  #contents .search-area {
    height: auto;
    margin-bottom: 20px;
  }
  #sp_net_cb1 a:first-of-type {
  }
  #sp_net_cb1 a:last-of-type {
    margin-bottom: 15px;
  }

  /*フリック設定*/
  #contents .top-flick-main.view {
    height: auto !important;
  }
  
  #contents .content-header + .pickup-photo-sec {
    padding-top: 5px;
  }
  #contents .pickup-photo-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    
    padding: 0 5px;
  }
  #contents .pickup-photo-list li {
    width: 50%;
    padding: 0 5px 19px;
    margin-bottom: 20px;
    position: relative;
  }
  #contents .pickup-photo-list li a img {
    width: 100%;
  }
  
  #contents .pickup-photo-list li p {
    text-align: center;
  }
  #contents .pickup-photo-list li .name {
    font-size: 11px;
    margin-top: 5px;
    overflow: hidden;
    line-height: 1.6;
    max-height: 3.2em;
    position: relative;
    color: #333;
  }
  #contents .pickup-photo-list li .name::before,
  #contents .pickup-photo-list li .name::after {
    background: #FFF;
    position: absolute;
  }
  #contents .pickup-photo-list li .name::before {
    content: '...';
    top: 1.6em;
    right: 0;
  }
  #contents .pickup-photo-list li .name::after {
    content: '';
    height: 100%;
    width: 100%;
  }
  #contents .pickup-photo-list li .price {
    font-weight: normal;
    font-size: 13px;
    margin-top: 1px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #contents .pickup-photo-list li .price span {
    font-size: 77%;
  }
  

}