@charset "UTF-8";
/* CSS Document */

/* 中身======================================================================================================== */
#search_main{
float: right;
width: 720px;
}
#search_main h3{
background-color: #FE6500;
color: #FFF;
font-size: 18px;
font-weight: bold;
padding: 15px;
margin: 0 0 20px;
}
#search_main h3 em{
display: block;
float: right;
}
#search_main h3 em img{
vertical-align: middle;
margin: 0 10px 0 0;
}
#search_main h3 em span{
font-size: 24px;
line-height: 32px;
color: #ffff00;
}

.pager{
float: left;
width:100%;
}
.sorting{
float: right;
}

#search_main ul{
margin: 0 0 30px;
}
#search_main li{
margin: 30px 0 0;
padding: 20px;
border: solid 1px #CCC;
box-sizing: border-box;
position: relative;
}
#search_main li h4{
font-size: 18px;
font-weight: bold;
margin: 0 0 10px;
}
#search_main li h4 .new{
display: inline-block;
vertical-align: middle;
background-color: #F75271;
color: #FFF;
font-size: 14px;
padding: 0 5px;
margin: 0 5px 0 0;
}
#search_main li h4 .type{
margin: 0 0 0 1em;
}
#search_main li .comment{
background-color: #F4EEEA;
height: 40px;
margin: 0 0 10px;
}
#search_main li .comment em{
display: block;
float: left;
background-color: #986633;
color: #FFF;
text-align: center;
width: 130px;
line-height: 40px;
position: relative;
}
#search_main li .comment em:after{
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #986633;
position: absolute;
top: 50%;
right: -10px;
margin: -6px 0 0;
}
#search_main li .comment p{
display: block;
float: left;
margin: 0 0 0 15px;
width: 520px;
height: 40px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#search_main li .photo{
float: right;
text-align: center;
margin: 10px 0 0;
}
#search_main li .photo img{
max-width: 260px;
max-height: 195px;
}
#search_main li dl{
width: 400px;
float: left;
}
#search_main li dt{
display: inline-block;
vertical-align: middle;
width: 80px;
text-align: center;
margin: 10px 0 0;
padding: 2px 0;
box-sizing: border-box;
border: solid 1px #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#search_main li dd{
display: inline-block;
vertical-align: middle;
width: 110px;
margin: 10px 0 0;
}
#search_main li dd.colspan{
width: 310px;
}
#search_main li dd .price{
font-size: 24px;
line-height: 24px;
font-weight: bold;
color: #cc0000;
}
#search_main li .btn{
position: absolute;
top: 20px;
right: 20px;
}
#search_main li .btn a{
display: block;
border: solid 1px #01409a;
}
#search_main li .btn a img{
max-width: 180px;
max-height: 30px;
}
#search_main li .btn a:hover{
background-color: rgba(4,64,154,0.2);
}


