@charset "UTF-8";

/*!
Theme Name: EN Cocoon (Eroterest)
Description: Cocoon子テーマ。エロタレスト用CPT/メタ/広告配信/連動パーツ/ピックアップを内包（旧en-eroterest A/B/Cの後継）。デザイン基盤はCocoon（スキンで差別化）。
Theme URI: https://wp-cocoon.com/
Author: EN MEDIA
Template:   cocoon-master
Version:    1.0.0
*/

/* =====================================================================
 * EN Cocoon 子テーマ：本文へ注入した独自マークアップ(eroterest/fanza)＋年齢確認の
 * Cocoon向けスタイル。Cocoonのデザイン基盤を壊さないよう、独自クラスにのみ適用する。
 * （旧 en-eroterest の layout/components CSS は読み込まず、ここに集約）
 * ===================================================================== */

:root {
  --en-accent: #e0245e;
  --en-accent-2: #c01e50;
  --en-ink: #1f2328;
  --en-muted: #6b7280;
  --en-line: #e5e7eb;
  --en-bg-soft: #f7f7f9;
  --en-radius: 12px;
}

/* Cocoon単一記事の既定アイキャッチは出さない（自前注入サムネと二重になるため） */
.single-eroterest .eye-catch-wrap,
.single-fanza .eye-catch-wrap { display: none !important; }

/* 注入ブロック共通の余白 */
.entry-content .enmedia-ero,
.entry-content .enmedia-fanza { margin: 0; }
.entry-content .enmedia-ero > * + *,
.entry-content .enmedia-fanza > * + * { margin-top: 16px; }

/* ---- メタ行 / PRバッジ ---- */
.enmedia-ero .metaline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--en-muted); font-size: 13px; }
.enmedia-ero .pr-badge { display: inline-block; padding: 1px 6px; border: 1px solid var(--en-line); border-radius: 4px; font-size: 11px; color: var(--en-muted); }
.enmedia-ero .ero-site { font-weight: 500; color: var(--en-ink); }
.enmedia-ero .dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd0d6; }

