/*
section,div{
    max-width:1440px;
    
}
*/

#hbbp_navi {
    display: block;
    padding-top: 114px;
margin-top: -114px;}

#icbp,
#difference_navi,
#plan_navi
{
    display: block;
    padding-top: 125px;
margin-top: -125px;}


#main {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 1440px;
}

.img-responsive_pc,
.img-responsive_buspc {
    width: 100%;

}

.img-responsive_sp {
    display: none;
}

#bus_idou {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    max-width: 1440px;
}


#bus_idou h3 {
    color: #fff;
    font-size: 3.5rem;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

#bus_idou h3 span {
    color: yellow;
    font-size: 4rem;
}

#traveler {
    max-width: 1440px;
}

#traveler .col-md-4 {
    padding-left: 0px;
    padding-right: 0px;
}

#bus_pass {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    max-width: 1440px;
    margin-top: 50px;
}

#bus_pass h2 {
    color: #fff;
    font-size: 3.5rem;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.type2 {
    color: yellow;
    font-size: 4rem;
}

.red {
    max-width: 1440px;
}

#hbbp {
    background: linear-gradient(75deg, #e41f2e, #fba303) !important;
    margin-top: 20px;
}

#hbbp h3 {
    color: #fff;
    font-weight: bold;
    padding-left: 20px;
    font-size: 3rem;
}

.row h4 {
    font-size: 3rem;
    font-weight: bold;
    /*    margin-bottom: 20px;*/
}

.bg-warning {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
}

.btn {
    font-size: 2rem;
    font-weight: bold;
}

.mente {
    font-size: 1.5rem;
}

.hbbp_p,
.icbp_p {
    font-size: 1.9rem;
    padding: 10px;
    border: solid 3px #9E9E9E;
    border-radius: 10px;
}

#icbp h3 {
    background: linear-gradient(75deg, #1563a3, #009746) !important;
    color: #fff;
    font-weight: bold;
    padding-left: 20px;
    font-size: 3rem;
}


.td_hbbp {
    width: 50%;
    margin-top: 20px;
    padding: 0px;
}

#type_dif {
    max-width: 1440px;
    padding: 0px;
    margin-top: 50px;

}

#type_dif h2 {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    color: #fff;
    font-size: 3.5rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.h3hbbp {
    background: linear-gradient(75deg, #e41f2e, #fba303) !important;
    margin-top: 20px;
    padding: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding-left: 20px;
    font-size: 3rem;
}

.hbbp_pass {
    padding: 0px;

}

.h3icbp {
    background: linear-gradient(75deg, #1563a3, #009746) !important;
    margin-top: 20px;
    padding: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding-left: 20px;
    font-size: 3rem;
}

.area_hbbp {
    background: #e53218;

    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
   /*  width: 50%; */
    width: 100%;
    margin: 10px auto 10px auto;
    border-radius: 30px;
    line-height:3;
}

.area_icbp {
    background: #0076bf;

    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    /* width: 50%; */
    width: 100%;
    margin: 10px auto 10px auto;
    border-radius: 30px;
    line-height:1.5;
}

.price {
    font-size: 3rem;
    text-align: center
}

.pass3day,
.pass5day {
    font-size: 2.5rem;
    border: 1px;
    text-align: center;
}

.c_point {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 5px #c79f62;
    /*線*/
    border-radius: 10px;
    /*角の丸み*/
}

.c_point img {
    float: left;
    width: 100px;
    padding: 10px;

}

.p_point:before {
    position: absolute;
    left: 0;
    content: "";
    display: inline-block;
    width: 2em;
    height: 2em;
    background: url(../img/hbbp/buspass/attention.png) no-repeat;
    background-size: contain;
}

.p_point {
    position: relative;
    line-height: 2em;
    padding-left: 3em;
    font-size: 3rem;
    text-decoration: underline;
    color: red;
}

.p_point1 {
    font-size: 2.5rem;
    font-weight: bold;
}

.p_point1 span {
    text-decoration: underline;
    color: red;
}

.bgimg_bleu {
    border-bottom: inset 5px #0267b2;
}

/* １枚のパスで３種類のバスが乗れる　PC
============================================================================================================ */

#bus_type {
    max-width: 1440px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}

.bus_type3 {
    margin-left: 15px;
    margin-right: 15px;
}

#bus_type h2,
#type_diff {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    color: #fff;

    font-size: 3.5rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}



