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

/************************************
** Noctheca 配色B（紺×ローズ）
** 正本：このリポジトリの theme/cocoon-child/style.css
** 設計：docs/site-build-design.md §8（2026-09-27）
** WordPress のテーマファイルエディターへは、このファイルを丸ごと貼る
************************************/

:root {
  --nx-navy: #1B1F3B;        /* メイン：ヘッダー・H2・見出し文字（白文字 16.08） */
  --nx-navy-deep: #12152A;   /* 最上部の帯・フッター */
  --nx-rose: #FF5C8A;        /* アクセント：線・下線・紺地の上の文字（紺地 5.48）。白地の文字には使わない */
  --nx-rose-text: #C2185B;   /* 白地の上でローズの文字が必要なとき（白地 5.87） */
  --nx-pink-soft: #FCE8EF;   /* チップ・淡い面 */
  --nx-bg: #F4F2EE;          /* ページの外側 */
  --nx-surface: #FFFFFF;     /* 本文の面・カード */
  --nx-text: #222222;
  --nx-muted: #555555;       /* 補足文字（白地 7.46） */
  --nx-link: #2B4C9B;        /* 本文リンク（白地 8.05） */
  --nx-border: #E3DDCF;
  --nx-border-strong: #D9D2C1;
  --nx-cta: #15803D;         /* CTA 緑（白文字 5.02） */
  --nx-cta-2: #0069d9;       /* 比較の2つ目 青（白文字 5.22） */
  --nx-on-dark: #E9E4D8;     /* 紺地の上の本文色 */
  --nx-on-dark-muted: #C9C3B4;
}

/* ---------- 全体 ---------- */
body {
  background-color: var(--nx-bg);
  color: var(--nx-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo, sans-serif;
}
a { color: var(--nx-link); }
a:hover { color: var(--nx-navy); }

/* ---------- 最上部の帯（Cocoon 設定 → 通知エリア） ---------- */
.notice-area {
  background-color: var(--nx-navy-deep);
  color: var(--nx-on-dark);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------- ヘッダー ---------- */
.header-container,
.header-container .header,
#header {
  background-color: var(--nx-navy);
}
.site-name-text-link,
.site-name-text-link:hover {
  color: #FAF8F3;
}
.site-name-text {
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.tagline {
  color: var(--nx-on-dark-muted);
}

/* ---------- グローバルナビ ---------- */
#navi,
#navi .navi-in,
#navi .navi-in > ul {
  background-color: var(--nx-navy);
}
#navi {
  border-bottom: 3px solid var(--nx-rose);
}
#navi .navi-in a {
  color: #FAF8F3;
  font-weight: 600;
  font-size: 15px;
}
#navi .navi-in a:hover {
  background-color: rgba(255, 92, 138, 0.16);
  color: #FFFFFF;
}
#navi .navi-in > ul .sub-menu {
  background-color: var(--nx-navy);
}

/* ---------- 本文の面・サイドバー ---------- */
.main {
  background-color: var(--nx-surface);
  border: 1px solid #E6E0D2;
  border-radius: 12px;
}
.sidebar {
  background-color: transparent;
}
.sidebar .widget {
  background-color: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.sidebar h2,
.sidebar h3 {
  background-color: transparent;
  color: var(--nx-navy);
  border-radius: 0;
  border-bottom: 3px solid var(--nx-rose);
  padding: 0 0 8px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
}

/* ---------- 記事 ---------- */
.article {
  font-size: 17px;
  line-height: 1.9;
}
.entry-title,
.article h1 {
  color: var(--nx-navy);
  font-weight: 800;
  line-height: 1.5;
}
.article h2 {
  background-color: var(--nx-navy);
  color: #FFFFFF;
  border-radius: 8px;
  border-bottom: 3px solid var(--nx-rose);
  padding: 14px 22px;
  font-weight: 800;
  line-height: 1.5;
}
.article h3 {
  background-color: transparent;
  color: var(--nx-navy);
  border: 0;
  border-bottom: 3px solid var(--nx-rose);
  border-radius: 0;
  padding: 0 0 8px;
  font-weight: 800;
  line-height: 1.5;
}
.article h4 {
  background-color: transparent;
  color: var(--nx-navy);
  border: 0;
  border-left: 5px solid var(--nx-rose);
  padding: 2px 0 2px 12px;
  font-weight: 800;
}

/* 目次 */
.toc {
  border: 1px solid var(--nx-border-strong);
  border-radius: 10px;
  background-color: #FBFAF7;
}
.toc-title {
  color: var(--nx-navy);
  font-weight: 800;
}

/* 表（ブロックの表・テンプレートの表の両方） */
.article table th {
  background-color: var(--nx-navy);
  color: #FFFFFF;
}
.article table th,
.article table td {
  border-color: var(--nx-border-strong);
}

/* 記事一覧のカード・カテゴリラベル */
.entry-card-wrap {
  background-color: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 12px;
}
.cat-label {
  background-color: var(--nx-navy);
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
}

/* ---------- フッター ---------- */
.footer,
#footer {
  background-color: var(--nx-navy-deep);
  color: var(--nx-on-dark);
}
.footer a,
#footer a,
.navi-footer-in a {
  color: var(--nx-on-dark);
}
.footer .site-name-text {
  color: #FAF8F3;
}

