@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* カスタム CSS をここに入力してください */
.tagcloud span {
    color: #ffffff;
}

/* SWELL用ヘッダー背景 */
.l-header {
  background-image: url('https://ero-pico.net/wp-content/uploads/2023/10/eropicobanner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 250px;
}
@media screen and (max-width: 768px) {
  .l-header {
    height: 160px;
    background-size: contain;
  }
}




/* ランキングボックス全体 */
.ranking-item.section-ranking {
  margin-top: 2em;
}

/* タイトル行（王冠＋タイトル） */
.ranking-title-full {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 15px;
}
.ranking-title-full i {
  margin-right: .1em;
}

/* 本体部分：左画像＋右説明を横並び */
.ranking-item-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* 左カラム：パッケージ画像 */
.ranking-item-image-tag {
  flex: 0 0 260px;      /* ここを変えれば横幅調整できる */
}
.ranking-item-image-tag img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右カラム：ボタン＋説明 */
.ranking-item-description {
  flex: 1;
}

/* 上部ボタン */
.ranking-item-cta-top {
  margin-bottom: 10px;
}
.ranking-item-cta-top .btn,
.ranking-item-cta-top a.btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* 注目ポイント部分 */
.ranking-item-detail-list h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

/* 下部の赤い FANZA ボタン風リンク */
.ranking-item-cta-bottom {
  margin-top: 15px;
  text-align: center;
}
.ranking-item-cta-bottom a {
  display: block;
  padding: 10px;
  background: #e53935;   /* 赤 */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.ranking-item-cta-bottom a:hover {
  opacity: .9;
}


.review-stars {
  margin-bottom: 10px;
}
.review-stars .star {
  display: inline-block;
  margin-right: 2px;
  color: #ffcc00;       /* お好みで */
  font-size: 1.2em;
}

/* 作品情報ブロックの全体 */
.section-work-info {
  margin: 2em 0;
  padding: 1.5em 2em;
}

/* ラベル行 */
.section-work-info p {
  margin: 0.3em 0;
}

/* カテゴリ／タグのアイコンとラベル */
.section-work-info i {
  margin-right: .3em;
}

/* カテゴリ・タグのリンクバッジ共通 */
.section-work-info .cat-link,
.section-work-info .tag-link {
  display: inline-block;
  margin: 0 .3em .3em 0;
  padding: 0.2em 0.6em;
  border-radius: 3px;
  background: #2c2c2c;
  color: #fff;
  font-size: 0.85em;
  text-decoration: none;
  line-height: 1.6;
}

/* ホバー時 */
.section-work-info .cat-link:hover,
.section-work-info .tag-link:hover {
  background: #f39800; /* お好みで */
  color: #fff;
}

/*  */
.widget.icon-fire .widget-title::before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  background:url(https://ero-pico.net/wp-content/uploads/2026/01/eropicochara02_04_tanoshimi.png) no-repeat center/contain;
  margin-right:6px;
  vertical-align:middle;
  width:50px;
  height:50px;
  margin-right:10px;
}
.widget.icon-fire .widget-title{
  display:flex;
  align-items:center;
}
.widget.icon-fire .widget-title::before{
  flex-shrink:0;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}