.apb {
    background: linear-gradient(75deg, #00a0e8, #0f2d8a) !important;

    color: #fff;

    font-weight: bold;
    padding-left: 20px;
    font-size: 3.2rem;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.apb img {
    width: 98%;
    margin: auto;
}

.btn-details {

    font-size: 2rem;
    font-weight: bold;
    background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
    background-repeat: repeat-x;
    border-color: #e38d13;
    color: #ffffff;
    background-color: #f0ad4e;
}

.btn-details:hover,
.btn-details:focus {
    background-color: #eb9316;
    background-position: 0 -15px;
    color: #ffffff;
    border-color: #d58512;
}

.route {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 30px;
    width: 50%;
    background: #ffeb3b26;
    float: right;
    border: solid 7px #CDDC39;
}

.bus_route_1 {
    text-align: left;
    padding-left: 10%;

}

.bus_route_2 {
    text-align: left;
    padding-left: 9%;

}



.none {
    list-style: none;
    font-size: 22px;

}

.taiou {
    text-align: center;

    font-weight: bold;
    font-size: 1.9rem;
    color: #fff;
    margin: 0px;
    font-size: 22px;
    color: #333;
}

.titel {
    text-align: center;
    font-size: 2.5rem;
    color: #333;

    margin-bottom: 0px;
    font-weight: bold;
}

.route ul,
.route2 ul,
.route3 ul {

    font-weight: bold;
    color: #333;
    padding-left: 0px;
    margin-bottom: 10px;
}

.route ul {
    font-size: 1.9rem;
}

.route2 ul {
    font-size: 1.9rem;
}

.route3 ul {
    font-size: 1.9rem;
}

.airport {

    padding-left: 0px;

}

.toshi {
    padding-left: 0px;

    height: 406px;

}

.toshi img {
    padding: 20px 0 20px 0;
}

.toshikousoku {
    background: linear-gradient(75deg, #e5007e, #c40c26) !important;
    color: #fff;

    font-weight: bold;
    padding-left: 20px;
    font-size: 3.2rem;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.route2 {
    background: #ffeb3b26;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 30px;
    width: 50%;
    border: solid 7px #CDDC39;
    float: right;
}

.route2 ul {
    padding-left: 0px;
}

.rosen {
    padding-left: 0px;
}

.rosenbus {
    background: linear-gradient(75deg, #8ec220, #09923a) !important;
    color: #fff;

    font-weight: bold;
    padding-left: 20px;
    font-size: 3.2rem;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;

}

.route3 {
    background: #ffeb3b26;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 30px;
    width: 50%;
    border: solid 7px #CDDC39;
    float: right;

    margin-top: 60px;
}

/*乗り放題パスで、more activeに北海道旅行しよう！ PC
============================================================================================================*/

#more {
    max-width: 1440px;
    margin-top: 50px;
}

#more h2 {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    color: #fff;

    font-size: 3.5rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#more h2 span {
    text-decoration: underline;

}

#more .col-md-4 {
    padding-left: 0px;
    padding-right: 0px;
}

.caption{
    text-align: center;
}

/*  「北海道バス乗り放題パス×悠悠北海道」はこんなに凄い！ PC
============================================================================================================*/

#plan h2 {
    background: linear-gradient(75deg, #00a0e9, #00BCD4) !important;
    color: #fff;

    font-size: 3.5rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#plan h3 {
    text-align: center;
    font-size: 4rem;
    color: #019944;

}

.pass_3day {
    text-align: center;
    font-size: 3.5rem;
    color: #e4007f;
    font-weight: bold;
}

.bussplan3 {
    padding: 20px;
    font-size: 2rem;
    border-radius: 30px;
    border: solid 3px #9E9E9E;
    margin: 0 30px 0 30px;
}

.day1 {
    margin: auto;

}

.day1_sp {
    display: none;
}

.plan1day {
    margin: 30px 20px;
    text-align: center;
    background: #efaecc;
    padding: 10px;
    font-size: 4rem;
    border-radius: 30px;
}

.plan2day {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
    text-align: center;
    background: #efaecc;
    padding: 10px;
    font-size: 4rem;
    border-radius: 30px;
}

.plan3day {
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    background: #efaecc;
    padding: 10px;
    font-size: 4rem;
    border-radius: 30px;
}

.plan23day_sp {
    display: none;
}

.day2,
.day3 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.otokupass1 {
    margin-top: 30px;
    margin-bottom: 30px;

}

.otokupass2 {
    margin: auto;
    text-align: center;
    background: #d0ecfa;
    padding: 10px;
    font-size: 4rem;
    border-radius: 30px;
    width: 70%;
}

.wrap {
    display: table;
}

.box {
    display: table-cell;
}

.total {
    text-align: center;
    font-weight: bold;
    font-size: 2.5rem;
}

.kakaku3day {
    color: #E91E63;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.total img {
    width: 80%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.otoku1 {
    font-size: 2rem;
}

.ouen {
    font-size: 2.6rem;
    font-weight: bold;
}

.free {
    color: #E91E63;
}

.koryaku {
    color: #4CAF50;
}

.spxix {
    color: #03A9F4;
}

.uu {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
}

.uu img {
    width: 18%;
    height: 18%;
    margin-left: 10px;
    margin-right: 10px;
}

.myself {
    display: flex;
}

.myself1 {
    font-weight: bold;
    margin: auto;
    text-align: center;
    background: #ffeb3b;
    font-size: 3rem;
    border-radius: 30px;
    width: 90%;
}

.myself img {
    height: 5%;
    width: 5%;
}

.passname {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.btn-click {
    background-image: -webkit-linear-gradient(top, #2196F3 0%, #03A9F4 100%);
    background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2196F3), to(#03A9F4));
    background-image: linear-gradient(to bottom, #2196F3 0%, #03A9F4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #2196F3;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #ffffff;
    background-color: #2196F3;
    border-color: #2196F3;
}

hover {
    background-color: #2196F3;
    background-position: 0 -15px;
    color: #ffffff !important;
    background-color: #2196F3;
    border-color: #2196F3;
    text-decoration: none;
}

.click1 {
    margin-top: 10px;
}


/*悠悠北海道のオススメ「バス会社７社」紹介！ PC
============================================================================================================*/


.img-responsive_bussp {
    display: none;
}

#bus_company {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    max-width: 1440px;

    font-weight: bold;
    margin-top: 50px;
}

#bus_company h2 {
    background: linear-gradient(75deg, #60B630, #3EA7CE) !important;
    color: #fff;

    font-size: 3.5rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.contents {

    background-image: url(../img/hbbp/buspass/h.jpg);
    background-size: auto;
    background-position: center;
}

.bus_co {
    padding-top: 20px;
}

.bus_co img {
    width: 70%;
    margin: auto;
}

.chuobus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 1em 0;
    color: #fff;
    background: #D92E38;
    border-radius: 30px;
}

.hakodatebus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 1em 0;
    color: #FFF;
    background: #595757;
    border-radius: 30px;
}

.tokachibus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 1em 0;
    color: #333;
    background: #FFF100;
    border-radius: 30px;
}

.akanbus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 1em 0;
    color: #FFF;
    background: #EB612F;
    border-radius: 30px;
}

.type {
    color: #333;
    font-weight: bold;

    font-size: 1.4rem;
    text-align: start;
    background: #ffffff9c;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;

}

.bus_co2 img {
    margin: auto;
}

.nemurokotsu {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: auto;
    color: #FFF;
    background: #8bc34a;
    border-radius: 30px;
    width: 75%;
}

.sharibus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: auto;
    color: #FFF;
    background: #d05188;
    border-radius: 30px;
    width: 75%;
}

.abashiribus {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin: auto;
    color: #FFF;
    background: #c42a30;
    border-radius: 30px;
    width: 75%;
}

.bus_co3 {
    text-align: center;
}

.bus_co3 img {
    width: 50%;

}

.type_u {
    color: #333;
    font-weight: bold;

    font-size: 1.2rem;
    text-align: start;
    margin: auto;
    margin: auto;
    width: 85%;
    background: #ffffff9c;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;

}

.bus_co3_abasiri {
    text-align: center;
}

.bus_co3_abasiri img {
    width: 50%;
}

.btn-details_busco {

    font-size: 1.4rem;
    font-weight: bold;
    background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
    background-repeat: repeat-x;
    border-color: #e38d13;
    color: #ffffff;
    background-color: #f0ad4e;
}

.none2 {
    list-style: none;
}

#plan {
    max-width: 1440px;
    margin-top: 50px;
    padding-left: 0px;
    padding-right: 0px;
}

