@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
*/
 
/* ============================================================
 * ⚠ 上のコメントブロック（Theme Name 〜 Version）は
 *    WordPressが子テーマを認識するための必須ヘッダーです。
 *    絶対に削除しないでください。消すとテーマが壊れます。
 * ============================================================ */
 
 
/* ============================================================
 * ERABAI カスタムスタイル v2（ブランドカラー適用版）
 * ------------------------------------------------------------
 * 【ブランドカラー】ロゴから抽出
 *   オレンジ（主）    #F86008
 *   オレンジ（明）    #FA9420
 *   水色（アクセント）#28B8F8
 * ============================================================ */
 
:root {
	--erabai-orange:       #F86008;
	--erabai-orange-light: #FA9420;
	--erabai-orange-soft:  #FFF3E9;
	--erabai-cyan:         #28B8F8;
	--erabai-cyan-text:    #0284C7; /* 小さい文字用（コントラスト確保） */
	--erabai-ink:          #1F2937;
	--erabai-muted:        #6B7280;
	--erabai-line:         #E5E7EB;
	--erabai-track:        #F1F5F9;
	--erabai-card:         #FFFFFF;
}
 
 
/* ------------------------------------------------------------
 * 1. PR表記（景品表示法・ステマ規制対応）
 *    小さい文字・薄い色はNG。本文と同等以上の視認性を必ず保つこと。
 * ------------------------------------------------------------ */
.erabai-pr {
	font-size: 0.95em;
	line-height: 1.6;
	margin: 0 0 1em;
	padding: 0.65em 0.95em;
	color: var(--erabai-ink);
	background: var(--erabai-orange-soft);
	border-left: 4px solid var(--erabai-orange);
	border-radius: 3px;
}
 
/* ------------------------------------------------------------
 * 2. 公開日・最終更新日
 * ------------------------------------------------------------ */
.erabai-dates {
	font-size: 0.85em;
	color: var(--erabai-muted);
	margin: 0 0 1.4em;
}
 
.erabai-dates-sep {
	margin: 0 0.6em;
	opacity: 0.5;
}
 
/* ------------------------------------------------------------
 * 3. 比較表の横スクロール
 * ------------------------------------------------------------ */
.erabai-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.6em 0;
}
 
.erabai-table-scroll table {
	min-width: 560px;
	margin: 0;
}
 
/* ------------------------------------------------------------
 * 4. 評価スコアブロック
 * ------------------------------------------------------------ */
.erabai-score {
	position: relative;
	margin: 2em 0;
	padding: 1.3em 1.3em 1em;
	border: 1px solid var(--erabai-line);
	border-radius: 10px;
	background: var(--erabai-card);
	overflow: hidden;
}
 
/* カード上端のブランドライン（オレンジ→水色） */
.erabai-score::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--erabai-orange) 0%,
		var(--erabai-orange-light) 55%,
		var(--erabai-cyan) 100%);
}
 
.erabai-score-name {
	font-weight: 700;
	font-size: 1.05em;
	margin-bottom: 0.5em;
	color: var(--erabai-ink);
}
 
/* 総合スコア */
.erabai-total {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding-bottom: 0.8em;
	margin-bottom: 0.9em;
	border-bottom: 1px solid var(--erabai-line);
}
 
.erabai-total-label {
	font-size: 0.85em;
	color: var(--erabai-muted);
	letter-spacing: 0.04em;
}
 
.erabai-total-num {
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1;
	color: var(--erabai-orange);
}
 
.erabai-total-max {
	font-size: 0.85em;
	color: #9CA3AF;
}
 
.erabai-total-pending .erabai-total-num {
	font-size: 1.2em;
	color: #9CA3AF;
}
 
/* スコア表 */
.erabai-score-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.92em;
}
 
.erabai-score-table th,
.erabai-score-table td {
	border: none;
	padding: 0.35em 0;
	background: none;
	vertical-align: middle;
}
 
.erabai-score-table th {
	width: 8.5em;
	text-align: left;
	font-weight: 400;
	color: #374151;
	white-space: nowrap;
}
 
.erabai-bar-cell {
	position: relative;
	width: auto;
	padding-right: 0.8em !important;
}
 
/* バーの下地 */
.erabai-bar-cell::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0.8em;
	top: 50%;
	transform: translateY(-50%);
	height: 8px;
	border-radius: 4px;
	background: var(--erabai-track);
}
 
.erabai-bar {
	position: relative;
	z-index: 1;
	display: block;
	height: 8px;
	border-radius: 4px;
	min-width: 4px;
	background: linear-gradient(90deg, var(--erabai-orange), var(--erabai-orange-light));
}
 
.erabai-num {
	width: 3em;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: #111827;
}
 
.erabai-unverified {
	color: #9CA3AF;
	font-size: 0.9em;
}
 
.erabai-score-date {
	margin: 1em 0 0;
	font-size: 0.8em;
	color: var(--erabai-muted);
}
 
.erabai-score-date a {
	color: var(--erabai-cyan-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}
 
/* スマホ */
@media screen and (max-width: 480px) {
	.erabai-score {
		padding: 1.1em 0.9em 0.8em;
	}
	.erabai-score-table th {
		width: 7em;
		font-size: 0.95em;
	}
	.erabai-total-num {
		font-size: 1.85em;
	}
}
 
/* ------------------------------------------------------------
 * 5. ダークモード対応
 * ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	:root {
		--erabai-orange:       #FB923C;
		--erabai-orange-light: #FDBA74;
		--erabai-orange-soft:  #33261B;
		--erabai-cyan:         #38BDF8;
		--erabai-cyan-text:    #7DD3FC;
		--erabai-ink:          #E5E7EB;
		--erabai-muted:        #9CA3AF;
		--erabai-line:         #374151;
		--erabai-track:        #374151;
		--erabai-card:         #1F2430;
	}
	.erabai-score-table th {
		color: #D1D5DB;
	}
	.erabai-num {
		color: #F3F4F6;
	}
}