/* ============================================================
   Reservia 調査レポート専用 CSS
   対象: /report/ 一覧ページ + /report/{slug}/ 記事詳細
   バージョン: 1.0 (2026-08-09)
   スコープ: body.rv-report または <div class="rv-report"> 配下
   依存: なし (theme の style.css より後に読み込むこと)
   ============================================================ */

/* ==== 1. デザイントークン ==== */

.rv-report {
	--rv-primary: #D1A154;
	--rv-primary-dark: #B08840;
	--rv-primary-tint: #FAF7F1;
	--rv-primary-tint-border: #E4D9C4;
	--rv-text: #1E1E1E;
	--rv-text-strong: #32373C;
	--rv-muted: #6B6559;
	--rv-muted-2: #8A9299;
	--rv-bg: #FFFFFF;
	--rv-bg-alt: #F7F4EE;
	--rv-border: #E6E1D6;
	--rv-border-2: #EEEEEE;
	--rv-link: #0F71D2;
	--rv-cta: #E85D2A;
	--rv-radius: 8px;
	--rv-radius-lg: 12px;
	--rv-shadow-card: 0 1px 2px rgba(31, 24, 8, .04);
	--rv-shadow-hover: 0 6px 20px rgba(31, 24, 8, .08);
}

/* ==== 2. 一覧ページ: /report/ ==== */

/* 2-0. コンテナ幅 (旧: body.report #main .container.x2 .contents から移設) */

.rv-report #main .container.x2 .contents {
	max-width: 1160px;
	margin: 0 auto;
}

/* 2-1. リード + タグチップ */

.rv-report .rv-report-intro {
	text-align: center;
	margin: 24px auto 32px;
}

.rv-report .rv-report-lead {
	font-size: 14px;
	color: var(--rv-muted);
	max-width: 640px;
	margin: 0 auto 20px;
	line-height: 1.7;
}

.rv-report .rv-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.rv-report .rv-tag-chips-lead {
	font-size: 12px;
	color: var(--rv-muted);
	margin: 0 8px 0 0;
	letter-spacing: .05em;
}

.rv-report .rv-tag-chip {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--rv-border);
	border-radius: 999px;
	font-size: 13px;
	color: var(--rv-text);
	text-decoration: none;
	background: var(--rv-bg);
	transition: all .18s ease;
}

.rv-report .rv-tag-chip:hover {
	border-color: var(--rv-primary);
	color: var(--rv-primary-dark);
	background: var(--rv-bg-alt);
	text-decoration: none;
}

/* 2-2. カードグリッド (3 カラム化) */

.rv-report #reportArea.rv-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 40px;
}

/* 2-3. カード本体 */

.rv-report .rv-card {
	background: var(--rv-bg);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius);
	overflow: hidden;
	box-shadow: var(--rv-shadow-card);
	transition: transform .2s ease, box-shadow .2s ease;
}

.rv-report .rv-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--rv-shadow-hover);
}

.rv-report .rv-card-link,
.rv-report .rv-card-link:hover,
.rv-report .rv-card-link:focus,
.rv-report .rv-card-link:hover *,
.rv-report .rv-card-link:focus * {
	color: inherit;
	text-decoration: none !important;
}

.rv-report .rv-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rv-bg-alt);
}

.rv-report .rv-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 2-3-B. カード画像上の overlay ラベル (Case A: HTML overlay) */

.rv-report .rv-card-overlay-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--rv-primary);
	color: #fff;
	padding: 4px 10px;
	font-size: 11px;
	letter-spacing: .05em;
	border-radius: 3px;
	font-weight: 700;
	z-index: 2;
	line-height: 1.4;
}

.rv-report .rv-card-body {
	padding: 14px 16px 18px;
}

/* 2-4. カード内メタ (日付・NEW・タグ) */

.rv-report .rv-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}

.rv-report .rv-card-date {
	color: var(--rv-muted);
	letter-spacing: .03em;
}

.rv-report .rv-card-date[data-new="1"]::after {
	content: "NEW";
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	background: var(--rv-primary);
	color: #fff;
	font-size: 10px;
	letter-spacing: .08em;
	border-radius: 3px;
}

.rv-report .rv-card-tag {
	color: var(--rv-primary-dark);
	font-weight: 600;
}

/* 2-5. カードタイトル + 抜粋 (text-wrap 修正、3カラム向けサイズ) */

.rv-report .rv-card-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.55;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}

.rv-report .rv-card:hover .rv-card-title {
	color: var(--rv-primary-dark);
}

.rv-report .rv-card-excerpt {
	font-size: 12.5px;
	color: var(--rv-muted);
	margin: 0;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 2-6. カード内 メタバッジ (追加提案: チャート数/期間/対象業種数) */

.rv-report .rv-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 10px 0 0;
	padding: 8px 0 0;
	border-top: 1px dashed var(--rv-border);
	font-size: 11px;
	color: var(--rv-muted);
}