/* 中型PC　
============================================================================================================ */
@media screen and (min-width:1263px) and (max-width:1406px) {

    .route ul,
    .route2 ul,
    .route3 ul {
        font-size: 1.6rem;
    }

    .none,
    .taiou {
        font-size: 18px;
    }
}

/* 小型PC　 13インチ
============================================================================================================ */
@media screen and (min-width:1116px) and (max-width:1262px) {
#hbbp_navi {
    display: block;
    padding-top: 200px;
margin-top: -200px;}

#icbp,
#difference_navi,
#plan_navi
{
    display: block;
    padding-top: 225px;
margin-top: -225px;}

    .none,
    .taiou {
        font-size: 17px;
    }

    .pass3day,
    .pass5day {
    font-size: 2.2rem;
    border: 1px;
    text-align: center;
    }

    .area_icbp,
    .area_hbbp {
        font-size: 2.5rem;
    }

    .text {
        display: inline-block;
    }

    .type,
    .type_u {
        font-size: 1.2rem;
    }

    .mente {
    font-size: 1.2rem;
    text-align: left;
    }

    .route ul {
        font-size: 1.7rem;
    }

    .route2 ul {
        font-size: 1.6rem;
    }

    .route3 ul {
        font-size: 1.6rem;
    }

    .bus_route_toshi {
        padding-left: 0px;
        padding-right: 0px;
    }

    .bus_route_2 {
        padding-left: 5%;
    }

    .p_point1 {
        font-size: 2rem;
    }

    .p_point {
        font-size: 2.7rem;
    }

    .container {
        width: auto;
    }

    .total img {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .uu {
        margin-top: 0px;
        margin-bottom: 10px;
    }

    .uu img {
        width: 15%;

    }

    .passname {
        font-size: 1.7rem;
    }

    .ouen {
        font-size: 2.5rem;

    }

    .otokupass2,
    .plan1day,
    .plan2day,
    .plan3day {
        font-size: 3rem;
    }

}

