.heart-icon {
    width: 24px;
    height: 24px;
    color: #888;
    transition: all 0.2s ease;
  }
  
  .fanza-fav-btn:hover .heart-icon {
    color: red;
  }
  
  .fanza-fav-btn.liked .heart-icon {
    fill: red;
    stroke: red;
    color: red;
  }

  .fanza-fav-btn .feather-heart {
    transition: all 0.2s ease;
  }
  .fanza-fav-btn:hover .feather-heart {
    stroke: red;
  }

  button.fanza-img-fav-btn {
    margin-top: 0;
    margin-bottom: 1em;
    padding: .5em 1.5em .5em .5em;
    background: #2b2b2b;
    border-radius: 0px 0px 5px 5px;
    color: white;
    font-size: 13px;
}
img.sample_img {
  padding: 5px;
  margin-top: 1em;
  background: #2b2b2b;
  display: block;
  position: relative;
}
button.fanza-fav-btn {
  background: #e9e9e9;
  padding: .5em 1.5em;
  border-radius: 5px;
  border: 1px solid #b3b3b3;
}
/* サンプル動画 */
.sample_movie {
  max-width: 960px;
  margin: auto;
}
/* 情報テーブル */
.fanza_info {
  width: 100%;
  max-width: 800px;
  margin: 2em auto;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.fanza_info th,
.fanza_info td {
  padding: 1em;
  border-bottom: 1px solid #eee;
}

.fanza_info th {
  width: 25%;
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  color: #333;
}

.fanza_info td {
  color: #555;
}

.fanza_info tr:last-child td,
.fanza_info tr:last-child th {
  border-bottom: none;
}

.fanza_info a {
  color: #0073aa;
  text-decoration: none;
}

.fanza_info a:hover {
  text-decoration: underline;
}
/* 非アフィリエイトリンク */
.not_affi_link {
  padding: 1em;
  background: #ffecec;
  border: 1px solid #ff8f8f;
  margin: 2em auto;
}
/* お気に入り動画リスト */
div#fanza-fav-list ul li {
    list-style: none;
    width: 31%;
    padding: 5px;
    margin-bottom: 20px;
}
.fanza-img-fav-item {
    width: 31%;
    margin: 5px;
    margin-bottom: 20px;
}
ul.fanza_fav_list,div#fanza-fav-img-list {
    padding: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
