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

/* ========================================
   動画編集ナビ カスタムデザイン
   カラー: ホワイト × ブルー
   ======================================== */

:root {
  --primary: #1a6dd0;
  --primary-dark: #0f4fa3;
  --primary-light: #4f96e8;
  --accent: #f7a800;
  --bg: #f0f5fb;
  --white: #ffffff;
  --text: #1e2d3d;
  --text-muted: #5a7184;
  --border: #dce8f5;
  --shadow: 0 4px 20px rgba(26,109,208,0.10);
  --radius: 12px;
}

body { background-color: var(--bg) !important; color: var(--text) !important; }

/* ヘッダー */
#header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%) !important;
  box-shadow: 0 4px 24px rgba(15,79,163,0.35) !important;
}
.site-name-text, .site-name-text a, #logo .site-name-text {
  color: #ffffff !important; font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tagline { color: rgba(255,255,255,0.75) !important; }
#navi, .global-nav, #navi .navi-in { background: rgba(10,55,130,0.97) !important; }
.navi-in > ul > li > a { color: #ffffff !important; font-weight: 600; transition: background 0.2s, color 0.2s; padding: 14px 18px !important; }
.navi-in > ul > li > a:hover, .navi-in > ul > li.current-menu-item > a { background: rgba(255,255,255,0.12) !important; color: var(--accent) !important; }

/* 記事カード */
.entry-card-wrap, .related-entry-card-wrap {
  background: var(--white) !important; border: none !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.entry-card-wrap:hover, .related-entry-card-wrap:hover {
  transform: translateY(-5px) !important; box-shadow: 0 14px 40px rgba(26,109,208,0.22) !important;
}
.entry-card-thumbnail img { transition: transform 0.4s ease !important; }
.entry-card-wrap:hover .entry-card-thumbnail img { transform: scale(1.05) !important; }
.entry-card-title { color: var(--text) !important; font-weight: 700 !important; line-height: 1.65 !important; }
.entry-card-content { padding: 14px 18px 18px !important; }
.entry-card-snippet { color: var(--text-muted) !important; font-size: 0.88em !important; }
.cat-label, .category-label { background: var(--primary) !important; color: #fff !important; border-radius: 4px !important; font-weight: 700 !important; }

/* 記事本文 */
.article, #main .article {
  background: var(--white) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important; padding: 40px 44px !important;
}
.entry-title { color: var(--text) !important; font-weight: 800 !important; font-size: 1.7em !important; line-height: 1.5 !important; border-bottom: 3px solid var(--primary) !important; padding-bottom: 16px !important; margin-bottom: 28px !important; }
.entry-content h2 { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important; color: #ffffff !important; padding: 14px 20px !important; border-radius: 8px !important; font-size: 1.25em !important; font-weight: 800 !important; margin: 2.2em 0 1em !important; border-left: none !important; box-shadow: 0 4px 14px rgba(15,79,163,0.25); }
.entry-content h3 { color: var(--primary) !important; border-left: 5px solid var(--primary) !important; border-bottom: 1px solid var(--border) !important; padding: 9px 14px !important; background: #eef5ff !important; border-radius: 0 8px 8px 0 !important; font-size: 1.12em !important; font-weight: 700 !important; margin: 1.8em 0 0.8em !important; }
.entry-content p { line-height: 2.0 !important; margin-bottom: 1.4em !important; }
.entry-content a { color: var(--primary) !important; text-decoration-color: rgba(26,109,208,0.3); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--primary-dark) !important; }
.entry-content strong { color: var(--primary-dark) !important; font-weight: 700; }
.entry-content table { border-collapse: collapse !important; width: 100% !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(26,109,208,0.10) !important; margin: 1.5em 0 !important; }
.entry-content th { background: var(--primary) !important; color: #fff !important; font-weight: 700 !important; padding: 12px 16px !important; border: none !important; }
.entry-content td { padding: 10px 16px !important; border-bottom: 1px solid var(--border) !important; }
.entry-content tr:nth-child(even) td { background: #eef5ff !important; }
.entry-content blockquote { background: #eef5ff !important; border-left: 5px solid var(--primary-light) !important; border-radius: 0 8px 8px 0 !important; padding: 16px 20px !important; color: var(--text-muted) !important; margin: 1.5em 0 !important; }

/* パンくず */
#breadcrumb { background: var(--white) !important; border-bottom: 2px solid var(--border) !important; padding: 10px 20px !important; }
#breadcrumb a { color: var(--primary) !important; }

/* 目次 */
.toc { background: #eef5ff !important; border: 2px solid var(--border) !important; border-radius: var(--radius) !important; padding: 20px 24px !important; margin: 1.5em 0 !important; }
.toc-title { color: var(--primary) !important; font-weight: 800 !important; }
.toc a { color: var(--primary) !important; }

/* サイドバー */
#sidebar .widget { background: var(--white) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; overflow: hidden !important; margin-bottom: 24px !important; border: none !important; }
#sidebar .widget-title, #sidebar .widgettitle { background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important; color: #ffffff !important; font-weight: 800 !important; padding: 12px 18px !important; margin: 0 !important; border: none !important; }
#sidebar .widget ul li { border-bottom: 1px solid var(--border) !important; padding: 8px 4px !important; }
#sidebar .widget ul li a { color: var(--text) !important; font-size: 0.92em; }
#sidebar .widget ul li a:hover { color: var(--primary) !important; }

/* フッター */
#footer { background: linear-gradient(135deg, var(--primary-dark) 0%, #082a6e 100%) !important; color: rgba(255,255,255,0.85) !important; border-top: 4px solid var(--accent) !important; }
#footer a { color: rgba(255,255,255,0.7) !important; }
#footer a:hover { color: var(--accent) !important; }
.footer-copy, #footer .copyright { color: rgba(255,255,255,0.55) !important; font-size: 0.85em !important; }

/* ボタン */
.btn, .btn-wrap > a { background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important; color: #fff !important; border-radius: 50px !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(26,109,208,0.3) !important; transition: all 0.25s ease !important; border: none !important; }
.btn:hover, .btn-wrap > a:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(26,109,208,0.4) !important; }

#content { padding-top: 24px !important; }

@media screen and (max-width: 1023px) {
  .article, #main .article { padding: 28px 20px !important; }
  .entry-title { font-size: 1.4em !important; }
}
@media screen and (max-width: 834px) {
  .article, #main .article { padding: 20px 14px !important; }
  .entry-content h2 { font-size: 1.1em !important; padding: 11px 14px !important; }
  .entry-content h3 { font-size: 1.0em !important; }
}