@charset "UTF-8";
:root{
    /*----------color*/
    --orange: #EB6200;
    --rightorange: #FFBF91;
    --red: #EB2F00;
    --rightred:#FFD8CE;
    --navy:#1B2870;
    --rightnavy:#eef1ff;
    --rightblue:#E1E5F6;
    --black:#212020;
    --gray:#EBEBEB;
    --grayblack:#848484;
    --deepgray:#C9C9C9;
    --rightgray:#f9f9f9;
    --white:#FFFFFF;
    --whiteAlpha:rgba(255,255,255,0.5);
    --cautionred:#EB2F00;
    --narita:#36A806;
    --naritaRight:#93D676;
    --haneda:#008EEC;
    --hanedaRight:#A0D0EF;
    /*----------breakpoint*/
    --primaryWidth:1024px;
    --spContainerWidth:calc(var(--primaryWidth) - var(--marginMiddle));
    /*----------margin-padding*/
    --marginLarge:30px;
    --marginMiddle:15px;
    --marginSmall:7.5px;
    --marginContainer:20px;
    --marginNoWrapWidth:calc((100vw - var(--primaryWidth))/2);
    --marginLCenterTop:30px auto 0 auto;
    --marginLCenterBottom:0 auto 30px auto;
    /*----------width*/
    --halfContainer:calc((var(--primaryWidth) - var(--marginLarge)) / 2);
    --halfContent:calc((100% - var(--marginLarge)) / 2);
    --halfContainerIn:70%;
    --buttonMini:150px;/*10em*/
    /*----------border*/
    --kadomaru:10px;
    --kadomaruMini:5px;
    --kadomaruShita:0 0 10px 10px;
    --kadomaruUe:10px 10px 0 0;
    --kadomaruMigi:0 10px 10px 0;
    --kadomaruHidari:10px 0 0 10px;
    --borderWidth:3px;
    --borderWidthLarge:6px;
    /*----------text*/
    --midashi:1.2em;
    --submidashi:1.05em;
    --fontMini:0.88em;
    --fontFamily:'BIZ UDPGothic', sans-serif,"UD Shin Go Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    /*----------animation*/
    --transSec:.3s;
    --transSecShort:.15s;

    @media(min-width:1400px) {
        /*wide*/
    }
    @media(max-width:1024px) {
        /*sp-and-tablet*/
        --primaryWidth:100%;
        --marginContainer:15px 10px;
        --marginLCenterTop:15px auto 0 auto;
        --borderWidth:2px;
        --midashi:1.1em;
        --submidashi:1.02em;
        --fontMini:0.8em;
        --fontSpMin:0.65em;
    }
    @media(max-width:767px) {
        /*sp-only*/
    }
}

/*-----all--------------*/
* {
    margin: 0 ;
    padding: 0 ;
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important; 
    &:not(:lang(en)){
        word-break: break-all;
    }
}
body,html {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    scroll-behavior: smooth;
}
body{
    position: relative;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom:380px; /* for footer*/
    box-sizing: border-box;
    background: var(--gray);
    font-family:var(--fontFamily);
	font-weight: normal;
    font-size: 1rem;
    @media(max-width:1024px) {
        padding-bottom:0 !important;
    }
    &:not(:lang(ja)){
        padding-bottom:420px; /* for footer*/
    }
}
a, a:link, a:visited, a:hover, a:focus a:active{
    display: block;
    cursor: pointer;
    text-decoration: none;
    color:var(--black);
}
p{
    line-height: 1.5em;
}
summary {
    display: block;
    list-style: none;
    cursor: pointer;
}  
    /* Chrome-Safari */
    summary::-webkit-details-marker {
        display:none;
    }

/*-----responsive--------------*/
@media(max-width:1024px) {
    /*---grid-clear---*/
    nav{
        display: block !important;
    }
    #navSkip *{
        grid-row:unset !important;
        grid-column:unset !important;
    }
} 

/*-----input,select--------------*/
/*layout-reset-start*/
input,select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    vertical-align: middle;
    font-family: var(--fontFamily);
    font-size: inherit;
    background: none transparent;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background: transparent;
    z-index: 1;
}
/*layout-reset-end*/
input[type="date"]{
   position: relative; 
   color:var(--black);
   &::after{
    content: "";
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:var(--marginMiddle);
    background: url(/img/icon_search_calendar.svg) center / contain no-repeat;
    width: 30px;
    height: 30px;
   }
}


/*-----button--------------*/
button{
    /*layout-reset-start*/
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    /*layout-reset-end*/
    font-family:var(--fontFamily);
    color: var(--black);
    &:disabled{
        cursor: default !important;
    }
}
.txtBtn{
    position: relative;
    padding:var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 50px;
    border-radius: var(--kadomaru);
    border: var(--borderWidth) solid var(--deepgray);
    background-color: var(--white);
    font-weight: bold;
    text-align: center;
    & p{
        display: inline-block;
        text-align: left;
    }
    &[href$=".pdf"] p::after{
        content: "";
        display: inline-block;
        background: url(/img/mark_pdf.svg) top / contain no-repeat;
        width:var(--marginMiddle);
        height:var(--marginMiddle);
        margin-left:var(--marginSmall);
    }
    &.single{
        width:40%;
        margin: var(--marginMiddle) auto 0 auto;
        @media(max-width:1024px) {
            width:80%;
        }
    }
}
.txtBtn::before{
    position: absolute;
    display: block;
    content: "";
    width:30px;
    height:30px;
    top:50%;
    transform: translateY(-50%);
    left:.5em;
    background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
   @media(max-width:1024px) {
        width:25px;
        height:25px;
        left:7.5px;
    }
}
.txtBtn:hover,
.txtBtn:focus{
    background-color: var(--rightorange);
    border: var(--borderWidth) solid var(--orange);
    transition: var(--transSec);
}
.txtBtn:hover::before,
.txtBtn:focus::before{
    left:var(--marginMiddle);
    transition: var(--transSec);
}
.fixBtnWrap{
    width: fit-content;
    margin: var(--marginLarge) auto -65px auto;
    & .fixBtn{
        position: relative;
        width:500px;
        padding: var(--marginLarge);
        font-size: var(--midashi);
        font-weight: bold;
        color: var(--white);
        background: var(--orange);
        border-radius: var(--kadomaru);
        border: var(--borderWidth) var(--orange) solid;
        &::before{
            content: "";
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            left:var(--marginLarge);
            width:35px;
            height: 35px;
            background: url(/img/icon_search.svg) center / contain no-repeat;
        }
        &:hover,
        &:focus{
            color: var(--black);
            background: var(--rightorange);
            transition: var(--transSec);
        }
        &:disabled{
            color: var(--deepgray);
            background: var(--gray);
            border: var(--borderWidth) var(--white) solid;
            &::before{
                background: none;
            }
            &:hover,
            &:focus{
                color: var(--deepgray);
                background: var(--gray);
                border: var(--borderWidth) var(--white) solid;
            }           
        }
    }
    @media(max-width:1024px) {
        width:90%;
        & .fixBtn{
            width:100%;
            &::before{
                left:var(--marginMiddle);
                width: 25px;
                height: 25px;
            }
        }
    }   
}
article:has(.fixBtnWrap){
    margin-bottom:50px;
}
article:has(.fixBtnWrap.air){
    margin-bottom:var(--marginLarge);
}

/*---txtBtnresponsive start---*/
.lineWrap,
.timetableCtrl,
.timetableWrap,
.pagetopInfoWrap,
.onoffResult{
    & .txtBtn{
        min-width: fit-content;
        margin-left: var(--marginMiddle);
        font-size: var(--fontMini);
        &::before{
            width:20px;
            height:20px;
        }
        &:hover,
        &:focus{
            background-color: var(--rightorange);
            border: var(--borderWidth) solid var(--orange);
            transition: var(--transSec);
            &::before{
                left:12px;
            }
        }
        @media(max-width:1024px) {
        margin-left:0;
        }
    }        
}
.lineWrap .txtBtn,
.timetableCtrl .txtBtn{
    padding:var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 35px;
}
.timetableWrap .txtBtn{
    width:120px;
    padding:var(--marginSmall) var(--marginMiddle) var(--marginSmall) 35px;
}
.pagetopInfoWrap .txtBtn,
.onoffResult .txtBtn{
    position: absolute;
    bottom:0;
    right:0;
    width:fit-content;
    @media(max-width:1024px) {
        position:inherit;
        margin: var(--marginSmall) 0 0 auto;
        padding: var(--marginSmall) var(--marginSmall) var(--marginSmall) 35px;
        border:none;
        background-color:transparent;
        & p{
            text-decoration:underline;
        }
    }
}
.onoffResult .txtBtn{
    right: var(--marginContainer);
    bottom: var(--marginContainer);
    &::before{
        background: url(/img/icon_arrow-up.svg) center / contain no-repeat;
    }
}
/*---txtBtnresponsive end---*/
.colorBtn{
    position: relative;
    padding:var(--marginMiddle);
    border-radius: var(--kadomaru);
    text-align: center;
    color: var(--white) !important;
    font-weight: bold;
    &.haneda{
        background:var(--haneda);
        border: var(--borderWidth) solid var(--haneda);
        &:hover,
        &:focus{
            transition: var(--transSec);
            background: var(--hanedaRight) !important;
            border-color: var(--hanedaRight) !important;
            color: var(--black) !important;
        }
    }
    &.narita{
        background:var(--narita);
        border: var(--borderWidth) solid var(--narita);
        &:hover,
        &:focus{
            transition: var(--transSec);
            background: var(--naritaRight) !important;
            border-color: var(--naritaRight) !important;
            color: var(--black) !important;
        }
    }
    &.noDeco,
    &.yoyaku{
        background: var(--orange);
        border: var(--borderWidth) solid var(--orange);
        &:hover,
        &:focus{
            transition: var(--transSec);
            background: var(--rightorange) !important;
            border-color: var(--rightorange) !important;
            color: var(--black) !important;
        }
    }
    &.haneda::before,
    &.narita::before{
        content: "";
        position: absolute;
        width:25px;
        height: 25px;
        left:var(--marginMiddle);
        background: url(/img/icon_search.svg) center / contain no-repeat;
    }
    &.yoyaku::before{
        content: "";
        position: absolute;
        width:20px;
        height: 20px;
        top:50%;
        transform: translateY(-50%);
        left:var(--marginSmall);
        background: url(/img/icon_mf-bus.svg) center / contain no-repeat;
    }
}
.choiceBtnWrap,
.choiceBtnWrap2{
    @media(max-width:1024px) {
        text-align:center;
        & .BtnDescription{
            width:100%;
            text-align:left !important;
        }
    }
}   
.choiceBtn{
    width:350px;
    position: relative;
    padding:var(--marginMiddle);
    border: var(--borderWidth) var(--deepgray) solid;
    border-radius: var(--kadomaru);
    font-size: var(--submidashi);
    font-weight: bold;
    &:hover,
    &:focus{
        border: var(--borderWidth) var(--orange) solid;
        background: var(--rightorange);
        transition: var(--transSec);
    }
    &:where(.route, .air, .keyword, .area, .next)::before{
        content: "";
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left: var(--marginMiddle);
        width: 30px;
        height: 30px;  
    }
    &.route::before{
        background:url(/img/icon_search_route.svg) center / contain no-repeat;
    }
    &.air::before{
        background:url(/img/icon_search_air.svg) center / contain no-repeat;
    }
    &.keyword::before{
        background:url(/img/icon_search_keyword.svg) center / contain no-repeat;
    }
    &.area::before{
        background:url(/img/icon_search_area.svg) center / contain no-repeat;
    }
    &.next::before{
        background:url(/img/icon_arrow-right.svg) center / contain no-repeat;
    }
    &.next:hover::before,
    &.next:focus::before{
        left: var(--marginLarge);
        transition: var(--transSec);
    }
    &:disabled{
        color: var(--deepgray);
        background: var(--gray);
        border: var(--borderWidth) var(--gray) solid;
        &:where(.route, .air, .next)::before{
            background: none;
        }
        &:hover,
        &:focus{
            color: var(--deepgray);
            background: var(--gray);
            border: var(--borderWidth) var(--gray) solid;
        }
    }
    @media(max-width:1024px) {
        width:100%;
    }   
}
.BtnDescription{
    margin-top: var(--marginMiddle);
    width: 350px;
}

.txtLink,
.txtLinkNv,
.txtLinkWh{
    width:fit-content;
    display: block !important;
    & p{
    position: relative;
    text-decoration: underline !important;
    padding-left:1.3em;
    }
    & p:hover,
    & p:focus{
        transition: var(--transSecShort);
        color:var(--orange);
    }
    & p::before{
        position: absolute;
        display: block;
        content: "";
        width: 1em;
        height: 1em;
        top:50%;
        transform: translateY(-50%);
        left:0;
    }
}
.txtLink p::before{
    background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
}
.txtLinkNv p{
    color:var(--navy);
    font-weight: bold;
    &::before{
       background: url(/img/icon_arrow-right-nv.svg) center / contain no-repeat !important;
    }
}
.txtLinkNv.Ue p{
    &::before{
       background: url(/img/icon_arrow_up_nv.svg) center / contain no-repeat !important;
    }
}
.txtLinkNv.shita p{
    &::before{
       background: url(/img/icon_arrow_bottom_nv.svg) center / contain no-repeat !important;
    }
}

.txtLinkWh p{
    color:var(--white);
    font-weight: bold;
    &::before{
    background: url(/img/icon_arrow-right-wh.svg) center / contain no-repeat !important;
    }
}
.jumpWrap{
    & .jumpBtn{
        position: relative;
        display: flex;
        padding:var(--marginMiddle);
        border-radius: var(--kadomaru);
        & p::before{
            content:"";
            width:20px;
            height: 20px;
            position: absolute;
            top: 50%;
            transform:translateY(-50%);
            right: var(--marginMiddle);
        }
        &:hover,
        &:focus{
            transition: var(--transSec);
        }
        &.Nv{
            border:var(--borderWidth) var(--navy) solid;
            background:var(--navy);
            color:var(--white);
            & p::before{
                background: url(/img/icon_arrow_inpage_bottom_wh.svg) center / contain no-repeat;
            } 
            &:hover,
            &:focus{
                background:var(--rightblue);
                color:var(--navy);    
                & p:before{
                    background: url(/img/icon_arrow_inpage_bottom_nv.svg) center / contain no-repeat;
                }   
            }
        }
    }
}

/*-----text-decoration--------------*/
.subInfoText{
    font-size: var(--fontMini);
    color:var(--navy);
    line-height: 1.5em !important;
    & a[href^="mailto:"] {
        display: inline;
        text-decoration: underline;
        color: var(--navy);
        &:hover,
        &:focus{
            color:var(--orange);
            transition: var(--transSecShort);
        }
    }
}
.numSingleUl{
    width:90%;
    margin:0 auto;
    line-height:1.8em;
    list-style-type: decimal;
    &.noNum{
        list-style-type: disc;
        & span{
            font-weight: bold;
        }
    }
}
.yokoUl{
    display: flex;
    list-style: none;
    & li{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 var(--marginMiddle);
        &::before{
            content: "";
            position: absolute;
            left:0;
            width:5px;
            height: 5px;
            background: var(--orange);
        }
    }
    @media(max-width:1024px) {
        display:block;
        & li{
            line-height:1.8em;
        }
    }
}


