/*
 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:100px;     /* 高さ調整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:10px;
  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:center;
  gap:30px;
  margin:30px auto 40px;
  flex-wrap:wrap;
  border-bottom:2px solid var(--pink-soft);
  padding-bottom:10px;
}
.jeeko-tab-btn{
  background:none;
  border:none;
  font-size:1.1rem;
  color:#888;
  cursor:pointer;
  padding:5px 10px;
  position:relative;
  transition:color .3s ease;
}
.jeeko-tab-btn:hover{ color:var(--pink); }
.jeeko-tab-btn.active{
  color:var(--pink);
  font-weight:600;
}
.jeeko-tab-btn.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:3px;
  background-color:var(--pink);
  border-radius:3px;
}

@media (max-width:768px){
  body.home .jeeko-tabs{
    margin:20px 0 15px !important;
    gap:18px;
  }
  .jeeko-tab-btn{ font-size:1rem; }
}

/* =========================================================
   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;
}
.jeeko-cat-gallery.active{ display:flex; }

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

/* カード */
.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(12.5% - 6px);
  max-width:calc(12.5% - 6px);
  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;
}
.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.5rem;
 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;   /* お好みで -5〜-30px など */

}

/* デスクトップは横並び固定 */
@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;        /* ← flex に変更！ */
  align-items: center;         /* ← 縦方向を完全に中央 */
  justify-content: center;     /* ← 横も中央 */
  padding: 16px 40px;          /* ← お好みで調整してOK */
  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;            /* ← ここめちゃ重要！ */
}

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

/* フォーム全体を中央揃え */
.cf7-jeeko {
  max-width: 800px;
  margin-left: calc(50% - 430px); /* 中央より少し左へ */
  margin-right: auto;
}


/* 入力欄が右寄りに見える原因（inputなどの幅100%＋周囲padding）を修正 */
.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;
}

/* メインコンテンツ幅を広げる */
#content,
#content-in,
.main,
.container {
  max-width: 1200px !important;
  width: 100% !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;
}

/* サイドバー用タブ（aタグ版） */
.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;
}


/* ===== スマホは1カラムに戻す（サイドバー非表示） ===== */
@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;   /* 上限は 820px */
  width: 100%;        /* 中身は親（jeeko-main）の幅にフィット */
  margin: 0 auto;
  box-sizing: border-box;
}


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

.jeeko-sidebar {
  width: 200px; /* あなたが調整した値のままでOK */
  position: relative;
  top: 20px;
  margin-left: 20px; /* ここも今の値のまま */
  font-family: inherit; /* ← 追加（bodyのKiwi Maruをそのまま使う） */
}

/* ▼ ホーム用「もっと見る」ボタン */
.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);
}

/* =========================================
   ヘッダ上の固定ページメニュー
========================================= */
/*.jeeko-header-links{
  max-width: 1200px;
  margin: 8px auto 4px;   /* 上下余白はお好みで */
/*  padding: 4px 16px;
}

.jeeko-header-links ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;  /* 右寄せ。中央にしたければ center */
/*  gap: 10px;
}

/* ▼ PC用：ヘッダーメニューの余白調整 */
.jeeko-header-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;  /* ← ここが枠と文字の余白（上下・左右） */
  font-size: 0.8rem;            /* ← PCの文字サイズ */
 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;
}

/* スマホでは少し間隔を詰めるのもアリ */
@media (max-width: 768px){
  .jeeko-header-links{
    padding: 2px 6px;   /* ここも少しキュッと */
  }

  .jeeko-header-links ul{
    justify-content: center;
    gap: 4px;           /* ボタン同士の間隔も少し狭く */
  }

  .jeeko-header-links a{
    padding: 2px 8px;   /* ★ スマホ用：さらに小さめ余白 */
    font-size: 0.7rem;  /* ★ スマホ用：文字サイズも小さく */
  }
}

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

.jeeko-global-header{
  max-width: none;
  width: 100%;        /* 画面幅いっぱい */
  margin: 0;
  padding: 8px 16px 0; /* 右端からの余白はここで調整 */
}


/* 上段：左ロゴ＋右メニューを横並びに */
.jeeko-header-top{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左ロゴ / 右メニュー */
  gap: 16px;
}

/* ロゴ画像 */
.jeeko-logo img{
  height: 40px;       /* ロゴの大きさ。お好みで調整 */
  width: auto;
  display: block;
}

/* ヘッダーメニュー（PC） */
.jeeko-header-links{
  display: flex;
  gap: 10px;
  padding: 0;
  margin-left: auto;            /* ← これで右端に寄せる */
}

/* ▼ ハンバーガーメニューボタンの基本 */
.jeeko-menu-toggle{
  display: none;              /* PCでは非表示 */
  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);}
}