/* ============================================================
   🌿 Totonou Care Navi Blog UI 2025 – Final Integrated Version
   Author: GPT-5 | Theme: Japanese Wellness × Calm Technology
   ============================================================ */


/* ----------------------------------------------
   🩶 Base Layout（本文コンテナ）
---------------------------------------------- */
.blog-content {
  --font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-accent: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --color-text: #333333;
  --color-muted: #4b4b4b;
  --color-accent: #7ca982;
  --accent-rgb: 124, 169, 130; /* ← これを追加 */
  --color-accent-light: #e7f3eb;
  --color-bg-card: #ffffffd9;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.06);
  --radius: 12px;

  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 2.0;
  font-size: 1.02rem;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.5em 2em;
  background: linear-gradient(180deg, #fafdfa 0%, #f6f8f7 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ----------------------------------------------
   ✨ Headings
---------------------------------------------- */
.blog-content h1, .blog-content h2, .blog-content h3 {
  font-family: var(--font-accent);
  color: var(--color-text);
  line-height: 1.4;
  scroll-margin-top: 6rem;
}

/* ----------------------------------------------
   🪶 Meta情報（タイトル上部右寄せ）
---------------------------------------------- */
.blog-meta-top {
  text-align: right;
  font-size: 0.85rem;
  color: #5a5a5a;
  margin-bottom: 0.25em; /* ← ①を詰める */
  line-height: 1.4;
}
.blog-meta-top .blog-date,
.blog-meta-top .blog-updated,
.blog-meta-top .blog-categories {
  display: inline-block;
  margin-left: 0.5em;
}
.blog-meta-top .blog-categories a {
  color: #23543b;
  text-decoration: none;
  font-weight: 500;
}
.blog-meta-top .blog-categories a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------
   🌈 Blog Title : 回転
---------------------------------------------- */

.blog-title {
  position: relative;
  padding: 1.5em 1em;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
  border-radius: 22px;
  background: #fff8;
  backdrop-filter: blur(12px);
}

.blog-title::before {
  content: "";
  position: absolute;
  width: 180%;
  height: 180%;
  top: -40%; left: -40%;
  background: conic-gradient(var(--color-accent), transparent 60%);
  border-radius: 50%;
  animation: spin 22s linear infinite;
  opacity: 0.3;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------
   🖼 ファーストビュー（横長）
---------------------------------------------- */
.blog-fv {
  margin: 1em 0 1.4em; /* ← タイトル直下を少し詰める */
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}
.blog-fv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-fv.no-thumb {
  display: none;
}

/* ----------------------------------------------
   🪷 Pro Heading Design
---------------------------------------------- */

/* --- H2（既存のまま） --- */
.blog-content h2 {
  --grad: conic-gradient(from 90deg, var(--color-accent), transparent 70%);
  background: var(--grad);
  background-size: 300% 300%;
  padding: 0.6em 0.8em;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
  animation: moveGrad 20s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes moveGrad {
  to { background-position: 150% 150%; }
}

/* ----------------------------------------------
   🛡 H3：六角形タグ（小さめ）
---------------------------------------------- */
.blog-content h3 {
  position: relative;
  padding-left: 2.4em; /* ← 六角形縮小に合わせて余白も調整 */
  margin-top: 2.4em;

  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: 0.02em;

  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 4px;
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}

/* 六角形アイコン（小型版） */
.blog-content h3::before {
  content: "";
  position: absolute;
  left: 0.8em;
  top: 50%;
  width: 1.2em;  /* ← 小さくした */
  height: 1.2em; /* ← 小さくした */
  transform: translateY(-50%) rotate(90deg);
  
  background: var(--color-accent);

  -webkit-clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );

  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4); /* 影も少し弱め */
}

/* ----------------------------------------------
   🟦 H4（控えめだけど分かりやすい小見出し）
   - Zenn / Qiitaの小見出しを参考にした軽量デザイン
---------------------------------------------- */

.blog-content h4 {
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.8em;
  padding-left: 0.7em;
  letter-spacing: 0.01em;

  /* 左ラインのアクセント */
  border-left: 3px solid rgba(var(--accent-rgb), 0.7);
}

.blog-content h4::after {
  content: "";
  position: absolute;
  bottom: -0.35em;
  left: 0.1em;
  width: 1.8em;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.28;
  border-radius: 2px;
}
/* ----------------------------------------------
   📱 モバイル最適化（余白①③圧縮・タイトル縮小）
---------------------------------------------- */
@media (max-width: 768px) {
  .blog-content {
    padding: 2em 1.2em;
    font-size: 0.95rem;
  }
  .blog-meta-top {
    font-size: 0.75rem;
    margin-bottom: 0.1em; /* ← ①圧縮 */
  }
  .blog-title {
    font-size: 1.15rem;  /* ← 小型端末で最小に */
    margin-top: 0.8em;
    margin-bottom: 0.3em; /* ← ③圧縮 */
    padding: 0.6em 0.4em;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
  }
  .blog-fv {
    aspect-ratio: 16 / 10;
    margin: 0.8em 0 1.2em;
  }
  .blog-content h2 {
    font-size: 1.2rem;
    margin-top: 2em;
  }
}

/* ----------------------------------------------
   📖 TOC (目次) – detailsタグ対応版
---------------------------------------------- */
.toc-box {
  background: var(--color-bg-blur);
  border: 1px solid #d8e5d6;
  border-radius: var(--radius);
  padding: 1.3em 1.4em;
  margin: 1.2em 0 2em;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.toc-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.toc-box details {
  border: none;
}

.toc-box summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent);
  border-bottom: 1px solid #cfe2cc;
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
  list-style: none;
  position: relative;
}

.toc-box summary::-webkit-details-marker {
  display: none;
}

.toc-box summary::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: bold;
  transition: transform 0.3s ease;
}

