/*
Theme Name: Cocoon Child
Template: cocoon-master
*/
@charset "UTF-8";

/* ================================
   Base
================================ */
:root{
  --c-text:#111;
  --c-text-weak:#555;
  --c-card:#fff;
  --shadow-s:0 3px 10px rgba(0,0,0,.05);
  --shadow-m:0 6px 16px rgba(0,0,0,.08);
  --accent:#f7a1c7; /* タイトル帯のピンク枠 */
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  background:#faf6f9;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

a{ text-decoration:none; }

img{ max-width:100%; height:auto; display:block; }

/* 記事タイトル等のピンク化を抑止（黒系へ統一） */
.entry-title,
.entry-title a,
.post .entry-title a,
.entry-card-title a,
.archive .entry-card-title a,
.widget .entry-card-title a,
.widget_recent_entries a,
.widget_new_entries a,
.main .entry-card-title a{
  color:var(--c-text) !important;
}
.entry-title a:hover,
.entry-card-title a:hover,
.widget a:hover{ color:#000 !important; }

/* ================================
   Top：カテゴリーカード（4列）
================================ */
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1200px;
  margin:30px auto;
  padding:0 20px;
}
.category-grid .category-card{
  display:block;
  background:linear-gradient(135deg,#b48dd3,#ff8db7);
  color:#fff;
  text-align:center;
  padding:16px 10px;           /* 軽く圧縮 */
  border-radius:15px;
  font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition:transform .25s, box-shadow .25s;
}
.category-grid .category-card i{
  display:block;
  font-size:22px;
  margin-bottom:6px;
  color:#fff;
}
.category-grid .category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,.26);
}
@media (max-width: 768px){
  .category-grid{ gap:12px; }
  .category-grid .category-card{ padding:12px 8px; font-size:15px; }
  .category-grid .category-card i{ font-size:20px; }
}

/* ================================
   特集（Feature）カード
   - テキスト余白を最小化
   - タイトル帯＝文字幅だけ
   - スマホ2列固定
   ※HTML: <section class="feature-section"> ... </section>
================================ */
.feature-section .feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  max-width:1000px;
  margin:0 auto;
  padding:0 16px;
}
.feature-section .feature-card{
  display:flex;
  flex-direction:column;
  gap:6px;                    /* 画像・タイトル・説明の間隔 */
  background:var(--c-card);
  border-radius:12px;
  box-shadow:var(--shadow-m);
  overflow:hidden;
  transition:transform .2s ease;
  padding:8px;                /* カード内側余白を小さく */
}
.feature-section .feature-card:hover{ transform:translateY(-3px); }

/* 画像：低め固定で圧縮（必要に応じ 120〜150px） */
.feature-section .card-image{ height:130px; overflow:hidden; }
.feature-section .card-image img{
  width:100%; height:100%; object-fit:cover;
}

/* タイトル帯：文字幅だけの細い帯 */
.feature-section .card-title{
  display:inline-block;       /* ← 幅100%を回避して“文字幅”に */
  width:auto;                 /* 念のため */
  margin:4px 6px 0;
  padding:6px 8px;            /* もっと薄く→ 4px 6px でもOK */
  font-size:1rem;
  line-height:1.2;
  color:inherit;
  border:2px solid var(--accent);
  border-radius:6px;
  background:transparent;
}

/* 説明文：余白を最小化して縦幅圧縮 */
.feature-section .card-description{
  margin:2px 6px 8px;         /* 上下の余白を極小に */
  padding:0;
  font-size:.95rem;
  line-height:1.35;
  color:var(--c-text-weak);
}

/* スマホは2列固定 */
@media (max-width: 600px){
  .feature-section .feature-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .feature-section .card-image{ height:110px; }
}

/* ================================
   Beauty ランディング（使う場合のみ）
================================ */
.beauty-landing{ overflow-x:hidden; margin-bottom:12px; }
.beauty-landing h2{ margin:0 0 8px; }
.beauty-landing .beauty-cat-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px; margin:0 auto 8px; padding:0; align-items:start;
}
@media (max-width:1100px){
  .beauty-landing .beauty-cat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .beauty-landing .beauty-cat-grid{ grid-template-columns:1fr; }
}
.beauty-landing .beauty-card{
  background:#fff; border:1px solid #eee; border-radius:10px;
  box-shadow:var(--shadow-s); overflow:hidden;
}
.beauty-landing .beauty-card__link{ display:block; padding:8px; color:#222; }
.beauty-landing .beauty-card__link img{
  width:100%; height:110px; object-fit:cover; border-radius:6px;
}
.beauty-landing .beauty-card__link h3{
  margin:6px 6px 2px; font-size:.95rem; line-height:1.25; color:#333;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.beauty-landing .beauty-card__link p{
  margin:0 6px 6px; font-size:.85rem; line-height:1.35; color:#555;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ================================
   審査用：必要ならアフィリエイト系を非表示
================================ */
.affiliate-link, .affiliate-box, .affiliate-button, .affi-box, .ad-link,
a[href*="a8.net"], img[src*="a8.net"], script[src*="a8.net"], iframe[src*="a8.net"]{
  display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; opacity:0 !important;
}
/* --- 特集カード 最終圧縮 --- */

/* 画像を低くして全体の縦幅を縮小 */
.feature-section .card-image{
  height: 110px !important; /* 現在130px→110pxに */
}
@media (max-width: 600px){
  .feature-section .card-image{
    height: 95px !important; /* スマホはさらに低く */
  }
}

/* タイトル帯の余白をさらに削る */
.feature-section .card-title{
  padding: 3px 6px !important; /* 薄く */
  font-size: 0.95rem !important;
}

/* 説明文の余白をほぼゼロに */
.feature-section .card-description{
  margin: 0 6px 4px !important; /* 上0 下4 */
  line-height: 1.3 !important;
}

/* スマホでカード間の余白も詰める */
@media (max-width: 600px){
  .feature-section .feature-grid{
    gap: 10px !important;
  }
}
/* --- 特集カード 説明文を完全非表示 --- */
.feature-section .card-description{
  display: none !important;
}
/* 特集カード：説明文削除後に間隔も最小化 */
.feature-section .card-image {
  margin-bottom: 4px !important; /* 画像とタイトルの距離を詰める */
}

.feature-section .card-title {
  margin: 2px 6px 0 !important; /* タイトル上余白もさらに圧縮 */
  padding: 3px 6px !important;  /* タイトル帯をさらに薄く */
}
/* 特集カードの上下余白を削除 */
.feature-section .feature-card {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.feature-section .card-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.feature-section .card-description {
  display: none !important; /* すでに非表示の場合は不要 */
}
/* 特集カード下の余白を完全除去 */
.feature-section .feature-card {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.feature-section .card-title {
  margin-bottom: 0 !important;
}

.feature-section .card-description {
  display: none !important; /* 説明文を完全非表示 */
  margin: 0 !important;
  padding: 0 !important;
}
/* 特集カード周りの余白を徹底的に削除 */
.feature-section .feature-grid {
  gap: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.feature-section .feature-card {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

.feature-section .card-title {
  margin-bottom: 0 !important;
}

.feature-section .card-description {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.feature-section .feature-card {
  box-shadow: none !important;
}