/* バナーホバー商品表示 */

.ap-dropdown-area{
  display:none;
  position:absolute;
  background:#fff;
  border:2px solid #BC9558;
  border-radius:0 0 6px 6px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  padding:12px;
  z-index:10000;
  box-sizing:border-box;
  width:740px;
}
.ap-dropdown-area.ap-open{display:block}
.ap-dropdown-area .ap-loading-sm{text-align:center;padding:12px 0;color:#888;font-size:12px}

/* ホバー中のバナー強調 */
[data-type-cd].ap-active > a{opacity:.7}

/* 商品グリッド 4列 */
.ap-grid{display:flex;flex-wrap:nowrap;gap:10px;padding:0;margin:0;list-style:none;counter-reset:rank}
.ap-grid > li{box-sizing:border-box;width:calc(25% - 8px);flex:none;min-width:0;position:relative}
.ap-grid > li a{display:block;text-decoration:none;color:#333;border:1px solid #eee;border-radius:4px;overflow:hidden;background:#fff;height:100%}
.ap-grid > li a:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* ランキング番号 */
.ap-grid > li::before{
  counter-increment:rank;
  content:counter(rank);
  position:absolute;top:0;left:0;z-index:10;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:bold;color:#fff;
  background:#BC9558;border-radius:4px 0 4px 0;
}
.ap-grid > li:nth-child(1)::before{background:#c9a84c}
.ap-grid > li:nth-child(2)::before{background:#8a8a8a}
.ap-grid > li:nth-child(3)::before{background:#a0714e}

.ap-grid .ap-img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block}
.ap-grid .ap-info{padding:6px 8px}
.ap-grid .ap-name{font-size:11px;font-weight:bold;line-height:1.3;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-grid .ap-label{font-size:10px;color:#555}
.ap-grid .ap-lot{font-size:10px;color:#888}
.ap-grid .ap-tanka{font-size:12px;color:#c00;font-weight:bold}
.ap-grid .ap-tanka-unit{font-size:9px;color:#666;font-weight:normal}

@media screen and (max-width:768px){
  .ap-dropdown-area{width:calc(100vw - 20px);left:10px!important}
  .ap-grid{flex-wrap:wrap}
  .ap-grid > li{flex:none;width:calc(50% - 5px)}
}