.toc-box details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.toc-box ul {
  list-style-type: disc;
  list-style-position: inside;
  margin: 0.5em 0 0;
  padding-left: 0.4em;
}

.toc-box li {
  margin: 0.4em 0;
  line-height: 1.7;
}

.toc-box a {
  color: #23543b !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease, background 0.25s ease;
}

.toc-box a:hover {
  color: #0f3d2a;
  background: rgba(35, 84, 59, 0.08);
  border-radius: 4px;
  padding: 0 0.2em;
}

/* ----------------------------------------------
   💬 Text Blocks
---------------------------------------------- */
.blog-content p {
  margin: 1.5em 0;
  text-align: justify;
}
.blog-content a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); /* さりげない下線 */
  padding-bottom: 1px;
}

.blog-content a:hover {
  color: var(--color-accent);
  border-bottom-color: rgba(var(--accent-rgb), 0.45);
  text-decoration: none;
}
.blog-content a[href^="http"]:not([href*="totonoucare.com"]):after {
  content: "🛒";
  font-size: 0.85em;
  margin-left: 4px;
  opacity: 0.7;
}

/* ============================================================
   🟩 Default List Style – Square Bullet（本文の通常箇条書き）
   ※ selfcare-list / references / checklist など特殊ULとは非干渉
   ============================================================ */

.blog-content > ul,
.blog-content > ol {
  margin: 1.2em 0 1.4em 1.2em;
  padding-left: 0.2em;
  line-height: 1.9;
}

/* --- UL：四角バレット --- */
.blog-content > ul {
  list-style: none; /* デフォルト丸を消す */
}

.blog-content > ul > li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1.1em;  /* 四角分の余白 */
}

.blog-content > ul > li::before {
  content: "";
  width: 0.48em;
  height: 0.48em;
  background: var(--color-accent); /* 落ち着いた緑 */
  border-radius: 2px;              /* 四角を少し柔らかくする */
  position: absolute;
  left: 0;
  top: 0.6em;                      /* 行中央に来るよう調整 */
  transform: translateY(-50%);
  opacity: 0.9;                    /* 主張しすぎないトーン */
}

/* --- OL：通常の数字デザイン（読みやすいよう軽調整） --- */
.blog-content > ol {
  list-style: decimal;
}

.blog-content > ol > li {
  margin-bottom: 0.6em;
}

/* ----------------------------------------------
   💡 Tips & Notes
---------------------------------------------- */
.tip-card {
  background: #ffffff; /* 真っ白で背景との境目を明確に */
  border-left: 5px solid var(--color-accent);
  padding: 1.2rem 1.5rem;
  margin: 2em 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 80, 40, 0.08); /* 緑系の影 */
  transition: all 0.3s ease;
}
.tip-card:hover {
  box-shadow: 0 4px 16px rgba(0, 80, 40, 0.15);
  transform: translateY(-2px);
}

