/* ========================================
   レスポンシブスタイル
   ======================================== */

/* タブレット (768px - 1023px) */
@media (max-width: 1023px) {
	.ranking-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tabs {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-title {
		font-size: var(--font-size-2xl);
	}

	.modal-title {
		font-size: var(--font-size-2xl);
	}

	.chart-container canvas {
		max-height: 450px;
	}
}

/* スマートフォン (767px以下) */
@media (max-width: 767px) {

	/* 基本設定 */
	:root {
		--spacing-xl: 2rem;
		--spacing-lg: 1.5rem;
	}

	/* ヘッダー */
	.site-header {
		padding: var(--spacing-md) 0;
	}

	.site-title {
		font-size: var(--font-size-xl);
	}

	.site-subtitle {
		font-size: var(--font-size-base);
	}

	/* タブ */
	.tabs {
		grid-template-columns: 1fr;
		gap: var(--spacing-xs);
	}

	.tab-button {
		flex-direction: row;
		justify-content: center;
		padding: var(--spacing-sm);
	}

	.tab-icon {
		font-size: var(--font-size-xl);
	}

	.tab-text {
		font-size: var(--font-size-sm);
	}

	/* 統計 */
	.stats {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.stat-item {
		min-width: auto;
	}

	/* 検索・ソート */
	.search-bar {
		flex-direction: column;
	}

	.sort-options {
		justify-content: center;
	}

	/* グラフ */
	.chart-toggle {
		flex-direction: column;
	}

	.btn-chart-toggle {
		width: 100%;
	}

	.chart-container {
		padding: var(--spacing-md);
	}

	.chart-container canvas {
		max-height: 350px;
	}

	/* ランキング */
	.ranking-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.ranking-title {
		font-size: var(--font-size-xl);
	}

	.card-title {
		font-size: var(--font-size-lg);
		padding-left: 55px;
	}

	.rank-badge {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-base);
	}

	/* モーダル */
	.modal-overlay.active {
		padding: var(--spacing-sm);
	}

	.modal-container {
		max-height: 95vh;
	}

	.modal-content {
		padding: var(--spacing-lg);
	}

	.modal-title {
		font-size: var(--font-size-xl);
	}

	.modal-close {
		width: 35px;
		height: 35px;
		font-size: var(--font-size-xl);
	}

	.modal-image {
		max-height: 250px;
	}

	.image-credit {
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	.credit-label,
	.credit-text {
		font-size: var(--font-size-xs);
	}

	.reasons-list {
		max-height: 300px;
	}

	/* 吹き出しデザインのレスポンシブ */
	.reason-avatar {
		width: 40px;
		height: 40px;
	}

	.avatar-icon {
		width: 20px;
		height: 20px;
	}

	.reason-bubble {
		padding: 0.875rem 1rem;
		border-radius: 16px;
	}

	.reason-bubble::before {
		left: -8px;
		top: 12px;
		border-width: 8px 8px 8px 0;
	}

	/* フッター */
	.footer-text {
		font-size: var(--font-size-sm);
	}
}

/* 極小スマートフォン (480px以下) */
@media (max-width: 480px) {
	.container {
		padding: 0 var(--spacing-sm);
	}

	.overview-card {
		padding: var(--spacing-md);
	}

	.lead-text {
		font-size: var(--font-size-base);
	}

	.modal-content {
		padding: var(--spacing-md);
	}

	/* 吹き出しデザイン - 小画面 */
	.reason-item {
		gap: 0.75rem;
	}

	.reason-avatar {
		width: 35px;
		height: 35px;
	}

	.avatar-icon {
		width: 18px;
		height: 18px;
	}

	.reason-bubble {
		padding: 0.75rem 0.875rem;
		border-radius: 14px;
	}

	.reason-text {
		font-size: 0.9rem;
	}

	.btn-load-more {
		width: 100%;
	}
}

/* 印刷用スタイル */
@media print {

	.site-header,
	.tabs-section,
	.search-bar,
	.sort-options,
	.btn-detail,
	.btn-load-more,
	.site-footer {
		display: none;
	}

	body {
		background: white;
		color: black;
	}

	.ranking-card {
		break-inside: avoid;
		border: 1px solid #000;
	}
}

/* ========================================
   第2回総選挙誘導セクション - レスポンシブ
   ======================================== */

@media (max-width: 767px) {
	.vote-cta-section {
		padding: 3rem 0;
		margin-top: 3rem;
	}

	.vote-cta-title {
		font-size: var(--font-size-xl);
		margin-bottom: 1rem;
	}

	.vote-cta-description {
		font-size: var(--font-size-base);
		margin-bottom: 2rem;
	}

	.btn-vote-cta {
		font-size: 1.1rem;
		padding: 1.25rem 2rem;
		width: 100%;
		max-width: 100%;
		min-width: auto;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.vote-cta-title {
		font-size: var(--font-size-lg);
	}

	.vote-cta-badge {
		font-size: 0.8rem;
		padding: 0.4rem 1rem;
	}

	.btn-vote-cta {
		font-size: 1rem;
		padding: 1rem 1.5rem;
	}

	.btn-vote-cta .btn-icon {
		font-size: 1.5rem;
	}

	.btn-vote-cta .btn-arrow {
		font-size: 1.2rem;
	}
}