@charset "UTF-8";

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  item list - category index
/*  02.  item list - sort area
/*  03.  item list - body
/*  04.  item list - pager
/*  05.  item list - attention
--------------------------------
------------------------------*/

/*  01.  item list - category index
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  category index  */
#item_list_index {float: left; width: 100%; height: auto; padding: 20px; background-color: #EEE; border-bottom: 1px solid #DDD; box-sizing: border-box;}
#item_list_index p {line-height: 20px; margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: center;}
#item_list_index ul {float: left; width: 100%; height: auto; text-align: center;}
#item_list_index ul li {display: inline-block; width: auto; height: 40px; line-height: 40px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; font-size: 14px; font-weight: bold; text-align: center;}
#item_list_index ul li a {padding-left: 15px; padding-right: 15px; color: #0d1d41; background-color: #FFF; border: 1px solid #AAA; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
#item_list_index ul li a:hover {color: #FFF; background-color: #61cbc8;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  category index  */
#item_list_index {float: left; width: 100%; height: auto; padding: 10px 10px 0px 10px; background-color: #EEE; border-bottom: 1px solid #DDD; box-sizing: border-box;}
#item_list_index p {line-height: 20px; margin-bottom: 10px; padding-left: 5px; font-size: 20px; font-weight: bold;}
#item_list_index ul {float: left; width: 100%; height: auto; text-align: center;}
#item_list_index ul li {float: left; width: auto; height: 30px; line-height: 30px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; font-size: 12px; font-weight: bold; text-align: center;}
#item_list_index ul li a {padding-left: 10px; padding-right: 10px; color: #0d1d41; background-color: #FFF; border: 1px solid #AAA; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
#item_list_index ul li a:hover {color: #FFF; background-color: #61cbc8;}
}

/*  02.  item list - sort area
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  sort area  */
#itemlist_sort-area {float: left; width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #DDD;}

/*  item list  *//*  sort area  *//*  category name  */
#category_name {float: left; width: 100%; height: auto; margin-bottom: 20px;}
#category_name h2 {line-height: 20px; font-size: 20px; font-weight: bold; text-align: center;}

/*  item list  *//*  sort area  *//*  number  */
#itemlist_number {float: left; width: 50%; height: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
#itemlist_number p {line-height: 30px; font-size: 14px; font-weight: normal;}
#itemlist_number p span {margin-left: 10px; margin-right: 10px; font-size: 20px; font-weight: bold;}

/*  item list  *//*  sort area  *//*  sort  */
#itemlist_sort {float: right; width: 50%; height: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box;} 
#itemlist_sort ul {float: right; width: auto; height: auto;}
#itemlist_sort ul li {float: left; width: auto; height: auto; padding: 5px 10px 5px 10px; margin-left: 5px; margin-right: 5px;  background-color: #EEE;}
#itemlist_sort ul li p {line-height: 20px; padding-right: 20px; font-size: 12px; font-weight: normal; background-image: url(http://lenacos.com/image/icon_down.png); background-size: 12px; background-position: right; background-repeat: no-repeat; opacity: 0.5;}
#itemlist_sort ul li a {line-height: 20px; padding-right: 20px; font-size: 12px; font-weight: normal; color: #000; background-image: url(http://lenacos.com/image/icon_down.png); background-size: 12px; background-position: right; background-repeat: no-repeat;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  sort area  */
#itemlist_sort-area {float: left; width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #DDD;}

/*  item list  *//*  sort area  *//*  category name  */
#category_name {float: left; width: 100%; height: auto; margin-bottom: 20px;}
#category_name h2 {line-height: 20px; font-size: 16px; font-weight: bold; text-align: center;}

/*  item list  *//*  sort area  *//*  number  */
#itemlist_number {float: left; width: 100%; height: auto; margin-bottom: 10px; box-sizing: border-box;}
#itemlist_number p {line-height: 30px; font-size: 12px; font-weight: normal; text-align: center;}
#itemlist_number p span {margin-left: 10px; margin-right: 10px; font-size: 20px; font-weight: bold;}

/*  item list  *//*  sort area  *//*  sort  */
#itemlist_sort {float: left; width: 100%; height: auto; box-sizing: border-box;} 
#itemlist_sort ul {float: left; width: 100%; height: auto; text-align: center;}
#itemlist_sort ul li {display: inline-block; width: auto; height: auto; padding: 5px; margin-left: 5px; margin-right: 5px;  background-color: #EEE;}
#itemlist_sort ul li p {line-height: 20px; padding-right: 20px; font-size: 12px; font-weight: normal; background-image: url(http://lenacos.com/image/icon_down.png); background-size: 12px; background-position: right; background-repeat: no-repeat; opacity: 0.5;}
#itemlist_sort ul li a {line-height: 20px; padding-right: 20px; font-size: 12px; font-weight: normal; color: #000; background-image: url(http://lenacos.com/image/icon_down.png); background-size: 12px; background-position: right; background-repeat: no-repeat;}
}

/*  03.  item list - body
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  body  */
#item_list_body {margin-top: 20px;}
}

/*  04.  item list - pager
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  pager  */
#pager {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 40px;}
#pager ul {float: right; width: auto; height: auto; margin-right: 20px;}
#pager ul li {float: left; width: 160px; height: 40px; line-height: 40px; margin-left: 10px; margin-right: 10px; font-size: 14px; font-weight: bold; text-align: center;}
#pager ul li p {color: #FFF; background-color: #DDD;}
#pager ul li a {color: #FFF; background-color: #61cbc8;}
#pager ul li a:hover {color: #FFF; background-color: #0d1d41;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  pager  */
#pager {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px;}
#pager ul {float: left; width: 100%; height: auto; text-align: center;}
#pager ul li {display: inline-block; width: 120px; height: 30px; line-height: 30px; margin-left: 10px; margin-right: 10px; font-size: 14px; font-weight: bold;}
#pager ul li p {color: #FFF; background-color: #EEE;}
#pager ul li a {color: #FFF; background-color: #61cbc8;}
}

/*  05.  item list - attention
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
#item_list p.empty {line-height: 30px; margin-top: 200px; margin-bottom: 20px; font-size: 30px; font-weight: bold; font-style: italic; text-align: center;}
#item_list p.empty_jp {line-height: 20px; margin-bottom: 200px; font-size: 14px; font-weight: normal; text-align: center; letter-spacing: 5px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#item_list p.empty {line-height: 30px; margin-top: 200px; margin-bottom: 10px; font-size: 20px; font-weight: bold; font-style: italic; text-align: center;}
#item_list p.empty_jp {line-height: 20px; margin-bottom: 200px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px;}
}