@charset "UTF-8";

@media screen and (max-width: 767px) {
    .sp_off {
        display: none !important;
    }

    body {
        font-size: 14px;
        line-height: 22px;
        min-width: initial;
    }


    /*****header*****/
    header {
        width: 100%;
        background: #fff;
        height: 60px;
        position: relative;
        border-bottom: 1px solid #ccc;
        z-index: 999;
        position: relative;
    }

    .h_logo {
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: 3%;
    }

    .h_logo a {
        display: block;
        padding: 10px 0;
        height: 60px;
        box-sizing: border-box;
    }

    .h_logo a img {
        height: 40px;
    }

    /**ハンバーガーメニュー**/
    .menu-btn {
        position: fixed;
        top: 0;
        right: 0;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #888;
        position: absolute;
        transition: all 0.5s;
    }

    .menu-btn span:before {
        bottom: 8px;
    }

    .menu-btn span:after {
        top: 8px;
    }

    #menu-btn-check:checked~.menu-btn span {
        background-color: transparent;
        /*メニューオープン時は真ん中の線を透明にする*/
        transform: rotate(180deg);
    }

    #menu-btn-check:checked~.menu-btn span::before {
        bottom: 0;
        transform: rotate(225deg);
    }

    #menu-btn-check:checked~.menu-btn span::after {
        top: 0;
        transform: rotate(135deg);
    }

    #menu-btn-check {
        display: none;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        /*メニューを画面外へ*/
        z-index: 80;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition: all 0.5s;
        /*アニメーション設定*/
    }

    .menu-content ul {
        margin: 70px 8% 40px;
        padding-bottom: 30px;
        border-bottom: 1px solid #ccc;
    }

    .menu-content ul li a {
        width: 100%;
        font-size: 16px;
        line-height: 50px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .menu-content ul li a::before {
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        font-weight: 900;
        color: #2296DE;
        margin-right: 10px;
    }

    .menu-content ul li.h_link_in {
        margin-left: 30px;
    }

    #menu-btn-check:checked~.menu-content {
        left: 0;
        /*メニューを画面内へ*/
    }

    .h_inq_btn {
        margin: 0 8%;
        height: 60px;
    }

    .h_inq_btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        background: #CC2515;
        color: #FFF;
        font-size: 16px;
        border-radius: 5px;
        font-weight: bold;
    }

    .h_inq_btn i {
        margin-right: 10px;
    }



    /***ページ共通***/
    /***conts_ttl***/
    .conts_ttl {
        width: 100%;
        padding-top: 15px;
        padding-bottom: 60px;
        background: #f0f0f0;
    }

    .bg_yellow {
        background: #FFF7E3;
    }

    .bg_blue {
        background: #ECFAFF;
    }

    .bg_red {
        background: #FFE4E0;
    }

    .conts_ttl_wrap {
        margin: 0 3%;
    }

    .conts_ttl_txt h2 {
        font-size: 25px;
        line-height: 30px;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }

    .conts_ttl_txt p {
        display: block;
        font-size: 12px;
        line-height: 20px;
    }

    .conts_ttl_img img {
        display: block;
        margin: 0 0 0 auto;
        margin-top: 20px;
        width: 45%;
    }

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

    .conts_ttl_txt li {
        margin-right: 3px;
        margin-bottom: 5px;
    }

    .conts_ttl_txt li a {
        display: block;
        font-size: 12px;
        line-height: 26px;
        border-radius: 15px;
        background: #2296DE;
        color: #fff;
        padding: 0 10px;
    }




    /***サイドバー開始位置のレイアウト***/
    .conts_flex {
        margin-top: -30px;
    }

    .conts_main {
        margin-bottom: 50px;
    }




    /***footer***/
    footer {
        width: 100%;
        background-image: url(/img/common/footer_bg_img.png);
        background-position: bottom left;
        background-size: 767px;
        background-repeat: no-repeat;
        border-bottom: 15px solid #C3EFFF;
    }

    .f_wrap {
        margin: 0 3%;
        padding-top: 30px;
        padding-bottom: 70px;
    }

    .f_link_main {
        border-bottom: 1px solid #ccc;
        margin-top: 15px;
        padding-bottom: 16px;
    }

    .f_link_main a {
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .f_link_main a i {
        color: #2296DE;
        margin-right: 7px;
        font-size: 13px;
    }

    /*アコーディオン*/
    .f_ac .f_ac_box .f_ac_head {
        color: #111;
        font-weight: bold;
        padding: 10px 3%;
        position: relative;
        z-index: 1;
        cursor: pointer;
        transition-duration: 0.2s;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .f_ac .f_ac_box .f_ac_head i {
        display: block;
        color: #2296DE;
        transition: all 0.3s;
    }

    .f_ac .f_ac_box .f_ac_head.open i {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        transition: all 0.3s;
    }

    .f_ac .f_ac_box .f_ac_inner {
        display: none;
        padding: 0 3%;
        box-sizing: border-box;
    }

    .f_ac .f_ac_box .f_ac_inner .box_one {
        height: auto;
        padding-bottom: 15px;
    }

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

    .f_ac_inner ul li {
        width: 50%;
    }

    .f_ac_inner ul li a {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 5px 0;
    }

    .f_ac_inner ul li a::before {
        content: "-";
        color: #2296DE;
        margin-right: 5px;
    }

    /*アコーディオンここまで*/

    .f_logo {
        margin: 0 auto;
        width: 70%;
        margin-top: 50px;
    }

    .f_logo a {
        display: block;
        text-align: center;
    }

    .f_logo a img {
        height: 50px;
    }

    .f_logo small {
        font-size: 10px;
        color: #888;
        display: block;
        text-align: center;
    }

    /***inc_inquiry***/
    .inc_inquiry {
        width: 100%;
        background: #FFE4E0;
        padding: 20px 0;
    }

    .inc_inquiry_ttl {
        margin: 0 5%;
        margin-bottom: 25px;
    }

    .inc_inquiry_ttl h2 {
        font-weight: normal;
        text-align: center;
        display: block;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .inc_inquiry_ttl_img {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .inc_inquiry_box {
        background: #fff;
        border-radius: 10px;
        margin: 0 5%;
        padding: 20px 5%;
    }

    .inc_inquiry_span {
        display: block;
        color: #888;
        font-size: 14px;
        line-height: 20px;
        font-weight: bold;
        margin-bottom: 5px;
        text-align: center;
    }

    .inc_inquiry_tel {
        border-bottom: 1px solid #ccc;
        padding-bottom: 17px;
        margin-bottom: 20px;
    }

    .inc_inquiry_number {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        font-size: 35px;
        line-height: 35px;
        font-weight: bold;
    }

    .inc_inquiry_number a {
        color: #888;
    }

    .inc_inquiry_number i {
        margin-right: 8px;
    }

    .inc_inquiry_tel span {
        text-align: center;
        font-size: 12px;
        line-height: 17px;
        color: #888;
        display: block;
    }

    .inc_inquiry_form {
        height: 60px;
    }

    .inc_inquiry_form a {
        background: #CC2515;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        height: 100%;
        border-radius: 5px;
        font-size: 18px;
    }

    .inc_inquiry_form a i {
        margin-right: 10px;
    }


    /***inc_contents***/
    .inc_contents {
        width: 100%;
        background: #ECFAFF;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .inc_contents_wrap {
        margin: 0 3%;
    }

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

    .inc_contents_ttl img {
        height: 50px;
    }

    .inc_contents_box li a {
        display: block;
        border: 5px solid #f0f0f0;
        border-radius: 10px;
        background: #fff;
        width: 260px;
        height: 300px;
        padding: 25px 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .inc_contents_box li a h3 {
        text-align: center;
        font-size: 16px;
        line-height: 27px;
        display: block;
        margin-bottom: 15px;
    }

    .inc_contents_box li a img {
        width: 170px;
        display: block;
        margin: 0 auto;
        margin-bottom: 18px;
    }

    .inc_contents_box li a p {
        font-size: 14px;
        line-height: 22px;
        display: block;
    }

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

    .inc_contents_btn a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        line-height: 50px;
        background: #2296DE;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
    }

    /*slick*/
    .slick-dots li {
        margin: 0 !important;
    }


    /***conts_inquiry***/
    .conts_inquiry {
        width: 100%;
        background: #FFE4E0;
        padding: 20px 0;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .conts_inquiry_ttl {
        margin-bottom: 15px;
    }

    .conts_inquiry_fukidashi {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .conts_inquiry_fukidashi span {
        position: relative;
        display: inline-block;
        margin: 0 3px;
        margin-bottom: 10px;
        width: 60px;
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        border-radius: 15px;
        text-align: center;
        background: #CC2515;
    }

    .conts_inquiry_fukidashi span::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border: 6px solid transparent;
        border-top: 6px solid #CC2515;
    }

    .conts_inquiry_ttl h3 {
        font-size: 18px;
        line-height: 27px;
        font-weight: bold;
        text-align: center;
    }

    .conts_inquiry_box {
        background: #fff;
        border-radius: 10px;
        margin: 0 5%;
        padding: 20px 5%;
    }

    .conts_inquiry_number i {
        margin-right: 6px;
    }





    /***色わけ:TOP、バス広告一覧のother***/
    .flag_yellow {
        border-bottom: 2px solid #FFBB00;
    }

    .flag_yellow i {
        color: #FFBB00;
    }

    .flag_blue {
        border-bottom: 2px solid #2296DE;
    }

    .flag_blue i {
        color: #2296DE;
    }

    .flag_red {
        border-bottom: 2px solid #EB6457;
    }

    .flag_red i {
        color: #EB6457;
    }




    /***form_error_2404***/
    .form_error_2404 {
        margin-top: 30px;
    }

    .form_error_2404 p {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
    }

    .form_error_2404 a {
        display: block;
        text-align: center;
        border-radius: 5px;
        line-height: 40px;
        font-weight: bold;
        color: #fff;
        background: #2296DE;
        margin: 0 auto;
    }

}