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



/* screenwidth less than 1100px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {

#shop article {
    width: 90%;
}
}

/* screenwidth less than 1080px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1080px) {

#carlist ol#clist{
    width: 90% !important;
}

#carlist h3.clist_title{
    font-size: 18px;
}
#carlist ol#clist li p.sp1{
    display:none;
}
#carlist ol#clist li p.sp2{
    display:block;
}



}


/* screenwidth less than 960px
--------------------------------------------------------------------- */
@media only screen and (max-width: 960px) {

#carlist ol#clist li{
    margin: 0 15px 25px 10px;
    width: 45%;
}
#carlist h3.clist_title{
    font-size: 17px;
}
}


/* screenwidth less than 790px
--------------------------------------------------------------------- */
@media only screen and (max-width: 790px) {

#shop article .left {
    width: 99%;
    display:block;
    margin: 0 auto 10px auto;
}
#shop article dl {
    width: 99%;
    display: block;
    margin: 0 auto 10px auto;
}

}

/* screenwidth less than 754px
--------------------------------------------------------------------- */
@media only screen and (max-width: 754px) {

#carlist ol#clist li{
    margin: 0 10px 25px 10px;
}
}

/* screenwidth less than 680px
--------------------------------------------------------------------- */
@media only screen and (max-width: 680px) {

#carlist ol#clist{
    width:98% !important;
}
#carlist h3.clist_title{
    font-size: 17px;
}
}

/* screenwidth less than 591px
--------------------------------------------------------------------- */
@media only screen and (max-width: 591px) {

#carlist ol#clist li{
    display:block;
    width: 85%;
    margin: 0 auto 20px auto;
    min-height: auto;
}


}




/* screenwidth less than 500px
--------------------------------------------------------------------- */
@media only screen and (max-width: 500px) {

#shop article dl dt {
    width: 99%;
    float: none;
    clear: both;
    margin: 0 auto 5px 0;
    text-indent:0.2em;
    padding:2px 0;
    background:#DDD;
}
#shop article dl dd {
    width: 95%;
    float: none;
    margin-left:1.2em;

}

#shop article dl dt:before{
   content:"■";
}


}

/* screenwidth less than 439px
--------------------------------------------------------------------- */
@media only screen and (max-width: 439px) {

#shop h2{
   padding:0 0 4px 0;
   width:99%;
   display:block;
}
}


/* blog mq ---------------------------------------------------------------------*/

/* screenwidth less than 1580px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1580px) {

#blog ol#bloglist li{
    min-height:400px;
    max-height:400px;
}
}

/* screenwidth less than 1450px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1450px) {

#blog ol#bloglist {
    width: 90%
}
}


/* screenwidth less than 1350px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1350px) {

#blog ol#bloglist li{
    min-height:380px;
    max-height:380px;
}
}

/* screenwidth less than 1200px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {

#blog ol#bloglist li{
    min-height:350px;
    max-height:350px;
}
}



/* screenwidth less than 980px
--------------------------------------------------------------------- */
@media only screen and (max-width: 980px) {

#blog ol#bloglist li{
    width: 45%;
    min-height:400px;
    max-height:400px;
}
}

/* screenwidth less than 580px
--------------------------------------------------------------------- */
@media only screen and (max-width: 580px) {

#blog ol#bloglist li{
    width: 85%;
    margin:0 auto 25px auto;
    display:block;
    float:none;
    min-height:auto;
   max-height:auto;
    overflow:auto;
}
}