/*
 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;
  /* ▼ 修正：上0px、左右20px、下10px にして全体を上に寄せました */
  padding: 0 20px 10px; 
  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;
  /* ▼ 修正：タイトル上の余白を少し確保し、下の余白(10px→5px)を狭くしました */
  margin-top: 15px; 
  margin-bottom: 5px; 
  line-height: 1.3;
}
.jeeko-hero p{ 
  color:#777; 
  margin-bottom: 5px; /* 下の余白も少しスッキリさせます */
}

@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: 0 20px 20px; /* 上0、左右20、下20 */
}

.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;
  width: 100%;
  
  /* スマホでも横並びにするための設定 */
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* 数字ボタンのデザイン（元のデザインをベースに調整） */
.jeeko-pagination .page-numbers {
  /* ▼ ここがポイント：数字を上下左右のど真ん中に配置 */
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  
  /* 元のデザイン設定 */
  margin: 0 !important;
  padding: 6px 10px !important; /* 元のサイズ感 */
  border-radius: 999px;         /* カプセル型の丸み */
  background: #fff;
  border: 1px solid #ffd6e0;    /* 薄いピンクの枠線 */
  color: #ff6b9b;               /* 文字色 */
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: normal;          /* 太字にしすぎない */
  line-height: 1;               /* ズレ防止 */
  min-width: 32px;              /* 最低限の幅を確保 */
  height: 32px;                 /* 高さも揃える */
}

/* 現在のページ（塗りつぶし） */
.jeeko-pagination .page-numbers.current {
  background: #ff6b9b;
  color: #fff;
  font-weight: 600;
  border-color: #ff6b9b;
}

/* ホバー時（ふわっとピンク） */
.jeeko-pagination .page-numbers:hover {
  opacity: 0.85;
  background: #fff0f5;
  transition: 0.2s;
}

/* もしリスト(ul/li)が出力されても崩れないようにする保険 */
.jeeko-pagination ul,
.jeeko-pagination li {
  display: contents !important; /* 枠を無効化して中身だけ表示 */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* =========================================
   画像が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: 0px;
}

/* ヘッダー画像エリア */
.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: 0px;
}

/* ヘッダー画像エリア */
.jeeko-header-logo {
  text-align: center;
  background: #fff;
  padding: 0;
}
/* ヘッダー画像エリア（修正版：高さ自動） */
.jeeko-header-logo img {
  /* ▼ 横幅の設定 */
  width: 100%;           /* 画面幅いっぱい */
  max-width: 1400px;     /* 最大幅（画像が巨大になりすぎないための上限） */

  /* ▼ 高さの設定（★ここを変更しました） */
  height: auto !important; /* 横幅に合わせて高さを自動調整 */
  
  /* ▼ 画像の表示設定 */
  object-fit: contain;   /* 画像全体をきれいに表示（トリミングしない） */
  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;
  }
}

/* =========================================
   ★PC版レイアウト修正：安全版（1行4枚にする）
   ========================================= */

/* デスクトップPC（画面幅1024px以上） */
@media (min-width: 1024px) {
  /* カードの幅を「20%（5分の1）」に設定して5列にする */
  .jeeko-card {
    /* 20% から隙間分を引く */
    flex: 0 0 calc(20% - 10px) !important;
    max-width: calc(20% - 10px) !important;
  }

  /* ギャラリー全体の隙間調整 */
  /* 5枚並びだと窮屈になるので、隙間を15px→10pxに狭めます */
  .jeeko-cat-gallery,
  #jeeko-rank-gallery,
  .jeeko-related-gallery {
    gap: 10px !important;
  }
}

/* スマホ版（画面幅768px以下）は3列のまま整える */
@media (max-width: 768px) {
  .jeeko-card {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
  }
}

/* =========================================
   ★詳細ページ（attachment）のヘッダー画像設定
   - PC: 非表示（ページ移動時のスクロール対策）
   - スマホ: 表示（デザインバランス重視）
   ========================================= */
@media (min-width: 769px) {
  body.attachment .jeeko-header-logo img,
  body.single-attachment .jeeko-header-logo img {
    display: none !important;
  }

  /* ヘッダーの余白も少し詰める（PCのみ） */
  body.attachment .jeeko-header,
  body.single-attachment .jeeko-header {
    margin-bottom: 10px !important; 
    border-bottom: none !important;
  }
}

/* =========================================
   ブログ記事（コラム）専用のデザイン修正
   ========================================= */