/*-----common-header,nav--------------*/
section:not(#indexHeadWrap) header{
    height: 60px;
    font-size: var(--fontMini);
    background: var(--orange);
    @media(max-width:1024px) {
        height:102px;
        padding-left:var(--marginSmall);
/*        border-radius: 0 0 var(--kadomaru) 0;*/
    }
}
#contentsHeaderInner{
    width:var(--primaryWidth);
    margin:0 auto;
    display: grid;
    grid-template-rows: 60px;
    grid-template-columns: 320px 1fr;
    & #headerLogoWrap{
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        position:relative;
        & img{
            position: absolute;
            width:85%;
            top:50%;
            transform: translateY(-50%);
            @media(max-width:1024px) {
                width:300px;
                top:65px;
            }
            @media(max-width:767px) {
                width:calc(100vw - 247.5px);
                top:65px;
            }
        }
        /*
        &:not(:lang(ja)){
            & img{
                display: none;
            }
            &::before{
                content: "";
                display: block;
                position: absolute;
                width:85%;
                height: 100%;
                top:50%;
                transform: translateY(-50%);
                left:0;
                background: url(/img/logo-w_en.svg) center / contain no-repeat;
                @media(max-width:1024px) {
                    width:300px;
                    top:65px;
                }
                @media(max-width:767px) {
                    width:calc(100vw - 247.5px);
                    top:65px;
                }    
            }
        }*/
    }
    & nav{
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        margin:0 !important;
        padding: var(--marginSmall) 0 ;
    }
}
nav{
    display: grid;
    grid-template-rows: 60px; 
    grid-template-columns: 1fr var(--buttonMini) var(--buttonMini) var(--buttonMini); 
    padding-top:calc(var(--marginMiddle) + 6px );
    & #navSkip{
        grid-row: 1 / 2 ;
        grid-column: 1 / 2 ;
        & a{
            position: relative;
            display: flex;
            align-items: center;
            width:fit-content;
            height:45px;
            line-height: 45px;
            padding-left:23px;
            color:var(--navy);
            text-decoration: underline;
            &::before{
                position: absolute;
                display: block;
                content: "";
                left:0;
                width:20px;
                height: 20px;
                background: url(/img/icon_arrow_bottom_nv.svg) center / contain no-repeat;
            }   
            &:hover,
            &:focus{
                color:var(--white);
                transition: var(--transSecShort);
                &::before{
                    background: url(/img/icon_arrow_bottom_wh.svg) center / contain no-repeat;
                    transition: var(--transSecShort);
                }
            }    
        }
    }
    & .navButtonWrap:has(#navLogin){
        grid-row: 1 / 2 ;
        grid-column: 2 / 3 ;
    }
    & .navButtonWrap:has(#navTextChange){
        grid-row: 1 / 2 ;
        grid-column: 3 / 4 ;
        
    }
    & .navButtonWrap:has(#navLanguage){
        grid-row: 1 / 2 ;
        grid-column: 4 / 5 ;
    }
}
#navLogin,
#navTextChange,
#navLanguage{
    position: relative;
    height:45px;
    display: flex;
    align-items: center;
    margin:0 0 0 var(--marginSmall);
    padding-left:25px;
    border-radius: var(--kadomaru);
    border:var(--borderWidth) solid var(--white);
    cursor: pointer;
    font-weight: bold;
    color:var(--navy);
    background:var(--white);
    & p{
        display: block;
        width:fit-content;
        margin:0 auto;
        text-align: center;
    }
    & p::before{
        position: absolute;
        display: block;
        content: "";
        top:50%;
        transform: translateY(-50%);
        left:5px;
        width: 25px;
        height: 25px;
    }
    &:hover,
    &:focus{
        border:var(--borderWidth) solid var(--navy);
        background:var(--rightblue);
        transition: var(--transSec);
    }
}
#navLogin a{
    width:fit-content !important;
    margin:0 auto !important;
}
#navLogin p::before{
    background:url(/img/icon_nav-login.svg) center / contain no-repeat;
}
#navLogin.complete p::before{
    background:url(/img/icon_nav-mypage.svg) center / contain no-repeat !important;
}
#navTextChange p::before{
    background:url(/img/icon_nav-size.svg) center / contain no-repeat;
}
#navLanguage p::before{
    background:url(/img/icon_nav-language.svg) center / contain no-repeat;
}
#navTextChange:has(+ .show) p::before,
#navLanguage:has(+ .show) p::before{
    background:url(/img/icon_close.svg) center / contain no-repeat;
    transition: var(--transSec);
}
#navTextChangeWrap,
#navLanguageWrap {
    position: relative;
    width:calc(var(--buttonMini) - 6px) !important;
    margin:var(--marginSmall) auto auto 6px;
    transition: max-height var(--transSec) ease-out, opacity var(--transSec) ease-out;
    border-radius: var(--kadomaru);
    border: var(--borderWidth) solid var(--navy);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    & button{
        display: block;
        width:100%;
        padding:var(--marginMiddle);
        border-bottom:var(--borderWidth) solid var(--navy);
        text-align: left;
        font-weight: bold !important;
        color:var(--black);
        background:var(--white);
        &:last-child{
            border-bottom: none;
        }
        &:hover,
        &:focus{
            position: relative;
            background: var(--rightblue);
            transition: var(--transSecShort);
        }
        &:hover::after,
        &:focus::after{
            position: absolute;
            display: block;
            content: "";
            width: var(--marginMiddle);
            height: var(--marginMiddle);
            background: url(/img/icon_arrow_inpage_right_nv.svg) center / contain no-repeat;
            top:50%;
            right: var(--marginSmall);
            transform: translateY(-50%);
            transition: var(--transSecShort);
            z-index: 998 !important; 
        }
    }
} 
#navTextChangeWrap.show,
#navLanguageWrap.show {
    position: absolute;
    opacity: 1;
    z-index: 997 !important; 
    width:fit-content;
    max-height: 500px;
    background:var(--white);
}
@media(max-width:1024px) {    
    nav{
        width:0;
        height:0;
        padding:0;
        margin:0;
        & #navSkip{
            position:absolute;
            top:0;
            left:var(--marginSmall);
            font-size:var(--fontMini);
            & a{
                margin-top:var(--marginSmall);
                height:1.8em;
                line-height: 1.8em;
                padding-left:18px;
                &::before{
                    width:15px;
                    height: 15px;
                }   
            }
        }
        & .navButtonWrap{
            position:absolute;
            top:35px;
            width:70px;
            height:65px;
            font-size:var(--fontSpMin);
            &:has(#navLogin){
                right:calc(140px + var(--marginSmall)*3);              
            }
            &:has(#navTextChange){
                right:calc(70px + var(--marginMiddle));
            }
            &:has(#navLanguage){
                right:var(--marginSmall);
            }
        }
        & #navLogin,
        & #navTextChange,
        & #navLanguage{
            width:70px;
            height:60px;
            display: block;
            margin:0;
            padding:0;
            & p{
                text-align:center;
                padding-top:38px;
            }
            & p::before{
                width: 32px;
                height: 32px;
                top:3px;
                left:50%;    
                transform:translateX(-50%);
            }
        }
        & #navTextChangeWrap,
        & #navLanguageWrap {
            display:none !important;
        }
        #navTextChangeWrap.show,
        #navLanguageWrap.show {
            display:block !important;
            right:0 !important;    
        }
    }
}

#pageTitleWrap{
    background: var(--white) ;
    & .inner{
        width: var(--primaryWidth);
        margin:0 auto;
        padding:var(--marginLarge) 0;
        background:url(/img/bg_contentsHeader.png) right no-repeat;
        background-size:300px auto;
    }
    & #pankuzu{
        display: flex;
        align-items: center;
        margin-bottom:var(--marginMiddle);
        font-size: var(--fontMini);
        color: var(--navy);
        & a{
            position: relative;
            text-decoration: underline; 
            padding-right:20px;
           &::after{
            position: absolute;
            display: block;
            content:"";
            width:var(--marginMiddle);
            height:var(--marginMiddle);
            top:50%;
            transform: translateY(-50%);
            right:0;
            background: url(/img/icon_pankuzu.svg) center / contain no-repeat;
           }
           &:hover,
           &:focus{
            color: var(--orange);
            transition: var(--transSecShort);
           }
        }
    }
    & h1{
        width:calc(var(--primaryWidth) - 315px );
        line-height: 1.2em;
    }
    @media(max-width:1024px) {
        & .inner{
            padding:var(--marginMiddle) var(--marginSmall);
            background:url(/img/bg_contentsHeader.png) right bottom no-repeat;
            background-size:20vw auto;
        }
        & #pankuzu a,
        & #pankuzu .now{
            min-width:4em;
            max-width:15em;       
        }
        & #pankuzu a + a,
        & #pankuzu .now{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }    
        & h1{
            width:80vw;
            line-height: 1.4em;
        }    
    }
}

/*-----footer--------------*/
#includeFooter{
    position: absolute;
    top:auto;
    bottom:0;
    width: 100%;
    height: fit-content;
    flex-grow: 1;
    @media(max-width:1024px) {
        position:inherit;
    }
}
#backTop .backtopLink{
    padding: calc(var(--marginLarge)*2) 0 var(--marginLarge) 0;
    width:-moz-fit-content;
    width:fit-content;
    margin: 0 auto;
    & p{
        text-decoration: underline !important;
        &:not(:lang(ja)){
        /*&:lang(en){*/
            padding-bottom:45px;
        }
    }
    & p:hover,
    & p:focus{
        transition: var(--transSecShort);
        color:var(--orange);
    }
    & p::before{
        display: block;
        margin:0 auto var(--marginSmall) auto;
        content: "";
        width: 1em;
        height: 1em;
        background: url(/img/icon_arrow_backtop.svg) center / contain no-repeat;
    }
}
#backTop{
    position: absolute;
    bottom:200px;
    left:50%;
    transform: translateX(-50%);
    & .backtopLink{
        padding: calc(var(--marginLarge)*2) 0 ;
    }
    @media(max-width:1024px) {
        position:inherit;
        margin:0 auto;
        transform:none;
    }
}
footer{
    position: absolute;
    bottom: 0;
    position: inherit;
    width:100%;
    height: auto;
    background: var(--orange) url(/img/bg_footer.svg) right / contain no-repeat;
    color: var(--white);
    font-size: var(--fontMini) !important;
    & img{
        width:500px;
        margin:var(--marginLarge) 0 var(--marginMiddle) 0;
        @media(max-width:1024px) {
            width:80%;
        }   
    }
    & a:hover{
        color:var(--white);
        transition: var(--transSecShort);
    }
    @media(max-width:1024px) {
        background: var(--orange) ;
        padding: var(--marginSmall) var(--marginSmall) 120px var(--marginSmall);      
        & ul#footerLinkWrap{
            display: block;
            width:100%;
        }
        & li{
        padding-right:0;
        padding:5px;
        border-right:none !important;
        }
    }
    &:not(:lang(ja)){
    /*&:lang(en){*/
        & img{
            display: none !important;
        }
    }
}
#footerContainer{
    width:var(--primaryWidth);
    margin:0 auto;
    &:not(:lang(ja)){
    /*&:lang(en){*/
        position: relative;
        &::before{
            content: "";
            display: block;
            position: absolute;
            width:500px;
            height:34.5px;
            top:var(--marginLarge);
            background: url(/img/logo-w_full_en.svg) center / contain no-repeat !important;
            @media(max-width:1024px) {
                width:80%;
                left:var(--marginMiddle);
            }
        }
    }
}
ul#footerLinkWrap{
    display: flex;
    width: calc(var(--primaryWidth)*0.85);
    flex-wrap: wrap;
    & li{
        padding-right:1em;
        margin:var(--marginSmall);
        list-style: none;
        border-right:1px solid var(--black);
    }
    & li:last-child{
        padding-right: 0;
        border-right: none;
    }
    & a{
        display: inline-block;
        text-decoration: underline;
        font-weight: normal;
    }
    &:not(:lang(ja)){
    /*&:lang(en){*/
        padding-top:79.5px;
    }
}
#copyright{
    margin-top:var(--marginLarge);
    padding-bottom:var(--marginMiddle);
    text-align: center;
    color: var(--black);
    & a{
        display: inline-block;
        text-decoration: underline;
    }
    @media(max-width:1024px) {
        font-size:var(--fontSpMin);
    }
}


/*-----mainFunc--------------*/
#mainFunc{
    display:none;
    padding:var(--marginLarge) 0;
    background: var(--orange);
    @media(max-width:1024px) {
        display:block !important;
        width:100vw;
        position:fixed;
        margin:0;
        padding:0;
        bottom:0;
        z-index:999;
    }
}
.mainFuncContainer{
    width:var(--primaryWidth);
    margin:0 auto;
    display: flex;
    & a{
        position: relative;
        width:calc(var(--primaryWidth)/5);
        height:7em;
        text-align: center;
        font-weight: bold;
        color:var(--white);
        & div{
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            top:4em;
            height: 2em;
        }
        &:where(.funcSearchBus, .funcGuide) div p{
            padding-top:10px;
        }
   }
    & a::before{
        position: absolute;
        display: block;
        content:"";
        width:3.5em;
        height:3.5em;
        left:50%;
        transform: translateX(-50%);
        background-size: contain;
        background-repeat: no-repeat;
    }
    & a:hover::before,
    & a:focus::before{
        transform: translate(-50%,-35%);
        transition: var(--transSec) cubic-bezier(0.45, 0, 0.55, 1);
    }   
    & a:not(:last-child)::after{
        position: absolute;
        display: block;
        content: "";
        width:var(--borderWidth);
        height:100%;
        top:0;
        right: 0;
        border-radius: var(--kadomaru);
        background: var(--white);
    }
    @media(max-width:1024px) {
        & a{
            height:100px;
            font-size:var(--fontSpMin);
            & div{
                margin-top:10px;
                padding:2px;
                width: 100%;
            }
            &::before{
                width:40px;
                height:40px;
                top:10px;
            }
            &.funcGuide div p{
                padding-top:10px;
            }
            &:not(:last-child)::after{
                height:80px;
                top:10px;
                background: rgba(255, 255, 255, 0.3);
            }
        }
    }
    &:not(:lang(ja)){
        & a:where(.funcSearchLine, .funcSearchStop, .funcSearchBus) div p{
            padding-top:10px;
        }
        & a:where(.funcSearchTimetable, .funcGuide) div p{
            padding-top:0;
        }
        @media(max-width:1024px) {
            & a.funcGuide div p{
                padding-top:10px !important;
            }    
        }
    }
    &:lang(zh-tw),
    &:lang(zh-cn),
    &:lang(ko){
        & a.funcGuide div p{
            padding-top:10px !important;
        }
    }
}
.funcSearchBus::before{
    background-image: url(/img/icon_mf-bus.svg);
}
.funcSearchLine::before{
    background-image: url(/img/icon_mf-line.svg);
}
.funcSearchStop::before{
    background-image: url(/img/icon_mf-stop.svg);
}
.funcSearchTimetable::before{
    background-image: url(/img/icon_mf-time.svg);
}
.funcGuide::before{
    background-image: url(/img/icon_mf-guide.svg);
}


/*-----container--------------*/
.container{
    width:var(--primaryWidth);
    margin:var(--marginLCenterTop);
    padding:var(--marginContainer);
    border-radius: var(--kadomaru);
    background-color: var(--white);
    &:has(.containerColorLabel){
        padding:0;
    }
    &:has(.markInfoWrap){
        padding:var(--marginMiddle) calc(var(--marginLarge)*0.65) var(--marginLarge);
    }    
    @media(max-width:1024px) {
        width:var(--spContainerWidth);
        &:has(.markInfoWrap){
            padding:var(--marginMiddle) var(--marginSmall) var(--marginMiddle);
        }       
    }
}
.containerTitle{
    padding: var(--marginMiddle);
    font-weight:bold;
    font-size:var(--midashi) ;
    border-left:var(--orange) 10px solid;
    &.hnd{
        border-left:var(--haneda) 10px solid;
    }
    &.nrt{
        border-left:var(--narita) 10px solid;
    }
    @media(max-width:1024px) {
        line-height:1.5em;
    }
}
@media(max-width:1024px) {
    .simpleTitleWrap + section .containerInner:not(
        :where(
            :has(.greeting),
            .historyWrap,
            :has(p:only-child),
            ) ),
    .containerInner.safetyWrap:not(:has(a[href*="barrier"])),/*efforts-smooth*/
    .containerInner:has(.txtBtn.single),/*charter*/
    .containerInner:has( + .webregWrap)/*biz-partner*/
    {
        padding-top: var(--marginMiddle) !important;
    }
}


.containerTitle:has(p:not(:last-child)){
    padding: calc(var(--marginSmall) / 2) calc(var(--marginSmall) / 2) calc(var(--marginSmall) / 2) var(--marginMiddle);
    font-size:var(--normal);
    & p:first-child{
        font-size:var(--midashi);
    }
    & p:nth-child(n+2){
        margin-top:calc(var(--marginSmall) / 2);
        font-size: var(--fontMini) !important;
        font-weight: normal !important;
        & span{
            font-weight:bold;
            &.caution{
                color: var(--red);
            }
        }
    }
}
.containerTitle + .containerInner{
     margin-top: var(--marginContainer);
}
.containerInner{
    & .textsubInfo{
        margin-top: var(--marginMiddle);
        padding: var(--marginMiddle);
        border-radius: var(--kadomaru);
        background:var(--rightblue);
        & a{ 
            padding: var(--marginMiddle) 0;
        }
        & span{
            color: var(--red);
        }
        & ul{
            width: 95%;
            margin: 0 auto;
            & li{
                line-height: 1.5em;
            }
        }
    }
    @media(max-width:1024px) {
        &:has(.lineWrap){
            margin-top:var(--marginMiddle);
        }
    }
}


.container.search{
    padding:0 !important;
    background-color: transparent;
    & .searchTitle{
        padding: var(--marginMiddle);
        border-radius: var(--kadomaruUe);
        color: var(--white);
        background: var(--navy);
        & > div{
            display: flex;
            align-items: center;
            &.block{
                display: block !important;
            }
        }
        &  p.num{
            display: flex;
            align-items: center;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            border-radius: 50%;
            color: var(--navy);
            background: var(--white);
            & span{
                display: inline-block;
                width: 30px;
                margin: 0 auto;
                font-weight: bold;
                text-align: center;
            }
        }
        & + .containerInner{
            border-radius: var(--kadomaruShita) !important;
        }
    }
    .containerInner{
        border-radius: var(--kadomaru);    
        background: var(--white);
        padding: var(--marginContainer);
    }
}
.subMidashi{
    position: relative;
    display: flex;
    align-items: center;
    padding-left: var(--marginMiddle);
    margin-bottom:var(--marginSmall);
    font-weight: bold;
    font-size: var(--submidashi);
    &::before{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--orange);
        left: 0;
    }
}
.containerInner.hnd .subMidashi::before{
    background: var(--haneda);
}
.containerInner.nrt .subMidashi::before{
    background: var(--narita);
}