.rv-report .rv-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.rv-report .rv-card-badge::before {
	font-size: 12px;
	opacity: .7;
}

.rv-report .rv-card-badge.charts::before { content: '📊'; }
.rv-report .rv-card-badge.period::before { content: '📅'; }
.rv-report .rv-card-badge.targets::before { content: '🏢'; }

/* 2-7. ページ末 CTA (追加提案) */

.rv-report .rv-report-cta {
	background: linear-gradient(135deg, #FAF6EA, #F0E8D4);
	border-radius: var(--rv-radius-lg);
	padding: 40px 28px;
	text-align: center;
	margin: 40px 0;
}

.rv-report .rv-report-cta h2 {
	font-size: 18px;
	margin: 0 0 12px;
	color: var(--rv-text);
	border: none;
	background: none;
}

.rv-report .rv-report-cta p {
	font-size: 14px;
	color: var(--rv-muted);
	margin: 0 0 20px;
	line-height: 1.7;
}

.rv-report .rv-report-cta-btn {
	display: inline-block;
	background: var(--rv-cta);
	color: #fff;
	padding: 14px 40px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: opacity .18s ease;
}

.rv-report .rv-report-cta-btn:hover {
	opacity: .88;
	text-decoration: none;
	color: #fff;
}

/* 2-8. 空状態 */

.rv-report .rv-empty {
	text-align: center;
	padding: 60px 0;
	color: var(--rv-muted);
}

/* ==== 3. 記事詳細: /report/{slug}/ ==== */

/* 3-1. 「この記事でわかること」ブロック */

.rv-report section.answer-block {
	margin: 1.5rem 0 2.6rem;
}

.rv-report section.answer-block h2.summary-title {
	background: var(--rv-primary);
	color: #fff;
	border: none;
	border-radius: 5px 5px 0 0;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	padding: 8px 16px;
}

.rv-report section.answer-block ul.check_list {
	background: var(--rv-primary-tint);
	border: 1px solid var(--rv-primary-tint-border);
	border-radius: 0 5px 5px 5px;
	padding: 1.3rem 1.5rem;
	list-style: none;
	margin: 0;
}

.rv-report section.answer-block ul.check_list li {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	list-style: none;
	margin: 1.2rem 0;
	padding-left: 1.5em;
	position: relative;
}

.rv-report section.answer-block ul.check_list li:first-child { margin-top: 0; }
.rv-report section.answer-block ul.check_list li:last-child  { margin-bottom: 0; }

.rv-report section.answer-block ul.check_list li::before {
	content: "";
	position: absolute;
	top: .2em;
	left: .2em;
	transform: rotate(50deg);
	width: 7px;
	height: 15px;
	border-right: 2px solid var(--rv-primary);
	border-bottom: 2px solid var(--rv-primary);
}

/* 3-2. 目次 (rv-toc) */

.rv-report .rv-toc {
	background: #fff;
	border: 1px solid #E4E7EA;
	border-radius: 6px;
	padding: 1rem 1.4rem;
	margin: 1.8rem 0;
}

.rv-report .rv-toc-ttl {
	font-weight: 700;
	font-size: 14px;
	color: var(--rv-text-strong);
	margin: 0 0 .4rem;
}

.rv-report .rv-toc ol {
	margin: 0;
	padding: 0 0 0 1.3rem;
}

.rv-report .rv-toc li {
	list-style: decimal;
	margin: .3rem 0;
	line-height: 1.5;
}

.rv-report .rv-toc a {
	color: var(--rv-link);
	text-decoration: none;
}

.rv-report .rv-toc a:hover {
	text-decoration: underline;
}

/* 3-3. 注釈 (rv-note) */

.rv-report .rv-note {
	color: var(--rv-muted-2);
	font-size: 13px;
	line-height: 1.8;
	margin: .8rem 0 1.4rem;
}

/* 3-4. 関連記事 (rv-related) */

.rv-report .rv-related {
	background: var(--rv-bg-alt);
	border-left: 3px solid var(--rv-primary);
	border-radius: 4px;
	padding: 1.2rem 1.4rem;
	margin: 2.4rem 0 2rem;
}

.rv-report .rv-related-lead {
	font-weight: 700;
	font-size: 14px;
	color: var(--rv-text-strong);
	margin: 0 0 .8rem;
}

.rv-report .rv-related-link {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--rv-text);
	text-decoration: none;
	line-height: 1.55;
	padding: 10px 0;
}

.rv-report .rv-related-link + .rv-related-link {
	border-top: 1px solid var(--rv-border);
}

