@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 {
  --bg: #F5F3EE;
  --sub: #6B7A6E;
  --accent: #2C3A34;
  --text: #2B2B2B;
  --muted: #8a8a82;
  --line: #e3ded4;
}

/* ===== ベース ===== */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== 見出し ===== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.article-title {
  font-family: "Noto Serif JP", serif !important;
  color: var(--accent) !important;
  letter-spacing: 0.08em;
  font-weight: 500 !important;
}

/* ===== ヘッダー ===== */
#header {
  background: rgba(245, 243, 238, 0.9) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line) !important;
  padding: 20px 48px !important;
}

#header .header-in {
  background: transparent !important;
}

/* サイトタイトル */
#site-name-text a,
.site-name-text a {
  font-family: "Noto Serif JP", serif !important;
  font-size: 20px !important;
  color: var(--accent) !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
}

/* キャッチフレーズ */
#header-catch,
.catch {
  font-size: 11px !important;
  letter-spacing: 0.25em !important;
  color: var(--sub) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 300 !important;
}

/* ===== ナビゲーション ===== */
#navi .navi-in > ul > li > a,
.navi-in ul li a {
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  color: var(--accent) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  padding: 0 16px !important;
}

#navi .navi-in > ul > li > a:hover {
  opacity: 0.5 !important;
  background: transparent !important;
  color: var(--accent) !important;
}

/* ===== メインコンテンツ ===== */
#content,
.content-in {
  background: var(--bg) !important;
}

/* 記事カード */
.entry-card,
.a-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transition: opacity 0.3s !important;
}

.entry-card:hover,
.a-card:hover {
  opacity: 0.8;
  box-shadow: none !important;
  transform: none !important;
}

.entry-card-title,
.a-card-title {
  font-family: "Noto Serif JP", serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  line-height: 1.7 !important;
}

/* カテゴリラベル */
.cat-label,
.entry-card-cat {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 11px !important;
  letter-spacing: 0.25em !important;
  background: var(--sub) !important;
  border: none !important;
}

/* ===== サイドバー ===== */
#sidebar {
  background: var(--bg) !important;
}

.sidebar .widget {
  margin-bottom: 3em;
}

.widget-title,
.sidebar .widgettitle,
.sidebar .widget-title,
.sidebar h3 {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  color: var(--sub) !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 0 0 0.6em 0 !important;
  margin-bottom: 1.4em !important;
  background: none !important;
}

/* プロフィールカード */
.author-box {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  padding: 1.6em 1.2em !important;
  text-align: center !important;
  box-shadow: none !important;
}
.author-box .author-thumb img {
  border-radius: 50% !important;
  width: 80px !important;
  height: 80px !important;
}
.author-box .author-name {
  font-family: "Noto Serif JP", serif !important;
  font-weight: 500 !important;
  margin-top: 0.8em !important;
}

/* カテゴリー・新着・人気記事リスト */
.sidebar ul li {
  border-bottom: 1px solid var(--line) !important;
  padding: 0.8em 0 !important;
}
.sidebar ul li a {
  color: var(--text) !important;
}
.sidebar ul li a:hover {
  color: var(--sub) !important;
}

/* ===== フッター ===== */
#footer {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
}

#footer a,
#footer .footer-in,
#footer p,
.footer-copy {
  color: rgba(245, 243, 238, 0.7) !important;
}

/* ===== ボタン ===== */
.btn,
.more-btn,
.read-more-btn {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 2px !important;
  letter-spacing: 0.15em !important;
  font-size: 13px !important;
}

.btn:hover,
.more-btn:hover {
  background: var(--sub) !important;
  opacity: 1 !important;
}

/* ===== 区切り線 ===== */
hr, .wp-block-separator {
  border-color: var(--line) !important;
}

/* ===== キャッチフレーズ非表示 ===== */
.tagline,
#header-catch,
.header-catch {
  display: none !important;
}


/* ===== アピールエリア（キャッチコピー）===== */
.appeal {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 120px 40px !important;
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}
/* 霧表現：生成り色のベール */
.appeal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245, 243, 238, 0.45) 0%,
    rgba(245, 243, 238, 0.65) 50%,
    rgba(245, 243, 238, 0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* 中央に向けた視線誘導ラジアル */
.appeal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 243, 238, 0.35) 0%,
    rgba(245, 243, 238, 0) 60%
  );
  pointer-events: none;
  z-index: 1;
}
.appeal-in, .appeal-content, .appeal-title, .appeal-message {
  position: relative;
  z-index: 2;
}
.appeal-in {
  background-color: transparent !important;
  box-shadow: none !important;
}
.appeal-content {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.appeal-title {
  font-family: "Noto Serif JP", serif !important;
  font-size: 32px !important;
  color: #2B2B2B !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(245, 243, 238, 0.6) !important;
}
.appeal-message {
  font-size: 14px !important;
  color: #3D453F !important;
  letter-spacing: 0.2em !important;
  margin-top: 20px !important;
  text-shadow: 0 1px 2px rgba(245, 243, 238, 0.6) !important;
  font-family: "Noto Serif JP", serif !important;
  font-weight: 400 !important;
}

/* ===== ナビ説明文非表示 ===== */
.navi-in .item-description {
  display: none !important;
}

/* ===== トップページ不要要素非表示 ===== */
.home .article-title,
.home .entry-title,
.home .post-date,
.home .article-header-before,
.home .article-header,
.home .article-footer {
  display: none !important;
}

.home #content {
  padding: 0 !important;
}

.home .article {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.home .main {
  background: transparent !important;
  padding: 0 !important;
}

.home .content-in {
  display: block !important;
}

/* ===== ページネーション ===== */
.page-numbers {
  color: var(--accent) !important;
  border-color: var(--line) !important;
}

.page-numbers.current {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .navi-in .menu-pc {
    display: flex !important;
  }
}

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

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