?/* ========== ボタン共通スタイル ========== */
/* ランキングボックス全体 */
/* ボタン共通スタイル（全ボタンに統一） */
.ranking-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  font-weight: bold;
  padding: 10px;
}

.ranking-box .ranking-item-link a.btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

/* ボタン色 */
.btn-orange {
  background-color: #f90;
}
.btn-orange:hover {
  background-color: #e68000;
}

.btn-blue {
  background-color: #1e90ff;
}
.btn-blue:hover {
  background-color: #0077cc;
}

.btn-red {
  background-color: #d22;
}
.btn-red:hover {
  background-color: #b00;
}



/* ========== ランキングレイアウト ========== */
.section-ranking .ranking-item {
  background-color: #1e1e1e;
  border: 2px solid #444;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  color: #f1f1f1;
}

.section-ranking .ranking-title-full {
  font-size: 1.3em;
  color: #fff;
  background-color: #2a2a2a;
  padding: 12px 20px 12px 60px;
  margin: -20px -20px 20px -20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 15px center;
}

.section-ranking .rank-1 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown1.png');
  border: 2px solid gold;
}
.section-ranking .rank-2 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown2.png');
  border: 2px solid silver;
}
.section-ranking .rank-3 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown3.png');
  border: 2px solid #cd7f32;
}
.section-ranking .rank-4 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown4.png');
  border: 2px solid #f66;
}
.section-ranking .rank-5 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown5.png');
  border: 2px solid #f6c;
}
.section-ranking .rank-6 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown6.png');
  border: 2px solid #ffb347; /* オレンジ系 */
}
.section-ranking .rank-7 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown7.png');
  border: 2px solid #87cefa; /* 空色系 */
}
.section-ranking .rank-8 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown8.png');
  border: 2px solid #dda0dd; /* ラベンダー系 */
}
.section-ranking .rank-9 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown9.png');
  border: 2px solid #ffd700; /* 金色系 */
}
.section-ranking .rank-10 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown10.png');
  border: 2px solid #ccc; /* グレー系 */
}


.section-ranking .ranking-title-full::before {
  margin-right: 8px;
  font-size: 1.2em;
}

.section-ranking .ranking-item-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section-ranking .ranking-item-image-tag {
  flex: 0 0 200px;
  max-width: 200px;
}

.section-ranking .ranking-item-description {
  flex: 1 1 0;
  background-color: #3a3a3a;
  padding: 15px 20px;
  border-radius: 6px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .section-ranking .ranking-item-content {
    flex-direction: column;
  }
}

/* ================== 記事モードのランキングボックス ================== */
.article-ranking-box {
  background-color: #333;
  padding: 15px;
  border-radius: 8px;
  color: #fff;
  max-width: 600px;
  margin: 20px auto;
}

.article-ranking-box h3 {
  background-color: #555;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
}

.article-ranking-box img {
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  margin-top: 10px;
}

.article-ranking-box p {
  margin-top: 10px;
  line-height: 1.8;
  color: #eee;
}

.article-ranking-box a.btn {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
  margin-top: 10px;
  text-decoration: none;
}

.article-ranking-box .btn-orange {
  background-color: #f90;
  color: #fff;
}
.article-ranking-box .btn-orange:hover {
  background-color: #e68000;
}
.article-ranking-box.rank-6 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown6.png');
}
.article-ranking-box.rank-7 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown7.png');
}
.article-ranking-box.rank-8 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown8.png');
}
.article-ranking-box.rank-9 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown9.png');
}
.article-ranking-box.rank-10 .ranking-title-full {
  background-image: url('https://pioncoo.net/wp-content/uploads/2025/06/crown10.png');
}
@media (max-width: 768px) {
  .section-ranking .ranking-item-content {
    flex-direction: row; /* ← column → row に修正 */
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }

  .section-ranking .ranking-item-image-tag {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .section-ranking .ranking-item-description {
    flex: 0 0 58%;
    max-width: 58%;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  .section-ranking .ranking-item-link a.btn {
    font-size: 14px;
    padding: 10px;
    width: 100%;
  }
}
/* モバイル対応 */
@media (max-width: 768px) {
  .section-ranking .ranking-item {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1rem; /* ← スマホ時に左右に余白をつける */
    margin-bottom: 10px; /* ← ★追加：下に余白をつける */
  }

  .section-ranking .ranking-item-content {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 30px; /* 各ランキング項目の下に余白をつけるとさらに見やすい */
  }

  .section-ranking .ranking-title-full {
    width: 100%; /* タイトルバーも横幅いっぱい */
    font-size: 1.2rem;
    text-align: left;
    padding: 12px 20px 12px 60px;
    box-sizing: border-box;
  }

  .section-ranking .ranking-item-image-tag {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .section-ranking .ranking-item-description {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    padding: 15px;    line-height: 1.8;

    box-sizing: border-box;
  }

  .section-ranking .ranking-item-link a.btn {
    width: 100%;
    font-size: 14px;
    padding: 10px;
  }
}
@media (max-width: 768px) {
  body.single .section-ranking,
  body.single .section-ranking .ranking-item,
  body.single .section-ranking .ranking-item-content {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}
.widget-image-badge {
  position: relative;
  display: inline-block;
}

.widget-image-badge::after {
  content: "NEW 12/6更新"; /* 表示したいテキスト */
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 10;
  font-weight: bold;
}

.widget-image-badge img {
  display: block;
  margin: 0 auto;
}