@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01. item list - category
--------------------------------
------------------------------*/

/*  01. item list - category
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  category  */
#item-list_category {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
 
#item-list_category .title_area {position: relative; float: left; width: 100%; height: auto;}
#item-list_category .title_area .image {float: left; width: 100%; height: 300px; background-size: cover; background-position: center; filter: brightness(60%);}
#item-list_category .title_area h2 {position: absolute; width: 100%; height: auto; line-height: 40px; top: 50%; left: 0; font-size: 30px; font-weight: normal; text-align: center; letter-spacing: 4px; color: #FFF; transform: translateY(-50%);}
#item-list_category .title_area p {position: absolute; width: 100%; height: auto; line-height: 20px; margin-top: 50px; top: 50%; left: 0; font-size: 14px; font-weight: normal; text-align: center; letter-spacing: 4px; color: #FFF; transform: translateY(-50%);}
 
#item-list_cat-list {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px;}
#item-list_cat-list h2.name,
#item-list_cat-list p.name {line-height: 30px; font-size: 20px; font-weight: bold; letter-spacing: 4px; color: #A17843;}
#item-list_cat-list ul {float: left; width: 100%; height: auto; margin-top: 10px;}
#item-list_cat-list ul {display: flex; flex-wrap: wrap;}
#item-list_cat-list ul li {line-height: 20px; margin-right: 10px; margin-bottom: 10px; font-size: 14px; font-weight: normal; letter-spacing: 2px;}
#item-list_cat-list ul li a {padding: 5px 10px 5px 10px; color: #A17843; background-color: #FFF; border: 1px solid #A17843; border-radius: 5px;}
#item-list_cat-list ul li a:hover {color: #FFF; background-color: #A17843;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  category  */
#item-list_category {float: left; width: 100%; height: auto;}
 
#item-list_category .title_area {position: relative; float: left; width: 100%; height: auto;}
#item-list_category .title_area .image {float: left; width: 100%; height: 200px; background-size: cover; background-position: center; filter: brightness(60%);}
#item-list_category .title_area h2 {position: absolute; width: 100%; height: auto; line-height: 30px; top: 50%; left: 0; font-size: 20px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF; transform: translateY(-50%);}
#item-list_category .title_area p {position: absolute; width: 100%; height: auto; line-height: 20px; margin-top: 40px; top: 50%; left: 0; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px; color: #FFF; transform: translateY(-50%);}
 
#item-list_cat-list {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#item-list_cat-list h2.name,
#item-list_cat-list p.name {line-height: 30px; font-size: 16px; font-weight: bold; letter-spacing: 2px; color: #A17843;}
#item-list_cat-list ul {float: left; width: 100%; height: auto; margin-top: 10px;}
#item-list_cat-list ul {display: flex; flex-wrap: wrap;}
#item-list_cat-list ul li {line-height: 20px; margin-right: 10px; margin-bottom: 10px; font-size: 12px; font-weight: normal; letter-spacing: 2px;}
#item-list_cat-list ul li a {padding: 5px 10px 5px 10px; color: #A17843; background-color: #FFF; border: 1px solid #A17843; border-radius: 5px;}
}

/*  02. item list - number block
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  number block  */
#item-list_num-block {float: left; width: 100%; height: auto; margin-top: 20px; padding-left: 20px; padding-right: 20px; box-sizing: border-box;}
#item-list_num-block {display: flex; flex-wrap: nowrap;}

#item-list_num-block #num {width: 50%;}
#item-list_num-block #num p {line-height: 30px; font-size: 14px; font-weight: normal; letter-spacing: 2px;}
#item-list_num-block #num p span {margin-left: 5px;  margin-right: 5px;}

#item-list_num-block #sort {width: 50%;}
#item-list_num-block #sort ul {float: right; width: auto; height: auto;}
#item-list_num-block #sort ul li {position: relative; float: left; width: 110px; height: 30px; line-height: 30px; margin-left: 10px; font-size: 12px; font-weight: normal; text-align: center; border: 1px solid #A17843;}
#item-list_num-block #sort ul li p::after {position: absolute; content: ""; width: 30px; height: 30px; top: 0; right: 0; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_down_white.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
#item-list_num-block #sort ul li a::after {position: absolute; content: ""; width: 30px; height: 30px; top: 0; right: 0; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_down_gold.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
#item-list_num-block #sort ul li p {padding-right: 10px; color: #FFF; background-color: #A17843;}
#item-list_num-block #sort ul li a {padding-right: 10px; color:  #A17843; background-color: #FFF;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  number block  */
#item-list_num-block {float: left; width: 100%; height: auto; margin-top: 10px; padding: 10px; box-sizing: border-box;}
#item-list_num-block {display: flex; flex-wrap: wrap;}

