@charset "euc-jp";
/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  base
--------------------------------
------------------------------*/

/*  01.  base
------------------------------*/
/*  base  */
html,body {width: 100%; height: 100%; margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,h7,dl,dt,dd,ul,ol,li,p,a {margin: 0; padding: 0; word-break: break-all;}
ol,ul,li {list-style: none;}
a {display: block; text-decoration: none;}

/*  font style  */
body {
	font-family: Helvetica Neue,Helvetica,Arial,YuGothic,Yu Gothic,Þ⥴¥·¥Ã¥¯ÂÎ,Þ⥴¥·¥Ã¥¯,¥Ò¥é¥®¥Î³Ñ¥´ ProN W3,Hiragino Kaku Gothic ProN,¥Ò¥é¥®¥Î³Ñ¥´ Pro W3,Hiragino Kaku Gothic Pro,¥á¥¤¥ê¥ª,Meiryo,MS ¥´¥·¥Ã¥¯,MS Gothic,sans-serif;
	font-variant-ligatures: no-common-ligatures;
	font-kerning:normal; -webkit-font-kerning:normal; -moz-font-kerning:normal; -ms-font-kerning:normal; -o-font-kerning:normal;
	font-feature-settings: "kern" 1,"kern"; -webkit-font-feature-settings: "kern" 1,"kern"; -moz-font-feature-settings: "kern" 1,"kern"; -ms-font-feature-settings: "kern" 1,"kern"; -o-font-feature-settings: "kern" 1,"kern";
	font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased;
	text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility;
}

/*  text style  */
.en {font-family: 'Libre Baskerville', serif;}

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

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  header
/*  02.  header - logo
/*  03.  header - cart
/*  04.  header - menu
--------------------------------
------------------------------*/

/*  01.  header
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  */
#head {position: fixed; width: 100%; height: 60px; top: 0; left: 0; right: 0; background-color: #FFF; border-bottom: 1px solid #DDD; z-index: 999;}
#head_body {position: relative; width: 100%; max-width: 1400px; margin: auto;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  */
#head {position: fixed; width: 100%; height: 40px; top: 0; left: 0; right: 0; background-color: #FFF; border-bottom: 1px solid #DDD; z-index: 999;}
}

/*  02.  header - logo
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  logo  */
#head h1 {float: left; width: 120px; height: 30px; margin: 15px 20px 15px 20px;}
#head h1 a {width: 120px; height: 30px; font-size: 0px; background-size: 100%; background-position: center;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  logo  */
#head h1 {width: 80px; height: 20px; margin: 10px auto;}
#head h1 a {width: 80px; height: 20px; font-size: 0px; background-size: 100%; background-position: center;}
}

/*  03.  header - cart
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  cart  */
#head_cart {float: right; width: auto; height: auto; margin: 15px 60px 15px 0px;}
#head_cart a {position: relative; width: 120px; height: 30px; line-height: 30px; padding-left: 20px; font-size: 14px; font-weight: normal; text-align: center; color: #000;}
#head_cart a:hover {color: #777;}
#head_cart a::before {position: absolute; content: ""; width: 30px; height: 30px; top: 0; left: 5px; background-image: url("https://rugru.jp/image/icon_bag.png"); background-size: 16px; background-position: center; background-repeat: no-repeat;}
#head_cart a span {margin-left: 5px; margin-right: 5px;}
#head_cart a span::before {content: ":"; margin-right: 10px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  cart  */
#head_cart {position: absolute; width: auto; height: auto; top: 5px; right: 10px;}
#head_cart a {position: relative; width: 70px; height: 30px; line-height: 30px; padding-left: 20px; font-size: 10px; font-weight: normal; text-align: center; color: #000;}
#head_cart a:hover {color: #777;}
#head_cart a::before {position: absolute; content: ""; width: 30px; height: 30px; top: 0; left: 0; background-image: url("https://rugru.jp/image/icon_bag.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
#head_cart a span {margin-left: 2px; margin-right: 2px;}
#head_cart a span::before {content: ":"; margin-right: 4px;}
}

