@charset "UTF-8";
/* --------------------------------------------------------------------
	TOPカテゴリ top-category-box
-------------------------------------------------------------------- */
.top-category-box {
 width: 1200px;
 margin: 0 auto;
}

.top-category-box h2 {
 margin-top: 30px;
 font-size: 24px      ;
 font-weight: 600;
 border-bottom: 1px solid #000;
 padding-bottom: 10px;
 width: fit-content;
 margin: 0 auto;
 margin-top: 80px;
 margin-bottom: 30px;
}

.top-category-box table {
 width: 100%;
 color: black;
}

.top-category-box td {
 width: 25%;
 position: relative;
 padding: 15px 20px 15px 20px;
 border: 1px solid #E7E5E6;
}

.top-category-box td p:nth-of-type(1) {
 font-size: 17px;
 font-weight: 500;
 letter-spacing: 0.05em;
 margin-bottom: 10px;
}

.top-category-box td p:nth-of-type(1) a {
 width: 100%;
 display: block;
 padding-bottom: 10px;
}

.top-category-box p span {
 display: inline-block;
 position: absolute;
 padding: 10px;
 top: 11px;
 right: 10px;
}

.top-category-box p span::before {
 content: '';
 width: 7px;
 height: 7px;
 border-top: solid 2px #575B58;
 border-right: solid 2px #575B58;
 position: absolute;
 transform: rotate(45deg);
}

.top-category-box ul {
 border-top: 1px dashed #575B58;
 padding-top: 17px;
 margin-top: 5px;
}

.top-category-box li {
 position: relative;
 padding-left: 20px;
 font-size: 14px;
 margin-bottom: 1px;
 height: 22.5px;
}

.top-category-box li span {
 position: absolute;
 display: inline-block;
 padding: 10px;
 left: -5px;
 bottom: 5.5px;
}

.top-category-box li span::before {
 content: '';
 width: 5px;
 height: 5px;
 border-top: solid 1px #575B58;
 border-right: solid 1px #575B58;
 position: absolute;
 transform: rotate(45deg);
}

.top-category-box td p:nth-of-type(2) {
 font-size: 12px;
 text-align: right;
 margin: 5px 0px;
 margin-top: 10px;
}

/* --------------------------------------------------------------------
	TOP新着商品 top-new-items-box
-------------------------------------------------------------------- */
.top-new-items-content-bg {
 background-color: #faf8f2;
 padding-bottom: 6px;
}

.top-new-items-content-bg h2 {
 padding-top: 30px;
}

.top-new-items-box {
 margin-bottom: 35px;
 margin: 0 auto;
}

.top-new-items-box h2 {
 font-size: 24px;
 font-weight: 600;
 padding-bottom: 10px;
 border-bottom: 1px solid #000;
 width: fit-content;
 margin: 0 auto;
 margin-top: 80px;
 margin-bottom: 30px;
}

.top-new-items-box .top-new-items-content {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
 align-items: flex-start;
 width: 1200px;
 margin: 0 auto;
}

.top-new-items-box .top-new-items-content li {
 width: calc((100% - 52px) / 5);
 margin-bottom: 30px;
}

.top-new-items-box .top-new-items-content li:not(:nth-child(5n)) {
 margin-right: 13px;
}

.top-new-items-box .top-new-items-content li .new-item-name {
 font-size: 14px;
 margin-top: 5px;
}

.top-new-items-box .viewmore-box {
 background: #fff;
 border: 1px solid #333;
 border-radius: 4px;
 color: #333;
 display: block;
 font-size: 14px;
 line-height: 1;
 margin: 10px auto 20px;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 width: 225px;
}

.viewmore-box:hover {
 text-decoration: none;
}

/* --------------------------------------------------------------------
	TOPピックアップ top-pickup-box
-------------------------------------------------------------------- */
.top-pickup-box {
 margin-bottom: 35px;
 width: 1200px;
 margin: 0 auto;
}

.top-pickup-box h2 {
 font-size: 24px;
 font-weight: 600;
 padding-bottom: 10px;
 margin-bottom: 20px;
 border-bottom: 1px solid #000;
}

.top-pickup-box .top-pickup-content {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: flex-start;
}

.top-pickup-box .top-pickup-content li {
 width: calc((100% - 39px) / 4);
 margin-bottom: 15px;
}

.top-pickup-box .top-pickup-content li:not(:nth-child(4n)) {
 margin-right: 13px;
}

.top-pickup-box .top-pickup-content li .new-pickup-name {
 font-size: 14px;
 margin-top: 5px;
}

.top-pickup-content-inner {
 width:19%
}

.top-pickup-box .viewmore-box {
 background: #fff;
 border: 1px solid #333;
 border-radius: 4px;
 color: #333;
 display: block;
 font-size: 14px;
 line-height: 1;
 margin: 30px auto 20px;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 width: 225px;
}

/* --------------------------------------------------------------------
	TOPランキング top_ranking_box
-------------------------------------------------------------------- */
.top-ranking-box {
 width: 1200px;
 margin: 0 auto;
}

.top-ranking-box h2 {
 font-size: 24px;
 font-weight: 600;
 padding-bottom: 10px;
 border-bottom: 1px solid #000;
 width: fit-content;
 margin: 0 auto;
 margin-top: 80px;
 margin-bottom: 30px;
}

.top-ranking-btn-box-wrap {
 display: flex;
}

.top-ranking-btn-box-all {
 width: 10%;
}

.top-ranking-btn-box-category {
 width: 90%;
}

.top-ranking-btn {
 width: 24%;
}

.top-ranking-box .top-ranking-btn-box {
 margin-bottom: 10px;
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: flex-start;
}

.top-ranking-btn-box-all .top-ranking-btn {
 width: 90%;
 font-size: 16px;
 font-weight: 600;
 text-align: center;
 color: #575b58;
 padding: 33px 0px;
 border: 1px solid #575b58;
 background: #fff;
 border-radius: 10px;
 cursor: pointer;
}

.top-ranking-btn-box-all .top-ranking-btn:hover {
 text-decoration: none;
 transition: 0.1s;
 background: #575b58;
 color: #fff;
}

.top-ranking-box .top-ranking-btn-box .top-ranking-btn {
 font-size: 15px;
 font-weight: 600;
 text-align: center;
 color: #575b58;
 padding: 8px 0px;
 border: 1px solid #575b58;
 background: #fff;
 border-radius: 10px;
 margin: 0 0 10px 0;
 cursor: pointer;
}

.top-ranking-box .top-ranking-btn-box .top-ranking-btn.active,
.top-ranking-btn-box-all .top-ranking-btn.active {
 background: #575b58;
 color: #fff;
}

.top-ranking-box .top-ranking-btn-box .top-ranking-btn:hover {
 text-decoration: none;
 transition: 0.1s;
 background: #575b58;
 color: #fff;
}

.top-ranking-box .top-ranking-content {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
 align-items: flex-start;
}

.top-ranking-box .top-ranking-content:not(.active) {
 display: none;
}

.top-ranking-box .top-ranking-content li {
 width: calc((100% - 52px) / 5);
 margin-bottom: 30px;
}

.top-ranking-box .top-ranking-content li:not(:nth-child(5n)) {
 margin-right: 13px;
}

.top-ranking-box .top-ranking-content li .ranking-item-name {
 font-size: 14px;
 margin-top: 5px;
}

.top-ranking-box .top-ranking-content li a{
position: relative;
display: inline-block;
}

.top-ranking-box .top-ranking-content li a img:first-of-type{
position: absolute;
top: 0;
left: 0;
width: 40px;
z-index: 10;
}