/* mini型PC　
============================================================================================================ */
@media screen and (min-width:1026px) and (max-width:1115px) {

    .route ul,
    .route2 ul,
    .route3 ul {
        font-size: 1.2rem;
    }

    .none,
    .taiou {
        font-size: 16px;
    }

    .pass3day,
    .pass5day {
        font-size: 2rem;
        border: 1px;
        text-align: center;
    }

    .area_icbp,
    .area_hbbp {
        font-size: 2.5rem;
    }

    .text {
        display: inline-block;
    }
}

/* タブレットipad pro
============================================================================================================ */
@media screen and (min-width:769px) and (max-width:1025px) {
    
      #hbbp_navi {
    display: block;
    padding-top: 300px;
margin-top: -300px;}

#icbp,
#difference_navi,
#plan_navi
{
    display: block;
    padding-top: 325px;
margin-top: -325px;}
    
    .img-responsive_pc {
        width: 100%;

    }

    .route,
    .route2,
    .route3 {
        width: 100%;
    }

    .bus_route ul {
        font-size: 2.3rem;
    }

    #bus_idou h3 {
        font-size: 2rem;
    }

    #more h2 {
        font-size: 3rem;
    }

    .img-responsive_buspc {
        width: 100%;

    }

    .contents {
        background-size: cover;
    }

    .airport img,
    .toshi img,
    .rosen img {
        margin: auto;
    }

    .route,
    .route2,
    .route3 {
        margin: auto;
    }

    .bg-warning {
        font-size: 2.1rem;
    }

    .akan {
        height: 620px;
    }

    .bus_co3_abasiri {

        width: 33.3%;
        text-align: center;
    }

    .bus_co3_abasiri img {
        width: 50%;
    }

    .area_hbbp,
    .area_icbp {
        width: 100%;
    }

    .pass3day,
    .pass5day {
        border: 1px;
        font-size: 1.7rem;
        text-align: center;
    }

    .p_point1 {
        font-size: 1.8rem;
    }

    .h3hbbp,
    .h3icbp {
        font-size: 2.7rem;
    }

    .td_hbbp {
        padding-left: 5px;
        padding-right: 5px;
    }

    .airport,
    .toshi,
    .rosen {
        width: 100%;
    }

    .mente {
        font-size: 1.5rem;
        text-align: center;
    }

    .text {
        display: inline-block;
    }

    .total {
        font-size: 2.1rem;
    }

    .ouen {
        font-size: 2.3rem;
    }

    .uu {

        margin-top: 0px;
        margin-bottom: 0px;
    }

    .myself1 {
        font-size: 2.5rem;
    }

    #plan {
        max-width: 1440px;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin: auto;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .otokupass2 {
        font-size: 3rem;
    }

    .otoku1 {
        font-size: 1.9rem;
    }

    .btn-click {
        font-size: 13px !important;
    }

    .mente {
        font-size: 1.2rem;
    }

}


