/* ==============================
 * rank.html layout (float -> flex)
 * ============================== */

 .rankp{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* 先頭の説明文 <p> は横幅いっぱいに */
.rankp > p{
  flex-basis:100%;
  width:100%;
}

/* 旧 float 用 .fl はフレックスアイテムにする */
.rankp > .fl{
  float:none !important;  /* 旧CSSを確実に殺す */
  flex:1 1 260px;
  max-width:100%;
  margin:0;
  min-width:0;            /* はみ出し事故防止 */
}

/* rankの数字アイコン（背景画像）を安定表示 */
.rankp .rank-icon{
  display:block;          /* 中央寄せを安定させる */
  width:60px;
  height:60px;
  margin:0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.rankp .c{ text-align:center; }

/* 各rankアイコンに背景画像を設定（.fl の順番で） */
.rankp > .fl:nth-of-type(1) .rank-icon{ background-image:url(../../image/rank/1.gif); }
.rankp > .fl:nth-of-type(2) .rank-icon{ background-image:url(../../image/rank/2.gif); }
.rankp > .fl:nth-of-type(3) .rank-icon{ background-image:url(../../image/rank/3.gif); }
.rankp > .fl:nth-of-type(4) .rank-icon{ background-image:url(../../image/rank/4.gif); }
.rankp > .fl:nth-of-type(5) .rank-icon{ background-image:url(../../image/rank/5.gif); }


/* PC表示：2列で固定 */
@media (min-width:1000px){
  .rankp > .fl{
    flex:1 1 calc(50% - 6px);
    max-width:calc(50% - 6px);
  }
}

/* 変数が空で壊れているimgだけ消す（残骸対策） */
.rankp img[src="/image/rank/.gif"]{
  display:none !important;
}
/* ===== rank: 3人目以降が見切れる対策（高さ固定/overflow を解除） ===== */
.inner,
.rankp,
.rankp > .fl{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* girl-box（詳細/写真）が中で切られないように */
.rankp .fl,
.rankp .fl *{
  overflow: visible;
}
/* girl-box の親が潰れて中身が見えない対策 */
.rankp > .fl{
  display: block !important;
}
.rankp > .fl::after{
  content:"";
  display:block;
  clear:both;
}
/* ==============================
 * rank: girl-box の旧floatが原因で潰れるのを止める
 * ============================== */

/* rank内だけ fl/fr(float) を殺す（inc-girl-box由来対策） */
.rankp .fl,
.rankp .fr,
.rankp dl.girl-box.fl{
  float: none !important;
}

/* figure / dl が高さを持つように */
.rankp figure.girl-box-fg{
  display: block !important;
  margin: 0 !important;
}

.rankp dl.girl-box{
  display: block !important;
  width: 100% !important;
}

/* 念のためclearfix（浮動要素が残っても崩れない） */
.rankp dl.girl-box::after{
  content: "";
  display: block;
  clear: both;
}

/* 写真が見えるように（center & overflow解除） */
.rankp dl.girl-box dd.photo{
  width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
}

.rankp dl.girl-box dd.photo img{
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  height: auto !important;
}