@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);
  }

  /* :not(.editor-styles-wrapper)でGutenbergエディタのプレビュー(iframe内body)
     には適用しないようにする。エディタにはテーブル等のダークモード対応スタイルが
     無いため、背景だけダークになり文字が読めなくなる不具合があった */
  body:not(.editor-styles-wrapper) {
    background-color: #1e0f15 !important;
    color: #f0d0d8 !important;
  }

  /* コンテンツ背景 */
  body:not(.editor-styles-wrapper) .body.article,
  body:not(.editor-styles-wrapper) .content,
  body:not(.editor-styles-wrapper) .main,
  body:not(.editor-styles-wrapper) .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;
  }
}

/* ============================================
   ブロックエディタ用ダークモード
   フロント用のダークモードCSSをそのままエディタに適用すると、
   テーブルブロックなど対応していない要素が白背景のまま残って
   見づらくなるため、エディタ(.editor-styles-wrapper)専用に
   別途調整する
   ============================================ */
@media (prefers-color-scheme: dark) {
  body.editor-styles-wrapper,
  .editor-styles-wrapper,
  .editor-styles-wrapper .cocoon-block-wrap {
    background-color: #241018 !important;
    color: #f0d0d8 !important;
  }

  .editor-styles-wrapper a {
    color: #ff85a1 !important;
  }

  /* テーブルブロック */
  .editor-styles-wrapper .wp-block-table table,
  .editor-styles-wrapper .wp-block-table td,
  .editor-styles-wrapper .wp-block-table th {
    background-color: #2a1020 !important;
    color: #f0d0d8 !important;
    border-color: #7a2040 !important;
  }

  .editor-styles-wrapper .wp-block-table tbody tr:nth-child(even) td {
    background-color: #341327 !important;
  }

  /* 見出しブロック（フロントのピンク枠デザインに合わせる） */
  .editor-styles-wrapper h2,
  .editor-styles-wrapper h3 {
    background-color: #2d1020 !important;
    color: var(--pink-text) !important;
  }
}

/* 新着記事/人気記事カード：Cocoon設定側が
   .widget-entry-cards.card-large-image .a-wrap に
   height/max-height を固定px(例:330px)で動的出力しているため
   カードの高さは揃うが、タイトルが長い記事だとその中に収まらず
   窮屈に見える。高さは統一のまま維持し、タイトルの行数を減らして
   「...」で省略することで対応する */
.widget-entry-cards.card-large-image .card-title {
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

/* 抜粋の下の余白が狭く、本文最終行がカード下端に迫って見えるため余白を追加 */
.widget-entry-cards.card-large-image .card-content {
  padding-bottom: 1em;
}

/* サイドバー等の小サムネイル版ウィジェット（タイトルが長文の場合、
   4行クランプの最終行がカード下端ギリギリになるため余白を追加） */
.widget-entry-cards:not(.card-large-image):not(.large-thumb-on) .widget-entry-card-content {
  padding-bottom: 0.5em !important;
}

.widget-entry-cards:not(.card-large-image):not(.large-thumb-on) .card-title {
  margin-bottom: 0.5em !important;
}

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

/*834px以下*/
@media screen and (max-width: 834px) {
  /* 834px以下ではcolumn-wrapが1カラムに切り替わり、
     コンテナ幅が400pxを超えるため、新着記事/人気記事カードの
     max-width:400pxが余白を生み左寄せに見えてしまう。
     幅は400pxのまま残し、中央寄せにして見た目を整える
     （max-widthを外すと400px超で画像とタイトルが重なる不具合があるため） */
  .column-wrap .widget-entry-cards.card-large-image .a-wrap {
    margin-left: auto;
    margin-right: auto;
  }
}

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

/************************************
** WordPressカスタマイザー「追加CSS」から移行
** (2026-09-14 移行、Customizer側は空にした)
************************************/
@media screen and (max-width: 1023px) {

  /* 記事下に表示されるサイドバー目次ウィジェットは非表示 */
  #sidebar>#sidebar-scroll>.widget_toc,
  #sidebar>#sidebar-scroll>.widget[id^="toc-"],
  #sidebar>#sidebar-scroll>.widget>.toc-widget-box {
    display: none !important;
  }

  /* サイドバーボタンから開いたスライドイン内の目次ウィジェットは表示 */
  #sidebar-menu-content #slide-in-sidebar>#sidebar-scroll>.widget_toc,
  #sidebar-menu-content #slide-in-sidebar>#sidebar-scroll>.widget[id^="toc-"],
  #sidebar-menu-content #slide-in-sidebar>#sidebar-scroll>.widget>.toc-widget-box {
    display: block !important;
  }

  /* 本文中の目次はモバイルでも表示を維持 */
  #main #toc {
    display: block !important;
  }
}

