@charset "UTF-8";

.mgt5 {
    margin-top: 5%;
}

.col-2 {
    width: 48%;
}

.new-alliance h5 {
    color: #000 !important;
}

.new-alliance h5:before {
    background-color: #FFE600 !important;
}

.txt-center {
    text-align: center;
}


/* ----- sec01 / Webサイト運用の脅威----- */
img[src$="img-1.jpg"] {
    width: 100%;
}

.read {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.marker {
    background:linear-gradient(transparent 60%, #FFE600 60%);
}



/* ----- sec02 / サービス ----- */
.flex-box {
    width: 30%;
}

.flex-box img{
    width: 100%;
}

.flex-box .txt-box {
    background: #fff;
    padding: 5%;
}

.flex-box .txt-box .title {
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 0;
}

.flex-box .txt-box .txt {
    height: 145px;
}


/* ----- sec03 / 特定可能な脅威 ----- */

.col-4 {
    width: 22%;
    color: #fff;
    background-color: #0BB596;
    text-align: center;
    font-weight: bold;
    padding: 5% 0;
    margin-bottom: 3%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.col-4 p {
    display: table-cell;
    vertical-align: middle;
}



/* ----- sec04 / 特徴 ----- */

.flex-card {
    width: 25%;
    border: solid 1px #0BB596;
    background-color: #fff;
    padding: 20px;
    text-align: center;
    margin-bottom: 5%;
}

.flex-card img {
    width: 20%;
}

.flex-card .read {
    font-weight: bold;
    font-size: 1.3rem;
    color: #0BB596;
    text-align: center;
    height: 20%;
}



@media screen and (max-width: 1000px) {
    .col-2 {
        width: 100%;
    }

    .txt-center {
        text-align: left;
    }

    /* ----- sec01 / Webサイト運用の脅威----- */
    .read {
        text-align: left;
    }

    /* ----- sec02 / サービス ----- */
    .flex-box {
        width: 100%;
        margin-bottom: 5%;
    }

    .flex-box img{
        width: 100%;
        object-fit: cover;
    }

    .flex-box .txt-box {
        padding: 5% 5% 0;
    }

    .flex-box .txt-box .title {
        font-size: 1.5rem;
    }

    /* ----- sec03 / 特定可能な脅威 ----- */

    #sec03 .flex {
        display: flex;
    }

    .col-4 {
    width: 48%;
    }

    /* ----- sec04 / 特徴 ----- */

    #sec04 .flex {
        display: flex;
    }

    .flex-card {
        width: 45%;
        padding: 15px 10px 0;
    }

    .flex-card img {
        width: 20%;
    }

    .flex-card .read {
        font-size: 1.5rem;
        height: 15%;
    }

}