@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 {
  --gold: #C9B274;
  --gold-light: #D9C47C;
  --gold-pale: #E8DCBA;
  --gold-dark: #A89358;
  --beige: #F3EDE2;
  --beige-light: #F9F6F1;
  --beige-dark: #E4DACB;
  --warm-white: #FDFCF9;
  --brown: #7B6548;
  --brown-light: #9B8A6E;
  --brown-dark: #5C4A33;
  --text: #5C4A33;
  --text-light: #8B7A60;
  --text-muted: #A89880;
}

/************************************
** ベース
************************************/
body {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.8;
}
a { color: var(--text); }
a:hover { color: var(--gold); }

/************************************
** ヘッダー
************************************/
.header-container {
  background: #fff;
  border-bottom: 1px solid var(--beige);
}
.header-container-in {
  background: #fff;
}
#header .header-in {
  background: #fff;
}
.logo-text, .site-name-text {
  color: var(--brown) !important;
}
.logo-header img, .logo img {
  max-height: 48px;
}
.tagline {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
}

/************************************
** ナビゲーション
************************************/
.navi-in {
  background: #fff !important;
  border-top: 1px solid var(--beige);
  border-bottom: 1px solid var(--beige);
}
.navi-in a {
  color: var(--text-light) !important;
  font-size: 0.85rem;
}
.navi-in a:hover {
  color: var(--gold) !important;
  background: transparent !important;
}
.navi-in > ul li {
  width: auto !important;
  padding: 0 1.5em !important;
}
.navi-in > ul > .menu-item-has-children > a::after {
  color: var(--text-muted);
}
.navi-in > ul .sub-menu {
  background: #fff;
  border: 1px solid var(--beige);
  box-shadow: 0 4px 12px rgba(123,101,72,0.08);
}
.navi-in > ul .sub-menu a {
  color: var(--text-light) !important;
  border-bottom: 1px solid var(--beige) !important;
}
.navi-in > ul .sub-menu a:hover {
  color: var(--gold) !important;
}

/* モバイルメニュー */
.menu-drawer {
  background: #fff !important;
}
.menu-drawer a {
  color: var(--text) !important;
}
.menu-drawer li {
  border-bottom: 1px solid var(--beige) !important;
}
.mobile-menu-buttons {
  background: #fff !important;
  border-top: 1px solid var(--beige) !important;
}
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button {
  color: var(--text-light) !important;
  border-right: 1px solid var(--beige) !important;
}

/************************************
** パンくずリスト
************************************/
.breadcrumb {
  background: var(--beige-light);
  border-bottom: 1px solid var(--beige);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--gold); }

/************************************
** 記事タイトル
************************************/
.entry-title, .archive-title {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.6;
  margin: 0 0 1em 0;
  padding: 0;
}
.article h1.entry-title {
  border: none;
  padding: 0;
}

/************************************
** 投稿メタ情報
************************************/
.entry-date, .post-date, .update-date {
  color: var(--text-muted);
}
.cat-label {
  background: var(--gold) !important;
  color: #fff !important;
  border-radius: 3px;
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
}
.category-label {
  background: var(--gold) !important;
  color: #fff !important;
}
.entry-categories-tags .cat-link {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px;
}
.entry-categories-tags .tag-link {
  background: transparent !important;
  color: var(--text-light) !important;
  border: 1px solid var(--beige-dark) !important;
  border-radius: 3px;
}
.entry-categories-tags .tag-link:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/************************************
** 記事本文
************************************/
.entry-content {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 2;
}
.entry-content p {
  margin-bottom: 1.5em !important;
}
.entry-content a {
  color: var(--gold);
  text-decoration: underline;
}
.entry-content a:hover {
  color: var(--gold-dark);
}

/* 見出し h2 */
.article h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brown);
  background: none !important;
  border: none !important;
  border-bottom: 2px solid var(--gold) !important;
  padding: 0 0 0.5em 0 !important;
  margin: 2.5em 0 1em;
  position: relative;
}

/* 見出し h3 */
.article h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brown);
  background: none !important;
  border: none !important;
  border-left: 3px solid var(--gold) !important;
  padding: 0.3em 0 0.3em 0.8em !important;
  margin: 2em 0 0.8em;
}

/* 見出し h4 */
.article h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown);
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 1.5em 0 0.6em;
}

/* 引用 */
.entry-content blockquote {
  background: var(--beige-light);
  border-left: 3px solid var(--gold-pale);
  color: var(--text-light);
  padding: 1.2em 1.5em;
  border-radius: 0 6px 6px 0;
}
.entry-content blockquote::before {
  color: var(--gold-pale) !important;
}

/* リスト */
.entry-content ul li::marker,
.entry-content ol li::marker {
  color: var(--gold);
}

/* テーブル */
.entry-content table {
  border-color: var(--beige-dark);
}
.entry-content table th {
  background: var(--beige-light);
  color: var(--brown);
  border-color: var(--beige-dark);
}
.entry-content table td {
  border-color: var(--beige-dark);
}
table tr:nth-of-type(2n+1) {
  background: transparent !important;
}

/* ボックス・囲み */
.blank-box {
  border-color: var(--beige-dark);
}
.information-box, .question-box, .alert-box {
  background: var(--beige-light);
}
.primary-box {
  border-color: var(--gold);
  background: rgba(201,178,116,0.04);
}

/************************************
** SNSシェアボタン
************************************/
.ss-top .sns-share-message,
.ss-bottom .sns-share-message {
  color: var(--text-muted);
}

