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

/* =========================================================
   全体フォント指定（Kiwi Maru）
========================================================= */
body {
  font-family: 'Kiwi Maru', "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}


/* =========================================================
   0. 基本変数
========================================================= */
:root{
  --pink:#ff8fa3;
  --pink-soft:#ffd6e0;
  --mint:#57c4a2;
}

/* =========================================================
   1. サイト背景（ホームのみ）
========================================================= */
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;
  overflow-x: hidden;
}

/* =========================================================
   2. ヘッダー（タイトル非表示＋画像のみ）
========================================================= */
#site-title,
#site-description,
#header-container .logo-header,
#header-container .site-title-text,
#header-container .site-name-text{
  display:none !important;
}

#header-container,
#header{
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
}

.jeeko-header{
  width:100%;
  text-align:center;
  margin:0 auto !important;
  padding:0 !important;
}

.jeeko-header-img{
  width:100%;
  max-width:1200px;     /* 必要ならここで上限調整 */
  max-height:300px;     /* 高さ調整OK */
  height:auto;
  object-fit:cover;
  display:block;
  margin:0 auto;
}

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

/* =========================================================
   3. ヒーロー（説明文）
========================================================= */
.jeeko-hero{
  position:relative;
  margin-top:0;
  text-align:center;
  padding: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;
}
@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; }

@media (max-width:600px){
  .jeeko-hero h2{ font-size:1.4rem; }
}



/* =========================================================
   4. タブ（カテゴリ切替） - カプセルボタン風デザイン
========================================================= */
.jeeko-tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;             /* ボタン同士の隙間をギュッと詰める */
  margin: 20px auto 30px;
  padding: 0 10px;
  border-bottom: none;   /* 全体の下線は削除 */
}

/* タブボタン共通デザイン */
.jeeko-tab-btn {
  background: #fff;
  border: 1px solid #ffe6ef; /* 薄いピンクの枠線 */
  border-radius: 30px;       /* 角を丸くしてカプセル型に */
  font-size: 0.9rem;         /* 文字サイズを少し小さく */
  color: #888;
  cursor: pointer;
  padding: 8px 20px;         /* 内側の余白 */
  transition: all 0.2s ease; /* ふわっと動くアニメーション */
  font-weight: bold;
  position: static;          /* 以前の下線設定をリセット */
}

/* 以前の下線（after擬似要素）を無効化 */
.jeeko-tab-btn::after {
  display: none !important;
}

/* マウスを乗せた時 */
.jeeko-tab-btn:hover {
  background: #fff0f5;       /* ほんのりピンク背景 */
  color: #ff6b9b;
  transform: translateY(-2px); /* ちょこっと浮く */
  border-color: #ffb6c1;
}

/* 選択中（アクティブ）の状態 */
.jeeko-tab-btn.active {
  background: #ff6b9b;       /* 濃いピンクで塗りつぶし */
  color: #fff;               /* 文字は白 */
  border-color: #ff6b9b;
  box-shadow: 0 4px 10px rgba(255, 107, 155, 0.3); /* ピンクの影 */
}

/* スマホ用調整 */
@media (max-width: 768px) {
  body.home .jeeko-tabs {
    gap: 8px;            /* スマホはさらに隙間を詰める */
    margin: 15px 0 20px !important;
  }
  .jeeko-tab-btn {
    font-size: 0.8rem;   /* スマホではさらに文字を小さく */
    padding: 6px 14px;   /* ボタンサイズもコンパクトに */
  }
}

/* =========================================================
   5. ギャラリー（Flex 8列ベース）
========================================================= */
body.home #main,
body.home #container,
body.home .content,
body.home #content{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box;
}
.sidebar,#sidebar,.l-sidebar,.r-sidebar{ display:none !important; }

.jeeko-cat-gallery{
  display:none;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:10px;
  max-width:100%;
  margin:0 auto;
}

/* =========================================
   ★ランキング追加による display:grid 指定を吸収
   - HTML/JSの inline display に負けないよう !important
   - 既存のFlex 8列レイアウトを強制復帰
========================================= */
.jeeko-cat-gallery.active{
  display:flex !important;
}

body.home .jeeko-cat-gallery{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  max-width:fit-content;
  margin:0 auto;
  padding:0;
  gap:10px;
  box-sizing:border-box;
}

/* ホームでも active 優先で flex を強制 */
body.home .jeeko-cat-gallery.active{
  display:flex !important;
}

/* 念のためランキングIDにも同じ指定 */
#cat-ranking.active{
  display:flex !important;
}

