/* 蟆主�莠倶ｾ倶ｸ€隕ｧ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.case-study-container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

/* 繝輔ぅ繝ｫ繧ｿ繝ｼ繝懊ち繝ｳ */
/* 繝�せ繧ｯ繝医ャ繝励�繧ｿ繝悶Ξ繝�ヨ逕ｨ縺ｮ隱ｿ謨ｴ */
.case-study-filter {
    text-align: center;
    margin-bottom: 40px;
    display: grid; /* flex縺九ｉgrid縺ｫ螟画峩 */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.filter-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #666;
    text-align: center; /* 荳ｭ螟ｮ蟇�○繧堤｢ｺ螳溘↓ */
    white-space: nowrap; /* 繝�く繧ｹ繝医�謾ｹ陦後ｒ髦ｲ縺� */
}

/* 繧ｿ繝悶Ξ繝�ヨ逕ｨ��768px莉･荳奇ｼ� */
@media (min-width: 768px) and (max-width: 1024px) {
    .case-study-filter {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* 繧ｹ繝槭�逕ｨ��767px莉･荳具ｼ�- 縺薙％縺梧怙驥崎ｦ� */
@media (max-width: 767px) {
    .case-study-filter {
        grid-template-columns: repeat(2, 1fr); /* 讓ｪ2蛻怜崋螳� */
        gap: 6px;
        margin-bottom: 20px;
        padding: 0 10px; /* 蟾ｦ蜿ｳ縺ｫ菴咏區繧定ｿｽ蜉� */
    }
    
    .filter-btn {
        padding: 8px 10px; /* 繝代ョ繧｣繝ｳ繧ｰ繧貞ｰ上＆縺� */
        font-size: 12px; /* 繝輔か繝ｳ繝医し繧､繧ｺ繧貞ｰ上＆縺� */
        border-radius: 20px; /* 隗剃ｸｸ繧貞ｰ上＆縺� */
        min-height: 36px; /* 譛€蟆城ｫ倥＆繧定ｨｭ螳� */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 髱槫ｸｸ縺ｫ蟆上＆縺ｪ繧ｹ繝槭�逕ｨ��400px莉･荳具ｼ� */
@media (max-width: 400px) {
    .case-study-filter {
        gap: 4px;
        padding: 0 5px;
    }
    
    .filter-btn {
        padding: 6px 8px;
        font-size: 11px;
        min-height: 32px;
    }
}
.filter-btn:hover,
.filter-btn.active {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

/* 繝ｪ繧ｹ繝医�繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
.case-study-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}


.case-study-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
    height: 520px; /* 縲蝉ｿｮ豁｣縲鷹ｫ倥＆繧貞｢励ｄ縺励※繧ｫ繝�ざ繝ｪ逕ｨ縺ｮ菴呵｣輔ｒ菴懊ｋ */
}

.case-study-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.case-study-item.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.case-study-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    min-height: 100%; /* 縲蝉ｿｮ豁｣縲僧in-height縺ｫ螟画峩 */
    padding: 20px;
}

/* 逕ｻ蜒上お繝ｪ繧｢ - 繧医ｊ譟碑ｻ溘↑蟇ｾ蠢懃沿 */
.case-image {
    order: 2;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0; /* 縲宣㍾隕√€醍判蜒上′邵ｮ縺ｾ縺ｪ縺�ｈ縺�↓ */    
    background: #f9f9f9; /* 閭梧勹濶ｲ繧貞ｰ代＠譏弱ｋ縺� */
}

.case-image img {
    width: 100%;
    height: 160px; /* 縲占ｪｿ謨ｴ縲醍判蜒上�鬮倥＆繧貞崋螳� */
    width: auto;
    height: auto;
    object-fit: cover; /* 逕ｻ蜒丞�菴薙ｒ陦ｨ遉ｺ contain 竊� cover */
    object-position: center;
    transition: transform 0.3s ease;
}

/* 讓ｪ髟ｷ逕ｻ蜒擾ｼ�16:9�峨�蝣ｴ蜷� */
.case-image img[style*="aspect-ratio"] {
    width: 100%;
    height: auto;
}

.case-study-item:hover .case-image img {
    transform: scale(1.02); /* 繝帙ヰ繝ｼ譎ゅ�繧ｹ繧ｱ繝ｼ繝ｫ繧呈而縺医ａ縺ｫ隱ｿ謨ｴ */
}

/* 繧ｳ繝ｳ繝�Φ繝�お繝ｪ繧｢ */
.case-content {
    order: 3;
    display: flex;
    flex-direction: column;
    padding: 0;
    flex-grow: 1; /* 縲宣㍾隕√€第ｮ九ｊ縺ｮ遨ｺ髢薙ｒ蜈ｨ縺ｦ菴ｿ逕ｨ */
    justify-content: flex-start; /* 縲蝉ｿｮ豁｣縲台ｸ頑純縺医↓螟画峩 */
}

.company-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 8px 0 8px 0; /* 縲蝉ｿｮ豁｣縲台ｸ贋ｸ九�繝ｼ繧ｸ繝ｳ繧定ｪｿ謨ｴ */
    min-height: 2.4em; /* 縲蝉ｿｮ豁｣縲�2陦悟�縺ｮ鬮倥＆繧堤｢ｺ菫� */
    flex-shrink: 0; /* 邵ｮ縺ｾ縺ｪ縺�ｈ縺�↓ */
    line-height: 1.2; /* 陦碁俣繧定ｨｭ螳� */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 縲蝉ｿｮ豁｣縲�2陦後∪縺ｧ陦ｨ遉ｺ */
    overflow: hidden;
    max-height: 2.4em; /* 縲占ｿｽ蜉�縲第怙螟ｧ鬮倥＆繧貞宛髯� */
}

.case-description {
    font-size: 19px !important; /* 縲蝉ｿｮ豁｣縲�19.2px�育ｴ�19px�峨↓螟画峩 */
    line-height: 1.5 !important; /* 陦碁俣繧�1.5縺ｫ隱ｿ謨ｴ */
    color: #333;
    margin: 0 0 16px 0; /* 荳九�繝ｼ繧ｸ繝ｳ繧定ｪｿ謨ｴ */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important; /* PC縺ｧ縺ｯ2陦後↓蛻ｶ髯� */
    overflow: hidden;
    order: 1; /* 鬆�ｺ上ｒ譏守､ｺ逧�↓謖�ｮ� */
    height: 86px !important; /* 縲蝉ｿｮ豁｣縲�19px縺ｫ蜷医ｏ縺帙※鬮倥＆繧定ｪｿ謨ｴ */
    flex-shrink: 0; /* 邵ｮ縺ｾ縺ｪ縺�ｈ縺�↓ */
}

.case-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px; /* 縲蝉ｿｮ豁｣縲鷹俣髫斐ｒ隧ｰ繧√ｋ */
    flex-shrink: 0; /* 邵ｮ縺ｾ縺ｪ縺�ｈ縺�↓ */
}

.category-tag {
    background: #e8f4fd;
    color: #007cba;
    padding: 6px 12px; /* 荳贋ｸ九�繝代ョ繧｣繝ｳ繧ｰ繧�4px竊�6px縺ｫ蠅励ｄ縺� */
    border-radius: 15px;
    font-size: 12px; /* 蛻�｡橸ｼ医き繝�ざ繝ｪ�峨�譁�ｭ励し繧､繧ｺ隱ｿ謨ｴ縺ｯ縺薙％ */
    font-weight: 500;
    white-space: nowrap; /* 謾ｹ陦後ｒ髦ｲ縺� */
    line-height: 1.2; /* 陦碁俣繧定ｪｿ謨ｴ */
}

/* 繝�せ繧ｯ繝医ャ繝怜ｰら畑��1025px莉･荳奇ｼ峨�險ｭ螳� */
@media only screen and (min-width: 1025px) {
    .case-study-item .case-description {
        font-size: 19px !important; /* 縲蝉ｿｮ豁｣縲�19px縺ｫ邨ｱ荳€ */
        line-height: 1.5 !important;
        -webkit-line-clamp: 2 !important;
        height: 86px !important; /* 縲蝉ｿｮ豁｣縲�19pxﾃ�1.5ﾃ�2陦�=57px+菴咏區=86px */
        margin: 0 0 16px 0 !important;
    }
}

/* 繧ｿ繝悶Ξ繝�ヨ陦ｨ遉ｺ */
@media only screen and (max-width: 1024px) {
    .case-study-container {
        padding: 0 40px;
    }
    
    .case-study-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* 縲蝉ｿｮ豁｣縲代ち繝悶Ξ繝�ヨ逕ｨ縺ｮ繝�ぅ繧ｹ繧ｯ繝ｪ繝励す繝ｧ繝ｳ譁�ｭ励し繧､繧ｺ邨ｱ荳€ */
    .case-study-item .case-description {
        font-size: 19px !important; /* 縲蝉ｿｮ豁｣縲�19px縺ｫ邨ｱ荳€ */
        line-height: 1.5 !important;
        -webkit-line-clamp: 2 !important;
        height: 86px !important; /* 縲蝉ｿｮ豁｣縲�19pxﾃ�1.5ﾃ�2陦�=57px+菴咏區=86px */
    }
}

/* 繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ陦ｨ遉ｺ */
@media only screen and (max-width: 768px) {
    .case-study-container {
        padding: 0 20px;
    }
    .case-study-item {
        height: auto; /* 蝗ｺ螳夐ｫ倥＆繧定ｧ｣髯､ */
        min-height: 300px; /* 譛€蟆城ｫ倥＆縺ｮ縺ｿ險ｭ螳� */
    }
    
    .case-study-item a {
        padding: 12px; /* 縲蝉ｿｮ豁｣縲代ヱ繝�ぅ繝ｳ繧ｰ繧�16px竊�12px縺ｫ蜑頑ｸ� */
    }   
    .case-study-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .case-study-filter {
        margin-bottom: 30px;
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .case-image img {
        height: 140px; /* 繧ｹ繝槭�縺ｧ縺ｯ譖ｴ縺ｫ蟆上＆縺� */
    }    
    .case-image {
        margin-bottom: 8px;
    }
    
    .case-content {
        padding: 0; /* 縲蝉ｿｮ豁｣縲鷹㍾隍�ヱ繝�ぅ繝ｳ繧ｰ蜑企勁 */
        min-height: 170px; /* 繧ｹ繝槭�縺ｧ繧ょ香蛻�↑鬮倥＆繧堤｢ｺ菫� */
    }
    
    .company-name {
        margin: 8px 0 4px 0; /* 縲蝉ｿｮ豁｣縲代せ繝槭�縺ｧ縺ｮ髢馴囈隱ｿ謨ｴ */
        min-height: 1.2em; /* 縲蝉ｿｮ豁｣縲代せ繝槭�縺ｧ縺ｯ1陦梧Φ螳� */
        line-height: 1.2;
        display: block; /* 縲蝉ｿｮ豁｣縲代せ繝槭�縺ｧ縺ｯ騾壼ｸｸ陦ｨ遉ｺ */
        -webkit-line-clamp: none;
        overflow: visible;
    }
    
    .case-description {
        font-size: 22px !important; /* 縲蝉ｿｮ豁｣縲代せ繝槭�縺ｧ繧�22px縺ｫ邨ｱ荳€ */
        line-height: 1.5 !important; /* 邨ｱ荳€ */
        -webkit-line-clamp: 3 !important; /* 繧ｹ繝槭�縺ｧ縺ｯ3陦瑚｡ｨ遉ｺ */
        height: 100px !important; /* 縲蝉ｿｮ豁｣縲�22pxﾃ�1.5ﾃ�3陦�=99px竕�100px */
        margin: 0 0 8px 0; /* 荳九�繝ｼ繧ｸ繝ｳ隱ｿ謨ｴ */
    }
    .case-categories {
        margin-top: 0; /* 縲蝉ｿｮ豁｣縲鷹俣髫斐ｒ縺輔ｉ縺ｫ隧ｰ繧√ｋ */
        margin-bottom: 0; /* 縲蝉ｿｮ豁｣縲台ｸ矩Κ菴咏區繧貞ｮ悟�縺ｫ蜑企勁 */
    }    
}

@media only screen and (max-width: 480px) {
    .case-study-container {
        padding: 0 15px;
    }
    
    .case-study-filter {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-btn {
        width: 100%;
        max-width: 200px;
    }
}

/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
.case-study-item {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 繝輔ぅ繝ｫ繧ｿ繝ｪ繝ｳ繧ｰ譎ゅ�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
.case-study-item.filtering {
    transition: all 0.4s ease;
}


.case-study-item.hidden {
    display: none !important;
}

/* 隕句�縺励�繧ｹ繧ｿ繧､繝ｫ */
.case-study-heading {
    font-size: 1.5rem; /* 蝓ｺ譛ｬ縺ｯ繧�ｄ蟆上＆繧� */
    font-weight: bold;
    text-align: center;
    margin: 2rem 0;
    color: #333;
}

/* 繧ｹ繝槭�蟇ｾ蠢懶ｼ育判髱｢蟷�′768px莉･荳九�縺ｨ縺搾ｼ� */
@media screen and (max-width: 768px) {
    .case-study-heading {
        font-size: 1.2rem; /* 繧ｹ繝槭�縺ｯ縺輔ｉ縺ｫ蟆上＆縺� */
        margin: 1.5rem 0;
    }
}