.kajo{
    position: relative;
    display: flex;
    align-items: center;
    padding-left: var(--marginMiddle);
    margin-bottom:var(--marginSmall);
    &::before{
        content: "";
        position: absolute;
        width: 5px;
        height: 5px;
        background: var(--rightorange);
        left: 0;
    }
}
.txtBtn.single + .kajo{
    margin-top:var(--marginMiddle);
}
section.halfContainerWrap{
    display: flex;
    width:var(--primaryWidth);
    margin:0 auto;
    & .container{
        width:var(--halfContainer);
    }
    & .container:first-child{
        margin-right:var(--marginLarge);
    }
    @media(max-width:1024px) {
        display:block;
        & .container{
            width:var(--spContainerWidth);
        }    
        & .container:first-child{
            margin-right:auto;    
        }
    }
}
.innerSingle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    @media(max-width:1024px) {
        display:block;
        margin-top:var(--marginMiddle);
        > p + a{
            margin-top:var(--marginMiddle);
        }
    }
}
.innerButtonOnly{
    & > p{
        margin-bottom:var(--marginLarge);
        @media(max-width:1024px) {
            margin:var(--marginMiddle) auto;
        }
    }    
}
.txtContLinkWrap{
    & a{
        position: relative;
        border: var(--borderWidth) var(--deepgray) solid;
        border-radius: var(--kadomaru);
        padding: var(--marginMiddle);
        & p{
            width:90%;
            display: flex;
            align-items: center;
        }
        &[href$=".pdf"] p::after{
            content: "";
            display: inline-block;
            background: url(/img/mark_pdf.svg) top / contain no-repeat;
            width:var(--marginMiddle);
            height:var(--marginMiddle);
            margin-left:var(--marginSmall);
        }
        & p.title{
            font-weight: bold;
        }
        & p.summary{
            margin-top:3px;
            font-size: var(--fontMini);
            color: var(--grayblack);
        }
        & p::before{
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            transform: translateY(-50%);
            right: var(--marginMiddle);            
            background: url(/img/icon_arrow-right.svg) center / contain no-repeat ;
        }
        &:hover,
        &:focus{
            background: var(--rightorange);
            transition: var(--transSec);
            border: var(--borderWidth) var(--orange) solid;
            & p::before{
                right:var(--marginSmall);
                transition: var(--transSec);
            }
        }
        &:nth-child(n + 2){
            margin-top: var(--marginSmall);
        }
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle) !important;
    }
}
.singlImgWrap{
    display: flex;
    align-items: center;
    margin-bottom: var(--marginMiddle);
    & img{
        margin: 0 auto;
        @media(max-width:1024px) {
            max-width:100%;
        }
    }
}
.someImgWrap{
    width:fit-content;
    margin:var(--marginMiddle) auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.floatImgWrap{
    & div:has(img){
        width:35%;
        padding-bottom:var(--marginSmall);
        & img{
            width: 100%;
        }
    }
    &.leftImg{
        & div:has(img){
            float:left;
            margin-right: var(--marginMiddle);
        }
    }
    &.rightImg{
        & div:has(img){
            float:right;
            margin-left: var(--marginMiddle);
        }
    }
    &::after{
        content: "";
        display: block;
        clear:both
    }
    @media(max-width:1024px) {
        &:not(:first-child){
            margin-top:var(--marginMiddle) !important;
        }
        & .leftImg{
            margin-top:var(--marginMiddle) !important;
        }
    }
}

/*-----subInformation--------------*/
.CMSinfoWrap{
    & .title{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 0 var(--marginSmall) 25px;
        color: var(--navy);
        font-weight: bold;
        &::before{
            position: absolute;
            width:20px;
            height:20px;
            content: "";
            display: block;
            background:url(/img/icon_info.svg) center / contain no-repeat;
            left: 0;
        }
    }
    & a{
        display: inline-block;
        width: fit-content;
        color: var(--navy);
        font-weight: bold;
        text-decoration: underline;
    }
}
.bfInfoWrap,
.setsubiMarkInfoWrap{
    font-size: var(--fontMini);
    & .title{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 0 var(--marginMiddle) 35px;
        color: var(--navy);
        font-weight: bold;
        &::before{
            position: absolute;
            width:30px;
            height:30px;
            content: "";
            display: block;
            left: 0;
        }
        @media(max-width:1024px) {
            padding:var(--marginSmall) var(--marginSmall) var(--marginSmall) 35px; 
            margin-bottom:var(--marginSmall);
        }
    }
    & span{
        font-weight: bold;
        color: var(--orange);
    }
    & a{
        margin:var(--marginSmall) 0 0 auto;
    }
}
.bfInfoWrap .title::before{
    background:url(/img/icon_bf.svg) center / contain no-repeat;
}
.setsubiMarkInfoWrap .title::before{
    background:url(/img/icon_info.svg) center / contain no-repeat;
}
.setsubiMarkInfoWrap{
    & .inner > div{
        display: flex;
        align-items: center;
        padding:var(--marginSmall);
        background: var(--rightgray);
        &:not(:last-child){
            margin-bottom: var(--marginSmall);
        }
    }
    & .imgWrap{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        & img{
            max-width:100%;
            max-height: 100%;
            object-fit: contain;
            margin:0 auto;
        }
        & + p{
            padding-left: var(--marginSmall);
            &::before{
                content: "：";
                padding-right: var(--marginSmall);
            }
        }
    }
}
.markInfoWrap{
    display: flex;
    width:fit-content;
    margin: 0 0 var(--marginMiddle) auto !important;
    color:var(--grayblack);
    & .inner{
        display: flex;
        align-items: center;
        font-size: var(--fontMini);
        & img{
            width:var(--marginMiddle);
            margin-right: var(--marginSmall);
        }
        & p::before{
            display: inline-block;
            content:":";
            margin-right:5px;
        }
    }
    & .inner:nth-child(n + 2){
        margin-left:var(--marginSmall);
    }
}

.addInfoWrap{
    margin-top: var(--marginMiddle);
    & .title{
        position: relative;
        font-weight: bold;
        margin-bottom: var(--marginSmall);
        & p{
            padding-left: var(--marginMiddle);
        }
        & p::before{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            left:0;
            content: "";
            width:10px;
            height: 10px;
            background: var(--orange);
        }
    }
    & .wrap{
        padding: var(--marginMiddle);
        border-radius: var(--kadomaru);
        font-size: var(--fontMini);
        background: var(--gray);
        & .innerTitle{
            position: relative;
            display: flex;
            align-items: center;
            padding-left: 8px;
            font-weight: bold;
            &::before{
                position: absolute;
                left: 0;
                content: "";
                width: 5px;
                height: 5px;
                background: var(--navy);
            }
            &:not(:first-child){
                margin-top: var(--marginSmall);
            }
        }
    }
    & + p{
        margin-top: var(--marginMiddle);
    }
}
.tableAddInfo{
    margin: var(--marginMiddle) auto 0 auto;
    width:90%;
    & ul{
        margin: var(--marginSmall) auto 0 auto;
        width:95%;
        & li:not(:last-child){
            margin-bottom: var(--marginSmall);
        }
    }
    
}


/*-----link-layout--------------*/
.textLinkListWrap{
    width: 100%;
    & a.innerWrap{
        position: relative;
        padding:var(--marginMiddle);
        border:var(--borderWidth) var(--gray) solid;
        border-radius: var(--kadomaru);
        &:nth-child(n + 2){
            margin-top:var(--marginMiddle);
        }
        &::after{
            position: absolute;
            display: block;
            content: "";
            width: var(--marginLarge);
            height: var(--marginLarge);
            background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
            top:50%;
            transform: translateY(-50%);
            right:var(--marginMiddle);
        }
        &:hover,
        &:focus{
            background: var(--rightorange);
            border:var(--borderWidth) var(--orange) solid;
            transition: var(--transSec);
        }
        & .inner{
            display: flex;
            align-items: center;
        }
        & .day{
            font-weight: bold;
            margin-right:var(--marginMiddle);
        }
        & .status{
            display: inline-block;
            width:fit-content;
            padding:var(--marginSmall) var(--marginMiddle);
            border-radius: var(--kadomaruMini);
            font-size: var(--fontMini);
            color:var(--white);
            &.oshirase{
                background: var(--orange);
                display:none !important;
            }
            &.zyuyo{
                background: var(--red);
            }    
        }
        & .articleTitle{
            padding:var(--marginSmall) 0 0 0;
            line-height: 1.5em;
            width:95%;
            text-decoration: underline;
            & span{
                color: var(--red) !important;
                text-decoration: underline;
            }
        }
        &[href$=".pdf"] .articleTitle::after{
            display: inline-block;
            background: url(/img/mark_pdf.svg) top / contain no-repeat;
            width:var(--marginMiddle);
            height:var(--marginMiddle);
            margin-left:var(--marginSmall);
            content: "PDFマーク";
            font-size: 0;
        }
    }
    @media(max-width:1024px) {
        & a.innerWrap{
            padding:var(--marginMiddle) 40px var(--marginMiddle) var(--marginMiddle);
        }
    }
}
.linkOut{
    display: flex !important;
    align-items: center !important;
    max-width: fit-content;
    text-decoration: underline !important;
    color: var(--navy) !important;
    & img + div{
        margin-left:var(--marginSmall);
    }
    & .linkTitle{
        font-weight: bold;
    }
    & .url{
        position: relative;
        display: flex;
        align-items: center;
        &::after{
            position:absolute;
            content: "";
            width: var(--marginMiddle);
            height:  var(--marginMiddle);
            background: url(/img/icon_window.svg) center / contain no-repeat;
            right:-20px;
        }
    }
    &:hover,
    &:focus{
        color: var(--orange) !important;
        transition: var(--transSecShort);
    }
}
@media(max-width:1024px) {
    .linkOut .url{
        padding-right: 20px;
        &::after{
            right:0;
        }
    }
}

/*-----information--------------*/
.miniMenuWrap{
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto 0 auto;
    display: flex;
    justify-content: space-between;
    @media(max-width:1024px) {
        width:var(--spContainerWidth);
        display:block;
         & > div,
         & .txtBtn{
            padding:var(--marginSmall);
            width:100% !important;
            &:not(:last-child){
                margin-bottom:var(--marginSmall)
            }
         }
    }
}
.inpageLinkWrap{
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    & a{
        position: relative;
        width:calc((var(--primaryWidth) - var(--marginSmall))/2);
        display: flex;
        align-items: center;
        padding:var(--marginMiddle);
        border-radius:var(--kadomaru);
        border:var(--borderWidth) var(--navy) solid;
        font-weight: bold;
        color: var(--white);
        background: var(--navy);
        &:nth-child(n + 3){
            margin-top: var(--marginSmall);
        }
        & p{
            display: flex;
            align-items: center;
        }
        & p::after{
            position:absolute;
            content: "";
            width:20px;
            height: 20px;
            right:var(--marginMiddle);
            background:url(/img/icon_arrow_inpage_bottom_wh.svg) center / contain no-repeat;
        }
        &:hover,
        &:focus{
            color: var(--navy);
            background:var(--rightblue);
            transition: var(--transSec);
            & p::after{
                background:url(/img/icon_arrow_inpage_bottom_nv.svg) center / contain no-repeat;
                transition: var(--transSec);
            }
        }
    }
    &.airport{
        & a{
            background: var(--white);
            color: var(--black);
            border: var(--borderWidth) var(--deepgray) solid;
            &:hover,
            &:focus{
                transition: var(--transSec);
            }
            &.hnd{              
                &:hover,
                &:focus{
                    background: var(--hanedaRight);
                    border: var(--borderWidth) var(--haneda) solid;
                }
                & p::after{
                    background:url(/img/icon_arrow_inpage_bottom_hnd.svg) center / contain no-repeat;
                }
            }
            &.nrt{
                &:hover,
                &:focus{
                    background: var(--naritaRight);
                    border: var(--borderWidth) var(--narita) solid;
                }
                & p::after{
                    background:url(/img/icon_arrow_inpage_bottom_nrt.svg) center / contain no-repeat;
                }
            }
        }
    }
    @media(max-width:1024px) {
        width:var(--spContainerWidth);
        margin:var(--marginMiddle) auto 0 auto;
        font-size:var(--fontMini);
        & a p{
            padding-right:25px;
        }
    }
}
.simpleTitleWrap{
    width:var(--primaryWidth);
    margin:var(--marginLarge) auto 0 auto;
    font-weight: bold;
    @media(max-width:1024px) {
        width:var(--spContainerWidth);
    }   
}
.pagetopInfoWrap{
    position: relative;
    width:var(--primaryWidth);
    margin:var(--marginLarge) auto 0 auto;
    & div:not(.title){
        width:820px;
        padding-left:30px;
        line-height: 1.5em;
        @media(max-width:1024px) {
            padding-left:0;
        }
    }
    & div.full{
        width:100%;
    }
    & .title{
        position: relative;
        font-weight: bold;
        &::before{
            position: absolute;
            content: "";
            top:0;
            left:0;
            width:20px;
            height:20px;
            background: url(/img/icon_finger.svg) center / contain no-repeat;
        }
        & p{
            width: 80%;
            padding-left:30px;
            margin-bottom:var(--marginSmall);
            @media(max-width:1024px) {
                width:100%;
                margin-bottom:var(--marginMiddle);
            }
        }
    }
    & .caution{
        font-size: var(--fontMini);
        color:var(--red);
    }
    & .filters{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-size:var(--fontMini);
        & p:first-child::after{
            display: inline-block;
            content: "：";
            padding:0 5px;
        }
        @media(max-width:1024px) {
            width:100% !important;
            padding:var(--marginSmall) !important;
            background:var(--rightgray);
        }
    }
    @media(max-width:1024px) {
        width:var(--spContainerWidth);
        & .filters + .caution{
            margin-top:var(--marginSmall);
            width:100%;
        }
    }
}
.baseInfoWrap{
    & .inner{
        display: flex;
        align-items: start;
        &:not(:last-child){
            margin-bottom:var(--marginMiddle);
        }
        & .title{
            width:180px;
            height: fit-content;
            padding:var(--marginSmall);
            border-radius: var(--kadomaruMini);
            text-align: center;
            color:var(--white);
            background:var(--black);
        }
        & .infoCont{
            box-sizing: border-box;
            width: calc(var(--primaryWidth) - 180px);
            padding-left: var(--marginMiddle);
            line-height:1.5em;
            padding-top: calc(var(--marginSmall) / 2);
            & .caution{
                font-size:var(--fontMini);
                color: var(--red);
            }
            & table.fare{
                & th{ text-align: left;}
                & td{ text-align: right;}
            }
            & .label{
                margin-bottom: var(--marginSmall);
                & p::before{
                    display: inline;
                    content: "【";
                    padding-right: 3px;
                }
                & p::after{
                    display: inline;
                    content: "】";
                    padding-left: 3px;
                }
            }
            & p a[href*="lost"]{
                display: inline-block;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;
                color: var(--navy);
                &:hover{
                    transition: var(--transSecShort);
                    color: var(--orange);
                }
            }
            & .pattern{
                & details{
                    & + details{
                        margin-top: var(--marginSmall);
                    }
                    & summary{
                        display: flex;
                        align-items: center;
                        width: fit-content;
                        padding-left:1em;
                        font-weight: bold;
                        color: var(--navy);
                        text-decoration: underline;
                        & p{
                            line-height: 1.6em;
                        }
                        &:hover{
                            color: var(--orange);
                            transition: var(--transSecShort);
                        }
                        &::after{
                            content: "";
                            display: inline-block;
                            width:15px;
                            height: 15px;
                            margin-left:5px;
                            background: url(/img/icon_arrow_bottom_nv.svg) center / contain no-repeat;
                        }
                        & + div{
                            margin-top:5px;
                            margin-left: 1em;
                            padding:var(--marginSmall);
                            font-size:var(--fontMini);
                            background: var(--rightblue);
                        }
                        @media(max-width:1024px) {
                            &::after{
                                margin-left:5px;
                                min-width:15px;
                                min-height:15px;
                            }
                        }
                    }
                    &[open] summary::after{
                        background: url(/img/icon_arrow_up_nv.svg) center / contain no-repeat;
                    }
                }
                & + .label{
                    margin-top:var(--marginMiddle);
                }
                & + .pattern{
                    margin-top:var(--marginSmall);
                }
                & + p{
                    margin-top:var(--marginMiddle);
                }
            }
            & .description{
                margin: var(--marginSmall) auto var(--marginSmall)  var(--marginSmall) ;
                font-size: var(--fontMini);
                & p::before{
                    display: inline;
                    content: "※";
                    padding-right: .5em;
                }
            }
            & p a[href^="#"] {
                display: inline;
                font-weight: bold;
                text-decoration: underline;
                color:var(--navy);
            }
        }
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle);
        & .title{
            width:120px !important;
            font-size:var(--fontMini);
        }
        & .infoCont{
            width: calc(var(--primaryWidth) - 120px) !important;
        }
    }
}
.webCouponWrap{
    padding: var(--marginMiddle);
    margin-top: var(--marginMiddle);
    border: var(--borderWidth) var(--navy) solid;
    border-radius: var(--kadomaru);
    & .title{
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 0 var(--marginSmall) 35px;
        color: var(--navy);
        font-weight: bold;
        &::before{
            position: absolute;
            width:30px;
            height:30px;
            content: "";
            display: block;
            background:url(/img/icon_ticket.svg) center / contain no-repeat;
            left: 0;
        }
    }
    & .caution{
        font-size: var(--fontMini);
    }
    & a{
        margin:var(--marginSmall) 0 0 auto;
    }
    @media(max-width:1024px) {
        margin-top: var(--marginMiddle);
    }
}