/************************************
** 関連記事
************************************/
.related-entry-heading {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  text-align: center;
  color: var(--brown);
}
.related-entry-card {
  border: 1px solid var(--beige);
  border-radius: 6px;
  overflow: hidden;
}
.related-entry-card:hover {
  border-color: var(--gold-pale);
}
.related-entry-card-content {
  padding: 0 1em;
}
.related-entry-card-snippet, .entry-card-snippet {
  line-height: 1.6;
  font-size: 0.78rem;
  color: var(--text-light);
}
.related-entry-card-title, .entry-card-title {
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 0.4em;
}

/************************************
** コメント欄
************************************/
.comment-area {
  border-top: 1px solid var(--beige);
}
.comment-btn {
  background: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
}

/************************************
** ページネーション（前後記事）
************************************/
.pager-post-navi a {
  color: var(--text);
}
.pager-post-navi a:hover {
  color: var(--gold);
}
.pagination .current {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.pagination a:hover {
  background: rgba(201,178,116,0.06);
  border-color: var(--gold);
  color: var(--gold);
}

/************************************
** 目次
************************************/
.toc {
  background: var(--beige-light);
  border: 1px solid var(--beige);
  border-radius: 6px;
}
.toc-title {
  color: var(--brown);
  font-weight: 600;
}
.toc a {
  color: var(--text-light);
}
.toc a:hover {
  color: var(--gold);
}

/************************************
** サイドバー
************************************/
.sidebar h2, .sidebar h3 {
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--beige-light) !important;
  color: var(--brown) !important;
  border-left: 3px solid var(--gold);
  padding: 0.55em 0.8em;
}
.sidebar li {
  font-size: 14px;
  border-bottom: 1px solid var(--beige);
}
.sidebar a { color: var(--text-light); }
.sidebar a:hover { color: var(--gold); }

.widget-sidebar th,
.widget-sidebar td,
.widget-sidebar p,
.widget-sidebar li {
  font-size: 14px !important;
}
.widget-sidebar th,
.widget-sidebar td {
  padding: 0.75em;
}
.widget-sidebar .wpp-list {
  padding: 0;
}
.widget-sidebar .wpp-list li span {
  display: block;
  text-align: right;
  font-size: 12px !important;
}

/* プロフィール */
.author-box {
  border: 1px solid var(--beige);
  border-radius: 6px;
  box-shadow: none;
}
.nwa .author-box {
  box-shadow: 0px 2px 8px rgba(74,60,42,0.06);
}
.author-box p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-light);
}
.author-box .author-name a {
  color: var(--gold) !important;
  font-weight: 600;
}

.prof-read {
  border-bottom: 3px solid var(--gold-pale) !important;
  padding: 0 0 1em !important;
  margin-bottom: 1em !important;
}

/* カテゴリ矢印 */
.menu-item-has-children li::before {
  content: "▶";
  margin-right: 0.5em;
  color: var(--gold-pale);
  font-size: 0.6em;
}
.menu-item-has-children li:last-child {
  border-bottom: none;
}

/* 目次サイドバー */
.sidebar .toc-list li {
  padding: 0.5em 0;
}

/* 検索 */
.search-box input[type="text"],
.wp-block-search__input {
  border: 1px solid var(--beige-dark);
  border-radius: 4px;
}
.search-box input[type="submit"],
.wp-block-search__button {
  background: var(--gold) !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
}
.widget_search .wp-block-search__label {
  display: none;
}

/************************************
** 記事カード（一覧ページ）
************************************/
.entry-card-wrap {
  border-bottom: 1px solid var(--beige);
}
.entry-card-wrap:hover {
  background: rgba(201,178,116,0.02);
}
.a-wrap {
  display: block;
  position: relative;
  padding: 1.5em 1em;
  border-bottom: 1px solid var(--beige);
}
.cat-label {
  background: var(--gold) !important;
}

/************************************
** コピーボタン
************************************/
.copy-button span {
  color: #fff !important;
}

/************************************
** ボタン
************************************/
.btn-wrap a, .btn-wrap button {
  border-radius: 50px;
}
.btn-wrap.btn-wrap-l a {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/************************************
** フッター（Cocoon側）
************************************/
#footer {
  background: var(--beige) !important;
  border-top: 1px solid var(--beige-dark);
}
footer.nb-footer .copyright {
  color: var(--text-muted);
  background-color: var(--beige-dark) !important;
  border-bottom: none;
}
#footer p, #footer a {
  color: var(--text-light) !important;
}
#footer a:hover {
  color: var(--gold) !important;
}
#footer .company-name {
  font-weight: bold;
  color: var(--brown) !important;
}
footer .map {
  background: var(--gold) !important;
  color: #fff !important;
}
#footer .copyright a,
#footer .copyright p {
  color: var(--text-muted) !important;
}
.footer-bottom-logo img {
  opacity: 1;
}

/************************************
** トップへ戻るボタン
************************************/
.go-to-top-button {
  background: var(--gold) !important;
  color: #fff !important;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(201,178,116,0.3);
}

/************************************
** レスポンシブ
************************************/
/* 投稿ページのレイアウト崩れ対処 */
@media(min-width:1650px) {
  .header-container { width: 100%; }
  .header-container-in.hlt-top-menu { width: 100%; }
  .content-in { max-width: 1140px; width: 100%; }
  .main { width: 70%; }
  .sidebar { width: 30%; }
}

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 834px) {
}

@media screen and (max-width: 480px) {
  #header .site-name-text img {
    width: auto;
    margin: auto;
  }
  .menu-drawer li {
    padding: 0.75em !important;
    border-bottom: 1px solid var(--beige) !important;
  }
  .entry-title, .archive-title {
    font-size: 1.4rem !important;
    margin: 0 0 1em 0 !important;
    padding: 0 !important;
  }
  #main {
    padding: 3vh 0;
  }
  .article h2 {
    font-size: 1.15rem;
  }
  .article h3 {
    font-size: 1rem;
  }
}