@use "sass:math";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　カード
------------------------------ */
.card {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	border-left: 1px solid global.$base-color;
}

.card-item {
	border-top: 1px solid global.$base-color;
	border-right: 1px solid global.$base-color;
	border-bottom: 1px solid global.$base-color;
}

.card-link {
	display: block;
	margin: 0 math.div(acms.$grid-space, -2);
	padding: 10px;
	color: #333;

	&:hover {
		text-decoration: none;
		background: #EEE;

		@include acms.transition(background-color .25s linear);
	}

	&:hover,
	&:visited,
	&:active,
	&:focus {
		color: #333;
	}
}

.card-img {
	margin: 0 0 10px;
}

.card-title {
	margin: 0;

	@include acms.font-size(16);

	font-weight: bold;
}

.card-detail {
  margin: 10px 0 0;

	@include acms.font-size(13);
}