div#fanza-fav-list ul li a {
    display: block;
    height: 100%;
}
.fanza_fav_title {
    font-size: 16px;
    padding: 5px;
}
.fanza_fav_item img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: auto;
}
.fanza-img-fav-item img {
  width: 100%;
  max-width: 100% !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
}
/* ラストPR */
.last_pr {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.last_pr p {
  font-size: 19px;
  font-weight: bold;
  margin-bottom: .6em!important;
}

/* 関連動画リスト形式 */
.fanza-related-widget{
  container-type: inline-size;
}
.fanza-press ul.fanza-related-widget {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
ul.fanza-related-widget a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  line-height: 1.1em;
}
ul.fanza-related-widget.layout-list a{
  display: flex;
  width: 100%;
}
li.fanza-related-item.layout-list{
  width: 100%;
}
.fanza-related-item img{
  height: auto;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
p.meta {
  text-align: right;
  font-size: 12px;
  font-weight: normal;
}
/* 1) メタ全体をフレックスに */
.fanza-related-item .meta{
  display:flex;
  gap:8px;                 /* アイコン-数字ブロック同士の間隔 */
  align-items:center;      /* ← ここがポイント（縦中央揃え） */
  font-size:.75rem;
  margin:0 4px 6px;
  color:#666;
}
/* テキストのみの場合 */
ul.fanza-related-widget.layout-text {
  display: block;
}
ul.layout-text .fp_post_meta {
  font-size: 16px;
}
ul.layout-text.has-num .fp_post_meta{
  padding: 0 0 0 2em;
}
/* 2) 各アイコン-数字のまとまりもインラインフレックスで中央揃え */
.fanza-related-item .meta .fav,
.fanza-related-item .meta .pv{
  display:inline-flex;     /* ← インライン要素扱いにしつつ… */
  align-items:center;      /* ← 縦中央揃えを保証 */
  gap:3px;                 /* アイコンと数字のすき間 */
}

/* 3) SVG は行高さに合わせて自動縮小 */
.fanza-related-item .meta svg{
  width:1em;               /* 文字サイズと連動させるとズレにくい */
  height:1em;
  flex:0 0 auto;           /* 幅固定で潰れないように */
}

.fp_post_meta {
  padding: 5px;
  font-size: 13px;
}
.fp_post_meta p{
  margin-bottom: 5px!important;
}
.fanza-related-widget.layout-list .fanza-related-item {
    display: flex;
    align-items: flex-start; 
    gap: 10px;
    margin-bottom: 15px;
  }
  li.fanza-related-item,.fanza-img-ranking-widget li{
    padding: 5px;
    transition: all ease 0.5s;
  }
  li.fanza-related-item:hover,.fanza-img-ranking-widget li:hover{
    background-color: #e8e8e8;
    opacity: 0.8;
  }
  .fanza-related-widget.layout-list .fanza-related-item img {
    width: 200px; 

  }
  
  .fanza-related-widget.layout-list .fanza-related-item .title {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    flex: 1; /* 残りの幅を使う */
  }
/* カード形式 */
.fanza-related-widget.layout-card li {
    width: 31%;
}
  .fanza-sample-box iframe {
    display: block;
    margin: 0;
    padding: 0;
}

.fanza-fav-wrap {
    margin: 0;
    padding: 0;
}

.fanza-sample-box {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* .sample_movie{
  max-height: 480px;
} */

.sample_movie body>div {
  height: 100%!important;
}
/* 必要に応じて style.css へ追加 */
.microCopy.mc_center { text-align:center; line-height:1.4; }
.movie_affi_button__link { display:inline-block; padding:.8em 1.5em; }

/* お気に入り画像ランキング */
.widget_fanza_img_ranking_widget{
  container-type: inline-size;
}
ul.fanza-img-ranking-widget img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top;
}
ul.fanza-img-ranking-widget li {
  width: 30%;
  position: relative;
  margin: 2%;
}
ul.fanza-img-ranking-widget {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 0!important;
}

/* メタ表示＆ランキングのハートを共通で整列 */
.fav-count,
.fanza-related-item .meta .fav,
.fanza-related-item .meta .pv{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.75rem;
}
span.cnt{
  color: #666;
}
.fav-count svg,
.fanza-related-item .meta svg{
  width:1em;
  height:1em;
  flex:0 0 auto;
}

/* ランキングウィジェット内 fav-count を角丸バッジに */
ul.fanza-img-ranking-widget .fav-count{
  padding-left: 8px;
}



/* ====== ① has-num が付いた時だけカウンタセット ====== */
.fanza-img-ranking-widget.has-num,
.fanza-related-widget.has-num {
  counter-reset: rank;
}

/* ② li を相対配置 & カウンタ進行 */
.fanza-img-ranking-widget.has-num > li,
.fanza-related-widget.has-num > li {
  counter-increment: rank;
}

/* ③ バッジ表示 */
.fanza-img-ranking-widget.has-num > li::before,
.fanza-related-widget.has-num > li::before {
  content: counter(rank);
  position: absolute;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  background: #2e2e2e;
  color: #fff;
  font-size: 13px;
}
/* 1位：ゴールド */
.fanza-img-ranking-widget.has-num > li:nth-child(1)::before,
.fanza-related-widget.has-num > li:nth-child(1)::before{
  background: linear-gradient(135deg,#f8e898 0%,#d4af37 45%,#b48924 100%);
}

/* 2位：シルバー */
.fanza-img-ranking-widget.has-num > li:nth-child(2)::before,
.fanza-related-widget.has-num > li:nth-child(2)::before{
  background: linear-gradient(135deg,#ffffff 0%,#c0c0c0 45%,#8a8a8a 100%);
}

/* 3位：ブロンズ */
.fanza-img-ranking-widget.has-num > li:nth-child(3)::before,
.fanza-related-widget.has-num > li:nth-child(3)::before{
  background: linear-gradient(135deg,#ffe3c4 0%,#cd7f32 45%,#8b4f1d 100%);
}
@media screen and (max-width: 699px) {
    div#fanza-fav-list ul li,.fanza-img-fav-item,
    .fanza-related-widget.layout-card a  {
        width: 47%;
    }
    .fanza_fav_title {
        font-size: 13px;
    }
    ul.fanza_fav_list{
        padding-left: 0!important;
    }
    ul.fanza-img-ranking-widget li {
      width: 47%;
    }
    .fanza-related-widget.layout-card p.title,
    .fanza-related-widget.layout-list .fanza-related-item .title{
      font-size: 13px;
    }
    .fanza-related-widget.layout-list .fanza-related-item img{
      width: 150px;
    }
}


.fanza-sortable {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fanza-sortable .fanza-item {
  padding: 8px;
  margin: 5px 0;
  background: #f5f5f5;
  border: 1px solid #ddd;
  cursor: move;
}
@container (max-width: 500px){
  .fanza-related-widget.layout-list .fanza-related-item img{
    width: 120px;
  }
  .fanza-related-widget.layout-card p.title,
    .fanza-related-widget.layout-list .fanza-related-item .title{
      font-size: 15px;
    }
    .fanza-related-widget.layout-card li{
      width: 100%;
    }
    .widget_fanza_img_ranking_widget ul.fanza-img-ranking-widget li{
      width: 100%;
    }
} 

/* =============================================
   関連ウィジェット ─ 横長リスト崩れ対策
============================================= */
.fanza-related-widget.layout-list{
  display:flex;
  flex-direction:column;
  gap:15px;
  padding-left: 0;
}
.fanza-related-widget.layout-list a{display:flex;width:100%;align-items:flex-start;gap:10px}
.fanza-related-widget.layout-list img{
  flex:0 0 200px;                     /* ← 基本は 200px 固定幅 */
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}
.fanza-related-widget.layout-list .title{
  flex:1;
  font-size:18px;
  line-height:1.4;
  margin:0;
}

/* =============================================
   グリッド（カード）調整
============================================= */
.fanza-related-widget.layout-card li{width:31%}
.fanza-related-widget.layout-card li:hover{background:#e8e8e8;opacity:.8}

/* =============================================
   レスポンシブ
============================================= */
@media (max-width:699px){
  /* 横長リストの画像を少し小さく */
  .fanza-related-widget.layout-list img{flex:0 0 150px}

  /* カード 2 列 / ランキング 2 列 */
  .fanza-related-widget.layout-card li,
  .widget_fanza_img_ranking_widget ul.fanza-img-ranking-widget li{width:47%}
  .fanza-related-widget.layout-card .title,
  .fanza-related-widget.layout-list .title{font-size:13px}
}

/* Container Query が使える環境ならさらに調整 */
@container (max-width:500px){
  .fanza-related-widget.layout-list img{flex:0 0 120px}
  .fanza-related-widget.layout-card li,
  .widget_fanza_img_ranking_widget ul.fanza-img-ranking-widget li{width:100%}
  .fanza-related-widget.layout-card .title,
  .fanza-related-widget.layout-list .title{font-size:15px}
}