h2.page_title {
    text-align: center;
    /* margin-top: -100px; */
    top: 48vw;
    /* margin: auto; */
    right: 0;
    left: 0;
    font-size: 12vw;
    color: #FFF;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 897px) {
    h2.page_title {
        top: 200px;
        font-size: 50px;
        background-color: rgba(0, 0, 0, 0.4);
    }
}

figure.mainBgImg {
    -webkit-animation: unset;
    animation: unset;
    opacity: 1;
}

@media screen and (min-width: 897px) {
    #main_visual.pc__ {
        height: 350px; /* �C���O��430px */
    }
}
/*--------------------------------------
  �p������
  --------------------------------------*/
.bread_crumb {
    margin: 20px 0 0 0;
}
/*--------------------------------------
  �p������
  --------------------------------------*/
.bread_crumb {
    margin: 20px 0 0 0;
}

    .bread_crumb a {
        color: #000;
    }

    .bread_crumb a {
        color: #000;
    }

    .bread_crumb span, .bread_crumb span a {
        font-size: 12px;
        font-weight: 300;
    }

    .bread_crumb .arrow {
        margin: 0 5px 0 5px;
    }
/*--------------------------------------
  �v���_�E��
  --------------------------------------*/
#searchBox .pulldown {
    margin: 30px 0 50px 0;
}

@media screen and (max-width: 896px) {
    #searchBox .pulldown {
        margin: 15px 0 20px 0;
    }
}
#searchBox .pulldown select {
    width: 42%;
    padding: 8px 10px;
    margin-top: 6px;
    color: #000;
    font-weight: 900;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    border-radius: 0.2em;
    background: #fff;
    border: 2px solid #aaa;
}

#searchBox .pulldown_shikoku select {
    color: #fff;
}

#searchBox .pulldown select {
    background-image: linear-gradient(45deg, transparent 50%, #aaaaaa 50%), linear-gradient(135deg, #aaaaaa 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #ffffff 50%), linear-gradient(135deg, #ffffff 50%, transparent 50%), linear-gradient(to right, #aaaaaa, #aaaaaa);
    background-position: calc(100% - 24px) calc(1em + 1px), calc(100% - 17px) calc(1em + 1px), calc(100% - 24px) calc(1em + 1px), calc(100% - 14px) calc(1em + 1px), 100% 0;
    background-size: 7px 7px, 7px 7px, 10px 10px, 10px 10px, 2.9em 2.5em;
    background-repeat: no-repeat;
    background-color: #ffffff;
    /*background-image: linear-gradient(to right, #aaaaaa, #aaaaaa);
    background-position: 100% 0;
    background-size: 2.9em 2.5em;*/
    background-repeat: no-repeat;
}

    #searchBox .pulldown select option {
        font-weight: 300;
    }

    #searchBox .pulldown select option {
        color: #000000;
    }

#searchBox .pulldown_shikoku {
    display: inline;
    position: relative;
}

@media screen and (max-width: 896px) {
    #searchBox .pulldown_shikoku {
        display: block;
    }
}

#searchBox .pulldown_other {
    display: inline;
    position: relative;
}

#searchBox .pulldown_text {
    display: inline;
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
    left: 10px;
}

@media screen and (max-width: 896px) {
    #searchBox .pulldown_text {
        top: 16px;
    }
}


#searchBox .pulldown_arrow {
    display: inline-block;
    width: 48px;
    background: #CCC;
    height: 43px;
    position: absolute;
    margin-left: -53px;
    margin-top: 1px;
}


@media screen and (max-width: 896px) {
    #searchBox .pulldown select {
        width: 100%;
    }

    #searchBox .area_image li {
        display: inline-block;
        margin-right: calc(3.3vw - 6px);
    }

        #searchBox .area_image li:nth-of-type(3n) {
            margin-right: 0px;
        }

    #searchBox .arrow_right {
        display: none;
    }
}

@media screen and (min-width: 897px) {
    #searchBox .pulldown select {
        width: 47.3%;
    }

    #searchBox .area_image li {
        display: inline-block;
        margin-right: 17.5px;
    }

        #searchBox .area_image li:nth-of-type(8n) {
            margin-right: 0px;
        }

    #searchBox .arrow_right {
        padding: 10px;
    }
}

    #searchBox .area_image figure {
        display: inline-block;
        position: relative;
    }

    #searchBox .area_image img {
        position: relative;
        /*    width: 29vw;*/
        width: 27.55vw;
        margin-bottom: 20px;
        /*    height: 25vw;*/
        height: 23.75vw;
    }

    @media screen and (min-width: 897px) {
        #searchBox .area_image img {
            width: calc(163px * 0.71);
            margin-bottom: 20px;
            height: calc(140px * 0.71);
        }
    }
