@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){
  /*必要ならばここにコードを書く*/
}
/* =========================
   ロゴ画像を確実に小さくする（Cocoon子テーマ用）
   ========================= */

/* ヘッダー内のロゴ（img / svg / カスタムロゴ全般） */
#header .logo img,
#header .logo svg,
.header-container .logo img,
.site-header .logo img,
.site-branding .custom-logo,
.site-branding .site-logo img,
a.custom-logo-link img,
a.custom-logo-link svg {
  max-height: 60px !important;  /* ← 縦幅。もっと小さくしたい時は 50px や 40px に */
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* ロゴ周りの余白も少し圧縮（ヘッダーが背高にならないように） */
#header .logo,
.site-header .logo,
.site-branding,
.header-container .logo {
  padding: 6px 0 !important;   /* 余白が広い場合は 0～8px で調整 */
}

/* フッターのロゴ（小さめに揃える） */
#footer .logo img,
.footer .logo img,
.footer-logo img,
.footer .site-logo img {
  max-height: 36px !important;  /* フッターロゴの推奨サイズ */
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
}

/* グローバルメニュー下のムダな空白の抑制（必要な場合） */
#navi { margin-bottom: 0 !important; }
#navi .navi-in { padding-bottom: 6px !important; }
/* 1) 見出し/本文の読みやすさを少し強化 */
.entry-card-title, /* 記事一覧のタイトル */
.article h2 { line-height: 1.35; }
body { letter-spacing: .01em; }

/* 2) カテゴリバッジを読みやすく（角丸＆濃いめ） */
.cat-label,
.category,
.entry-card .cat-label {
  background: #2f6fb3 !important;  /* 青系で統一 */
  color: #fff !important;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
}

/* 3) 日付アイコンと文字のズレを解消（ベースライン合わせ） */
.post-date i, .entry-card-meta i { margin-right: .35em; }
.post-date, .entry-card-meta { display: flex; align-items: center; gap: .25em; }

/* 4) 記事カードの影を控えめに・角を少しだけ丸く */
.entry-card-wrap, .entry-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  border-radius: 8px !important;
}

/* 5) グローバルメニューのタップ領域を少しだけ広げる（操作性UP） */
#navi .menu a {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-weight: 600;
  letter-spacing: .01em;
}

/* 6) ヒーロー（上の青帯）を少しだけ圧縮して
      “初回表示で記事タイトルが見えやすい” をキープ */
.header-container, .site-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 7) フッターの上下余白を微調整（詰めすぎ防止） */
#footer { padding-top: 18px !important; padding-bottom: 18px !important; }

/* 8) リンクのホバー/フォーカスをわずかに強調（アクセシビリティ） */
a:hover, a:focus { opacity: .9; text-decoration: underline; }
/* グローバルメニュー下の余白を削除 */
.navi {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* グローバルナビゲーション全体を調整 */
#navi, .global-menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* メニューリストの余計な余白削除 */
.global-menu ul {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* =========================
   1) ヘッダーロゴを小さく（背景画像型/画像型どちらでも当てる）
   ========================= */

/* 背景画像型（Cocoonで多いパターン） */
#header .logo a,
header#header .logo a,
#header .site-logo a{
  display: inline-block !important;
  height: 52px !important;            /* ←好みで 48〜60 に調整 */
  line-height: 52px !important;
  background-size: auto 52px !important;
  background-repeat: no-repeat !important;
  background-position: center left !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* コンテナの余白も薄めにして縦幅を抑える */
#header,
header#header,
#header .header-in,
.header-container{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 画像型（<img>タグのロゴだった場合はこちらが効く） */
#header .logo img,
header#header .logo img,
#header .site-logo img,
header#header .site-logo img{
  max-height: 52px !important;        /* ←同じ数値に揃える */
  height: auto !important;
  width: auto !important;
  display: inline-block !important;
}

/* =========================
   2) メニュー下の余白をさらに詰める
   ========================= */
#navi, #navi-in{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Cocoonのスキンが持つ影・帯の下マージンを消す保険 */
#header + .navi,
#header + #navi{
  margin-top: 0 !important;
}

/* スマホだけ少しタイトに（任意） */
@media (max-width: 480px){
  #header .logo a,
  header#header .logo a{ height: 50px !important; line-height: 50px !important; background-size: auto 50px !important; }
  #header .logo img,
  header#header .logo img{ max-height: 50px !important; }
  #navi{ margin-bottom: 4px !important; }
}