@charset "UTF-8";
/* カートアイコン */

/* =========================
  ranking：購入ボタン中央寄せ
========================= */
#block_of_top_free4 .js-ranking-buy-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;

  width: 100% !important;
  max-width: 100% !important;

  margin-top: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: #bf292a !important;

  text-align: center !important;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;

  text-decoration: none !important;

  transform: translateX(-4px) !important;
}

.slick-arrow {
  z-index:1!important;
}
#footer_pagetop {
  z-index:999!important;
}

/* カートアイコン */
#block_of_top_free4 .js-ranking-buy-btn::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;

  background: url("../../img/usr/common/icon_cart_white.png") no-repeat center;
  background-size: contain;

  transform: translateY(-1px);
}


.block-ranking-lightningrecommend--goods{
  width: 100%!important;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.block-ranking-lightningrecommend--goods .block-ranking-r{
  max-width:1180px;
}

/* PC調整 */
@media (min-width: 1025px) and (max-width: 1350px){
  .block-ranking-lightningrecommend--goods .block-ranking-r{
    width: 90%;
    max-width: none;
    margin: 0 auto;
  }
}

/* Tablet：90%（中央） */
@media (min-width: 768px) and (max-width: 1024px){
  .block-ranking-lightningrecommend--goods .block-ranking-r{
    width: 85%;
    max-width: none;
    margin: 0 auto;
  }
}

/* SP：100% */
@media (max-width: 767px){
  .block-ranking-lightningrecommend--goods .block-ranking-r{
    max-width: none;
    margin: 0;
  }
}

#block_of_top_free4 .block-ranking-lightningrecommend{
  position: relative;
}


#block_of_top_free4 .block-ranking-lightningrecommend,
#block_of_top_free4 .block-ranking-lightningrecommend--goods,
#block_of_top_free4 .block-ranking-r,
#block_of_top_free4 .block-ranking-r--items{
  overflow: visible !important;
}

#block_of_top_free4 .slick-list{
  overflow: hidden !important;
}

#block_of_top_free4 .block-ranking-r--items{
  position:relative;
}

#block_of_top_free4 .slick-prev,
#block_of_top_free4 .slick-next{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;

  width:44px!important;
  height:44px!important;
  border:2px solid #bf292a!important;
  border-radius:999px!important;
  background:#fff!important;

  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:9999!important;

  padding:0!important;
  cursor:pointer!important;
  font-size:0!important;
  line-height:0!important;
}

#block_of_top_free4 .slick-prev{
  left:-56px!important;
}

#block_of_top_free4 .slick-next{
  right:-56px!important;
}

#block_of_top_free4 .slick-prev:before,
#block_of_top_free4 .slick-next:before{
  content:""!important;
}

#block_of_top_free4 .slick-prev::after,
#block_of_top_free4 .slick-next::after{
  content:""!important;
  width:12px!important;
  height:12px!important;
  border-right:3px solid #bf292a!important;
  border-bottom:3px solid #bf292a!important;
  display:block!important;
  margin:0 auto!important;
}

#block_of_top_free4 .slick-prev::after{
  transform:translateX(2px) rotate(135deg)!important;
}

#block_of_top_free4 .slick-next::after{
  transform:translateX(-2px) rotate(-45deg)!important;
}


/* hoverを発生させるために、disabledでもポインターを受ける */
#block_of_top_free4 .slick-prev.slick-disabled,
#block_of_top_free4 .slick-next.slick-disabled{
  pointer-events: auto !important;
}

/* hover反転（左右共通） */
#block_of_top_free4 .slick-prev:hover,
#block_of_top_free4 .slick-next:hover{
  background: #bf292a !important;
}

#block_of_top_free4 .slick-prev:hover::after,
#block_of_top_free4 .slick-next:hover::after{
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}







