@charset "utf-8";

/** ▼▼▼ main ▼▼▼ **/
#main {
    width: 100%;
    background: url(../images/bg_company-main.png) no-repeat center center / cover;
}

@media (max-width: 860px) {
    #main {
        margin: 70px 0 0 0;
    }
}

#main h2 {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    line-height: 0;
}
/** ▲▲▲ main ▲▲▲ **/

/** ▼▼▼ about ▼▼▼ **/
#about {
    width: 90%;
    max-width: 1000px;
    margin: 53px auto 0 auto;
}

#about h3 {
    font-size: 2.25em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    line-height: 133%;
    color: #0071BC;
}

#about ul {
    width: 100%;
    max-width: 1000px;
    margin: 25px 0 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    border-top: 1px solid #CBC7C7;
}

#about ul li {
    padding: 1.6% 2%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cbc7c7;
    line-height: 162%;
}

#about ul li:nth-child(odd) {
    width: 26%;
    max-width: 260px;
    background: #EAF6FD;
}

#about ul li:nth-child(even) {
    width: 66%;
    max-width: 660px;
}

#about ul li:nth-child(17) {
    align-items: flex-start;
}

#about ul li:nth-child(19) {
    align-items: flex-start;
}
/** ▲▲▲ about ▲▲▲ **/

/** ▼▼▼ area ▼▼▼ **/
#area {
    width: 90%;
    max-width: 1000px;
    margin: 60px auto 0 auto;
    padding: 0 0 55% 0;
    background: url(../images/img_map.svg) no-repeat center center / contain;
}

#area h3 {
    font-size: 2.25em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #0071BC;
}
/** ▲▲▲ area ▲▲▲ **/

/** ▼▼▼ attempt ▼▼▼ **/
#attempt {
    width: 90%;
    max-width: 1000px;
    margin: 45px auto 0 auto;
}

#attempt h3 {
    font-size: 2.25em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #0071BC;
}

#attempt ul {
    width: 100%;
    max-width: 1000px;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    list-style: none;
}

#attempt ul li {
    width: 32%;
    max-width: 320px;
}

#attempt ul li p {
    margin: 0;
}
/** ▲▲▲ attempt ▲▲▲ **/

@media (max-width: 640px) {
    /** ▼▼▼ main ▼▼▼ **/
    #main {
        margin: 70px 0 0 0;
        background: url(../images/bg_company-main-sp.png) no-repeat center center / cover;
    }
    /** ▲▲▲ main ▲▲▲ **/

    /** ▼▼▼ about ▼▼▼ **/
    #about {
        width: 100%;
    }

    #about h3 {
        font-size: 1.5em;
        line-height: 116%;
        width: 90%;
        margin: 0 auto;
    }

    #about ul {
        flex-direction: column;
    }

    #about ul li {
        padding: 3.5% 5%;
        border-bottom: none;
    }

    #about ul li:nth-child(odd) {
        width: 90%;
        max-width: 640px;
    }

    #about ul li:nth-child(even) {
        width: 90%;
        border-bottom: 1px solid #cbc7c7;
    }
    /** ▲▲▲ about ▲▲▲ **/

    /** ▼▼▼ area ▼▼▼ **/
    #area {
        padding: 0 0 90% 0;
        background: url(../images/img_map.svg) no-repeat bottom center / contain;
    }

    #area h3 {
        font-size: 1.5em;
    }
    /** ▲▲▲ area ▲▲▲ **/

    /** ▼▼▼ attempt ▼▼▼ **/
    #attempt h3 {
        font-size: 1.5em;
    }

    #attempt ul {
        flex-direction: column;
    }

    #attempt ul li {
        width: 100%;
        max-width: 640px;
    }

    #attempt ul li:nth-child(2) {
        margin: 20px 0;
    }
    /** ▲▲▲ attempt ▲▲▲ **/
}