@charset "utf-8";
#area_searcharea {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items: stretch;
}

#area_searcharea > .flex-item {
    margin: 1rem 0;
    width: 100%;
    height: 100%;
    text-align: center;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-flex-pack: center;
    -moz-flex-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    padding: 6rem 0;

    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
}
.flex-item.img_hokkaidou-touhoku {
    background-image: url("./assets/images/area_hokkaidou-touhoku.jpg");
}
.flex-item.img_chuubu {
    background-image: url("./assets/images/area_chuubu.jpg");
}
.flex-item.img_kantou {
    background-image: url("./assets/images/area_kantou.jpg");
}
.flex-item.img_kinki {
    background-image: url("./assets/images/area_kinki.jpg");
}
.flex-item.img_chuugoku-shikoku {
    background-image: url("./assets/images/area_chuugoku-shikoku.jpg");
}
.flex-item.img_kyuushuu-okinawa {
    background-image: url("./assets/images/area_kyuushuu-okinawa.jpg");
}

#area_searcharea .flex-item .area_name {
    z-index: 10;
    position: absolute;
    display: block;
    top: auto;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
#area_searcharea .flex-item:hover .area_name {
    display: none;
}

#area_searcharea .flex-item:after {
    z-index: 1;
    position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 205, 89, 0.5);
}

#area_searcharea .flex-item:hover:after {
    background: rgba(0, 0, 0, 0.5);
}

#area_searcharea > .flex-item .posi-abs {
    z-index: 11;
    display: none;
    top: auto;
    right: 0;
    bottom: auto;
    left: 0;
    color: #fff;
}
#area_searcharea > .flex-item:hover .area_hover {
    display: block;
}

#area_searcharea > .flex-item .disp-ib li {
    margin: 0.25rem 0.5rem;
}
/* ================================================================ */
#front_image {
    display: block;
    width: 100%;
    height: 20vh;
    background-image: url("../images/img_frontpage.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
}

/* ===================================================================
media screen
=================================================================== */
@media screen and (min-width: 375px) and (max-width: 639px) {
}

/* スマホ */
@media screen and (max-width: 639px) {
    #img-top {
        background-position: center left;
        background-size: auto 110%;
        height: 180px;
    }
}

/* タブレット1 */
@media screen and (min-width: 640px) {
    #img-top {
        background-size: 100% auto;
    }
}

/* タブレット1 */
@media screen and (min-width: 640px) and (max-width: 799px) {
    #img-top {
        height: 200px;
    }
}

/* タブレット2以下 */
@media screen and (max-width: 799px) {
}

/* タブレット2以上 */
@media screen and (min-width: 800px) {
    #front_image {
        height: 40vh;
    }
}

/* ipad */
@media screen and (min-width: 800px) and (max-width: 1023px) {
    #img-top {
        height: 250px;
    }
    #area_searcharea > .flex-item {
        width: 49%;
    }
}

/* ipad以下 */
@media screen and (max-width: 1023px) {
    #area_office .office_outline + .office_outline {
        margin-top: 3rem;
    }
}

/* PC */
@media screen and (min-width: 1024px) {
    #img-top {
        height: 350px;
    }
    #area_searcharea > .flex-item {
        width: 30%;
    }

    #area_office .office_outline {
        width: 30%;
    }
    #area_office .office_outline .office_img {
        height: 300px;
    }
}