#refine_search{
float: left;
width: 280px;
background-color: #EEE;
border: solid 1px #CCC;
padding: 0 10px 10px;
}
#refine_search h5{
margin: 0 -10px 10px;
border-top: none;
border-right: none;
}
#refine_search .after_count{
text-align: center;
}
#refine_search .after_count span{
font-size: 30px;
font-weight: bold;
color: #ff6600;
}
#refine_search .btn{
margin: 10px 0 0;
}
#refine_search .btn a{
display: block;
text-align: center;
text-decoration: none;
color: #FFF;
padding: 10px 0;
box-sizing: border-box;
}
#refine_search .btn#area_btn a{
background-color: #f54d90;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f54d90), color-stop(0.00, #ec96ae));
background: -webkit-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -moz-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -o-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: -ms-linear-gradient(top, #ec96ae 0%, #f54d90 100%);
background: linear-gradient(top, #ec96ae 0%, #f54d90 100%);
border: solid 1px #f54d90;
}
#refine_search .btn#line_btn a{
background-color: #f37200;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f37200), color-stop(0.00, #ffa320));
background: -webkit-linear-gradient(top, #ffa320 0%, #f37200 100%);
background: -moz-linear-gradient(top, #ffa320 0%, #f37200 100%);
background: -o-linear-gradient(top, #ffa320 0%, #f37200 100%);
background: -ms-linear-gradient(top, #ffa320 0%, #f37200 100%);
background: linear-gradient(top, #ffa320 0%, #f37200 100%);
border: solid 1px #f37200;
}
#refine_search dl{
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: solid 1px #CCC;
}
#refine_search dt{
background-color: #DDD;
padding: 10px;
margin: 20px -10px 10px;
}
#refine_search dd{
}
#refine_search dd ul{
}
#refine_search dd li{
width: 50%;
float: left;
margin: 2px 0;
}
#refine_search .submit_btn{
margin: 10px 0 0;
}
#refine_search .submit_btn a{
display: block;
font-size: 16px;
text-align: center;
text-decoration: none;
color: #FFF;
background-color: #a4cc38;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #77ac22), color-stop(0.00, #a4cc38));
background: -webkit-linear-gradient(top, #a4cc38 0%, #77ac22 100%);
background: -moz-linear-gradient(top, #a4cc38 0%, #77ac22 100%);
background: -o-linear-gradient(top, #a4cc38 0%, #77ac22 100%);
background: -ms-linear-gradient(top, #a4cc38 0%, #77ac22 100%);
background: linear-gradient(top, #a4cc38 0%, #77ac22 100%);
border: solid 1px #77ac22;
padding: 10px 0;
box-sizing: border-box;
}
#refine_search .submit_btn a:hover{
}







/* レスポンシブ======================================================================================================== */
@media screen and (max-width: 670px), screen and (max-width: 670px){

#search_main{
float: none;
width: 100%;
}
#search_main h3{
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: 0 -20px 10px;
}
#search_main h3 em{
font-size: 12px;
}
#search_main h3 em img{
max-width: 18px;
vertical-align: middle;
margin: 0 10px 0 0;
}
#search_main h3 em span{
font-size: 20px;
line-height: 20px;
}
.pager{
float: none;
margin: 0 0 10px;
}
.sorting{
float: none;
}

#search_main ul{
margin: 20px 0;
}
#search_main li{
margin: 0px -20px 0;
padding: 20px;
border: none;
border-top: solid 1px #CCC;
box-sizing: border-box;
position: inherit;
}
#search_main li h4{
font-size: 16px;
font-weight: bold;
margin: 0 0 20px;
}
#search_main li h4 .new{
font-size: 12px;
}
#search_main li .comment{
height: auto;
font-size: 10px;
padding: 10px;
position: relative;
}
#search_main li .comment em{
line-height: 1.8;
padding: 2px 4px;
display: inline-block;
float: none;
width: auto;
height: auto;
line-height: auto;
position: absolute;
top: -15px;
left: -10px;
}
#search_main li .comment em:after{
border-style: solid;
border-width: 5px 3px 0 3px;
border-color: #986633 transparent transparent transparent;
position: absolute;
top: initial;
bottom: -5px !important;
right: 50%;
margin: -6px 0 0;
}
#search_main li .comment p{
display: block;
float: none;
margin: 0px;
width: auto;
height: auto;
line-height: 1.8;
}
#search_main li .photo{
float: none;
text-align: center;
margin: 10px 0 0;
}
#search_main li .photo img{
}
#search_main li dl{
width: 100%;
float: none;
margin: 0 0 10px;
}
#search_main li dt{
width: 18%;
margin: 5px 0 0;
font-size: 10px;
}
#search_main li dd{
width: 29%;
margin: 5px 0 0;
font-size: 12px;
}
#search_main li dd.colspan{
width: 80%;
}
#search_main li dd .price{
font-size: 20px;
line-height: 20px;
font-weight: bold;
color: #cc0000;
}
#search_main li .btn{
position: inherit;
top: inherit;
right: inherit;
text-align: center;
}
#search_main li .btn a{
padding: 5px;
}
#search_main li .btn a img{
max-width: 180px;
max-height: 30px;
}
#search_main li .btn a:hover{
}





#refine_search{
float: none;
width: 100%;
}









}