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

/* Google Fonts はヘッダー直後・最上段で読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* =============================
   ベース設定
============================= */
body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #222;
  background-color: #fff;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

a {
  color: #1976d2;
  text-decoration: none;
  transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease;
}
a:hover {
  text-decoration: underline;
  color: #125ba1;
}

h1, h2, h3 {
  color: #0d1c33;
  font-weight: 600;
}

div, p { margin-bottom: 1.2em; }

/* =============================
   ジャンルボタン
============================= */
.genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}
.genre-button {
  display: inline-block;
  padding: 10px 16px;
  background-color: #1976d2;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .3s, transform .12s ease;
}
.genre-button:hover { background-color: #125ba1; transform: translateY(-1px); }
.genre-button:focus-visible{ outline: 3px solid #94c2ff; outline-offset: 2px; }

/* =============================
   人気記事ランキング
============================= */
.rank-circle {
  display: inline-block;
  width: 1.6em; height: 1.6em; line-height: 1.6em;
  background-color: #1976d2; color: #fff; border-radius: 50%;
  font-weight: 700; margin-right: 8px; font-size: 0.9em; text-align: center;
}
.popular-posts p { margin-bottom: 18px; }
.popular-posts small { color: #555; font-size: 0.85em; }

/* =============================
   新着記事カードデザイン
============================= */
.new-posts li {
  list-style: none;
  border: 1px solid #ddd; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.new-posts li:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.new-posts li a { font-size: 1.05em; font-weight: 700; color: #1976d2; text-decoration: none; }
.new-posts li small { display: block; margin-top: 6px; color: #888; font-size: 0.85em; }

/* =============================
   記事本文リンク強調
============================= */
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }

/* =============================
   レスポンシブ
============================= */
@media (max-width: 600px){
  h1 { font-size: 1.5em !important; }
  h2 { font-size: 1.2em !important; }

  .genre-button{
    flex: 1 1 48%;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.9em;
  }
  .rank-circle{
    width: 1.4em !important; height: 1.4em !important; line-height: 1.4em !important;
    font-size: 0.9em !important;
  }
  .wpp-post-title{ font-size: 1em !important; }
  .new-posts li{ padding: 10px 12px; font-size: .95em; }
}

/* 動きが苦手な環境でアニメ抑制 */
@media (prefers-reduced-motion: reduce){
  .genre-button, .new-posts li{ transition: none !important; }
}

/* 固定ページのアイキャッチ領域を非表示 */
.page .eye-catch,
.page .entry-header .eye-catch {
  display: none !important;
}