#searchBox .area_image figcaption, #allRoutes figcaption {
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-20px);
    bottom: 0;
    font-size: 16px;
    line-height: 1.1;
    text-align: center;
}

    select::-ms-value {
        background: none;
    }

/*--------------------------------------
  �n�}
  --------------------------------------*/
@media screen and (max-width: 896px) {
    #searchBox #pc {
        display: none;
    }

    #searchBox #sp {
        display: block;
    }
}

@media screen and (min-width: 897px) {
    #searchBox #pc {
        display: block;
    }

    #searchBox #sp {
        display: none;
    }
}

@media screen and (max-width: 896px) {
    .card_Icon.pc {
        display: none;
    }

    .card_Icon.sp {
        text-align: center;
        display:block;
    }
}

@media screen and (min-width: 897px) {
    .card_Icon.pc {
        display: flex;
    }

    .card_Icon.sp {
        display: none;
    }
}

#searchBox .map_container {
    height: 77vw;
    position: relative;
}

    #searchBox svg, #searchBox .map_container.all {
        height: 105vw;
        max-width: 95vw;
        max-height: 1200px;
    }

        /* ��s�s */
        #searchBox .map_container.all .selected_city .cls-22 {
            fill: #ff0000;
        }

        #searchBox .map_container.all .selected_city .cls-23,
        #searchBox .map_container.all .selected_city .cls-24 {
            fill: #00ffff;
        }

        /* �s�s */
        #searchBox .map_container.all .cls-20 {
            font-weight: 300;
        }

        #searchBox .map_container.all .selected_city .cls-20 {
            fill: #ff0000;
        }

        #searchBox .map_container.all .selected_city .cls-21 {
            fill: #00ffff;
        }

        #searchBox svg text {
            font-family: sans-serif;
        }

    #searchBox .map_container.shikoku {
        padding: 20px 0;
        height: 51vw;
        overflow: hidden;
    }

@media screen and (min-width: 897px) {
    #searchBox .map_container {
        height: 470px;
    }

        #searchBox .map_container.shikoku {
            height: 608px;
        }
}

.map_container ul {
    position: absolute;
    top: 0;
}

#searchBox .map_container .allRoutes {
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
}

@media screen and (max-width: 896px) {
    #searchBox .map_container.shikoku ul, #searchBox .map_container.shikoku img {
        width: 100%;
    }

    #searchBox .map_container .allRoutes {
        width: 100%;
    }

    #searchBox .map_container #allRoutes img {
        width: 27.55vw;
        height: auto;
    }
}

#searchBox .map_container picture img.full {
    border: 2px solid #aaa;
    position: absolute;
    left: 0;
}

#imgMapSvgLine {
    position: absolute;
    top: 95px;
    left: 16px;
}

    #imgMapSvgLine.size2 {
        top: -15px;
        left: 20px;
    }

    #imgMapSvgLine.size3 {
        top: 0px;
        left: 2px;
    }

@media screen and (max-width: 896px) {
    #imgMapSvgLine {
        width: 99.5%;
        left: 1.5vw;
        top: 8.3vw;
    }

        #imgMapSvgLine.size2 {
            width: 98.5%;
            left: 1.5vw;
            top: -1.3vw;
        }

        #imgMapSvgLine.size3 {
            width: 100%;
            left: 0vw;
            top: 0vw;
        }
}

#searchBox .map_container img#imgMapMiniMap {
    width: 14vw;
    position: absolute;
    top: 36vw;
    left: 76vw;
}

@media screen and (min-width: 897px) {
    #searchBox .map_container picture img.full {
        height: 608px;
        width: 1080px;
        top: 0;
    }

    #searchBox .map_container img#imgMapMiniMap {
        height: 148px;
        width: 146px;
        top: 421px;
        left: 897px;
    }
}


#searchBox .size_button div {
    background-size: cover;
    height: 6.4vw;
    width: 6.4vw;
    position: absolute;
}

#searchBox .size_button.up .button_image {
    background-image: url(../images/search_map/button_plus.png);
    left: 76vw;
    top: 29vw;
}

    #searchBox .size_button.up .button_image[disabled=disabled] {
        background-image: url(../images/search_map/button_plus_disabled.png);
    }

#searchBox .size_button.up a:hover {
    opacity: 1;
}

#searchBox .size_button.down .button_image {
    background-image: url(../images/search_map/button_minus.png);
    left: 83.6vw;
    top: 29vw;
}

    #searchBox .size_button.down .button_image[disabled=disabled] {
        background-image: url(../images/search_map/button_minus_disabled.png);
    }

#searchBox .size_button.down a:hover {
    opacity: 1;
}


@media screen and (min-width: 897px) {
    #searchBox .size_button div {
        height: 70px;
        width: 70px;
    }

    #searchBox .size_button.up .button_image {
        left: 897px;
        top: 334px;
    }

    #searchBox .size_button.down .button_image {
        left: 973px;
        top: 334px;
    }
}

