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

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

/* ============================================================
   FANZA_POST 記事デザイン（ダーク＋FANZA赤 / CTA強め）
   Cocoon 子テーマの style.css に貼り付けてください。

   方針
   - 記事本文だけをダーク化。サイト全体を暗くしたい場合は末尾の
     「サイト全体ダーク化」ブロックのコメントを外す。
   - 色は先頭の変数で一括変更できる。赤を別色にしたいときはここだけ触る。
   - サンプル画像は既定 1列×5枚（枚数・列数はプラグインの「記事設定」タブで変更可）。
   - スマホは画面下にCTAを固定表示（追従ボタンセクション）。
   ============================================================ */

:root {
	--fp-bg:        #14161a;  /* 記事の下地（真っ黒にしない＝画像の発色を守る） */
	--fp-surface:   #1c1f26;  /* 見出し・表ヘッダの面 */
	--fp-box:       #1e222a;  /* 文章ブロックの面 */
	--fp-border:    #2c313a;
	--fp-text:      #e8eaed;
	--fp-text-sub:  #c8ccd2;
	--fp-text-mute: #7e858e;

	--fp-accent:        #e0393b;  /* CTA・見出しバー（FANZA寄りの赤） */
	--fp-accent-shadow: #a3272a;  /* ボタンの立体影 */
	--fp-accent-link:   #ff6b6d;  /* 暗背景で読めるリンク赤 */
	--fp-related:       #4a80c4;  /* 内部回遊＝青（赤＝外部リンクと役割を分ける） */

	--fp-radius: 8px;
}

/* ---------- 記事本体 ---------- */

.fanza-post {
	background: var(--fp-bg);
	color: var(--fp-text);
	line-height: 1.9;
	padding: 18px;
	border-radius: 10px;
	margin: 1.2em 0;
	overflow-wrap: anywhere;
}
.fanza-post a { color: var(--fp-accent-link); }

/* ---------- 見出し ---------- */

.fanza-post .fp-h2 {
	margin: 1.8em 0 .8em;
	padding: .55em .8em;
	background: var(--fp-surface);
	border-left: 4px solid var(--fp-accent);
	border-radius: 0;              /* 片側ボーダーに角丸は付けない */
	color: var(--fp-text);
	font-size: 1.15em;
	font-weight: 600;
}
.fanza-post .fp-h2:first-child { margin-top: 0; }

.fanza-post .fp-h3 {
	margin: 1.6em 0 .7em;
	padding-bottom: .35em;
	border-bottom: 2px dotted #3a4049;
	color: var(--fp-text);
	font-size: 1.05em;
	font-weight: 600;
}

/* ---------- 文章ブロック（グレー背景で地の文を沈ませない） ---------- */

.fanza-post .fp-lead,
.fanza-post .fp-text {
	margin: 0 0 1.1em;
	padding: 13px 15px;
	background: var(--fp-box);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	color: var(--fp-text-sub);
	font-size: .95em;
}

/* ---------- サンプル動画 ---------- */

.fanza-post .fp-sample-movie {
	margin: 0 0 1.1em;
	background: #0c0e11;
	border: 1px solid var(--fp-border);
	border-radius: 6px;
	overflow: hidden;
}
.fanza-post .fp-sample-movie iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ---------- サンプル画像（既定 1列。列数はプラグイン側の設定） ---------- */

.fanza-post .fp-sample-images {
	display: grid;
	gap: 10px;
	margin: 0 0 1.1em;
}
.fanza-post .fp-cols-1 { grid-template-columns: 1fr; }
.fanza-post .fp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fanza-post .fp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fanza-post .fp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fanza-post .fp-cols-5 { grid-template-columns: repeat(5, 1fr); }
.fanza-post .fp-cols-6 { grid-template-columns: repeat(6, 1fr); }

.fanza-post .fp-sample-image { margin: 0; }
.fanza-post .fp-sample-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #242830;   /* 読み込み前でもタイルの形が見える */
}

