@charset "UTF-8";
#sort{
display: flex;
justify-content: space-between;
padding: 10px;
}

#sort ul{
list-style: none;
font-size: .8rem;
}
#sort ul li{
font-size: .8rem;
display: none;
color: #aaa;
}

#sort ul li.on{
display: block;
}

#sort .result{
font-size: .8rem;
color: #aaa;
}
#sort .result span{
font-size: 1rem;
font-weight: bold;
color: #000;
}

.__row{
display: none !important;
}


#ranking .result,
#search_result_new{
display: flex;
flex-wrap: wrap;
gap:2px;
}

#search_result_new .__item{
width: calc(100% / 3 - 7px);
width: calc(100% / 2 - 2px);
list-style: none;
}


#ranking .result .__item{
list-style: none;
width: var(--rank-w, calc(100vw / 3.5));

position: relative;
/*コレ*/display: flex;
/*コレ*/justify-content: center;

}

#ranking .result .__item ul,
#search_result_new .__item ul{
list-style: none;
}


#ranking .result .__item .title,
#search_result_new .__item .title{
font-size: .65rem;
width: 100%;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}



#ranking{
width: 100%;
flex-wrap: nowrap;
overflow: hidden;
overflow-x: scroll;
/* 1〜3位のバッジが商品の上にはみ出す。overflow:hidden で切れるので、
   はみ出すぶん（バッジの半径）だけ上に余白をとる */
padding-top: calc(var(--rank-w, calc(100vw / 3.5)) * 0.2 / 2);
}


#ranking .result{
width: calc(var(--rank-w, calc(100vw / 3.5)) * 10);
gap:0;
}


#ranking .fav,
#ranking .cart span{
display: none;
}

#ranking .__item header{
margin-bottom: 4px;
}
#ranking .__item .cart{
padding: 2px;
}

#ranking .price{
font-size: .8rem;
margin: 4px;
}

#rankingWrap h2{
margin-bottom: 2px;
font-size: 1rem;
}

/* 横スクロールを動かすボタン。PCだけ出す */
#rankingWrap{
position: relative;
}

#rankingWrap .rankNav{
display: none;
}

@media (min-width: 600px){
  #rankingWrap .rankNav{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
  }
  #rankingWrap .rankNav.prev{ left: 2px; }
  #rankingWrap .rankNav.next{ right: 2px; }
  #rankingWrap .rankNav:disabled{
    opacity: .25;
    cursor: default;
    box-shadow: none;
  }
  /* ボタンで動かすのでスクロールバーは隠す */
  #ranking{
    scrollbar-width: none;
  }
  #ranking::-webkit-scrollbar{
    display: none;
  }
}

#ranking .__item{
}

#ranking .__item.n1:before,
#ranking .__item.n2:before,
#ranking .__item.n3:before{
content: "1";
/* 数字を上下左右のまんなかに置く（vertical-alignはブロック要素では効かない） */
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #c0b283 0%, #c0b283 45%, #FEE9A0 70%, #c0b283 85%, #c0b283 90% 100%);
width: calc(var(--rank-w, calc(100vw / 3.5)) * 0.2);
height: calc(var(--rank-w, calc(100vw / 3.5)) * 0.2);
border-radius: 100%;
color: #000;
font-size: .7rem;
line-height: 1;
font-weight: bold;
position: absolute;
z-index: 3;
left: 0;
top: calc(var(--rank-w, calc(100vw / 3.5)) * 0.2 / 2 * -1)
}


#ranking .__item.n2:before{
content: "2";
background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
#ranking .__item.n3:before{
content: "3";
background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
}

.__item a{
display: block;
text-decoration: none;
color: #000;
width: 100%;
margin-bottom: 20px;
}

.__item.out{
background: #ccc;
}
.__item header{
margin-bottom: 10px;
}
.__item header h1{
width: 100%;
position: relative;
}

.__item header h1 img{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
text-align: center;
object-fit: cover;
}

.__item header h1:before{
content: "";
display: block;
padding-top: 100%;
}

.__item .body{
width: 100%;
padding: 0 12px;
}


.__item .price{
margin: 12px 0;
display: flex;
justify-content: space-between;
}

.__item.out img{
opacity: .5;
}
.__item.out .price{
color: #aaa;
font-weight: normal;
text-align: center;
}

.__item.out .cart{
display: none;
}

.__item .price em{
font-style: normal;
font-size: 80%;
}

/*
 * 会員価格（会員でログインしているときだけ出る）
 * 通常価格に取り消し線を引いて、会員価格を強く出す。トップページの商品カードと同じ見せ方
 */
.__item .price .num .was{
display: block;
color: #999;
font-weight: normal;
font-size: 78%;
text-decoration: line-through;
}

.__item .price .num .member{
display: block;
color: #c0392b;
}

.__item .price .num .tag{
display: block;
color: #c0392b;
font-weight: normal;
font-size: 62%;
}

.__item .cart{
font-size: .7rem;
padding: 8px;
text-align: center;
border-radius: 100px;
background: var(--btn-button-color);
color: #fff;
}

.__item .cart img{
width: 18px;
vertical-align: bottom;
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(105%) contrast(101%);
}







#categories{
padding: 10px;
}


#categories h2{
font-size: 1rem;
}


.category-list{
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 4px;
}


.category-list li a{
display: flex;
gap: 2px;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
font-size: 0.8125rem;
line-height: 17px;
font-weight: 400;

width: auto;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
height: 30px;
padding: 0px 6px;

background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
border: 1px solid rgb(224, 224, 224);

}

/*
================================================

商品検索結果の検索内容（#searchSummary）
条件は Search.Scroll.js が入れる

================================================
*/
#searchSummary{
margin: 10px;
padding: 16px;
border: 1px solid #e7e2da;
border-radius: 8px;
background: #fff;
color: #2b2620;
}

#searchSummary h2{
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
font-weight: normal;
}

#searchSummary h2 .en{
font-family: "Cormorant Garamond", serif;
font-size: 1.15rem;
letter-spacing: .12em;
color: var(--ancolor-key-color, #7c6d5f);
}

#searchSummary h2 .jan{
font-size: .75rem;
color: #8a8178;
}

#searchSummary .conditions{
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
min-height: 30px;
}

#searchSummary .conditions li{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: #f6f3ee;
font-size: .85rem;
line-height: 1.4;
}

#searchSummary .conditions .label{
font-size: .7rem;
color: #8a8178;
}

#searchSummary .conditions .value{
font-weight: bold;
word-break: break-all;
}

#searchSummary .foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
}

#searchSummary .result{
font-size: .85rem;
}

#searchSummary .result span{
margin-right: 2px;
font-size: 1.2rem;
font-weight: bold;
}

#searchSummary .again{
min-height: 36px;
padding: 6px 14px;
border: 1px solid var(--ancolor-key-color, #7c6d5f);
border-radius: 999px;
background: #fff;
color: var(--ancolor-key-color, #7c6d5f);
font: inherit;
font-size: .8rem;
cursor: pointer;
}

#searchSummary .again:hover{
background: var(--ancolor-key-color, #7c6d5f);
color: #fff;
}

/* 件数は検索内容の欄に出すので、並べ替えの横の「合計◯件」は隠す（並べ替えは右に寄せたまま） */
#searchSummary ~ #sort .result{
visibility: hidden;
}