@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;
}




/* ========================================================================
 * ero-pico レビュー記事デザイン v2
 *   ・☆評価ボックス (共通)
 *   ・H2/H3 装飾 + strong ハイライト (.epico-review-v2 限定)
 *   ・既存記事には影響せず、新記事のみに適用
 * ======================================================================== */

/* -------- ☆評価ボックス (共通・クラス使用時のみ) -------- */
.epico-review-v2 .rating-box,
.rating-box {
  background: #1a1018;
  border: 1px solid #3a2030;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 20px;
  box-shadow: inset 0 0 20px rgba(208, 0, 126, 0.1);
}
.star-rating {
  display: inline-block;
  position: relative;
  color: #3a2030;
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1;
  vertical-align: middle;
}
.star-rating .star-rating-bg { color: #3a2030; }
.star-rating .star-rating-fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.star-rating-value {
  font-size: 15px;
  color: #e8dce0;
  margin-left: 8px;
  vertical-align: middle;
}
.star-rating-value strong {
  color: #ffd700;
  font-size: 1.15em;
}

/* -------- H2: ぴこたんアイコン付き (.epico-review-v2 内限定) -------- */
.epico-review-v2 h2 {
  position: relative;
  padding: 14px 16px 14px 70px;
  min-height: 60px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(232,117,159,.12) 0%, rgba(26,16,24,.6) 100%);
  border: 1px solid #3a2030;
  border-left: 4px solid #e8759f;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(232,117,159,.2);
  font-size: 1.25em;
  margin: 32px 0 20px;
  color: #e8dce0;
}
.epico-review-v2 h2::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: url('https://ero-pico.net/wp-content/uploads/2021/06/eropicochara02_05_-△2-.png') center/contain no-repeat;
  border-radius: 50%;
  border: 2px solid #e8759f;
  box-shadow: 0 0 8px rgba(232,117,159,.5);
}

/* -------- H3: 左カラーバー + ハートアイコン -------- */
.epico-review-v2 h3 {
  position: relative;
  padding: 8px 14px 8px 36px;
  margin: 24px 0 12px;
  background: linear-gradient(90deg, rgba(232,117,159,.15) 0%, transparent 100%);
  border-left: 3px solid #e8759f;
  border-radius: 0 6px 6px 0;
  color: #e8759f;
  font-size: 1.1em;
}
.epico-review-v2 h3::before {
  content: "♥";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #e8759f;
  font-size: .9em;
  text-shadow: 0 0 6px rgba(232,117,159,.5);
}

/* -------- strong ハイライト: 蛍光マーカー風 (黄色下地) -------- */
.epico-review-v2 h3 ~ p strong,
.epico-review-v2 h3 ~ p b,
.epico-review-v2 h3 ~ ul strong,
.epico-review-v2 h3 ~ ul b,
.epico-review-v2 .speech-balloon strong,
.epico-review-v2 .speech-balloon b {
  color: inherit;
  background: linear-gradient(transparent 55%, rgba(255, 214, 79, 0.55) 55%);
  padding: 0 2px;
  font-weight: bold;
}

/* -------- レビュー本文 p, ul のダーク地色調整 -------- */
.epico-review-v2 > p,
.epico-review-v2 > ul,
.epico-review-v2 > ol {
  color: #e8dce0;
}

/* -------- 作品情報ボックス (work-info-box) -------- */
.epico-review-v2 .work-info-box {
  background: #1a1018;
  border: 1px solid #3a2030;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 24px;
  box-shadow: inset 0 0 20px rgba(208, 0, 126, 0.08);
  color: #e8dce0;
}
.epico-review-v2 .work-info-box p {
  margin: 0 0 10px;
  line-height: 1.8;
}
.epico-review-v2 .work-info-box p:last-child {
  margin-bottom: 0;
}
.epico-review-v2 .work-info-box p strong {
  color: #e8759f;
  margin-right: 6px;
  display: inline-block;
  min-width: 4em;
}

/* 汎用的に使えるダークボックス (他セクションにも転用可) */
.epico-review-v2 .epico-dark-box {
  background: #1a1018;
  border: 1px solid #3a2030;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 24px;
  color: #e8dce0;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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