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

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

/* =====================================
   ▼ ページID 26・78：全体ダークテーマ化（Cocoon対応）
   ===================================== */

/* ヘッダー＆メニューを非表示 */
.page-id-26 header,
.page-id-26 .header,
.page-id-26 #header,
.page-id-26 nav,
.page-id-26 .global-nav,
.page-id-26 .menu,
.page-id-26 #navi,
.page-id-78 header,
.page-id-78 .header,
.page-id-78 #header,
.page-id-78 nav,
.page-id-78 .global-nav,
.page-id-78 .menu,
.page-id-78 #navi {
  display: none !important;
}

/* ページ全体・背景まで黒 */
.page-id-26,
.page-id-78,
.page-id-26 body,
.page-id-78 body,
.page-id-26 #container,
.page-id-78 #container,
.page-id-26 .l-wrapper,
.page-id-78 .l-wrapper,
.page-id-26 #main,
.page-id-78 #main,
.page-id-26 .l-main,
.page-id-78 .l-main,
.page-id-26 .content,
.page-id-78 .content,
.page-id-26 #contents,
.page-id-78 #contents,
.page-id-26 .article,
.page-id-78 .article {
  background-color: #000 !important;
  color: #fff !important;
  box-sizing: border-box;
}

/* Cocoonスキンの背景画像を打ち消す */
.page-id-26 body::before,
.page-id-78 body::before {
  background: none !important;
}

/* ヘッダー・フッター・ナビも黒で統一 */
.page-id-26 #header-container,
.page-id-78 #header-container,
.page-id-26 #footer,
.page-id-78 #footer,
.page-id-26 #navi,
.page-id-78 #navi {
  background-color: #000 !important;
  color: #fff !important;
}

/* 本文（entry-content）を黒背景＋白文字ボックスに */
.page-id-26 .entry-content,
.page-id-78 .entry-content {
  background: #000 !important;
  color: #fff !important;
  padding: 1.25rem;
  border: 1px solid #fff;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 本文内テキスト */
.page-id-26 .entry-content p,
.page-id-26 .entry-content li,
.page-id-78 .entry-content p,
.page-id-78 .entry-content li {
  color: #fff !important;
}

/* リンク色（ブランドカラー） */
.page-id-26 .entry-content a,
.page-id-78 .entry-content a {
  color: #7BA6B5 !important;
}
.page-id-26 .entry-content a:hover,
.page-id-78 .entry-content a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* キャプション・引用 */
.page-id-26 .entry-content figcaption,
.page-id-78 .entry-content figcaption,
.page-id-26 .entry-content blockquote,
.page-id-78 .entry-content blockquote {
  color: #ccc !important;
}

/* テーブル（黒背景＋白文字） */
.page-id-26 .entry-content table,
.page-id-78 .entry-content table {
  background-color: #000 !important;
  color: #fff !important;
  width: 100%;
  border-collapse: collapse;
}
.page-id-26 .entry-content th,
.page-id-78 .entry-content th,
.page-id-26 .entry-content td,
.page-id-78 .entry-content td {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #555;
  padding: 0.5em;
}
.page-id-26 .entry-content th,
.page-id-78 .entry-content th {
  background-color: #111 !important;
  font-weight: bold;
}

/* 画像・iframeのはみ出し防止 */
.page-id-26 .entry-content img,
.page-id-78 .entry-content img,
.page-id-26 .entry-content iframe,
.page-id-78 .entry-content iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* flex子の潰れ防止 */
.page-id-26 .content,
.page-id-26 .entry-content,
.page-id-78 .content,
.page-id-78 .entry-content {
  min-width: 0;
}

/* スマホ時の余白調整 */
@media (max-width: 768px) {
  /* 外側余白を打ち消して全幅に近づける */
  .page-id-26 .entry,
  .page-id-78 .entry {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-id-26 .entry-content,
  .page-id-78 .entry-content {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
    border-width: 1px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }
}

/* ページID 26・78：H2の文字色だけ白に強制 */
.page-id-26 h2,
.page-id-78 h2 {
  color: #fff !important;
}

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
  border:none;
  background:none;
  padding: 0;
}

/* H3 */
.entry-content h3{
  border:none;
  background:none;
  padding: 0;
}

/* H4 */
.entry-content h4{
  border:none;
  background:none;
  padding: 0;
}

/* H5 */
.entry-content h5{
  border:none;
  background:none;
  padding: 0;
}

/* H6 */
.entry-content h6{
  border:none;
  background:none;
  padding: 0;
}

/* 見出しのデザイン設定 */
/* H1 */
.article h1 {
  font-size: 20pt;
  padding: 0.2em;
  color: #ffffff; /* ← 白文字 */
}

/* H2 */
.entry-content h2{
  color: #ffffff; /* ← 白文字 */
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
}

/* H3 */
.entry-content h3{
  position: relative;
  padding: 0.6em;
  background: #e0edff;
  color: #ffffff; /* ← 白文字 */
}
.entry-content h3:after{
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

/* H4 */
.entry-content h4{
  padding: 0.25em 0.5em;
  color: #ffffff; /* ← 白文字 */
  background: transparent;
  border-left: solid 5px #7db4e6;
}

/* ===========================
   エディタ（Gutenberg）にも反映させる設定
   =========================== */
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  border: none;
  background: none;
  padding: 0;
}

/* H2 */
.editor-styles-wrapper h2 {
  color: #364e96;
  padding: 0.5em 0;
  border-top: solid 3px #364e96;
  border-bottom: solid 3px #364e96;
}

/* H3 */
.editor-styles-wrapper h3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}
.editor-styles-wrapper h3:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

/* H4 */
.editor-styles-wrapper h4 {
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #7db4e6;
}

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

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

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