@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.2.2
Comment:    Refactored & Integrated by Gemini. 
            - Nanacolog brand completion (Brown theme).
            - Unified green-to-brown overrides.
            - Maintenance-friendly structure.
*/

/* =============================================================================
 * CONTENTS
 * 1. 基本設定（変数・フォント・基本リンク）
 * 2. 全体レイアウト（ヘッダー・フッター・ロゴ）
 * 3. 見出し (h1-h6) （うつ友用基本設定）
 * 4. アニメーション（表示効果・ボタン光彩）
 * 5. Cocoon標準パーツ（吹き出し・ブログカード・コメント）
 * 6. ウィジェット（プロフィール・サイドバー）
 * 7. SNS・プラグイン（SNSボタン・Appreach・もしも）
 * 8. 共通装飾（strong/em・NEWマーク・日付）
 * 9. FAQアコーディオン
 * 10. シリーズ「こころの絵本」
 * 11. 【最重要】サブブランド「ななころぐ」専用デザイン
 * ========================================================================== */

/* =============================================================================
 * 1. 基本設定（変数・フォント・基本リンク）
 * ========================================================================== */

:root {
  /* --- カラーパレット：うつ友（緑） --- */
  --color-text-body: #333;
  --color-text-sub: #454545;
  --color-text-light: #555;
  --color-text-link-rinker: #3296d2;

  --color-theme-green-dark: #1F7343;
  --color-theme-green-primary: #82cd82;
  --color-theme-green-border: #9ddb9d;
  --color-theme-green-light-bg: #e6f4e6;
  --color-theme-green-lighter-bg: #e8f7e8;
  --color-theme-green-lightest-bg: #f7fdfa;

  /* --- カラーパレット：ななころぐ（茶系） --- */
  --color-theme-nanacolog-primary: #d4a97c;
  --color-theme-nanacolog-accent: #b88d5f;
  --color-theme-nanacolog-border: #e2cbb1;
  --color-theme-nanacolog-light-bg: #f9f4ef;

  /* --- フォント設定 --- */
  --font-fa-brands: "Font Awesome 5 Brands";
  --font-fa-free: "Font Awesome 5 Free";
}

body {
  font-family: "ヒラギノ角ゴ ProN", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  color: var(--color-text-body);
}

a {
  color: var(--color-text-body);
  text-decoration: none;
}

/* 本文内リンクの下線制御 */
.article .entry-content :is(p, li) a:not(.blogcard-wrap, .btn, .easyLink-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 目次（TOC）内のリンク下線排除 */
.article .entry-content .toc a,
.article .entry-content .toc-content a {
  text-decoration: none !important;
  border: none !important;
}

input, textarea, button, select {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif;
}

/* =============================================================================
 * 2. 全体レイアウト（ヘッダー・フッター・ロゴ）
 * ========================================================================== */

main.main { padding: 0 10px !important; }
.header .header-in { min-height: auto !important; }
.logo-image { padding: 0; }
.logo-image * { display: block; margin: auto; }

/* ヘッダーロゴ：PC/モバイル切り替え */
.site-logo-image.header-site-logo-image { display: inline; width: 1200px; height: 150px; }
.site-fixed-logo-image.header-site-logo-image { display: none; width: 300px; height: 38px; }

@media screen and (max-width: 768px) {
  .site-logo-image.header-site-logo-image { display: none; }
  .site-fixed-logo-image.header-site-logo-image { display: inline; }
}

.container .column-wrap > div { padding-top: 5px !important; }

.entry-content {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.7;
}

/* フッター */
.footer { padding-top: 0; margin-top: 0; }
.footer a:hover { color: #B3E0B3; } /* うつ友用ホバー色 */
.footer-bottom { margin-top: 0; }
.footer-bottom-content { line-height: 2.0; }

.page-prev-next { border-radius: 30px; }

/* 共通入力エリア */
.search-edit,
input:is([type="text"],[type="password"],[type="date"],[type="datetime"],[type="email"],[type="number"],[type="search"],[type="tel"],[type="time"],[type="url"]),
textarea, select {
  border: 1px solid #8dcaae;
  border-radius: 10px;
}

/* トップへ戻るボタン */
.go-to-top { right: 10px; bottom: 10px; }
.go-to-top-button, .go-to-top-button:hover { border: 0; }

/* =============================================================================
 * 3. 見出し (h1-h6) （うつ友用基本設定）
 * ========================================================================== */

.article :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-theme-green-dark) !important;
}

.article h1 {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 32px 0 28px !important;
}