/* スマホは2列以上でも詰まりすぎないよう最大2列に落とす */
@media (max-width: 600px) {
	.fanza-post .fp-cols-3,
	.fanza-post .fp-cols-4,
	.fanza-post .fp-cols-5,
	.fanza-post .fp-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 商品情報テーブル ---------- */

/* Cocoonはテーブルに縞模様(ゼブラ)の背景を当てるため、
   tr / th / td の背景を明示的に上書きする。!important はテーマ側に勝つため。 */
.fanza-post .fp-item-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.1em;
	font-size: .9em;
	table-layout: fixed;
	background: transparent !important;
}
.fanza-post .fp-item-table tr,
.fanza-post .fp-item-table tbody tr,
.fanza-post .fp-item-table tr:nth-child(odd),
.fanza-post .fp-item-table tr:nth-child(even) {
	background: transparent !important;
}
.fanza-post .fp-item-table th,
.fanza-post .fp-item-table td {
	border: 1px solid var(--fp-border) !important;
	padding: 9px 11px;
	text-align: left;
	vertical-align: top;
}
.fanza-post .fp-item-table th,
.fanza-post .fp-item-table tr:nth-child(odd) th,
.fanza-post .fp-item-table tr:nth-child(even) th {
	width: 32%;
	background: var(--fp-surface) !important;
	color: var(--fp-text-mute) !important;
	font-weight: 400;
	white-space: nowrap;
}
.fanza-post .fp-item-table td,
.fanza-post .fp-item-table tr:nth-child(odd) td,
.fanza-post .fp-item-table tr:nth-child(even) td {
	background: #171a20 !important;
	color: var(--fp-text) !important;
}
.fanza-post .fp-item-table a { color: var(--fp-accent-link); text-decoration: none; }
.fanza-post .fp-item-table a:hover { text-decoration: underline; }

/* ---------- サムネイル ---------- */

.fanza-post .fp-thumbnail { margin: 0 0 1.1em; text-align: center; }
.fanza-post .fp-thumbnail img {
	/* FANZAのサムネは元画像が小さいので、幅を与えて適度に引き伸ばす */
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: 6px;
}

/* ---------- アフィリエイトボタン（記事の主役） ---------- */

.fanza-post .fp-btn-wrap { margin: 0 0 1.6em; text-align: center; }

.fanza-post .fp-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px 14px;
	border-radius: var(--fp-radius);
	background: var(--fp-accent);
	color: #fff;
	font-size: 1.02em;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 0 var(--fp-accent-shadow);
	transition: transform .08s ease, box-shadow .08s ease;
}
.fanza-post .fp-btn:hover { color: #fff; opacity: .95; }
.fanza-post .fp-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--fp-accent-shadow);
}

/* ボタン下のマイクロコピー（記事設定タブで文言編集）*/
.fanza-post .fp-btn-note {
	margin: 9px 0 0;
	color: #ffd7a3;              /* 特典訴求なので少し暖色。地の文と差をつける */
	font-size: .82em;
	line-height: 1.65;
	text-align: center;
}

