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

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

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

:root {
  --gs-red: #FF3C28;
  --gs-blue: #00C3E3;
  --gs-navy: #1D2B4F;
  --gs-bg: #F4F6FA;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  background: var(--gs-bg) !important;
}

/* ---- ヘッダー ---- */
#header {
  background: var(--gs-red) !important;
}
#logo,
#logo a,
#site-name a {
  font-family: "Zen Maru Gothic", "Hiragino Sans", sans-serif;
  font-weight: 900;
  color: #fff !important;
  letter-spacing: .02em;
}
#site-description {
  color: rgba(255,255,255,.85) !important;
}

/* ---- グローバルメニュー ---- */
#navi {
  background: var(--gs-navy) !important;
}
#navi a {
  color: #fff !important;
  font-weight: 700;
}
#navi .current-menu-item > a,
#navi a:hover {
  background: var(--gs-blue) !important;
  color: var(--gs-navy) !important;
}

/* ---- モバイルメニュー(ハンバーガー/ドロワー) ---- */
#nav-drawer,
.drawer--right {
  background: #fff;
}
.drawer-nav a {
  color: #2a2a2a !important;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
}
.drawer-nav a:hover,
.drawer-nav .current-menu-item > a {
  color: var(--gs-red) !important;
}
#nav-toggle span {
  background: #fff !important;
}

/* ---- パンくずリスト ---- */
.breadcrumb {
  background: transparent !important;
  font-size: 12px !important;
}
.breadcrumb a {
  color: var(--gs-navy) !important;
}

/* ---- 記事タイトル・本文(単一記事/固定ページ) ---- */
.article .entry-title,
.page .entry-title {
  font-family: "Zen Maru Gothic", "Hiragino Sans", sans-serif;
  font-weight: 900 !important;
  border-left: 8px solid var(--gs-red);
  padding-left: 14px !important;
}
.entry-content h2 {
  border-left: 6px solid var(--gs-blue) !important;
  background: #fff !important;
  border-bottom: none !important;
}
.entry-content h3 {
  border-bottom: 3px solid var(--gs-red) !important;
}
.entry-content a:not(.a-btn) {
  color: #d92a17 !important;
}

/* ---- 目次(TOC) ---- */
.toc-title {
  background: var(--gs-navy) !important;
  color: #fff !important;
}
.toc {
  border: 2px solid var(--gs-navy) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* ---- 記事カード(一覧・関連記事共通) ---- */
.entry-card {
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(29,43,79,.12) !important;
  border: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(29,43,79,.2) !important;
}
.entry-card-title {
  font-weight: 700 !important;
}
.cat-label {
  border-radius: 999px !important;
  font-weight: 700 !important;
}
a.entry-card-wrap .cat-label-a {
  background: var(--gs-red) !important;
}

/* ---- サイドバー ---- */
#sidebar .widget {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(29,43,79,.08) !important;
  overflow: hidden;
}
.widget-title,
.box-title-h3 {
  background: var(--gs-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#author-box,
.author-box {
  border-radius: 16px !important;
  border: 2px solid var(--gs-blue) !important;
}

/* ---- ページネーション ---- */
.pagination .page-numbers {
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.pagination .current {
  background: var(--gs-red) !important;
  border-color: var(--gs-red) !important;
  color: #fff !important;
}

/* ---- ボタン類 ---- */
.sns-follow-text,
.a-wrap .a-btn,
.btn-normal,
#commentform #submit,
.search-submit {
  border-radius: 999px !important;
}
.a-wrap .a-btn.a-btn-glad {
  background: var(--gs-red) !important;
  border-color: var(--gs-red) !important;
}

/* ---- フッター ---- */
#footer {
  background: var(--gs-navy) !important;
  color: rgba(255,255,255,.8) !important;
}
#footer a {
  color: rgba(255,255,255,.85) !important;
}
#footer-copyright {
  color: rgba(255,255,255,.55) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  #logo,
  #logo a,
  #site-name a {
    font-size: 20px !important;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .entry-card-title {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .article .entry-title,
  .page .entry-title {
    font-size: 22px !important;
  }
  #content-top,
  #content-bottom {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  #logo,
  #logo a,
  #site-name a {
    font-size: 17px !important;
  }
  .entry-card {
    border-radius: 14px !important;
  }
  .article .entry-title,
  .page .entry-title {
    font-size: 19px !important;
    border-left-width: 6px;
  }
}