/* カード */
.jeeko-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  text-align:center;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  flex:0 1 calc(33.333% - 10px);
  max-width:calc(33.333% - 10px);
  /* ★追加：これより小さくならないようにする */
  min-width:110px;   /* お好みで 100〜120px くらいに調整 */
  box-sizing:border-box;
  border:2px dotted var(--pink-soft);
  cursor:zoom-in;
}
.jeeko-card:hover{
  transform:scale(1.05);
  box-shadow:0 8px 16px rgba(0,0,0,0.12);
}

/* カード画像 */
.jeeko-card img{
  width:100%;
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  border-radius:8px;
  transition:transform 1s ease;
}
.jeeko-card:hover img{ transform:scale(1.05); }

/* レスポンシブ列数 */
@media (max-width:1024px){
  .jeeko-card{
    flex:0 1 calc(12.5% - 6px);
    max-width:calc(12.5% - 6px);
  }
}
@media (max-width:768px){
  .jeeko-card{
    flex:0 1 calc(12.5% - 6px);
    max-width:calc(12.5% - 6px);
    border-radius:10px;
  }
  body.home .jeeko-cat-gallery{
    padding:0 6px !important;
    gap:6px !important;
    max-width:100% !important;
    justify-content:center !important;
  }
}
@media (max-width:480px){
  .jeeko-card{
    flex:0 1 calc(25% - 4px);
    max-width:calc(25% - 4px);
  }
  body.home .jeeko-card{
    flex:0 1 calc(25% - 6px) !important;
    max-width:calc(25% - 6px) !important;
  }
  body.home .jeeko-cat-gallery{ padding:0 4px !important; }
}

/* =========================================================
   6. ライトボックス
========================================================= */
.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;
}

.jeeko-lightbox img{
  max-width:90vw;
  max-height:80vh;
  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; top:50%; transform:translateY(-50%); }
.jeeko-lb-next{ right:12px; top:50%; transform:translateY(-50%); }

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

/* =========================================================
   7. インタースティシャル
========================================================= */
.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:.6;
  min-width:220px;
}
.jeeko-dl-btn.ready{ cursor:pointer; opacity:1; }

