@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500&display=swap');

/**********************************************/
/*　日本都市開発株式会社 */
/**********************************************/

/*見出し*/
.h2-border {
    display: inline-block;
    position: relative;
    text-align: center;
    font-weight: 500;
    font-family: "Zen Maru Gothic", serif;
    width: 100%;
    font-size: 3.2rem;
    letter-spacing: 1px;
    line-height: 100%;

    background-color: #f49816;
    color:#fff;
    border-radius: 50px;
    padding: 10px 10px;
}

figure img {
    display: block;
    margin: 0 auto;
}
figure~figure {
    margin-top: 40px;
}

/*画像*/
.imgbox {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
}


/*表紙*/
.cover {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;

    background-color: #f3f3ea;
    padding-bottom: 20px;
    color:#4c3333;
}
.cover h1 {
    margin: 20px 0;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    font-style: normal;
    color:#4c3333;
    font-size: 2.6rem;
}
.cover h1 span {
    margin-left: 1em;
}

.frame {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.frame .text {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0;

    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
}

.frame .text p {
    text-align: center;
    font-size: 2.2rem;
    line-height: 180%;
    color:#663030;
    font-weight: 500;
}

/* #concept .text img {
    display: block;
    margin: 0 0 0 auto;
    margin: 60px auto 0;
} */



.map {
    width: 100%;
    max-width: 1000px;
    height:540px;
    margin: 30px auto 50px;
}
.map iframe {
    width: 100%;
    height: 100%;
}


.btn {
    margin: 40px 0;
    text-align: center;
}
.btn a {
    width: 100%;
    max-width: 280px;
    display: inline-block;
}
.btn a~a {
    margin-left: 40px;
}
.btn img {
    display: block;
}

/*区切り*/
.imgline {
    display: block;
    margin: 50px auto;
}




/****************************/
/*レスポンシブ
/****************************/
@media screen and (max-width: 1280px) { 
}

@media screen and (max-width: 980px) {

    .cover h1 span {
        display: block;
        margin-left: 0;
    }


}
@media screen and (max-width: 768px) {
    .h2-border {
        font-size: 2.6rem;
    }
    .cover h1 {
        margin: 20px 0;
        font-size: 2.2rem;
    }
    .frame .text p {
        font-size: 2.0rem;
        line-height: 180%;
    }

    .btn a {
        max-width: 210px;
        font-size: 100%;
        padding: 15px 5px;
    }
    .btn a~a {
        margin-left: 20px;
    }
}
@media screen and (max-width: 520px) {
    .h2-border {
        font-size: 2.2rem;
        padding: 8px 10px;
        margin-bottom: 0;
    }
    .cover h1 {
        margin: 20px 0;
        font-size: 1.8rem;
    }
    .frame .text p {
        font-size: 1.6rem;
        line-height: 180%;
    }
    .frame .text p br {
        display: none;
    }
    #concept .text img {
        margin: 40px auto 0;
    }

    figure~figure {
        margin-top: 20px;
    }

    .btn a {
        display: block;
        margin: 0 auto 10px;
    }
    .btn a~a {
        margin: 0 auto 10px;
    }
}

@media screen and (max-width: 380px) {

    .h2-border {
        font-size: 2.0rem;
        padding: 5px 10px;
    }
    .frame .text p {
        font-size: 1.4rem;
        line-height: 160%;
        font-weight: normal;
    }

    .map {
        height:400px;
    }
}