@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ============================================
   デザイン改善 CSS (2026-05-07 更新 — セレクタ修正+新規改善)
   ============================================ */

/* --- 修正1: シェアボタンを記事上部から非表示化 --- */
.sns-share.ss-top {
  display: none !important;
}

.sns-share.ss-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e8e8e8;
}

@media screen and (max-width: 768px) {
  .sns-share-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- 修正2: H2/H3見出しの改善 --- */
.entry-content h2 {
  padding: 20px 20px 20px 20px !important;
  border-radius: 4px !important;
  font-size: 26px !important;
  line-height: 1.5 !important;
  margin-top: 48px !important;
  margin-bottom: 24px !important;
}

.entry-content h3 {
  font-size: 20px !important;
  padding: 12px 16px !important;
  border-left: 3px solid #19448e !important;
  background-color: #f9fafb !important;
  border-radius: 3px !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}

/* --- 修正3: 目次（TOC）のデザイン改善 --- */
.toc {
  background-color: #f9fafb !important;
  border: none !important;
  border-left: 4px solid #19448e !important;
  border-radius: 4px !important;
  padding: 20px 24px !important;
  margin: 24px 0 40px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.toc-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #19448e !important;
  margin-bottom: 12px !important;
}

.toc li {
  padding: 6px 0 !important;
  border-bottom: 1px dashed #e8e8e8 !important;
}

.toc li:last-child {
  border-bottom: none !important;
}

/* --- 修正4: 空ウィジェットの非表示 --- */
.widget:has(.widget-empty),
.widget:has(p:empty) {
  display: none !important;
}

/* 修正: セレクタを実DOMのクラス名に合わせる (.no-comment → .no-comments) */
#block-4, .wp-block-latest-comments:empty, .no-comments.wp-block-latest-comments {
  display: none !important;
}

/* 修正4b: コメントが空の場合、コメント見出しごと非表示 */
.comment-list:not(:has(.comment)) {
  display: none !important;
}

/* --- 修正5: タグの視認性向上 (セレクタ修正) --- */
/* 実DOM: .tag-link.border-element (旧 .tag-item a は不一致) */
.tag-link.border-element {
  background-color: #f0f4f8 !important;
  border: 1px solid #c5d0dc !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  color: #19448e !important;
  transition: all 0.2s ease !important;
}

.tag-link.border-element:hover {
  background-color: #19448e !important;
  color: #fff !important;
  border-color: #19448e !important;
}

/* 互換性: 旧セレクタも残す */
.tag-item a,
.category-item a {
  background-color: #f0f4f8 !important;
  border: 1px solid #c5d0dc !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  color: #19448e !important;
  transition: all 0.2s ease !important;
}

.tag-item a:hover,
.category-item a:hover {
  background-color: #19448e !important;
  color: #fff !important;
  border-color: #19448e !important;
}

/* --- 修正6: ヘッダー (セレクタ修正) --- */
/* 実DOM: #header.header.cf (旧 .site-header は不一致) */
#header.header.cf {
  background-color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 8px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* 互換性: 旧セレクタも残す */
.site-header {
  background-color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 8px 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* --- 修正7: サイトタイトル (セレクタ修正) --- */
/* 実DOM: .logo-header .site-name-text-link (旧 .site-title a は不一致) */
.logo-header .site-name-text-link {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #19448e !important;
  letter-spacing: 0.5px !important;
}

/* 互換性 */
.site-title a {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #19448e !important;
  letter-spacing: 0.5px !important;
}

/* --- 修正8: グローバルナビ (セレクタ修正) --- */
/* 実DOM: .navi a (旧 .global-menu a は不一致) */
.navi a {
  font-size: 15px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease !important;
}

.navi a:hover {
  background-color: #f0f4f8 !important;
}

/* 互換性 */
.global-menu a {
  font-size: 15px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease !important;
}

.global-menu a:hover {
  background-color: #f0f4f8 !important;
}

/* --- 修正9: 記事タイトル(H1)の拡大 (H2とのヒエラルキー確保) --- */
.entry-title {
  font-size: 34px !important;
  line-height: 1.4 !important;
  margin-bottom: 20px !important;
}

/* --- 修正10: フッター (セレクタ修正 + 拡充) --- */
/* 実DOM: #footer.footer (旧 .site-footer は不一致) */
#footer.footer {
  background-color: #1a1a2e !important;
  color: #a0a0b0 !important;
  padding: 48px 20px !important;
  margin-top: 60px !important;
}

#footer.footer a {
  color: #7eb8f7 !important;
  text-decoration: none !important;
}

#footer.footer a:hover {
  text-decoration: underline !important;
}

#footer.footer::after {
  content: "\00A9 2026 nfamilia. All rights reserved.";
  display: block;
  text-align: center;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #2a2a3e;
  font-size: 13px;
}

/* 互換性 */
.site-footer {
  background-color: #1a1a2e !important;
  color: #a0a0b0 !important;
  padding: 48px 20px !important;
  margin-top: 60px !important;
}

.site-footer a {
  color: #7eb8f7 !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  text-decoration: underline !important;
}

.site-footer::after {
  content: "\00A9 2026 nfamilia. All rights reserved.";
  display: block;
  text-align: center;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #2a2a3e;
  font-size: 13px;
}

/* --- 修正19: カード見出しを大きく (18px → 20px) --- */
.entry-card-title {
  font-size: 20px !important;
  line-height: 1.5 !important;
}

/* --- 修正11: トップページの記事カード改善 --- */
.entry-card {
  padding: 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
}

.entry-card:hover {
  background-color: #fafbfc !important;
  border-color: #e8e8e8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.entry-card-thumb {
  border-radius: 8px !important;
  overflow: hidden !important;
}