.lineWrap{
    & .inner{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:var(--marginMiddle);
        border-radius: var(--kadomaru);
        &:not(:last-child){
            margin-bottom:var(--marginMiddle);
        }
        &.haneda{
            border: var(--haneda) solid;
            border-width: var(--borderWidth) var(--borderWidth) var(--borderWidth) var(--marginLarge);
        }
        &.narita{
            border: var(--narita) solid;
            border-width: var(--borderWidth) var(--borderWidth) var(--borderWidth) var(--marginLarge);
        }   
        & .txtWrap{
            width:60%;
            & .title{
                display: flex;
                align-items: center;
                & .lineName{
                    font-weight: bold;
                }
                @media(max-width:1024px) {
                    display:block;
                }
                & .statusWrap{
                    display: flex;
                    align-items: center;
                    padding: 0 var(--marginMiddle);
                    & .status{
                        padding:calc(var(--marginSmall)/2) var(--marginMiddle);
                        border-radius: var(--kadomaruMini);
                        font-size: var(--fontMini);
                        color:var(--white);
                        background: var(--black);
/*                        &.none{
                            color:var(--grayblack);
                            background: var(--gray);
                        }*/
                        &:first-child{
                            margin-right:var(--marginSmall);
                        }
                    }
                }
            }
            & .info{
                padding-top:var(--marginSmall);
                line-height: 1.5em;
                font-size: var(--fontMini);
                color:var(--grayblack);
            }
        }
        @media(max-width:1024px) {
            display:block;
            width:100% !important;
            & .txtWrap{
                width:100% !important;
                & .title{
                    width:100% !important;
                    & .statusWrap{
                        margin:var(--marginSmall) auto !important;
                        text-align:center;
                        & p{
                            width:200px;
                        }
                    }
                }
                & .info{
                    padding-top:0;
                    padding-bottom:var(--marginSmall);
                }    
            }
            & .txtBtn + .txtBtn{
                margin-top:var(--marginSmall);
            }
            &.haneda,
            &.narita{
                border-width: var(--borderWidth) var(--borderWidth) var(--borderWidth) 10px;
            }
        }
    }
}

.busstopsWrap{
    position: relative;
    & .inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding:var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 80px;
        border-radius: var(--kadomaru);
        font-weight: bold;
        &::before{
            content: "";
            position: absolute;
            left:var(--marginMiddle);
            z-index: 99;
            width:50px;
            height:50px;
            background: url(/img/icon_busstop.svg) center / contain no-repeat;
        }
        &:nth-child(odd){
            background:var(--gray);
        }
        &:nth-child(even){
            background: var(--rightgray);
        }
        &:not(:last-child){
            margin-bottom: var(--marginMiddle);
        }
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle);
        & .inner{
            display:block;
            padding:var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 58px;
            &::before{
                top:50%;
                transform:translateY(-50%);
                left:var(--marginSmall);
                width:40px;
                height:40px;
            }
            &:not(:last-child){
                margin-bottom: var(--marginSmall);
            }  
            & > p{
                margin-bottom:var(--marginSmall);
                font-size:var(--submidashi);
            }
        }
    }
}
.mapWrap{
    margin:var(--marginMiddle) 0;
    & iframe{
        width:100%;
        height:300px;
        border-radius: var(--kadomaruMini);
    }
}
.spotInfoWrap:not(:last-child){
    margin-bottom: var(--marginMiddle);
}
.spotImgWrap{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
/*    &:has(img:only-child) img{
        width: 80% !important;
    }*/
    & img{
        display: block;
        width:40%;
        height: auto;
        border-radius: var(--kadomaruMini);
    }
    @media(max-width:1024px) {
        display:block;
        & img{
            width:90% !important;
            margin: 0 auto;
            & + img{
                margin-top:var(--marginMiddle);
            }
        }
    }
}
.AirBtnWrap{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    &:not(:last-child){
        margin-bottom: var(--marginMiddle);
    }
    & a{
        width:300px;
    }
    @media(max-width:1024px) {
        display:block;
        & a{
            width:280px;
            margin: var(--marginSmall) auto;
            &:last-child{
                margin-bottom:0 !important;
            }
        }    
    }
}


/*-----search--------------*/
a.routemapWrap{
    position: relative;
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto 0 auto;
    padding: var(--marginMiddle);
    border: var(--borderWidth) var(--deepgray) solid;
    border-radius: var(--kadomaru);
    background: var(--white);
    &::before,
    &::after{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    &::before{
        width: 100px;
        height: 100%;
        background: url(/img/img_routemap_mini.png) center / contain no-repeat;
    }
    &::after{
        right: var(--marginMiddle);
        width: 30px;
        height: 30px;
        background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
    }
    & p{
        padding-left: 120px;
    }
    & p:first-child{
        font-weight: bold;
    }
    &:hover,
    &:focus{
        border: var(--borderWidth) var(--orange) solid;
        background: var(--rightorange);
        transition: var(--transSec);
        &::after{
            right: var(--marginSmall);
            transition: var(--transSec);
        }    
    }
    @media(max-width:1024px) {
        padding:var(--marginSmall);
        width:var(--spContainerWidth);
        margin:var(--marginLarge) auto 0 auto;
        &::before{
            height:80%;
            left:var(--marginSmall);
            background-position:left !important;
        }    
        & p{
            padding: 0 25px 0 110px;
        }
        & p:first-child{
            font-size:var(--fontMini);
            font-weight: bold;
        }    
        & p:nth-child(2){
            font-size:var(--fontSpMin);
        }
        &::after{
            right: var(--marginSmall);
            width: 20px;
            height: 20px;
            background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
        }    
    }
}
.search .inputWrap{
    & :where(
        .dep,
        .arr,
        .date,
        .airName > div,
        .keywords,
        .area,
        .how,
        .airCompanyName
        ){
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 180px 1fr;   
        @media(max-width:1024px) {
            display:bock;
            grid-template-columns:unset;
            grid-template-rows:unset;
        }
    }
    & .inner:has(.depOrArr) + .airName{
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 180px 315px 1fr;   
        @media(max-width:1024px) {
            display:bock;
            grid-template-columns:unset;
            grid-template-rows:unset;
        }
    }
    & :where(.dep, .arr){
        position: relative;
        &::after{
            content: "";        
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: var(--marginMiddle);
            width: 30px;
            height: 30px;
            background: url(/img/icon_arrow-right-nv.svg) center / contain no-repeat;
        }
        &:not(:has(input))::after{
            background: none;
        }
        & .fix{
            display: flex;
            align-items: center;
            padding:var(--marginMiddle);
            margin-left:calc(var(--marginSmall) + var(--borderWidth));
        }
        @media(max-width:1024px) {
            & input{
                padding-right:30px !important;
            }
            &::after{
                width: 20px;
                height: 20px;
                top:auto;
                transform:none;
                right: 10px;
                bottom:20px !important;
            }
        }
    }
    & .how{
        margin: var(--marginMiddle) auto;
        & .radioWrap{
            display: flex;
            align-items: center;
            margin-left: var(--marginSmall);
            & label{
                position: relative;
                display: flex;
                align-items: center;   
                height: 70px;
                padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 70px;
                border-radius: var(--kadomaru);
                border: var(--borderWidth) var(--deepgray) solid;
                &:not(:last-child){
                    margin-right: var(--marginSmall);
                }
                &::before{
                    content: "";
                    position: absolute;
                    left: var(--marginMiddle);
                    width: 40px;
                    height: 40px;
                    background: var(--white);
                    border: var(--borderWidth) var(--deepgray) solid;
                    border-radius: 50%;
                }
                & p{
                    display: flex;
                    align-items: center;
                }
            }
            & input:checked{
                & + label p::before{
                    content: "";
                    position: absolute;
                    left: calc(var(--marginMiddle) + 8px);
                    width: 30px;
                    height: 30px;
                    background: var(--orange);
                    border-radius: 50%;
                }
            }
            @media(max-width:1024px) {
                & label{
                    padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 50px;
                    &::before{
                        left: var(--marginSmall);
                        width: 30px;
                        height: 30px;
                    }    
                }
                & input:checked + label p::before{
                    left: calc(var(--marginSmall) + 7px);
                    width:20px;
                    height: 20px;
                }
            }            
        }
    }
    & .subtitle{
        width:180px;
        height: 70px;
        display: flex;
        align-items: center;
        text-align: center;
        padding: var(--marginMiddle);
        border-radius: var(--kadomaruHidari);
        font-size: var(--submidashi);
        font-weight: bold;
        background: var(--rightorange);
        & p{
            width: 100%;
            text-align: center !important;
        }
        @media(max-width:1024px) {
            width:100%;
            height:fit-content;
            margin-bottom:2px;
            padding: var(--marginSmall);
            border-radius:var(--kadomaruUe);
        }
    }
    & input[type="text"],
    & input[type="date"]{
        height: 70px;
        margin-left:var(--marginSmall);
        padding: var(--marginMiddle);
        border: var(--borderWidth) var(--deepgray) solid;
        font-size: var(--submidashi);
        cursor: pointer;
        &:hover,
        &:focus{
            color: var(--orange);
            border: var(--borderWidth) var(--orange) solid;
            transition: var(--transSec);
        }
        @media(max-width:1024px) {
            height:60px;
            margin-left:0;
        }
    }
    & div.dep:has( + .exchange) input[type="text"],
    & .exchange + div.arr input[type="text"]{
        border-radius: var(--kadomaru);
        text-align: center;
        &:not(:placeholder-shown){
            text-align:left;
            font-weight: bold;
        }
        &::placeholder{
            font-weight: bold;
            color: var(--navy);
            text-decoration: underline;
        }
        &:hover,
        &:focus{
            background: var(--rightorange);
        }
        @media(max-width:1024px) {
            text-align:left;
        }
    }
    & .exchange{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width:100%;
        margin: 0 0 0 auto;
        & div{
            margin-left: 75px;
            width: 30px;
            height: calc(tan(60deg) * 20px / 2);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            background: var(--rightorange);
            @media(max-width:1024px) {
                margin-left: 20px;
            }
        }
        & .txtLinkNv p{
            font-size:1.2em;
            padding: var(--marginMiddle) 0 var(--marginMiddle) 25px;
            &::before{
                width:20px !important;
                height:20px !important;
                background: url(/img/icon_search_exchange.svg) center / contain no-repeat !important;
            }
        }
        &:not(:has(.txtLinkNv)) div{
            margin: var(--marginSmall) auto var(--marginSmall) 75px;
        }
    }
    & .inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: var(--marginLarge);
        & .date input{
            width:300px;
        }
        & .time{
            display: flex;
            align-items: center;
        }
        & .depOrArr > div{
            display: flex;
            align-items: center;
            width: 160px;
            height: 70px;
            padding: var(--marginSmall);
            border: var(--borderWidth) var(--deepgray) solid;
            &:lang(en){
                width: fit-content !important;
                min-width:160px;
            }
            & label{
                display: flex;
                align-items: center;
                width: 100%;;
                height: 100%;
                font-weight: bold;
                color: var(--grayblack);
                background: var(--gray);
                cursor: pointer;
                & p{
                    width: 100%;
                    text-align: center;
                }
                &:hover,
                &:focus{
                    color: var(--navy);
                    background: var(--rightblue); 
                    transition: var(--transSecShort);
                }
            }
            & input[type="radio"]:checked + label{
                color: var(--white);
                background: var(--navy);
                transition: var(--transSecShort);
            }
        }
        &:not(:has(.time)){
            margin-top: 0 !important;
            justify-content: start;
            margin-bottom: var(--marginLarge);
            & .date + .depOrArr,
            & .depOrArr + .depOrArr{
                margin-left: var(--marginMiddle);
            }
        }
        @media(max-width:1024px) {
            display:block;
            & .date input{
                width:100%;
                margin-bottom:4px;
            }
            & .time{
                width:fit-content;
                margin: 0 auto 4px auto;
            }
            & .depOrArr > div{
                margin: 0 auto !important;
                width:70%;
            }   
            &:not(:has(.time)){
                margin-bottom:var(--marginMiddle);
                & .date + .depOrArr,
                & .depOrArr + .depOrArr{
                    margin-left: 0;
                }
                & .depOrArr + .depOrArr{
                    margin-top:4px;
                }
            } 
        }
    }
    & :where(.timeHH, .timeMM){
        position: relative;
        display: flex;
        align-items: center;
        &::after{
            content: "";
            position: absolute;
            left: 70px;
            width: 15px;
            height: calc(tan(60deg) * 10px / 2);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            background: var(--navy);
            @media(max-width:1024px) {
                right:10vw;
            }
        }
    }
    & .timeHH{
        margin-right: var(--marginSmall);
    }
    & select{
        width: 100px;
        height: 70px;
        margin-right: var(--marginSmall);
        padding:var(--marginMiddle);
        border: var(--borderWidth) var(--deepgray) solid;
        color: var(--black);
        &:hover,
        &:focus{
            color: var(--orange);
            border: var(--borderWidth) var(--orange) solid;
            transition: var(--transSec);
        }
        & option{
            color: var(--black) !important;
        }
        &[name="inCarrierCode"]{
            width:300px;
            margin-left: var(--marginSmall);
        }
        @media(max-width:1024px) {
            width:23vw;
            &[name="inCarrierCode"]{
                width:100%;
                height: 60px;
                margin-left:0;
                margin-bottom:4px;
            }
        }
    }
    & select[name="inCarrierCode"] + input[name="airFlight"]{
        width:400px;
        @media(max-width:1024px) {
            width:100% !important;
        }
    }
    & .airName{
        .subtitle{
            position: relative;
            &::after { /*select-inCarrierCode_decoration*/
                content: "";
                position: absolute;
                right:-292.5px;
                width: 15px;
                height: calc(tan(60deg)* 10px / 2);
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                background: var(--navy);
                @media(max-width:1024px) {
                    right:var(--marginSmall);
                    bottom:-37.5px;
                }
            }
        }
        & :has(input){
            .subtitle::after {
                display: none;
            }
            & input[type="text"]:has( + input[type="hidden"]){
                border-radius: 0 !important;
                font-weight: normal !important;
                &::placeholder{
                    text-align: left !important;
                    font-weight: normal !important;
                    color:var(--deepgray);
                    text-decoration: none;
                }
                &:hover{
                    cursor: text !important;
                    background: var(--white) !important;
                }
            }
        }
        & + ul{
            grid-column: 1 / 3;
            grid-row: 2 / 2;
            background: var(--rightgray);
            list-style: none;
            & li{
                margin: var(--marginSmall);
                padding:var(--marginSmall);
                cursor: pointer;
                &:hover{
                    background: var(--rightorange);
                    transition: var(--transSecShort);
                }
            }
        }
    }   
    & .airCompany{
        & .airCompanyName{
            margin-top: var(--marginMiddle);
        }
        & .airDetail{
            margin-top: var(--marginMiddle);
            display: flex;
            align-items: center;   
        }
        
        & .domeOrInter{
            display: flex;
            align-items: center;
            margin-left: var(--marginSmall);
            & label{
                position: relative;
                display: flex;
                align-items: center;   
                height: 70px;
                padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 70px;
                border-radius: var(--kadomaru);
                border: var(--borderWidth) var(--deepgray) solid;
                &:not(:last-child){
                    margin-right: var(--marginSmall);
                }
                &::before{
                    content: "";
                    position: absolute;
                    left: var(--marginMiddle);
                    width: 40px;
                    height: 40px;
                    background: var(--white);
                    border: var(--borderWidth) var(--deepgray) solid;
                    border-radius: 50%;
                }
                & p{
                    display: flex;
                    align-items: center;
                }
            }
            & input:checked{
                & + label p::before{
                    content: "";
                    position: absolute;
                    left: calc(var(--marginMiddle) + 8px);
                    width: 30px;
                    height: 30px;
                    background: var(--orange);
                    border-radius: 50%;
                }
            }
        }
        & .airDep{
            width: fit-content;
            margin-left:var(--marginMiddle);
            position: relative;
            display: flex;
            align-items: center;
            &::after{
                content: "";
                position: absolute;
                right: var(--marginLarge);
                width: 15px;
                height: calc(tan(60deg) * 10px / 2);
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                background: var(--navy);
            }
            & select{
                width:300px;        
            }
        }   
    }
    & .subInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--marginMiddle);
        margin-bottom: var(--marginMiddle);
        font-size: var(--fontMini);
        border-radius: var(--kadomaru);
        color: var(--navy);
        background: var(--gray);
        & button{
            position: relative;
            padding: var(--marginMiddle);
            border: var(--borderWidth) var(--deepgray) solid;
            border-radius:var(--kadomaru);
            background: var(--white);
            & p{
                padding-left:30px;
                &::before{
                    content: "";
                    position:  absolute;
                    left: var(--marginMiddle);
                    width: 20px;
                    height: 20px;
                    background: url(/img/icon_arrow_up_nv.svg) center / contain no-repeat;
                }
            }
            &:hover,
            &:focus{
                border: var(--borderWidth) var(--orange) solid;
                color: var(--orange);
                transition: var(--transSecShort);
            }
        }
        @media(max-width:1024px) {
            display:block;
            & button{
                display:block;
                width:fit-content;
                margin: var(--marginSmall) 0 0 auto;
                padding:0 0 0 10px;
                background:transparent;
                border:none;
                text-decoration:underline;
                &::hover,
                &:focus{
                    border:none !important;
                }
            }
        }
    }
    & .areaMap{
        position: relative;
        width:100%;
        height: 662px;
        background: url(/img/bg_search_areamap.svg) center / cover no-repeat;
        & button{
            position: absolute;
            width:fit-content !important;
            max-width:200px !important;
            padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) var(--marginSmall) ;
            border: var(--borderWidth) var(--deepgray) solid;
            border-radius: var(--kadomaru);
            font-weight: bold;
            background: var(--white);
            &:lang(en){
                word-break: break-all;
            }
            & p{
                position: relative;
                padding-left:25px;
                text-align: left;
            }
            & p::before{
                content: "";
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                left:0;
                width: 15px;
                height: 15px;
                background: url(/img/icon_arrow-right.svg) center / contain no-repeat;
            }
            &:hover,
            &:focus{
                background: var(--rightorange);
                border: var(--borderWidth) var(--orange) solid;
                transition: var(--transSec);
                & p::after{
                    right: -8px;
                    transition: var(--transSec);
                }
            }
            /*campus_984*662*/
            &.narita{
                top:225px;
                left:720px;
            }
            &.haneda{
                top:531px; 
                left:396px;
                &:lang(en){
                    top:520px; 
                    left:340px;    
                }
            }
            &.tcatTokyo{
                top:310px; 
                left:430px;
                &:lang(en){
                    top:280px; 
                    left:300px;    
                }
            }
            &.TDR{
                top:550px; 
                left:520px;
            }
            &.ikebukuroShinjuku{
                top:375px; 
                left:322px;
            }
            &.tokyo23{
                top:437px; 
                left:261px;
                &:lang(en){
                    top:380px; 
                    left:100px;    
                }
            }
            &.odaiba{
                top:470px; 
                left:544px;
            }
            &.kasai{
                top:375px; 
                left:500px;
                &:lang(en){
                    top:375px; 
                    left:550px;
                }
            }
            &.tama{
                top:313px; 
                left:119px;
                &:lang(en){
                    top:270px; 
                    left:80px;    
                }
            }
            &.yokohama{
                top:582px; 
                left:311px;
                &:lang(en){
                    top:590px; 
                    left:250px;    
                }
            }
            &.saitama{
                top:194px; 
                left:252px;
            }
            &.tsudanuma{
                top:300px; 
                left:600px;
                &:lang(en){
                    top:270px; 
                    left:520px;    
                }
            }
            &.tochigi{
                top:42px; 
                left:411px;
            }
            &.ibaraki{
                top:104px; 
                left:653px;
            }
            &.gunma{
                top:29px; 
                left:24px;
            }
            &.chiba{
                top:400px; 
                left:770px;
            }
        }
        @media(max-width:1024px) {
            /*direction: rtl;*/
            overflow-x: scroll;
            background:none !important;
            -webkit-overflow-scrolling: touch;
            & > div{
                width:984px;
                height:662px;
            }
            &::before{
                content:"";
                position:absolute;
                top:0;
                left:0;
                width:984px;
                height:662px;
                background: url(/img/bg_search_areamap.svg) center / cover no-repeat;
            }
            & button{
                &.narita,
                &.haneda,
                &.tsudanuma,
                &.yokohama{
                    width:110px !important;
                }
                &.tokyo23,
                &.ikebukuroShinjuku,
                &.odaiba,
                &.tama,
                &.saitama,
                &.gunma,
                &.tochigi,
                &.ibaraki{
                    width:145px !important;
                }
                &.tcatTokyo,
                &.chiba{
                    width:160px !important;
                }
                &.TDR,
                &.kasai{
                    min-width:240px !important;
                }
                &.tokyo23{
                    left:230px;
                }
                &.yokohama{
                    top:600px; 
                }  
            }
        }
    }
    & .txtLinkWrap a p{
        margin-bottom: var(--marginMiddle);
        font-weight: normal !important;
    }

}
.container.search{
    & .chosen{
        background: var(--rightorange);
        & .choiceBtn{
            border:var(--borderWidth) var(--orange) solid;
            color: var(--orange);
            background: var(--white);
        }
    }
    & .single{
        width: 350px;
        margin:0 auto;
        &:last-child{
            margin-top:var(--marginLarge);
        }
    }
}
.serchYokoBtn{
    display: flex;
    justify-content: space-evenly;
    & div{
        padding:var(--marginMiddle);
    }
    @media(max-width:1024px) {
        display:block;
    }
}
.nextFlow{
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto 0 auto;
    text-align: center;
    & div{
        width: 30px;
        height: calc(tan(60deg) * 20px / 2);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        margin:0 auto var(--marginLarge) auto;
        background: var(--deepgray);
    }
    & p{
        margin: 0 auto;
        padding: var(--marginMiddle);
        border-radius: var(--kadomaru);
        font-size: var(--fontMini);
        color: var(--grayblack);
        background: var(--rightgray);
        @media(min-width:1023px) {
            margin-bottom:150px;
        }
    }
    @media(max-width:1024px) {
        display:block;
        width:var(--spContainerWidth);
        margin: var(--marginMiddle) auto 0 auto;
        & div{
            margin:0 auto var(--marginMiddle) auto;
        }
    }
}

