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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* ============================================
   ピンクテーマ (Simple-Darkmode 上書き)
   ライトモード: 可愛いピンク系
   ダークモード: @media (prefers-color-scheme: dark)
   ============================================ */

/* ---------- CSS変数 (ライトモード) ---------- */
:root {
  --pink-primary: #e8608a;
  /* メインピンク */
  --pink-light: #f9d0de;
  /* 薄いピンク */
  --pink-pale: #fff0f5;
  /* 背景うすピンク */
  --pink-border: #f4a0b5;
  /* ボーダー用ピンク */
  --pink-text: #c04070;
  /* テキスト用濃いピンク */
  --pink-link: #d9387a;
  /* リンク色 */
  --pink-dark: #b03060;
  /* ダーク寄りピンク */
  --header-in-bg: transparent;
  --header-logo-color: #f500a8;
  --header-logo-shadow: none;
  --header-outer-bg: transparent;
  --header-container-bg: transparent;
  --header-fixed-bg: #ffebef;
}

/* ---------- ページ全体の背景をうすピンクに ---------- */
body {
  background-color: #fff8fb !important;
}

/* ---------- ヘッダー ---------- */
.header {
  background-color: var(--header-outer-bg) !important;
  color: var(--header-logo-color) !important;
  box-shadow: 0 2px 8px rgba(192, 64, 112, 0.12);
}

/* 固定ヘッダー時は透明にしない */
.header-container.fixed-header {
  --header-container-bg: var(--header-fixed-bg);
  --header-outer-bg: var(--header-fixed-bg);
  --header-in-bg: var(--header-fixed-bg);
}

.header-container.fixed-header .header,
.header-container.fixed-header #header-in {
  background-color: var(--header-fixed-bg) !important;
  background-image: none !important;
}

.header-container.fixed-header #navi,
.header-container.fixed-header #navi-in,
.header-container.fixed-header .navi {
  background-color: var(--header-fixed-bg) !important;
}

.site-name-text {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---------- ヘッダー内側とロゴ配色 ---------- */
/* Cocoon管理画面が生成する div#header-in の背景色指定を透明で上書き */
div#header-in {
  background-color: transparent !important;
}

#header-container {
  background-color: var(--header-container-bg) !important;
}

#header .site-name-text,
#header .site-name-text a,
#header .site-name a {
  color: var(--header-logo-color) !important;
  text-shadow: var(--header-logo-shadow);
}

/* ロゴ画像エリアだけ背景が変わるのを防止 */
.logo.logo-header.logo-image,
.logo-header.logo-image,
.logo-image {
  background: transparent !important;
  background-color: transparent !important;
}

/* 手動ダーク切替・常時ダーク系の補助（OS設定に依存しない） */
body.is-dark-on,
body[class*="simple-darkmode-always"] {
  --header-in-bg: transparent;
  --header-outer-bg: transparent;
  --header-fixed-bg: #242529;
  --header-logo-color: #f500a8;
  --header-logo-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------- ナビゲーション ---------- */
body.is-dark-on #navi,
body.is-dark-on #navi-in,
body.is-dark-on .navi,
body[class*="simple-darkmode-always"] #navi,
body[class*="simple-darkmode-always"] #navi-in,
body[class*="simple-darkmode-always"] .navi {
  background-color: #1a0a14 !important;
}

body.is-dark-on .menu-top a,
body.is-dark-on .menu-header a,
body[class*="simple-darkmode-always"] .menu-top a,
body[class*="simple-darkmode-always"] .menu-header a {
  color: #ffb8cc !important;
}

/* ---------- ナビゲーション ---------- */
#navi,
#navi-in,
.navi {
  background-color: #ffebef !important;
}

.menu-top a,
.menu-header a {
  color: var(--pink-text) !important;
}

.menu-top a:hover,
.menu-header a:hover {
  color: var(--pink-primary) !important;
}

.navi-menu-content,
.navi-menu-content a {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
}

.navi-menu-content a:hover {
  background-color: var(--pink-dark) !important;
  color: #fff !important;
}

/* ---------- グローバルリンク色 ---------- */
a {
  color: var(--pink-link) !important;
}

a:hover {
  color: var(--pink-dark) !important;
}

/* ---------- 記事見出し ---------- */
.article h2,
.sidebar h2,
.under-entry-content h2 {
  border-left: 5px solid var(--pink-primary) !important;
  border-bottom: none !important;
  background-color: var(--pink-pale) !important;
  color: var(--pink-text);
}

.article h3,
.sidebar h3 {
  border-left: 5px solid var(--pink-primary) !important;
  background-color: var(--pink-pale) !important;
  color: var(--pink-text);
}

.article h4 {
  border-left: 4px dashed var(--pink-border) !important;
}

.article h5 {
  border-left: 4px dotted var(--pink-border) !important;
}

/* ---------- カテゴリ・タグラベル ---------- */
.cat-link,
.cat-label,
.tag-link,
.blogcard-label {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
  border-radius: 4px;
}

.eye-catch .cat-label {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
  border: 1.3px solid #fff !important;
  border-radius: 7px;
}

/* ---------- ページネーション・ページ番号 ---------- */
.page-numbers,
.tagcloud a,
.author-box,
.ranking-item,
.pagination-next-link,
.comment-reply-link,
.toc {
  border: 2px solid var(--pink-primary) !important;
  border-radius: 6px;
}

.pagination .current {
  background: var(--pink-primary) !important;
  color: #fff !important;
}

/* ---------- 検索フォーム ---------- */
.search-submit {
  background: var(--pink-primary) !important;
  border: solid 2px var(--pink-primary) !important;
  color: #fff !important;
}

.search-form>div {
  border: 2px solid var(--pink-primary) !important;
}

.search-form div.sbtn {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
}

.search-form div.sbtn:hover {
  border: 2px solid var(--pink-dark) !important;
}

/* ---------- モバイルメニューボタン ---------- */
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button>a {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
}

.go-to-top-button {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
}

/* ---------- 目次 ---------- */
.toc {
  background-color: var(--pink-pale) !important;
  border-color: var(--pink-primary) !important;
}

/* ---------- コメント返信ボタン・送信ボタン ---------- */
.comment-reply-link,
#submit {
  background-color: var(--pink-primary) !important;
  color: #fff !important;
}