/* =========================================================
   8. Contact Form 7（ゆるかわフォーム）
========================================================= */
.cf7-jeeko{
  max-width:700px;
  margin:30px auto;
  padding:25px 30px;
  background:rgba(255,255,255,0.75);
  border-radius:20px;
  box-shadow:0 6px 18px rgba(255,182,193,0.25);
  animation:jeekoFormFloat 6s ease-in-out infinite alternate;
  backdrop-filter:blur(3px);
  text-align:left !important;
}
@keyframes jeekoFormFloat{
  0%{transform:translateY(0);}
  100%{transform:translateY(-6px);}
}
.cf7-jeeko label{
  font-size:1rem;
  color:#ff6ba1;
  display:block;
  margin-bottom:6px;
  font-weight:600;
}
.cf7-jeeko input[type="text"],
.cf7-jeeko input[type="email"],
.cf7-jeeko textarea{
  width:100%;
  border:2px solid var(--pink-soft);
  background:#fffafc;
  border-radius:12px;
  padding:12px 14px;
  font-size:1rem;
  color:#444;
  transition:.3s ease;
  box-sizing:border-box;
}
.cf7-jeeko input[type="text"]:focus,
.cf7-jeeko input[type="email"]:focus,
.cf7-jeeko textarea:focus{
  outline:none;
  border-color:#ff8fb3;
  box-shadow:0 0 8px rgba(255,182,193,0.55);
}
.cf7-jeeko textarea{
  min-height:160px;
  resize:vertical;
}
.cf7-jeeko input[type="submit"]{
  display:block;
  width:60%;
  margin:25px auto 0;
  padding:12px;
  border:none;
  border-radius:25px;
  background:linear-gradient(to right, #ff8fa3, #ffb7cc);
  color:#fff;
  font-size:1.1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(255,182,193,0.4);
  transition:.3s ease;
}
.cf7-jeeko input[type="submit"]:hover{
  opacity:.85;
  box-shadow:0 6px 18px rgba(255,182,193,0.5);
  transform:translateY(-2px);
}
.cf7-jeeko .wpcf7-not-valid-tip{
  color:#ff4b8a;
  font-size:.85rem;
  margin-top:4px;
}
.wpcf7-mail-sent-ok{
  border:none !important;
  background:#ffeff6 !important;
  padding:14px !important;
  border-radius:10px;
  text-align:center;
  color:#ff5e9c !important;
  box-shadow:0 2px 8px rgba(255,182,193,0.25);
}
.wpcf7-validation-errors,
.wpcf7-acceptance-missing{
  border:none !important;
  background:#fff0f5 !important;
  padding:14px !important;
  border-radius:10px;
  color:#ff568e !important;
}



/* =========================================================
   9. 作家紹介ページ（プロフィール）
========================================================= */
.jeeko-profile{
  max-width:1000px;
  margin-left: 200px !important; /* ←お好みで増減 */
  margin-right: 100px !important;
  padding:40px 30px;
  background:rgba(255,255,255,0.8);
  border-radius:24px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  text-align:center;
  animation:jpFadeUp 1.2s ease both;
}
.jp-photo-wrap{
  width:160px; height:160px;
  margin:0 auto 20px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid var(--pink-soft);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.jp-photo-wrap img{ width:100%; height:100%; object-fit:cover; }

.jp-name{
  font-size:2rem;
  background:rgba(255,240,245,0.6);
  padding:20px 22px;
  border-radius:16px;
  line-height:1;
  color:#555;
  box-shadow:inset 0 0 6px rgba(255,182,193,0.4);
  animation:jpFade 1.6s ease both;
}

/* スマホ用：プロフィール名前 */
@media (max-width: 768px){
  .jp-name{
    font-size: 1.4rem;
    line-height: 1.2;
    padding: 14px 18px;
    white-space: nowrap;
  }
}



.jp-title{
  font-size:1.2rem;
  color:#777;
  margin-bottom:20px;
}
.jp-intro{
  text-align:left;
  background:rgba(255,240,245,0.6);
  padding:20px 22px;
  border-radius:16px;
  line-height:1.9;
  color:#555;
  box-shadow:inset 0 0 6px rgba(255,182,193,0.4);
  animation:jpFade 1.6s ease both;
}
.jp-sns{
  margin-top:25px;
  display:flex;
  justify-content:center;
  gap:14px;
}
.jp-sns-btn{
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  color:#fff;
  text-decoration:none;
  transition:.3s;
}
.jp-sns-btn.x{ background:#000; }
.jp-sns-btn.insta{ background:#d62976; }
.jp-sns-btn.pinterest{ background:#bd081c; }
.jp-sns-btn:hover{ opacity:.8; transform:translateY(-2px); }

@keyframes jpFadeUp{
  0%{opacity:0; transform:translateY(20px);}
  100%{opacity:1; transform:translateY(0);}
}
@keyframes jpFade{
  0%{opacity:0;}
  100%{opacity:1;}
}

/* プロフィール：目次非表示 */
.page-id-95 .toc{ display:none !important; }

/* =========================================================
   10. 書籍紹介（横並び＋画像サイズ固定）
========================================================= */

/* --- あなたの新しい .book-box 用 --- */
.book-box{
  max-width:900px;
  margin:40px auto;
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(255,255,255,0.8);
  border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.jp-booktitle{
  font-size:1.4rem;
  background:rgba(255,240,245,0.6);
  padding:20px 22px;
  border-radius:16px;
  line-height:1;
  color:#555;
  box-shadow:inset 0 0 6px rgba(255,182,193,0.4);
  animation:jpFade 1.6s ease both;
  margin-top: -50px;
  white-space: nowrap;
}

/* デスクトップは横並び固定 */
@media (min-width:769px){
  .book-box{ flex-wrap:nowrap; }
}

/* 画像サイズ強制（WPの自動サイズを止める） */
.book-box .book-image img,
.book-box .wp-block-image img{
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* テキスト側 */
.book-info{
  max-width:420px;
  text-align:left;
}
.book-info h2{
  font-size:26px;
  color:#ff6b9b;
  margin-bottom:10px;
}
.book-info p {
  margin-bottom: 8px !important;
}


/* Amazonボタン（かわいい版） */
.jeeko-amazon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: linear-gradient(135deg, #ffb4c9, #ff6fa9);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(255, 105, 180, 0.25);
  line-height: 1.3;
  white-space: nowrap;
}

.jeeko-amazon-btn:hover{
  transform:translateY(-3px);
  opacity:.9;
}

/* スマホは縦並び */
@media (max-width:768px){
  .book-box{
    flex-direction:column;
    text-align:center;
  }
  .book-box .book-image img,
  .book-box .wp-block-image img{
    width:65% !important;
    max-width:220px !important;
  }
  .book-info{ text-align:center; }
}


/* =========================================================
   11. SNSボタン（横並び・サイズ統一）
========================================================= */
.jeeko-sns-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:20px 0 40px;
}
.sns-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:48px;
  border-radius:30px;
  font-size:18px;
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  transition:transform .2s ease, opacity .2s ease;
}
.sns-btn:hover{
  transform:translateY(-3px);
  opacity:.85;
}
.sns-btn.x{ background:#000; }
.sns-btn.insta{ background:#d62a7c; }
.sns-btn.yt{ background:#ff0000; }
.sns-btn.threads{ background:#000; }
.sns-btn.blog{ background:#ff98ad; }

/* 固定ページ全体を中央寄せ */
.page .entry-content {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Cocoon の本文幅を上書き */
.page #main,
.page #content,
.page .content {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================
   お問い合わせフォームの左右位置を完全補正
========================================= */

/* Cocoon 固有の本文幅をリセットして中央揃え */
.page .entry-content {
  max-width: 900px;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* フォーム全体を中央揃え（PC & スマホ共通） */
.cf7-jeeko {
  max-width: 800px;
  margin: 30px auto;
  padding: 25px 30px;
}

/* 入力欄の親幅を均一化して揃える */
.cf7-jeeko p {
  margin: 0 !important;
  padding: 0 !important;
}

.cf7-jeeko input[type="text"],
.cf7-jeeko input[type="email"],
.cf7-jeeko textarea {
  width: 100% !important;
  box-sizing: border-box;
}


/* =========================================
  トップページ：ジェーコ紹介
========================================= */

.home-profile-box {
  max-width: 900px;
  margin: 40px auto;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  background:rgba(255,240,245,0.6);
  border-radius: 16px;
  line-height:1;
  color:#555;
  box-shadow:inset 0 0 6px rgba(255,182,193,0.4);
  animation:jpFade 1.6s ease both;
}

.home-profile-img img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffd6e0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.home-profile-text h2 {
  font-size: 1.6rem;
  color: #ff6b9b;
  margin-bottom: 10px;
}

.home-profile-text p {
  color: #555;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .home-profile-box {
    flex-direction: column;
    text-align: center;
  }
  
  .home-profile-img img {
    width: 130px;
    height: 130px;
  }
}

.home-profile-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #ffb4c9, #ff6fa9);
  color: white;
  font-weight: bold;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(255, 105, 180, 0.25);
  transition: .2s ease;
}

.home-profile-btn:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* メインコンテンツ幅：1200px の箱を中央に */
#content,
#content-in,
.main,
.container {
  max-width: 1200px !important;
  width: auto !important;
  margin: 0 auto !important;
}


/* ===== 2カラムレイアウト（左メイン + 右サイド） ===== */
.jeeko-layout {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 70px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.jeeko-main {
  flex: 1 1 auto;
  max-width: 900px;
}

.jeeko-sidebar {
  width: 220px;
  position: sticky;
  top: 20px;
}

.jeeko-sidebar-box {
  background: #fff7fb;
  border: 2px dotted #ffadbd;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.jeeko-tabs-sidebar .sidebar-tab-btn{
  display:block;
  width:100%;
  margin-bottom:8px;
  padding:10px;
  border-radius:10px;
  background:#ffe6ef;
  border:1px solid #ffb6c1;
  cursor:pointer;
  font-size:14px;
  text-align:center;
  text-decoration:none;
  color:#555;
  box-sizing:border-box;
}

.sidebar-tab-btn.is-current{
  background:#ffb6c1;
  color:#fff;
}

@media screen and (max-width: 770px){
  .jeeko-layout {
    display: block;
    padding: 0;
  }

  .jeeko-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 16px;
  }

  .jeeko-sidebar {
    display: none !important;
  }
}

/* Sticky が効かなくなる overflow を無効化 */
body,
#container,
#content,
.content,
.main {
  overflow: visible !important;
}

/* ギャラリーの横幅をタブ（メインカラム）と揃える */
#jeeko-gallery-section,
#jeeko-gallery,
.jeeko-cat-gallery {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.jeeko-sidebar {
  position: relative !important;
  z-index: 10 !important;
}

.jeeko-sidebar {
  width: 200px;
  position: relative;
  top: 20px;
  margin-left: 20px;
  font-family: inherit;
}

/* ▼ ホーム用「もっと見る」ボタン */
.jeeko-more-wrap {
  width: 100%;
  text-align: center;
  margin: 16px 0 8px;
}

.jeeko-more-btn {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb4c9, #ff6fa9);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.25);
  font-family: "Kiwi Maru", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.jeeko-more-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}


/* ▼ PC用：ヘッダーメニューの余白調整 */
.jeeko-header-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ffb6c1;
  color: #ff6b9b;
  text-decoration: none;
  margin: 0 0.5px;
  box-shadow: 0 4px 10px rgba(255,182,193,0.25);
}

.jeeko-header-links a:hover{
  background: #ff6b9b;
  color: #fff;
}

/* ===== 共通ヘッダー（ロゴ＋メニュー＋画像） ===== */

.jeeko-global-header{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0 0;
}

.jeeko-header-top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.jeeko-logo img{
  height: 40px;
  width: auto;
  display: block;
}

.jeeko-header-links{
  display: flex;
  gap: 10px;
  padding: 0;
  margin-left: auto;
}

.jeeko-menu-toggle{
  display: none;
  background: none;
  border: none;
  padding: 6px;
  margin-left: auto;
  cursor: pointer;
}

.jeeko-menu-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  margin: 3px 0;
  background: #ff6b9b;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}

.jeeko-menu-toggle.is-open span:nth-child(1){
  transform: translateY(5px) rotate(45deg);
}
.jeeko-menu-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.jeeko-menu-toggle.is-open span:nth-child(3){
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 768px){
  .jeeko-global-header{
    padding: 4px 8px 0;
  }

  .jeeko-header-top{
    gap: 8px;
  }

  .jeeko-logo img{
    height: 32px;
  }

  .jeeko-menu-toggle{
    display: block;
  }

  .jeeko-header-links{
    position: absolute;
    top: 48px;
    right: 8px;
    left: auto;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 999;
  }

  .jeeko-header-links.is-open{
    display: flex;
  }

  .jeeko-header-links a{
    padding: 6px 10px;
    font-size: 0.7rem;
  }
}

/* =====================================
   共通：ふわっとフェードイン用クラス
===================================== */

.jeeko-fade {
  opacity: 0;
  transform: translateY(20px);
}

.jeeko-fade.is-visible {
  animation: jeekoFadeInUp 1.5s ease both;
}

@keyframes jeekoFadeInUp{
  0%{opacity:0; transform:translateY(20px);}
  100%{opacity:1; transform:translateY(0);}
}

/* ============================
   トップページ：ヘッダー下の白帯を調整
============================ */
body.home #header-container,
body.home #header-container-in,
body.home #header,
body.home #header-in {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.home #header-in.wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* 固定ページの投稿者情報を非表示にする */
.page .post-author,
.page .author-info,
.page .author-box,
.page .entry-author,
.page .author {
  display: none !important;
}

/* =========================================
   パンくず「ホーム」リンクをゆるかわボタン化
========================================= */

#breadcrumb {
  text-align: left;
  margin: 10px auto 30px;
  max-width: 900px;
}

#breadcrumb a:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ffb4c9, #ff6fa9);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(255, 105, 180, 0.25);
}

#breadcrumb a:first-of-type::before {
  content: "🏠";
  font-size: 1.1em;
}

#breadcrumb .fa-home,
#breadcrumb .icon-home {
  display: none;
}

#breadcrumb a:first-of-type:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 105, 180, 0.35);
  transition: 0.2s ease;
}

#breadcrumb .fa-home,
#breadcrumb .icon-home {
  color: #fff;
}

@media (max-width: 768px) {
  #breadcrumb {
    margin: 8px auto 24px;
    padding: 0 16px;
  }

  #breadcrumb a:first-of-type {
    padding: 4px 10px;
    font-size: 0.8rem;
    box-shadow: 0 3px 8px rgba(255, 105, 180, 0.25);
  }

  #breadcrumb a:first-of-type::before {
    font-size: 1em;
  }
}

/* カテゴリー一覧のページ番号*/
.jeeko-pagination{
  margin: 30px auto 10px;
  text-align: center;
  font-size: 0.9rem;
}

.jeeko-pagination .page-numbers{
  display: inline-block;
  margin: 0 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ffd6e0;
  color: #ff6b9b;
}

.jeeko-pagination .page-numbers.current{
  background: #ff6b9b;
  color: #fff;
  font-weight: 600;
}

.jeeko-pagination .page-numbers:hover{
  opacity: .85;
}

/* =========================================
   画像が1〜2枚しかない時のカード幅補正
========================================= */
/*
.jeeko-cat-gallery .jeeko-card:only-child{
  flex: 0 0 110px !important;
  max-width: 110px !important;
}

.jeeko-cat-gallery .jeeko-card:nth-child(1):nth-last-child(2),
.jeeko-cat-gallery .jeeko-card:nth-child(2):nth-last-child(1){
  flex: 0 0 110px !important;
  max-width: 110px !important;
}

/* カテゴリ一覧ページ：左メインカラムの幅を固定 */
body.tax-jeeko_category .jeeko-main{
  flex: 0 0 820px;
  max-width: 820px;
}

body.tax-jeeko_category .jeeko-cat-gallery{
  width: 100%;
}

/* DL数バッジ */
.jeeko-dl-count{
  display:inline-block;
  margin-top:4px;
  font-size:11px;
  color:#888;
  background:#fff;
  padding:2px 6px;
  border-radius:999px;
}

/* ランキング一覧ページ（固定ページ）のレイアウト調整 */
body.page-template-page-ranking .jeeko-layout {
  justify-content: flex-start !important; /* コンテンツ全体を左詰めに */
  gap: 100px !important; /* ★メインとサイドバーの間の隙間（数字を減らすと近づきます） */
}

body.page-template-page-ranking .jeeko-main {
  /* ★メインエリアの幅調整 */
  flex: 0 0 1200px !important;  /* ←この数字を変えると幅が変わります（例：850px, 900px） */
  max-width: 1200px !important; /* ←上と同じ数字にしてください */

  /* 位置調整 */
  margin-left: 0 !important;   /* 左端に寄せる */
  margin-right: 0 !important;  /* 右マージンリセット */
}

/* サイドバーの幅固定（念のため） */
.jeeko-sidebar {
  flex-shrink: 0;
  width: 240px; 
}

/* サイドバー検索窓のデザイン */
.jeeko-search-form {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.jeeko-search-input {
  flex: 1; /* 横幅いっぱいにする */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: #fdfdfd;
}
.jeeko-search-btn {
  background: #ff6b9b;
  color: #fff;
  border: none;
  padding: 0 15px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  transition: 0.2s;
}
.jeeko-search-btn:hover {
  opacity: 0.8;
  background: #ff85ab;
}

/* =========================================
   スマホ専用カテゴリ一覧（全ページ共通）
   ========================================= */
.jeeko-sp-categories { 
  display: none; /* PCでは非表示 */
  margin-top: 50px; 
  margin-bottom: 30px;
}
.jeeko-sp-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.jeeko-sp-cat-btn {
  display: inline-block;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #ffb6c1;
  border-radius: 30px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: .2s;
}
.jeeko-sp-cat-btn:hover { background: #ffe6ef; }
.jeeko-sp-cat-btn.ranking { background: #ff6b9b; color: #fff; border-color: #ff6b9b; font-weight: bold; }

/* スマホ表示のときだけ表示する */
@media (max-width: 1024px) {
  .jeeko-sp-categories { display: block; }
}

/* =========================================
   スマホ専用キーワード検索（全ページ共通）
   ========================================= */
.jeeko-sp-search {
  display: none; /* PCでは非表示 */
  margin-top: 50px;
}
.jeeko-sp-search h3.related-title {
  font-size: 1.4rem;
  color: #555;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
}

/* スマホ (max-width: 1024px) のとき表示 */
@media (max-width: 1024px) {
  .jeeko-sp-search {
    display: block;
  }
}

/* スマホ用カテゴリタイトルの文字を中央寄せにする */
.jeeko-sp-categories h3.related-title {
  text-align: center;
  font-size: 1.4rem;
  color: #555;
  margin-bottom: 20px;
  font-weight: bold;
}

/* =========================================
   ダウンロード数を非表示にする設定
   ========================================= */
/* 一覧ページ（カード内のDL数）を消す */
.jeeko-dl-count {
  display: none !important;
}

/* 詳細ページ（ボタン下のDL数テキスト）を消す */
.jeeko-dl-count-text {
  display: none !important;
}

/* =========================================
   新ヘッダーデザイン
   ========================================= */
.jeeko-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  margin-bottom: 30px;
}

/* ヘッダー画像エリア */
.jeeko-header-logo {
  text-align: center;
  background: #fff; /* 必要なら背景色変更 */
  padding: 0;
}
.jeeko-header-logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* 画像の最大幅を制限したい場合はここを調整（例: max-width: 1000px;） */
}

/* ナビゲーションバー */
.jeeko-main-nav {
  background: #fff;
  border-top: 1px solid #ffe6ef; /* 薄いピンクのライン */
}
.jeeko-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* リンクのデザイン */
.jeeko-nav-list li {
  margin: 0;
}
.jeeko-nav-list a {
  display: flex;
  flex-direction: column; /* アイコンと文字を縦並び */
  align-items: center;
  padding: 12px 20px;
  text-decoration: none;
  color: #555;
  transition: .2s;
}
.jeeko-nav-list a:hover {
  background: #fff0f5;
  color: #ff6b9b;
}

/* アイコンと文字 */
.nav-icon {
  font-size: 1.4rem;
  margin-bottom: 4px;
  line-height: 1;
}
.nav-text {
  font-size: 0.9rem;
  font-weight: bold;
}

/* --- スマホ用調整 (画面幅 768px以下) --- */
@media (max-width: 768px) {
  /* メニューを画面幅いっぱいに広げる */
  .jeeko-nav-list {
    justify-content: space-between;
    gap: 0;
  }
  .jeeko-nav-list li {
    flex: 1; /* 4等分する */
    text-align: center;
  }
  .jeeko-nav-list a {
    padding: 10px 0;
  }
  .nav-icon {
    font-size: 1.3rem;
  }
  .nav-text {
    font-size: 0.75rem; /* スマホでは文字を少し小さく */
  }
}

/* =========================================
   新ヘッダーデザイン（PCメニュー増強版）
   ========================================= */
.jeeko-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  margin-bottom: 30px;
}

/* ヘッダー画像エリア */
.jeeko-header-logo {
  text-align: center;
  background: #fff;
  padding: 0;
}
.jeeko-header-logo img {
  /* ▼ 横幅の指定（ここを好きな数字に変えてください） */
  width: 100%;          /* 例: 100% だと画面幅いっぱい、800px だと固定幅 */
  max-width: 1400px;    /* 横幅の上限（必要なら変更） */

  /* ▼ 高さの指定（★ここを好きな高さに固定してください） */
  height: 150px;        /* 例: 200px, 300px, 400px など */
  
  /* ▼ 【重要】画像を変形させず、枠に合わせてトリミングする設定 */
  object-fit: cover; 
  
  /* 配置設定（変更不要） */
  display: block;
  margin: 0 auto;       /* 中央寄せ */
}

/* --- スマホ用調整 (画面幅 768px以下) --- */
@media (max-width: 768px) {
  .jeeko-header-logo img {
    /* ▼ ここを変更しました */
    width: 100% !important;      /* 横幅は画面いっぱい(100%)にする */
    height: auto !important;     /* 高さは横幅に合わせて自動調整 */
    max-width: 100% !important;  /* 画面からはみ出さない */
    object-fit: contain;         /* 画像全体を綺麗に収める */
  }

  /* （以下はメニュー調整など既存のコードがあればそのまま残す） */
}

/* ナビゲーションバー */
.jeeko-main-nav {
  background: #fff;
  border-top: 1px solid #ffe6ef;
}
.jeeko-nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 画面幅が狭いPCでも折り返すように */
  max-width: 1200px; /* PCで広がりすぎないように */
}

/* リンクのデザイン */
.jeeko-nav-list li {
  margin: 0;
}
.jeeko-nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px; /* PCでのボタンの大きさ */
  text-decoration: none;
  color: #555;
  transition: .2s;
  min-width: 80px; /* アイコンの位置を揃える */
}
.jeeko-nav-list a:hover {
  background: #fff0f5;
  color: #ff6b9b;
}

