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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ============================================================
   スグデルタイム LP準拠 Cocoon カスタムCSS
   子テーマの style.css 末尾にコピペしてください
   ============================================================ */

/* --- フォント --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
}

/* ============================================================
   ヘッダー：深い青のグラデーション
   ============================================================ */
.header {
    background: linear-gradient(135deg, #0f2557 0%, #1e3fa8 55%, #3730a3 100%) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 4px 24px rgba(15, 37, 87, 0.35) !important;
}

.header-inner {
    background: transparent !important;
}

/* サイトタイトル */
.site-name-text,
.site-name-text a,
.header .logo a {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

/* サイトキャッチフレーズ */
.site-description-text {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.75rem;
}

/* ============================================================
   グローバルナビゲーション
   ============================================================ */
.navi {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.navi-in > ul > li > a,
.navi-in > ul > li > span {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    transition: color 0.2s, background 0.2s;
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li:hover > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.5rem;
}

.navi-in > ul > li.current-menu-item > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 0.5rem;
}

/* ドロップダウン */
.navi-in ul ul {
    background: #1e3a8a !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

.navi-in ul ul li a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
    font-size: 0.8rem;
}

.navi-in ul ul li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ============================================================
   見出し：H2 / H3
   ============================================================ */
.article h2,
.entry-content h2 {
    background: linear-gradient(90deg, #1d4ed8 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    border-left: none !important;
    margin: 2rem 0 1rem !important;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 12px rgba(29, 78, 216, 0.25);
}

.article h3,
.entry-content h3 {
    color: #1d4ed8 !important;
    font-weight: 900 !important;
    font-size: 1rem;
    border: none !important;
    border-left: 4px solid #1d4ed8 !important;
    padding: 0.4rem 0 0.4rem 1rem !important;
    margin: 1.5rem 0 0.75rem !important;
    background: transparent !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

.article h4,
.entry-content h4 {
    color: #1e3a8a !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #dbeafe !important;
    padding-bottom: 0.35rem !important;
    margin: 1.25rem 0 0.6rem !important;
}

/* ============================================================
   リンク・ボタン
   ============================================================ */
.article a,
.entry-content a {
    color: #1d4ed8 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s, opacity 0.2s;
}

.article a:hover,
.entry-content a:hover {
    color: #1e40af !important;
    opacity: 0.85;
}

/* もっと読むボタン / 汎用ボタン */
.more-link,
.btn,
.btn-wrap > a {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-weight: 900 !important;
    padding: 0.75rem 1.75rem !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 12px rgba(29, 78, 216, 0.3) !important;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
}

.more-link:hover,
.btn:hover,
.btn-wrap > a:hover {
    background: #1e40af !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(29, 78, 216, 0.4) !important;
}

/* ============================================================
   記事カード
   ============================================================ */
.entry-card,
.related-entry-card,
.popular-entry-card {
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #ffffff !important;
}

.entry-card:hover,
.related-entry-card:hover,
.popular-entry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(29, 78, 216, 0.12) !important;
}

.entry-card-title,
.related-entry-card-title,
.popular-entry-card-title {
    font-weight: 900 !important;
    color: #1e293b !important;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* カテゴリーバッジ */
.cat-label,
.cat-link {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.6rem !important;
    border: none !important;
}

/* ============================================================
   記事本文エリア
   ============================================================ */
.article,
.entry-content {
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    padding: 2rem !important;
}

/* ============================================================
   サイドバー
   ============================================================ */
.sidebar {
    background: transparent !important;
}

.sidebar .widget {
    background: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

.sidebar .widget-title,
.sidebar .widgettitle {
    font-weight: 900 !important;
    color: #1e293b !important;
    font-size: 0.875rem !important;
    border-bottom: 2px solid #dbeafe !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.875rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}

.sidebar a {
    color: #1d4ed8 !important;
    font-weight: 500;
    font-size: 0.85rem;
}

.sidebar a:hover {
    color: #1e40af !important;
}

/* ============================================================
   目次
   ============================================================ */
#toc_container,
.toc,
.tocBox {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
}

.toc_title,
.tocTitle {
    color: #1d4ed8 !important;
    font-weight: 900 !important;
    font-size: 0.875rem;
}

#toc_container li a,
.toc li a {
    color: #1d4ed8 !important;
    text-decoration: none;
}

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb,
.breadcrumb-list {
    font-size: 0.75rem !important;
    color: #64748b !important;
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

.breadcrumb a {
    color: #1d4ed8 !important;
}

/* ============================================================
   ページネーション
   ============================================================ */
.pagination .page-numbers,
.pager-links a {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    transition: all 0.2s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}

/* ============================================================
   フッター
   ============================================================ */
.footer {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-top: 1px solid #1e293b !important;
    padding: 2.5rem 0 !important;
}

.footer a {
    color: #94a3b8 !important;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.footer a:hover {
    color: #ffffff !important;
}

.footer .footer-title,
.footer .widget-title {
    color: #e2e8f0 !important;
    font-weight: 900 !important;
    font-size: 0.875rem !important;
}

.copyright {
    color: #475569 !important;
    font-size: 0.75rem !important;
    background: #0a0f1e !important;
    padding: 0.75rem 0 !important;
    border-top: 1px solid #1e293b !important;
}

/* ============================================================
   モバイルメニュー
   ============================================================ */
.navi-toggle {
    color: #ffffff !important;
}

.navi-toggle .hamburger,
.navi-toggle .hamburger::before,
.navi-toggle .hamburger::after {
    background-color: #ffffff !important;
}

.sp-menu-box {
    background: #1e3a8a !important;
}

.sp-menu-box a {
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   検索フォーム
   ============================================================ */
.search-form input[type="search"],
.search-form .search-field {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.5rem 0.875rem !important;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.875rem;
}

.search-form input[type="submit"],
.search-form .search-submit {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer;
    transition: background 0.2s;
}

.search-form input[type="submit"]:hover {
    background: #1e40af !important;
}

/* ============================================================
   タグ・カテゴリーページタイトル
   ============================================================ */
.archive-title,
.page-header h1 {
    font-weight: 900 !important;
    color: #1e293b !important;
    font-size: 1.25rem;
    border-left: 4px solid #1d4ed8 !important;
    padding-left: 0.875rem !important;
}

/* ============================================================
   レスポンシブ調整
   ============================================================ */
@media (max-width: 768px) {
    .article,
    .entry-content {
        padding: 1.25rem !important;
        border-radius: 0.75rem;
    }

    .article h2,
    .entry-content h2 {
        font-size: 1rem;
        padding: 0.625rem 1rem !important;
    }
}

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

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

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