.blog-slider-section {
    padding: 80px 0;
    background: url('../images/zebra_dark.png') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
}

/* 上部の波形アニメーション */
.blog-slider-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,1)' d='M1920,20.2426 C1799.8144,20.2426,1693.1,94.0592,1523.8872,94.0592 C1363.0381,94.0592,1269.7927,22.3569,1080,22.3569 C926.3583,22.3569,839.6763,53.2468,708.9069,53.2468 C551.8702,53.2468,506.361,29.1482,349.684,29.1482 C207.7207,29.1482,112.0789,101.4908,0,101.4908 L0,0 L1920,0 L1920,20.2426Z'%3E%3Canimation attributeName='d' dur='4s' repeatCount='indefinite' values='M1920,20.2426 C1799.8144,20.2426,1693.1,94.0592,1523.8872,94.0592 C1363.0381,94.0592,1269.7927,22.3569,1080,22.3569 C926.3583,22.3569,839.6763,53.2468,708.9069,53.2468 C551.8702,53.2468,506.361,29.1482,349.684,29.1482 C207.7207,29.1482,112.0789,101.4908,0,101.4908 L0,0 L1920,0 L1920,20.2426Z;M1920,106 C1753.761,106,1659.906,10,1512,10 C1352,10,1263,75,1080,75 C934,75,837,4,669,4 C478,4,424,120,196,120 C88,120,0,93,0,93 L0,0 L1920,0 L1920,106Z;M1920,20.2426 C1799.8144,20.2426,1693.1,94.0592,1523.8872,94.0592 C1363.0381,94.0592,1269.7927,22.3569,1080,22.3569 C926.3583,22.3569,839.6763,53.2468,708.9069,53.2468 C551.8702,53.2468,506.361,29.1482,349.684,29.1482 C207.7207,29.1482,112.0789,101.4908,0,101.4908 L0,0 L1920,0 L1920,20.2426Z' calcMode='spline' keySplines='0.42 0 0.58 1; 0.42 0 0.58 1' /%3E%3C/path%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M1920,105.7639 C1753.8878,105.7639,1659.9974,10.2314,1512.0327,10.2314 C1352.0304,10.2314,1263.0187,74.8551,1080,74.8551 C933.979,74.8551,837.0074,4.1356,669.1099,4.1356 C478.2033,4.1356,424.2267,119.7499,196.423,119.7499 C88.3296,119.7499,0.3085,93.0234,0,93.0234 L0,-2 L1920,-2 L1920,105.7639Z'%3E%3Canimation attributeName='d' dur='3.8s' begin='0.5s' repeatCount='indefinite' values='M1920,105.7639 C1753.8878,105.7639,1659.9974,10.2314,1512.0327,10.2314 C1352.0304,10.2314,1263.0187,74.8551,1080,74.8551 C933.979,74.8551,837.0074,4.1356,669.1099,4.1356 C478.2033,4.1356,424.2267,119.7499,196.423,119.7499 C88.3296,119.7499,0.3085,93.0234,0,93.0234 L0,-2 L1920,-2 L1920,105.7639Z;M1920,5 C1808,5,1699,109,1526,109 C1365,109,1271,13,1080,13 C925,13,840.152,62,716,62 C565,62,521,13,377,13 C229,13,132,103,0,103 L0,-2 L1920,-2 L1920,5Z;M1920,105.7639 C1753.8878,105.7639,1659.9974,10.2314,1512.0327,10.2314 C1352.0304,10.2314,1263.0187,74.8551,1080,74.8551 C933.979,74.8551,837.0074,4.1356,669.1099,4.1356 C478.2033,4.1356,424.2267,119.7499,196.423,119.7499 C88.3296,119.7499,0.3085,93.0234,0,93.0234 L0,-2 L1920,-2 L1920,105.7639Z' calcMode='spline' keySplines='0.42 0 0.58 1; 0.42 0 0.58 1' /%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    animation: wave-grow-top 4s ease-in-out infinite;
}

