.graph {
	background-color: #FFF;
	padding: 2rem 1rem;
	border-radius: .5rem;
}

.rate-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.rate-table th,
.rate-table td {
	border: 1px solid #ccc;
	padding: 6px 10px;
	text-align: center;
}

.rate-table th {
	background-color: #f5f5f5;
}

.cell-first {
	font-weight: bold;
	color: #1565c0;
}

.emphasize-first {
	font-weight: bold;
	color: #2e7d32;
	/* 緑系 */
}

.emphasize-repeat {
	font-weight: bold;
	color: #1565c0;
	/* 青系 */
}


.view-switcher {
	background: #f8f8f8;
	border-radius: 8px;
	padding: 15px;
	margin: 20px 0;
	text-align: center;
}

.view-switcher__title {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}

.view-switcher__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.view-switcher__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.view-switcher__label {
	font-size: 14px;
	margin-bottom: 4px;
}

.view-switcher__value {
	font-size: 18px;
	font-weight: bold;
}

.arrow-up {
	color: #2e7d32;
}

.arrow-down {
	color: #1565c0;
}

.emphasize-first {
	color: #2e7d32;
}

.emphasize-repeat {
	color: #1565c0;
}

.view-switcher__button {
	background: #007aff;
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
}

/* PC時だけ横並びに */
@media screen and (min-width: 769px) {
	.view-switcher__content {
		flex-direction: row;
		justify-content: center;
	}

	.view-switcher__item {
		margin: 0 15px;
	}
}

#toggleViewButton {
	border: none;
	padding: 8px 16px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
	transition: background-color 0.2s ease;
}

#toggleViewButton.is-table {
	background-color: #007aff;
	/* 青：表に切り替え中 */
	color: #fff;
}

.view-graph-toggle__btn {
	margin: 0 8px;
	padding: 14px 4px;
	font-size: 1rem;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-weight: bold;
	color: #fff;
	transition: background-color 0.2s ease;
}

.view-graph-first {
	background-color: #bff4d4;
}

.view-graph-repeat {
	background-color: #c4e5ff;
}

.view-graph-first.active {
	background-color: #21C564;
	color: #fff;
}

.view-graph-repeat.active {
	background-color: #218be1;
	color: #fff;
}

.view-graph-toggle {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
	gap: 10px;
}

@media screen and (min-width: 769px) {
	.view-graph-toggle {
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.view-graph-toggle__btn {
		flex: 1;
		max-width: 160px;
		/* toggleViewButton に合わせて調整（必要なら増やす） */
		height: 40px;
		/* toggleViewButton に近い高さ */
		padding: 8px 16px;
		box-sizing: border-box;
		text-align: center;
		font-size: 14px;
		line-height: 1.2;
		white-space: nowrap;
	}
}

/* スマホ時の調整 */
@media screen and (max-width: 480px) {
	.view-graph-toggle {
		flex-direction: row;
	}

	.view-graph-toggle__btn {
		flex: 1 1 45%;
		/* 幅が揃いやすくなる */
	}
}


.chart-container {
	position: relative;
	width: 100%;
	height: 500px;
	/* ←ここで高さを明示 */
}

@media screen and (max-width: 480px) {
	.chart-container {
		height: 300px;
		/* スマホではさらに高く */
	}
}

#tableView {
	margin-top: 30px;
	overflow-x: auto;
}