@charset "euc-jp";

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  BASE
--------------------------------
------------------------------*/

/*  01.  BASE
------------------------------*/
/*  BASE  */
html,body {width: 100%; height: 100%; margin: 0; padding: 0;}
body {font-family: 'Þ⥴¥·¥Ã¥¯ Medium', 'Þ⥴¥·¥Ã¥¯ÂÎ', 'Yu Gothic Medium', YuGothic, '¥Ò¥é¥®¥Î³Ñ¥´ ProN', 'Hiragino Kaku Gothic ProN', '¥á¥¤¥ê¥ª', Meiryo, '£Í£Ó £Ð¥´¥·¥Ã¥¯', 'MS PGothic', sans-serif; font-variant-ligatures: no-common-ligatures;}
h1,h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,li,p,a {margin: 0; padding: 0;}
ol,ul,li {list-style: none;}
a {display: block; text-decoration: none;}

/*  FRONT  */
.en {font-family: 'Roboto Condensed', sans-serif;}

/* CLEARFIX  */
.clearfix::after {display: block; clear: both; content: "";}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  HEADER
/*  02.  HEADER - MENU
--------------------------------
------------------------------*/

/*  01.  HEADER
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  HEADER  */
#head {float: left; width: 100%; height: auto; background-color: #000;}

/*  HEADER  *//*  LOGO  */
#head h1 {float: left; width: 200px; height: 40px; margin: 5px 20px 5px 20px;}
#head h1 a {width: 200px; height: 40px; line-height: 40px; font-size: 0px; background-size: cover; background-position: center; background-repeat: no-repeat;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  HEADER  */
#head {position: fixed; float: left; width: 100%; height: 40px; top: 0; left: 0; background-color: #000; z-index: 999;}

/*  HEADER  *//*  LOGO  */
#head h1 {float: left; width: 100px; height: 20px; margin: 10px;}
#head h1 a {width: 100px; height: 20px; line-height: 20px; font-size: 0px; background-size: cover; background-position: center; background-repeat: no-repeat;}
}

/*  02.  HEADER - MENU
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  HEADER  *//*  MENU  */
#menu {float: left; width: auto; height: auto;}
#menu ul {float: left; width: auto; height: auto;}
#menu ul li {float: left; width: auto; height: 50px; line-height: 50px; font-size: 16px; font-weight: bold;}
#menu ul li a {padding-left: 10px; padding-right: 10px; color: #FFF;}
#menu ul li a:hover {color: #000; background-color: #FFF;}

/*  HEADER  *//*  SUB MENU  */
#submenu {float: right; width: auto; height: auto;}
#submenu ul {float: left; width: auto; height: auto;}
#submenu ul li {float: right; width: auto; height: 50px; line-height: 50px; font-size: 16px; font-weight: bold;}
#submenu ul li img {width: 18px; height: 18px;margin-top: 15px; margin-bottom: 17px; vertical-align: top; }
#submenu ul li a {padding-left: 10px; padding-right: 10px; color: #FFF;}
#submenu ul li a:hover {color: #FF0004; background-color: #FFF;}
#submenu ul li.cart a:hover {color: #FFF; background-color: #333;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  HEADER  *//*  MENU  */
#menu {position: fixed; width: 100%; height: 30px; top: 40px; left: 0px; right: 0px; background-color: #333; overflow-x: scroll;}
#menu ul {display: flex; float: left; width: auto; height: 20px; margin-top: 5px; margin-bottom: 5px;}
#menu ul li {float: left; width: 100px; height: 20px; line-height: 20px; font-size: 12px; font-weight: bold; text-align: center; border-right: 1px solid #EEE;}
#menu ul li:last-child {border-right: 0px;}
#menu ul li a {color: #FFF;}

/*  HEADER  *//*  SUB MENU  */
#submenu {float: right; width: auto; height: auto;}
#submenu ul {float: left; width: auto; height: auto;}
#submenu ul li {float: right; width: auto; height: 40px; line-height: 40px; margin-left: 5px; margin-right: 5px; font-size: 10px; font-weight: bold;}
#submenu ul li img {width: 12px; height: 12px; margin-top: 13px; margin-bottom: 15px; vertical-align: top; }
#submenu ul li a {color: #FFF;}
}

/*  EX.  ANIMATION
------------------------------*/
/*  ANIMATION  */
#menu ul li a,
#submenu ul li a {transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  CONTENT
/*  02.  CONTENT - TITLE
--------------------------------
------------------------------*/