/* 下部の波形アニメーション */
.blog-slider-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 120' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,1)' d='M1920,99.7574C1799.8144,99.7574,1693.1,25.9408,1523.8872,25.9408C1363.0381,25.9408,1269.7927,97.6431,1080,97.6431C926.3583,97.6431,839.6763,66.7532,708.9069,66.7532C551.8702,66.7532,506.361,90.8518,349.684,90.8518C207.7207,90.8518,112.0789,18.5092,0,18.5092L0,120L1920,120L1920,99.7574z'%3E%3Canimation attributeName='d' dur='4s' repeatCount='indefinite' values='M1920,99.7574C1799.8144,99.7574,1693.1,25.9408,1523.8872,25.9408C1363.0381,25.9408,1269.7927,97.6431,1080,97.6431C926.3583,97.6431,839.6763,66.7532,708.9069,66.7532C551.8702,66.7532,506.361,90.8518,349.684,90.8518C207.7207,90.8518,112.0789,18.5092,0,18.5092L0,120L1920,120L1920,99.7574z;M1920,14C1753.761,14,1659.906,110,1512,110C1352,110,1263,45,1080,45C934,45,837,116,669,116C478,116,424,0,196,0C88,0,0,27,0,27L0,120L1920,120L1920,14z;M1920,99.7574C1799.8144,99.7574,1693.1,25.9408,1523.8872,25.9408C1363.0381,25.9408,1269.7927,97.6431,1080,97.6431C926.3583,97.6431,839.6763,66.7532,708.9069,66.7532C551.8702,66.7532,506.361,90.8518,349.684,90.8518C207.7207,90.8518,112.0789,18.5092,0,18.5092L0,120L1920,120L1920,99.7574z' calcMode='spline' keySplines='0.42 0 0.58 1; 0.42 0 0.58 1' /%3E%3C/path%3E%3Cpath fill='rgba(255,255,255,0.2)' d='M1920,14.2361C1753.8878,14.2361,1659.9974,109.7686,1512.0327,109.7686C1352.0304,109.7686,1263.0187,45.1449,1080,45.1449C933.979,45.1449,837.0074,115.8644,669.1099,115.8644C478.2033,115.8644,424.2267,0.2501,196.423,0.2501C88.3296,0.2501,0.3085,26.9766,0,26.9766L0,122L1920,122L1920,14.2361z'%3E%3Canimation attributeName='d' dur='3.8s' begin='0.5s' repeatCount='indefinite' values='M1920,14.2361C1753.8878,14.2361,1659.9974,109.7686,1512.0327,109.7686C1352.0304,109.7686,1263.0187,45.1449,1080,45.1449C933.979,45.1449,837.0074,115.8644,669.1099,115.8644C478.2033,115.8644,424.2267,0.2501,196.423,0.2501C88.3296,0.2501,0.3085,26.9766,0,26.9766L0,122L1920,122L1920,14.2361z;M1920,115C1808,115,1699,11,1526,11C1365,11,1271,107,1080,107C925,107,840.152,58,716,58C565,58,521,107,377,107C229,107,132,17,0,17L0,122L1920,122L1920,115z;M1920,14.2361C1753.8878,14.2361,1659.9974,109.7686,1512.0327,109.7686C1352.0304,109.7686,1263.0187,45.1449,1080,45.1449C933.979,45.1449,837.0074,115.8644,669.1099,115.8644C478.2033,115.8644,424.2267,0.2501,196.423,0.2501C88.3296,0.2501,0.3085,26.9766,0,26.9766L0,122L1920,122L1920,14.2361z' calcMode='spline' keySplines='0.42 0 0.58 1; 0.42 0 0.58 1' /%3E%3C/path%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

@keyframes wave-grow-top {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.95);
    }
}

.blog-slider-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.blog-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
    margin: 0 80px;
}

.blog-slider-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease-in-out;
}

.blog-card {
    min-width: calc(33.333% - 20px);
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.blog-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.1);
}

.blog-card-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(53, 124, 189, 1);
    color: #ffffff;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
}

.blog-card:hover .blog-card-tag {
    transform: translateY(0);
}

.blog-card-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
    min-height: 60px;
    padding-bottom: 15px;
    border-bottom: 3px solid transparent;
    background: linear-gradient(to right, rgba(27, 184, 243, 1) 0%, rgba(255, 255, 255, 1) 100%) no-repeat bottom;
    background-size: 100% 2px;
}

.blog-card-description {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 20px;
    flex: 1;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.blog-card-read-more {
    color: #357CBD;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.blog-card-read-more:hover {
    color: #2563A8;
}

.blog-card-read-more::after {
    content: '→';
    font-size: 16px;
}

/* ナビゲーションボタン */
.blog-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 20px;
}

.blog-nav-button {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.blog-nav-button:hover {
    background: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.blog-nav-button svg {
    width: 24px;
    height: 24px;
    fill: #357CBD;
}

/* インジケーター */
.blog-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.blog-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(53, 124, 189, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.blog-indicator.active {
    background: #357CBD;
    width: 40px;
    border-radius: 6px;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .blog-card {
        min-width: calc(50% - 15px);
    }
    
    .blog-slider-wrapper {
        margin: 0 60px;
    }
}

@media (max-width: 991px) {
    .blog-slider-section {
        padding: 60px 0;
    }
    
    .blog-slider-container {
        padding: 0 30px;
    }
    
    .blog-card-image {
        height: 220px;
    }
    
    .blog-slider-wrapper {
        margin: 0 50px;
    }
    
    .blog-slider-nav {
        padding: 0 10px;
    }
}

@media (max-width: 767px) {
    .blog-slider-section {
        padding: 50px 0;
    }
    
    .blog-slider-container {
        padding: 0 20px;
    }
    
    .blog-card {
        min-width: 100%;
    }
    
    .blog-card-image {
        height: 200px;
    }
    
    .blog-card-title {
        font-size: 18px;
        min-height: auto;
    }
    
    .blog-card-description {
        font-size: 14px;
    }
    
    .blog-nav-button {
        width: 40px;
        height: 40px;
    }
    
    .blog-nav-button svg {
        width: 20px;
        height: 20px;
    }
    
    .blog-slider-nav {
        padding: 0 5px;
    }
    
    .blog-slider-wrapper {
        margin: 0 40px;
    }
    
    .blog-slider-indicators {
        margin-top: 30px;
    }
    
    .blog-slider-section::before,
    .blog-slider-section::after {
        display: none;
    }
}