@charset "utf-8";

/** case index **/
.l-main .l-section{
margin-top: 2.5em;
}
.l-main .l-section + .l-section {
margin-top: 2.5em;
}
.l-main .l-section-title.case-title{
margin-top: 0;
margin-bottom: 0.5em;
}
.case-name{
font-size: 18px;
font-weight: 700;
color: #555;
padding-bottom: 0.25em;
background-color: #EEEEEE;
padding: 1px 8px 2px;
width: fit-content;
}
.caseIndexWrapper{
margin-bottom: 100px;
}
.caseIndexInner{
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.caseCard{
width: calc((100% - 40px) / 3);
background-color: #FFFFFF;
border-radius: 8px;
border: 1px solid #D9D9D9;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
transition: all .3s;
}
.caseCard .caseImage img{
transition: all .3s;
}
.caseCard:hover .caseImage img{
opacity: 0.75;
}
.caseDesc{
padding: 15px;
display: flex;
flex-direction: column;
min-height: 150px;
}
.caseText{
font-size: 18px;
font-weight: 700;
line-break: strict;
transition: all .3s;
}
.caseCard:hover .caseText{
color: #FA000F;
}
.caseCustomerName{
text-align: right;
font-size: 13px;
margin-top: auto !important;
position: relative;
display: flex;
align-items: center;
justify-content: right;
gap: 5px;
}
.caseCustomerName::before{
content: "";
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
position: absolute;
right: 6px;
z-index: 1;
}
.caseCustomerName::after{
content: "";
width: 16px;
height: 16px;
background-color: #CC0000;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 2px;
transition: all .3s;
}
.caseCard:hover .caseCustomerName::after{
background-color: #FA000F;
}
@media screen and (max-width: 994px) {
.caseIndexInner{
gap: 20px;
}
.caseCard{
width: calc((100% - 20px) / 2);
}
}
@media screen and (max-width: 768px) {
.caseIndexInner{
gap: 20px 0;
}
.caseCard{
width: 100%;
}
.caseCard .caseImage{
height: 200px;
width: 100%;
overflow: hidden;
}
.caseCard .caseImage img{
object-fit: cover;
display: block;
}
.caseDesc{
min-height: 100px;
}
.caseCustomerName{
font-size: 14px;
}
}