/*
 Theme Name: Jeeko Cocoon Child (ゆるかわギャラリー)
 Template: cocoon
 Description: Cocoon用 子テーマ。ゆるかわデザインのギャラリー + ライトボックス + 広告インタースティシャルDL を実装。
 Author: Jeeko + ChatGPT
 Version: 1.0.0
*/

/* ---- 基本配色・背景・タイポ ---- */

/* DEBUG: 背景読み込みテスト */
body {
  background: red !important;
}


:root{ --pink:#ff8fa3; --pink-soft:#ffd6e0; --mint:#57c4a2; }

body.jeeko-home,
body.home {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef) !important;
  background-image: radial-gradient(
      rgba(255,182,193,0.12) 1px,
      transparent 1px
  ) !important;
  background-size: 26px 26px !important;
  background-attachment: fixed !important;
}




/* ヒーロー */
.jeeko-hero {
  position: relative; margin-top: 10px; text-align: center; padding: 20px 20px;
  background: rgba(255, 255, 255, 0.7); border-radius: 16px; max-width: 900px; margin-left: auto; margin-right: auto; overflow: hidden;
}
.jeeko-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,192,203,0.2) 10px, transparent 40px),
                    radial-gradient(circle at 80% 70%, rgba(255,182,193,0.15) 8px, transparent 40px),
                    radial-gradient(circle at 40% 80%, rgba(255,182,193,0.1) 12px, transparent 50px);
  background-repeat: no-repeat; animation: jeekoFloatPattern 10s ease-in-out infinite alternate; z-index: 0;
}
@keyframes jeekoFloatPattern { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
.jeeko-hero h2, .jeeko-hero p { position: relative; z-index: 1; animation: jeekoFadeInUp 2s ease both; }
@keyframes jeekoFadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.jeeko-hero h2 { font-size: 1.8rem; color: #ff6b9b; margin-bottom: 10px; }
.jeeko-hero p { color: #777; }

/* ギャラリー */
.jeeko-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 40px 20px;
  background: linear-gradient(to bottom right, #fffafc, #fff6fa); border-radius: 16px; max-width: 1000px; margin: 40px auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 2px dotted rgba(255, 182, 193, 0.4); animation: jeekoGentleFloat 6s ease-in-out infinite alternate;
}
@keyframes jeekoGentleFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-5px); } }