/* 色違い（記事設定の「スタイル」欄にクラス名を入れて使う） */
.fanza-post .fp-btn.btn-red   { background: var(--fp-accent); box-shadow: 0 3px 0 var(--fp-accent-shadow); }
.fanza-post .fp-btn.btn-blue  { background: #2271b1; box-shadow: 0 3px 0 #17517f; }
.fanza-post .fp-btn.btn-green { background: #1a7f37; box-shadow: 0 3px 0 #115c27; }

/* ---------- スマホ追従CTA（PCでは非表示） ---------- */

.fanza-post .fp-sticky-cta { display: none; }

@media (max-width: 782px) {
	.fanza-post .fp-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: rgba(20, 22, 26, .96);
		border-top: 1px solid var(--fp-border);
	}
	.fanza-post .fp-sticky-cta .fp-btn {
		padding: 13px 12px;
		font-size: .98em;
		box-shadow: 0 2px 0 var(--fp-accent-shadow);
	}
	/* 追従バーの分だけ本文末尾に余白を足して、最後のボタンが隠れないようにする */
	.fanza-post { padding-bottom: 84px; }
}

/* ---------- 内部回遊 [dmm_related]（青＝サイト内、赤＝外部と区別） ---------- */

.fp-related { margin: 1.8em 0; }

.fp-related-title {
	margin: 0 0 .7em;
	padding: .5em .8em;
	background: #1b1f27;
	border-left: 4px solid var(--fp-related);
	border-radius: 0;
	color: var(--fp-text);
	font-size: 1em;
	font-weight: 600;
}

.fp-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
@media (max-width: 600px) { .fp-related-grid { grid-template-columns: repeat(2, 1fr); } }

.fp-related-card {
	display: block;
	background: #1a1d23;
	border: 1px solid var(--fp-border);
	border-radius: 6px;
	overflow: hidden;
	color: var(--fp-text-sub);
	text-decoration: none;
	transition: border-color .12s ease;
}
.fp-related-card:hover { border-color: #4a5361; color: var(--fp-text); }

.fp-related-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: #252a33;
}
.fp-related-name {
	display: block;
	padding: 7px 8px;
	font-size: .74em;
	line-height: 1.45;
	max-height: 3.2em;
	overflow: hidden;
}

/* ============================================================
   サイト全体ダーク化（Cocoon）
   ヘッダー・タイトル・サイドバー・フッター・カードまで記事に合わせる。
   Cocoonはスキンによってクラスが変わることがあるため、崩れる箇所が
   あればその要素だけ後述の「調整用」に追記してください。
   ============================================================ */

:root {
	--fp-site-bg:   #0f1115;  /* ページ全体の下地 */
	--fp-panel:     #1a1d23;  /* 本文カード・サイドバー・カード類 */
	--fp-header-bg: #14161a;  /* ヘッダー・フッター */
}

/* ---- ページ全体 ---- */
body,
body.public-page,
#container,
#content,
#content-in,
#main,
.main,
.content,
.wrap {
	background: var(--fp-site-bg) !important;
	color: var(--fp-text);
}

/* ---- ヘッダー・グローバルナビ ---- */
#header-container,
#header-container-in,
#header,
#header-in,
.header-container,
.header,
#navi,
#navi-in,
.navi,
.navi-in {
	background: var(--fp-header-bg) !important;
	color: var(--fp-text);
}
.site-name-text,
.site-name-text-link,
.site-name a,
.tagline,
.logo-text {
	color: var(--fp-text) !important;
}
.navi-in a,
.navi-in .item-label,
#navi .menu-header a {
	color: var(--fp-text-sub) !important;
}
.navi-in a:hover { background: #22262e !important; color: #fff !important; }

/* ---- パンくず ---- */
#breadcrumb,
.breadcrumb,
.breadcrumb a,
.breadcrumb span {
	background: transparent !important;
	color: var(--fp-text-mute) !important;
}
.breadcrumb a:hover { color: var(--fp-accent-link) !important; }

/* ---- 記事本体（カード面） ---- */
.article,
.entry-content,
.post,
main.main,
#main .article {
	background: var(--fp-panel) !important;
	color: var(--fp-text);
}
.entry-title,
.article-title,
.article h1,
.article h2,
.article h3,
.article h4,
.entry-content h2,
.entry-content h3 {
	color: var(--fp-text) !important;
}
.entry-content a { color: var(--fp-accent-link); }
.post-date, .post-update, .entry-categories, .entry-tags, .author-info, .date-tags {
	color: var(--fp-text-mute) !important;
}
.entry-categories a, .entry-tags a, .cat-link, .tag-link {
	background: #22262e !important;
	color: var(--fp-text-sub) !important;
	border-color: var(--fp-border) !important;
}