.note-box {
  background: linear-gradient(135deg, #fffbe8, #fff6c5);
  border-left: 5px solid #f3cf00;
  padding: 1.2rem 1.5rem;
  margin: 2em 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.3s ease;
}
.note-box:hover {
  box-shadow: 0 0 15px rgba(243, 207, 0, 0.25);
}


/* ----------------------------------------------
   🌿 Mini Section（小コラムブロック）明るめ補色系
---------------------------------------------- */
.mini-section {
  background: #fffdfc; /* ほぼ白。ほんのり暖かみを加えて浮かせる */
  border-left: 4px solid var(--color-accent);
  padding: 1.1rem 1.3rem;
  margin: 2em 0;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 50, 25, 0.05);
  transition: all 0.3s ease;
}
.mini-section:hover {
  background: #ffffff; /* hoverで純白にトーンアップ */
  box-shadow: 0 5px 16px rgba(0, 60, 30, 0.1);
  transform: translateY(-2px);
}
.mini-section h3 {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--color-accent);
}
.mini-section p {
  margin: 0.6em 0 0;
  color: var(--color-text);
}

/* ----------------------------------------------
   ✅ Checklist（まとめ・要点リスト）
---------------------------------------------- */

.checklist ul {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  border-left: 3px solid var(--color-accent);
}

.checklist li {
  position: relative;
  padding: 0.8em 0.8em 0.8em 2em;
  margin-bottom: 0.6em;
  line-height: 1.6;
  border-radius: 6px;
  background: #f9f9f9;
}

.checklist li::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0.5em;
  transform: translateY(-50%);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px #fff inset;
}

.checklist {
  padding: 1.2em 1.3em;
  border: 1px solid #dfe8e2; /* 落ち着いた薄いグリーン枠 */
  border-radius: 10px;
  background: #fbfdfc;      /* ほぼ白の柔らかい背景 */
  box-shadow: 0 3px 12px rgba(0, 50, 25, 0.05); /* 影もすごく薄く */
  margin: 2em 0;
}

/* 内側のリストはそのまま使う */
.checklist ul {
  list-style: none;
  margin: 0.8em 0 0;
  padding: 0;
  border-left: 3px solid var(--color-accent);
}

/* 各項目（既存 + 微調整） */
.checklist li {
  position: relative;
  padding: 0.8em 0.8em 0.8em 2em;
  margin-bottom: 0.6em;
  line-height: 1.6;
  border-radius: 6px;
  background: #fff;  /* 内側は白にするとより“カード感”が出る */
  border: 1px solid #f0f5f2; /* ほんの少しだけ境界 */
}

/* チェックアイコン（既存のまま） */
.checklist li::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0.5em;
  transform: translateY(-50%);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px #fff inset;
}

/* 最後の要素の下マージン消す */
.checklist li:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------
   🧘‍♀️ Self-Care Cards（限定カードレイアウト）
---------------------------------------------- */
.selfcare-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6em;
  list-style: none;
  padding: 0;
}
.selfcare-list li {
  background: var(--color-bg-card);
  border: 1px solid #eaeaea;
  border-radius: var(--radius);
  padding: 1.3em 1.4em;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.selfcare-list li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

/* ============================================================
   🌿 Affiliate Box – Bold Green Frame × Glass (Totonou Ver.)
   ============================================================ */

.affiliate-box {
  position: relative;
  padding: 1.9em 1.7em;
  margin: 2.8em 0;

  /* 角丸なし（完全フラット） */
  border-radius: 0;

  /* ガラス背景（清潔感） */
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* ✨ 太めの緑枠（ブログのアクセントカラーと連動） */
  border: 3px solid rgba(var(--accent-rgb), 0.65);

  /* 内側の光（ガラスの反射感） */
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.06),
    inset 0 0 14px rgba(255, 255, 255, 0.5);

  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.affiliate-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.08),
    inset 0 0 16px rgba(255, 255, 255, 0.65);
}

/* テキストカラーは既存の緑と統一 */
.affiliate-box p {
  margin-bottom: 1em;
  line-height: 1.75;
  color: #2d3a2f; /* 深めの緑がかったグレーで読みやすく */
  font-weight: 500;
}

/* バナー中央寄せ */
.affiliate-banner {
  text-align: center;
  margin-top: 1.2em;
}

/* モバイル最適化 */
@media (max-width: 768px) {
  .affiliate-box {
    padding: 1.5em 1.2em;
  }
}

