@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/* ========================================
 * CBDの選び方ノート — カスタムCSS
 * ======================================== */

/* --- Google Fonts: 明朝系見出し --- */

/* --- カラーパレット --- */
:root {
  --accent: #6b8f71;
  --accent-light: #e8f0e9;
  --accent-dark: #4a6b4f;
  --text-main: #333;
  --text-sub: #666;
  --bg-main: #fff;
  --bg-section: #f9faf9;
  --border: #dde3dd;
}

/* --- フォント設定 --- */
body {
  font-family: 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  color: var(--text-main);
  line-height: 1.85;
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-name-text {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

/* --- ヘッダー --- */
.header {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
  padding: 1.2em 0;
}
.site-name-text {
  color: var(--text-main);
  font-weight: 500;
  font-size: 1.6em;
  letter-spacing: 0.08em;
}
.tagline { color: var(--text-sub); font-size: 0.85em; }

/* --- ナビ --- */
.navi {
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
}
.navi-in a {
  color: var(--text-sub);
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.8em 1.5em;
}
.navi-in a:hover {
  color: var(--accent-dark);
  background: var(--accent-light);
}

/* --- コンテンツ幅 --- */
.wrap { max-width: 1100px; }

/* --- 見出しデザイン: 明朝＋洗練 --- */
.article h2 {
  border: none;
  border-bottom: 2px solid var(--accent);
  padding: 0 0 0.5em 0;
  background: none;
  font-size: 1.5em;
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.04em;
}
.article h3 {
  border: none;
  border-left: 3px solid var(--accent);
  padding: 0.2em 0 0.2em 0.8em;
  background: none;
  font-size: 1.25em;
  font-weight: 500;
  color: var(--text-main);
}
.article h4 {
  font-size: 1.1em;
  font-weight: 500;
  color: var(--accent-dark);
}

/* --- 本文 --- */
.article p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-main);
}

/* --- リンク --- */
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

/* --- フッター --- */
.footer {
  background: #f5f7f5;
  border-top: 1px solid var(--border);
}
.footer a { color: var(--text-sub); }
.footer a:hover { color: var(--accent-dark); }

/* ========================================
 * 固定ページ: ブログ要素を非表示
 * ======================================== */
.page .sns-share,
.page .sns-follow,
.page .date-tags,
.page .post-date,
.page .post-update,
.page .author-info,
.page .entry-categories-tags,
.page .post-meta,
.page .eye-catch,
.page .toc,
.page .breadcrumb,
.page .breadcrumb-in { display: none; }

.page .sidebar { display: none; }
.page .main { width: 100%; }
.page .entry-title {
  margin-bottom: 1.5em;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ========================================
 * フロントページ（page-id-14）
 * ======================================== */
.page-id-14 #sidebar { display: none; }
.page-id-14 .main { width: 100%; }
.page-id-14 .content-in { max-width: 100%; }

/* FVタイトル非表示（サイト名と被る） */
.page-id-14 .entry-title { display: none; }

/* FVヒーロー風: キャッチフレーズ */
.page-id-14 .article h2:first-of-type {
  font-size: 2em;
  text-align: center;
  border: none;
  padding: 1.5em 0 0.5em;
  margin: 0;
  color: var(--text-main);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.page-id-14 .article > .entry-content > p:first-of-type {
  text-align: center;
  font-size: 1.05em;
  color: var(--text-sub);
  max-width: 680px;
  margin: 0 auto 2.5em;
  line-height: 1.9;
}

/* セクション間の区切り */
.page-id-14 .article h3 {
  border-left: none;
  text-align: center;
  font-size: 1.3em;
  padding: 2em 0 0.5em;
  color: var(--accent-dark);
}

/* リストスタイル: チェックマーク風 */
.page-id-14 .article ul {
  list-style: none;
  max-width: 600px;
  margin: 0 auto 2em;
}
.page-id-14 .article ul li {
  padding: 0.5em 0 0.5em 1.5em;
  position: relative;
  color: var(--text-sub);
  font-size: 15px;
}
.page-id-14 .article ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

/* --- Cocoon管理バー（非ログイン時非表示） --- */
body:not(.logged-in) #admin-panel { display: none; }

/* ========================================
 * ヒーローセクション（フロントページ）
 * ======================================== */
.hero-section {
  background: url('https://images.unsplash.com/photo-1470058869958-2a77ade41c02?w=1400&q=80') center center / cover no-repeat;
  margin: -1em -1em 2em -1em;
  padding: 0;
  position: relative;
}
.hero-overlay {
  background: linear-gradient(135deg, rgba(40,65,44,0.93) 0%, rgba(30,50,33,0.91) 100%);
  padding: 5em 2em;
  text-align: center;
  color: #fff;
}
.hero-overlay .hero-title { font-family: 'Noto Serif JP', serif; font-size: 2.4em; font-weight: 500; letter-spacing: 0.1em; color: #fff !important; text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.hero-overlay .hero-subtitle { font-family: 'Noto Serif JP', serif; font-size: 1.2em; font-weight: 400; letter-spacing: 0.08em; color: #fff !important; margin-top: 0.8em; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.hero-overlay .hero-desc { font-size: 1em; line-height: 2; max-width: 620px; margin: 1.5em auto 0; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* ヒーロー内の余白リセット */
.page-id-14 .article {
  padding-top: 0;
}
.page-id-14 .entry-content > .hero-section ~ h3 {
  margin-top: 2em;
}

/* --- ボタン風リンク（今後のCTA用） --- */
.cta-button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.8em 2em;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.95em;
  letter-spacing: 0.05em;
  transition: background 0.3s;
}
.cta-button:hover {
  background: var(--accent-dark);
  color: #fff;
}

/* --- 区切り線スタイル --- */
.wp-block-separator {
  border-top: 1px solid var(--border);
  max-width: 200px;
  margin: 3em auto;
}