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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
h2.has-background {
    padding: 25px;
	margin-bottom: 1.62em;
}

.wp-block-columns {
	gap: 1.5rem;
}

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

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

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

/* カルーセル全体の背景色と枠線を黒に設定 */
.cocoon-carousel,
.cocoon-carousel .slick-track,
.cocoon-carousel .slick-slide,
.carousel-in {background-color: black !important; /* 背景色を黒に */border: none !important; /* 枠線を削除 */}

/* カルーセル内のすべてのテキスト要素に対して文字色を白に設定 */
.cocoon-carousel .slick-slide * {color: white !important; /* すべての要素の文字色を白に設定 */}

/* 画像があってもテキストが重なる場合にテキスト色を調整 */
.cocoon-carousel .slick-slide img {filter: brightness(0.5) !important; /* 画像を暗くして背景とのコントラストを強調 */}

/* カルーセルの内部要素も黒に設定 */
.cocoon-carousel .slick-track,
.cocoon-carousel .slick-slide {background-color: black !important; /* 背景色を黒に */}

/* カルーセル内のテキスト要素に追加で強いセレクタを使って白に設定 */
.cocoon-carousel .slick-slide .slick-caption,
.cocoon-carousel .slick-slide .slick-slide-text,
.cocoon-carousel .slick-slide .slick-slide-title {color: white !important; /* 画像上に重なるキャプションテキストの色を白に */}

/* スライド間のスペースをなくす */
.cocoon-carousel .slick-slide,
.slick-track {margin: 0 !important; /* マージンを削除 */}

/* ボタンの背景色、文字色、枠線を黒に */
.slick-prev, .slick-next {background-color: black !important; /* ボタンの背景色を黒に */color: white !important; /* ボタンの文字色を白に */border: 2px solid black !important; /* ボタンの枠線を黒に */}

/* ホバー時のボタンの背景色を少し明るい黒に */
.slick-prev:hover, .slick-next:hover {background-color: #333 !important; /* ホバー時の背景色を少し明るい黒に */}

.main {background-color: black !important;color: white !important; /* テキストを白に */}

.related-entries, 
.related-entries * {color: white !important;}

.pager-post-navi.post-navi-default {color: white !important; /* 文字を白に */}

.pager-post-navi.post-navi-default a {color: white !important; /* リンクの文字も白に */}

.comment-form .comment-btn {color: white !important; /* 通常時の文字色を白に */background-color: black !important; /* 通常時の背景色を黒に */border: 1px solid white !important; /* 白い枠線を追加（必要なら） */}

.comment-form .comment-btn:hover {background-color: white !important; /* ホバー時の背景色を白に */color: black !important; /* ホバー時の文字色を黒に */border: 1px solid black !important; /* ホバー時の枠線を黒に */}

/* 通常時の文字色を白に */
.entry-tags .tag-link {color: white; /* 通常時は文字色を白に */}

/* 背景が黒のとき文字色を白に変更 */
.entry-tags .tag-link-259 {background-color: black; /* 背景を黒に */}

.entry-tags .tag-link-259 a {color: white !important; /* 背景が黒でも文字色を白に */}

/* ホバー時に文字色が白に */
.entry-tags .tag-link-259:hover a {color: white !important; /* 背景が黒の時、ホバーで文字色が白に */}

/* 目次リストのオープン時にリンクの文字色を白に変更 */
.toc-content .toc-list.open a {color: white !important; /* リンク文字色を白に設定 */}

/* 目次リストのオープン時にアイテムの文字色を白に変更 */
.toc-content .toc-list.open li {color: white !important; /* アイテム文字色を白に設定 */}

/* サイドバーの背景色を黒に設定 */
#sidebar {background-color: black !important; /* 背景を黒に設定 */color: white !important; /* 文字色を白に設定 */}

/* サイドバー内のリンク文字色を白に設定 */
#sidebar a {color: white !important; /* リンク文字色を白に設定 */}

/* サイドバー内のリンクホバー時の背景色を少し薄い黒に変更 */
#sidebar a:hover,
#sidebar a:focus {background-color: #333333 !important; /* ホバー時は少し薄い黒の背景 */color: white !important; /* 文字色はホバー時も白に設定 */}

/* カルーセル内の画像と一緒に表示される文字を白にする */
.carousel-content .slick-slide {color: white !important; /* 文字色を白に */}

/* 必要に応じて、ボタンの文字色も白にする */
.slick-prev, .slick-next {color: white !important; /* 前後ボタンの文字色を白に */}

/* .list 内の .ect-vertical-card-3 に対して文字色を白に設定 */
.list .ect-vertical-card-3 {color: white !important; /* 文字色を白に */}

/* 画像と一緒に表示される文字に対応する要素に白を設定 */
.list .ect-vertical-card-3 .ect-vertical-card {color: white !important; /* 文字色を白に */}

/* 文字が入っている具体的な要素も白に */
.list .ect-vertical-card-3 .ect-vertical-card .entry-title,
.list .ect-vertical-card-3 .ect-vertical-card .entry-meta {color: white !important; /* タイトルやメタ情報も白に */}

/* PRの文字色を白に設定 */
.pr-label {color: white !important; /* 文字色を白に */}

/* その他の要素（背景や枠線など）は黒に設定 */
.pr-label-s {background-color: black !important; /* 背景を黒に */border: 1px solid black !important; /* 枠線を黒に */}

/* "もっと見る" ボタンのスタイル */
.list-more-button {color: white !important; /* 文字色を白に */background-color: black !important; /* 背景を黒に */border: 2px solid white !important; /* 枠線を白に */padding: 10px 20px; /* 余白を追加 */text-align: center; /* 文字を中央寄せ */display: inline-block; /* インラインブロック要素にする */text-decoration: none; /* 下線を消す */font-weight: bold; /* 文字を太く */}

/* ホバー時のスタイル */
.list-more-button:hover {background-color: #222 !important; /* ホバー時の背景を少し明るい黒に */color: white !important; /* 文字色は維持 */border-color: white !important; /* 枠線の色も維持 */}

.pagination .page-numbers:hover,
.pagination .current {background-color: #444;color: #fff;}

.pagination-next-link.key-btn:hover {background-color: #444;color: #fff;}

/* コンテンツを初期状態で非表示にするクラス */
.actress-hidden {
    display: none;
}

/* 投稿・固定ページ・ウィジェットなどすべてに対応する h3 見出し装飾（段落風） */
.entry-content h3,
.page .entry h3,
.single .entry h3 {
  all: unset;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #000;
  font-size: inherit;
  font-weight: normal;
  margin: 0;
  padding: 0;
  line-height: inherit;
}