/*-----search > list--------------*/
.container.list{
    & .searchTitle{
        & div{
            position: relative;
            display: flex;
            align-items: center;
        }
        &:where(.hnd, .nrt){
            & p{
                padding-left: 40px;
            }
            & p::before{
                content: "";
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                left:0;
                width:35px;
                height: 35px;
            }
        }
        &.hnd{
            background: var(--haneda);
            & p::before{
                background: url(/img/icon_hnd_wh.svg) center / contain no-repeat;
            }
        }
        &.nrt{
            background: var(--narita);
            & p::before{
                background: url(/img/icon_nrt_wh.svg) center / contain no-repeat;
            }
        }
    }
    & form{
        &:nth-child(odd) div.resultWrap{
            background: var(--gray);
        }
        &:nth-child(even) div.resultWrap{
            background: var(--rightgray);
        }
        &:not(:last-child) div.resultWrap{
            margin-bottom: var(--marginSmall);
        }
    }
    & :where( .nrt, .hnd ) + .containerInner .resultWrap > div{
        &:nth-child(odd){
            background: var(--gray);
        }
        &:nth-child(even){
            background: var(--rightgray);
        }
        &:not(:last-child){
            margin-bottom: var(--marginSmall);
        }
    }
    & .resultWrap{
        border-radius: var(--kadomaru);
        & > div{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--marginMiddle);
            border-radius: var(--kadomaru);
            font-weight: bold;
            &:has(.haneda, .narita){
                &:nth-child(odd){
                    background: var(--rightgray);
                }
                &:nth-child(even){
                    background: var(--gray);
                }
                &:not(:last-child){
                    margin-bottom:var(--marginSmall);
                }
            }
            &:nth-child(odd):has(p:empty){
                background: var(--white) !important;
                    & ~ div:nth-child(even){
                        background: var(--gray) ;
                    }
                    & ~ div:nth-child(odd){
                        background: var(--rgray);
                    }
            }
            &:nth-child(even):has(p:empty){
                background: var(--white) !important;
            }
            & p:where(.busstop, .hotel){
                display: flex;
                align-items: center;                
                & img{
                    width: 30px;
                    margin-right: 10px;
                }
            }
            & .btnWrap{
                display: flex;
                min-width: fit-content;
                & a:not(:last-child){
                    margin-right: var(--marginMiddle);
                }
                & .txtBtn{
                    width:fit-content;
                    &::before{
                        width: 20px;
                        height: 20px;
                    }    
                }
                & .fixBtn{
                    width:200px;
                    padding: var(--marginMiddle);
                    border-radius: var(--kadomaru);
                    border:var(--borderWidth) var(--orange) solid;
                    font-size: 1.2em;
                    font-weight: bold;
                    color: var(--white);
                    background: var(--orange);
                    &:hover,
                    &:focus{
                        color: var(--black);
                        background: var(--rightorange);
                        transition: var(--transSec);
                    }
                }
                &.unkyu{
                    & div.txtBtn{
                        background: var(--deepgray);
                        color: var(--grayblack);
                        &::before{
                            display: none;
                        }
                        &:not(:last-child){
                            margin-right: var(--marginMiddle);
                        }
                        &:hover{
                            border-color:var(--deepgray);
                        }
                    }
                    @media (max-width: 1024px) {
                        display:block;
                        & div.txtBtn{
                            font-weight:normal;
                            width:180px;
                            &:not(:last-child){
                                margin-right: 0;
                                margin-bottom: var(--marginSmall);
                            }
                        }
                    }
                }
            }
            @media(max-width:1024px) {
                padding: var(--marginSmall);
                &:has(.busstop, .hotel){/*route-search*/
                    display:block;
                    & .btnWrap{
                        margin-top:var(--marginSmall);
                    }
                    & .txtBtn,
                    & .fixBtn{
                        width:150px;
                        padding:var(--marginSmall);
                    }
                    & .txtBtn{
                        margin-right:var(--marginSmall) !important;
                    }
                }
                &:has(.hotel){
                    & .fixBtn{
                        margin-left: auto !important;
                    }
                }
                & > p:not(:has(.busstop, .hotel)){
                    font-size:var(--submidashi);
                    padding-right:var(--marginSmall);
                }    
                & .btnWrap .txtBtn{
                    font-size:var(--fontMini);
                    margin:0 0 0 auto;
                    padding-left:35px;
                }
                & .btnWrap:has( a[href*="timetable"] ){
                    display:block;
                    & a{
                        width:180px;
                        &:not(:last-child) {
                            margin-right: 0;
                            margin-bottom: var(--marginSmall);
                        }
                    }
                }
            }
        }
        & p span{
            display: inline-block;
            padding: 3px 10px;
            margin-left: var(--marginSmall);
            font-size: var(--fontMini);
            font-weight: normal;
            &.stop{
                border-radius: var(--kadomaruMini);
                background: var(--red);
                color:var(--white);
                @media(max-width:1024px) {
                    width:fit-content;
                    display:block;
                    margin-top:var(--marginSmall);
                    margin-left:0;
                }
            }
            &.haneda{
                border-radius: var(--kadomaruMini);
                background: var(--haneda);
                color:var(--white);
            }
            &.narita{
                border-radius: var(--kadomaruMini);
                background: var(--narita);
                color:var(--white);
            }
            &.date{
                color: var(--red);
            }
            &.keywordsInfo{
                display: block;
                margin-left: 0;
                padding: 5px 0;
            }
        }
        @media(max-width:1024px) {
             p{
                line-height:1.6em;
                display:block;
                & span.haneda,
                & span.narita{
                    display:block;
                    width:fit-content;
                    margin-left:0;
                    margin-top:var(--marginSmall);
                } 
            }
        }
    }
}


/*-----keiro--------------*/
.resultCtrlWrap{
    display: flex;
    width:var(--primaryWidth);
    margin:var(--marginLarge) auto 0 auto;
    & .jumpWrap{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        & .jumpBtn{
            width:calc((var(--primaryWidth) - (var(--marginMiddle)*3)) /4 );
            &:not(:nth-child(4n)){
                margin-right:var(--marginMiddle);
            }
            &:nth-child(n + 5){
            margin-top:var(--marginSmall) ;
            }
        }
    }
    @media(max-width:1024px) {
        display:block;
        width:var(--spContainerWidth);
        margin:var(--marginMiddle) auto 0 auto;
        & .jumpWrap{
            display:block;
            & .jumpBtn{
                width:100%;
                font-size:var(--fontMini);
                & p::before{
                    width:15px;
                    height:15px;
                }
                &:nth-child( n + 2){
                    margin-top:var(--marginSmall) !important;
                }
            }
        }

    }
}
.container.keiroTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--black) !important;
    border-radius: var(--kadomaruUe) !important;
    & > *{
        color: var(--white) !important;
    }
    & a{
        font-size: var(--fontMini);
        & p::before{
            background: url(/img/icon_arrow_bottom_wh.svg) center / contain no-repeat;
        }
    }
    & + .container{
        margin:0 auto !important;
        border-radius: var(--kadomaruShita);
    }
}
.container.keiroCaution{
    font-weight: bold;
    border:4px solid var(--red);
    color: var(--red);
    background:#ffddc5;
}
@media(max-width:1024px) {
    .container.keiroCaution{
        border:var(--borderWidth) solid var(--red);
    }
}

