@charset "UTF-8";

.mgt5 {
    margin-top: 5%;
}

.col-2 {
    width: 48%;
}

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

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

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

.txt-blue {
    color: #0B8CB5;
    font-size: 1.5rem;
    font-weight: bold;
}


/* ----- sec01 ----- */
img[src$="img-1.jpg"] {
    width: 100%;
}

.circle_flex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 5% 0;
}

.circle {
    position: relative;
    width: 230px;
    height: 230px; 
    background-color: #EBF7FE;
    border-radius: 50%; 
    margin: 0 auto;
    text-align: center;
}

.circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 200px;
    
}

.circle-inner span {
    color: #0B8CB5;
    font-size: 2.1rem;
    font-weight: bold;
}

/* ----- sec02 / 360°モバイル保護ソリューション ----- */
ol.desc {
    list-style-type: none;
    margin-left: 0 !important;
    
}

ol.desc li {
    position: relative;
    padding-top: 30px;
    color: #fff;
    background-color: #0B8CB5;
    width: 25%;
    padding: 25px;
    border-radius: 15px;
}

ol.desc li p.num {
    position: absolute;
    font-weight: bold;
    top: -24%;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-size: 2.5rem;
}

ol.desc li p.title {
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1em;
}

p.bottom-txt {
    font-size: 20px;
    text-align: center;
    margin-top: 5%;
}

/* ----- sec03 / 完全に暗号化されたスマートフォン ----- */
img[src$="img-2.jpg"] {
    width: 100%;
}

.flex1 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    text-align: center;
    background-image: url(../../images/alliance/partners_21/img-2.png);
    background-repeat: no-repeat;
    background-size: 47%;
    background-position: top;
}

.flex1-box {
    width: 28%;
    margin: 5% 0;
}

.flex1-box li {
    height: 110px;
    margin-bottom: 5%;
}

.flex1-box li img {
    width: 35px;
}

.ul-align-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -10%;
}

.check-list li{
    padding-left: 1.2em;
    background-image: url(../../images/alliance/partners_21/check.png);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: left center;
    margin-bottom: 5%;
    font-weight: bold;
}


/* ----- sec04 / 安全なメッセージ&通話アプリ ----- */
img[src$="img-3.jpg"] {
    width: 100%;
}

.col-3 {
    width: 31%;
    height: 70px;
    color: #fff;
    background-color: #0B8CB5;
    text-align: center;
    padding-left: 0;
    margin-bottom: 3%;
    display: table;
}

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

/* ----- sec05 / 一元化された管理コンソール ----- */
img[src$="img-4.jpg"] {
    width: 100%;
}

.flex-card {
    width: 28%;
    border: solid 1px #0B8CB5;
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
}

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

.flex-card .read {
    font-weight: bold;
    font-size: 1.3rem;
    color: #0B8CB5;
    text-align: center;
    height: 20%;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}


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

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

    /* ----- sec02 / 360°モバイル保護ソリューション ----- */
    ol.desc {
        margin-left: 0 !important;
    }

    ol.desc li {
        width: 90%;
        margin-bottom: 10%;
        margin-left: auto;
        margin-right: auto;
    }

    ol.desc li p.title {
        font-size: 1.7rem;
    }

    /* ----- sec03 / 完全に暗号化されたスマートフォン ----- */
    
    .flex1 {
        font-size: 0.8rem;
        background-size: 61%;
    }

    .flex1-box {
        width: 35%;
    }

    .angle {
        width: 25%
    }


    /* ----- sec04 / 安全なメッセージ&通話アプリ ----- */
    #sec04 .flex {
        display: flex !important;
    }
    .col-3 {
        width: 48%;
    }

    /* ----- sec05 / 一元化された管理コンソール ----- */
    .flex-card {
        width: 93%;
        margin-bottom: 10%;
    }

    .flex-card .read {
        font-size: 1.7rem;
    }


}