@charset "UTF-8";
/* CSS Document */

/* -------------------------------- PC版のスタイルここから ------------------------------------*/

@media print, screen and (min-width: 751px) {
    
    
/* タクシープラン */
    .taxi-plan-wrap{
        border: 3px solid #F2F2F2;
        padding: 24px;
        position: relative;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        max-width: 1150px;
        width: 94%;
    }
    
    .taxi-plan-wrap .box01{
        margin-bottom: 24px;
    }
    
    
    .taxi-plan-wrap .plan-ttl{
        font-weight: bold;
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 16px;
        position: relative;
    }
    
    .taxi-plan-wrap .box01 p{
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 0;
    }
    
    
    .taxi-plan-wrap .root{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        margin-top: 24px;
        margin-bottom: 24px;
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        padding: 16px 0 16px 48px;
    }
    
    .taxi-plan-wrap .root:before{
        content: '';
        background: url("../img/access/car-icon.svg") no-repeat center center;
        background-size: cover;
        position: absolute;
        top:50%;
        left: 0;
        transform: translateY(-50%);
        width: 32px;
        height: 18px;
    }
    
    .taxi-plan-wrap .root li{
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
        position: relative;
    }
    
    .taxi-plan-wrap .root li+li{
        margin-left: 2%;
        padding-left: 4%;
    }
    
    .taxi-plan-wrap .root li+li:before{
        content: '→';
        display: inline-block;
        position: absolute;
        left: 0;
        top:50%;
        transform: translateY(-50%);
    }
    
    
    .taxi-plan-wrap .read-item-inner{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .taxi-plan-wrap .read-item-inner .box03{
        width: 50%;
        order: 0;
    }
    
    

    .taxi-plan-wrap .read-item-inner .box02{
        width: 45%;
        order: 1;
        margin-left: 5%;
    }
    
    .taxi-plan-wrap .read-item-inner .link-box{
         width: 100%;
        order: 2;
        margin-top: 24px;
    }
    .taxi-plan-wrap .read-item-inner .link-box a{
        margin-left: auto;
    }
    
    .taxi-plan-wrap .read-item-inner .box02 img{
        width: 100%;
    }
    
    
    .taxi-plan-wrap .read-item-inner .box03 dl{
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dl+dl{
        margin-top: 16px;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dt{
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dd{
        font-size: 16px;
        line-height: 26px;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-trigger,
    .taxi-plan-wrap .read-btn{
        display: none;
    }
    
    
/* 車のルート */
    
    .start-point{
        width: 100%;
    }
    
    .start-point ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-inline-start: 0;
        padding: 0;
        margin-bottom: 0;
    }
    
    .start-point ul > li{
        cursor: pointer;
        width: 18.8%;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 8px 0;
        transition: 0.3s;
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;

        color: #898989;
    }
    
    .start-point ul > li+li{
        margin-left: 1.5%;
    }
    
    .start-point ul > li:nth-child(5n+1){
        margin-left: 0;
    }
    
    .start-point ul > li:hover{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .start-point ul > li.is-active{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .route-wrap.is-show{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: center;
        -webkit-align-items: center;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .route-wrap{
        display: none;
    }
    
    .route-wrap h4{
        width: 100%;
        font-weight: bold;
        font-size: 30px;
        line-height: 1.4em;
        margin-bottom: 24px;
    }
    
    .route-wrap .r-box{
        width: 60%;
        order: 1;
        margin-left: 2%;
    }
    
    .route-wrap .r-box iframe{
        width: 100%;
        height: 475px;
    }
    
    .route-wrap .l-box{
        width: 38%;
        order: 0;
    }
    
    .route-wrap .l-box ul{
        margin: 0;
        padding: 0 0 0 32px;;
    }
    
    .route-wrap .l-box ul li{
        font-weight: bold;
        font-size: 18px;
        line-height: 46px;
        position: relative;
        padding-left: 40px;
        margin-bottom: 0;
    }
    
    .route-wrap .l-box ul li:before{
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border: 2px solid #898989;
        border-radius: 50%;
        background: #fff;
        z-index: 1;
    }
    
    .route-wrap .l-box ul li+li:after{
        content: '';
        position: absolute;
        left: 6px;
        top:-23px;
        background: #898989;
        width: 2px;
        height: 100%;
    }
    
    .route-wrap .l-box p{
        text-align: center;
        font-size: 18px;
        line-height: 22px;
        vertical-align: bottom;
        margin-top:40px;
    }
    
    .route-wrap .l-box p b{
        font-size: 22px;
        font-weight: bold;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .bycar-at-wrap dl{
        margin-bottom: 0;
    }
    
    .bycar-at-wrap dl+dl{
        margin-top: 24px;
    }
    
    .bycar-at-wrap dl dt{
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
    }
    
    .bycar-at-wrap dl dd{
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 0;
    }
    
    
    
/* バス */
    
    .bus-route-list ul{
        width: 100%;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        margin-bottom: 0;
        padding: 0;
    }
    
    .bus-route-list ul li{
        width: 30%;
    }
    
    .bus-route-list ul li+li{
        margin-left: 5%;
    }
    
    .bus-route-list ul li dl{
        margin-bottom: 0;
    }
    
    .bus-route-list ul li dt{
        font-weight: bold;
        font-size: 22px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid #898989;
    }
    
    .bus-route-list ul li dd{
        margin-bottom: 0;
        padding: 16px 16px 0 16px;
    }
    
    .bus-route-list ul li dd p{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 0;
    }
    
    .bus-route-list ul li dt i{
        display: none;
    }
    
    .bus-route-list ul li dd .btn-basic{
        max-width: 100%;
    }
}


/* -------------------------------- SP版のスタイルここから ------------------------------------*/

@media screen and (max-width: 750px) {
    
    
/* タクシープラン */
    .taxi-plan-wrap{
        width: 92%;
        border: 1px solid #CCCCCC;
        padding: 16px;
        position: relative;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
    }
    
    .taxi-plan-wrap .box01{
        width: 100%;
        margin-bottom: 8px;
    }
    
    .taxi-plan-wrap .plan-ttl{
        font-weight: bold;
        font-size: 18px;
        line-height: 26px;
        margin-bottom: 8px;
        position: relative;
    }
    
    .taxi-plan-wrap .box01 p{
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .root{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        margin-bottom: 24px;
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;
        padding: 16px 0 16px 40px;
    }
    
    .taxi-plan-wrap .root:before{
        content: '';
        background: url("../img/access/car-icon.svg") no-repeat center center;
        background-size: cover;
        position: absolute;
        top:50%;
        left: 0;
        transform: translateY(-50%);
        width: 25px;
        height: 14px;
    }
    
    .taxi-plan-wrap .root li{
        font-weight: bold;
        font-size: 14px;
        line-height: 22px;
        position: relative;
    }
    
    .taxi-plan-wrap .root li+li{
        margin-left: 2%;
        padding-left: 8%;
    }
    
    .taxi-plan-wrap .root li+li:before{
        content: '→';
        display: inline-block;
        position: absolute;
        left: 0;
        top:50%;
        transform: translateY(-50%);
    }
    
    .taxi-plan-wrap .read-item-inner{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        align-items: flex-start;
        -webkit-align-items: flex-start;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .taxi-plan-wrap .read-item-inner .box02{
        width: 100%;
        margin-bottom: 16px;
    }
    
    .taxi-plan-wrap .read-item-inner .box02 img{
        width: 100%;
    }
    
    .taxi-plan-wrap .read-item-inner .box03{
        width: 100%;
        order: 3;
        margin-bottom: 24px;
    }
    
    .taxi-plan-wrap .read-item-inner .link-box{
         width: 100%;
        order: 4;
        margin-top: 16px;
    }
    .taxi-plan-wrap .read-item-inner .link-box a{
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dl{
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dl+dl{
        margin-top: 16px;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dt{
        font-weight: bold;
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-item-inner .box03 dd{
        font-size: 14px;
        line-height: 26px;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .taxi-plan-wrap .read-item{
        height: 40px;
    }
    

    
    .taxi-plan-wrap .read-item::before{
        background: #fff;
    }
    
    
/* 車のルート */
    
    .start-point{
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        overflow-x: scroll;
        position: relative;
    }
    
    .start-point ul{
        width: max-content;
        padding-inline-start: 0;
        padding:0;
        margin-bottom: 0;
    }
    
    .start-point ul > li{
        cursor: pointer;
        width: 125px;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
        float: left;
    }
    
    .start-point ul > li+li{
        margin-left: 8px;
    }
    
    
    .start-point ul > li.is-active{
        background: #1D315A;
        color: #fff;
        border: 1px solid #1D315A;
    }
    
    .start-point ul > li{
        cursor: pointer;
        width: 125px;
        text-align: center;
        position: relative;
        margin-bottom: 24px;
        float: left;
        background: #F2F2F2;
        border: 1px solid #898989;
        border-radius: 100px;
        display: block;
        padding: 4px 8px;
        transition: 0.3s;
        font-weight: bold;
        font-size: 12px;
        line-height: 22px;
        color: #898989;
    }
    
    .route-wrap.is-show{
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        align-items: center;
        -webkit-align-items: center;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .route-wrap{
        display: none;
    }
    
    .route-wrap h4{
        width: 100%;
        font-weight: bold;
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 24px;
    }
    
    .route-wrap .r-box{
        width: 100%;
        margin-bottom: 24px;
    }
    
    .route-wrap .r-box iframe{
        width: 100%;
        height: 350px;
    }
    
    .route-wrap .l-box{
        width: 100%;
    }
    
    .route-wrap .l-box ul{
        margin: 0;
        padding: 0 0 0 32px;;
    }
    
    .route-wrap .l-box ul li{
        font-weight: bold;
        font-size: 16px;
        line-height: 46px;
        position: relative;
        padding-left: 40px;
        margin-bottom: 0;
    }
    
    .route-wrap .l-box ul li:before{
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        border: 2px solid #898989;
        border-radius: 50%;
        background: #fff;
        z-index: 1;
    }
    
    .route-wrap .l-box ul li+li:after{
        content: '';
        position: absolute;
        left: 6px;
        top:-23px;
        background: #898989;
        width: 2px;
        height: 100%;
    }
    
    .route-wrap .l-box p{
        text-align: left;
        font-size: 16px;
        line-height: 22px;
        vertical-align: bottom;
        margin-top:32px;
        padding-left: 32px;
    }
    
    .route-wrap .l-box p b{
        font-size: 20px;
        font-weight: bold;
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .bycar-at-wrap dl{
        margin-bottom: 0;
    }
    
    .bycar-at-wrap dl+dl{
        margin-top: 16px;
    }
    
    .bycar-at-wrap dl dt{
        font-weight: bold;
        font-size: 14px;
        line-height: 26px;
    }
    
    .bycar-at-wrap dl dd{
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 0;
    }
    
/* バス */
    
    .bus-route-list ul{
        width: 100%;
        margin-bottom: 0;
        padding: 0;
    }
    
    .bus-route-list ul li{
        width: 100%;
    }
    
    .bus-route-list ul li+li{
        margin-top: 24px;
    }
    
    .bus-route-list ul li dl{
        margin-bottom: 0;
    }
    
    .bus-route-list ul li dt{
        font-weight: bold;
        font-size: 16px;
        line-height: 26px;
        text-align: left;
        margin-bottom: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #898989;
        position: relative;
    }
    
    .bus-route-list ul li dt i{
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        display: inline-block;
    }
    
    .bus-route-list ul li dt i:after{
        content: '';
        position: absolute;
        bottom: 50%;
        left: 0;
        width: 14px;
        height: 14px;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
        transform: rotate(135deg) translateY(-50%);
        transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    
    .bus-route-list ul li dt.is-show i:after{
        bottom: 0;
        left: 7px;
        transform: rotate(-45deg) translateY(0);
    }
    
    .bus-route-list ul li dd{
        margin-bottom: 0;
        padding: 8px 0 0 0;
    }
    
    .bus-route-list .acc-inner{
        display: none;
    }
    
    .bus-route-list ul li dd p{
        font-size: 14px;
        line-height: 24px;
    }
}