.keiroBoby{
    & .spot{
        padding: 0 0 var(--marginSmall) 55px;
        display: flex;
        align-items: center;
        position: relative;
        &::before{
            content: "";
            position: absolute;
            left:0;
            width: 40px;
            height: 40px;
            z-index: 100;
        }
        &.hotel::before{
            background: url(/img/icon_hotel.svg) center / contain no-repeat;
        }
        &.busstop{
            display: flex;
            align-items: center;
/*            justify-content: space-between;*/
            &::before{
                background: url(/img/icon_busstop.svg) center / contain no-repeat;
            }    
        }
        & .name{
            font-weight: bold;
            font-size: var(--midashi);
        }  
        & .txtLinkNv{
            margin-left:var(--marginMiddle);
        }  
        @media(max-width:1024px) {
            padding: 0 0 var(--marginSmall) 38px;
            display:block !important;
            & .name + .txtLinkNv{
                display:block;
                margin-top:var(--marginSmall);
            }
            &::before{
                width: 30px;
                height: 30px;     
            }
            &.busstop:has( + .keiroSuggestWrap),
            &.busstop:has( + .trans){
                position:relative;
                &::after{
                    content:"";
                    position:absolute;
                    top:0;
                    left:13.5px;
                    width:10px;
                    height:calc(100% - 3px);
                }
            }
            &.busstop:has( + .keiroSuggestWrap){
                &::after{
                border-left:3px solid var(--grayblack);
                }
            }
            &.busstop:has( + .trans){
                &::after{
                border-left:3px dotted var(--grayblack);
                }
            }
            &:has( + .keiroSuggestWrap ){
                position:relative;
                &::after{
                    content:"";
                    position:absolute;
                    left:13.5px;
                    top:0;
                    width:3px;
                    height:100%;
                    border-left:3px solid var(--grayblack) !important;
                }
            }
            &:not(:has(a)){
                display:flex !important;
                align-items:center;
            }
            & .txtLinkNv{
                margin:0 0 0 auto;
            }      
        }
    }
    & .trans{
        margin-left:17.5px;
        padding: var(--marginMiddle) 0;
        &.walk,
        &.car,
        &.flight:has(.binDate){
            border-left:5px dotted var(--grayblack);
        }
        &.flight:has(.binDate){
            padding: 0  0 var(--marginMiddle) 0;
            & .binDate{
                margin-left:32.5px;
                margin-bottom:var(--marginMiddle);
                padding:var(--marginMiddle) 0;
                font-size: var(--fontMini);
                font-weight: bold;
                border-bottom: var(--borderWidth) var(--navy) solid;
                color:var(--navy);
                &:nth-child( n + 2 ){
                    margin-top: var(--marginSmall);
                }
                &:has(p:empty){
                    display: none !important;
                }
                @media(max-width:1024px) {
                    margin:var(--marginSmall) auto var(--marginSmall) 21.5px;
                    padding:var(--marginSmall) 0;
                    border-bottom: none !important;
                }
            }
        }
        & > p{
            margin-left:32.5px;/*55px - 40px + 17.5px*/
            padding:var(--marginMiddle);
            border-radius: var(--kadomaruMini);
            background: var(--gray);
        }
        &.flight:not(:has(.binDate)),/*dep Airport*/
        &.arr.flight/*arr Airport*/{
            display: flex;
            align-items: center;
            padding:0;
            position: relative;
            margin-left:0;
            & p{
                padding:0 0 0 20px;
                font-weight: bold;
                background: var(--white) !important;
            }
            &::before{
                content: "";
                position: absolute;
                left: 0;
                width: 40px;
                height: 40px;
                z-index: 100;
                background: url(/img/icon_airport.svg) center / contain no-repeat;
            }
        }
        &.flight:not(:has(.binDate)){
            margin-top:var(--marginSmall);
        }
        &.arr.flight{
            margin-bottom:var(--marginSmall);
        }
        @media(max-width:1024px) {
            margin-left:13.5px;
            padding:var(--marginSmall) 0;
            &.walk,
            &.car,
            &.flight:has(.binDate){
                border-left:3px dotted var(--grayblack);
            }
            &:has( + .spot){
                padding-bottom:var(--marginMiddle);
            }
            & p,
            &.flight .binDate{
                margin-left:21.5px;/*38px - 30px + 13.5px*/
            }
            &.flight .binDate p{
                margin-left:0;
            }
            &.flight:not(:has(.binDate)),
            &.arr.flight{
                & p{
                    padding:0 0 0 20px;
                }
                &::before{
                    width: 30px;
                    height: 30px;
                }
            }        }
    }
    .keiroSuggestWrap{
        margin-top:-3px;
        margin-left:17.5px;
        padding: 0 0 var(--marginLarge) 0;
        border-left:5px solid var(--grayblack);
        & .binDate{
            margin-left:32.5px;
            padding:var(--marginMiddle) 0;
            font-size: var(--fontMini);
            font-weight: bold;
            border-bottom: var(--borderWidth) var(--navy) solid;
            color:var(--navy);
            &:nth-child( n + 2 ){
                margin-top: var(--marginSmall);
            }
            & + div:not(:has(button)){
                margin-top:var(--marginMiddle);
            }    
        }
        & > div:not(.inner) > div:has(button){
            width: fit-content;
            margin:0 auto;
            & button{
                width:fit-content;
                margin-top:var(--marginSmall);
                padding-top:var(--marginSmall);
                padding-bottom:var(--marginSmall);
                border-radius: var(--kadomaruMini);
                background: var(--navy);
                color: var(--white);
                position: relative;
                &:hover{
                    background-color: var(--rightblue);
                    transition: var(--transSecShort);
                    color: var(--navy);
                }
                &:disabled{
                    padding-right:17.5px !important;
                    padding-left: 17.5px !important;
                    background-color: var(--gray);
                    color: var(--grayblack);
                    &::before{
                        content: "" !important;
                    }
                }    
                @media(max-width:1024px) {
                    margin-top:0 !important;
                }
            }
            &:first-child button{/*Previous*/
                padding-right:10px;
                padding-left: 25px;
                &::before{
                    content: "\025c0";
                    position: absolute;
                    left:5px;
                }
            }
            &:not(:first-child) button{/*Next*/
                padding-right: 25px;                    
                padding-left:10px;
                &::before{
                    content: "\025b6";
                    position: absolute;
                    right:5px;
                }        
            }
        }
        & .inner{
            display: grid;
            grid-template-columns: 5% 1fr;
            grid-template-rows: 1fr;
            margin-left:32.5px;/*55px - 40px + 17.5px*/
            &:nth-child(n + 2){
                margin-top: var(--marginSmall);
            }
        }
        & .numWrap{
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            display: flex;
            align-items: center;
            padding:var(--marginMiddle);
            border: var(--borderWidth) var(--navy) solid;
            border-radius: var(--kadomaruHidari);
            color:var(--white);
            background: var(--navy);
        }
        & .contWrap{
            grid-column: 2 / 3;
            grid-row: 1 / 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: var(--borderWidth) solid var(--deepgray);
            border-left: none;
            border-radius: var(--kadomaruMigi);        
            & .binTime{
                display: flex;
                align-items: center;
                padding:var(--marginMiddle);
                font-weight: bold;
            }    
            & .binDetail{
                width:350px;
                display: grid;
                grid-template-columns: 50% 1fr;
                grid-template-rows: 50% 50%;
                padding: var(--marginSmall);
                font-size: var(--fontMini);
                & .title{
                    width:fit-content;
                    padding: 2px 4px;
                    margin-right:5px;
                    border-radius: var(--kadomaruMini);
                    color: var(--white);
                    background: var(--black);
                }
                & .binCompany{
                    display: flex;
                    align-items: center;
                    grid-column: 1 / 2;
                    grid-row: 1 / 2;
                    & p:empty::after{
                        content:"－";
                        padding: 0 1em;
                    }
                }
                & .binFare{
                    display: flex;
                    align-items: center;
                    grid-column: 2 / 3;
                    grid-row: 1 / 2;
                }
                & .binSetsubi{
                    display: flex;
                    align-items: center;
                    margin-top:5px;
                    grid-column: 1 / 3;
                    grid-row: 2 / 3;
                    & img{
                        width: auto;
                        height:20px;
                    }
                    & img:not(:last-child){
                        margin-right: var(--marginSmall);
                    }
                    & img:not(.view){
                        display: none !important;
                    }
                }
            }
            & .binSeat{
                height: 100%;
                width:85px;
                padding:0 var(--marginMiddle);
                display: flex;
                align-items: center;
                font-size: var(--fontMini);
                &.ok{
                    font-weight: bold;
                    color: var(--navy);
                    background: var(--rightblue);
                }
                &.few{
                    font-weight: bold;
                    color: var(--red);
                    background: var(--rightred);
                }
                &.none{
                    color: var(--grayblack);
                    background: var(--gray);
                }
            }
            & .btnWrap{
                display: flex;
                align-items: center;
                padding:0 var(--marginSmall);
                & a.colorBtn,
                & .noActive{
                    padding:var(--marginSmall);
                    width:200px;
                    font-size: var(--fontMini);
                }
                & .noActive{
                    text-align: center;
                    border-radius: var(--kadomaru);
                    color:var(--grayblack);
                    background: var(--gray);
                }
            }
        }
        @media(max-width:1024px) {
            max-width:100%;
            margin-left:13.5px;
            padding:var(--marginSmall) 0 var(--marginMiddle) 0;
            border-left:3px solid var(--grayblack);
            & .inner,
            & .contWrap,
            & .binDetail{
                display: block !important;
                grid-template-columns:unset;
                grid-template-rows: unset;
            }
            & .binDate{
                margin:0 auto var(--marginSmall) 21.5px;
                padding:var(--marginSmall) 0;
                border-bottom: none !important;
            }
            & .inner{
                border-top:2px solid var(--navy);
                margin-left:21.5px;/*38px - 30px + 13.5px*/    
                & .numWrap{
                    width:45px;
                    height:40px;
                    border-radius: 0 0 var(--kadomaruMini) var(--kadomaruMini);
                }
                & .contWrap{
                    margin-top:-40px;
                    margin-bottom:var(--marginMiddle);
                    border:none;
                    & .binTime{
                        height:40px;
                        padding-left:55px;
                    }
                    & .binDetail{
                        width:100% !important;
                        padding:var(--marginMiddle) var(--marginSmall) var(--marginMiddle) 0;
                        font-size:(--fontSpMin) !important;
                        & > div{
                            width:100% !important;
                            & .title{
                                width:100px !important;
                                text-align:center;
                                & + :where( p, div){
                                    width:calc(100% - 85px);
                                }
                            }   
                        }
                        & .binFare{
                            margin-top:5px;
                        }
                    }
                    & .binSeat{
                        width:100%;
                        margin-bottom:var(--marginSmall);
                        padding:var(--marginSmall);
                    }
                    & .btnWrap{
                        padding:0 !important;
                        & a{
                            margin:0 0 0 auto;
                        }
                    }       
                }
            }
        }
    }
}


/*-----timetable--------------*/
.container:has(.timetableCheck){
    padding-bottom:calc(var(--marginContainer) - var(--marginSmall)) !important;
}
.timetableCheck{
    font-size:var(--fontMini);
    & .busstopsCheckWrap{
        display: flex;
        flex-wrap: wrap;
        & .busstop{
            margin-right:var(--marginSmall);
        }
        & .busstop:nth-child(4n){
            margin-right:0;
        }
    }
    & .all,
    & .busstop{
        position:relative;
        display: flex;
        align-items: center;
        max-height: fit-content;
        padding: var(--marginSmall);
        border-radius: var(--kadomaruMini);
        background: var(--gray);
        &::before{
            content: "";
            width: 20px !important;
            height: 20px !important;
            margin-right:var(--marginSmall);
            border: 2px solid var(--deepgray);  
            border-radius: var(--kadomaruMini);
            background: var(--white);
        }
        &:has(input[type="checkbox"]:checked){
            background: var(--rightorange);
            transition: var(--transSecShort);
            &::before{
                border: 2px solid var(--grayblack);  
            }
        }
        & p{
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:1;
            line-clamp: 1;
        }
        & input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position:absolute;
            width:100%;
            height:100%;
            cursor: pointer;
            &:checked:before {
                content: "";
                position: absolute;
                width:20px;
                height:20px;
                top:50%;
                transform: translateY(-50%);
                left:3px;
                background: url(/img/icon_check.svg) center / contain no-repeat;
            }
        }
        & input + p{
            width:calc(100% - 20px - var(--marginSmall)*2);
        }
        &:lang(en){
            min-height: 57.3px;
            & p{
                -webkit-line-clamp:2;
                line-clamp: 2;                
            }
            @media(max-width:1024px) {
                min-height: 53.5px;
            }
        }
    }
    & .all{
        width:100%;
        margin-bottom:var(--marginSmall);
    }
    & .busstop{
        width: calc((100% - var(--marginSmall)*3)/4);
        margin-bottom:var(--marginSmall);
    }
    @media(max-width:1024px) {
        padding-top:var(--marginMiddle);
        & .busstop{
            width: calc((100% - var(--marginSmall))/2);
            &:nth-child(2n){
                margin-right:0 !important;
            }
        }            
    }
}
.timetableCtrl{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--marginMiddle);
    & .inputWrap{/*calender-wrap*/
        width:300px;
        & .date{
            display: flex;
            align-items: center;
            & .subtitle{
                width: 70px;
                height: 70px;
                display: flex;
                align-items: center;    
                margin-right: 2px;
                padding:var(--marginSmall);
                border-radius: var(--kadomaruHidari);
                font-size: var(--fontMini);
                background: var(--rightorange);
                color:var(--black);
            }
        }
        & input[type="date"]{
            width: 300px;
            height: 70px;
            position: relative;
            padding: var(--marginMiddle) 60px var(--marginMiddle) var(--marginMiddle);
            border: var(--borderWidth) var(--deepgray) solid;
            color: var(--black);
        }
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle);
        display:block;
        & .inputWrap{
            width:100%;
            margin-bottom:var(--marginSmall);
            & input[type="date"]{
                width:calc(100% - 62px);
                height: 60px;
            }
            & .date{
                & .subtitle{
                    width: 60px;
                    height: 60px;    
                }
            }
        }
        & .txtBtn{
            width:fit-content;
            margin: 0 0 0 auto;
        }
    }
}

.timetableCaution{
    margin-bottom:10px;
    font-size:.8em;
    font-weight: bold;
    color: var(--cautionred);   
    @media(max-width:1024px) {
        font-weight: normal !important;
    }
}

.timetableWrap{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    & + .timetableWrap{
        margin-top:var(--marginMiddle);
    }
    & table{
        border-collapse: separate;
        font-size: var(--fontMini);
        padding-bottom: var(--marginSmall);
        /*-----------------scroll fix start*/
        & tr th:first-child,
        & tr td:nth-child(2),
        & .seatTitle,
        & .busNum,
        & .seatCont{
            position:-webkit-sticky;
            position: sticky;
            z-index:200 !important;
            top:0;
        }
        & tr th:first-child,
        & .busNum{
            left:2px;
        }
        & th.seatTitle,
        & td.seatCont{
            top:0;
            left:54px;
            @media(max-width:1024px) {
                position: sticky !important;    
                left:39px !important;
            }
        }
        & .companyTitle,
        & .companyCont{
            left:296px;
            @media(max-width:1024px) {
                left:161px;
            }
        }
        /*-----------------scroll fix end*/
        
        & tr:has(td.seatCont){
            height: 55px;
            &:nth-child(even) td{
                background:var(--gray);
            }
            &:nth-child(odd) td{
                background: var(--rightgray);
            }
        }
        & tr th:first-child{
            min-width: 50px;
            white-space: nowrap;
        }
        & th,
        & td{
            padding:var(--marginSmall);
            }
        & th{
            &:first-child{
                color:var(--white);
                background: var(--black);
            }
            &.seatTitle{
                max-width:180px !important;
                background:var(--rightorange);
                & p:nth-child( n + 2 ){
                    padding-top: var(--marginSmall);
                    font-weight: normal !important;
                    font-size: var(--fontMini);
                    text-align: left;
                }
            }
            &.companyTitle{
                background:var(--rightorange);
            }
            &.busstopTitle{
                min-width:115px !important;
                position: relative;
                padding-bottom: 90px;
                vertical-align: top;
                text-align: left;
                color: var(--white);
                background: var(--navy);
                & .fare{
                    position:absolute;
                    bottom:35px;
                    padding-top: var(--marginSmall);
                    /*white-space: nowrap;*/
                    font-weight: normal !important;
                    font-size: 0.78em;
                    & > span{
                        display: block;
                    }
                    & > span > span:first-child::after{
                        content: ":";
                        padding: 0 .5em;
                        text-align: center;
                    }
                }
                & a{
                    white-space:nowrap;
                    position:absolute;
                    left:50%;
                    transform: translateX(-50%);
                    bottom:var(--marginSmall);
                    &.txtLinkWh p:lang(en){
                        font-size:70%;
                    }
                }
            }
            &.busNum{
                position: sticky;
                top:0;
                left:2px;
                z-index:100;
                color: var(--white);
                background: var(--navy);
            }
        }
        & td{
            white-space:nowrap;
            &.seatCont{
                @media(min-width:1023px) {
                display:block;
                }
                &:not(:has(a)){
                    & p.status{
                        line-height: 2em;
                    }
                }
                & .none{
                    line-height: calc(55px - var(--marginMiddle));
                    color:var(--red);
                }
                & .status{
                    margin:var(--marginSmall) auto;
                    text-align: center;
                }
                & .txtBtn{
                    width:120px;
                    margin:0 auto;
                    & p{
                        max-width:94px;
                        white-space: wrap;   
                    }
                    &:lang(en){
                        min-width: 180px;
                    }
                }
            }
            &.time{
                text-align: center;
            }
        }
        @media(max-width:1024px) {
            & th{
                &:first-child{
                    min-width:35px !important;
                    max-width:35px;
                }
                &.busNum{
                    font-size:var(--fontSpMin) !important;
                }
                &.seatTitle{
                    min-width:95px !important;
                    max-width:95px !important;
                }
            }
            & td{
                &.seatCont{
                    min-width:95px !important;
                    white-space: wrap;
                    & .status{
                        margin-top:var(--marginSmall);
                    }
                    & .txtBtn{
                        width:80px !important;
                        margin-top:var(--marginSmall);
                        padding:3px;
                        border-radius:var(--kadomaruMini);
                        &::before{
                            width:12px;
                            height:12px;
                            left:5px !important;
                        }
                        & p{
                            padding-left:15px;
                            max-width:64px;
                        }
                    }
                }
                &.companyCont{
                    white-space: wrap;
                    font-size:var(--fontSpMin);
                    min-width:70px;
                }
            }
        }
    }
}

/*-----on-off_choice--------------*/
.onoffChoice{
    & .containerInner{
        padding-top:0 !important;
    }    
    & .searchTitle >  div{
        position: relative;
        & p{
            padding-right: 90px;
        }
        &::after{
            content: "";
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right:0;
            width:80px;
            height:20px;
        }
        &.on::after{
            background:url(/img/icon_bus-on.svg) center / contain no-repeat !important;
        }
        &.off::after{
            background:url(/img/icon_bus-off.svg) center / contain no-repeat !important;
        }
    }
    & .radioWrap{
        display: block !important;
        padding: 0 !important;
        
        & label{
            position: relative;
            display: flex;
            align-items: center;   
            height: 70px;
            padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 70px;
            border-radius: var(--kadomaru);
            border: var(--borderWidth) var(--deepgray) solid;
            &::before{
                content: "";
                position: absolute;
                left: var(--marginMiddle);
                width: 40px;
                height: 40px;
                background: var(--white);
                border: var(--borderWidth) var(--deepgray) solid;
                border-radius: 50%;
            }
            & p{
                display: flex;
                align-items: center;
            }
        }
        & input:checked{
            & + label p::before{
                content: "";
                position: absolute;
                left: calc(var(--marginMiddle) + 8px);
                width: 30px;
                height: 30px;
                background: var(--orange);
                border-radius: 50%;
            }
        }
        @media(max-width:1024px) {
            & label{
                padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 50px;
                &::before{
                    left: var(--marginSmall);
                    width: 30px;
                    height: 30px;
                }    
            }
            & input:checked + label p::before{
                left: calc(var(--marginSmall) + 7px);
                top:50%;
                transform:translateY(-50%);
                width: 20px;
                height: 20px;
            }
        }  
    }
}
& .onoffResult{
    position: relative;
    background: var(--rightgray);
    & div p:nth-child(2){
        padding-left: 1em;
        font-weight: bold;
        color:var(--navy);
    }
    & div:nth-child(2){
        padding-top: var(--marginSmall);
    };
    &  + .fixBtnWrap{
        margin-bottom:30px;
    }
    &  + .fixBtnWrap .fixBtn::before{       
        background: url(/img/icon_mf-bus.svg) center / contain no-repeat !important;  
    }
    &  + .fixBtnWrap .fixBtn:disabled::before{      
        background:none !important;
    }
}




