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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*
 * 案3 Clean Editorial — Cocoon カスタムCSS
 * WP管理画面 → 外観 → カスタマイズ → 追加CSS に貼り付けてください
 * 元に戻す場合: このCSSを削除するだけで元のデザインに戻ります
 */

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ===== トップバー ===== */
#site-topbar {
  background: #cc0000;
  padding: 6px 0;
  width: 100%;
  position: relative;
  z-index: 200;
}

#site-topbar-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-text {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.topbar-date {
  color: #ffcccc;
  font-size: 11px;
}

/* ===== ベース ===== */
body,
#wrapper {
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif !important;
  /* font-size: 14px; */
}

/* ===== ヘッダー + ナビ: CSS Grid で同一行・中央揃えレイアウト ===== */

/* 外側コンテナ: 背景・ボーダー */
#header-container,
.header-container {
  background: #ffffff !important;
  border-bottom: 3px solid #cc0000 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* 内側コンテナ: グリッド・最大幅1200px中央揃え */
#header-container-in,
.header-container-in {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: 64px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* ヘッダー（ロゴ）: グリッド列1・コンテンツ幅に収縮 */
#header,
.header {
  grid-column: 1 !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  display: flex !important;
  align-items: center !important;
}

#header-in,
.header-in {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 0 !important;
  min-height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
}

.logo.logo-header {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* サイトタイトル: Noto Serif JP（明朝）— IDセレクタで最高特異性を確保 */
#header .site-name-text,
#header-in .site-name-text,
h1.logo-header .site-name-text,
.logo-header .site-name-text {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
}

/* リンクの赤色がタイトルに漏れないよう — IDで高特異性 */
#header .site-name-text-link,
#header .site-name-text-link:link,
#header .site-name-text-link:visited,
#header .site-name-text-link:hover,
#header .site-name-text-link:active {
  color: #1a1a1a !important;
  text-decoration: none !important;
}

/* 「熟女」赤字スパンは強制的に赤を維持 */
#header .title-accent-red {
  color: #cc0000 !important;
}

.tagline {
  order: 2 !important;
  color: #9ca3af !important;
  font-size: 10px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

/* ===== ナビゲーション: グリッド列2・右揃え ===== */
#navi {
  grid-column: 2 !important;
  position: static !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  align-self: center !important;
  overflow: visible !important;
}

#navi-in {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PCメニューのみ横一列表示 */
#navi ul.menu-pc {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* モバイルメニュー非表示 */
#navi ul.menu-mobile,
#navi .navi-menu-button {
  display: none !important;
}

/* メニューアイテム幅をコンテンツに合わせる */
#navi .menu-pc > li {
  width: auto !important;
  min-width: 0 !important;
}

#navi .menu-pc > li > a {
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  display: block !important;
  transition: color 0.2s, background 0.2s !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
}

#navi .menu-pc > li > a:hover,
#navi .menu-pc > li.current-menu-item > a {
  color: #cc0000 !important;
  background: #fff5f5 !important;
}

#navi .caption-wrap,
#navi .item-label {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
}

/* ===== リンク全般 ===== */
a {
  color: #cc0000;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #990000;
}

/* ===== 見出し ===== */
/* 記事タイトル（カード・投稿ページ）も明朝体 */
.entry-title,
.entry-card-title,
.article-title {
  font-family: 'Noto Serif JP', serif !important;
}

h2 {
  border-left: 4px solid #cc0000 !important;
  padding-left: 12px !important;
  color: #1a1a1a;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  background: none !important;
}

h3 {
  border-left: 4px solid #cc0000 !important;
  padding-left: 10px !important;
  color: #1a1a1a;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  background: none !important;
}