/* 1. 記事全体の幅を制限して中央寄せ（読みやすくする） */
body.single-post #main {
  width: 100% !important;
  max-width: 840px !important; /* 幅を程よく狭める */
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* 2. 記事全体を「白いカード」のデザインにする */
body.single-post .article {
  background: #fff;           /* 白背景 */
  padding: 50px;              /* 内側の余白 */
  border-radius: 24px;        /* 角を丸く */
  border: 2px solid #fff0f5;  /* 薄いピンクの枠線 */
  box-shadow: 0 10px 30px rgba(255, 182, 193, 0.15); /* ふんわり影 */
  margin-bottom: 40px;
}

/* スマホでのカード調整 */
@media (max-width: 768px) {
  body.single-post .article {
    padding: 30px 20px;       /* スマホでは余白を少し減らす */
    border-radius: 16px;
  }
}

/* 3. 記事タイトルのデザイン */
body.single-post .entry-title {
  font-size: 1.8rem;
  color: #555;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
  border-bottom: none; /* Cocoonのデフォルト線を消す */
}

/* 4. 日付とカテゴリの位置調整 */
body.single-post .date-tags {
  text-align: center;
  margin-bottom: 40px;
  color: #999;
  font-size: 0.9rem;
}

/* 5. 見出し（H2）のデザイン：ピンクの吹き出し風 */
body.single-post .entry-content h2 {
  background: #fff0f5;            /* 薄いピンク背景 */
  padding: 15px 20px;
  border-radius: 12px;
  color: #ff6b9b;                 /* 濃いピンク文字 */
  font-size: 1.3rem;
  border: none;                   /* デフォルト線を消す */
  border-left: 6px solid #ff6b9b; /* 左にアクセント線 */
  margin: 50px 0 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* 6. 見出し（H3）のデザイン：ピンクの点線 */
body.single-post .entry-content h3 {
  font-size: 1.15rem;
  color: #555;
  padding: 0 0 8px 0;
  border: none;
  border-bottom: 3px dotted #ffb7cc; /* かわいい点線 */
  margin: 40px 0 20px;
}

/* 7. 本文の読みやすさ調整 */
body.single-post .entry-content p {
  font-size: 1rem;
  line-height: 2.2;      /* 行間を広めにとって読みやすく */
  color: #555;
  margin-bottom: 30px;
  letter-spacing: 0.05em; /* 文字間隔を少し開ける */
}

/* 8. カテゴリタグのデザイン */
.cat-link, .category-link {
  background: #ffb7cc;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  display: inline-block;
  transition: .2s;
}
.cat-link:hover, .category-link:hover {
  background: #ff8fa3;
  color: #fff;
  transform: translateY(-2px);
}

/* プロフィールページ用 追加スタイル（SNSボタン・バッジ調整版） */

/* --- ヘッダー下の総フォロワー数バッジ --- */
.jp-stats-badge-wrap {
  text-align: center;
  margin: 15px 0 5px;
}
.jp-stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff0f5;
  border: 2px solid #ffb6c1;
  border-radius: 99px;
  padding: 4px 16px 4px 10px;
  box-shadow: 0 2px 5px rgba(255,182,193,0.3);
}
.jp-stats-label {
  font-size: 11px;
  background: #ff6b9b;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
}
.jp-stats-num {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b9b;
  letter-spacing: 0.5px;
}

/* --- 活動内容・ニュースのボックス --- */
.jp-activity-box,
.jp-news-box {
  background: #fdfdfd;
  border: 1px dashed #ffb7cc;
  border-radius: 12px;
  padding: 30px 20px 20px;
  margin: 25px 0;
  text-align: center;
  position: relative;
}
.jp-activity-box h4,
.jp-news-box h4 {
  font-size: 1rem;
  color: #ff6b9b;
  background: #fff;
  display: inline-block;
  padding: 0 10px;
  font-weight: bold;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
/* テキスト左寄せ設定 */
.jp-activity-box p,
.jp-news-box p {
  text-align: left;
  display: inline-block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* --- 中段のSNSフォロワーバッジ（白カプセル） --- */
.jp-middle-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0;
}
.jp-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px; /* カプセル型 */
  padding: 8px 20px;
  font-size: 14px;
  color: #555;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.jp-stat-pill i { font-size: 16px; }

/* --- 下段のSNSリンクボタン（カラフルな丸） --- */
.jeeko-sns-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.sns-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;   /* 画像に合わせて大きめの正円 */
  height: 55px;
  border-radius: 50%;
  font-size: 24px; /* アイコンサイズ */
  text-decoration: none;
  color: #fff !important;
  transition: .3s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.sns-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  opacity: 0.9;
}