/*-----FAQ,lost,contact--------------*/
.miniMenuWrap.supportMenuWrap{
    & .now,
    & .txtBtn{
        width:calc((var(--primaryWidth) - var(--marginMiddle)*2)/3);
    }
    & .now{
        display: flex;
        align-items: center;
        background:var(--rightgray);
        border-radius: var(--kadomaru);
        & p{
            min-width: fit-content;
            margin:0 auto;  
            text-align: center;
            color:var(--deepgray);
        }
    }
}
.faqWrap{
    & details{
        border: var(--borderWidth) var(--deepgray) solid;
        border-radius: var(--kadomaru);
        & div{
            position: relative;
            width: calc(100% - var(--marginSmall)*2);
            margin:0 auto var(--marginSmall) auto ;
            padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 60px;
            line-height: 1.5rem;
            border-radius: var(--kadomaruShita);
            background:var(--rightblue);
            animation: fadeIn 0.5s ease;
            &::before{
                content: "";
                position: absolute;
                width: 30px;
                height: 30px;
                top: 50%;
                transform: translateY(-50%);
                left: var(--marginMiddle);            
                background: url(/img/icon_faq_a.svg) center / contain no-repeat ;
            }
        }
        &:nth-child(n + 2){
            margin-top: var(--marginSmall);
        }
    }
    & summary{
        position: relative;
        display: flex;
        align-items: center;
        padding:var(--marginMiddle);
        font-weight: bold;
        &::after{
            content:"";
            position:absolute;
            right:var(--marginMiddle);
            width:20px;
            height:20px;
            background: url(/img/icon_plus.svg) center / contain no-repeat;
        }
        & p{
            padding-left: 35px;
            width:90%;
        }
        & p::before{
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            top: 50%;
            transform: translateY(-50%);
            left: var(--marginSmall);            
            background: url(/img/icon_faq_q.svg) center / contain no-repeat ;
        }
        &:hover,
        &:focus{
            color: var(--orange);
            transition: var(--transSecShort);
        }
    }
    & details[open] summary::after{
        transition: var(--transSec);
        background: url(/img/icon_minus.svg) center / contain no-repeat !important;      
    }
    & a{
        position: relative;
        display: inline-block;
        max-width: fit-content;
        padding-left: 17px;
        font-weight: bold;
        text-decoration: underline;
        color: var(--navy);
        &:hover,
        &:focus{
            color: var(--orange);
            transition: var(--transSecShort);
        }
        &::before{
            content: "";
            position:absolute;
            top:50%;
            transform: translateY(-50%);
            left:0;
            width:  var(--marginMiddle);
            height:  var(--marginMiddle);
            background: url(/img/icon_arrow-right-nv.svg) center / contain no-repeat;
        }
    }
    & .red{color: var(--cautionred);}
    & .blue{color: var(--haneda);}
    & .green{color: var(--narita);}
    & .orange{color: var(--orange);}
    & .ul{text-decoration: underline wavy;}
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle) !important;
    }
}
@keyframes fadeIn {
    0% {
      opacity: 0; 
      transform: translateY(-10px); 
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

.contactBtnCont{
    & label{
        display: block;
        margin-bottom: var(--marginLarge);
        & p{
            position: relative;
            padding:var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 63px;
            border-radius: var(--kadomaruMini);
            background: var(--rightgray);
            cursor: pointer;
            &::before{
                content: "";
                position: absolute;
                display: inline-block;
                top:50%;
                transform: translateY(-50%);
                left:var(--marginMiddle) ;
                width:30px;
                height: 30px;
                border:var(--borderWidth) solid var(--deepgray);
                border-radius: var(--kadomaruMini);
                background: var(--white);
            }
        }
        & input:checked + p{
            &::before{
                border:var(--borderWidth) solid var(--grayblack);
            }
            &::after{
                content: "";
                position: absolute;
                display: inline-block;
                top:50%;
                transform: translateY(-50%);
                left:var(--marginMiddle) ;
                width: 35px;
                height: 35px;
                background: url(/img/icon_check-or.svg) center / contain no-repeat;
            }
        }
    }
    & .colorBtn.noDeco{
        position: relative;
        display: block;
        margin:0 auto;
        width:50%;
        font-size: 120%;
        transition: var(--transSecShort);
        & p::before{
            content: "";
            position: absolute;
            width:20px;
            height: 20px;
            top:50%;
            transform: translateY(-50%);
            left:var(--marginSmall);
            background: url(/img/icon_window-wh.svg) center / contain no-repeat;
        }
        &:disabled,
        &:disabled:hover,
        &:disabled:focus {
            background: var(--gray) !important;
            border-color: var(--gray) !important;
            color: var(--grayblack) !important;
        }    
        @media(max-width:1024px) {
            width:90%;        
            font-size: 110%;
        }
    }
    & .colorBtn.noDeco + p{
        margin-top:var(--marginMiddle);
        text-align: center;
    }
}

/*-----lost--------------*/
.containerInner.search.lostWrap{
    & .radioWrap label:hover{
        transition: var(--transSec);
        color: var(--orange);
        border: var(--borderWidth) var(--orange) solid !important;
    }
    & .inputWrap{
        & .date{
            margin-top:var(--marginMiddle) !important;
            & input[type="date"]{
                width: 300px;
                @media(max-width:1024px) {
                    width: 100%;
                }
            }
        }
        & .how .radioWrap{
            @media(max-width:1024px) {
                display:block;
                margin-left:0 !important;
                & label{
                    margin-top:-15px;
                    &:nth-child(n+3){
                        margin-top:-12px !important;
                    }
                    &:not(:last-child){
                        margin-right:0;
                    }
                }   
            }            
        }
        & p.howDescription{
            padding-left:187.5px;
            font-size: var(--fontMini);
            color: var(--navy);
            @media(max-width:1024px) {
                padding-left:0 !important;
            }
        }
        & .lostBusstop{
            margin-top: var(--marginMiddle);
            display: flex;
            align-items: center;
            & .busstopList{
                width: fit-content;
                margin-left: var(--marginSmall);
                position: relative;
                display: flex;
                align-items: center;
                &::after{
                    content: "";
                    position: absolute;
                    right: var(--marginLarge);
                    width: 15px;
                    height: calc(tan(60deg) * 10px / 2);
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                    background: var(--navy);
                }
                & select{
                    width:300px;        
                    @media(max-width:1024px) {
                        width:100%;
                        margin-right:0;
                    }    
                }
                @media(max-width:1024px) {
                    margin-left:0;
                }
            }
            @media(max-width:1024px) {
               display:block;
            }
        }
        & .inner:has(.time){
            margin-top: 0 !important;
            justify-content:left;
            & .time{
                margin: var(--marginMiddle) auto auto var(--marginSmall);
            }
            @media(max-width:1024px) {
                & select{
                    
                }
             } 
        }
    }
    .fixBtnWrap.lostSearch{
        margin: var(--marginLarge) auto 0 auto;
        & .fixBtn{
            width:400px;
            padding: var(--marginMiddle);
            font-size: var(--submidashi);
            background: var(--navy);
            border: var(--borderWidth) var(--navy) solid;
            &:hover{
                background: var(--rightblue);
            }
            &:disabled{
                color: var(--deepgray);
                background: var(--gray);
                border: var(--borderWidth) var(--white) solid;
                &::before{
                    background: none;
                }
                &:hover,
                &:focus{
                    color: var(--deepgray);
                    background: var(--gray);
                    border: var(--borderWidth) var(--white) solid;
                }           
            }
            @media(max-width:1024px) {
                width:100% !important;
            }
        }   
    }
    & #lineResult{
        margin-top: var(--marginLarge);
        padding: var(--marginMiddle);
        border-radius: var(--kadomaruShita);
        background: var(--rightblue);
        & p:first-child{
            font-weight: bold;
        }
        & .subInfo div.main{
            margin: var(--marginMiddle) auto;
            text-align: center;
            font-size: var(--midashi);
            font-weight: bold;
        }
        & button{
            width: fit-content;
            margin: 0 0 0 auto;
            font-size: 1.1em;
        }
        & .radioWrap{
            align-items: center;
            margin-bottom: var(--marginMiddle);
            & label{
                position: relative;
                display: flex;
                align-items: center;   
                height: 70px;
                padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 70px;
                border-radius: var(--kadomaru);
                border: var(--borderWidth) var(--deepgray) solid;
                background: var(--white);
                cursor: pointer;
                &::before{
                    content: "";
                    position: absolute;
                    left: var(--marginMiddle);
                    width: 40px;
                    height: 40px;
                    background: var(--white);
                    border: var(--borderWidth) var(--deepgray) solid;
                    border-radius: 50%;
                }
                & p{
                    display: flex;
                    align-items: center;
                    & span:last-child{
                        margin-left:.5em;       
                    }
                    @media(max-width:1024px) {
                        
                    }
                }
            }
            & input:checked{
                & + label p::before{
                    content: "";
                    position: absolute;
                    left: calc(var(--marginMiddle) + 8px);
                    width: 30px;
                    height: 30px;
                    background: var(--orange);
                    border-radius: 50%;
                }
            }
            &:has( input:checked ){
                & input:not(:checked) + label{
                    transition: var(--transSec);
                    background: transparent !important;
                }
            }
            @media(max-width:1024px) {
                & label{
                    padding: var(--marginMiddle) var(--marginMiddle) var(--marginMiddle) 50px;
                    &::before{
                        left: var(--marginSmall);
                        width: 30px;
                        height: 30px;
                    }    
                }
                & input:checked + label p::before{
                    left: calc(var(--marginSmall) + 7px);
                    width:20px;
                    height: 20px;
                }
            }            
        }
    }    
    & .otherCompWrap{
        margin-top: var(--marginMiddle);
        padding: var(--marginMiddle);
        background: var(--rightgray);
        border-radius: var(--kadomaru);
        & .title{
            margin-bottom: var(--marginMiddle);
            font-size: 110%;
            text-align: center;
            font-weight: bold;
        }
        & > p{
            text-align: center;
        }
    }    
}


  
/*-----guide--------------*/
.guideBackWrap{
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto;
    & a{
        width: fit-content;
        margin:0 0 0 auto;
    }
    @media(max-width:1024px) {
        width: var(--spContainerWidth);
    }
}

/*-----company--------------*/
.companyTop{
    width:100%;
    height:200px;
    background: url(/img/bg_companytop.jpg) center / cover no-repeat;
}
.greeting{
    & p{
        line-height: 1.8em;
        & + p{
            display: block;
            width: fit-content !important;
            margin: auto 0 auto auto;
        }
    }
    & img{
        float: left;
        width:200px;
        margin-right: var(--marginLarge);
        border-radius: var(--kadomaru);
    }
    @media(max-width:1024px) {
        & img{
            display:block;
            float:none;
            margin-left:0;           
            margin: 0 auto var(--marginMiddle) auto !important;
        }
    }
}
.companyOutline{
    width:100%;
    line-height: 1.5em;
    border-collapse: collapse;
    & th,
    & td{
        padding: var(--marginMiddle);
        text-align: left;
        border:1px var(--deepgray) solid;
    }
    & th{
        width:170px;
        vertical-align: top;
        background: var(--gray);
    }
    & ul{
        width:calc(100% - 2.5em) !important;
        margin: var(--marginSmall) 0 0 auto;
        list-style-type: decimal;
    }
    & table{
        width: 100%;
        margin: 0 auto;
        margin-top: var(--marginSmall);
        font-size: var(--fontMini);
        border-collapse: collapse;
        & caption{
            padding-bottom: var(--marginSmall);
            text-align: left;
            font-weight: bold;
        }
        & th{
            text-align: center;
            background: var(--rightgray);
        }
        & .num{
            text-align: right;
        }   
        &.stock{
            & td:first-child{
                width:50%;
            }          
        }
    }
    @media(max-width:1024px) {
        font-size:var(--fontMini);
        & ul{
            width:85%;
        }
        & th{
            width:100px;
        }
        & th,
        & td{
            padding: var(--marginSmall);
        }
    }
}
.outlineMain{
    & div{
        display: flex;
    }
    & img{
        object-fit: contain;
        object-position: top;
        margin-top:0;
        & + p{
            padding-left: var(--marginMiddle);
        }
    }
    & .title{
        display: flex;
        align-items: center;
        display: block;
        margin-bottom: var(--marginSmall);
        padding:var(--marginSmall);
        font-weight: bold;
        color: var(--navy);
        background: var(--gray);
    }
    &:nth-child( n + 2 ){
        margin-top: var(--marginMiddle);
    }
    @media(max-width:1024px) {
        &:first-child{
        margin-top:var(--marginMiddle) !important;
        }
    }
}
.addressWrap{
    display: flex;
    @media(max-width:1024px) {
        display: block;
        margin-top:var(--marginMiddle) !important;
    }
}
.addressImgWrap{
    padding-right: var(--marginMiddle);
    font-size: var(--fontMini);
    & div:nth-child(2){
        margin-top:var(--marginSmall);
    }
    @media(max-width:1024px) {
        text-align:center;
        padding-right: 0;
        margin-bottom:var(--marginSmall);
        & img{
            width:200px !important;
            margin: 0 auto !important;
        }
    }
}
.addressTxtWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & div{
        width:49%;
        & .title{
            display: block;
            margin-bottom: var(--marginSmall);
            padding:var(--marginSmall);
            font-weight: bold;
            color: var(--navy);
            background: var(--gray);
        }
        &:nth-child( n + 3){
            margin-top: var(--marginMiddle);
        }
    }
}
.historyWrap{
    & table{
        width:100%;
        border-collapse: collapse;
        line-height: 1.5em;
        & th,
        & td{
            padding: var(--marginMiddle);
            text-align: left;
            vertical-align: top;
            border:1px var(--grayblack) solid;
        }
        & th{
            background: var(--rightorange);
        }
        @media(max-width:1024px) {
            font-size:var(--fontMini);
            & th,
            & td{
                padding: var(--marginSmall);
            }
        }      
    }
}
.serviceImgWrap{
    display: flex;
    margin: var(--marginMiddle) auto;
    & > div img{
        width: 100%;
    }
    & > div p{
        margin-top:var(--marginSmall);
        text-align: center;
        font-size: var(--fontMini);
        color: var(--grayblack);
    }
    &.pct3{
        justify-content: space-between;
        & > img,
        & > div{
        width: calc((100% - var(--marginMiddle)*2) / 3);
        }
    }
    &.pct2{
        justify-content: center;
        & > img{
            width: 380px;
        }
        & > img:last-child,
        & > div:last-child{
            margin-left:var(--marginMiddle);
        }
        @media(max-width:1024px) {
            & > img{
                width:calc((100% - var(--marginSmall)) / 2);
            }
            & > img:last-child,
            & > div:last-child{
                margin-left:var(--marginSmall);
            }    
        }
    }
    &:last-child{
        margin-bottom: 0;
    }
}
.lastLead{
    width: var(--primaryWidth);
    margin:var(--marginLarge) auto 0 auto;
    font-size: var(--midashi);
    text-align: center;
    font-weight: bold;
    color: var(--orange);
    & p{
        line-height: 2em;
    }
}
.ontimeGridWrap{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr;
    & div:nth-child(1){
        grid-column: 1 / 3;
        margin-bottom: var(--marginMiddle);
    }
    & div:nth-child(2){
        grid-column: 1 / 2;
        grid-row: 2  / 3;
    }
    & div:nth-child(3){
        grid-column: 2 / 3;
        grid-row: 2  / 3;
    }
    & img{
        display: block;
        margin:0 auto;
    }
    @media(max-width:1024px) {
        display:block;
        grid-template-columns:unset;
        grid-template-rows:unset;
        & img{
            max-width:100%;
        }
    }
}
.safetyWrap{
    & .txtContLinkWrap{
        margin-top: var(--marginMiddle);
    }
}
.charterWrap{
    margin-bottom: var(--marginMiddle);
    display: flex;
    align-items: flex-start;
    & img{
        margin-right: var(--marginMiddle);
    }
}
.charterLineup{
    & .singlImgWrap{
        margin-top: var(--marginMiddle);
    }
    & .someImgWrap{
        margin-bottom:var(--marginMiddle);
        & img{
            width:400px;
            &:nth-child( n + 3){
                margin-top: var(--marginSmall);
            }
            &:nth-child(odd){
                margin-right: var(--marginSmall);
            }
            @media(max-width:1024px) {
                width:100%;
                &:nth-child( n + 3){
                    margin-top: 0;
                }
                &:nth-child(odd){
                    margin-right: 0;
                }
                &:not(:last-child){
                    margin-bottom:var(--marginSmall) !important;
                }
            }    
        }
    }
}
.webregWrap{
    margin-top:var(--marginMiddle);
}
.ADinfoWrap{
    & table{
        width: 90%;
        margin:var(--marginMiddle) auto 0 auto;
        border-collapse: collapse;
        & th,
        & td{
            padding: var(--marginMiddle);
            text-align: left;
            line-height: 1.8em;
            border: 1px solid var(--grayblack);
            & ul{
                width:92%;
                margin:0 auto;
            }
        }
        & th{
            background: var(--rightorange);
        }
        & thead th{
            text-align: center !important;
        }
    }
    & img{
        max-width: 100%;
    }
    & .someImgWrap{
        margin-bottom: var(--marginMiddle);
        & img:not(:last-child){
            margin-right: var(--marginMiddle);
        }
        &.bussample img{
            width: 300px;
        }
    }
    & :where(.tableAddInfo, table) + .subMidashi{
        margin-top: var(--marginMiddle);
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle) !important;
        & table{
            width:100%;
        }
        & .someImgWrap{
            & img:not(:last-child){
                margin-right: 0 !important;
            }
            &.bussample img{
                width: 90%;
            }
        }       
    }
}

