body {
            font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
        }


.h2, h2 {
    font-size: 1.6rem;
}

.lead {
    font-size: 1.2rem;
    font-weight: 300;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding: 40px 15px;
    margin-right: auto;
    margin-left: auto;
}

.display-4 {
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1.2;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding: 20px 15px;

}

.feature h4 {
    margin: 20px;
    color: var(--primary-color);
}
.shadow{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}

.feature img{
    width:150px;

}

        :root {
            --primary-color: #57C26E;
            --secondary-color: #343a40;
            --light-color: #f8f9fa;
            --dark-color: #555;
        }

        body {
            
            background-color: var(--light-color);
            color: var(--dark-color);
        }

        .header {
            background: url('kv.png') no-repeat center center/cover;
            position: relative;
            color: white;
            padding: 100px 0;
            text-align: center;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(126, 201, 141, 0.6);
            /* オーバーレイカラーと透明度 */
        }

        .header-content {
            position: relative;
            z-index: 1;
        }

        .feature {
            margin: 40px 0;
            text-align: center;
        }

        .feature h4 {
            color: var(--primary-color);
        }

        .cta {
            background: var(--primary-color);
            color: white;
            padding: 40px 0;
            text-align: center;
        }

        .cta a {
            background-color: white;
            color: var(--primary-color);
            border-color: white;
        }

        .cta a:hover {
            background-color: var(--light-color);
            color: var(--primary-color);
        }

        .footer {
            background: var(--secondary-color);
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: #45A85A;
            /* ちょっと濃い緑 */
            border-color: #45A85A;
        }