/*  01.  CONTENT
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  CONTENT  */
#content {float: left; width: 100%; height: auto;}
.content {width: 100%; max-width: 1400px; margin: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  CONTENT  */
#content {float: left; width: 100%; height: auto; margin-top: 70px;}
.content {float: left; width: 100%; height: auto;}
}

/*  02.  CONTENT - TITLE
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  CONTENT  *//*  TITLE  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2 {position: relative; width: 300px; height: 50px; line-height: 50px; margin: auto; font-size: 40px; font-weight: bold; text-align: center; background-color: #FFF;}
.content_title h2::after {position: absolute; content: ""; width: 120px; height: 4px; top: 50%; left: 30%; background-color: #000; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); z-index: -1;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  CONTENT  *//*  TITLE  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2 {position: relative; width: 200px; height: 40px; line-height: 40px; margin: auto; font-size: 30px; font-weight: bold; text-align: center; background-color: #FFF;}
.content_title h2::after {position: absolute; content: ""; width: 90px; height: 3px; top: 50%; left: 30%; background-color: #000; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); z-index: -1;}
}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  FOOTER
/*  02.  FOOTER - DETAIL
/*  03.  COPYRIGHT
--------------------------------
------------------------------*/

/*  01.  FOOTER
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  FOOTER  */
#foot {float: left; width: 100%; height: auto; background-color: #333;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  FOOTER  */
#foot {float: left; width: 100%; height: auto; background-color: #777;}
}

/*  02.  FOOTER - DETAIL
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  FOOTER  *//*  DETAIL  */
#foot_detail {float: left; width: auto; height: auto; padding: 40px; box-sizing: border-box;}
#foot_detail ul {float: left; width: auto; height: auto; margin-right: 40px;}
#foot_detail ul p {width: 150px; line-height: 20px; padding-bottom: 10px; font-size: 16px; font-weight: bold; color: #FFF; border-bottom: 2px solid #FFF;}
#foot_detail ul li {line-height: 20px; margin-top: 10px; font-size: 14px; font-weight: bold;}
#foot_detail ul li a {display: inline-block; color: #FFF;}
#foot_detail ul li a:hover {color: #FF0004;}

#foot_sns {float: right; width: auto; height: auto; padding: 40px; box-sizing: border-box;}
#foot_sns ul {float: left; width: auto; height: auto;}
#foot_sns ul li {float: left; width: 30px; height: 30px; margin-right: 20px;}
#foot_sns ul li img {width: 30px; height: 30px; vertical-align: top;}
#foot_sns ul li a {width: 30px; height: 30px;}
#foot_sns ul li a:hover {opacity: 0.7;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  FOOTER  *//*  DETAIL  */
#foot_detail {float: left; width: 100%; height: auto; padding: 40px 40px 0px 40px; box-sizing: border-box;}
#foot_detail ul {float: left; width: 100%; height: auto; margin-bottom: 40px;}
#foot_detail ul p {line-height: 20px; padding-left: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold; color: #FFF; border-bottom: 2px solid #FFF;}
#foot_detail ul li {line-height: 20px; padding-left: 10px; margin-top: 10px; font-size: 14px; font-weight: bold;}
#foot_detail ul li a {display: inline-block; color: #FFF;}

#foot_sns {float: left; width: 100%; height: auto; padding: 0px 40px 40px 40px; box-sizing: border-box;}
#foot_sns ul {float: left; width: 100%; height: auto; text-align: center;}
#foot_sns ul li {display: inline-block; width: 24px; height: 24px; margin-left: 10px; margin-right: 10px;}
#foot_sns ul li img {width: 24px; height: 24px; vertical-align: top;}
#foot_sns ul li a {width: 24px; height: 24px;}
}

/*  03.  COPYRIGHT
------------------------------*/
/*  COPYRIGHT  */
#copyright {float: left; width: 100%; height: auto; background-color: #000;}
#copyright p {line-height: 60px; font-size: 12px; font-weight: bold; text-align: center; color: #FFF;}

/*  EX.  ANIMATION
------------------------------*/
/*  ANIMATION  */
#foot_detail ul li a,
#foot_sns ul li a {transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  ITEM LIST
/*  02.  PANKUZU
/*  03.  ITEM LIST - CATEGORY
/*  04.  ITEM LIST - SORT
/*  05.  ITEM LIST - PAGER
/*  06.  ITEM LIST - EMPTY
--------------------------------
------------------------------*/