/* タブレットipad
============================================================================================================ */
@media screen and (min-width:600px) and (max-width:768px) {

     #hbbp_navi {
    display: block;
    padding-top: 300px;
margin-top: -300px;}

#icbp,
#difference_navi,
#plan_navi
{
    display: block;
    padding-top: 325px;
margin-top: -325px;}
    
    .img-responsive_pc {
        width: 100%;

    }

    .route,
    .route2,
    .route3 {
        width: 100%;
    }

    .bus_route ul {
        font-size: 2.3rem;
    }

    #bus_idou h3 {
        font-size: 2rem;
    }

    #more h2 {
        font-size: 3rem;
    }

    .img-responsive_buspc {
        width: 100%;

    }

    .contents {
        background-size: cover;
    }

    .airport img,
    .toshi img,
    .rosen img {
        margin: auto;
    }

    .route,
    .route2,
    .route3 {
        margin: auto;
    }

    .bg-warning {
        font-size: 2.1rem;
    }

    .akan {
        height: auto;
    }

    .bus_co3_abasiri {

        width: 50%;
        text-align: center;
    }

    .bus_co3_abasiri img {
        width: 50%;
    }

    .area_hbbp,
    .area_icbp {
        width: 100%;
    }

    .pass3day,
    .pass5day {
        border: 1px;
        font-size: 1.7rem;
        text-align: center;
    }

    .p_point1 {
        font-size: 1.8rem;
    }

    .h3hbbp,
    .h3icbp {
        font-size: 2.7rem;
    }

    .td_hbbp {
        padding-left: 5px;
        padding-right: 5px;
    }

    .airport,
    .toshi,
    .rosen {
        width: 100%;
    }

    .mente {
        font-size: 1.5rem;
        text-align: center;
    }

    .text {
        display: inline-block;
    }

    .total {
        font-size: 1.6rem;
    }

    .ouen {
        font-size: 1.5rem;
    }

    .otoku1 {
        font-size: 1.3rem;
    }

    .uu {

        margin-top: 0px;
        margin-bottom: 0px;
    }

    .myself1 {
        font-size: 2rem;
    }

    .pass_3day {
    font-size: 2.2rem;
    text-align: center;
    }

    .row h4 {
        font-size: 2.4rem;
    }

    .btn-click {
        font-size: 1.5rem;
    }

    #plan h2 {
        font-size: 2.7rem;
    }

    .otokupass2 {
        font-size: 2.3rem;
    }

    .plan1day,
    .plan2day,
    .plan3day {
        font-size: 3rem;
    }

    .bussplan3 {
        font-size: 1.5rem;
    }

    .btn-click {
        font-size: 11px !important;
    }

    .passname {
        font-size: 1.5rem;
    }

    .uu {
        margin-bottom: 20px;
    }
}