.rv-report .rv-related-link:hover {
	color: var(--rv-primary-dark);
	text-decoration: none;
}

/* 3-5. 署名 (rv-byline) */

.rv-report .rv-byline {
	color: var(--rv-muted-2);
	font-size: 13px;
	border-top: 1px solid var(--rv-border-2);
	margin-top: 2.6rem;
	padding-top: 1rem;
}

/* 3-6. 強調 (marker) */

.rv-report .marker {
	background: none;
	color: var(--rv-primary-dark);
	font-weight: 700;
}

/* 3-7. 記事本文の h2 (左ゴールドバー + 細下線)
 * ⚠ スコープは article.entry 内のみ。footer-cta (parts/cv.php の h2) や
 * ヒーローの h1/タイトル h1/h4 に影響しないよう限定する
 */

.rv-report article.entry h2,
.rv-report article.entry section h2 {
	background: none !important;
	color: var(--rv-text-strong) !important;
	border-left: 5px solid var(--rv-primary);
	border-bottom: 1px solid #E4E7EA;
	font-size: 1.3em;
	font-weight: 700 !important;
	line-height: 1.4;
	margin: 3rem 0 1.2rem !important;
	padding: .2rem 0 .6rem 1rem;
}

/* 3-8. 記事本文の h3 (先頭に小さなゴールドスクエア) — 同じくスコープ限定 */

.rv-report article.entry h3 {
	border-left: none !important;
	color: var(--rv-text-strong);
	font-size: 17px;
	font-weight: 700;
	margin: 2.2rem 0 .7rem;
	padding: 0 !important;
}

.rv-report article.entry h3::before {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	background: var(--rv-primary);
	border-radius: 2px;
	margin: 0 .5em 0 0;
}

/* 3-9. 記事内テーブル (グレーカード) — 汎用 table + rv-outline-table 両対応 */

.rv-report table {
	border-collapse: collapse;
	width: 100%;
	background: #F7F8F9;
	border: 1px solid #E1E5E9;
	border-radius: 6px;
	overflow: hidden;
}

.rv-report table th {
	background: #EEF0F2 !important;
	border: none !important;
	border-bottom: 1px solid #E1E5E9 !important;
	color: #555 !important;
	font-weight: 700;
	font-size: 14px;
	text-align: left;
	width: 130px;
	padding: .8rem 1.2rem;
	vertical-align: top;
}

.rv-report table td {
	border: none !important;
	border-bottom: 1px solid #E1E5E9 !important;
	padding: .8rem 1.2rem;
	font-size: 14px;
}

/* 3-9-B. 調査概要テーブル (rv-outline-table クラス指定時の補助) */

.rv-report .rv-outline-table th {
	white-space: nowrap;
	width: 22%;
}

/* 3-10. 記事内 figure (白カード枠) */

.rv-report figure {
	background: #fff;
	border: 1px solid #EDEFF2;
	border-radius: 8px;
	margin: 1.8rem auto;
	padding: 1rem 1rem .8rem;
}

.rv-report figure img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

.rv-report figcaption {
	color: var(--rv-muted-2);
	font-size: 13px;
	margin-top: .6rem;
	text-align: center;
}

/* ==== 4-0. フッター整形 (TOP `body.home` の overrides を .rv-report にも適用) ====
 * style.css:3155-3180 の .home 系ルールが report ページには継承されないため、
 * 同等ルールを rv-report スコープで再定義する。目的:
 * - フッターの幅を 85%・最大 1200px に統一
 * - .contents.cv の 100% 幅
 * - #pageTop の非表示
 */

@media (min-width: 1152px) {
	body.rv-report .foot {
		background: initial;
		width: 100%;
		box-sizing: border-box;
	}
	body.rv-report .contents,
	body.rv-report footer.foot .footer {
		width: 85%;
		max-width: 1200px;
		padding: 0;
		letter-spacing: 0;
	}
	body.rv-report .contents.cv {
		width: 100%;
	}
	body.rv-report #pageTop {
		display: none;
	}
}

/* ==== 4. レスポンシブ ==== */

@media (max-width: 960px) {
	.rv-report #reportArea.rv-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.rv-report #reportArea.rv-card-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.rv-report .rv-card-body { padding: 14px 14px 16px; }
	.rv-report .rv-card-title { font-size: 15.5px; }
	.rv-report .rv-card-excerpt { -webkit-line-clamp: 3; }

	.rv-report section.answer-block ul.check_list { padding: 1.1rem 1.2rem; }
	.rv-report section.answer-block ul.check_list li { font-size: 14.5px; }

	.rv-report .rv-outline-table th { width: 30%; }
	.rv-report .rv-report-cta { padding: 32px 20px; }
	.rv-report .rv-report-cta h2 { font-size: 16px; }
}