.entry-card-thumb img {
  border-radius: 8px !important;
  transition: transform 0.3s ease !important;
}

.entry-card:hover .entry-card-thumb img {
  transform: scale(1.03) !important;
}

/* --- 修正12: 関連記事エリアの改善 --- */
.related-entry-card {
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.related-entry-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  border-color: #c5d0dc !important;
}

/* --- 修正13: 関連記事が見つかりません の非表示 --- */
/* .related-list 内の p が唯一の子（関連記事なし）の場合、セクションごと非表示 */
.related-list:has(p:only-child) {
  display: none !important;
}

/* --- 修正14: ページネーションの改善 --- */
.pagination {
  margin-top: 40px !important;
  padding: 20px 0 !important;
}

.pagination .page-numbers {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  border: 1px solid #e8e8e8 !important;
  transition: all 0.2s ease !important;
}

.pagination .page-numbers.current {
  background-color: #19448e !important;
  border-color: #19448e !important;
  color: #fff !important;
}

.pagination .page-numbers:hover {
  background-color: #f0f4f8 !important;
  border-color: #c5d0dc !important;
}


/* --- 修正17: カードの日付フォント拡大 (12.6px → 14px) --- */
.post-date {
  font-size: 14px !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/* --- 修正17a: カテゴリーラベルにバッジ装飾 --- */
.cat-link {
  display: inline-block !important;
  background: linear-gradient(135deg, #19448e, #2a6bc1) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 3px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.cat-link:hover {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
}

/* アイキャッチ上のカテゴリーバッジ（position:absoluteはCocoon継承） */
.cat-label {
  background: linear-gradient(135deg, #19448e, #2a6bc1) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.92 !important;
}

/* --- 修正15: サイドバーの「最近のコメント」を非表示 --- */
.widget_recent_comments {
  display: none !important;
}

/* --- 修正18: メイン/サイドバーに影を追加 --- */
.main {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 24px !important;
}

.sidebar {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  padding: 20px !important;
}

/* --- 修正16: サイドバーの「最近のコメント」を非表示 (正しいセレクタ) --- */
#block-4 {
  display: none !important;
}

/* ============================================
   デザイン改善 CSS (2026-05-20 — サムネイル隙間, パンくず, 日付, シェア, 前後ナビ)
   ============================================ */

/* --- Fix 1: サムネイル画像の下部隙間解消 (display:inline → block) --- */
.entry-card-thumb img,
.eyecatch img,
.card-thumb img,
.post-thumb img {
  display: block !important;
}

/* --- Fix 2: 前後記事ナビゲーションのスタイル改善 --- */
.pager-post-navi {
  margin-top: 40px !important;
  padding: 20px !important;
  border-top: 1px solid #e8e8e8 !important;
  gap: 12px !important;
}

.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
  padding: 16px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  background: #f9fafb !important;
  border: 1px solid transparent !important;
}

.pager-post-navi a:hover {
  background: #f0f4f8 !important;
  border-color: #e0e4e8 !important;
}

/* --- Fix 5: 「シェアする」テキストを非表示 (下部も含む) --- */
.sns-share-message {
  display: none !important;
}

/* --- Fix 6: パンくずリストのフォントサイズ拡大 (13px → 15px) --- */
.breadcrumb,
.breadcrumb a {
  font-size: 15px !important;
}

/* --- Fix 7: カード日付表示の改善 (右寄せ→左寄せ) --- */
.entry-card-info {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.post-date {
  text-align: left !important;
  color: #666 !important;
}

/* --- Fix 1b: アイキャッチ画像の下部隙間解消 (セレクタ修正: eye-catch-image) --- */
.eye-catch-image,
.eye-catch img,
img.eye-catch-image {
  display: block !important;
}

/* ============================================
   デザイン改善 CSS (2026-06-03 — 監査7件修正)
   ============================================ */

/* --- Fix A: カード日付の位置をコンテンツ追従に変更 --- */
/* issue: position:absolute; bottom:0; right:0 で抜粋文の長さによって位置が不自然 */
.entry-card-meta.card-meta.e-card-meta {
  position: static !important;
  text-align: right !important;
  margin-top: 8px !important;
}

/* --- Fix B: 関連記事カードの枠線・ホバー効果追加 --- */
/* .related-entry-card-wrap はAリンクラッパー（内側の .related-entry-card は既にスタイル済み） */
.related-entry-card-wrap {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s ease !important;
}
.related-entry-card-wrap:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* --- Fix C (修正): コメント0件時にコメントエリア全体を非表示 --- */
/* 注: :has() ネスト(:has(.list:not(:has(.comment)))) はブラウザが拒否するため分割 */
/* .comment-list 自体は既存CSSで非表示 → 兄弟の comment-form-wrap も非表示 */
.comment-list:not(:has(.comment)) ~ .comment-form-wrap {
  display: none !important;
}

/* --- Fix D: 前後ナビゲーションに可視ボーダーとシャドウ追加 --- */
/* 既存の .pager-post-navi a.prev-post は透明border !important で勝てない → 高詳細度で上書き */
.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.pager-post-navi a.prev-post:hover,
.pager-post-navi a.next-post:hover {
  border-color: #c5d0dc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* --- Fix E: 抜粋文の行間を広げる --- */
.entry-card-snippet {
  line-height: 1.6 !important;
}

/* --- Fix F: グローバルナビに上下境界線で視覚的分離 --- */
.navi {
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* --- Fix G: アイキャッチ画像の角丸 --- */
.eye-catch-image {
  border-radius: 8px !important;
}