/******************************
	検索結果表示
*******************************/
div.result {
    margin:10px 0;
    padding:10px 0 0 0;
}

h1 {
    font-size:16px;
    margin:0;
    padding:0 0 5px 5px;
    letter-spacing:1px;
    color:#333;
    border-top:0px solid #666666;
}

div.result_left{
/*	float:left;*/
}

p.result{
	margin:0;
	padding:1.5em 0 0 10px;
	font-size:14px;
}

p.result strong{
	color:#f00;
	font-size:16px;
}

/******************************
	検索フォームエリア
*******************************/
#cate_none{
	display:none;
}

#item_sf{
	display:none;
}

#b_csr{
	margin:5px 0 0 10px;
}

.off{
	padding:0px 0px 0px 20px;
	background:url("http://stage.cospa.com/img/geestore2/search/m_search_on.gif") 0 50% no-repeat;
}

.on{
	padding:0px 0px 0px 20px;
	background:url("http://stage.cospa.com/img/geestore2/search/m_search_off.gif") 0 50% no-repeat;
}

/******************************
	商品一覧列挙エリア
*******************************/
.itemlist{
    display: flex;
    flex-wrap: wrap;
}

.itemlist div.item_tn {
	position:relative;
    margin: 0px 5px 30px 5px;
    padding: 0 0px;
    width: calc((100% - 40px) / 4);
    display: flex;
    flex-flow: column;
}

.itemlist div.item_tn.right_none {
  border-right:none;
}

.itemlist img.item-tn, .itemlist img.item-soldout {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  margin: auto;
}

.itemlist div.gray {
/*	background-color:#eee;*/
}

.itemlist img{
/*	margin:5px 5px 5px 5px;*/
}
.itemlist .newitem{
margin:0px;
}
/* 在庫無し */
.itemlist div.none {
	background-color:#ddd !important;
}

.itemlist h3,.itemlist div p,.itemlist div em {
	display:block;
}

.itemlist h3 {
	font-size:100%;
	margin:0;
	padding:0;
	text-align:left;
}

.itemlist div p {
	top:50px;
	font-size:10px;
	letter-spacing:1px;
	margin:0;
	padding:0.5em 0;
	text-align:left;
}

/* 商品価格 */
.itemlist div samp {
	display:block;
	text-align:right;
}

.itemlist div samp strong {
    clear:both;
    float:left;
	display:block;
	text-align:right;
	color:#000;
	font-size:14px;
}

.itemlist div a {
	color:#333;
	text-decoration:none;
}

.itemlist div a:hover {
	color:#666;
	text-decoration:underline;
}
.itemlist div h3 a {
	color:#36c;
	text-decoration:none;
	display:block;
	padding:5px 0;
	overflow:hidden;
}
.itemlist div h3 a:hover {
	color:#f90;
	text-decoration:underline;
}
.itemlist div em {
  padding:5px 0;
  font-style:normal;
  font-size:13px;
  text-align:left;
  display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.itemlist img.itemphoto {
	position:absolute;
	border:1px dotted #333;
}

.itembox {
    border: 1px solid #ddd;
    width: 100%;
}
.itembox a {
	width: 100%;
    height: 0;
    padding-bottom: 100%;
}

@media screen and (max-width: 768px){
	.itemlist div em {
		font-size: min(3.125vw, 13px);
	}
}

/******************************
	商品ステータス
*******************************/
.itemlist div p.options {
	margin:0;
	padding:0;
}

.itemlist div p.options img {
	margin:0 2px 2px 0 !important;
  vertical-align: bottom;
}

/******************************
	他のブランド一覧のヘッダ
*******************************/
.itemlist h2.other {
	clear:both;
	color:#fff;
	font-size:14px;
	margin:40px 0 5px 0;
	padding:5px;
	background-color:#666666;
	border-bottom:5px solid #666666;
}

/******************************
	ページ一覧
*******************************/
div.pages {
	width:100%;
	height:30px;
	margin:10px 0;
}

div.pages ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}

div.pages li{
	float:left;
	margin-right:2px;
}

div.pages li a,.pages li strong{
	display:block;
	padding:10px;
	border:1px solid #ccc;
	text-align:center;
	font-size:12px;
	text-decoration:none;
}

div.pages li a:hover,div.pages li strong{
	background-color:#666666;
	color:#fff;
}