h2.block-ranking-lightningrecommend--header{
  display: flex;
  flex-direction: column-reverse;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif!important;
  font-size: 32px;
  line-height: 1.3;
  padding-bottom:20px;
  color:#333;

  margin-top:50px;
  padding-top:70px;
  background-image: url("../../img/usr/common/back_wave_l.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: clamp(240px, 24%, 260px) auto;

}

.block-ranking-lightningrecommend--header span{
  font-family: "Yu Gothic", "Yu Gothic Medium", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color:#333;
}

@media (max-width:767px){
  .block-ranking-lightningrecommend--header{
    font-size: 28px;
    padding-top:55px!important;
    background-image: url("../../img/usr/common/back_wave_l.png");
    background-size: clamp(150px, 34%, 360px) auto!important;
  }
}

/* =========================
  [ranking] 画像
========================= */

/* 親divだけを画像枠にする */
#block_of_top_free4 li.block-ranking-r--item > a > .block-ranking-r--goods-image{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 4px;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:8px;
  background:transparent;
  box-sizing:border-box;
}

/* figureには比率固定をかけない */
#block_of_top_free4 li.block-ranking-r--item > a > .block-ranking-r--goods-image > figure{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

/* 画像は自然比率で表示 */
#block_of_top_free4 li.block-ranking-r--item > a > .block-ranking-r--goods-image > figure > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  padding:0;
  border-radius:8px;
}
.block-ranking-r--item{
  padding:20px 10px;
}

/* 画像と説明の間 */
#block_of_top_free4
.block-ranking-r--item
.block-ranking-r--description{
  width:90%;
  margin:6px 14px;
  padding: 0 2px;
}

@media (max-width: 767px){
  #goods_list_auto_load_area
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description{
    width:95%;
    margin-top: 10px;
  }
}




#block_of_top_free4 .block-ranking-r--goods-name {
  font-size:16px;
  font-weight: 700;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  line-height: 1.4;
  color:#333;
  letter-spacing:0.02em;
  min-height: 3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

}

#block_of_top_free4 .block-ranking-r--price {
  text-align:right;
  font-size:16px;
  font-weight: 700;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
}
#block_of_top_free4 .block-ranking-r--price::after {
  font-size:13px;
}







/* =========================
  ranking：購入ボタン中央寄せ
========================= */
#block_of_top_free4 .js-ranking-buy-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: 90% !important;
  margin: 10px auto 0 !important;
  padding:12px 0;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: #bf292a !important;
  text-align: center !important;
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  transform: none !important;
}

/* カートアイコン */
#block_of_top_free4 .js-ranking-buy-btn::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;

  background: url("../../img/usr/common/icon_cart_white.png") no-repeat center;
  background-size: contain;

  transform: translateY(-1px);
}

@media (max-width: 767px){
  #block_of_top_free4 .js-ranking-buy-btn{
    width: 94% !important;
  }
}


/* ドット */
#block_of_top_free4 .slick-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: -40px;
}

#block_of_top_free4 .slick-dots li{
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
}

/* 通常ドット */
#block_of_top_free4 .slick-dots li button{
  width: 12px;               /* ★ ドットサイズ */
  height: 12px;
  padding: 0;
  border-radius: 50%;
  background: #cccccc;       /* デフォルト色 */
  border: none;
  text-indent: -9999px;      /* テキスト非表示 */
  cursor: pointer;
}

#block_of_top_free4 .slick-dots li.slick-active button{
  background: #bf292a;
}

/* hover / focus の余計な装飾を無効化 */
#block_of_top_free4 .slick-dots li button:hover,
#block_of_top_free4 .slick-dots li button:focus{
  outline: none;
}


@media (max-width: 767px){
  #block_of_top_free4 .slick-list{
    height:360px!important;
  }
  #block_of_top_free4 .block-ranking-r--item{
    height: 360px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  #block_of_top_free4 .block-ranking-r--item > a:first-child{
    flex:1 1 auto;
  }


  #block_of_top_free4 .slick-prev,
  #block_of_top_free4 .slick-next{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20 !important;
  }

  #block_of_top_free4 .slick-prev{
    left: 5px !important;
  }

  #block_of_top_free4 .slick-next{
    right: 5px !important;
  }

  #block_of_top_free4 {
    width:100%;
  }
  #block_of_top_free4 .slick-prev,
  #block_of_top_free4 .slick-next{
    top: calc(100% + 10px) !important;
    transform: none !important;
  }

  .emoreco-outer-head {
     padding-top:30px!important;
  }  

}

@media (max-width: 480px){
  #block_of_top_free4 .slick-list{
    height:350px!important;
  }
  #block_of_top_free4 .block-ranking-r--item{
    height: 350px !important;
  }
}