#searchBox #city_name_svg_1 svg {
    position: absolute;
    /*top: 56px;*/
}

@media screen and (max-width: 896px) {
    #searchBox #city_name_svg_1 svg {
        width: 100%;
        left: 0;
        /*top: 5vw;*/
    }
}

#searchBox #city_name_svg_2 svg {
    position: absolute;
    /*top: 56px;*/
}

@media screen and (max-width: 896px) {
    #searchBox #city_name_svg_2 svg {
        width: 100%;
        left: 0;
        /*top: 5vw;*/
    }
}

#searchBox #city_name_svg_3 svg {
    position: absolute;
    /*top: 7px;
    left: 38px;*/
}

@media screen and (max-width: 896px) {
    #searchBox #city_name_svg_3 svg {
        width: 100%;
        /*left: 3vw;*/
        top: 0vw;
    }
}

#searchBox svg g text {
    /*text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
  stroke-width: 0.5px;*/
    stroke: #fff;
    user-select: none;
    -ms-user-select: none;
    font-family: 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', "Meiryo UI", Meiryo, Arial, sans-serif;
}

#searchBox.all svg g text {
    /*text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
  stroke-width: 0.5px;*/
    stroke: none;
}

#searchBox svg g text:hover {
    cursor: pointer;
}

#searchBox svg g text:hover {
    fill: #666;
}

svg #�s�s > g > g {
    cursor: pointer;
    display: block;
}

#allRoutes {
    position: absolute;
    display: inline-block;
    cursor: pointer;
}

    #circle_click_area_container {
        position: relative;
    }

    #circle_click_area_container div {
        position: absolute;
        cursor: pointer;
        width: 6px;
        height: 6px;
        background: #0ff;
        opacity: 0;
    }


/*--------------------------------------
  �v�����̃��X�g
  --------------------------------------*/

#routesList article > div, #expressList article > div {
    margin-bottom: 50px;
}


#routesList h2 {
    color: #fff;
    padding: 12px 0 12px 20px;
}
#routesList p.from_to {
    font-size: 22px;
    padding: 12px 0 12px 20px;
}
#routesList li, #expressList li {
    margin-bottom: 10px;
}

#routesList  li > div,#expressList li > div {
    height: 70px;
}

@media screen and (max-width: 896px) {
    #routesListli div, #expressList li div, #routesList li span, #expressList li span {
        font-size: 16px;
    }
}

@media screen and (min-width: 897px) {
    #routesList li > div, #expressList li > div {
        height: 60px;
    }
}
#routesList .condition_container, #expressList .condition_container {
    background: #CAECFD;
    width: 66%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
#routesList .return .condition_container, #expressList .return .condition_container {
    background: #FCCAEC;
}

@media screen and (min-width: 897px) {
    #routesList .condition_container, #expressList .condition_container {
        left: 30px;
    }

    #routesList li::before, #expressList li::before {
        content: "";
        width: 100px;
        background: #CAECFD;
        height: 60px;
        position: absolute;
        border-radius: 30px;
    }

    #routesList li.return::before {
        background: #FCCAEC;
    }
    #routesList li::after, #expressList li::after {
        content: "\03e";
        font-size: 24px;
        color: #fff;
        line-height: 70px;
        width: 60px;
        background: #34B5E8;
        height: 60px;
        position: absolute;
        border-radius: 30px;
        margin-left: -30px;
    }

    #routesList li.return::after {
        background: #E535AB;
    }
    #expressList img {
        background-image: url(../images/Banner/THBT127_30.png);
    }
}

@media screen and (max-width: 896px) {
    #routesList .condition_container, #expressList .condition_container {
        width: 70%;
    }

    #routesList li, #expressList li {
        background: #34B5E8;
    }

    #routesList  li.return,#expressList li.return {
        background: #E535AB;
    }
    #routesList li > div, #expressList li > div {
        height: 75px;
    }
}

#routesList a .condition_container, #expressList a .condition_container {
    color: #000;
}

#routesList a:hover, #expressList a:hover {
    opacity: 1;
}

    #routesList a:hover li .condition_container, #expressList a:hover li .condition_container {
        background: #d7f2ff;
    }

    #routesList a:hover li::before, #expressList a:hover li::before {
        background: #d7f2ff;
    }

    #routesList a:hover li .price_container, #expressList a:hover li .price_container {
        background: #55c7f5;
    }

    #routesList a:hover li::after, #expressList a:hover li::after {
        background: #55c7f5;
    }

    #routesList a:hover li.return .condition_container, #expressList a:hover li.return .condition_container {
        background: #ffd5f2;
    }

    #routesList a:hover li.return::before, #expressList a:hover li.return::before {
        background: #ffd5f2;
    }

    #routesList a:hover li.return .price_container, #expressList a:hover li.return .price_container {
        background: #ec59bc;
    }

    #routesList a:hover li.return::after, #expressList a:hover li.return::after {
        background: #ec59bc;
    }