/* ----------------------------------------------
   🌿 CTA Box
---------------------------------------------- */
.cta-box {
  text-align: center;
  margin: 3em 0 2em;
}

.blog-content .cta-button {
  display: inline-block !important;
  background: linear-gradient(135deg, #88b698, #6fa585) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.9em 2.2em;
  border-radius: 40px;
  text-decoration: none;
  font-size: 1.05rem;
  box-shadow: 0 4px 10px rgba(111, 165, 133, 0.25);
  transition: all 0.3s ease;
}
.blog-content .cta-button:hover {
  background: linear-gradient(135deg, #7ca982, #5e946f) !important;
  box-shadow: 0 6px 14px rgba(111, 165, 133, 0.35);
  transform: translateY(-2px);
}
/* ----------------------------------------------
   📚 References（リスト型）
---------------------------------------------- */
.references {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 2px solid #d0dfcf;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.references ul {
  list-style: decimal;
  margin-left: 1.6em;
  display: block;
}
.references li {
  margin-bottom: 0.9em;
  padding-bottom: 0.6em;
  border-bottom: 1px dotted #e5e5e5;
}
.references a {
  color: #226a88;
  text-decoration: none;
}
.references a:hover {
  text-decoration: underline;
  color: #114557;
}


/* ----------------------------------------------
   🌿 著者プロフィール（article footer）
---------------------------------------------- */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  background: #f7faf8;
  border: 1px solid #d8e6d8;
  border-radius: 10px;
  padding: 1.4em;
  margin-top: 3em;
}
.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c8dbc8;
  flex-shrink: 0;
}
.author-info h3 {
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 0.3em;
  font-weight: 600;
}
.author-info p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}
.author-link {
  display: inline-block;
  margin-top: 0.5em;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.author-link:hover {
  text-decoration: underline;
}

/* ----------------------------------------------
   🌿 関連記事（related posts）
---------------------------------------------- */
.related-posts {
  margin-top: 3em;
  padding-top: 1.6em;
  border-top: 2px solid #d6e4d6;
}
.related-posts h3 {
  color: var(--color-accent-dark, #2e654a);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.8em;
}
.related-posts ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-posts li {
  margin: 0.5em 0;
  padding-left: 1em;
  position: relative;
}
.related-posts li::before {
  content: "🌱";
  position: absolute;
  left: 0;
}
.related-posts a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.related-posts a:hover {
  color: #1d5942;
}

/* ----------------------------------------------
   📣 SNSシェアボタン
---------------------------------------------- */
.share-box {
  text-align: center;
  margin: 3em 0 1.5em;
  padding: 1.6em 0;
  background: #f8fbf9;
  border-top: 1px solid #e0ebe2;
  border-bottom: 1px solid #e0ebe2;
}
.share-box p {
  font-weight: 600;
  color: #2e654a;
  margin-bottom: 1em;
  font-size: 1rem;
}
.sns-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
}
.sns-btn {
  display: inline-block;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
  padding: 0.5em 1.2em;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

/* 各SNSカラー */
.sns-x {
  background: #000;
}
.sns-fb {
  background: #3b5998;
}
.sns-line {
  background: #00c300;
}
.sns-hatebu {
  background: #008fde;
}

/* hover時 */
.sns-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* モバイル調整 */
@media (max-width: 768px) {
  .sns-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em;
  }
  .sns-btn {
    font-size: 0.85rem;
    padding: 0.5em 1em;
  }
}

/* ----------------------------------------------
   🧠 レスポンシブ調整
---------------------------------------------- */
@media (max-width: 768px) {
  .author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .author-avatar {
    width: 70px;
    height: 70px;
  }
  .author-info h3 {
    font-size: 1rem;
  }
  .related-posts h3 {
    text-align: center;
  }
  .share-box p {
    font-size: 0.95rem;
  }
}

/* ----------------------------------------------
   🌙 Animations
---------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.blog-content > * {
  animation: fadeInUp 0.6s ease both;
}

/* ----------------------------------------------
   📱 Responsive Adjustments（干渉防止済み）
---------------------------------------------- */
@media (max-width: 700px) {
  .tip-card, .note-box, .mini-section { padding: 1rem 1.1rem; }
  .toc-box { padding: 1em 1.2em; }
}

/* ============================================================
   🌿 Blog Top Layout Refresh (2025)
   - page-blog.php 専用
   ============================================================ */

/* ベーストークン（このページ内だけで完結させる） */
.blog-top {
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --color-accent: #7ca982;
  --color-accent-soft: #e7f3eb;
  --color-bg-soft: #f6f9f7;
  --color-deep: #23543b;
  --color-text: #333333;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
  --radius-card: 18px;

  font-family: var(--font-sans);
  background: radial-gradient(circle at top, #f9fcfa 0%, #f3f7f4 42%, #ffffff 100%);
  color: var(--color-text);
}

/* 全セクションの共通余白 */
.blog-top .block {
  margin: 0 auto;
}

/* ============================================================
   ① HERO SECTION（h1：回転リングタイトル）
   ============================================================ */

/* ============================================================
   ① HERO SECTION – 抽象アート版（SVGなし）
   ============================================================ */

.blog-top .blog-hero {
  position: relative;
  text-align: center;
  padding: 4.5em 1.8em 3em;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbf9 0%, #ffffff 100%);
  border-bottom: 1px solid #e5eee7;
  box-shadow: inset 0 -10px 18px rgba(124, 169, 130, 0.06);
}

.blog-top .blog-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  width: 260%;
  height: 260%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124,169,130,0.32), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(196,225,205,0.35), transparent 65%);
  filter: blur(14px);
  opacity: 1;
  animation: heroBlob 28s ease-in-out infinite alternate;
}

