@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

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

/************************************
** ノヴァリス 人事コラム（A案：ネイビー×明朝）
** 控え：novalis-hp リポジトリ wordpress/column/wp-content/themes/cocoon-child-master/style.css
** 配色：濃紺 #14213D／本文 #1E2430／補助 #4A5263／罫線 #E3E6EC／面 #F4F5F8／差し色（罫線のみ） #A8874A
************************************/
:root {
  --nv-navy: #14213D;
  --nv-navy-hover: #2E4A7D;
  --nv-ink: #1E2430;
  --nv-sub: #4A5263;
  --nv-rule: #E3E6EC;
  --nv-surface: #F4F5F8;
  --nv-gold: #A8874A;
  --nv-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --nv-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

body {
  background: #FFFFFF;
  color: var(--nv-ink);
  font-family: var(--nv-sans);
}
a { color: var(--nv-navy); }
a:hover { color: var(--nv-navy-hover); }

/* 見出しは明朝 */
.site-name-text,
.entry-title,
.article h2,
.article h3,
.entry-card-title,
.related-entry-card-title,
.widget-entry-card-title,
.archive-title {
  font-family: var(--nv-serif);
  color: var(--nv-navy);
}

/* ヘッダー：白地＋細い罫線、ロゴは英字＋明朝 */
#header-container,
#header-container .navi,
#navi .navi-in > ul {
  background: #FFFFFF;
}
#header-container {
  border-bottom: 1px solid var(--nv-rule);
}
.site-name-text {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
}
.site-name-text-link,
.site-name-text-link:hover {
  color: var(--nv-navy);
}
/* Cocoon がキーカラー設定からヘッダー文字を白にするため、ヘッダー内だけ強めに上書き */
#header .site-name-text,
#header .site-name-text-link {
  color: var(--nv-navy) !important;
}
#navi .navi-in > ul > li {
  width: auto;
}
#navi .navi-in > ul > li > a {
  padding: 0 18px;
}
#navi .navi-in a {
  color: var(--nv-navy);
  font-size: 15px;
  font-weight: 500;
}
#navi .navi-in a:hover {
  background: transparent;
  color: var(--nv-navy-hover);
  box-shadow: inset 0 -2px 0 var(--nv-gold);
}

/* 本文エリア */
#container,
.content,
.main,
.sidebar {
  background: #FFFFFF;
}
.main,
.sidebar {
  border: none;
}

/* 記事カード */
.entry-card-wrap {
  border-bottom: 1px solid var(--nv-rule);
  padding-bottom: 20px;
}
.entry-card-wrap:hover {
  background: var(--nv-surface);
}
.entry-card-title {
  font-weight: 700;
  line-height: 1.6;
}
.entry-card-snippet {
  color: var(--nv-sub);
  line-height: 1.9;
}
.cat-label {
  background: var(--nv-navy);
  color: #FFFFFF;
  border: none;
  font-family: var(--nv-sans);
  letter-spacing: 0.06em;
}

/* 記事ページの見出し */
.article h2 {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--nv-navy);
  padding: 0.4em 0;
}
.article h3 {
  border: none;
  border-left: 0;
  border-bottom: 1px solid var(--nv-gold);
  padding: 0.3em 0;
}

/* サイドバー：小見出しは小さく字間を空けて、上に罫線 */
.sidebar h2,
.sidebar h3,
.widget-sidebar-title {
  background: transparent;
  color: var(--nv-sub);
  font-family: var(--nv-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: none;
  border-top: 1px solid var(--nv-navy);
  padding: 12px 0 8px;
  margin-bottom: 8px;
}
.sidebar .widget_categories ul li a {
  border-bottom: 1px solid var(--nv-rule);
  padding: 12px 0;
  color: var(--nv-navy);
}
.search-edit {
  border-color: var(--nv-rule);
}
.search-submit {
  color: var(--nv-navy);
}
.sidebar .wp-block-search__label {
  color: var(--nv-sub);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.wp-block-search__button {
  background: var(--nv-navy);
  color: #FFFFFF;
  border: none;
}

/* フッター：濃紺 */
#footer,
.footer {
  background: var(--nv-navy);
  color: #D5DAE5;
}
#footer a,
.footer a,
.footer .site-name-text-link {
  color: #FFFFFF;
}
.footer .site-name-text {
  color: #FFFFFF;
}
.copyright {
  color: #D5DAE5;
  font-size: 13px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .site-name-text {
    font-size: 20px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .entry-card-wrap {
    padding-bottom: 14px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .site-name-text {
    font-size: 18px;
  }
}