@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* =====================================================
   しろくま博士ブログ カスタムスタイル
   カラーパレット:
     ミントグリーン: #e8f8f5 (背景)
     ティール:       #3dbdb8 (アクセント・ボーダー)
     イエロー:       #ffc040 (セクション枠・アクセント)
     ピンク/コーラル: #e84b6a (見出しテキスト)
     ホワイト:       #ffffff (カード背景)
===================================================== */

/* --- 全体背景をミントグリーンに --- */
body {
  background-color: #e8f8f5 !important;
}

/* --- ヘッダーエリア --- */
#header {
  background-color: #3dbdb8 !important;
}
.header-container,
.header-logo-image {
  background: transparent !important;
}

/* --- グローバルナビ --- */
#navi,
.navi-in > ul,
.navi-in {
  background-color: #2a8f8a !important;
}
.navi-in > ul > li > a {
  color: #fff !important;
  font-weight: bold;
}
.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a {
  background-color: #ffc040 !important;
  color: #333 !important;
}

/* --- メインコンテンツ背景 --- */
#main,
.main,
.site-content,
.content-wrap {
  background-color: transparent !important;
}

/* --- 記事カード背景 --- */
.entry-card,
.card-wrap,
.a-wrap {
  background-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* --- サイドバー --- */
#sidebar,
.sidebar {
  background-color: transparent !important;
}
.widget {
  background-color: #fff !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}
.widget-title,
.widgettitle {
  background-color: #3dbdb8 !important;
  color: #fff !important;
  padding: 8px 14px !important;
  font-size: 0.95em !important;
  border-radius: 0 !important;
  border-left: 4px solid #ffc040 !important;
}

/* --- フッター --- */
#footer,
.footer {
  background-color: #2a8f8a !important;
  color: #fff !important;
}
#footer a,
.footer a {
  color: #ffc040 !important;
}

/* --- フロントページ: 不要な要素を非表示 --- */
.home .entry-title,
.home .entry-date,
.home .breadcrumb,
.home .toc,
.home .toc-box,
.home .sns-share,
.home .sns-follow,
.home .article-footer .author-info,
.home .post-author { display: none !important; }

/* --- フロントページのコンテンツ余白調整 --- */
.home .entry-content { padding-top: 0 !important; }
.home .article-body { padding: 0 !important; }

/* --- 見出しカラー統一 --- */
h1, h2, h3, .entry-title {
  color: #e84b6a;
}

/* --- リンクカラー --- */
a {
  color: #3dbdb8;
}
a:hover {
  color: #2a8f8a;
}

/* =====================================================
   モバイル・タブレット レイアウト修正
===================================================== */
@media screen and (max-width: 1024px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  .entry-content img,
  .wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  /* はみ出し防止 */
  body,
  html {
    overflow-x: hidden !important;
  }
  #main,
  .entry-body,
  .entry-content,
  .site-content,
  .content-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 全画像サイズ制限 */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* カテゴリバナー: 2列グリッド */
  .cat-banner-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ナビゲーション */
  #navi .navi-in {
    background-color: #2a8f8a !important;
  }

  /* サイドバーをメインの下に */
  #sidebar {
    margin-top: 20px;
  }

  /* ウィジェットタイトル調整 */
  .widget-title,
  .widgettitle {
    font-size: 0.9em !important;
  }
}

@media screen and (max-width: 480px) {
  /* スマホでのカテゴリバナー詰め */
  .cat-banner-wrap a {
    padding: 14px 6px !important;
    min-height: 80px !important;
  }
  .cb-icon {
    font-size: 1.8em !important;
  }
  .cb-title {
    font-size: 0.88em !important;
  }
  .cb-desc {
    font-size: 0.68em !important;
  }
}

/* --- ブロックウィジェット見出し（Archives/Categoriesなど）--- */
.widget .wp-block-heading {
  background-color: #3dbdb8 !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-left: 4px solid #ffc040 !important;
  border-radius: 0 !important;
  margin: 0 0 12px !important;
  font-size: 0.95em !important;
}


@media screen and (max-width: 768px) {
  #header {
    background-size: 100% auto !important;
    background-position: center top !important;
    min-height: unset !important;
  }
  /* ヘッダーコンテナの高さを画像に合わせて自動調整 */
  .header-container,
  .header-container-in {
    min-height: unset !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* ロゴ・タイトルエリアを画像の上に重ならないよう非表示（画像に文字が入っているため） */
  .header-logo-area,
  .site-name-text,
  .tagline {
    display: none !important;
  }
}


/* 画像サイズ 2560x400 → aspect ratio 15.625% */
@media screen and (max-width: 768px) {
  #header {
    background-size: 100% auto !important;
    background-position: center top !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* header-in をアスペクト比ボックスに変換（padding-top technique） */
  .header-in {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 15.625% !important;
    overflow: hidden !important;
  }
  /* ロゴ・タイトルを非表示（画像内に文字があるため） */
  .header-logo-area,
  .site-name-text,
  .tagline,
  .header-logo-link {
    display: none !important;
  }
}

/* --- モバイルヘッダー画像: スマホ専用画像に差し替え --- */
/* blog_top4_sumaho.jpg (2560x400) → aspect ratio 15.625% */
@media screen and (max-width: 768px) {
  #header {
    background-image: url('https://shirokumahakase.com/wp-content/uploads/2026/04/blog_top4_sumaho.jpg') !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* header-in をアスペクト比ボックスに変換（2560x400 → 15.625%） */
  .header-in {
    height: 0 !important;
    min-height: 0 !important;
    padding: 15.625% 0 0 0 !important;
    overflow: hidden !important;
  }
  /* 画像に文字が入っているため、ロゴ・テキストは非表示 */
  .header-in > *,
  .header-logo-area,
  .logo,
  .tagline,
  .site-name-text,
  .header-logo-link {
    display: none !important;
  }
}


/* ===== プロフィールウィジェット スタイル ===== */
.widget_author_box .author-box {
  background: #ffffff;
  border-radius: 12px;
  border: 2px solid #ffc040;
  padding: 18px 14px;
  text-align: center;
}
.widget_author_box .author-thumb img,
#slide-in-sidebar .author-thumb img {
  border-radius: 50% !important;
  border: 3px solid #3dbdb8 !important;
  width: 90px !important;
  height: 90px !important;
  object-fit: cover !important;
}
.widget_author_box .author-name a {
  color: #2a8f8a;
  font-weight: bold;
  font-size: 1.05em;
}
.widget_author_box .author-description {
  font-size: 0.88em;
  line-height: 1.8;
  color: #444;
  margin-top: 10px;
  text-align: left;
}
.widget_author_box .sns-follow-message {
  font-size: 0.82em;
  color: #888;
}


/* ===== プロフィールアイコン表示修正 (.no-icon クラス上書き) ===== */
.widget_author_box .author-box.no-icon .author-thumb {
  display: block !important;
}
.widget_author_box .author-box.no-icon .author-thumb img {
  display: block !important;
  visibility: visible !important;
}