.blog-top .blog-hero::after {
  content: "";
  position: absolute;
  inset: -10% -30% auto;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 18%,
    rgba(124,169,130,0.22) 45%,
    rgba(255,255,255,0) 85%
  );
  background-size: 180% 180%;
  opacity: 0.8;
  animation: heroStripes 36s linear infinite;
}

.blog-top .blog-hero-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.7em 1.6em;
  margin: 0 0 0.9em;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-deep);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.blog-top .blog-hero-desc {
  position: relative;
  z-index: 1;
  margin: 1.3em auto 0;
  max-width: 720px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: #4b574e;
}

/* ============================================================
   ② CATEGORY GRID（カテゴリから探す）
   ============================================================ */

.blog-categories {
  max-width: 1080px;
  margin: 2.4em auto 3.2em;
  padding: 0 1.8em;
}

.blog-categories > h2 {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-deep);
  letter-spacing: 0.05em;
  margin-bottom: 1.8em;
  position: relative;
}

.blog-categories > h2::after {
  content: "";
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

/* カテゴリカードのグリッド */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.8em;
}

/* 各カード */
.category-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 1.5em 1.6em 1.4em;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
  border: 1px solid #e4ede6;
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.category-card::before {
  /* カード上部の淡いグラデーション帯 */
  content: "";
  position: absolute;
  inset: -20% -20% auto;
  height: 55%;
  background: radial-gradient(circle at 10% 0%, rgba(124,169,130,0.18), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}

/* カテゴリごとに色味を少し変える */
.category-card.cat-symptom::before {
  background: radial-gradient(circle at 0% 0%, rgba(124,169,130,0.22), transparent 60%);
}
.category-card.cat-care::before {
  background: radial-gradient(circle at 0% 0%, rgba(140,184,160,0.22), transparent 60%);
}
.category-card.cat-items::before {
  background: radial-gradient(circle at 0% 0%, rgba(180,190,160,0.22), transparent 60%);
}
.category-card.cat-constitution::before {
  background: radial-gradient(circle at 0% 0%, rgba(140,180,200,0.18), transparent 60%);
}
.category-card.cat-about::before {
  background: radial-gradient(circle at 0% 0%, rgba(196,225,205,0.22), transparent 60%);
}

/* hover */
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: rgba(124,169,130,0.5);
}

/* カード見出し */
.category-card h3 {
  position: relative;
  margin: 0 0 0.9em;
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--color-deep);
}

/* h3 左に小さな縦ライン */
.category-card h3::before {
  content: "";
  position: absolute;
  left: -0.7em;
  top: 0.3em;
  width: 3px;
  height: 1.3em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-accent), transparent);
}

/* リスト */
.category-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em 0.7em;
}

.category-card li a {
  display: inline-block;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  border: 1px solid #d5e4d7;
  background: #f6fbf7;
  font-size: 0.9rem;
  color: #2d4b38;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}

.category-card li a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  transform: translateY(-1px);
}

