@charset "utf-8";

#main_contents {
	background: linear-gradient(#555,#333);
	h2,.page_description {
		color: #fff;
		border-color: #fff;
	}
}

.case_wrap {
	width: 100%;
	background: #fff;
	padding: clamp(25px, 5vw, 50px);
	margin-top: clamp(25px, 5vw, 50px);
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	.link_btn {
		margin-top: clamp(25px, 5vw, 50px);
	}
}
.case_article {
	width: 100%;
	padding-bottom: .75rem;
	border-bottom: 2px dotted #ddd;
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(25px, 5vw, 50px);
	.case_ttl {
		display: flex;
		align-items: center;
		gap: clamp(10px, 2vw, 20px);
		font-weight: bold;
		color: var(--base-color01);
		flex-shrink: 0;
		span {
			display: block;
			text-align: center;
			flex-shrink: 0;
		}
	}
	a {
		display: block;
		width: fit-content;
	}
	a:hover {
		color: var(--base-color01);
	}
}
.case_article:not(:last-of-type) {
	margin-bottom: 1rem;
}

.case_detail {
	width: 100%;
	.detail_img_wrap {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px);
		margin-bottom: clamp(15px, 3vw, 30px);
		.detail_img {
			width: calc((100% - clamp(10px, 2vw, 20px) * 3) / 4);
			img {
				aspect-ratio: 5/3;
				object-fit: cover;
			}
		}
	}
	h3 {
		line-height: 1.15;
		font-size: clamp(1.3rem,2vw,1.75rem);
		text-align: left;
		padding-bottom: .5rem;
		border-bottom: 2px dotted #ddd;
		margin-bottom: clamp(15px, 3vw, 30px);
	}
	.detail_date {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: clamp(10px, 2vw, 20px) auto;
		gap: clamp(10px, 2vw, 20px);
		p {
			font-weight: bold;
			font-size: 1.1rem;
			display: flex;
			align-items: center;
			line-height: 1.0;
			span {
				display: block;
				font-size: clamp(1.3rem,2vw,1.75rem);
				color: var(--base-color01);
				line-height: 1.0;
			}
		}
	}
}
.detail_txt * {
	all: revert;
}
.detail_txt .comment {
	font-weight: bold;
	width: 100%;
	border-bottom: 1px solid #ddd;
}
.link_btn {
	margin-top: clamp(25px, 5vw, 50px);
}

@media (max-width: 767px) {
	.case_detail
	.detail_img_wrap {
		.detail_img {
			width: calc((100% - clamp(10px, 2vw, 20px)) / 2);
		}
	}
}




/*
絞り込み部分
*/

.case_wrap .form { width: 100%; }
.category_wrap {
	margin-bottom: clamp(25px, 5vw, 50px);
	label {
		width: min(100%, 600px);
		padding: .25rem .25rem .25rem 1rem;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: relative;
		background: var(--base-color01);
		border-radius: 4px;
		line-height: 1.0;
		span { color:#fff; }
		select {
			background: #fff;
			border-radius: 2px;
			margin-left: 1rem;
			padding: .3rem .75rem;
			line-height: 1.0;
			flex-grow: 1;
		}
	}
	label::after {
		content: "";
		display: inline-block;
		height: .6rem;
		aspect-ratio: 4/3;
		background: var(--base-color01);
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
		position: absolute;
		top: 50%;
		right: 5px;
		translate: -50% -33.334%;
	}
}

@media (max-width: 599px) {
	.category_wrap {
		label {
			width: 100%;
			padding: .5rem .25rem .25rem;
			flex-direction: column;
			span { color:#fff; }
			select {
				width: 100%;
				border-radius: 2px;
				margin: .5rem 0 0;
				height: 2rem;
				display: flex;
				align-items: center;
			}
		}
		label::after {
			top: 70%;
			right: 5px;
		}
	}
}