@media screen and (max-width: 896px) {
    #routesList a:hover li, #expressList a:hover li {
        background: #55c7f5;
    }

        #routesList a:hover li.return, #expressList a:hover li.return {
            background: #ec59bc;
        }
}


#routesList .from, #expressList .from {
    position: absolute;
    color: black;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    width: 43%;
}

#routesList .arrow, #expressList .arrow {
    /*background: url(../images/search_map/arrow_double.png);*/
    position: absolute;
    color: black;
    background-size: cover;
    top: 50%;
    transform: translateY(-50%);
    left: 48%;
    width: 4vw;
    height: 3.0vw;
}

@media screen and (min-width: 897px) {
    #routesList .arrow, #expressList .arrow {
        width: 35px;
        height: 26px;
    }
}

#routesList .to, #expressList .to {
    position: absolute;
    color: black;
    top: 50%;
    transform: translateY(-50%);
    right: 2%;
    width: 43%;
}

@media screen and (max-width: 896px) {
    #routesList .from, #expressList .from {
        width: 90%;
        top: 27%;
        font-size: 14px;
    }

    #routesList .arrow, #expressList .arrow {
        left: 20px;
        top: 71%;
        font-size: 14px;
    }

    #routesList .to, #expressList .to {
        width: 78%;
        left: 20%;
        line-height: 1.1em;
        top: 70%;
        font-size: 14px;
    }
}

#routesList .price_container, #expressList .price_container {
    background: #34B5E8;
    width: 28%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-left: 26px;
}

#routesList .return .price_container, #expressList .return .price_container {
    background: #E535AB;
}

@media screen and (max-width: 896px) {
    #routesList .price_container, #expressList .price_container {
        width: 25%;
        margin-left: 0;
    }
}

#routesList .price, #expressList .price {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    left: 20px;
}

@media screen and (max-width:896px){
    #routesList .price, #expressList .price {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
    }
    #routesList .price >span, #expressList .price >span {
       font-size:16px;
    }
}

#routesList .Hokkaido h2 {
    background: #9FD9DF;
}

#routesList .Tohoku h2 {
    background: #69b0c8;
}

#routesList .Tokyo h2 {
    background: #b5afd6;
}

#routesList .Fuji h2 {
    background: #84658c;
}

#routesList .Chubu h2 {
    background: #c397bf;
}

#routesList .Kansai h2 {
    background: #ca7992;
}

#routesList .Chugoku h2 {
    background: #d78b9c;
}

#routesList .Shikoku h2 {
    background: #d89d3f;
}

#routesList .Kyushu h2 {
    background: #d8c149;
}

main section article h2 {
    padding-top: 13px;
}

@media screen and (max-width: 896px) {
    main section article h2 {
        padding: 10px 0 5px 0;
    }
}

ul.area_image li.selected a figure img {
    border: 2px solid #FF0000;
}

ul.area_image {
    margin-bottom: 10px;
}

#searchBox svg g text.map_city_name_size_1 {
    font-size: 32px;
    font-family: Arial-BoldMT, Arial;
    font-weight: 700
}

#searchBox svg g text.map_city_name_size_2 {
    font-size: 30px;
    font-family: Arial-BoldMT, Arial;
    font-weight: 700
}

#searchBox svg g text.map_city_name_size_3 {
    font-size: 25px;
    font-family: Arial-BoldMT, Arial;
    font-weight: 700
}

@media screen and (max-width: 896px) {
    #searchBox #imgMapMiniMap {
        display: none !important;
    }

    #searchBox .size_button div {
        height: 14vw;
        width: 14vw;
    }

    #searchBox .size_button.up div.button_image {
        left: 61vw;
        top: 37vw;
    }

    #searchBox .size_button.down div.button_image {
        left: 77vw;
        top: 37vw;
    }
}

@media screen and (max-width: 896px) {
    li.area_image_2.see_more_maps.child.display_none {
        display: none !important;
    }

    p.see_more_maps.button {
        margin-bottom: 15px !important;
        padding-top: 0px !important;
    }

    #area_image_1 {
        margin-bottom: 0px !important;
    }
}

@media screen and (min-width: 897px) {
    p.see_more_maps.button {
        display: none !important;
    }

    div.see_more_maps.message {
        /*display:none !important;*/
    }

    #area_image_1 {
        margin-bottom: 15px !important;
    }
}

ul.link__ li.float_right {
    float: right;
}

ul.link__ li.float_left {
    float: left;
}

@media screen and (max-width: 896px) {
    ul.link__ li.float_right a {
        font-size: 12px;
    }

    ul.link__ li.float_left a {
        font-size: 12px;
    }
}