/* 各ボタンの色設定 */
.sns-btn.insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.sns-btn.x {
  background: #000;
}
.sns-btn.threads {
  background: #000;
}
.sns-btn.yt {
  background: #ff0000;
}
.sns-btn.blog {
  background: #ff9fb8; /* 優しいピンク */
  border: 2px solid #ff7fa0; /* 濃いピンクの縁取り（画像再現） */
  box-sizing: border-box;
}
/* ブログアイコンだけ少し小さく調整 */
.sns-btn.blog i { font-size: 20px; }

/* スマホ調整 */
@media (max-width: 600px) {
  .jp-middle-stats { gap: 8px; }
  .jp-stat-pill { font-size: 12px; padding: 6px 14px; }
  .sns-btn { width: 45px; height: 45px; font-size: 20px; }
  .jeeko-sns-row { gap: 10px; }
}

/* Follow Meエリアを強制的に中央寄せにする */
.jeeko-sns-area {
  text-align: center !important;
  margin: 30px 0; /* 上下に少し余白をあける */
}

/* ついでにボタンの並びも中央揃えを強化 */
.jeeko-sns-row {
  justify-content: center !important;
}

/* =========================================
   スマホ表示（600px以下）のレイアウト修正
   ========================================= */
@media (max-width: 600px) {

  /* ①「最近のジェーコ」の改行を防ぐ */
  .jp-news-box h4 {
    white-space: nowrap; /* 強制的に1行にする */
    font-size: 0.9rem;   /* 文字をほんの少し小さく */
    width: auto;         /* 幅をなりゆきに */
    padding: 0 15px;     /* 横の余白を確保 */
  }

  /* ② SNSフォロワー数バッジを横一列にする */
  .jp-middle-stats {
    flex-wrap: nowrap !important; /* 折り返し禁止 */
    gap: 4px !important;          /* 隙間を詰める */
    overflow-x: auto;             /* 万が一はみ出たらスクロール（念のため） */
    justify-content: center;      /* 中央寄せ */
  }
  
  .jp-stat-pill {
    font-size: 10px !important;   /* 文字サイズを小さく */
    padding: 6px 8px !important;  /* カプセルの余白を削る */
    white-space: nowrap;          /* 改行禁止 */
    flex-shrink: 1;               /* 幅が足りない時は縮むことを許可 */
  }
  
  .jp-stat-pill i {
    font-size: 12px !important;   /* アイコンも小さく */
    margin-right: 2px;
  }

  /* ③ SNSリンクボタン（丸）を5つ横並びにする */
  .jeeko-sns-row {
    flex-wrap: nowrap !important; /* 折り返し禁止 */
    gap: 8px !important;          /* ボタン同士の隙間を詰める */
  }

  .sns-btn {
    /* 5つ並べるためにサイズを小さくする */
    width: 42px !important;       
    height: 42px !important;
    font-size: 20px !important;   /* 中のアイコンサイズ */
    flex-shrink: 0;               /* 形が潰れないようにする */
  }
}

/* =========================================
   トップページ：サイドバー幅とレイアウトの完全補正
   ========================================= */
.jeeko-layout {
  gap: 40px !important;
}
.jeeko-sidebar {
  width: 300px !important;
  flex-shrink: 0 !important;
}
.jeeko-main {
  max-width: 820px !important;
}

/* =========================================
   サイドバー：カテゴリボタン かわいい化カスタム
   ========================================= */

/* ボタンのコンテナ（敷き詰め設定） */
.jeeko-tabs-sidebar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* ボタン間の隙間 */
}

/* ボタン本体のデザイン */
.jeeko-tabs-sidebar .sidebar-tab-btn {
  /* 基本設定（敷き詰め用） */
  display: inline-flex !important; /* アイコンと並べるためflexに */
  align-items: center;
  width: auto !important; /* 文字幅に合わせる */
  margin-bottom: 0 !important;
  flex-grow: 0;

  /* ▼ ここから「かわいい」装飾 ▼ */
  padding: 8px 16px !important; /* 少しゆったりめに */
  border-radius: 30px !important; /* コロンと丸いカプセル型 */
  background: #fff; /* 通常は白背景 */
  border: 2px solid #ffd6e0 !important; /* 薄いピンクの太め枠線で縁取り */
  color: #ff6b9b !important; /* 文字は濃いピンク */
  font-size: 13px; /* 文字は少し小さくして上品に */
  font-weight: bold; /* 太字でポップに */
  text-decoration: none;
  box-shadow: 0 3px 0px rgba(255, 214, 224, 0.8); /* 下に厚み（影）をつけて立体的に */
  transition: all 0.2s ease; /* ふんわり動くアニメーション設定 */
}