/* スマホ
============================================================================================================ */
@media screen and (min-width:300px) and (max-width:414px) {
    
    #hbbp_navi {
    display: block;
    padding-top: 400px;
margin-top: -400px;}

#icbp,
#difference_navi,
#plan_navi
{
    display: block;
    padding-top: 425px;
margin-top: -425px;}

    h2,
    h3,
    .area_icbp,
    .area_hbbp,
    type2 {
        font-size: x-large !important;
    }

    #bus_idou h3,
    #bus_pass h2,
    #hbbp h3,
    #icbp h3,
    #bus_type h2,
    #more h2,
    #bus_company h2 {
        font-size: x-large;
    }

    #bus_idou h3 span {
        font-size: 3rem;
    }

    .bg-warning {
        font-size: 1.4rem;
    }

    .route {
        width: 100%;
        margin: auto;
    }

    .bus_route ul,
    .route2,
    .route3 {
        width: 100%;
        padding-left: 0px;
    }

    .bus_route {
        text-align: center;
    }

    .toshi {
        height: auto;
    }

    .bus_route_toshi ul {
        font-size: 1.4rem;
    }

    .route3 {
        margin: auto;
    }

    .contents {
        background-size: cover;
    }

    .bus_co {

        width: 90%;
        margin: auto;

    }

    .type2 {
        display: inline-block;
    }

    .img-responsive_sp {
        display: block;
        width: 100%;
    }

    .img-responsive_pc,
    .img-responsive_buspc {
        display: none;
    }

    .img-responsive_bussp {
        display: block;
        width: 100%;
    }

    .type,
    .type_u {
        background: #ffffff9c;
        border-radius: 10px;
    }

    .td_hbbp,
    .area_hbbp,
    .area_icbp {
        width: 100%;
    }

    .pass3day,
    .pass5day {
        font-size: 1.7rem;
        border: 1px;
        text-align: center;
    }

    .p_point {
        font-size: 2.5rem;
    }

    .p_point1 {
        font-size: 1.8rem;
    }

    .pass3day,
    .pass5day {
    background: #ffeb3ba1;
    text-align: center;
    }

    .route ul,
    .route2 ul,
    .route3 ul {
        font-size: 1.7rem;
    }

    .non {
        display: none;
    }

    .mente {
        font-size: 1.2rem;
    }

    .titel {
        font-size: 2.3rem;
    }

    .bus_route_2 {
        padding-left: 15%;
    }

    .text {
        display: inline-block;
    }

    .pass_3day {
        font-size: 2.1rem;
    }

    .day1_pc {
        display: none;
    }

    .day1_sp {
        display: block;
    }

    .plan2day,
    .plan3day {
        display: none;
    }

    .day2,
    .day3 {
        display: none;
    }

    .plan1day {
        font-size: 2.5rem;
    }

    .plan23day_sp {
        display: block;
        margin: 30px 20px;
        text-align: center;
        background: #efaecc;
        padding: 10px;
        font-size: 2.5rem;
        border-radius: 30px;

    }

    .otokupass2 {
        font-size: 2.5rem;
        width: 100%;
    }

    .wrap {
        display: block;
    }

    .total {
        font-size: 2.4rem;
    }

    .total img {

        margin-top: 0px;
        margin-bottom: 0px;
    }

    .ouen {
        font-size: 2.4rem;
    }

    .uu {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .myself1 {
        font-size: 2rem;
        padding: 10px;
    }

    .myself img {
        display: none;
    }

    .click {
        text-align: center;
    }

    .click1 {
        margin-top: 20px;
    }

    .bussplan3 {
        font-size: 1.8rem;
    }

    .passname {
        text-align: center;
        margin-top: 20px;
        font-weight: bold;
    }

    .hbbp_p,
    .icbp_p {
        font-size: 1.8rem;
    }

    #plan,
    #bus_pass {
        margin-top: 0px;
    }
    
    .caption {
    font-size: 14px;
}
    
    .plan1day{
        margin: 0px 20px 30px;
    }
}