@charset "utf-8";

@media screen and (min-width:768px) {
    /*pc・タブレットcss*/

    #goal {
        padding-bottom: 280px;
        background: url(../img/top/goal_bg.png) repeat-x center bottom;
    }

    .goal-list {
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .goal-list li {
        width: 47.5%;
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: dashed 1px #333333;
    }

    .goal-list li .no {
        width: 20%;
        color: #F08C00;
        font-weight: 700;
        font-size: 120px;
        line-height: 0.8;
    }

    .goal-list li .txt {
        width: 70%;
        line-height: 1.8;
    }

    .goal-list li .ttl {
        font-size: 26px;
        margin-bottom: 10px;
        font-weight: 700;
        line-height: 1.3;
    }

    /*----------------------*/

    #company {
        padding: 100px 0;
        background-color: #F3F1F0;
    }

    .company-data {}

    .company-data .company-table {
        width: 50%;
    }

    .company-data .company-table th,
    .company-data .company-table td {
        border-collapse: collapse;
        padding: 15px 10px;
    }

    .company-data .company-table th {
        width: 30%;
        border-bottom: solid 1px #F08C00;
    }

    .company-data .company-table td {
        width: 70%;
        border-bottom: solid 1px #E1E1E1;
    }

    .company-data .company-table td li {
        line-height: 1.5;
    }

    .company-data .ph {
        width: 45%;
    }

}

@media (max-width: 768px) {

    #goal {
        padding-bottom: 20vw;
        background: url(../img/top/goal_bg.png) no-repeat center bottom / 300% auto;
    }

    .goal-list {}

    .goal-list li {
        width: 100%;
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 6vw;
        padding-bottom: 6vw;
        border-bottom: dashed 1px #333333;
    }

    .goal-list li .no {
        width: 20%;
        color: #F08C00;
        font-weight: 700;
        font-size: 18vw;
        line-height: 0.8;
    }

    .goal-list li .txt {
        width: calc(100% - 23vw);
        line-height: 1.8;
    }

    .goal-list li .ttl {
        font-size: 22px;
        margin-bottom: 2vw;
        font-weight: 700;
        line-height: 1.3;
    }

    /*----------------------*/

    #company {
        padding: 10vw 0;
        background-color: #F3F1F0;
    }

    .company-data {}

    .company-data .company-table {
        width: 100%;
        margin-bottom: 8vw;
    }

    .company-data .company-table th,
    .company-data .company-table td {
        border-collapse: collapse;
        padding: 2vw;
    }

    .company-data .company-table th {
        width: 30%;
        border-bottom: solid 1px #F08C00;
    }

    .company-data .company-table td {
        width: 70%;
        border-bottom: solid 1px #E1E1E1;
    }

    .company-data .company-table td li {
        line-height: 1.5;
    }

    .company-data .ph {
        width: 100%;
    }

}