/* ---------- ボタン全般 ---------- */
.key-btn {
  background-color: var(--pink-primary) !important;
  border-color: var(--pink-primary) !important;
  color: #fff !important;
}

/* ---------- ボタンキャプション ---------- */
.button-caption {
  color: #fce8ef !important;
}

/* ---------- コピーアイコン ---------- */
.social-icon.icon-copy::before {
  color: #fce8ef !important;
}

.social-icon::before {
  color: #fce8ef !important;
}

/* ---------- ブログカードラベル ---------- */
.blogcard-label::after {
  color: #fff !important;
}

/* ---------- ボックスメニュー ---------- */
.box-menu {
  box-shadow: inset 1px 1px 0 0 var(--pink-primary),
    1px 1px 0 0 var(--pink-primary),
    1px 0 0 0 var(--pink-primary) !important;
}

.box-menu-icon {
  color: var(--pink-primary) !important;
}

.box-menu:hover {
  box-shadow: inset 2px 2px 0 0 var(--pink-dark),
    2px 2px 0 0 var(--pink-dark),
    2px 0 0 0 var(--pink-dark) !important;
}

/* ---------- SNSシェアボタン風装飾 ---------- */
.slick-dots li.slick-active button:before,
.slick-dots li button:before,
.shortcut {
  color: var(--pink-primary) !important;
}

/* ---------- フッター ---------- */
#footer {
  border-top: 3px solid var(--pink-light);
}

/* ============================================
   ダークモード
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --pink-primary: #ff85a1;
    --pink-light: #7a2040;
    --pink-pale: #1e0f15;
    --pink-border: #a03060;
    --pink-text: #ffb8cc;
    --pink-link: #ff85a1;
    --pink-dark: #cc5070;
    --header-in-bg: transparent;
    --header-outer-bg: transparent;
    --header-fixed-bg: #242529;
    --header-logo-color: #f500a8;
    --header-logo-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  body {
    background-color: #1e0f15 !important;
    color: #f0d0d8 !important;
  }

  /* コンテンツ背景 */
  .body.article,
  .content,
  .main,
  .article {
    background-color: #2a1020 !important;
    color: #f0d0d8 !important;
  }

  /* サイドバー */
  .sidebar {
    background-color: #2a1020 !important;
    color: #f0d0d8 !important;
  }

  /* ヘッダー (暗めピンク) */
  .header {
    background-color: var(--header-outer-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  }

  /* ナビ */
  /* ナビ */
  #navi,
  #navi-in,
  .navi {
    background-color: #1a0a14 !important;
  }

  .menu-top a,
  .menu-header a {
    color: #ffb8cc !important;
  }

  .menu-top a:hover,
  .menu-header a:hover {
    color: #ff85a1 !important;
  }

  .navi-menu-content,
  .navi-menu-content a {
    background-color: #5a1530 !important;
  }

  /* 見出し */
  .article h2,
  .sidebar h2,
  .under-entry-content h2 {
    background-color: #2d1020 !important;
    border-left-color: var(--pink-primary) !important;
    color: var(--pink-text);
  }

  .article h3,
  .sidebar h3 {
    background-color: #2d1020 !important;
    border-left-color: var(--pink-primary) !important;
    color: var(--pink-text);
  }

  /* 目次 */
  .toc {
    background-color: #2d1020 !important;
    border-color: var(--pink-primary) !important;
    color: #f0d0d8 !important;
  }

  /* カード・ブロック */
  .entry-card,
  .author-box,
  .comment-body {
    background-color: #2d1020 !important;
    border-color: var(--pink-border) !important;
    color: #f0d0d8 !important;
  }

  /* フッター */
  #footer {
    background-color: #150810 !important;
    color: #f0d0d8 !important;
    border-top-color: var(--pink-light);
  }

  /* ウィジェット */
  .widget {
    background-color: #2a1020 !important;
    color: #f0d0d8 !important;
  }

  /* テキスト選択色 */
  *::selection {
    background: #c04070 !important;
    color: #fff !important;
  }

  *::-moz-selection {
    background: #c04070 !important;
    color: #fff !important;
  }
}

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

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

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