/* アイコンと文字 */
.nav-icon {
  font-size: 1.4rem;
  margin-bottom: 5px;
  line-height: 1;
}
.nav-text {
  font-size: 0.9rem;
  font-weight: bold;
}

/* --- PC専用・スマホ専用の出し分け設定 --- */

/* デフォルト（PC）では全て表示 */
.pc-only {
  display: block;
}

/* --- スマホ用調整 (画面幅 768px以下) --- */
@media (max-width: 768px) {
  
  /* スマホでは「pc-only」クラスがついたメニューを隠す */
  .pc-only {
    display: none !important;
  }

  /* 残ったメニュー（ホーム・検索・お問合せ・規約）を均等に並べる */
  .jeeko-nav-list {
    justify-content: space-between;
    gap: 0;
  }
  .jeeko-nav-list li {
    flex: 1;
    text-align: center;
  }
  .jeeko-nav-list a {
    padding: 10px 0;
    min-width: auto;
  }
  .nav-icon {
    font-size: 1.3rem;
  }
  .nav-text {
    font-size: 0.75rem;
  }
}

/* =========================================
   プロフィールページ専用デザイン（紹介文ワイド版）
   ========================================= */

/* 全体のカード枠 */
.jeeko-profile-card {
  max-width: 680px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid #fff0f5;
  text-align: center;
}