.article h2 {
  background-color: var(--color-theme-green-light-bg) !important;
  border-bottom: 2px solid var(--color-theme-green-border) !important;
  padding-bottom: 8px !important;
  margin: 2em 0 24px !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
}

.article h3 {
  border-left: 4px solid var(--color-theme-green-border) !important;
  padding-left: 12px !important;
  margin: 1.5em 0 16px !important;
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  line-height: 1.4 !important;
}

.article h4 {
  border-left: 3px solid var(--color-theme-green-border) !important;
  padding-left: 10px !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
}

.article h5 { padding-left: 8px !important; margin-bottom: 10px !important; font-size: 1.1rem !important; border-left: 2px solid var(--color-theme-green-border) !important; }
.article h6 { padding-left: 6px !important; margin-bottom: 8px !important; font-size: 1rem !important; border-left: 2px solid var(--color-theme-green-border) !important; }

/* =============================================================================
 * 4. アニメーション（表示効果・ボタン光彩）
 * ========================================================================== */

/* ふわっと表示 */
.widget-entry-card-thumb, .entry-card-thumb {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.5s 1 normal forwards;
}
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ボタンのキラッと光る筋 */
.more-btn { position: relative; overflow: hidden; }
.more-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 100%;
  background-color: rgba(130, 205, 130, 0.4);
  transform: rotate(45deg);
  opacity: 0;
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%   { transform: scale(0) rotate(45deg); opacity: 0; }
  80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81%  { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* キャラクターアイコンのふわふわ・ぷかぷか */
.speech-icon { animation: fuwa 1.5s ease infinite alternate; }
@keyframes fuwa { 0% { transform: scale(1); } 100% { transform: scale(0.95); } }

.to-profile { animation: profuwa 1.0s ease infinite alternate; }
@keyframes profuwa { 0% { transform: scale(1); } 100% { transform: scale(0.9); } }

/* =============================================================================
 * 5. Cocoon標準パーツ（吹き出し・ブログカード・コメント）
 * ========================================================================== */

/* 吹き出し（フラット） */
.sbs-flat .speech-balloon { background-color: #e4f5ec; border-color: #e4f5ec; }
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after { border-right-color: #e4f5ec; }

/* 内部ブログカード */
.internal-blogcard { position: relative; padding-bottom: 30px; }
.internal-blogcard-excerpt { padding-right: 7em; padding-bottom: 1.5em; }
.internal-blogcard-site { display: none; }
.internal-blogcard-date::before { font-family: var(--font-fa-free); font-weight: 900; font-size: 12px; content: "\f1da"; padding-right: 2px; }
a.internal-blogcard-wrap:hover img.blogcard-thumb-image { transform: scale(1.05, 1.05); transition: .35s; }
.internal-blogcard::after {
  content: '続きを読む \00bb';
  position: absolute; bottom: 0.4rem; right: 0.8rem;
  font-size: 68%; font-weight: bold; background-color: var(--color-theme-green-primary);
  padding: 0.3em; color: var(--color-text-sub); border-radius: 3px;
}

/* コメント欄基本装飾（うつ友） */
.blank-box.site-color-notice { background-color: var(--color-theme-green-lighter-bg); border: none; border-left: 5px solid var(--color-theme-green-primary); }
.comment-title::before { font-family: var(--font-fa-free); font-weight: 900; font-size: 24px; content: "\f086"; }
.comment-notes { display: none; }
.comment-form-comment label::after { font-size: 14px; content: "（必須）"; }
.comment-form-author label { font-size: 0; }
.comment-form-author label::after { font-size: 14px; content: "お名前（省略可）"; }
.comment-form-email label::after { font-size: 14px; content: "（省略可）"; }
.comment-form-url label::after { font-size: 14px; content: "（省略可）"; }

/* =============================================================================
 * 6. ウィジェット（プロフィール・サイドバー）
 * ========================================================================== */

.sidebar { padding: 0 5px !important; box-shadow: none; background: white; color: var(--color-text-sub); }

/* --- プロフィール共通構造 --- */
.widget_author_box { background: #fff; padding-top: 1.2em; border-radius: 3px 3px 0 0; margin: 0 auto; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); letter-spacing: 0; }
.author-box { border: none; position: relative; margin: 0; max-width: 100%; overflow: hidden; }
.author-content { background: linear-gradient(90deg, rgba(130, 205, 130, 1) 0%, rgba(169, 225, 169, 1) 51.39%, rgba(130, 205, 130, 1) 100%); color: var(--color-text-sub); width: 110%; margin-left: -5% !important; }
.author-box .author-name a { color: var(--color-text-sub) !important; text-decoration: none !important; font-size: 16px; border-bottom: none !important; }
.author-box p { line-height: 1.2; font-size: 15px; }
.author-box .author-thumb { width: 120px; margin: 0 auto; position: absolute; bottom: 0; }
.author-box img { border: solid 1px #009250; }
.author-box .author-name { font-size: 1.1em; font-weight: bold; position: absolute; }
.author-box .author-widget-name { position: absolute; top: 3px; bottom: 0; right: 0; left: 0; font-size: 0.7em; color: #bbb; }
.author-box .sns-follow { padding: 15px 10px; }
.author-box .sns-follow-buttons { display: flex; gap: 10px; }

/* SNSフォローボタン */
.widget_author_box .author-box .sns-follow-buttons a { border-radius: 50%; border: none; width: 45px; height: 45px; line-height: 45px; font-size: 30px; box-shadow: 0 0 10px rgba(137, 201, 151, .8); background: #fff; transition: all .3s ease-in-out; }
.author-box .sns-follow-buttons .icon-twitter-logo::before { color: #1da1f2 !important; }
.author-box .sns-follow-buttons .icon-instagram-logo::before { color: #c522b8 !important; }
.author-box .sns-follow-buttons .youtube-button .icon-youtube-logo::before { font-family: var(--font-fa-brands) !important; content: "\f167" !important; color: #FF0000 !important; font-weight: 400 !important; font-size: 26px; display: inline-block; line-height: 45px; width: 100%; text-align: center; }

.to-profile { position: absolute; background: #fff; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; text-align: center; color: var(--color-text-sub) !important; box-shadow: 0 0 10px rgba(137, 201, 151, .8); font-size: 0.9em; font-weight: bold; text-decoration: none !important; border-bottom: none !important; }

/* --- サイドバー用配置 --- */
.sidebar .author-box { padding: 120px 0 5px; }
.sidebar .author-content { border-radius: 200px 200px 0 0 / 100px 100px 0 0; padding: 20px; }
.sidebar .author-box .author-description { padding: 45px 25px 0; }
.sidebar .author-box .author-thumb { top: 50px; right: 0; left: 0; }
.sidebar .author-box .author-name { top: 23px; right: 0; left: 0; }
.sidebar .author-box .sns-follow-buttons { justify-content: center; }
.sidebar .author-box .to-profile { top: 115px; left: calc(50% + 36px); }

/* --- 記事下用配置 --- */
.article .author-box { padding: 120px 0 0; }
.article .author-content { border-radius: 200px 0 200px 0/100px 0 100px 0; padding: 20px 20px 0; }
.article .author-box .author-description { padding: 45px 45px 0; }
.article .author-box .author-thumb { top: 50px; left: 50px; }
.article .author-box .author-name { top: 23px; left: 78px; }
.article .author-box .sns-follow-buttons { justify-content: flex-start; padding-left: 80px; }
.article .author-box .to-profile { top: 115px; left: 150px !important; }

/* =============================================================================
 * 7. SNS・プラグイン（SNSボタン・Appreach・もしも）
 * ========================================================================== */

.article .sns-follow-message, .article .sns-share-message { font-weight: bold; color: var(--color-text-sub); }
.article .sns-follow-buttons, .article .sns-share-buttons { justify-content: center; }

/* Appreach (Gridレイアウト再現版) */
.appreach { border-radius: 8px; box-shadow: 0 2px 5px 1px #e5e5e5; background-color: #fff; padding: 20px; margin: 20px 0; overflow: hidden; display: grid; grid-template-columns: 85px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; }
.appreach__icon { grid-column: 1; grid-row: 1 / -1; width: 100% !important; height: auto !important; border-radius: 18px; margin: 0 !important; float: none !important; }
.appreach__detail { grid-column: 2; grid-row: 1; display: block !important; width: 100% !important; max-width: none !important; }
.appreach__name { font-size: 110%; font-weight: bold; line-height: 1.4; margin: 0 0 5px 0; text-align: left; }
.appreach__info { font-size: 80%; color: #777; margin: 0; text-align: left; }
.appreach__links { grid-column: 2; grid-row: 2; margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; float: none !important; height: auto !important; }
.appreach__links img { height: 40px; width: auto; box-shadow: none; margin-bottom: 0; }

/* もしもアフィリエイト */
.easyLink-info-btn a { display: inline-block; padding: 10px 16px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); font-weight: 600; text-decoration: none !important; }

/* モバイルフッター/ヘッダーメニュー */
.mobile-footer-menu-buttons, .mobile-header-menu-buttons { background: var(--color-theme-green-primary); color: white; }

/* =============================================================================
 * 8. 共通装飾（strong/em・NEWマーク・日付）
 * ========================================================================== */

.article strong { font-weight: bold; }
.article em { font-style: normal; border-bottom: 2px dotted var(--color-theme-green-border); padding-bottom: 1px; }

/* NEWマーク（金銀銅） */
:is(.home, .page-id-1746) #main .a-wrap:nth-child(1) .new-entry-card-thumb::before { background-color: #d0a933; border: 1px solid #e1b700; }
:is(.home, .page-id-1746) #main .a-wrap:nth-child(2) .new-entry-card-thumb::before { background-color: #b7b7b9; border: 1px solid #a8a8a8; }
:is(.home, .page-id-1746) #main .a-wrap:nth-child(3) .new-entry-card-thumb::before { background-color: #b97c48; border: 1px solid #b56e26; }

/* 日付表示の統一 */
.post-date, .post-update { font-size: 0.9em !important; }
.sidebar .widget-entry-card-date .post-update::before { font-family: var(--font-fa-free); font-weight: 900; content: "\f1da" !important; margin-right: 3px; }

/* サイドバー・ウィジェット（新しい記事・人気の記事）レイアウト完全復旧 */
.sidebar .entry-card { display: flex !important; align-items: flex-start !important; padding: 10px 0 !important; border: none !important; }
.sidebar .entry-card-thumb { width: 120px !important; flex-shrink: 0; margin: 0 12px 0 0 !important; }
.sidebar .entry-card-content { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 68px; width: auto !important; margin-left: 0 !important; padding: 0 !important; }
.sidebar .entry-card-title { text-align: left !important; font-size: 14px !important; line-height: 1.4 !important; margin: 0 0 5px 0 !important; }
.sidebar .entry-card-meta { margin-top: auto; width: 100%; }
.sidebar .entry-card-info { display: flex !important; justify-content: flex-end !important; }
.sidebar :is(.post-date, .post-update) { font-size: 0.8em !important; }

/* ランキングバナー */
.ranking-banner-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; margin: 30px 0; padding: 20px 10px; background-color: #f9f9f9; border-radius: 8px; }
.ranking-banner-item { transition: transform 0.2s, opacity 0.2s; line-height: 1; }
.ranking-banner-item:hover { transform: translateY(-2px); opacity: 0.8; }
.ranking-banner-item img { max-width: 100%; height: auto; vertical-align: bottom; border: 2px solid #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); box-sizing: border-box; }
.blogcircle-link { width: 100%; text-align: center; margin-top: 10px; font-size: 14px; }
.blogcircle-link a { color: #888; text-decoration: underline; }

/* =============================================================================
 * 9. FAQアコーディオン
 * ========================================================================== */

.entry-content details.faq-box summary.faq-question { display: block; background: #f1f8e9; border: 2px solid #81c784; border-radius: 8px; font-weight: bold; cursor: pointer; padding: 1em 1.5em 1em 3.2em; position: relative; list-style: none; outline: none; margin-bottom: 0; }
.entry-content details.faq-box summary.faq-question::-webkit-details-marker { display: none; }
.entry-content details.faq-box summary.faq-question::before { content: 'Q'; position: absolute; left: 1em; background: #81c784; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; top: 50%; transform: translateY(-50%); font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 1; }
.entry-content details.faq-box .faq-answer { background: #fff9f2; border: 2px solid #f8c291; border-radius: 8px; padding: 1.5em 1.5em 1.5em 3.5em; margin-top: 10px; position: relative; font-weight: bold; }
.entry-content details.faq-box .faq-answer::before { content: 'A'; position: absolute; left: 1em; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #f8c291; color: #fff; display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 1; }
.entry-content details.faq-box .faq-answer > * { margin-bottom: 1em; }
.entry-content details.faq-box .faq-answer > *:last-child { margin-bottom: 0; }

/* =============================================================================
 * 10. シリーズ「こころの絵本」
 * ========================================================================== */

/* ページナビ */
.ehon-nav { display: flex; justify-content: space-between; align-items: stretch; margin: 20px 0 40px; gap: 20px; line-height: 1.2; }
.ehon-nav--single-next { justify-content: flex-end; }
.ehon-nav--single-prev { justify-content: flex-start; }
.ehon-nav__item { width: 48%; max-width: 420px; }
.ehon-nav__link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 15px; text-decoration: none !important; color: inherit; background-color: #e9e2d5; border-radius: 8px; transition: transform 0.2s ease-out; }
.ehon-nav__link:hover { transform: translateY(-4px); }
.ehon-nav__link::after { content: ''; position: absolute; bottom: 0; width: 35px; height: 35px; transition: all 0.2s ease-out; }
.ehon-nav__link--prev::after { left: 0; background: radial-gradient(circle at bottom left, #fff 68%, #e8e6e0 70%); filter: drop-shadow(2px -2px 2px rgba(0,0,0,.15)); }
.ehon-nav__link--next::after { right: 0; background: radial-gradient(circle at bottom right, #fff 68%, #e8e6e0 70%); filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.15)); }
.ehon-nav__link--next { flex-direction: row-reverse; }
.ehon-nav__image { width: 100px; height: 63px; object-fit: cover; border-radius: 5px; flex-shrink: 0; margin: 0 !important; }
.ehon-nav__text { flex-grow: 1; }
.ehon-nav__link--prev .ehon-nav__text { margin-left: 15px; text-align: left; }
.ehon-nav__link--next .ehon-nav__text { margin-right: 15px; text-align: right; }
.ehon-nav__direction { display: block; font-size: 0.85em; color: #666; }
.ehon-nav__title { display: block; font-size: 1.1em; font-weight: bold; margin-top: 4px; }

.ehon-text { text-align: center; font-size: 17px; line-height: 2.2; letter-spacing: 0.08em; }

/* タブUI */
.ehon-tab-wrap { margin-bottom: 2em; }
.ehon-tab-wrap input[type="radio"] { position: absolute; left: -9999px; }
.ehon-tab-wrap .ehon-tab-nav { display: flex; position: relative; z-index: 1; border-bottom: 1px solid #e0e0e0; }
.ehon-tab-wrap .ehon-tab-nav label { padding: 10px 20px; background: #f0f0f0; color: #666; font-weight: bold; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 5px 5px 0 0; margin-right: 4px; position: relative; bottom: -1px; transition: all 0.2s ease-in-out; white-space: nowrap; font-size: 0.9em; }

#ehon-tab-text:checked ~ .ehon-tab-nav label[for="ehon-tab-text"],
#ehon-tab-audio:checked ~ .ehon-tab-nav label[for="ehon-tab-audio"],
#ehon-tab-video:checked ~ .ehon-tab-nav label[for="ehon-tab-video"] { background: #fff; color: #558b2f; border-top: 3px solid #8dd08d; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; z-index: 2; }

.ehon-tab-wrap .tab-content { display: none; padding: 2em; border: 1px solid #e0e0e0; border-top: none; background: #fff; }
#ehon-tab-text:checked ~ #content-text, #ehon-tab-audio:checked ~ #content-audio { display: block; }

/* GSC動画対策 */
#ehon-tab-text:checked ~ #content-video, #ehon-tab-audio:checked ~ #content-video { display: block !important; height: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#ehon-tab-video:checked ~ #content-video { display: block !important; height: auto !important; padding: 2em !important; border: 1px solid #e0e0e0 !important; border-top: none !important; opacity: 1 !important; pointer-events: auto !important; }

.ehon-credit { text-align: right; font-size: 90%; margin: 2em 0 0; }
.ehon-video-center { width: 100%; max-width: 640px; margin: 20px auto; aspect-ratio: 16 / 9; }
.ehon-video-center iframe { width: 100%; height: 100%; display: block; }

/* =============================================================================
 * 11. 【最重要】サブブランド「ななころぐ」専用デザイン
 *     範囲: アーカイブ、記事、固定ページ、ウィジェット、ショートコード
 * ========================================================================== */

/* --- 11-1. 基本配色・共通（緑排除） --- */
.nanacolog-view .article .entry-content { text-align: left !important; }
.nanacolog-view .article .entry-content :is(p, li, h2, h3, h4, h5, h6) { text-align: left; }

.nanacolog-view :is(#header, #header-container, .mobile-header-menu-buttons, .footer, .navi, .navi-in, .mobile-footer-menu-buttons) { background-color: var(--color-theme-nanacolog-primary) !important; color: #fff !important; }
.nanacolog-view :is(.site-name-text a, .navi-in a, .footer a) { color: #fff !important; }

/* リンク・強調・目次 */
.nanacolog-view .entry-content a:not(.btn):not(.easyLink-link) { color: #a67c52 !important; text-decoration: underline !important; text-underline-offset: 3px; }
.nanacolog-view .article strong { font-weight: bold; }
.nanacolog-view .article em { font-style: normal; padding-bottom: 1px; border-bottom: 2px dotted var(--color-theme-nanacolog-border); }
.nanacolog-view .toc { border: 1px solid var(--color-theme-nanacolog-border) !important; background-color: var(--color-theme-nanacolog-light-bg) !important; }
.nanacolog-view .toc-title { background-color: var(--color-theme-nanacolog-primary) !important; color: #fff !important; }
.nanacolog-view .toc-content a { text-decoration: none !important; color: var(--color-text-sub) !important; }
.nanacolog-view .toc-content .toc-number { color: var(--color-theme-nanacolog-accent) !important; }

/* --- 11-2. 見出し（H1-H6） --- */
.nanacolog-view .article :is(h1, h2, h3, h4, h5, h6) { border: none !important; background: none !important; box-shadow: none !important; color: var(--color-text-sub) !important; }
.nanacolog-view .article h1 { margin: 32px 0 28px !important; border-bottom: 3px solid var(--color-theme-nanacolog-primary) !important; }
.nanacolog-view .article h2 { margin: 2em 0 24px !important; padding: 0.6em 0.8em !important; background-color: var(--color-theme-nanacolog-primary) !important; border-left: 8px solid var(--color-theme-nanacolog-accent) !important; color: #fff !important; }
.nanacolog-view .article h3 { margin: 1.5em 0 16px !important; padding: 0.4em 0 0.4em 12px !important; border-left: 6px solid var(--color-theme-nanacolog-accent) !important; border-bottom: 2px solid var(--color-theme-nanacolog-border) !important; }
.nanacolog-view .article h4 { margin-bottom: 12px !important; padding-left: 10px !important; border-left: 5px solid var(--color-theme-nanacolog-border) !important; border-bottom: 1px solid var(--color-theme-nanacolog-border) !important; }
.nanacolog-view .article h5 { padding-left: 8px !important; border-left: 3px solid var(--color-theme-nanacolog-border) !important; border-bottom: 1px solid var(--color-theme-nanacolog-border) !important; }
.nanacolog-view .article h6 { padding-left: 6px !important; border-left: 2px solid var(--color-theme-nanacolog-border) !important; border-bottom: 1px solid var(--color-theme-nanacolog-border) !important; }

/* --- 11-3. UIコンポーネント・ウィジェット --- */
.nanacolog-view .sidebar h3 { background-color: var(--color-theme-nanacolog-light-bg) !important; border-left: 5px solid var(--color-theme-nanacolog-accent) !important; border-bottom: 1px solid var(--color-theme-nanacolog-border) !important; color: var(--color-text-sub) !important; }
.nanacolog-view .sidebar .tagcloud a { background-color: #fff !important; border: 1px solid var(--color-theme-nanacolog-border) !important; color: var(--color-theme-nanacolog-accent) !important; }
.nanacolog-view .sidebar .entry-card-title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 500 !important; }
.nanacolog-view :is(.search-edit, input[type="text"], input[type="search"]) { border: 1px solid var(--color-theme-nanacolog-border) !important; }
.nanacolog-search .search-submit { color: var(--color-theme-nanacolog-accent) !important; }
@media screen and (max-width: 480px) { .nanacolog-view .sidebar .entry-card-title { font-size: 13px !important; font-weight: 500 !important; } }

.nanacolog-view .navigation .nav-links a { background-color: #fff !important; border: 1px solid var(--color-theme-nanacolog-border) !important; color: var(--color-theme-nanacolog-accent) !important; }
.nanacolog-view .navigation .nav-links a:hover { background-color: var(--color-theme-nanacolog-primary) !important; color: #fff !important; }
.nanacolog-view .pagination .current { background-color: var(--color-theme-nanacolog-primary) !important; border-color: var(--color-theme-nanacolog-primary) !important; }
.nanacolog-view :is(.entry-read .btn, .go-to-top-button) { background-color: var(--color-theme-nanacolog-accent) !important; color: #fff !important; }

/* プロフィール（ななころぐ用） */
.nanacolog-view .author-box { background-color: var(--color-theme-nanacolog-light-bg) !important; border: 1px solid var(--color-theme-nanacolog-border) !important; box-shadow: none !important; }
.nanacolog-view .author-content { background: none !important; }
.nanacolog-view .author-widget-name { background-color: var(--color-theme-nanacolog-accent) !important; color: #fff !important; }
.nanacolog-view .author-box img { border: 1px solid var(--color-theme-nanacolog-accent) !important; }
.nanacolog-view :is(.to-profile, .widget_author_box .author-box .sns-follow-buttons a) { box-shadow: 0 0 10px rgba(184, 141, 95, .4) !important; text-decoration: none !important; border-bottom: none !important; }

/* 特殊ボックス */
.nanacolog-view .information-box.common-icon-box { background-color: var(--color-theme-nanacolog-light-bg) !important; border-color: var(--color-theme-nanacolog-border) !important; }
.nanacolog-view .information-box.common-icon-box::before { background-color: transparent !important; border-right: 1px solid var(--color-theme-nanacolog-border) !important; color: var(--color-theme-nanacolog-primary) !important; }

/* --- 11-4. 記事リスト・カード（大型化） --- */
.nanacolog-list { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.nanacolog-list .nanacolog-card-wrap, .nanacolog-view .entry-card-wrap { margin: 0 !important; padding: 0; transition: all 0.3s ease-in-out; }
.nanacolog-list .nanacolog-card-wrap { border-bottom: 1px dotted var(--color-theme-nanacolog-border); }
.nanacolog-view .list.ecb-entry-border .entry-card-wrap { border-color: var(--color-theme-nanacolog-border) !important; }

/* おすすめ記事（関連記事）枠 */
.nanacolog-view .related-entry-card-wrap { border-color: var(--color-theme-nanacolog-border) !important; transition: all 0.3s ease-in-out; }
.nanacolog-view .related-entry-card-wrap:hover, .nanacolog-list .nanacolog-card-wrap:hover, .nanacolog-view .entry-card-wrap:hover { background-color: #faf3ea !important; border-color: var(--color-theme-nanacolog-accent) !important; }

/* カードレイアウト */
.nanacolog-list .entry-card { display: flex !important; align-items: flex-start; gap: 20px; margin: 0 !important; padding: 15px 10px !important; background: none !important; border: none !important; }
.nanacolog-list .entry-card-thumb { width: 320px !important; max-width: 45%; flex-shrink: 0; margin: 0 !important; }
.nanacolog-list .entry-card-thumb img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.nanacolog-list .entry-card-content { flex: 1; display: flex; flex-direction: column; padding: 0 !important; margin-left: 0 !important; min-width: 0; }
.nanacolog-list .entry-card-title { font-size: 18px !important; font-weight: bold !important; line-height: 1.4 !important; text-align: left !important; margin: 0 0 8px 0 !important; overflow-wrap: break-word; }
.nanacolog-list .entry-card-title a { color: #5d4037 !important; text-decoration: none !important; }
.nanacolog-list .entry-card-title a:hover { text-decoration: underline !important; }
.nanacolog-list .entry-card-time { font-size: 13px !important; color: #999; text-align: left !important; }

@media screen and (max-width: 480px) {
  .nanacolog-list .entry-card { gap: 12px; }
  .nanacolog-list .entry-card-thumb { width: 42% !important; }
  .nanacolog-list .entry-card-title { font-size: 15px !important; }
}

/* カテゴリ/タグ（ななころぐ配色） */
.nanacolog-view :is(.cat-link, .cat-label, .entry-card-category-label) { background-color: var(--color-theme-nanacolog-accent) !important; border: none !important; color: #fff !important; }
.nanacolog-view .cat-link { background-color: #e2cbb1 !important; color: #5d4037 !important; }
.nanacolog-view .cat-link .tax-icon { color: #5d4037 !important; }
.nanacolog-view .tag-link { border-color: #8d6e63 !important; color: #8d6e63 !important; }
.nanacolog-view .tag-link .tax-icon { color: #8d6e63 !important; }

.nanacolog-view :is(.post-meta, .entry-footer, .breadcrumb) :is(.fa, .fas, .far) { color: var(--color-theme-nanacolog-accent) !important; }

/* --- 11-5. ななころぐ専用：コメント欄配色 --- */
.single-nanacolog .blank-box.site-color-notice { background-color: #f5f0e1 !important; border-left: 5px solid #a67c52 !important; color: #5d4037 !important; }
.single-nanacolog :is(.comment-title, #reply-title), .single-nanacolog :is(.comment-title, #reply-title)::before { color: #a67c52 !important; border-left-color: #a67c52 !important; }
.single-nanacolog .comment-form :is(label, .required) { color: #5d4037 !important; }
.single-nanacolog .comment-form .required { color: #a67c52 !important; }

.single-nanacolog :is(#comment, .comment-form-author input, .comment-form-email input, .comment-form-url input) { border: 1px solid #a67c52 !important; background-color: #fff !important; border-radius: 4px; }
.single-nanacolog :is(#comment, .comment-form-author input, .comment-form-email input, .comment-form-url input):focus { border-color: #8e6845 !important; box-shadow: 0 0 5px rgba(166, 124, 82, 0.4) !important; outline: none !important; }

.single-nanacolog #submit { background-color: #a67c52 !important; border-color: #8e6845 !important; color: #fff !important; transition: background-color 0.3s ease; }
.single-nanacolog #submit:hover { background-color: #8e6845 !important; border-color: #5d4037 !important; }

.single-nanacolog .comment-reply-link { color: #a67c52 !important; border: 1px solid #a67c52 !important; background-color: transparent !important; transition: all 0.3s ease; }
.single-nanacolog .comment-reply-link .comment-icon { color: #a67c52 !important; }
.single-nanacolog .comment-reply-link:hover { background-color: #a67c52 !important; color: #fff !important; }
.single-nanacolog .comment-reply-link:hover .comment-icon { color: #fff !important; }

/* --- 11-6. ななころぐ：仕上げのマイクロ・グリーン排除 --- */

/* 1. 内部ブログカードの「続きを読む」タグ */
.nanacolog-view .internal-blogcard::after { background-color: var(--color-theme-nanacolog-accent) !important; color: #fff !important; }

/* 2. 吹き出し（ななころ）の背景色を濁りのないベージュへ */
.single-nanacolog .sbs-flat .speech-balloon { background-color: #efede4 !important; border-color: #efede4 !important; }
.single-nanacolog .sbs-flat .speech-balloon::before, .single-nanacolog .sbs-flat .speech-balloon::after { border-right-color: #efede4 !important; }

/* 3. フッターリンクのホバー色 */
.nanacolog-view .footer a:hover { color: var(--color-theme-nanacolog-light-bg) !important; }

/* 4. ボタンのキラッと光る筋を茶系へ */
.nanacolog-view .more-btn::before { background-color: rgba(212, 169, 124, 0.4) !important; }


/* --- 11-7. 固定ページ・独自パーツ・スイッチ --- */
.nanacolog-header-text { text-align: center; margin: 30px 0 40px; padding: 0 10px; font-size: 15px; line-height: 2.0; color: var(--color-text-sub); }
.nanacolog-view .article .nanacolog-header-text h2 { font-size: 22px !important; color: var(--color-theme-nanacolog-accent) !important; font-weight: bold; border: none !important; background: none !important; }

.nanacolog-view .article .h-center { text-align: center; font-size: 1.4em !important; font-weight: bold !important; color: var(--color-theme-nanacolog-accent) !important; margin-top: 60px !important; margin-bottom: 20px !important; padding: 1.5em 0 !important; border: none !important; border-top: 1px solid var(--color-theme-nanacolog-border) !important; border-bottom: 1px solid var(--color-theme-nanacolog-border) !important; background-color: #faf8f5 !important; }

/* プロフィールBOX */
.nanacolog-plain-box { max-width: 100%; margin: 20px auto 30px; padding: 25px; background-color: var(--color-theme-nanacolog-light-bg); border: 1px solid var(--color-theme-nanacolog-border); border-radius: 8px; box-sizing: border-box; }
.nanacolog-author-flex { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.nanacolog-author-flex .author-icon img { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); object-fit: cover; margin: 0; }
.nanacolog-author-flex .author-text { flex: 1; }
.nanacolog-author-flex .author-text p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }

@media screen and (max-width: 599px) { .nanacolog-author-flex { flex-direction: column; text-align: center; } }

/* 独自ボタン */
.nanacolog-btn { display: inline-block !important; padding: 12px 40px !important; border-radius: 30px !important; background-color: var(--color-theme-nanacolog-accent) !important; color: #fff !important; border: none !important; font-weight: bold; text-decoration: none !important; box-shadow: 0 4px 10px rgba(184, 141, 95, 0.3); transition: transform 0.2s; }
.nanacolog-btn:hover { background-color: var(--color-theme-nanacolog-primary) !important; transform: translateY(-2px); }

/* スイッチバー */
.mobile-switch-bar { display: flex; justify-content: flex-end; position: relative; z-index: 1; width: 100%; margin: 5px 0; padding-right: 15px; }
.mobile-switch-bar a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.15); font-weight: bold; font-size: 13px; text-decoration: none; }
.mobile-switch-bar a::after { content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; opacity: 0.6; margin-left: 8px; }

@media screen and (max-width: 1023px) { .menu-item.nav-switch-link { display: none !important; } }
@media screen and (min-width: 1024px) { .mobile-switch-bar { display: none !important; } }

/* ななころぐ時：ランキングバナー背景 */
.ranking-banner-wrap.is-nanacolog { background-color: #faf3ea; }
.is-nanacolog .blogcircle-link a { color: #b88d5f; }