/* ---- 再生ボタン ---- */
.enmedia-ero .ero-play { text-align: center; }
.enmedia-ero .ero-play-btn,
.entry-content .btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 20px;
  background: linear-gradient(180deg, var(--en-accent), var(--en-accent-2));
  color: #fff !important; font-weight: 700; font-size: 16px; text-decoration: none;
  border-radius: 999px; box-shadow: 0 6px 16px rgba(224,36,94,.28); transition: filter .15s, transform .05s;
}
.enmedia-ero .ero-play-btn:hover,
.entry-content .btn-cta:hover { filter: brightness(1.05); }
.enmedia-ero .ero-play-btn:active,
.entry-content .btn-cta:active { transform: translateY(1px); }
.entry-content .btn-cta .icon.fill,
.enmedia-ero .ero-play-btn .icon.fill { width: 20px; height: 20px; fill: #fff; }

/* ---- サムネ（動画リンク） ---- */
.enmedia-ero .ero-thumb { border-radius: var(--en-radius); overflow: hidden; background: #000; }
.enmedia-ero .ero-thumb a { display: block; }
.enmedia-ero .ero-thumb img { width: 100%; height: auto; display: block; object-fit: cover; }

/* ---- 連動広告/ブログパーツ枠 ---- */
.entry-content .ero-part:empty { display: none; }
.ero-part-header:empty { display: none; }
.ero-part-header { margin: 0 0 8px; }
.entry-content .ero-dummy { padding: 12px 14px; background: var(--en-bg-soft); border: 1px dashed #cbd0d6; border-radius: 8px; color: var(--en-muted); font-size: 13px; text-align: center; }
.entry-content .ero-pk-slot:empty { display: none; }
.entry-content .ero-pk-block { margin: 16px 0; }
.entry-content .ero-pk-block .sample-movie { margin-top: 0; }

/* ---- FANZA商品グリッド（おすすめ作品 / 人気おすすめ作品）: PC3列 / SP2列 ---- */
.entry-content .ero-fz-block { margin: 14px 0; }
.entry-content .ero-fz-head { font-size: 13px; color: var(--en-muted); margin: 0 0 8px; font-weight: 500; }
.entry-content .ero-fz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.entry-content .ero-fz-item { display: block; text-decoration: none; color: var(--en-ink); }
.entry-content .ero-fz-item img { width: 100%; height: auto; aspect-ratio: 16/11; object-fit: cover; border-radius: 6px; display: block; background: var(--en-bg-soft); }
.entry-content .ero-fz-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; margin-top: 5px; }
.entry-content .ero-fz-item:hover .ero-fz-title { color: var(--en-accent); }

/* ---- 記事内広告（ads.json配布）: 横長=全幅1列 / 正方形300x250=PCのみ2列横並び・SP1列 ---- */
.entry-content .ad-slot { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: center; margin: 22px 0; }
.entry-content .ad-slot:empty { display: none; }
.entry-content .ad-slot--sidebar { flex-direction: column; margin: 0; }
.entry-content .enmedia-ad { width: 100%; display: block; }
.entry-content .enmedia-ad img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.entry-content .enmedia-ad--square { width: 100%; }
@media (min-width: 768px) { .entry-content .enmedia-ad--square { width: calc(50% - 6px); } }
.entry-content .ad-slot--sidebar .enmedia-ad--square { width: 100%; }
/* デバイス出し分け（CSS制御・キャッシュ非依存） */
.enmedia-only-pc { display: none; }
.enmedia-only-sp { display: block; }
@media (min-width: 768px) { .enmedia-only-pc { display: block; } .enmedia-only-sp { display: none; } }

/* ---- ピックアップ/CTAのメタ行（.r/.k/.v） ---- */
.entry-content .cta-info .r { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.entry-content .cta-info .k { color: var(--en-muted); min-width: 64px; }

/* ---- タグ ---- */
.enmedia-ero .ero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.enmedia-ero .ero-tag { display: inline-block; padding: 4px 10px; background: var(--en-bg-soft); border: 1px solid var(--en-line); border-radius: 999px; font-size: 12px; color: var(--en-ink); text-decoration: none; }
.enmedia-ero .ero-tag:hover { border-color: var(--en-accent); color: var(--en-accent); }

/* ---- 見出し ----
 * Cocoonの目次(#toc)は最初のh2直前に挿入され、ここが flex だと目次と見出しが横並びになる。
 * block＋h2への左ボーダー装飾にして、目次が入り込んでも縦積みになるようにする。 */
.entry-content .section-head { display: block; margin: 4px 0 12px; }
.entry-content .section-head .mark { display: none; }
.entry-content .section-head h2 { margin: 0; font-size: 18px; padding-left: 12px; border-left: 4px solid var(--en-accent); line-height: 1.35; }

/* ---- カードグリッド（関連・新着） ---- */
.entry-content .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.entry-content .card { display: block; border: 1px solid var(--en-line); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s, transform .05s; }
.entry-content .card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.entry-content .card .thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.entry-content .card .thumb .media,
.entry-content .card .thumb img { width: 100%; height: 100%; }
.entry-content .card .thumb img { object-fit: cover; display: block; }
.entry-content .card .thumb .ph { width: 100%; height: 100%; background: var(--en-bg-soft); }
.entry-content .card-body { padding: 8px 10px; }
.entry-content .card-title { margin: 0 0 6px; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry-content .card-meta { display: flex; align-items: center; justify-content: space-between; color: var(--en-muted); font-size: 12px; }

/* ---- FANZA作品の一覧サムネは contain（縦長パッケージの見切れ防止・letterboxは薄グレー） ---- */
.en-fanza-thumb { object-fit: contain !important; background: #f2f3f5; }

/* ---- 星評価 ---- */
.entry-content .stars { color: #f5a623; font-size: 13px; }
.entry-content .stars .count { color: var(--en-muted); margin-left: 4px; }

/* ---- シェア ---- */
.entry-content .share { display: flex; gap: 10px; }
.entry-content .share a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; color: #fff; }
.entry-content .share .x { background: #111; }
.entry-content .share .line { background: #06c755; }
.entry-content .share .icon { width: 16px; height: 16px; stroke: #fff; fill: none; }

/* ===================== FANZA（fanza記事） ===================== */
.entry-content .eyecatch { border-radius: var(--en-radius); overflow: hidden; background: #000; }
.entry-content .eyecatch .media,
.entry-content .eyecatch img { width: 100%; height: auto; display: block; }
.entry-content .eyecatch .ph { aspect-ratio: 16/9; background: var(--en-bg-soft); }

/* サンプル動画（16:9 レスポンシブ） */
.entry-content .sample-movie { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--en-radius); overflow: hidden; }
.entry-content .sample-movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* おすすめポイント */
.entry-content .points { background: var(--en-bg-soft); border: 1px solid var(--en-line); border-radius: 10px; padding: 14px 16px; }
.entry-content .points h3 { margin: 0 0 8px; font-size: 15px; }
.entry-content .points ul { margin: 0; padding-left: 1.2em; }
.entry-content .points li { margin: 4px 0; }

/* 作品詳細スペック表 */
.entry-content .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content .spec-table th, .entry-content .spec-table td { border: 1px solid var(--en-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.entry-content .spec-table th { width: 30%; background: var(--en-bg-soft); color: var(--en-muted); font-weight: 600; white-space: nowrap; }

/* FANZA CTAブロック */
.entry-content .cta-block { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--en-line); border-radius: var(--en-radius); background: #fff; }
.entry-content .cta-sample { position: relative; flex: 0 0 42%; max-width: 42%; border-radius: 8px; overflow: hidden; }
.entry-content .cta-sample .media img, .entry-content .cta-sample img { width: 100%; height: auto; display: block; }
.entry-content .cta-sample .badge { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--en-accent); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.entry-content .cta-info { flex: 1 1 auto; min-width: 0; }
.entry-content .cta-info h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.entry-content .cta-meta { margin-bottom: 12px; }
.entry-content .cta-meta .r { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.entry-content .cta-meta .k { color: var(--en-muted); min-width: 64px; }
.entry-content .cta-note { margin: 8px 0 0; color: var(--en-muted); font-size: 11px; text-align: center; }

/* 関連作品グリッド */
.entry-content .rw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.entry-content .rw-card { text-decoration: none; color: inherit; border: 1px solid var(--en-line); border-radius: 8px; overflow: hidden; background: #fff; }
.entry-content .rw-thumb { aspect-ratio: 16/11; background: #000; }
.entry-content .rw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry-content .rw-title { margin: 0; padding: 6px 8px; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- サイドバー注入 ---- */
.ero-sidebar-ad:empty, .ero-part-sidebar:empty { display: none; }
.ero-part-sidebar { margin-top: 12px; }

/* ===================== 年齢確認モーダル ===================== */
.age-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,10,14,.92); }
.age-ok .age-overlay { display: none !important; }
.age-overlay .age-card { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.age-overlay .glyph { font-size: 34px; }
.age-overlay .a-name { font-size: 18px; font-weight: 700; margin: 6px 0; color: var(--en-ink); }
.age-overlay .a-lead { font-weight: 600; margin: 8px 0; color: var(--en-ink); }
.age-overlay .a-fine { font-size: 13px; color: var(--en-muted); margin: 8px 0 18px; line-height: 1.6; }
.age-overlay .a-enter { display: block; width: 100%; padding: 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--en-accent), var(--en-accent-2)); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.age-overlay .a-leave { display: inline-block; margin-top: 14px; color: var(--en-muted); font-size: 13px; text-decoration: underline; }

/* =====================================================================
 * レスポンシブ（SP）
 * ===================================================================== */
@media screen and (max-width: 767px) {
  .entry-content .card-grid { grid-template-columns: repeat(2, 1fr); }
  .entry-content .rw-grid { grid-template-columns: repeat(2, 1fr); }
  .entry-content .ero-fz-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .entry-content .ero-fz-grid .ero-fz-item:nth-child(n+7) { display: none; } /* SPは2列×3行=6件まで */
  .entry-content .cta-block { flex-direction: column; align-items: stretch; }
  .entry-content .cta-sample { flex-basis: auto; max-width: 100%; }
  .entry-content .spec-table th { width: 34%; }
  .enmedia-ero .ero-play-btn, .entry-content .btn-cta { font-size: 15px; padding: 13px 16px; }
}