/* ヘッダー部分 */
.jp-header { margin-bottom: 30px; }

/* 画像の設定（PC：168px） */
.jp-photo-wrap {
  width: 168px;
  height: 168px;
  margin: 0 auto 15px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(255,107,155,0.2);
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中身の画像設定 */
.jp-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}

.jp-name { font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 5px; letter-spacing: 1px; }
.jp-title { font-size: 0.95rem; color: #ff6b9b; font-weight: bold; }

/* ★修正：自己紹介文（横幅いっぱいに広げる） */
.jp-intro {
  display: block; /* ここを変更（inline-block -> block） */
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin: 0 auto 40px; /* 中央配置 */
  background: #fdfdfd;
  padding: 30px; /* 内側の余白を少し増やしました */
  border-radius: 12px;
  border: 2px dashed #eee;
  box-sizing: border-box; /* 枠からはみ出ないようにする */
}
.jp-intro p { margin-bottom: 15px; }
.jp-intro p:last-child { margin-bottom: 0; }

/* SNSエリア */
.jeeko-sns-area { margin-bottom: 40px; }
.sns-title { font-size: 0.9rem; color: #aaa; margin-bottom: 15px; letter-spacing: 2px; }
.jeeko-sns-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }

/* アイコンボタン */
.sns-btn {
  display: flex; justify-content: center; align-items: center;
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem;
  text-decoration: none; color: #fff !important; transition: .3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.sns-btn:hover { transform: translateY(-3px); opacity: 0.9; box-shadow: 0 6px 12px rgba(0,0,0,0.15); }

/* 各SNSの色 */
.sns-btn.insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.sns-btn.x { background: #000; }
.sns-btn.blog { background: #ffb6c1; border: 2px solid #ff6b9b; color: #fff; }
.sns-btn.threads { background: #000; }
.sns-btn.yt { background: #ff0000; }

/* 書籍紹介エリア */
.book-box-wrap {
  background: #fffaf0; border-radius: 16px; padding: 30px; border: 2px solid #ffeeba; position: relative; margin-top: 20px;
}
.book-box-title {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: #ff9f43; color: #fff; padding: 5px 20px; border-radius: 20px; font-weight: bold; font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.book-box { display: flex; align-items: center; gap: 20px; text-align: left; }
.book-image img { width: 120px; height: auto; border-radius: 5px; box-shadow: 3px 3px 10px rgba(0,0,0,0.1); }
.jp-booktitle { font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; color: #333; border-bottom: 2px solid #ffdec0; display: inline-block; }
.book-desc { font-size: 0.9rem; line-height: 1.6; margin-bottom: 15px; color: #666; }
.jeeko-amazon-btn {
  display: inline-block; background: #ff9900; color: #fff; padding: 10px 24px; border-radius: 30px;
  text-decoration: none; font-weight: bold; font-size: 0.9rem; box-shadow: 0 4px 0 #cc7a00; transition: .2s;
}
.jeeko-amazon-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #cc7a00; }
.jeeko-amazon-btn:active { transform: translateY(4px); box-shadow: none; }

/* スマホ対応 */
@media (max-width: 600px) {
  .jeeko-profile-card { padding: 25px 20px; border-width: 0; box-shadow: none; }
  .book-box { flex-direction: column; text-align: center; }
  .book-image img { width: 140px; }
  .jeeko-sns-row { gap: 8px; }
  .sns-btn { width: 50px; height: 50px; font-size: 1.5rem; }

  /* スマホのときだけ画像を元のサイズ（128px）に戻す */
  .jp-photo-wrap {
    width: 128px;
    height: 128px;
  }
}

/* =========================================
   詳細ページのイラスト表示サイズ調整
   ========================================= */

/* PCでの表示設定 */
body.attachment .entry-content img {
  max-height: 300px;    /* ★高さの上限（ここをお好みで調整） */
  width: auto;          /* 横幅は高さに合わせて自動調整 */
  max-width: 100%;      /* 画面からはみ出さない */
  
  display: block;
  margin: 0 auto;       /* 中央寄せ */
  border-radius: 12px;  /* 角を少し丸くする */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* ほんのり影をつけて見やすく */
}

/* スマホでの表示設定 */
@media (max-width: 768px) {
  body.attachment .entry-content img {
    max-height: 350px;  /* ★スマホではもう少し小さく */
  }
}

/* 詳細ページの画像を強制的にサイズ調整 */
.jeeko-single-img img {
  max-height: 500px !important; /* ★ここを好きな高さに（スマホは自動で縮みます） */
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* =========================================
   イラストタイトルの崩れ防止（1行で省略）
   ========================================= */
.jeeko-card p {
  /* レイアウト調整 */
  margin: 6px 0 8px !important; /* 画像との距離 */
  padding: 0 4px !important;    /* 左右に少し隙間を作る */
  width: 100%;                  /* 横幅いっぱい */
  
  /* ▼ 長い文字を強制的に「...」にする魔法の設定 */
  white-space: nowrap;      /* 改行を禁止する（絶対に1行にする） */
  overflow: hidden;         /* 枠からはみ出した文字は隠す */
  text-overflow: ellipsis;  /* 末尾を「...」にする */
  
  /* 文字サイズの調整 */
  font-size: 0.75rem;       /* スマホでも入るように少し小さめ */
  line-height: 1.4;
  color: #555;
}

/* スマホの時だけ、さらに文字を微調整 */
@media (max-width: 768px) {
  .jeeko-card p {
    font-size: 0.7rem;      /* 3列表示だと狭いので小さめに */
    margin: 4px 0 6px !important;
  }
}