/* ---------- トップへ戻る・スマホ用フッターメニュー ---------- */
.go-to-top-button,
.go-to-top-button:hover {
  background-color: var(--nx-navy);
  color: #FFFFFF;
}
.mobile-footer-menu-buttons {
  background-color: var(--nx-surface);
  border-top: 1px solid var(--nx-border-strong);
}
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button a {
  color: var(--nx-navy);
}

/************************************
** トップページ（固定ページ「トップ」。本文の正本は pages/home.html）
************************************/
/* フロントページでは、ページタイトル・日付・目次を出さない */
.home.page .entry-title,
.home.page .date-tags,
.home.page .toc {
  display: none;
}
.nx-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* ヒーロー */
.nx-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 32px;
  border-bottom: 1px solid #E6E0D2;
}
.nx-hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--nx-navy);
  line-height: 1.45;
}
.nx-hero-lead {
  margin: 0;
  font-size: 16px;
  color: #3A3A3A;
}
.nx-search {
  display: flex;
  width: 100%;
  max-width: 640px;
  margin: 8px 0 0;
}
.nx-search input[type="search"] {
  flex-grow: 1;
  min-width: 0;
  height: 52px;
  border: 2px solid var(--nx-navy);
  border-right: 0;
  border-radius: 26px 0 0 26px;
  padding: 0 20px;
  font-size: 16px;
  font-family: inherit;
  background-color: #FFFFFF;
}
.nx-search button {
  width: 88px;
  height: 56px;
  border: 0;
  border-radius: 0 28px 28px 0;
  background-color: var(--nx-navy);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.nx-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--nx-muted);
}
.nx-chips a {
  background-color: var(--nx-pink-soft);
  color: var(--nx-navy);
  border-radius: 16px;
  padding: 6px 14px;
  text-decoration: none;
}
.nx-promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-promises li {
  font-size: 14px;
  color: var(--nx-navy);
  border: 1px solid var(--nx-border-strong);
  border-radius: 8px;
  padding: 8px 14px;
  background-color: #FBFAF7;
}
.nx-promises li::before {
  content: "✓ ";
  color: var(--nx-cta);
  font-weight: 800;
}
/* セクション見出し（本文用の紺帯 H2 を打ち消す） */
.article .nx-top h2.nx-sec-title {
  background-color: transparent;
  color: var(--nx-navy);
  border: 0;
  border-left: 6px solid var(--nx-rose);
  border-radius: 0;
  padding: 2px 0 2px 12px;
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
}
.nx-sec-note {
  font-size: 13px;
  color: var(--nx-muted);
  margin: -8px 0 12px;
}
/* カードの並び */
.nx-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.nx-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--nx-text);
}
.nx-card:hover {
  border-color: var(--nx-rose);
  color: var(--nx-text);
}
.nx-card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--nx-navy);
}
.nx-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--nx-muted);
}
.nx-card-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-link);
  margin-top: 4px;
}
/* 不安・疑問のリスト */
.nx-qs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.nx-q {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  background-color: #FFFFFF;
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--nx-text);
  font-weight: 700;
  font-size: 15px;
}
.nx-q::before {
  content: "Q";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: var(--nx-pink-soft);
  color: var(--nx-navy);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-q:hover {
  border-color: var(--nx-rose);
  color: var(--nx-text);
}
/* 運営者と記事の作り方 */
.nx-about {
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  padding: 22px 24px;
  background-color: #FBFAF7;
}
.nx-about ul {
  margin: 8px 0 12px;
  padding-left: 20px;
  font-size: 15px;
}

/* 年齢確認（Age Gate）：見出しの折り返しを防ぎ、ボタンを配色Bに合わせる */
.age-gate__heading-title {
  font-size: 26px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
button.age-gate__submit--yes,
button.age-gate__submit--yes:hover,
button.age-gate__submit--yes:focus {
  background-color: var(--nx-navy);
  border: 2px solid var(--nx-navy);
  color: #fff;
}
button.age-gate__submit--no,
button.age-gate__submit--no:hover,
button.age-gate__submit--no:focus {
  background-color: #fff;
  border: 2px solid var(--nx-navy);
  color: var(--nx-navy);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .main {
    border-radius: 0;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .nx-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx-qs {
    grid-template-columns: 1fr;
  }
  .nx-hero-title {
    font-size: 24px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .notice-area {
    font-size: 11px;
    letter-spacing: 0;
  }
  .article {
    font-size: 16px;
    line-height: 1.85;
  }
  .article h2 {
    padding: 12px 16px;
  }
  .age-gate__heading-title {
    font-size: 21px;
  }
}