/* ======================================================= */
/* sec1 */
/* ======================================================= */
section.sec1 {
    margin: 60px 0;
}

section.sec1 .container {
    width: 59.375%;
    max-width: 1280px;
    margin: auto;
}

section.sec1 .box {
    margin-top: 65px;
}

section.sec1 .box .img_box {
    width: 32.10526316%;
}

section.sec1 .box .contents {
    width: 66.05263158%;
}

section.sec1 .box .contents .ttl_box {
    padding-bottom: 10px;
    border-bottom: 3px solid var(--red);
}

section.sec1 .box .contents .ttl_box .sub_ttl {
    margin-left: 20px;
}

section.sec1 .box .contents .txt_box {
    margin-top: 20px;
}

section.sec1 .box .contents .txt_box .main_txt {
    margin-top: 20px;
}

/* responsive */
@media screen and (max-width: 1280px) {
    section.sec1 .container {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    section.sec1 .box .contents {
        width: 100%;
    }

    section.sec1 .box .contents .img_box {
        width: 80%;
        margin: auto;
        margin-top: 40px;
    }

    section.sec1 .box .contents .txt_box {
        margin-top: 40px;
    }
}

@media screen and (max-width: 480px) {
    section.sec1 {
        margin: 40px 0;
    }

    section.sec1 .top_ttl {
        text-align: unset;
    }

    section.sec1 .box {
        margin-top: 40px;
    }
}

/* ======================================================= */
/* sec2 */
/* ======================================================= */
section.sec2 .container {
    padding: 60px 0;
    width: 59.375%;
    max-width: 1280px;
    margin: auto;
}

section.sec2 .box {
    margin-top: 40px;
}

section.sec2 .box .item {
    width: 32.10526316%;
}

section.sec2 .box .item .head_box .left {
    width: 27.32240437%;
}

section.sec2 .box .item .head_box .right {
    width: 72.67759563%;
    padding: 7px 6%;
    background: rgba(87, 203, 203, 0.15);
}

section.sec2 .box .item .contents {
    padding: 20px;
}

/* responsive */
@media screen and (max-width: 1280px) {
    section.sec2 .container {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    section.sec2 .box {
        flex-wrap: wrap;
    }

    section.sec2 .box .item {
        width: 70%;
        margin: auto;
    }

    section.sec2 .box .item:not(:first-of-type) {
        margin-top: 40px;
    }

    section.sec2 .box .item .contents {
        padding: 40px 25px;
    }
}

@media screen and (max-width: 480px) {
    section.sec2 .container {
        padding: 40px 0;
    }

    section.sec2 .box .item {
        width: 90%;
    }

    section.sec2 .box .item .contents {
        padding: 30px 20px;
    }
}

/* ======================================================= */
/* sec3 */
/* ======================================================= */
section.sec3 {
    margin: 60px 0;
}

section.sec3 .container {
    width: 59.375%;
    margin: auto;
    max-width: 1140px;
}

section.sec3 .box {
    margin-top: 40px;
}

section.sec3 .box .item {
    padding-bottom: 15px;
    border-bottom: 1px solid #CCCCCC;
}
section.sec3 .box .item:not(:first-of-type) {
    margin-top: 15px;
}

section.sec3 .box .item .key {
    width: 12%;
}

section.sec3 .box .item .value {
    width: 85%;
}

section.sec3 .box .item .value .value_img {
    width: 158px;
}

section.sec3 .map {
    margin-top: 30px;
    width: 100%;
}

section.sec3 .map iframe {
    width: 100%;
}

/* responsive */
@media screen and (max-width: 1280px) {
    section.sec3 .container {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    section.sec3 .box .item {
        flex-direction: column;
        border-bottom: unset;
        padding-bottom: unset;
    }

    section.sec3 .box .item .key {
        width: 100%;
        background: #cccccc;
        padding: 10px;
    }

    section.sec3 .box .item .value {
        width: 100%;
        padding: 10px;
    }

    section.sec3 .box .item:not(:first-of-type) {
        margin-top: unset;
    }
}

@media screen and (max-width: 480px) {
    section.sec3 {
        margin: 40px 0;
    }
}