@charset "UTF-8";

.pagetopInfoWrap:has(.summary) + section .containerInner,
.operationStatusTxt{
/*--------------all-------*/
    line-height: 1.8em;
    & img{
        display: block;
        width:fit-content;
        max-width:99%;
        margin:var(--marginSmall) auto 0 auto;
        border-radius: var(--kadomaruMini);
        &:not( :has(+ .midashi)){
            margin-top:0;
            margin-bottom: var(--marginSmall);
        }
    }
    & a{
        display: inline-block;
        position: relative;
        width: fit-content;
        margin: 0 4px;
        color: var(--navy);
        text-decoration: underline;
        font-weight: bold;
        &:hover{
            color: var(--orange);
            transition: var(--transSecShort);
        }
        &::before,
        &::after{
            content: "";
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            width:15px;
            height: 15px;
        }
        &[href*="www.limousinebus.co.jp"],
        &:not([href^="http"]){
            padding-left: 17px;
            &::before{
                left: 0;
                background:url(/img/icon_arrow-right-nv.svg)  center / contain no-repeat !important;
            }
        }
        &:not([href*="www.limousinebus.co.jp"]):has([href^="http"]){
            padding-right: 20px;
            &::before{
                right: 0;
                background:url(/img/icon_window.svg)  center / contain no-repeat;
            }
        }
    }
    /*--------------div-wrap-------*/
    & .kakoi{
        margin: var(--marginSmall) auto;
        padding:var(--marginMiddle);
        border-radius: var(--kadomaru);
        &:first-child{
            margin-top: 0;
        }
        &:last-child{
            margin-top: var(--marginLarge);
        }
        &.nuri{
            background: var(--rightblue);
        }
        &.sen{
            background: var(--white);
            border: var(--borderWidth) var(--navy) solid;
            color: var(--navy);
        }
        & :where(.midashi, .nakamidashi, .komidashi):first-child{
            margin-top:0;
            padding-top:0;
        }
    }
    & .kugiri{
        width: 100%;
        height: 2px;
        margin: var(--marginSmall) 0;
        background: var(--gray);
    }
    & ul{
        width:95%;
        margin:0 auto;
        list-style: none;
        & li{
            position: relative;
        }
        & li::before{
            content: "";
            position: absolute;
            top:.5em;
            left:-2%;
            width:8px;
            height:8px;
            border-radius: 50%;
            background: var(--rightorange);
        }
        &.num{
            list-style: decimal;
            & li::before{
                display: none;
            }
        }
    }
    & .kakoi ul{
        & li::before{
            background: var(--navy);
        }
    }
    & table{
        width:100%;
        margin-bottom: var(--marginMiddle);
        border-collapse: collapse;
        & th{
            padding:var(--marginSmall);
            background: var(--rightorange);
            border: 1px solid var(--grayblack);
        }
        & td{
            padding:var(--marginSmall);
            border: 1px solid var(--grayblack);
        }
    }
    & .imgWrapHalf{
        width:100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        & img{
            max-width: 50%;
            margin:0 5px;
        }
    }
    /*--------------span-color-size-------*/
    & .red{
        color: var(--cautionred);
    }
    & .blue{
        color: var(--haneda);
    }
    & .green{
        color: var(--narita);
    }
    & .orange{
        color: var(--orange);
    }
    & .gray{
        color: var(--grayblack);
    }
    & .mini{
        font-size: var(--fontMini);
    }
    & .big{
        font-size: var(--midashi);
    }

    /*--------------div-decoration-------*/
    & .midashi{
        position: relative;
        display: flex;
        align-items: center;
        padding:var(--marginMiddle) 0 var(--marginMiddle) 22px;
        font-weight: bold;
        font-size: var(--midashi);
        &::before{
            content: "";
            position: absolute;
            left: 0;
            width:15px;
            height: 15px;
            background: var(--orange);
        }
        &:first-child{
            padding-top: 0;
        }
        &:not(:first-child){
            margin-top: var(--marginMiddle);
        }
    }
    & .nakamidashi{
        position: relative;
        display: flex;
        align-items: center;
        padding:var(--marginSmall) 0 var(--marginSmall) 15px;
        font-weight: bold;
        font-size: var(--submidashi);
        &::before{
            content: "";
            position: absolute;
            left: 0;
            width:10px;
            height: 10px;
            background: var(--navy);
        }
    }
    & .komidashi{
        font-weight: bold;  
    }
    /*--------------span-text-decoration-------*/
    & .namisen{
        text-decoration: underline wavy;
    }
/*--end*/
    & *:first-child{
        margin-top:0 !important;
    }
    & *:last-child{
        margin-bottom:0 !important;
    }
}

/*--------------how to reserve-------*/
details.howToReserve{
    width:100%;
    margin-bottom:var(--marginMiddle);
    & summary{
        position: relative;
        padding:var(--marginMiddle);
        font-weight: bold;
        font-size: 105%;
        border:var(--borderWidth) solid var(--deepgray);
        & p{
            padding-right:23px;
        }
        &:hover{
            color: var(--orange);
            cursor: pointer;
            transition: var(--transSecShort);
        }
        &::after{
            content: "";
            position: absolute;
            background: url(/img/icon_arrow_bottom_nv.svg) center / contain no-repeat;
            width:20px;
            height: 20px;
            top:50%;
            transform: translateY(-50%);
            right: var(--marginMiddle);
        }
    }
    &[open] summary::after{
        background: url(/img/icon_arrow_up_nv.svg) center / contain no-repeat;
    }
    & summary + div{
        padding:var(--marginMiddle);
        &.WEB{
            display: grid;
            grid-template-rows: 1fr; /*ll + 21 */
            grid-template-columns: 33% 33% 1fr/*3columns*/;
            & .full{
                grid-column: 1 / 4;
            }  
            & .half-big{
                grid-column: 1 / 3;
                &:not(.arrow){
                    margin-right:var(--marginSmall);
                }
            }
            & .half-small{
                grid-column: 3 / 4;
            }
            & .minimum1{
                grid-column: 1 / 2;
            }
            & .minimum2{
                grid-column: 2 / 3;
                &:not(.arrow){
                    margin:0 var(--marginSmall);
                }
            }
            & .minimum3{
                grid-column: 3 / 4;
            }
        }    
    }
    & summary + div > div{
        text-align: center;
        @media(max-width:1024px) {
            text-align:left;
        }
        &.nuri{
            padding:var(--marginMiddle);
            color:var(--white);
            background: var(--orange);
            border:1px solid var(--orange);
        }
        &.nuki{
            padding:var(--marginMiddle);
            background: var(--white);
            border:1px solid var(--orange);
        }
        &.arrow{
            width: 0;
            height: 0;
            display:block;
            border-style: solid;
            border-width: 20px 60px 0 60px;
            border-color: var(--rightorange) transparent transparent transparent;
            margin:20px auto;
        }
        & p.mini{
            font-size: var(--fontMini);
        }
        & p.caution{
            color: var(--orange);
        }
    }
}