@charset "UTF-8";

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

    /***top_main***/
    .top_main {
        width: 100%;
        background: #B4EEFF;
        background-image: url(/img/top/fv_bg.webp);
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: contain;
    }

    .top_main_wrap {
        margin: 0 3%;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .top_main_conts h1 {
        margin: 0 5%;
        margin-bottom: 20px;
    }

    .top_main_slide {
        margin: 0 5%;
        margin-bottom: 40px;
    }

    .top_main_inquiry {
        margin: 0 5%;
    }

    .top_main_inquiry a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 50px;
        font-weight: bold;
        color: #fff;
        background: #CC2515;
        border-radius: 5px;
    }


    /***top_conts_flex***/
    .top_conts_flex {
        padding-top: 60px;
    }

    .top_conts_flex .conts_main {
        margin-bottom: 0;
    }

    /***top_news***/
    .top_news {
        margin: 0 3%;
        margin-bottom: 40px;
    }

    .top_news ul.slider_top_news {
        width: 100%;
        background: #f5f5f5;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px 5%;
    }

    .top_news li a {
        display: block;
        color: #111;
        padding: 10px 0;
    }

    .top_news_date {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .top_news_date p {
        color: #888;
        font-size: 14px;
        display: block;
        margin-right: 10px;
    }

    .top_news_category {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 28px;
        white-space: nowrap;
        overflow: hidden;
    }

    .top_news_category li {
        display: block;
        font-size: 13px;
        line-height: 28px;
        background: #D6EFFF;
        border-radius: 14px;
        margin-right: 5px;
        padding: 0 15px;
    }

    .top_news_ttl {
        font-weight: normal;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-decoration: underline;
        height: 44px;
    }

    /***top_media***/
    .top_media {
        margin: 0 3%;
    }

    .top_media_box {
        margin-bottom: 40px;
    }

    .top_media_box h2 {
        display: flex;
        align-items: center;
        padding-bottom: 5px;
        margin-bottom: 20px;
        font-size: 20px;
        line-height: 30px;
        padding-left: 10px;
    }

    .top_media_box h2 i {
        margin-right: 5px;
        font-size: 17px;
    }

    /*top_media_overview共通*/
    .top_media_overview {
        margin-bottom: 25px;
    }

    .top_media_map {
        background-repeat: no-repeat;
        background-size: 100%;
        margin-bottom: 10px;
    }

    .top_media_map p {
        font-size: 12px;
        line-height: 20px;
        display: block;
        margin-top: -5px;
        color: #888;
    }

    .top_media_txt p {
        display: block;
        margin-bottom: 20px;
    }

    .top_media_txt ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .top_media_txt li {
        width: 49%;
    }

    .top_media_txt li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        line-height: 50px;
        font-weight: bold;
        background: #f0f0f0;
        border-radius: 5px;
        padding: 0 10%;
    }


    /*top_media_overviewそれぞれ*/
    .top_media_inside .top_media_map {
        background-image: url(/img/top/ad_inside.webp);
    }

    .top_media_outside .top_media_map {
        background-image: url(/img/top/ad_outside.webp);
    }

    .top_media_busstop .top_media_map {
        background-image: url(/img/top/ad_busstop.webp);
    }

    /*top_media_overview map hover*/
    .top_media_inside .cls-1,
    .top_media_inside .cls-2,
    .top_media_inside .cls-3,
    .top_media_inside .cls-5 {
        fill: #fb0;
        stroke: #111;
    }

    .top_media_inside .cls-4 {
        stroke: #fb0;
        fill: none;
    }

    .top_media_inside .cls-5 {
        fill: #fff;
    }

    .top_media_outside .cls-1,
    .top_media_outside .cls-2,
    .top_media_outside .cls-3,
    .top_media_outside .cls-4,
    .top_media_outside .cls-5,
    .top_media_outside .cls-6 {
        stroke: #111;
        fill: #2296DE;
    }

    .top_media_outside .cls-2 {
        fill: none;
    }

    .top_media_busstop .cls-1 {
        fill: #EB6457;
        stroke: #111;
    }

    /*top_media_overview link arrow*/
    .top_media_inside .top_media_txt li a i {
        color: #FFBB00;
    }

    .top_media_outside .top_media_txt li a i {
        color: #2296DE;
    }

    .top_media_busstop .top_media_txt li a i {
        color: #EB6457;
    }


    .top_media_img {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .top_media_img img {
        width: 32%;
    }

    /***top_case***/
    .top_case {
        width: 100%;
        background: #FFF7E3;
        padding-top: 25px;
        padding-bottom: 40px;
    }

    .top_case_wrap {
        margin: 0 3%;
    }

    .top_case_ttl {
        display: block;
        text-align: center;
        height: 50px;
        margin-bottom: 20px;
    }

    .top_case_ttl img {
        height: 50px;
    }

    .top_case_box {}

    .top_case_box>ul {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .top_case_box>ul li {
        width: 49%;
        margin-bottom: 10px;
    }

    .top_case_box>ul li a {
        display: block;
        border: 3px solid #f0f0f0;
        border-radius: 10px;
        background: #fff;
        padding: 10px 5%;
        box-sizing: border-box;
    }

    .top_case_box>ul li a h3 {
        padding-top: 8px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 22px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .top_case_box>ul li a img {
        height: 100px;
        object-fit: cover;
        font-family: 'object-fit: cover';
        object-position: center;
    }

    .top_case_box_tag {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 62px;
        overflow: hidden;
    }

    .top_case_box_tag span {
        font-size: 12px;
        line-height: 26px;
        background: #D6EFFF;
        border-radius: 15px;
        padding: 0 10px;
        display: block;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .top_case_box_tag span:last-child {
        margin-right: 0;
    }

    .top_case_btn {
        width: 80%;
        height: 50px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .top_case_btn a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        line-height: 50px;
        background: #FFBB00;
        font-weight: bold;
        border-radius: 5px;
    }

    /*sp tag list in top_case*/
    .case_tag_list {
        border: 4px solid #FFBB00;
        border-radius: 10px;
        padding: 15px 5%;
        background: #fff;
        margin-top: 50px;
    }

    .case_tag_list h3 {
        font-size: 16px;
        display: flex;
        align-items: center;
        padding-bottom: 5px;
        margin-bottom: 20px;
        line-height: 24px;
        padding-left: 10px;
    }

    .case_tag_list h3 i {
        margin-right: 5px;
        width: 17px;
    }

    .case_tag_list ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .case_tag_list ul li {
        margin-right: 5px;
        margin-bottom: 7px;
    }

    .case_tag_list ul a {
        display: block;
        font-size: 14px;
        line-height: 35px;
        border-radius: 20px;
        background: #f0f0f0;
        color: #111;
        padding: 0 15px;
    }

}