/*-----terms--------------*/
.termsWrap{
    & :where( p, .addInfoWrap, .txtBtn.single,) + .subMidashi{
        margin-top: calc(var(--marginSmall)*3);
    }
    & p.seitei{
        width:fit-content;
        margin:0 0 0 auto;
    }
    & > ul{
        margin: var(--marginMiddle) auto var(--marginMiddle) var(--marginMiddle);
        line-height: 1.8em;
        & li{
            position: relative;
            list-style: none;
            padding-left:1.2em;
            &::before{
                position: absolute;
                content:"\025cf";
                left:0;
                color: var(--grayblack);
            }
        }
    }
    & p.miniMidashi{
        margin-top: var(--marginSmall);
        font-weight: bold;
    }
    & p a{
        display: inline;
        font-weight: bold;
        color: var(--navy);
        text-decoration: underline;
        &:hover{
            color:var(--orange);
            transition: var(--transSecShort);
        }
    }
    & .addInfoWrap ul{
        margin: 0 auto;
        line-height: 1.5em;
        & li{
            position: relative;
            list-style: none;
            padding-left:1.1em;
            &::before{
                position: absolute;
                content:"\02022";
                left:0;
            }
        }
    }
    & .sign{
        width: fit-content;
        margin: var(--marginMiddle) 0 0 auto;
        font-size: var(--fontMini);
    }
    & a.shita{
        width: fit-content;
        margin: var(--marginSmall) 0 0 auto;
        font-size: var(--fontMini);
    }
    & .cookieSetLinWrap{
        margin:var(--marginSmall) auto var(--marginLarge) 1em;
        & a{
            margin-top:var(--marginSmall);
        }
    }
    & .numListWrap{
        margin:var(--marginSmall) auto var(--marginSmall) 1em;
        &:has( + p.subMidashi){
            margin-bottom:var(--marginLarge);
        }
    }
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle) !important;
    }
}

/*-----sitemap--------------*/
.sitemapWrap{
    & .title{
        margin-bottom: var(--marginMiddle);
        padding:var(--marginSmall);
        font-weight: bold;
        color: var(--navy);
        background: var(--gray);
    }
    & .inner{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin:var(--marginMiddle) auto 0 auto;
        & > div{
            width:calc((100% - var(--marginMiddle)*2)/3);
            &:not(:last-child){
                padding-bottom: var(--marginMiddle);
            }
        }
        & .txtLink{
            width:100%;
            padding:var(--marginSmall);
        }
        @media(max-width:1024px) {
            display:block;
            & > div{
                width:100%;
            }
        }
    }
}

/*-----oshirase-honbun--------------*/
.oshiraseWrap{
    & .inner{
        display: flex;
        align-items: center;
    }
    & .day{
        font-weight: bold;
        margin-right:var(--marginMiddle);
    }
    & .status{
        display: inline-block;
        width:fit-content;
        padding:var(--marginSmall) var(--marginMiddle);
        border-radius: var(--kadomaruMini);
        font-size: var(--fontMini);
        color:var(--white);
    }
    & .oshirase{
        background: var(--orange);        
    }
    & .zyuyo{
        background: var(--red);
    }
    & .articleTitle{
        padding:var(--marginMiddle) 0 ;
        line-height: 1.5em;
        font-size: var(--midashi);
        font-weight: bold;
        & span{
            color: var(--red) !important;
        }
    }
}

/*-----airport--------------*/
.airsearch{
    & .inner{
        margin-bottom: var(--marginMiddle) !important;
    }
    @media(max-width:1024px) {
        & > p:first-child{
            padding-top:var(--marginMiddle);
        }
        & .radioWrap{
            justify-content:space-between;
            margin-left:0 !important;
            & label{
                width:49%;
                &:not(:last-child){
                    margin-right:0 !important;
                }    
            }
        }
    }
}
.fixBtnWrap.air{
    margin: var(--marginLarge) auto 0 auto;
    & .fixBtn{
        width:400px;
        padding: var(--marginMiddle);
        font-size: var(--submidashi);
        &.hnd{
            background: var(--haneda);
            border: var(--borderWidth) var(--haneda) solid;
            &:hover,
            &:focus{
                background: var(--hanedaRight);
            }    
        }
        &.nrt{
            background: var(--narita);
            border: var(--borderWidth) var(--narita) solid;
            &:hover,
            &:focus{
                background: var(--naritaRight);
            }    
        }
        &:disabled{
            color: var(--deepgray);
            background: var(--gray);
            border: var(--borderWidth) var(--white) solid;
            &::before{
                background: none;
            }
            &:hover,
            &:focus{
                color: var(--deepgray);
                background: var(--gray);
                border: var(--borderWidth) var(--white) solid;
            }           
        }
        & + p{
            color: var(--navy);
            margin-top: var(--marginMiddle);
            text-align: center;
            font-size: var(--fontMini);
        }
        @media(max-width:1024px) {
            width:100% !important;
        }
    }   
}
#airSearchResult{
    margin-top: var(--marginLarge);
    padding: var(--marginMiddle);
    border-radius: var(--kadomaruShita);
    background: var(--rightblue);
    & .subInfo div.main{
        margin: var(--marginMiddle) auto;
        text-align: center;
        font-size: var(--midashi);
        font-weight: bold;
    }
    & button{
        width: fit-content;
        margin: 0 0 0 auto;
        font-size: 1.1em;
    }
}
.containerInner:where(.hnd, .nrt) .CMSinfoWrap{
    margin-bottom: var(--marginMiddle);
    padding: var(--marginMiddle);
    border-radius: var(--kadomaru);
    background: var(--rightblue);
    @media(max-width:1024px) {
        margin-top:var(--marginMiddle);
    }   
}
.airportInfoWrap{
    &:nth-child(n + 2){
        margin-top: var(--marginMiddle);
    }
    & a{
        font-weight: bold;
        &+ a{
            margin-top: var(--marginSmall);
        }
    }
    @media(max-width:1024px) {
        margin-top: var(--marginMiddle);
        & .mapWrap{
            width:100% !important;
        }
    }
}

/*-----bording--------------*/
.containerInner p a[href*="webservice"]{/*mypage-link*/
    position: relative;
    display: inline-block;
    width:fit-content;
    padding-left:1.2em;
    margin:0 .2em;
    font-weight: bold;
    color: var(navy) !important;
    text-decoration: underline;
    cursor: pointer;
    &:hover,
    &:focus{
        transition: var(--transSecShort);
        color:var(--orange);
    }
    &::before{
        position: absolute;
        display: block;
        content: "";
        width: 1em;
        height: 1em;
        background: url(/img/icon_arrow-right-nv.svg) center / contain no-repeat !important;
        top:50%;
        transform: translateY(-50%);
        left:0;
    }
}
.QRbtn{
    position: relative;
    width: 500px;
    margin: 0 auto;
    padding:var(--marginLarge);
    text-align: center;
    font-weight: bold;
    border-radius: var(--kadomaru);
    border: var(--borderWidth) var(--orange) solid;
    background: var(--orange);
    color: var(--white) !important;
    & p{
        text-align: center;
    }
    & p::before{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left:var(--marginLarge);
        content: "";
        width:60px;
        height: 60px;
        background: url(/img/icon_QR_view.svg) center / contain no-repeat;
    }
    &:hover,
    &:focus{
        color: var(--black) !important;
        background: var(--rightorange);
        transition: var(--transSec);
    }
    @media(max-width:1024px) {
        width:85% !important;
        padding:var(--marginLarge) var(--marginLarge) var(--marginLarge) 72px;
        & p::before{
            left:var(--marginSmall);
            width:40px;
            height: 40px;
        }
    }    
}
.bordingWrap{
    & .baseInfoWrap:first-child:has(.spot){
        position: relative;
        &::before{
            position: absolute;
            content: "";
            top:calc(var(--marginMiddle)*2 + 1.5em);
            left:calc(var(--marginMiddle) + 12.5px);
            width:3px;
            height: 100%;
            background: var(--grayblack);
        }
    }
    & .baseInfoWrap:nth-child(2):has(.spot){
        margin-top:var(--marginMiddle);
    }
    & .txtLinkNv{
        width: fit-content;
        margin:var(--marginMiddle) 0 0 auto;
        font-size: var(--fontMini);
    }
    & .spot{
        position: relative;
        padding:var(--marginMiddle);
        font-weight: bold;
        border-radius:var(--kadomaru);
        background: var(--rightblue);
        & p{
            display: flex;
            align-items: center;    
            padding-left:40px;
            &::before{
                position:absolute;
                left:var(--marginMiddle);
                content: "";
                width:30px;
                height: 30px;
                background: url(/img/icon_busstop.svg) center / contain no-repeat;
            }
        }
    }    
    @media(max-width:1024px) {
        & .baseInfoWrap,
        & .baseInfoWrap .inner{
            display:block;
        }
        & .baseInfoWrap .inner .infoCont{
            padding-left:0;
            width:100% !important;
            & p{
                width:100%;
            }
        }
    }
}
.bordingSpot{
    max-width:calc( var(--primaryWidth) - 100px);
    margin: var(--marginMiddle) 0 0 auto;
    & .CMSinfoWrap{
        margin: var(--marginMiddle) 0;
        padding:var(--marginMiddle);
        font-size: var(--fontMini);
        border-radius: var(--kadomaru);
        background: var(--rightgray);
    }
    @media(max-width:1024px) {
        max-width:calc( var(--primaryWidth) - 40px);
    }
}
.QRcopy{/*denso*/
    width: var(--primaryWidth);
    margin: var(--marginLarge) auto 0 auto;
    font-size:0.7em;
    color: var(--grayblack);
}

/*-----externallink,error--------------*/
.externalLink,
.errorInfo{
    text-align: center;
    & .siteNameWrap{
        margin:var(--marginMiddle) auto;
        padding:var(--marginMiddle);
        line-height: 1.8em;
        background: var(--rightgray);
        & p:nth-child(2){
            font-weight: bold;
        }
    }
    & > p{
        margin-bottom: var(--marginMiddle);
    }
    & h2 + p{
        margin-top:var(--marginMiddle);
    }
    & a{
        width:450px;
        &.colorBtn{
            margin:0 auto var(--marginMiddle) auto;
            &:not(:has( + .txtBtn)){
                margin: 0 auto !important;
            }
        }
        &.txtBtn{
            margin:0 auto;
        }
    }
    @media(max-width:1024px) {
        text-align:left;
        & a{
            width:80%;
        }
    }

}


/*-----text-size-responsive--------------*/
/*-----Small--------*/
body.textSmall{
    & *:not(
        .textSizeFix,
        .textSizeFix *,
        header *
        ){
        font-size:90%;
    }
}
/*-----Medium--------*/
/*body.textMedium{
    & *{
    }
}*/
/*-----Large--------*/
body.textLarge{
    padding-bottom:500px !important; /* for footer*/
    &:not(:lang(ja)){
            padding-bottom:600px; /* for footer*/
    }
    @media (max-width: 1024px) {
        padding-bottom:0 !important; /* for footer*/
    }
    & *:not(
        .textSizeFix,
        .textSizeFix *,
        header *,
        #pankuzu,
        .areaMap
        ){
        font-size:110%;
    }
    & #navSkip,
    & :where(#navLogin, #navTextChange, #navLanguage) p,
    & #copyright p{
        font-size: 80% !important;
    }
    & #pankuzu{
        font-size: 60% !important;
        & a:first-child{
            width: 6em !important;
        }
    }
    #backTop .backtopLink{
        & p{
            padding-bottom:100px;
            &:not(:lang(ja)){
            /*&:lang(en){*/
                padding-bottom:200px;
            }
            @media (max-width: 1024px) {
                padding-bottom:0 !important; /* for footer*/
            }        
        }
    }
    & .txtBtn p,
    & #mainFunc,
    & .txtLink p,
    & .txtBtn p{
        font-size: 90% !important;
    }
    & .txtBtn p,
    & button p{
        text-align:left !important;
    }
    & button p{
        display: flex;
        align-items: center;
        padding-left: 40px;
    }
    & .search{
        & button p{
            min-height: 3.2em;
        }
        & .subtitle{
            font-size: 70% !important;
        }
        & :where(input, input + label, select, .num, .exchange){
            font-size: 80% !important;
        }
        & .inputWrap{
            & :where(.timeHH, .timeMM)::after{
                @media (max-width: 1024px) {
                    
                }
            }
            & select[name="inCarrierCode"] + input[name="airFlight"]{
                width:100%;
            }        
            & .inner .depOrArr > div{
                width:fit-content !important;
            }
            & .inner .depOrArr > div label{
                width:100px;
                &:lang(en){
                    width: fit-content;
                    min-width: 100px;
                    font-size:70% !important;
                    @media(max-width:1024px) {
                    }
                }
                & p {
                    font-size: 70% !important;
                    line-height: 1.2em;
                }    
            }
        }
        & :where(.timeHH, .timeMM) p{
            font-size: 60% !important;
        }
    }
    & .lineWrap .inner{
        display: block !important;
        & .txtWrap{
            width: 100%;
            margin-bottom:var(--marginMiddle);
        }
        & .txtBtn + .txtBtn{
            margin-top: var(--marginMiddle);
        }
        & .statusWrap{
            & .status{
                font-size: 70% !important;
            }
            @media(max-width:1024px) {
                display: block !important;
                padding:0 !important;
                & .status + .status{
                    margin-top: var(--marginSmall);
                }    
            }
        }
    }
    & .AirBtnWrap a{
        display: flex;
        align-items: center;
        width: fit-content;
        & p{
            padding: var(--marginMiddle) 50px;
            @media(max-width:1024px) {
                padding: var(--marginSmall) 40px;
            }
        }
    }
    & .airsearch{
        @media(max-width:1024px) {
            & .radioWrap{
                flex-wrap:wrap;
                & label{
                    width:100%;
                }
            }
            & label[for="howAirCompany"]{
                margin-top:4px;
            }
        }
    }
    & .areaMap{
        & button{
            padding:var(--marginSmall) !important;
            & p{
                font-size: 50% !important;
            }
        }
    }
    & .timetableCtrl .txtBtn p{
        font-size:70% !important;
    }
    & .timetableCheck{
        font-size: 65% !important;
        & .busstopsCheckWrap{
            @media(max-width:1024px) {
                display: block !important;
                padding-bottom:var(--marginSmall);
                & div{
                    width: 100% !important;
                }
            }
        }
        & .all,
        & .busstop{
            &:lang(en){
                min-height: 81.9px;
            }
        }
    }
    & .timetableCtrl{
        & .inputWrap .date .subtitle,
        & .inputWrap .date .subtitle p{
            width:150px !important;
            text-align: center;
            font-size:80% !important;
        }
        & input[type="date"]{
            width:400px;
        }
        @media(max-width:1024px) {
            & .inputWrap .date{
                display: block !important;
                & .subtitle{
                    width: 100% !important;
                    margin-bottom:2px;
                    border-radius: var(--kadomaru) var(--kadomaru) 0 0;
                    text-align: center !important;
                    & p{
                        width: 100% !important;
                    }
                }
                & input{
                    width: 100% !important;
                }
            }
        }
    }
    & .timetableWrap{
        font-size:60% !important;
        & .seatTitle p:nth-child(2),
        & .busstopTitle{
            font-size:80% !important;
        }
        & .fare{
            font-size:80% !important;
        }
        & table th.busstopTitle a.txtLinkWh p:lang(en) {
            font-size:80% !important;
        }
        & table td.seatCont .txtBtn{
            width:250px;
            & p{
                max-width:100% !important;
            }
        }
    }
    .keiroBoby {
        @media (max-width: 1024px) {
            & .keiroSuggestWrap {
                & .contWrap {
                    & .binTime{
                        height:4em;
                        marign-top:var(--marginMiddle) !important;
                        & p{
                            line-height:1.2em !important;
                        }
                    }
                    & .binTitle{
                        height: fit-content !important;
                    }
                    & .binDetail :where(.binCompany, .binFare, .binSetsubi) {
                        display: block !important;
                        & .title{
                            width:100% !important;
                            font-size:80% !important;
                            text-align: left;
                        }
                        & p{
                            width:100% !important;
                        }
                    }
                    & .btnWrap a.colorBtn{
                        width:100% !important;
                        & p{
                            padding-left:30px;
                        }
                    }
                }
            }
        }  
    }
}