/* あなたへのおすすめ */
#koko {
  padding-top:70px;
  padding-bottom:50px;
}

h2.block-accessory-list--name{
  display: flex;
  flex-direction: column-reverse;
  font-family:
  "Zen Old Mincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",
   serif;
  font-size: 32px!important;
  line-height: 1.3;
  padding-top:0;
  padding-bottom:20px;
  color:#333;
  text-align:center;
}

h2.block-accessory-list--name span{
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  color:#333;
}


.block-goods-list-d--item-description{
  display:flex;
  flex-direction:column;
}

.block-goods-list-d--item-description .block-icon{
  order:-1;
}

.block-goods-list-d--goods-comment {
  display:none;
}

@media (max-width:767px){
  h2.block-accessory-list--name{
    font-size: 28px;
  }
}



/* あなたへのおすすめ （パネル） */
.block-accessory-list {
  background:none!important;
}

.block-goods-list-d {
  max-width:1180px!important;
  padding:0;
}

.block-goods-list-d--item-body{
  margin:20px 10px;
  background:#fff;
  border-radius:8px;
}


/* =========================
  おすすめ 画像
========================= */
.block-accessory-list--list {
  max-width:1180px;
  margin:10px auto 0;
}
.block-accessory-list--list .block-goods-list-d--image{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:3px 4px 0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:8px;
  background:transparent;
  box-sizing:border-box;
}

.block-accessory-list--list .block-goods-list-d--image > a > figure{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.block-accessory-list--list .block-goods-list-d--image > a > figure > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  padding:0;
  border-radius:8px;
}
.block-ranking-r--item{
  padding:20px 10px;
}



/* 画像と説明の間 */
.block-accessory-list--list .block-goods-list-d--item-description{
  width:90%;
  margin:6px auto 0;
  padding: 0 2px 15px;
}


/* カルーセル内　アイコンサイズ制御 */
.block-accessory-list--list .block-goods-list-d--item-description
.block-icon{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:2px;
}

.block-accessory-list--list .block-goods-list-d--item-description
.block-icon img {
  height:1.5vw!important;
  max-height:19px;
  aspect-ratio: 7 / 2;
  margin-bottom:2px;
}

.block-accessory-list--list
.block-icon
.block-icon--auto-on-sales img {
  /* セール (sale) */
  height:1.5vw!important;
  max-height:19px;
  margin-bottom:2px;
  aspect-ratio: 2 / 1!important;
}


/* 余白・ポジ調整 */ 
.block-accessory-list--list .block-goods-list-d--item-description{
    height:190px;
    display:flex;
    flex-direction:column;
}
.block-accessory-list--list .block-goods-list-d--item-details{
    margin-top:auto;
}












@media (min-width: 768px) and (max-width: 949px){
  .block-accessory-list--list .block-goods-list-d--item-description
  .block-icon img {
    height:2.3vw!important;
    max-height:22px;
  }

  .block-accessory-list--list
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:2.3vw!important;
    max-height:22px;
  }
}

@media (max-width: 767px){

  .block-accessory-list--list .block-goods-list-d--item-description
  .block-icon{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start!important;
    align-items:center;
    column-gap:2px!important;
    row-gap:1px!important;
  }

  /* span側の余白・伸びを潰す */
  .block-accessory-list--list .block-goods-list-d--item-description
  .block-icon > span{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }

  .block-accessory-list--list .block-goods-list-d--item-description
  .block-icon img {
    height:3vw!important;
    max-height:60px;
  }

  .block-accessory-list--list
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:3vw!important;
    max-height:60px;
  }
}

@media (max-width: 481px){
  .block-accessory-list--list .block-goods-list-d--item-description
  .block-icon img {
    height:5vw!important;
  }

  .block-accessory-list--list
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:5vw!important;
  }
}



@media (max-width: 767px){
  .block-accessory-list--list .block-goods-list-d--item-description{
    width:95%;
    margin-top: 10px;
  }

  .block-customer__bg {
    height:1100px;
  }
}