/* ---- サイドバー・ウィジェット ---- */
#sidebar,
.sidebar,
.sidebar-menu-content,
.widget,
.widget-sidebar,
.widget-sidebar-standard {
	background: var(--fp-panel) !important;
	color: var(--fp-text-sub) !important;
}
.widget-sidebar-title,
.sidebar h2,
.sidebar h3,
.widget-title,
.widget h3 {
	background: #22262e !important;
	color: var(--fp-text) !important;
	border-color: var(--fp-border) !important;
}
.sidebar a, .widget a { color: var(--fp-text-sub) !important; }
.sidebar a:hover, .widget a:hover { color: var(--fp-accent-link) !important; }
.widget ul li { border-color: var(--fp-border) !important; }

/* ---- 検索ボックス・入力欄 ---- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select,
.search-edit,
#searchform input {
	background: #22262e !important;
	color: var(--fp-text) !important;
	border: 1px solid var(--fp-border) !important;
}
::placeholder { color: var(--fp-text-mute); }
.search-submit, input[type="submit"], button[type="submit"] {
	background: var(--fp-accent) !important;
	color: #fff !important;
	border: 0 !important;
}

/* ---- 記事一覧カード（トップ・アーカイブ・関連記事） ---- */
.entry-card,
.entry-card-wrap,
.related-entry-card,
.related-entry-card-wrap,
.card-content,
.widget-entry-card,
.widget-entry-cards .a-wrap,
.list .entry-card-wrap,
.carousel-item {
	background: var(--fp-panel) !important;
	border-color: var(--fp-border) !important;
}
.entry-card-title,
.related-entry-card-title,
.widget-entry-card-title,
.a-wrap .entry-card-title {
	color: var(--fp-text) !important;
}
.entry-card-snippet,
.related-entry-card-snippet,
.entry-card-meta,
.related-entry-card-meta,
.entry-card-info {
	color: var(--fp-text-mute) !important;
}
.a-wrap:hover, .entry-card-wrap:hover, .related-entry-card-wrap:hover {
	background: #22262e !important;
}

/* ---- ページネーション ---- */
.pagination a, .pagination .current, .page-numbers,
.pagination-next-link, .comment-btn {
	background: #22262e !important;
	color: var(--fp-text-sub) !important;
	border-color: var(--fp-border) !important;
}
.pagination .current, .page-numbers.current {
	background: var(--fp-accent) !important;
	color: #fff !important;
}

/* ---- 目次 ---- */
.toc, .toc-title, .toc-list a {
	background: #171a20 !important;
	color: var(--fp-text-sub) !important;
	border-color: var(--fp-border) !important;
}
.toc-list a:hover { color: var(--fp-accent-link) !important; }

/* ---- コメント欄 ---- */
#comments, .comment-area, .comment-list, .comment-reply-title, .comment-body {
	background: transparent !important;
	color: var(--fp-text-sub) !important;
}

/* ---- フッター ---- */
#footer,
.footer,
.footer-in,
.footer-bottom,
.footer-widgets,
#footer-in {
	background: var(--fp-header-bg) !important;
	color: var(--fp-text-sub) !important;
}
#footer a, .footer a, .copyright { color: var(--fp-text-mute) !important; }
#footer a:hover { color: var(--fp-accent-link) !important; }

/* ---- 罫線・区切り ---- */
hr, .article hr, .widget hr { border-color: var(--fp-border) !important; }

/* ---- モバイルのフッターメニュー等 ---- */
.mobile-menu-buttons, .navi-footer-in, #navi-footer {
	background: var(--fp-header-bg) !important;
	color: var(--fp-text-sub) !important;
}
.mobile-menu-buttons a, .navi-footer-in a { color: var(--fp-text-sub) !important; }

/* ============================================================
   調整用
   崩れる要素があれば、ブラウザの検証ツールでクラス名を調べて
   ここに追記してください。
   例）
   .some-cocoon-class { background: var(--fp-panel) !important; color: var(--fp-text) !important; }
   ============================================================ */