.jeeko-card {
  background: #fff; border-radius: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); overflow: hidden; transform: translateY(0);
  transition: transform 0.8s ease, box-shadow 0.8s ease; border: 2px dotted var(--pink-soft); cursor: zoom-in;
}
.jeeko-card:hover { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.jeeko-card img { width: 100%; display: block; transition: transform 1s ease; }
.jeeko-card:hover img { transform: scale(1.05); }
.jeeko-card p { text-align: center; padding: 10px; color: #555; }

/* About */
.jeeko-about {
  text-align: center; padding: 60px 20px; background: linear-gradient(to bottom right, #fbfffd, #f4fdf9);
  border-radius: 12px; max-width: 900px; margin: 0 auto 60px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.jeeko-about h3 { color: var(--mint); font-size: 1.4rem; margin-bottom: 10px; }

/* フッター */
.jeeko-footer { text-align: center; background: #fff0f5; color: #777; padding: 20px; font-size: 0.8rem; border-radius: 12px; max-width: 980px; margin: 0 auto 40px; }

/* ライトボックス */
.jeeko-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.jeeko-lightbox.open { display: flex; }
.jeeko-lightbox .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* =============================
   ライトボックス画像サイズ（PC大きめ / スマホ小さめ）
============================= */

/* PC（デフォルト） */
.jeeko-lightbox img {
  max-width: 90vw;   /* 画面幅の90% → 大きめ */
  max-height: 80vh;  /* 画面高さの80% → 大きめ */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* タブレット（やや控えめ） */
@media (max-width: 1024px) {
  .jeeko-lightbox img {
    max-width: 85vw;
    max-height: 70vh;
  }
}

/* スマホ（明確に小さめ） */
@media (max-width: 768px) {
  .jeeko-lightbox img {
    max-width: 50vw;   /* 画面幅はほぼいっぱい */
    max-height: 60vh;  /* 高さを小さめにする */
    border-radius: 10px;
  }
}


/* 小さいスマホ（より小さめ） */
@media (max-width: 480px) {
  .jeeko-lightbox img {
    max-width: 50vw;
    max-height: 50vh;
    border-radius: 8px;
  }
}

.jeeko-lb-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.jeeko-lb-btn { border: none; background: rgba(255,255,255,0.98); padding: 12px 18px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; font-size: 15px; min-width: 140px; }
.jeeko-lb-btn.primary { background: var(--pink); color: #fff; }
.jeeko-lb-close, .jeeko-lb-prev, .jeeko-lb-next { position: absolute; border: none; background: rgba(255,255,255,0.95); width: 44px; height: 44px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: pointer; font-size: 22px; display: grid; place-items: center; }
.jeeko-lb-close { top: 20px; right: 20px; }
.jeeko-lb-prev { left: 12px; }
.jeeko-lb-next { right: 12px; }
.jeeko-lb-prev, .jeeko-lb-next { top: 50%; transform: translateY(-50%); }

/* インタースティシャル（広告＋カウントダウン） */
.jeeko-interstitial { position: fixed; inset: 0; background: rgba(255, 240, 245, 0.9); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1100; }
.jeeko-interstitial.open { display: flex; }
.jeeko-inter-card { background: #fff; border-radius: 16px; max-width: 540px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 20px; text-align: center; border: 2px dotted var(--pink-soft); }
.jeeko-ad-slot { height: 180px; display: grid; place-items: center; margin: 10px 0 16px; background: rgba(255, 182, 193, 0.12); border-radius: 12px; border: 1px dashed rgba(255,182,193,0.5); }
.jeeko-countdown { font-size: 14px; color: #666; margin-bottom: 8px; }
.jeeko-dl-btn { border: none; background: var(--pink); color: #fff; padding: 12px 16px; border-radius: 999px; cursor: not-allowed; opacity: 0.6; min-width: 220px; }
.jeeko-dl-btn.ready { cursor: pointer; opacity: 1; }

@media (max-width: 600px) {
  .jeeko-hero h2 { font-size: 1.4rem; }
  .jeeko-lb-prev, .jeeko-lb-next { width: 40px; height: 40px; }
  .jeeko-lb-btn { width: 100%; min-width: 0; }
}

/* ===========================
   ヘッダー画像（カスタム）
=========================== */
.jeeko-header {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}

.jeeko-header-img {
  width: 260px;      /* PC表示サイズ */
  height: auto;
}

/* スマホ用（幅600px以下） */
@media (max-width: 600px) {
  .jeeko-header-img {
    width: 180px;   /* スマホは少し小さく */
  }
}

/* サイトタイトル下の余白を縮める */
#header-container,
#header {
  margin-bottom: 10px !important;  /* デフォは40〜60pxもある */
  padding-bottom: 0 !important;
}

/* カスタムヘッダー画像周囲の余白調整 */
.jeeko-header {
  margin: 5px auto 10px auto !important; /* 上5px・下10pxに縮める */
  padding: 0 !important;
  text-align: center;
}

.jeeko-header-img {
  max-width: 600px;
  width: 90%;
  display: block;
  margin: 0 auto;
}

/* サイトタイトル & キャッチフレーズを非表示 */
#site-title,
#site-description {
  display: none !important;
}


/* ============================
   ヘッダー画像（最適化済）
============================ */

/* Cocoon のデフォルトタイトルと余白を削除 */
#header-container,
#header {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

#site-title,
#site-description,
#header-container .logo-header,
#header-container .site-title-text,
#header-container .site-name-text {
  display: none !important;
}

/* カスタムヘッダー画像を表示 */
.jeeko-header {
  width: 100%;
  text-align: center;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* PC で適切な最大幅に制限 */
.jeeko-header-img {
  width: 100%;
  max-width: 100%;   /* ← PCサイズここで調整 */
  height: auto;
 object-fit: cover;
  max-height: 200px;   /* ← 好きな高さに調整 */
}

/* スマホ調整 */
@media (max-width: 768px) {
  .jeeko-header-img {
    max-width: 95%;   /* スマホは少し余白 */
    width: 95%;
    margin-top: 8px;
  }
}

/* ----- 背景をサイト全体に反映するために、Cocoon の白背景を解除 ----- */

#container,
#content,
#inner-content,
#main,
#header-container,
.wrap {
  background: transparent !important;
  box-shadow: none !important;
}


/* ============================
   ❀ サイト全体：ふわふわパステル背景（必ず反映）
============================ */
body {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef);
  background-image: radial-gradient(
      rgba(255,182,193,0.12) 1px,
      transparent 1px
  );
  background-size: 26px 26px;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* Cocoon の白背景をすべて透明化して背景を見えるようにする */
#header-container,
#header,
#navi,
#container,
#content,
#main,
#inner-content,
.wrap,
.l-content,
.entry-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================
   ❀ カスタムヘッダー画像
============================ */
.jeeko-header {
  text-align: center;
  margin: 0;
  padding: 0;
}

.jeeko-header-img {
  width: 100%;
  max-width: 1400px;  /* ← PCでの最大幅を自由に調整可能 */
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .jeeko-header-img {
    max-width: 95%;
  }
}

/* サイトタイトル＆キャッチフレーズを非表示 */
#site-title,
#site-description,
#header-container .site-title-text,
#header-container .site-name-text,
.logo-header {
  display: none !important;
}

/* ============================
   ❀ ヒーロー（説明文）
============================ */
.jeeko-hero {
  margin: 10px auto 20px auto;
  text-align: center;
  padding: 20px 20px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  max-width: 900px;
}

/* ============================
   ❀ ギャラリー（あなたが作った設定を維持）
============================ */
.jeeko-cat-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.jeeko-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  flex: 0 1 calc(12.5% - 10px);  /* ← PCで8列 */
}

.jeeko-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .jeeko-card { flex: 0 1 calc(16.66% - 10px); }
}

@media (max-width: 768px) {
  .jeeko-card { flex: 0 1 calc(33.33% - 10px); }
}

@media (max-width: 480px) {
  .jeeko-card { flex: 0 1 calc(50% - 6px); }
}

/* ============================
   ❀ ライトボックス（PC大 / スマホ小）
============================ */
.jeeko-lightbox img {
  max-width: 90vw;
  max-height: 80vh;
}
@media (max-width: 768px) {
  .jeeko-lightbox img {
    max-width: 60vw;
    max-height: 60vh;
  }
}
@media (max-width: 480px) {
  .jeeko-lightbox img {
    max-width: 70vw;
    max-height: 50vh;
  }
}

/* ======================================
   ★ 背景をふわふわパステルに強制適用（最優先）
====================================== */
body {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef) !important;
  background-image: radial-gradient(
      rgba(255,182,193,0.15) 1px,
      transparent 1px
  ) !important;
  background-size: 26px 26px !important;
  background-attachment: fixed !important;
}

/* ======================================
   ★ Cocoon が白背景を上書きしている部分を完全透明にする
====================================== */
#header-container,
#header,
#navi,
#container,
#content,
#main,
#inner-content,
.wrap,
.l-content,
.entry-content,
#sidebar,
.l-main {
  background: transparent !important;
  box-shadow: none !important;
}

/* ギャラリー部分の白ボックスも透明化 */
body.home .content {
  background: transparent !important;
}

/* --------------------------
   Cocoon の白背景を完全に削除
--------------------------- */

/* ページ全体を包む白背景を無効化 */
#container,
#main,
#content,
#inner-wrap,
#wrap {
  background: transparent !important;
}

/* サイト全体の背景（白ボックス）を消す */
#content-in,
.article,
#main .main,
#body-in {
  background: transparent !important;
}

body {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef) !important;
  background-image: radial-gradient(
      rgba(255,182,193,0.1) 1px,
      transparent 1px
  ) !important;
  background-size: 28px 28px !important;
  background-attachment: fixed !important;
}

/* ===== 背景をパステルに変更 ===== */
body {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef) !important;
  background-image: radial-gradient(
      rgba(255,182,193,0.15) 1px,
      transparent 1px
  ) !important;
  background-size: 28px 28px !important;
  background-attachment: fixed !important;
}

/* Cocoon の白背景を消す */
#wrap,
#inner-wrap,
#container,
#main,
#content,
#content-in,
.article,
#body-in {
  background: transparent !important;
}


html, body {
  background: linear-gradient(to bottom, #fff7fb, #ffe6ef) !important;
  background-image: radial-gradient(
      rgba(255,182,193,0.15) 1px,
      transparent 1px
  ) !important;
  background-size: 26px 26px !important;
  background-attachment: fixed !important;
}

/* Cocoon の白背景を消す */
#wrap,
#inner-wrap,
#container,
#content,
#main,
#content-in,
.article,
.entry,
#header-container,
#header {
  background: transparent !important;
  box-shadow: none !important;
}