#item-list_num-block #num {width: 100%;}
#item-list_num-block #num p {line-height: 30px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px;}
#item-list_num-block #num p span {margin-left: 5px;  margin-right: 5px;}

#item-list_num-block #sort {width: 100%;}
#item-list_num-block #sort ul {float: left; width: 100%; height: auto; text-align: center;}
#item-list_num-block #sort ul li {position: relative; display: inline-block; width: 90px; height: 20px; line-height: 20px; margin-left: 2px; margin-right: 2px; font-size: 10px; font-weight: normal; text-align: center; border: 1px solid #A17843;}  
#item-list_num-block #sort ul li p::after {position: absolute; content: ""; width: 20px; height: 20px; top: 0; right: 3px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_down_white.png"); background-size: 10px; background-position: center; background-repeat: no-repeat;}
#item-list_num-block #sort ul li a::after {position: absolute; content: ""; width: 20px; height: 20px; top: 0; right: 3px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_down_gold.png"); background-size: 10px; background-position: center; background-repeat: no-repeat;}
#item-list_num-block #sort ul li p {padding-right: 15px; color: #FFF; background-color: #A17843;}
#item-list_num-block #sort ul li a {padding-right: 15px; color:  #A17843; background-color: #FFF;}
}

/*  03. item list - body
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  *//*  body  */
#item-list_body {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px;}

/*  item list  *//*  body  *//*  pagination  */
#item-list_body #pagination {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#item-list_body #pagination ul {float: left; width: 100%; height: auto; text-align: center;}
#item-list_body #pagination ul li {display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-left: 10px; margin-right: 10px; font-size: 12px; font-weight: bold; text-align: center; border: 1px solid #A17843; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
#item-list_body #pagination ul li p {line-height: 28px; color: #FFF; background-color: #A17843;}
#item-list_body #pagination ul li a {line-height: 28px; color: #A17843; background-color: #FFF;}
#item-list_body #pagination ul li.prev a {font-size: 0px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_gold.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
#item-list_body #pagination ul li.next a {font-size: 0px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_gold.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
#item-list_body #pagination ul li a:hover {color: #FFF; background-color: #A17843;}
#item-list_body #pagination ul li.prev a:hover {background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_white.png");}
#item-list_body #pagination ul li.next a:hover {background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_white.png");}

.item-list_soldout {float: left; width: 100%; height: auto; padding: 120px 20px 120px 20px; box-sizing: border-box;}
.item-list_soldout p {line-height: 40px; font-size: 24px; font-weight: bold; text-align: center;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  *//*  body  */
#item-list_body {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px;}

/*  item list  *//*  body  *//*  pagination  */
#item-list_body #pagination {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#item-list_body #pagination ul {float: left; width: 100%; height: auto; text-align: center;}
#item-list_body #pagination ul li {display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-left: 4px; margin-right: 4px; font-size: 12px; font-weight: bold; text-align: center; border: 1px solid #A17843; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
#item-list_body #pagination ul li p {line-height: 28px; color: #FFF; background-color: #A17843;}
#item-list_body #pagination ul li a {line-height: 28px; color: #A17843; background-color: #FFF;}
#item-list_body #pagination ul li.prev a {font-size: 0px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_gold.png"); background-size: 10px; background-position: center; background-repeat: no-repeat;}
#item-list_body #pagination ul li.next a {font-size: 0px; background-image: url("https://img07.shop-pro.jp/PA01461/110/etc/icon_next_gold.png"); background-size: 10px; background-position: center; background-repeat: no-repeat;}
.item-list_soldout {float: left; width: 100%; height: auto; padding: 80px 20px 80px 20px; box-sizing: border-box;}
.item-list_soldout p {line-height: 30px; font-size: 16px; font-weight: bold; text-align: center;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#pagination ul li a {transition: all 0.3s;}