/* モバイル */
@media (max-width: 768px) {
  .blog-categories {
    padding: 0 1.2em;
    margin: 2.2em auto 2.6em;
  }
  .blog-categories > h2 {
    font-size: 1.4rem;
    margin-bottom: 1.4em;
  }
  .category-card {
    padding: 1.3em 1.3em 1.1em;
  }
  .category-card h3::before {
    left: -0.55em;
  }
}

/* ============================================================
   ③ 最新記事グリッド（blog-list）
   ============================================================ */

.blog-list {
  background: linear-gradient(180deg, #f9fcfa 0%, #f3f8f5 100%);
  border-top: 1px solid #e2ede5;
  padding: 2.8em 1.5em 3.6em;
  margin-top: 0;
}

.blog-list > h2 {
  text-align: center;
  font-size: 1.7rem;
  color: var(--color-deep);
  font-weight: 700;
  margin-bottom: 2em;
  letter-spacing: 0.05em;
  position: relative;
}

.blog-list > h2::after {
  content: "";
  position: absolute;
  bottom: -0.5em;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

/* カードグリッド */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2em;
  max-width: 1100px;
  margin: 0 auto;
}

/* 記事カード */
.blog-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* hover */
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.09);
}

/* サムネイル */
.blog-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid #ececec;
}

.blog-list .blog-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #253c2f;
  margin: 1em 1.1em 0.4em;
  line-height: 1.6;
}

/* 抜粋 */
.blog-excerpt {
  font-size: 0.92rem;
  color: #4a4a4a;
  line-height: 1.7;
  margin: 0 1.1em 1.3em;
  flex-grow: 1;
}

/* 日付 */
.blog-date {
  display: block;
  font-size: 0.84rem;
  color: #859288;
  margin: 0 1.1em 1.2em;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .blog-list {
    padding: 2.4em 1em 3em;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
  .blog-thumb img {
    height: 180px;
  }
  .blog-title {
    font-size: 1rem;
  }
  .blog-excerpt {
    font-size: 0.9rem;
  }
}

/* ============================================================
   ④ Pagination（共通）
   ============================================================ */

.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  margin: 2.4em 0 0;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-block;
  padding: 0.48em 1.1em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #23543b;
  background: #eef6f0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.16s ease;
  font-size: 0.9rem;
}

.page-numbers:hover {
  background: #dbeadc;
  transform: translateY(-1px);
}

.page-numbers.current {
  background: var(--color-accent);
  color: #ffffff;
}

/* ============================================================
   ⑤ Category Page Header / Back Button（既存ページも考慮）
   ============================================================ */

.category-header {
  background: linear-gradient(180deg, #f9fcfa 0%, #f5f9f6 100%);
  text-align: center;
  padding: 3.5em 1.5em 2.5em;
  border-bottom: 1px solid #e4ede6;
}
.category-header h1 {
  font-size: 1.8rem;
  color: var(--color-deep);
  font-weight: 700;
  margin-bottom: 0.3em;
}
.category-header p {
  color: #555;
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

/* 戻るボタン */
.back-to-blog {
  text-align: center;
  margin: 3em 0 5em;
}
.back-to-blog a {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 0.8em 1.9em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.16s ease, box-shadow 0.25s ease;
}
.back-to-blog a:hover {
  background: #5e946f;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   ⑥ Footer（既存のやつベース）
   ============================================================ */

.blog-footer {
  background: #f8fbf9;
  border-top: 1px solid #e0ebe2;
  padding: 3em 1.5em 2em;
  text-align: center;
}
.blog-footer .footer-logo {
  height: 42px;
  margin-bottom: 1.2em;
}
.blog-footer .footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 1.5em;
  padding: 0;
  margin: 0 0 1.2em;
}
.blog-footer .footer-nav a {
  color: #23543b;
  text-decoration: none;
  font-weight: 500;
}
.blog-footer .footer-nav a:hover {
  text-decoration: underline;
  color: #5e946f;
}
.blog-footer small {
  color: #666;
  font-size: 0.85rem;
}

/* ============================================================
   ⑦ Header（既存のを継承）
   ============================================================ */

.blog-header-site {
  background: #ffffffcc;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5eee7;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 999;
}
.blog-header-site .site-logo img {
  height: 40px;
  width: auto;
  transition: height 0.3s ease;
}

/* モバイル微調整 */
@media (max-width: 768px) {
  .category-header {
    padding: 2.5em 1em;
  }
}