/* style-index.css */



.category_box {
	a {
		padding: var(--space-100em);
		margin-top: var(--space-200em);
		margin-bottom: var(--space-100em);
		width: var(--percent-10000);

		.title {
			display: block;
			padding: var(--category-title-padding);
			text-align: center;
			font-size: var(--font-size-h3);
			color: var(--new-color-gray-300);
			background: linear-gradient(var(--category-grad-angle),
					transparent var(--category-grad-cut),
					var(--new-color-gray-400) 0%);
			border: var(--category-title-border-width) solid var(--new-color-gray-400);
			border-bottom: 0;
			box-sizing: border-box;
		}

		span.cnt {
			display: block;
			box-sizing: border-box;
			overflow: auto;
		}

		&:hover {
			text-decoration: none;
			color: var(--new-color-blue-800);

			.title {
				background: linear-gradient(var(--category-grad-angle),
						transparent var(--category-grad-cut),
						var(--new-color-gray-600) 0%);
				border-color: var(--new-color-gray-600);
				border-bottom: 0;
				color: var(--new-color-gray-300);
			}
		}
	}

	@media screen and (min-width: 768px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: var(--space-100em) auto var(--space-400em);

		a {
			width: var(--category-width-tablet);
			padding: 0;
		}
	}

	@media screen and (min-width: 1024px) {
		margin-right: var(--space-100em);
		margin-left: var(--space-100em);
	}
}