@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){
  /*必要ならばここにコードを書く*/
}
/*
==========================================================
  okky縺ｮRunning Lab 窶� Cocoon蟄舌ユ繝ｼ繝� 繧ｫ繧ｹ繧ｿ繝�CSS�井ｿｮ豁｣迚茨ｼ�
  螳滄圀縺ｮCocoon繧ｯ繝ｩ繧ｹ蜷阪↓蜷医ｏ縺帙※菫ｮ豁｣
==========================================================
*/

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繧ｫ繝ｩ繝ｼ螟画焚
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
:root {
  --color-bg:      #07111f;
  --color-surface: #0d1c30;
  --color-card:    #112038;
  --color-accent:  #1a6aff;
  --color-text:    rgba(255,255,255,0.90);
  --color-sub:     rgba(255,255,255,0.55);
  --color-mute:    rgba(255,255,255,0.25);
  --color-border:  rgba(255,255,255,0.08);
  --font-base: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝吶�繧ｹ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-base) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝倥ャ繝€繝ｼ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#header {
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}
.header-container,
.header-container-in,
.header-in {
  background-color: var(--color-bg) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繧ｰ繝ｭ繝ｼ繝舌Ν繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#navi {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
#navi .navi-in > ul > li > a {
  color: var(--color-sub) !important;
  font-size: 12px !important;
  padding: 12px 18px !important;
}
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current_page_item > a {
  color: var(--color-accent) !important;
  background-color: transparent !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝｡繧､繝ｳ繧ｳ繝ｳ繝�Φ繝�レ譎ｯ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#main,
.main,
#content,
.content,
.body-container,
.wrap {
  background-color: var(--color-bg) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   險倅ｺ九き繝ｼ繝会ｼ井ｸ€隕ｧ繝壹�繧ｸ��
   Cocoon縺ｮ螳滄圀縺ｮ繧ｯ繝ｩ繧ｹ蜷�
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */

/* 繧ｫ繝ｼ繝牙､匁棧 */
.entry-card-wrap,
.a-wrap,
.card-wrap {
  background-color: var(--color-card) !important;
  border: none !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: opacity 0.2s !important;
}
.entry-card-wrap:hover,
.a-wrap:hover,
.card-wrap:hover {
  opacity: 0.85 !important;
  box-shadow: none !important;
}

/* 繧ｫ繝ｼ繝牙�繧ｳ繝ｳ繝�Φ繝�Κ蛻� */
.entry-card,
.card {
  background-color: var(--color-card) !important;
}

/* 繧ｫ繝ｼ繝峨ち繧､繝医Ν */
.entry-card-title,
.card-title {
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

/* 繧ｫ繝ｼ繝画悽譁�栢邊� */
.entry-card-content,
.card-content,
.entry-card-snippet,
.card-snippet {
  background-color: var(--color-card) !important;
  color: var(--color-sub) !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

/* 繧ｫ繝ｼ繝峨Γ繧ｿ諠��ｱ�域律莉倥�繧ｫ繝�ざ繝ｪ�� */
.entry-card-meta,
.card-meta,
.entry-meta,
.post-date {
  color: var(--color-mute) !important;
  font-size: 11px !important;
  background-color: transparent !important;
}

/* 繧ｫ繝�ざ繝ｪ繝ｩ繝吶Ν */
.entry-card-label,
.card-label,
.cat-label,
.post-cat-label {
  background-color: rgba(26,106,255,0.18) !important;
  color: var(--color-accent) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 2px !important;
  border: none !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   險倅ｺ倶ｸ€隕ｧ繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ繧ｿ繧､繝医Ν
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
.archive-title,
.entry-title,
.page-title,
h2.widgettitle,
.widget-title {
  color: var(--color-text) !important;
}

.cats-box .cat-box-title,
.new-entry-title,
.popular-entry-title {
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   險倅ｺ玖ｩｳ邏ｰ繝壹�繧ｸ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
.entry-title {
  color: var(--color-text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 14px !important;
}

.entry-content {
  color: var(--color-sub) !important;
  font-size: 13px !important;
  line-height: 2.2 !important;
}
.entry-content p {
  color: var(--color-sub) !important;
  margin-bottom: 1.4em !important;
}

/* 隕句�縺幽2 */
.entry-content h2 {
  color: var(--color-text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  border-left: 3px solid var(--color-accent) !important;
  border-bottom: none !important;
  padding: 4px 0 4px 12px !important;
  margin: 2em 0 1em !important;
}

/* 隕句�縺幽3 */
.entry-content h3 {
  color: var(--color-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background-color: transparent !important;
  border-left: 3px solid rgba(26,106,255,0.6) !important;
  border-bottom: none !important;
  padding: 3px 0 3px 10px !important;
  margin: 1.6em 0 0.8em !important;
}

/* 繝ｪ繧ｹ繝� */
.entry-content ul li,
.entry-content ol li {
  color: var(--color-sub) !important;
}

/* 蠑慕畑 */
.entry-content blockquote {
  background-color: var(--color-surface) !important;
  border-left: 4px solid var(--color-accent) !important;
  color: var(--color-sub) !important;
  padding: 14px 18px !important;
  border-radius: 0 3px 3px 0 !important;
}
.entry-content blockquote p {
  color: var(--color-sub) !important;
}

/* 繝��繝悶Ν */
.entry-content table th {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-color: rgba(26,106,255,0.4) !important;
}
.entry-content table td {
  background-color: var(--color-card) !important;
  color: var(--color-sub) !important;
  padding: 10px 14px !important;
  border-color: var(--color-border) !important;
}
.entry-content table tr:nth-child(even) td {
  background-color: var(--color-surface) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   逶ｮ谺｡��Table of Contents��
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#toc_container {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 3px !important;
  padding: 16px 20px !important;
}
#toc_container p.toc_title {
  color: var(--color-mute) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
}
#toc_container ul li a {
  color: var(--color-sub) !important;
  font-size: 12px !important;
}
#toc_container ul li a:hover {
  color: var(--color-accent) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繧ｵ繧､繝峨ヰ繝ｼ蜈ｨ菴�
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#sidebar,
.sidebar {
  background-color: transparent !important;
}

/* 繧ｦ繧｣繧ｸ繧ｧ繝�ヨ譛ｬ菴� */
.widget,
#sidebar .widget,
.sidebar .widget {
  background-color: var(--color-card) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 20px !important;
  margin-bottom: 3px !important;
  box-shadow: none !important;
}

/* 繧ｦ繧｣繧ｸ繧ｧ繝�ヨ繧ｿ繧､繝医Ν */
.widget-title,
#sidebar .widget-title,
.sidebar .widget-title,
h2.widgettitle,
h3.widgettitle {
  color: var(--color-mute) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 0 10px 0 !important;
  margin-bottom: 14px !important;
}

/* 繧ｦ繧｣繧ｸ繧ｧ繝�ヨ蜀�ユ繧ｭ繧ｹ繝医�繝ｪ繝ｳ繧ｯ */
.widget p,
.widget li,
.widget a,
#sidebar .widget p,
#sidebar .widget li,
#sidebar .widget a {
  color: var(--color-sub) !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}
.widget a:hover {
  color: var(--color-accent) !important;
}
.widget li {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 8px 0 !important;
  list-style: none !important;
}
.widget li:last-child {
  border-bottom: none !important;
}

/* 繝励Ο繝輔ぅ繝ｼ繝ｫ繧ｦ繧｣繧ｸ繧ｧ繝�ヨ */
.author-box,
.author-widget-box,
.author-info {
  background-color: var(--color-card) !important;
  border: none !important;
  border-radius: 3px !important;
}
.author-name,
.author-widget-name {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}
.author-description,
.author-widget-description {
  color: var(--color-sub) !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
}

/* SNS繝輔か繝ｭ繝ｼ繧ｦ繧｣繧ｸ繧ｧ繝�ヨ */
.sns-follow-buttons a {
  opacity: 0.85 !important;
  border-radius: 2px !important;
}
.sns-follow-buttons a:hover {
  opacity: 1 !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝代Φ縺上★繝ｪ繧ｹ繝�
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#breadcrumb,
.breadcrumb,
.entry-breadcrumb {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 9px 20px !important;
}
#breadcrumb a,
.breadcrumb a {
  color: var(--color-accent) !important;
  font-size: 11px !important;
}
#breadcrumb span,
.breadcrumb span,
.breadcrumb li {
  color: var(--color-mute) !important;
  font-size: 11px !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝壹�繧ｸ繝阪�繧ｷ繝ｧ繝ｳ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
.pagination .page-numbers,
.paging-navigation .page-numbers {
  background-color: var(--color-card) !important;
  color: var(--color-sub) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 2px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
}
.pagination .page-numbers.current,
.paging-navigation .page-numbers.current {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   縲後ｂ縺｣縺ｨ隕九ｋ縲阪�繧ｿ繝ｳ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
.more-wrap .more-btn,
.load-more-btn {
  background-color: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-sub) !important;
  font-size: 12px !important;
  border-radius: 2px !important;
  padding: 10px 40px !important;
}
.more-wrap .more-btn:hover {
  background-color: var(--color-card) !important;
  color: var(--color-accent) !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繝輔ャ繧ｿ繝ｼ
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
#footer,
.footer {
  background-color: var(--color-surface) !important;
  border-top: 2px solid var(--color-accent) !important;
  color: var(--color-sub) !important;
}
#footer a,
.footer a,
.footer-link a {
  color: var(--color-sub) !important;
  font-size: 12px !important;
}
#footer a:hover,
.footer a:hover {
  color: var(--color-accent) !important;
}
.copyright,
#copyright,
.footer-copyright {
  color: var(--color-mute) !important;
  font-size: 11px !important;
  border-top: 1px solid var(--color-border) !important;
  padding-top: 12px !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   讀懃ｴ｢繝輔か繝ｼ繝�
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
.search-form input[type="search"],
.wp-block-search__input {
  background-color: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 2px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}
.search-form input[type="search"]::placeholder {
  color: var(--color-mute) !important;
}
.search-form .search-submit {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 8px 16px !important;
}

/* 笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€
   繧ｹ繝槭�蟇ｾ蠢�
笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€笏€ */
@media screen and (max-width: 834px) {
  .sp-menu-open .navi-menu-content {
    background-color: var(--color-surface) !important;
  }
  .navi-menu-content ul li a {
    color: var(--color-sub) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-size: 13px !important;
    padding: 14px 16px !important;
  }
  .navi-menu-content ul li a:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-card) !important;
  }

  /* 繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ繝懊ち繝ｳ */
  .menu-btn span {
    background-color: var(--color-text) !important;
  }

  /* 繧ｹ繝槭�險倅ｺ九き繝ｼ繝� */
  .entry-card-wrap,
  .a-wrap {
    background-color: var(--color-card) !important;
    margin-bottom: 2px !important;
  }
}