.block-accessory-list--list .block-goods-list-d--goods-name {
  font-size:16px;
  font-weight: 700;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  line-height: 1.4;
  color:#333;
  letter-spacing:0.02em;
  min-height: 3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block-accessory-list--list .block-goods-list-d--goods-name a {
  color:#333;
}

.block-accessory-list--list .block-goods-list-d--price-title {
  display:none;
}



.block-accessory-list--list .block-goods-list-d--price {
  text-align:right;
  font-size:16px;
  font-weight: 700;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
}
.block-accessory-list--list .block-goods-list-d--price::after {
  font-size:13px;
}




/* =========================
  goods：カートボタン中央寄せ（最終確実版）※中央が崩れない土台
========================= */
.block-accessory-list--list .block-list-add-cart-btn{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin:10px 0 0;
  box-sizing: border-box !important;
}

/* =========================
  goods：カートボタン a（整理＋アイコン追加・確定版）
========================= */
.block-accessory-list--list a.block-list-add-cart-btn {
  display: inline-flex !important; 
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;

  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: #bf292a !important;
  text-align: center !important;
  font-size:14px;
  font-weight:700;
  color: #fff !important;

}

/* カートアイコン（左） */
.block-accessory-list--list a.block-list-add-cart-btn::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;

  background: url("../../img/usr/common/icon_cart_white.png") no-repeat center;
  background-size: contain;
  transform: translateY(-1px); /* ← 少し上へ */
}




.block-accessory-list--list .slick-prev,
.block-accessory-list--list .slick-next{
  width: 44px;
  height: 44px;
  border: 0;
  border: 2px solid #bf292a;   /* ★ 白抜き外枠 */
  border-radius: 999px;
  background: #fff;           /* ★ 白背景 */

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  padding: 0;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.block-accessory-list--list .slick-prev{ left: -10px; }
.block-accessory-list--list .slick-next{ right: -10px; }

@media (max-width: 767px){
  .block-accessory-list--list .slick-prev{ left: -6px; }
  .block-accessory-list--list .slick-next{ right: -6px; }
}

/* 矢印アイコン（CSS） */
.block-accessory-list--list .slick-prev:before,
.block-accessory-list--list .slick-next:before{
  content: "";
}

.block-accessory-list--list .slick-prev::after,
.block-accessory-list--list .slick-next::after{
  content: "";
  width: 12px;
  height: 12px;
  border-right: 3px solid #bf292a;
  border-bottom: 3px solid #bf292a;
  display: block;
  margin: 0 auto;
}


.block-accessory-list--list .slick-prev{
  left:-56px!important;
}

.block-accessory-list--list .slick-next{
  right:-56px!important;
}

/* ★ 矢印位置の微調整（Xだけ動かす：縦位置はズレない） */
.block-accessory-list--list .slick-prev::after{
  transform: translateX(2px) rotate(135deg);   /* ← 左矢印を少し右へ */
}

.block-accessory-list--list .slick-next::after{
  transform: translateX(-2px) rotate(-45deg);  /* → 右矢印を少し左へ */
}



/* hoverを発生させるために、disabledでもポインターを受ける */
.block-accessory-list--list .slick-prev.slick-disabled,
.block-accessory-list--list .slick-next.slick-disabled{
  pointer-events: auto !important;
}

/* hover反転（左右共通） */
.block-accessory-list--list .slick-prev:hover,
.block-accessory-list--list .slick-next:hover{
  background: #bf292a !important;
}

.block-accessory-list--list .slick-prev:hover::after,
.block-accessory-list--list .slick-next:hover::after{
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}



/* ドット */
#koko .slick-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: -40px;
}

#koko .slick-dots li{
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
}

/* 通常ドット */
#koko .slick-dots li button{
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  background: #cccccc;
  border: none;
  text-indent: -9999px;
  cursor: pointer;
}

#koko .slick-dots li.slick-active button{
  background: #bf292a;
}

/* hover / focus の余計な装飾を無効化 */
#koko .slick-dots li button:hover,
#koko .slick-dots li button:focus{
  outline: none;
}

@media (max-width: 767px){

  #koko {
    padding-top:70px;
    padding-bottom:40px;
  }

  #koko .slick-prev,
  #koko .slick-next{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20 !important;
  }

  #koko .slick-prev{
    left: 5px !important;
  }

  #koko .slick-next{
    right: 5px !important;
  }

  #koko .slick-prev,
  #koko .slick-next{
    top: calc(100% + 10px) !important;
    transform: none !important;
  }

}