@charset "utf-8";


.case-section{
	flex: 1;
    background: #DAECDD;
    padding: 5% 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.case-section-box{
	width: 100%;
    max-width: 1275px;
    padding: 5% 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
	align-items: center;
}
.custom-card{
	gap: 2%;
    padding: 5%;
    justify-content: space-between;
    background: #fff;
    border-radius: 1vw;
	width: 100%;
}
.card-image{
	border-radius: 1vw;
    border: #000 solid;
    height: 20vw;
    width: 100%;
    min-height: 300px;
    flex: 1;
    flex-basis: 100px;
    overflow: hidden;
}
.card-image img{
	object-fit: cover;
    object-position: center;
    height: 100%;
}
.card-content{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 2;
}
.card-content h2{
	color: #F18B00;
}
.detail-btn{
	font-size: clamp(16px, 3vw, 30px);
    text-align: end;
    position: relative;
    padding: 5% 1% 1% 0;
    justify-content: end;
    font-weight: bold;
    color: #00b580;
}
.detail-btn::after{
	content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 6px;
    background: #00b580;
    border-radius: 5px;
}
.detail-btn a{
	width: fit-content;
	transition: all 0.3s ease;
}
.detail-btn a:hover {
    transform: translateX(-1rem);
}
/*レスポンシブ*/
@media (max-width: 767px) {
	.custom-card{
		padding: 10% 5%;
		flex-direction: column;
	}
	.card-image{
		margin-bottom: 5%;
        min-width: initial;
        min-height: 150px;
	}
	.card-content{
		gap: 2rem;
	}
	.card-content h2{
		font-size: clamp(24px, 4vw, 80px);
        text-align: center;
	}
	.card-content .subtitle {
		font-size: clamp(14px, 2vw, 40px);
	}
	.detail-btn{
		font-size: clamp(16px, 2vw, 20px);
        padding: 5% 1% 5% 0;
	}
}/*:←hasの影響でエディター上エラーが出る可能性がありますが正常です*/