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

/************************************
** デザインカスタマイズ（誠実ネイビー）
** キーカラー: #0C447C / アクセント: #378ADD
************************************/

/* ヘッダー下のアクセントライン */
#header-container {
  border-bottom: 4px solid #378ADD;
}

/* サイトタイトル */
#site-title, .site-name-text {
  font-weight: 700;
  letter-spacing: .04em;
}

/* 記事一覧：カード型に */
.home #main, .archive #main, .search #main {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
.entry-card-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(12, 68, 124, .10);
  padding: 1.2em;
  margin-bottom: 1.4em;
  transition: box-shadow .2s ease, transform .2s ease;
}
.entry-card-wrap:hover {
  box-shadow: 0 6px 16px rgba(12, 68, 124, .18);
  transform: translateY(-2px);
}
.entry-card-title {
  color: #0C447C;
  line-height: 1.5;
}
.cat-label {
  background: #0C447C;
  color: #fff;
  border: none;
  border-radius: 4px;
}

/* サイドバー：カード型に */
.sidebar {
  background: transparent;
  padding: 0;
}
.sidebar .widget {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(12, 68, 124, .10);
  padding: 1.4em 1.2em;
  margin-bottom: 1.4em;
}
.sidebar h3 {
  background: #0C447C;
  color: #fff;
  border-radius: 6px;
  padding: .5em .9em;
  font-size: 1em;
  margin-top: 0;
}

/* 記事ページ：見出し */
.article h2 {
  background: #EDF3FA;
  color: #0C447C;
  border-left: 6px solid #0C447C;
  border-radius: 0 6px 6px 0;
  padding: .6em .8em;
}
.article h3 {
  border-left: 4px solid #378ADD;
  border-bottom: 1px dashed #B5D4F4;
  padding: .3em .6em;
}

/* 目次 */
.toc {
  background: #F7FAFD;
  border: 1px solid #CFDDED;
  border-radius: 8px;
}
.toc-title {
  color: #0C447C;
}

/* 記事末尾の関連記事ブロック */
.article .related-posts {
  background: #F7FAFD;
  border: 1px solid #CFDDED;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin-top: 2em;
}

/* 引用 */
.article blockquote {
  border-left: 4px solid #378ADD;
  background: #F5F8FC;
}

/* フッター */
.footer {
  background: #0C447C;
  color: #fff;
}
.footer a {
  color: #B5D4F4;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  .entry-card-wrap {
    padding: .8em;
  }
}