/* ---------- SNSフォローボタン（モノクロ） ---------- */
.bc-monochrome .sns-buttons a {
  background-color: #fff !important;
  color: var(--pink-primary) !important;
  border: 1px solid var(--pink-primary) !important;
}
.bc-monochrome .sns-buttons a:hover {
  opacity: 0.85 !important;
}

/* ダークモード時に黒背景になるよう調整 */
@media (prefers-color-scheme: dark) {
  .bc-monochrome .sns-buttons a {
    background-color: #333 !important;
    color: var(--pink-primary) !important;
    border-color: var(--pink-primary) !important;
  }
}

body.is-dark-on .bc-monochrome .sns-buttons a,
body[class*="simple-darkmode-always"] .bc-monochrome .sns-buttons a {
  background-color: #333 !important;
  color: var(--pink-primary) !important;
  border-color: var(--pink-primary) !important;
}

body.is-dark-on,
body[class*="simple-darkmode-always"] {
  background-color: #1e0f15 !important;
  color: #f0d0d8 !important;
}

body.is-dark-on .body.article,
body.is-dark-on .content,
body.is-dark-on .main,
body.is-dark-on .article,
body[class*="simple-darkmode-always"] .body.article,
body[class*="simple-darkmode-always"] .content,
body[class*="simple-darkmode-always"] .main,
body[class*="simple-darkmode-always"] .article {
  background-color: #2a1020 !important;
  color: #f0d0d8 !important;
}

@media (prefers-color-scheme: dark) {

  .postform,
  select.postform,
  #categories-dropdown-2,
  .wpcf7-select {
    background-color: #2a1020 !important;
    color: var(--pink-text) !important;
    border: 1px solid var(--pink-primary) !important;
  }

  .postform option,
  select.postform option,
  #categories-dropdown-2 option,
  .wpcf7-select option {
    background-color: #2a1020 !important;
    color: var(--pink-text) !important;
  }
}

:is(body.is-dark-on, body[class*="simple-darkmode-always"]) .postform,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) select.postform,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) #categories-dropdown-2,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) .wpcf7-select {
  background-color: #2a1020 !important;
  color: var(--pink-text) !important;
  border: 1px solid var(--pink-primary) !important;
}

:is(body.is-dark-on, body[class*="simple-darkmode-always"]) .postform option,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) select.postform option,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) #categories-dropdown-2 option,
:is(body.is-dark-on, body[class*="simple-darkmode-always"]) .wpcf7-select option {
  background-color: #2a1020 !important;
  color: var(--pink-text) !important;
}

@media (prefers-color-scheme: light) {

  .postform,
  select.postform,
  #categories-dropdown-2,
  .wpcf7-select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid var(--pink-primary) !important;
  }

  .postform option,
  select.postform option,
  #categories-dropdown-2 option,
  .wpcf7-select option {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

.search-edit {
  padding: 11px;
  border: 1px solid var(--pink-text) !important;
  border-radius: var(--cocoon-basic-border-radius);
  font-size: inherit;
  width: 100%;
  color: var(--pink-text) !important;
}

/* SNSシェアボタンの背景を透明にして、枠線と文字色を--pink-primaryに設定 */
.sns-share.bc-monochrome .sns-button {
  background-color: transparent !important;
  border-color: var(--pink-primary) !important;
  color: var(--pink-primary) !important;
  opacity: 1 !important;
}

/* ボタン内のテキストとアイコンの色を--pink-primaryで統一し、薄さを解消 */
.sns-share.bc-monochrome .sns-button .button-caption,
.sns-share.bc-monochrome .sns-button .social-icon {
  color: var(--pink-primary) !important;
  opacity: 1 !important;
}

/* ホバー時は背景を--pink-primaryにして、文字を--pink-textにする */
.sns-share.bc-monochrome .sns-button:hover {
  background-color: var(--pink-primary) !important;
  color: var(--pink-text) !important;
}

.sns-share.bc-monochrome .sns-button:hover .button-caption,
.sns-share.bc-monochrome .sns-button:hover .social-icon {
  color: var(--pink-text) !important;
}

.social-icon.icon-copy::before {
  color: var(--pink-text) !important;
}

.social-icon::before {
  color: var(--pink-text) !important;
}