/*  04.  header - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  header  *//*  menu  *//*  sub  */
.menu_sub {float: right; width: auto; height: auto; margin: 15px 0px 15px 0px;}
.menu_sub ul {float: left; width: auto; height: auto;}
.menu_sub ul li {float: left; width: auto; height: auto; line-height: 30px; margin-right: 20px; font-size: 14px; font-weight: normal;}
.menu_sub ul li a {color: #000;}
.menu_sub ul li a:hover {color: #777;}

/*  header  *//*  menu  *//*  search  */
.menu_search {position: absolute; width: auto; height: auto; top: 0px; right: 20px;}
.menu_search button {width: 30px; height: 60px; background-color: #FFF; background-image: url("https://rugru.jp/image/icon_search.png"); background-size: 20px; background-position: center; background-repeat: no-repeat; outline: 0; border: 0; border-radius: 0px; cursor: pointer;}
.menu_search .area {visibility: hidden; opacity: 0;}
.menu_search:hover .area {visibility: visible; opacity: 1;}
.menu_search .area {position: absolute; width: 300px; height: auto; top: 60px; right: 0; padding: 20px; background-color: #FFF; border: 1px solid #EEE; box-sizing: border-box;}
.menu_search .area p {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center;}
.menu_search .area p span {font-size: 14px;}
.menu_search .area input[type="text"],
.menu_search .area input[type="text"]:focus {float: left; width: 100%; height: 40px; line-height: 40px; padding: 10px; margin-top: 10px; font-size: 12px; background-color: #FFF; font-weight: normal; color: #000; box-sizing: border-box; outline: none; border: 1px solid #DDD; border-radius: 0px; -webkit-appearance: none;}
.menu_search .area input[type="submit"],
.menu_search .area input[type="submit"]:focus {float: left; width: calc(100% - 40px); height: 30px; line-height: 30px; margin: 10px 20px 0px 20px; font-size: 12px; font-weight: bold; letter-spacing: 2px; color: #FFF; background-color: #777; outline: none; border: 0px; border-radius: 5px; box-shadow: 0px 5px 0px #333; -webkit-appearance: none;}
  
/*  header  *//*  menu  *//*  main  */
.menu_main {float: left; width: auto; height: auto;}

.menu_main ul.parent {float: left; width: auto; height: auto; margin-left: 20px;}

.menu_main ul.parent li.parent {float: left; width: auto; height: auto; padding-left: 10px; padding-right: 10px; margin-right: 20px;}
.menu_main ul.parent li.parent p.name {position: relative; line-height: 15px; padding-top: 15px; padding-bottom: 15px; font-size: 10px; font-weight: normal; text-align: center; color: #000;}
.menu_main ul.parent li.parent p.name span.en {font-size: 12px; letter-spacing: 1px;}
.menu_main ul.parent li.parent:hover p.name {color: #777;}

.menu_main ul.parent li.parent .dropdown {visibility: hidden; opacity: 0;}
.menu_main ul.parent li.parent:hover .dropdown {visibility: visible; opacity: 1;}
.menu_main ul.parent li.parent .dropdown {position: fixed; width: 100%; height: auto; top: 60px; left: 0; background-color: #FFF; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; box-sizing: border-box;}
.menu_main ul.parent li.parent .dropdown_body {width: 100%; max-width: 1400px; margin: auto; padding: 40px 10px 30px 10px; box-sizing: border-box;}  

.menu_main ul.parent li.parent ul.child {float: left; width: 100%; height: auto;}
.menu_main ul.parent li.parent ul.child {display: flex; flex-wrap: wrap;}
.menu_main ul.parent li.parent ul.child li.child {position: relative; width: calc(100% / 4 - 20px); margin: 0px 10px 10px 10px;}
.menu_main ul.parent li.parent ul.child li.child a {float: left; width: 100%; height: auto; box-sizing: border-box;}
.menu_main ul.parent li.parent ul.child li.child a:hover {opacity: 0.7;}
.menu_main ul.parent li.parent ul.child li.child .image {float: left; width: 100%; height: auto; padding-top: 50%; background-size: cover; background-position: center; border: 1px solid #DDD; border-radius: 10px; box-sizing: border-box;}
.menu_main ul.parent li.parent ul.child li.child .title {float: left; width: 100%; height: auto; margin-top: 10px;}
.menu_main ul.parent li.parent ul.child li.child .title p {line-height: 20px; font-size: 14px; font-weight: normal; text-align: center; color: #333;}

.menu_main ul.parent li.parent ul.group {float: left; width: 100%; height: auto;}
.menu_main ul.parent li.parent ul.group {display: flex; flex-wrap: wrap;}
.menu_main ul.parent li.parent ul.group li.group {position: relative; width: calc(100% / 5 - 20px); margin: 0px 10px 10px 10px;}
.menu_main ul.parent li.parent ul.group li.group p {position: relative; line-height: 20px; padding-bottom: 10px; font-size: 14px; font-weight: bold; border-bottom: 1px solid #000;}
.menu_main ul.parent li.parent ul.group li.group p::after {position: absolute; content: ""; width: 20px; height: 20px; top: 0; right: 0; background-image: url("https://rugru.jp/image/icon_next.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
.menu_main ul.parent li.parent ul.group li.group p a {color: #000;}
.menu_main ul.parent li.parent ul.group li.group p a:hover {color: #777;}
.menu_main ul.parent li.parent ul.group li.group ul.list {float: left; width: 100%; height: auto;}
.menu_main ul.parent li.parent ul.group li.group ul.list li.list {float: left; width: 100%; height: auto; line-height: 20px; margin-top: 10px; font-size: 14px; font-weight: normal;}
.menu_main ul.parent li.parent ul.group li.group ul.list li.list a {color: #000;}
.menu_main ul.parent li.parent ul.group li.group ul.list li.list a:hover {color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  header  *//*  menu  *//*  button  */
#menu_button {position: fixed; width: 30px; height: 30px; top: 5px; left: 10px; z-index: 998;}

#menu_button span {position: absolute; width: 20px; height: 2px; background-color: #000; border-radius: 3px;}
#menu_button span:first-of-type {top: 8px; right: 5px;}
#menu_button span:nth-of-type(2) {top: 50%; right: 5px; margin-top: -1px;}
#menu_button span:last-of-type {right: 5px; bottom: 8px;}
#menu_button.active span:first-of-type {transform: translateY(6px) rotate(225deg);}
#menu_button.active span:nth-of-type(2) {transform: translateX(100%); opacity: 0;}
#menu_button.active span:last-of-type {transform: translateY(-6px) rotate(-225deg);}

/*  header  *//*  menu  */
#menu {visibility: hidden; opacity: 0;}
#menu.open {visibility: visible; opacity: 1;}
#menu {position: fixed; top: 40px; left: 0; right: 0; bottom: 0; padding: 10px; background-color: rgba(137,133,128,0.9); box-sizing: border-box; z-index: 994;}

/*  header  *//*  menu  *//*  body  */
#menu #menu_body {visibility: hidden; opacity: 0; transform: translateX(-100px);}
#menu.open #menu_body {visibility: visible; opacity: 1; transform: translateX(0px);}
#menu #menu_body {position: fixed; width: 100%; max-width: 400px; top: 40px; left: 0; bottom: 0; background-color: #FFF; border-top: 1px solid #DDD; box-sizing: border-box; overflow-x: scroll;}

.menu_body {float: left; width: 100%; height: auto;}

.menu_body .menu_sub {float: left; width: 100%; height: auto;}
.menu_body .menu_sub ul {float: left; width: 100%; height: auto;}
.menu_body .menu_sub ul {display: flex; flex-wrap: nowrap;}
.menu_body .menu_sub ul li {width: 50%; padding: 10px; line-height: 20px; font-size: 12px; font-weight: normal; text-align: center;}
.menu_body .menu_sub ul li:first-of-type {background-color: #574A3E;}
.menu_body .menu_sub ul li:nth-of-type(2) {background-color: #A7A49F;}
.menu_body .menu_sub ul li a {color: #FFF;}

.menu_body .menu_search {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
.menu_body .menu_search button {display: none;}
.menu_body .menu_search .area {float: left; width: 100%; height: auto;}
.menu_body .menu_search .area p {line-height: 15px; font-size: 12px; font-weight: normal; text-align: center;}
.menu_body .menu_search .area p span {font-size: 14px; letter-spacing: 1px;}
.menu_body .menu_search .area input[type="text"],
.menu_body .menu_search .area input[type="text"]:focus {float: left; width: 100%; height: 40px; line-height: 40px; padding: 10px; margin-top: 10px; font-size: 12px; background-color: #FFF; font-weight: normal; color: #000; box-sizing: border-box; outline: none; border: 1px solid #DDD; border-radius: 0px; -webkit-appearance: none;}
.menu_body .menu_search .area input[type="submit"],
.menu_body .menu_search .area input[type="submit"]:focus {float: left; width: calc(100% - 40px); height: 30px; line-height: 30px; margin: 10px 20px 0px 20px; font-size: 12px; font-weight: bold; letter-spacing: 2px; color: #FFF; background-color: #777; outline: none; border: 0px; border-radius: 5px; box-shadow: 0px 5px 0px #333; -webkit-appearance: none;}

.menu_body .menu_main ul.parent {float: left; width: 100%; height: auto; box-sizing: border-box;}
.menu_body .menu_main ul.parent li.parent {float: left; width: 100%; height: auto;}
.menu_body .menu_main ul.parent li.parent p.name {line-height: 20px; padding: 10px 10px 10px 20px; font-size: 12px; font-weight: normal; border-top: 1px solid #DDD; color: #000;}
.menu_body .menu_main ul.parent li.parent p.name span.en {margin-right: 10px; font-size: 14px; letter-spacing: 1px;}
.menu_body .menu_main ul.parent li.parent p.name br {display: none;}
.menu_body .menu_main ul.parent li.parent a.name p {color: #FFF; background-color: #777;} 

.menu_body .menu_main ul.parent li.parent ul.child {float: left; width: 100%; height: auto;}
.menu_body .menu_main ul.parent li.parent ul.child li.child {position: relative; float: left; width: 100%; height: auto; padding: 10px 20px 10px 20px; border-top: 1px dotted #DDD; box-sizing: border-box;}
.menu_body .menu_main ul.parent li.parent ul.child li.child a {display: flex; flex-wrap: nowrap;}
.menu_body .menu_main ul.parent li.parent ul.child li.child .image {width: 80px; height: 80px; background-size: cover; background-position: center; border: 1px solid #DDD; border-radius: 10px; box-sizing: border-box;}
.menu_body .menu_main ul.parent li.parent ul.child li.child .title {position: absolute; width: calc(100% - 120px); height: auto; top: 50%; left: 110px; transform: translateY(-50%);}
.menu_body .menu_main ul.parent li.parent ul.child li.child .title p {line-height: 20px; font-size: 14px; font-weight: normal;color: #333;}

.menu_body .menu_main ul.parent li.parent ul.group {float: left; width: 100%; height: auto; box-sizing: border-box;}
.menu_body .menu_main ul.parent li.parent ul.group {float: left; width: 100%; height: auto;}
.menu_body .menu_main ul.parent li.parent ul.group li.group {position: relative; float: left; width: 100%; height: auto;}
.menu_body .menu_main ul.parent li.parent ul.group li.group p {position: relative; line-height: 20px; font-size: 14px; font-weight: bold; padding: 10px 20px 10px 20px; background-color: #EEE; box-sizing: border-box; border-top: 1px dotted #DDD;}
.menu_body .menu_main ul.parent li.parent ul.group li.group p::after {position: absolute; content: ""; width: 20px; height: 20px; top: 10px; right: 20px; background-image: url("https://rugru.jp/image/icon_next.png"); background-size: 12px; background-position: center; background-repeat: no-repeat;}
.menu_body .menu_main ul.parent li.parent ul.group li.group p a {color: #000;}
.menu_body .menu_main ul.parent li.parent ul.group li.group ul.list {float: left; width: 100%; height: auto; padding: 20px; box-sizing: border-box;}
.menu_body .menu_main ul.parent li.parent ul.group li.group ul.list li.list {float: left; width: 100%; height: auto; line-height: 20px; margin-bottom: 10px; font-size: 14px; font-weight: normal;}
.menu_body .menu_main ul.parent li.parent ul.group li.group ul.list li.list:last-of-type {margin-bottom: 0px;}
.menu_body .menu_main ul.parent li.parent ul.group li.group ul.list li.list a {display: inline; color: #000;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
#menu p,
#menu ul,
#menu ul li,
#menu ul li::after,
#menu ul li a,
#menu .dropdown {transition: all 0.3s;}

#head_cart a {transition: all 0.3s;}
#menu .menu_sub a {transition: all 0.3s;}
#menu .menu_search .area {transition: all 0.3s;}

#menu_button,
#menu_button span {transition-duration: 0.4s; transition-timing-function: ease-in;}

#menu {transition-duration: 0.8s; transition-delay: 0.4s;}
#menu.open {transition-duration: 0.4s; transition-delay: 0s;}

#menu #menu_body {transition-duration: 0.4s; transition-delay: 0s; transition-timing-function: ease;}
#menu.open #menu_body {transition-duration: 0.8s; transition-delay: 0.4s; transition-timing-function: ease;}

.menu_body {transition: all 0.3s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  content
/*  02.  content - title
--------------------------------
------------------------------*/

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

.content_wrap {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: 40px;}

.content_wrap {float: left; width: 100%; height: auto;}
.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,
.content_title h3 {line-height: 30px; font-size: 20px; font-weight: normal; text-align: center; letter-spacing: 2px;}
.content_title p.jp {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 2px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  content  *//*  title  */
.content_title {float: left; width: 100%; height: auto;}
.content_title h2,
.content_title h3 {line-height: 30px; font-size: 20px; font-weight: normal; text-align: center; letter-spacing: 1px;}
.content_title p.jp {line-height: 20px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 1px;}
}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  pankuzu
/*  02.  item list
--------------------------------
------------------------------*/

/*  01.  pankuzu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto; padding: 10px 20px 10px 20px; box-sizing: border-box;}
#pankuzu ul {float: left; width: 100%; height: auto;}
#pankuzu ul li {display: inline; width: auto; height: auto; line-height: 20px;}
#pankuzu ul li::before {display: inline-block; content: ""; width: 30px; height: 20px; background-image: url("https://rugru.jp/image/icon_next.png"); background-size: 10px; background-position: center top 10px; background-repeat: no-repeat;}
#pankuzu ul li:first-of-type::before {display: none;}
#pankuzu ul li,
#pankuzu ul li a {display: inline; line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #777;}
#pankuzu ul li a:hover {color: #AAA;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  pankuzu  */
#pankuzu {float: left; width: 100%; height: auto; padding: 0px 10px 10px 10px; box-sizing: border-box;}
#pankuzu ul {float: left; width: 100%; height: auto;}
#pankuzu ul li {display: inline; width: auto; height: auto; line-height: 20px;}
#pankuzu ul li::before {display: inline-block; content: ""; width: 16px; height: 20px; background-image: url("https://rugru.jp/image/icon_next.png"); background-size: 8px; background-position: center top 12px; background-repeat: no-repeat;}
#pankuzu ul li:first-of-type::before {display: none;}
#pankuzu ul li,
#pankuzu ul li a {display: inline; line-height: 20px; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #777;}
}

/*  02.  item list
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  item list  */
.item-list {float: left; width: 100%; height: auto;}
.item-list ul {float: left; width: 100%; height: auto; padding: 10px; box-sizing: border-box;}
.item-list ul {display: flex; flex-wrap: wrap;}
.item-list ul li {position: relative; width: calc(100% / 5 - 20px); margin: 10px; padding-bottom: 30px;}
.item-list ul li:hover {opacity: 0.7;}
.item-list ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
.item-list ul li .detail {float: left; width: 100%; height: auto; margin-top: 10px;}
.item-list ul li .detail p.name {line-height: 20px; font-size: 12px; font-weight: normal; color: #000;}
.item-list ul li .detail .kakaku {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
.item-list ul li .detail .kakaku p.price {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #000;}
.item-list ul li .detail .kakaku p.soldout {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #777;}
.item-list ul li .detail .kakaku p.sale {line-height: 20px; font-size: 12px; font-weight: normal; letter-spacing: 0px; color: #7D0305;}
.item-list ul li .detail .kakaku p.sale span {padding: 3px; margin-right: 2px; font-size: 10px; font-weight: bold; color: #FFF; background-color: #7D0305;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  item list  */
.item-list {float: left; width: 100%; height: auto;}
.item-list ul {float: left; width: 100%; height: auto; padding: 5px; box-sizing: border-box;}
.item-list ul {display: flex; flex-wrap: wrap;}
.item-list ul li {position: relative; width: calc(100% / 2 - 10px); margin: 5px; padding-bottom: 20px;}
.item-list ul li .image {float: left; width: 100%; height: auto; padding-top: 100%; background-size: cover; background-position: center;}
.item-list ul li .detail {float: left; width: 100%; height: auto; margin-top: 10px;}
.item-list ul li .detail p.name {line-height: 15px; font-size: 10px; font-weight: normal; color: #000;}
.item-list ul li .detail .kakaku {position: absolute; width: 100%; height: auto; left: 0; bottom: 0;}
.item-list ul li .detail .kakaku p.price {line-height: 15px; font-size: 10px; font-weight: normal; color: #000;}
.item-list ul li .detail .kakaku p.soldout {line-height: 15px; font-size: 10px; font-weight: normal; color: #777;}
.item-list ul li .detail .kakaku p.sale {line-height: 15px; font-size: 10px; font-weight: normal; color: #7D0305;}
.item-list ul li .detail .kakaku p.sale span {padding: 2px 3px 2px 3px; margin-right: 3px; font-size: 10px; font-weight: normal; color: #FFF; background-color: #7D0305;}
}

/*  ex.  animation
------------------------------*/
/*  animation  */
.item-list ul li {transition: all 0.3s;}

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  footer
/*  02.  footer - company
/*  03.  footer - menu
/*  04.  footer - copyright
--------------------------------
------------------------------*/

/*  01.  footer
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  */
#foot {float: left; width: 100%; height: auto; background-color: #DBD8D5; box-sizing: border-box;}
#foot_body {width: 100%; max-width: 1400px; margin: auto; padding: 40px 20px 40px 20px; box-sizing: border-box;}
}

/*  sp  */
@media screen and (max-width: 979px) {
#foot {float: left; width: 100%; height: auto; padding: 40px; background-color: #DBD8D5; box-sizing: border-box;}
#foot_body {float: left; width: 100%; height: auto;}
}

/*  02.  footer - company
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  company  */
#foot_company {float: left; width: 240px; height: auto;}
#foot_company .block {float: left; width: 100%; height: auto;}
#foot_company .block:first-of-type {margin-bottom: 20px;}
#foot_company .block p.title {line-height: 20px; margin-bottom: 5px; font-size: 14px; font-weight: normal; letter-spacing: 1px;}
#foot_company .block p.add {line-height: 20px; font-size: 12px; font-weight: normal;}
#foot_company .block ul {float: left; width: 100%; height: auto;}
#foot_company .block ul li {float: left; width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: normal;}
#foot_company .block ul li.attention {line-height: 15px; font-size: 10px;}
#foot_company .block ul li span {margin-right: 10px;}

#foot_company .block a {width: 60px; height: 20px; line-height: 20px; margin-top: 10px; font-size: 12px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #000; background-color: #FFF;}

#foot_company .sns {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_company .sns ul {float: left; width: 100%; height: auto;}
#foot_company .sns ul {display: flex; flex-wrap: nowrap;}
#foot_company .sns ul li {width: auto; height: 20px; line-height: 20px; margin-right: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px;}
#foot_company .sns ul li a {display: inline-block; padding-left: 30px; color: #333; background-size: 20px; background-position: left; background-repeat: no-repeat;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  company  */
#foot_company {float: left; width: 100%; height: auto;}
#foot_company .block {float: left; width: 100%; height: auto;}
#foot_company .block:first-of-type {margin-bottom: 20px;}
#foot_company .block p.title {line-height: 20px; margin-bottom: 5px; font-size: 14px; font-weight: normal; letter-spacing: 1px;}
#foot_company .block p.add {line-height: 20px; font-size: 12px; font-weight: normal;}
#foot_company .block ul {float: left; width: 100%; height: auto;}
#foot_company .block ul li {float: left; width: 100%; height: auto; line-height: 20px; font-size: 12px; font-weight: normal;}
#foot_company .block ul li.attention {line-height: 15px; font-size: 10px;}
#foot_company .block ul li span {margin-right: 10px;}

#foot_company .block a {width: 60px; height: 20px; line-height: 20px; margin-top: 5px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 1px; color: #000; background-color: #FFF;}

#foot_company .sns {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_company .sns ul {float: left; width: 100%; height: auto;}
#foot_company .sns ul {display: flex; flex-wrap: nowrap;}
#foot_company .sns ul li {width: auto; height: 20px; line-height: 20px; margin-right: 20px; font-size: 12px; font-weight: normal; letter-spacing: 2px;}
#foot_company .sns ul li a {display: inline-block; padding-left: 30px; color: #333; background-size: 20px; background-position: left; background-repeat: no-repeat;}
}

/*  03.  footer - guide
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  guide  */
#foot_guide {float: left; width: 240px; height: auto; margin-left: 40px;}
#foot_guide {display: flex; flex-wrap: nowrap;}
#foot_guide .block {width: 100%;}
#foot_guide .block ul {float: left; width: 100%; height: auto;}
#foot_guide .block ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-bottom: 5px; font-size: 12px; font-weight: normal;}
#foot_guide .block ul li span.en {letter-spacing: 1px;}
#foot_guide .block ul li span.jp {margin-left: 10px; font-size: 12px;}
#foot_guide .block ul li a {display: inline; padding-right: 20px; background-size: 12px; background-position: top 0px right 2px; background-repeat: no-repeat; color: #000;}
#foot_guide .block ul li a:hover {color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  guide  */
#foot_guide {float: left; width: 100%; height: auto; margin-top: 40px;}
#foot_guide .block {float: left; width: 100%; height: auto;}
#foot_guide .block ul {float: left; width: 100%; height: auto;}
#foot_guide .block ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-bottom: 5px; font-size: 12px; font-weight: normal;}
#foot_guide .block ul li span.en {letter-spacing: 1px;}
#foot_guide .block ul li span.jp {margin-left: 10px; font-size: 10px;}
#foot_guide .block ul li a {display: inline; padding-right: 20px; background-size: 12px; background-position: top 0px right 2px; background-repeat: no-repeat; color: #000;}
}

/*  04.  footer - menu
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  menu  */
#foot_menu {float: right; width: calc(100% - 540px); max-width: 600px; height: auto;}
#foot_menu {display: flex; flex-wrap: nowrap;}
#foot_menu .block {width: calc(100% / 2 - 20px); margin-left: 20px;}
#foot_menu .block p.title {line-height: 20px; padding-bottom: 10px; margin-bottom: 10px; font-size: 10px; font-weight: normal; border-bottom: 1px solid #000;}
#foot_menu .block p.title span {margin-right: 10px; font-size: 14px; letter-spacing: 1px;}
#foot_menu .block ul {float: left; width: 100%; height: auto;}
#foot_menu .block ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-bottom: 10px; font-size: 12px; font-weight: normal;}
#foot_menu .block ul li a {padding-right: 20px; color: #000; background-image: url("https://rugru.jp/image/icon_next.png"); background-position: right; background-size: 12px; background-repeat: no-repeat;}
#foot_menu .block ul li a:hover {color: #777;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  menu  */
#foot_menu {float: left; width: 100%; height: auto; margin-top: 20px;}
#foot_menu .block {float: left; width: 100%; max-width: 300px; height: auto; margin-bottom: 20px;}
#foot_menu .block:last-of-type {margin-bottom: 0px;}
#foot_menu .block p.title {position: relative; line-height: 20px; padding-bottom: 10px; margin-bottom: 10px; font-size: 10px; font-weight: normal;}
#foot_menu .block p.title span {margin-right: 10px; font-size: 14px; letter-spacing: 1px;}
#foot_menu .block p.title::after {position: absolute; content: ""; width: 50px; height: 1px; left: 0; bottom: 0; background-color: #000;}
#foot_menu .block ul {float: left; width: 100%; height: auto;}
#foot_menu .block ul li {float: left; width: 100%; height: auto; line-height: 20px; margin-bottom: 5px; font-size: 12px; font-weight: normal;}
#foot_menu .block ul li a {display: inline; padding-right: 20px; color: #000; background-image: url("https://rugru.jp/image/icon_next.png"); background-position: right; background-size: 12px; background-repeat: no-repeat;}
}

/*  05.  footer - copyright
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  footer  *//*  copyright  */
#foot_copyright {float: left; width: 100%; height: auto; margin-top: 40px;}
#foot_copyright p {line-height: 20px; font-size: 10px; font-weight: normal; text-align: center; letter-spacing: 2px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  footer  *//*  copyright  */
#foot_copyright {float: left; width: 100%; height: auto; margin-top: 40px;}
#foot_copyright p {line-height: 20px; font-size: 10px; font-weight: normal; letter-spacing: 2px;}
}

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