/*  01.  ITEM LIST
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
/*  ITEM LIST  */
.item_list {float: left; width: 100%; height: auto;}
.item_list_body {float: left; width: 100%; height: auto;}

.item_list_body ul {float: left; width: 100%; height: auto;}
.item_list_body ul li {position: relative; float: left; width: calc(20% - 40px); height: auto; margin: 20px; box-sizing: border-box;}
.item_list_body ul li:hover {opacity: 0.7;}

.item_list_body ul li .item_list_image {float: left; width: 100%; height: auto; padding-bottom: 125%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
.item_list_body ul li .item_list_detail {float: left; width: 100%; height: 60px;}
.item_list_body ul li .item_list_detail p.name {height: 40px; line-height: 20px; font-size: 14px; font-weight: bold; text-align: center; color: #000;}
.item_list_body ul li .item_list_detail p.price {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #000;}
.item_list_body ul li .item_list_detail p.soldout {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #AAA;}
.item_list_body ul li .item_list_detail p.sale {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #FF0004;}
.item_list_body ul li .item_list_detail p.sale span {padding: 5px; margin-right: 10px; font-size: 10px; font-weight: bold; color: #FFF; background-color: #FF0004;}
}

/*  SP  */
@media screen and (max-width: 979px) {
/*  ITEM LIST  */
.item_list {float: left; width: 100%; height: auto;}
.item_list_body {float: left; width: 100%; height: auto;}

.item_list_body ul {float: left; width: 100%; height: auto;}
.item_list_body ul li {position: relative; float: left; width: calc(50% - 40px); height: auto; margin: 20px; box-sizing: border-box;}

.item_list_body ul li .item_list_image {float: left; width: 100%; height: auto; padding-bottom: 125%; background-size: 100%; background-position: center; background-repeat: no-repeat;}
.item_list_body ul li .item_list_detail {float: left; width: 100%; height: 60px;}
.item_list_body ul li .item_list_detail p.name {height: 40px; line-height: 20px; font-size: 12px; font-weight: bold; text-align: center; color: #000;}
.item_list_body ul li .item_list_detail p.price {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #000;}
.item_list_body ul li .item_list_detail p.soldout {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #AAA;}
.item_list_body ul li .item_list_detail p.sale {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; color: #FF0004;}
.item_list_body ul li .item_list_detail p.sale span {padding: 5px; margin-right: 10px; font-size: 10px; font-weight: bold; color: #FFF; background-color: #FF0004;}
}

/*  02.  PANKUZU
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
/*  PANKUZU  */
#pankuzu {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
#pankuzu p {line-height: 20px; font-size: 12px; font-weight: normal; color: #000;}
#pankuzu p a {display: inline; margin-left: 10px; margin-right: 10px; color: #000;}
#pankuzu p a:hover {color: #AAA;}
}

/*  SP  */
@media screen and (max-width: 979px) {
/*  PANKUZU  */
#pankuzu {float: left; width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
#pankuzu p {line-height: 10px; font-size: 10px; font-weight: normal; color: #000;}
#pankuzu p a {display: inline; margin-left: 5px; margin-right: 5px; color: #000;}
}

/*  03.  ITEM LIST - CATEGORY
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
/*  ITEM LIST  *//*  CATEGORY  */
#category_name {float: left; width: 100%; height: auto; padding: 50px; box-sizing: border-box;}
#category_name h2 {line-height: 30px; font-size: 30px; font-weight: bold; text-align: center;}
}

/*  SP  */
@media screen and (max-width: 979px) {
/*  ITEM LIST  *//*  CATEGORY  */
#category_name {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
#category_name h2 {line-height: 20px; font-size: 20px; font-weight: bold; text-align: center;}
}

/*  04.  ITEM LIST - SORT
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
/*  ITEM LIST  *//*  SORT  */
#item_list_number {float: left; width: 100%; height: auto;}
#item_list_number p {line-height: 30px; margin-left: 20px; font-size: 12px; font-weight: bold; text-align: center;}
#item_list_number p span {margin-left: 10px; margin-right: 10px; font-size: 20px; font-weight: bold;}

#item_list_sort {float: left; width: 100%; height: auto; margin-top: 20px;}
#item_list_sort ul {float: left; width: 100%; height: auto; text-align: center;}
#item_list_sort ul li {display: inline-block; width: auto; height: auto; margin-left:5px; margin-right: 5px; font-size: 12px; font-weight: bold; text-align: center; border: 1px solid #333; box-sizing: border-box;}
#item_list_sort ul li p {width: 100px; height: auto; line-height: 30px; padding-right: 20px; color: #000; background-color: #FFF; background-image: url("https://img21.shop-pro.jp/PA01433/072/etc/icon_down.png"); background-position: 90px 8px; background-size: 15px; background-repeat: no-repeat;}
#item_list_sort ul li a {width: 100px; height: auto; line-height: 30px; padding-right: 20px; color: #333; background-color: #EEE; background-image: url("https://img21.shop-pro.jp/PA01433/072/etc/icon_down.png"); background-position: 90px 8px; background-size: 15px; background-repeat: no-repeat;}
}

/*  SP  */
@media screen and (max-width: 979px) {
/*  ITEM LIST  *//*  SORT  */
#item_list_number {float: left; width: 100%; height: auto;}
#item_list_number p {line-height: 20px; font-size: 10px; font-weight: bold; text-align: center;}
#item_list_number p span {margin-left: 5px; margin-right: 5px; font-size: 16px; font-weight: bold;}

#item_list_sort {float: left; width: 100%; height: auto; margin-top: 20px; margin-bottom: 20px;}
#item_list_sort ul {float: left; width: 100%; height: auto; text-align: center;}
#item_list_sort ul li {display: inline-block; width: auto; height: auto; margin-left: 5px; margin-right: 5px; font-size: 10px; font-weight: normal; text-align: center; border: 1px solid #333; box-sizing: border-box;}
#item_list_sort ul li p {width: 70px; height: auto; line-height: 20px; padding-right: 20px; color: #000; background-color: #FFF; background-image: url("https://img21.shop-pro.jp/PA01433/072/etc/icon_down.png"); background-position: 70px 3px; background-size: 15px; background-repeat: no-repeat;}
#item_list_sort ul li a {width: 70px; height: auto; line-height: 20px; padding-right: 20px; color: #333; background-color: #EEE; background-image: url("https://img21.shop-pro.jp/PA01433/072/etc/icon_down.png"); background-position: 70px 3px; background-size: 15px; background-repeat: no-repeat;}
}

/*  05.  ITEM LIST - PAGER
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
/*  ITEM LIST  *//*  PAGER  */
#pager {float: right; width: auto; height: auto;}
#pager ul {float: left; width: auto; height: auto;}
#pager ul li {float: left; width: auto; height: auto;}
#pager ul li a {display: block; width: 80px; line-height: 40px; font-size: 20px; font-weight: normal; color: #FFF;}
#pager ul li a.prev {background-color: #AAA;}
#pager ul li a.next {background-color: #182d49;}
}

/*  SP  */
@media screen and (max-width: 979px) {
/*  ITEM LIST  *//*  PAGER  */
#pager {float: right; width: auto; height: auto;}
#pager ul {float: left; width: auto; height: auto;}
#pager ul li {float: left; width: auto; height: auto;}
#pager ul li a {display: block; width: 80px; line-height: 40px; font-size: 20px; font-weight: normal; color: #FFF;}
#pager ul li a.prev {background-color: #AAA;}
#pager ul li a.next {background-color: #182d49;}
}

/*  06.  ITEM LIST - EMPTY
------------------------------*/
/*  PC  */
@media screen and (min-width: 980px) {
#item_list_empty {float: left; width: 100%; height: auto; padding-top: 200px; padding-bottom: 200px;}
#item_list_empty p.jp {line-height: 40px; font-size: 20px; font-weight: bold; text-align: center;}
#item_list_empty p.en {line-height: 30px; margin-top: 20px; font-size: 20px; font-weight: normal; text-align: center;}
}

/*  SP  */
@media screen and (max-width: 979px) {
#item_list_empty {float: left; width: 100%; height: auto; padding-top: 200px; padding-bottom: 200px;}
#item_list_empty p.jp {line-height: 40px; font-size: 20px; font-weight: bold; text-align: center;}
#item_list_empty p.en {line-height: 30px; margin-top: 20px; font-size: 20px; font-weight: normal; text-align: center;}
}

/*  EX.  ANIMATION
------------------------------*/
/*  ANIMATION  */
.item_list_body ul li,
#pankuzu p a {transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all;}