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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ===== Transition-Leader / Cocoon Child ===== */
:root{
  --tl-ink:#14202E;   /* ヘッダー・H2・フッター */
  --tl-navy:#1C3350;  /* キーカラー */
  --tl-steel:#2E6C9E; /* リンク・アクセント */
  --tl-mist:#EEF2F6;  /* 背景 */
  --tl-line:#D5DDE6;  /* 罫線 */
  --tl-text:#25303B;  /* 本文 */
}
body{ color:var(--tl-text); background:var(--tl-mist); letter-spacing:.02em; }

/* ヘッダー・ナビ */
.header-container{ background:var(--tl-ink); }
.site-name-text{ color:#fff; font-weight:700; letter-spacing:.08em; }
.tagline{ color:#9FB3C8; }
.navi{ background:var(--tl-ink); border-top:1px solid rgba(255,255,255,.08); }
.navi-in a{ color:#DCE6F0; font-size:14px; }
.navi-in a:hover{ background:transparent; color:#fff; box-shadow:inset 0 -2px 0 var(--tl-steel); }
.mobile-menu-buttons{ background:var(--tl-ink); color:#fff; }

/* 一覧カード */
.entry-card-wrap{
  background:#fff; border:1px solid var(--tl-line); border-radius:4px;
  transition:transform .2s, box-shadow .2s;
}
.entry-card-wrap:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,32,46,.08); }
.entry-card-title{ font-weight:700; line-height:1.55; }
.cat-label{ border:none; border-radius:2px; font-size:11px; letter-spacing:.06em; padding:1px 8px; }

/* 本文エリア */
.main{ border:1px solid var(--tl-line); border-radius:4px; }
.article a{ color:var(--tl-steel); }
.article h2{
  background:var(--tl-ink); color:#fff; border:none;
  border-left:4px solid var(--tl-steel); border-radius:2px; padding:.7em 1em;
}
.article h3{
  border:none; border-bottom:2px solid var(--tl-line);
  position:relative; padding:.4em 0;
}
.article h3::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:3em; height:2px; background:var(--tl-steel);
}
.article h4{ border:none; border-left:3px solid var(--tl-line); padding:.1em 0 .1em .8em; }
.article blockquote{
  background:#F6F8FB; border:none; border-left:4px solid var(--tl-steel); color:#47566A;
}

/* 目次・ブログカード */
.toc{ background:#fff; border:1px solid var(--tl-line); border-radius:4px; }
.toc-title{ color:var(--tl-ink); font-weight:700; letter-spacing:.1em; }
.blogcard{ border:1px solid var(--tl-line); border-radius:4px; }

/* サイドバー */
.sidebar{ background:transparent; }
.sidebar h3{
  background:none; color:var(--tl-ink); font-size:15px; letter-spacing:.1em;
  border-bottom:2px solid var(--tl-ink); padding:.3em 0; border-radius:0;
}

/* フッター・トップへ戻る */
.footer{ background:var(--tl-ink); color:#9FB3C8; }
.footer a{ color:#DCE6F0; }
.go-to-top-button{ background:var(--tl-navy); color:#fff; border-radius:2px; }
.mobile-footer-menu-buttons{ background:var(--tl-ink); }
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button > a{ color:#DCE6F0; }


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

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

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