/* ===== 記事カード（一覧） ===== */
.entry-card-wrap,
.a-wrap {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.entry-card-wrap:hover,
.a-wrap:hover {
  border-color: #cc0000 !important;
  box-shadow: 0 4px 16px rgba(204, 0, 0, 0.08) !important;
  text-decoration: none;
}

/* カードサムネイル */
.entry-card-thumb,
.a-wrap .entry-card-thumb {
  background: #f3f4f6;
  overflow: hidden;
}

.entry-card-thumb img {
  transition: transform 0.3s ease;
}

.entry-card-wrap:hover .entry-card-thumb img,
.a-wrap:hover .entry-card-thumb img {
  transform: scale(1.03);
}

/* カードコンテンツ */
.entry-card-content {
  padding: 14px 16px !important;
  background: #ffffff !important;
}

/* カードタイトル */
.entry-card-title {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 6px;
}

.entry-card-wrap:hover .entry-card-title,
.a-wrap:hover .entry-card-title {
  color: #cc0000 !important;
}

/* カード本文抜粋 */
.entry-card-snippet {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.6;
}

/* カテゴリーラベル */
.cat-label,
.entry-card-content .cat-label {
  background: #cc0000 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  border: none !important;
}

/* 複数カテゴリーのバリエーション */
.cat-label-0 { background: #cc0000 !important; }
.cat-label-1 { background: #e8736a !important; }
.cat-label-2 { background: #9ca3af !important; }

/* ===== サイドバー ===== */
#sidebar {
  background: transparent;
}

.widget {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: none !important;
}

.widget:first-child {
  border-top: 3px solid #cc0000 !important;
}

.widget-title {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: none !important;
}

/* ウィジェット内リンク */
.widget a {
  color: #374151;
  font-size: 12px;
  line-height: 1.5;
}

.widget a:hover {
  color: #cc0000;
}

/* ===== フッター ===== */
#footer,
.footer-in {
  background: #1a1a1a !important;
  color: #9ca3af !important;
  border-top: none !important;
}

#footer a,
.footer-in a {
  color: #6b7280 !important;
  font-size: 12px;
}

#footer a:hover,
.footer-in a:hover {
  color: #cc0000 !important;
}

#footer .copyright,
.footer-in .copyright {
  color: #4b5563 !important;
  font-size: 11px;
}

/* ===== ボタン / CTA ===== */
.btn,
.more-link,
.btn-wrap a,
.wp-block-button__link {
  background: #cc0000 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: 4px !important;
  border: none !important;
  letter-spacing: 0.05em;
  transition: background 0.2s !important;
  text-decoration: none !important;
}

.btn:hover,
.more-link:hover,
.btn-wrap a:hover,
.wp-block-button__link:hover {
  background: #990000 !important;
  color: #ffffff !important;
}

/* ===== パンくずリスト ===== */
.breadcrumb,
#breadcrumb {
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-size: 12px;
  color: #6b7280;
  padding: 8px 0 !important;
}

.breadcrumb a,
#breadcrumb a {
  color: #9ca3af !important;
}

.breadcrumb a:hover,
#breadcrumb a:hover {
  color: #cc0000 !important;
}

/* ===== 記事本文（個別投稿） ===== */
.entry-content p {
  color: #1a1a1a;
  line-height: 1.8;
  margin-bottom: 1.2em;
}

.entry-content strong {
  color: #1a1a1a;
  font-weight: 700;
}

/* ===== タグ ===== */
.tag-cloud a,
.post-tags a {
  background: #f9fafb;
  color: #6b7280;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.tag-cloud a:hover,
.post-tags a:hover {
  background: #fff5f5;
  color: #cc0000;
  border-color: #ffcccc;
}

/* ===== ページネーション ===== */
.pagination .current,
.page-numbers.current {
  background: #cc0000 !important;
  color: #ffffff !important;
  border-color: #cc0000 !important;
  border-radius: 4px;
}

.pagination a,
.page-numbers a {
  color: #1a1a1a;
  border-color: #e5e7eb;
  border-radius: 4px;
}

.pagination a:hover,
.page-numbers a:hover {
  background: #fff5f5 !important;
  color: #cc0000 !important;
  border-color: #cc0000 !important;
}

/* ===== レスポンシブ（スマホ対応） ===== */
@media (max-width: 768px) {
  .site-name-text {
    font-size: 18px !important;
  }

  .entry-card-title {
    font-size: 13px !important;
  }

  h2 {
    font-size: 16px !important;
  }

  h3 {
    font-size: 14px !important;
  }

  .btn,
  .more-link {
    width: 100%;
    display: block;
    text-align: center;
  }
}

/* カテゴリー: 2列グリッド表示 */
.wp-block-categories-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 0 !important;
  list-style: none !important;
}
.wp-block-categories-list li {
  margin: 0 !important;
}
.wp-block-categories-list li a {
  display: block !important;
  padding: 4px 8px !important;
  font-size: 0.85em !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ===== サイドバー人気記事: 2行で省略（モックアップ準拠）===== */
.popular-entry-card-link,
.widget-entry-card-link {
  font-size: 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.5 !important;
}

/* ===== 人気記事ウィジェット フォントサイズ ===== */
.widget-entry-card {
  font-size: 13px !important;
}