/* 先頭にアイコンをちょこんとつける（タグマーク🏷️） */
.jeeko-tabs-sidebar .sidebar-tab-btn::before {
  content: "🏷️"; /* お好きな絵文字に変えてもOKです！ */
  font-size: 14px;
  margin-right: 6px;
  transition: all 0.2s ease;
}
/* 「人気ランキング」「新着」だけ専用アイコンにする */
a.sidebar-tab-btn[href*="/ranking/"]::before { content: "👑"; }
a.sidebar-tab-btn[href*="/new/"]::before { content: "🆕"; }


/* マウスを乗せた時の動き（ホバー効果） */
.jeeko-tabs-sidebar .sidebar-tab-btn:hover {
  background: #fff0f5; /* ほんのり薄ピンク背景に */
  color: #ff4f8b !important; /* 文字色を少し濃く */
  transform: translateY(2px); /* 実際にボタンを押したように少し沈む */
  box-shadow: 0 1px 0px rgba(255, 214, 224, 1); /* 影が減って沈んだように見える */
  border-color: #ffb6c1 !important;
}
.jeeko-tabs-sidebar .sidebar-tab-btn:hover::before {
  transform: rotate(-15deg) scale(1.2); /* アイコンが少し傾いて大きくなる（かわいい！） */
}

/* 選択中（今見ているページ）のデザイン */
.sidebar-tab-btn.is-current {
  background: #ff6b9b !important; /* 全体を濃いピンクで塗りつぶし */
  border-color: #ff6b9b !important;
  color: #fff !important; /* 文字は白抜き */
  box-shadow: none !important; /* 影をなくしてフラットに */
  transform: translateY(3px) !important; /* 押された状態で固定 */
  pointer-events: none; /* クリックできないようにする */
}

/* =========================================
   サイドバー：見出し（カテゴリ・検索）のゆるかわ化
   ========================================= */
.jeeko-sidebar-box h3 {
  text-align: center;
  font-size: 1.2rem;
  color: #ff6b9b; /* メインの濃いピンク色 */
  font-weight: bold;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 3px dotted #ffb6c1; /* かわいいピンクの点線 */
  letter-spacing: 2px; /* 文字の間隔を少し開けて優しい印象に */
}

/* =========================================
   サイドバー：Instagram埋め込みエリア
   ========================================= */
.jeeko-insta-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  margin: 10px auto 0;
}

/* インスタ特有の「横幅326px」の強制指定を上書きして300pxに収める */
.jeeko-insta-wrap iframe.instagram-media,
.jeeko-insta-wrap blockquote.instagram-media {
  min-width: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* インスタへのリンクボタン（小さめ） */
.jeeko-insta-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 24px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(220, 39, 67, 0.3);
  transition: 0.2s;
}
.jeeko-insta-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* サイドバーのカテゴリボタンをコンパクトにして3列並べる調整 */
.jeeko-tabs-sidebar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px; /* 縦の隙間8px、横の隙間4pxに縮小 */
  justify-content: flex-start;
}

.jeeko-tabs-sidebar-btns .sidebar-tab-btn {
  padding: 6px 12px !important; /* ボタンの内側の余白を小さく */
  font-size: 0.7rem !important; /* 文字サイズを少しだけ小さく */
  white-space: nowrap; /* 文字が途中で改行されるのを防ぐ */
}

/* ▼▼▼ リクエストページの丸型SNSボタン ▼▼▼ */
.jeeko-circle-sns-btns {
    margin: 25px 0 35px;
}
.jeeko-circle-sns-btns .sns-lead {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 12px;
    letter-spacing: 2px;
}
.jeeko-circle-sns-btns .sns-icon-wrap {
    display: flex;
    justify-content: flex-start; /* 左寄せ（中央にしたい場合は center に変更） */
    gap: 15px;
    flex-wrap: wrap;
}
.jeeko-circle-sns-btns .sns-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff !important;
    font-size: 24px;
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.jeeko-circle-sns-btns .sns-circle:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    color: #fff !important;
}

/* 各SNSのブランドカラー */
.bg-insta { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.bg-x { background: #000; }
.bg-threads { background: #000; }
.bg-youtube { background: #ff0000; }
.bg-blog { background: #ff99b4; } /* ブログのピンク色 */

/* ▼▼▼ トップページのイラスト一覧を左詰めにする（PC・スマホ完全対応） ▼▼▼ */
.jeeko-home .jeeko-cat-gallery {
  justify-content: flex-start !important;
  justify-content: start !important; /* Gridレイアウト用の左詰め */
}

/* スマホ表示での強制左詰めと、中央寄せの解除 */
@media (max-width: 768px) {
  .jeeko-home .jeeko-cat-gallery {
    justify-content: flex-start !important;
    justify-content: start !important;
  }
  .jeeko-home .jeeko-cat-gallery .jeeko-card {
    margin-left: 0 !important; /* スマホ特有の自動中央寄せを解除 */
  }
}