div{
	font-style:normal;
}

/**************************
    ニューストピック
***************************/
#newtopic div {
    clear:both;
    padding:10px;
    /*height:100px;*/
    /* mac ie only \*//*/
    /*height:120px;*/
    /**/
    line-height:120%;
}
#newtopic div.wraph2,
#newlineup div.wraph2{
margin:0 0 10px 0;
padding:3px;
background-color:#666666;
border-bottom:3px solid #666666;
}
#newtopic div.wraph2 h2,
#newlineup div.wraph2 h2{
float:left;
margin:0px;
padding:4px 0px 0px;
font-size:12px;
font-weight:normal;
color:#fff;
background-color:none;
border-bottom:none;
}
#newtopic div.wraph2 p.i_rss,
#newlineup div.wraph2 p.i_rss{
float:right;
margin:0px;
padding:0px;
}
#newtopic div.gray,
#newtopic div.first
{
    background-color:#eee;
}

#brandinfo h2,
#newtopic h2,
#newlineup h2
{
    margin:0 0 10px 0;
    padding:3px;
    font-size:12px;
    font-weight:normal;
    color:#fff;
    background-color:#666666;
    border-bottom:3px solid #666666;
}

#newtopic h2 em,
#newlineup h2 em
{
    display:none;
}

#newtopic h3 {
    font-size:12px;
    margin:0;
    padding:0;
}

#newtopic .first h3 {
    font-size:14px;
}

#newtopic .img {
    float:left;
    margin-right:5px;
    border:1px solid #333;
}

#newtopic h3 img {
    margin-right:5px;
}

#newtopic p {
    color:#666;
    font-size:10px;
    margin:5px 0 10px 0;
}

#newtopic a {
    color:#333;
    text-decoration:none;
}

#newtopic a:hover {
    color:#666666;
}

#newtopic em {
    font-style:normal;
    color:#666666;
}

/******************************
	他のニュース一覧のヘッダ
*******************************/
#newtopic h2.event {
	clear:both;
	color:#fff;
	font-size:14px;
	margin:40px 0 5px 0;
	padding:5px;
	background-color:#666666;
	border-bottom:5px solid #666666;
	font-weight:bold;
}

/******************************
	フォーム
*******************************/
div.result_right {
	padding:0 10px 0 0;
	float:right;
}

/******************************
	商品のソート
*******************************/
div.order {
	padding-top:5px;
	float:right;
	clear:both;
}

/******************************
	商品の表示件数
*******************************/
div.count {
	height:25px;
	float:right;
}

div.count ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}

div.count li{
	float:left;
	margin-left:2px;
}

div.count li.counttitle{
	display:block;
	padding:5px 0 5px 0;
	border:1px solid #ccc;
	text-align:center;
	font-size:12px;
	text-decoration:none;
	width:60px;
	background-color:#666666;
	color:#fff;
}

div.count li a,.count li strong{
	display:block;
	padding:5px 0 5px 0;
	border:1px solid #ccc;
	text-align:center;
	font-size:12px;
	text-decoration:none;
	width:30px;
}

div.count li a:hover,div.count li strong{
	background-color:#666666;
	color:#fff;
	width:30px;
}

div{
	font-style:normal;
}

.itemsize {
	padding: 5px 0px 0px 0px;
    font-size: 10px;
}

.itemcolor {
	padding: 5px 0px 0px 0px;
    font-size: 10px;
}
/* カラーチップのレイアウト */
.colortip {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    text-align:center;
    line-height: 16px;
    margin: 3px 0px 0px 0px;
}

/******************************
	SP関係
*******************************/
@media screen and (max-width: 768px){

    .itemlist div.item_tn {
        position:relative;
        margin: 0px 5px 30px 5px;
        padding: 0 0px;
        width: calc((100% - 20px) / 2);
        display: flex;
        flex-flow: column;
    }
	/* スマホ表示時、 カラーチップをタップでtitle属性を表示*/
	.colortip[title] {
		position: relative;
		display: inline-flex;
		justify-content: center;
    }
	.colortip[title]:hover::after{
    content:attr(title);
        position: absolute;
        top: 25px;
        left: 15px;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        padding: 0px 5px 0px 5px;
        display: inline-block;
        width: auto;
        white-space:nowrap;
        z-index:10;
	}
}